fix: 迭代优化

src/app.tsx

@@ -7,7 +7,7 @@ import RightContent from '@/components/RightContent';
 import Footer from '@/components/Footer';
 import { BookOutlined, LinkOutlined } from '@ant-design/icons';
 import Service from '@/pages/user/Login/service';
-import { service as SystemConfigService } from '@/pages/system/Config';
+// import { service as SystemConfigService } from '@/pages/system/Config';
 import Token from '@/utils/token';
 import type { RequestOptionsInit } from 'umi-request';
 import ReconnectingWebSocket from 'reconnecting-websocket';
@@ -38,7 +38,15 @@ export async function getInitialState(): Promise<{
   const fetchUserInfo = async () => {
     try {
       const user = await Service.queryCurrent();
-      return user.result;
+      const detail = await Service.userDetail();
+      // console.log(user.result,'user')
+      return {
+        ...user.result,
+        user: {
+          ...user.result.user,
+          avatar: detail.result.avatar,
+        },
+      };
     } catch (error) {
       history.push(loginPath);
     }
@@ -218,7 +226,7 @@ const MenuItemIcon = (
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
 export const layout: RunTimeLayoutConfig = ({ initialState }) => {
-  // console.log({ ...initialState });
+  console.log({ ...initialState });
   return {
     navTheme: 'light',
     headerTheme: 'light',
@@ -293,9 +301,14 @@ export function patchRoutes(routes: any) {
 
 export function render(oldRender: any) {
   if (history.location.pathname !== loginPath && history.location.pathname !== bindPath) {
-    SystemConfigService.getAMapKey().then((res) => {
+    // SystemConfigService.getAMapKey().then((res) => {
+    //   if (res && res.status === 200 && res.result) {
+    //     localStorage.setItem(SystemConst.AMAP_KEY, res.result.apiKey);
+    //   }
+    // });
+    Service.settingDetail('api').then((res) => {
       if (res && res.status === 200 && res.result) {
-        localStorage.setItem(SystemConst.AMAP_KEY, res.result.apiKey);
+        localStorage.setItem(SystemConst.AMAP_KEY, res.result.api);
       }
     });
     MenuService.queryOwnThree({ paging: false }).then((res) => {

src/components/DashBoard/header.tsx

@@ -21,6 +21,7 @@ export interface HeaderProps {
    */
   closeInitialParams?: boolean;
   defaultTime?: TimeType;
+  showTime?: boolean;
 }
 
 export default forwardRef((props: HeaderProps, ref) => {
@@ -64,7 +65,7 @@ export default forwardRef((props: HeaderProps, ref) => {
             <Col span={props.extraParams ? 18 : 24}>
               <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                 <Form.Item noStyle name={'time'}>
-                  <RangePicker defaultTime={props.defaultTime} />
+                  <RangePicker defaultTime={props.defaultTime} showTime={props.showTime} />
                 </Form.Item>
               </div>
             </Col>

src/components/DashBoard/timePicker.tsx

@@ -18,16 +18,17 @@ interface ExtraTimePickerProps extends Omit<DatePickerProps, 'onChange' | 'value
   onChange?: (data: ValueType) => void;
   value?: ValueType;
   defaultTime?: TimeType;
+  showTime?: boolean;
 }
 
 export const getTimeByType = (type: TimeType) => {
   switch (type) {
     case TimeKey.week:
-      return moment().subtract(6, 'days').startOf('day').valueOf();
+      return moment().subtract(6, 'days').valueOf();
     case TimeKey.month:
-      return moment().subtract(29, 'days').startOf('day').valueOf();
+      return moment().subtract(29, 'days').valueOf();
     case TimeKey.year:
-      return moment().subtract(365, 'days').startOf('day').valueOf();
+      return moment().subtract(365, 'days').valueOf();
     default:
       return moment().startOf('day').valueOf();
   }
@@ -49,7 +50,7 @@ export default (props: ExtraTimePickerProps) => {
   };
 
   const timeChange = (type: TimeType) => {
-    const endTime = moment(new Date()).endOf('day').valueOf();
+    const endTime = moment(new Date()).valueOf();
     const startTime: number = getTimeByType(type);
     setRadioValue(type);
     change(startTime, endTime, type);
@@ -65,6 +66,7 @@ export default (props: ExtraTimePickerProps) => {
         // @ts-ignore
         <DatePicker.RangePicker
           {...extraProps}
+          showTime={props.showTime}
           value={
             value && [
               moment(value && value.start ? value.start : new Date()),

src/components/RightContent/AvatarDropdown.tsx

@@ -110,7 +110,12 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
   return (
     <HeaderDropdown overlay={menuHeaderDropdown}>
       <span className={`${styles.action} ${styles.account}`}>
-        <Avatar size="small" className={styles.avatar} src={currentUser.user.avatar} alt="avatar" />
+        <Avatar
+          size="small"
+          className={styles.avatar}
+          src={currentUser.user.avatar || require('/public/images/user-default.png')}
+          alt="avatar"
+        />
         <span className={`${styles.name} anticon`}>{currentUser.user.name}</span>
       </span>
     </HeaderDropdown>

src/locales/zh-CN/pages.ts

@@ -4,7 +4,7 @@ export default {
   'pages.login.success': '登录成功！',
   'pages.login.username.placeholder': '用户名',
   'pages.login.password.placeholder': '密码',
-  'pages.login.captcha.placeholder': '请输入验证码！',
+  'pages.login.captcha.placeholder': '请输入验证码',
   'pages.login.submit': '登录',
   'pages.welcome.alertMessage': '更快更强的重型组件，已经发布。',
   'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看',

src/pages/account/Center/index.tsx

@@ -44,6 +44,12 @@ const Center = () => {
   bGroundMap.set('dingtalk', require('/public/images/notice/dingtalk-background.png'));
   bGroundMap.set('wechat-webapp', require('/public/images/notice/wechat-background.png'));
 
+  const getDetail = () => {
+    service.getUserDetail().subscribe((res) => {
+      setData(res.result);
+      setImageUrl(res.result.avatar);
+    });
+  };
   const uploadProps: UploadProps = {
     showUploadList: false,
     accept: 'image/jpeg,image/png',
@@ -72,6 +78,7 @@ const Center = () => {
           .subscribe((res) => {
             if (res.status === 200) {
               setImageUrl(info.file.response.result);
+              getDetail();
               message.success('上传成功');
             }
           });
@@ -80,12 +87,6 @@ const Center = () => {
     },
   };
 
-  const getDetail = () => {
-    service.getUserDetail().subscribe((res) => {
-      setData(res.result);
-      setImageUrl(res.result.avatar);
-    });
-  };
   const saveInfo = (parms: UserDetail) => {
     service.saveUserDetail(parms).subscribe((res) => {
       if (res.status === 200) {
@@ -126,10 +127,12 @@ const Center = () => {
   }, []);
 
   useEffect(() => {
+    console.log(data);
     if (data?.name) {
       const item = {
         ...initialState?.currentUser?.user,
         name: data.name,
+        avatar: data.avatar,
       };
       setInitialState({
         ...initialState,

src/pages/device/DashBoard/index.tsx

@@ -8,10 +8,11 @@ import { useRequest } from 'umi';
 import DashBoard, { DashBoardTopCard } from '@/components/DashBoard';
 import type { EChartsOption } from 'echarts';
 import Echarts from '@/components/DashBoard/echarts';
-import moment from 'moment';
+// import moment from 'moment';
 import { AMap } from '@/components';
 import { Marker } from 'react-amap';
 import { EnvironmentOutlined } from '@ant-design/icons';
+import SystemConst from '@/utils/const';
 
 type RefType = {
   getValues: Function;
@@ -31,6 +32,7 @@ const DeviceBoard = () => {
   const [month, setMonth] = useState(0);
   const [day, setDay] = useState(0);
   const [point, setPoint] = useState([]);
+  const [amapKey, setAmapKey] = useState<any>();
 
   const ref = useRef<RefType>();
 
@@ -85,20 +87,21 @@ const DeviceBoard = () => {
     const res = await service.dashboard([
       {
         dashboard: 'device',
-        object: 'status',
-        measurement: 'record',
-        dimension: 'aggOnline',
+        object: 'session',
+        measurement: 'online',
+        dimension: 'agg',
         group: 'aggOnline',
         params: {
           state: 'online',
           limit: 15,
           from: 'now-15d',
           time: '1d',
+          format: 'yyyy-MM-dd',
         },
       },
     ]);
     if (res.status === 200) {
-      const x = res.result.map((item: any) => item.data.timeString);
+      const x = res.result.map((item: any) => item.data.timeString).reverse();
       const y = res.result.map((item: any) => item.data.value);
       setYesterdayCount(y?.[1]);
       setOnlineOptions({
@@ -112,7 +115,7 @@ const DeviceBoard = () => {
           show: false,
         },
         grid: {
-          top: '2%',
+          top: '5%',
           bottom: 0,
         },
         tooltip: {
@@ -124,7 +127,7 @@ const DeviceBoard = () => {
         series: [
           {
             name: '在线数',
-            data: y,
+            data: y.reverse(),
             type: 'bar',
             itemStyle: {
               color: '#2F54EB',
@@ -182,8 +185,8 @@ const DeviceBoard = () => {
       setDay(oneDay);
       setMonth(thisMonth);
       const today = res.result.filter((item: any) => item.group === 'today');
-      const x = today.map((item: any) => item.data.timeString);
-      const y = today.map((item: any) => item.data.value);
+      const x = today.map((item: any) => item.data.timeString).reverse();
+      const y = today.map((item: any) => item.data.value).reverse();
       setDeviceOptions({
         tooltip: {
           trigger: 'axis',
@@ -241,7 +244,7 @@ const DeviceBoard = () => {
   const getEcharts = async () => {
     const data = ref.current!.getValues();
     if (data) {
-      console.log(Math.ceil((data.time.end - data.time.start) / (1 * 24 * 3600 * 1000) + 1));
+      // console.log(Math.ceil((data.time.end - data.time.start) / (1 * 24 * 3600 * 1000) + 1));
       const res = await service.dashboard([
         {
           dashboard: 'device',
@@ -253,14 +256,16 @@ const DeviceBoard = () => {
             time: '1d',
             format: 'yyyy.MM.dd',
             limit: Math.ceil((data.time.end - data.time.start) / (1 * 24 * 3600 * 1000) + 1),
-            from: moment(data.time.start).format('yyyy-MM-DD'),
-            to: moment(data.time.end).format('yyyy-MM-DD'),
+            // from: moment(data.time.start).format('yyyy-MM-DD HH:MM:SS'),
+            // to: moment(data.time.end).format('yyyy-MM-DD HH:MM:SS'),
+            from: data.time.start,
+            to: data.time.end,
           },
         },
       ]);
       if (res.status === 200) {
-        const x = res.result.map((item: any) => item.data.timeString);
-        const y = res.result.map((item: any) => item.data.value);
+        const x = res.result.map((item: any) => item.data.timeString).reverse();
+        const y = res.result.map((item: any) => item.data.value).reverse();
         setOptions({
           xAxis: {
             type: 'category',
@@ -269,13 +274,44 @@ const DeviceBoard = () => {
           yAxis: {
             type: 'value',
           },
+          tooltip: {
+            trigger: 'axis',
+            // axisPointer: {
+            //   type: 'shadow',
+            // },
+          },
+          grid: {
+            top: '2%',
+            bottom: '5%',
+            left: '2%',
+            right: '2%',
+          },
           series: [
             {
+              name: '消息量',
               data: y,
-              type: 'bar',
-              barMaxWidth: 20,
-              itemStyle: {
-                color: '#2F54EB',
+              type: 'line',
+              smooth: true,
+              color: '#685DEB',
+              areaStyle: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#685DEB', // 100% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#FFFFFF', //   0% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
               },
             },
           ],
@@ -287,7 +323,6 @@ const DeviceBoard = () => {
   const geo = async (data?: any) => {
     const res = await service.getGeo(data);
     if (res.status === 200) {
-      console.log(res.result.features);
       setPoint(res.result.features);
     }
   };
@@ -300,6 +335,11 @@ const DeviceBoard = () => {
     geo({});
   }, []);
 
+  useEffect(() => {
+    const api = localStorage.getItem(SystemConst.AMAP_KEY);
+    setAmapKey(api);
+  }, [localStorage.getItem(SystemConst.AMAP_KEY)]);
+
   return (
     <PageContainer>
       <div className={'device-dash-board'}>
@@ -375,54 +415,57 @@ const DeviceBoard = () => {
           ref={ref}
           height={500}
           defaultTime={'week'}
+          showTime={true}
           onParamsChange={getEcharts}
         />
-        <Card style={{ marginTop: 10 }}>
-          <div
-            style={{
-              fontSize: '16px',
-              fontWeight: 'bold',
-              marginBottom: 10,
-            }}
-          >
-            设备分布
-          </div>
-          <div>
-            <AMap
-              AMapUI
+        {amapKey && (
+          <Card style={{ marginTop: 10 }}>
+            <div
               style={{
-                height: 500,
-                width: '100%',
+                fontSize: '16px',
+                fontWeight: 'bold',
+                marginBottom: 10,
               }}
             >
-              {point.map((item: any) => (
-                //@ts-ignore
-                <Marker
-                  position={{
-                    longitude: item.geometry.coordinates?.[0],
-                    latitude: item.geometry.coordinates?.[1],
-                  }}
-                >
-                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                    <div
-                      style={{
-                        backgroundColor: '#666666',
-                        color: 'white',
-                        textAlign: 'center',
-                        marginBottom: 5,
-                      }}
-                    >
-                      {item.properties.deviceName}
-                    </div>
-                    <div>
-                      <EnvironmentOutlined style={{ color: 'blue', fontSize: 22 }} />
+              设备分布
+            </div>
+            <div>
+              <AMap
+                AMapUI
+                style={{
+                  height: 500,
+                  width: '100%',
+                }}
+              >
+                {point.map((item: any) => (
+                  //@ts-ignore
+                  <Marker
+                    position={{
+                      longitude: item.geometry.coordinates?.[0],
+                      latitude: item.geometry.coordinates?.[1],
+                    }}
+                  >
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                      <div
+                        style={{
+                          backgroundColor: '#666666',
+                          color: 'white',
+                          textAlign: 'center',
+                          marginBottom: 5,
+                        }}
+                      >
+                        {item.properties.deviceName}
+                      </div>
+                      <div>
+                        <EnvironmentOutlined style={{ color: 'blue', fontSize: 22 }} />
+                      </div>
                     </div>
-                  </div>
-                </Marker>
-              ))}
-            </AMap>
-          </div>
-        </Card>
+                  </Marker>
+                ))}
+              </AMap>
+            </div>
+          </Card>
+        )}
       </div>
     </PageContainer>
   );

src/pages/device/Instance/Detail/Modbus/index.tsx

@@ -380,9 +380,9 @@ const Modbus = () => {
                 code: res.message,
                 result: {
                   data: res.result.data,
-                  pageIndex: 0,
-                  pageSize: 0,
-                  total: 0,
+                  pageIndex: res.result.pageIndex,
+                  pageSize: res.result.pageSize,
+                  total: res.result.total,
                 },
                 status: res.status,
               };

src/pages/device/Product/index.tsx

@@ -6,6 +6,7 @@ import {
   DownloadOutlined,
   EditOutlined,
   EyeOutlined,
+  PlayCircleOutlined,
   PlusOutlined,
   StopOutlined,
 } from '@ant-design/icons';
@@ -19,7 +20,7 @@ import { useEffect, useRef, useState } from 'react';
 import Save from '@/pages/device/Product/Save';
 import SearchComponent from '@/components/SearchComponent';
 import { getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
-import { AIcon, PermissionButton, ProTableCard } from '@/components';
+import { PermissionButton, ProTableCard } from '@/components';
 import ProductCard from '@/components/ProTableCard/CardItems/product';
 import { downloadObject } from '@/utils/util';
 import { service as categoryService } from '@/pages/device/Category';
@@ -209,7 +210,7 @@ const Product = observer(() => {
       type={'link'}
       isPermission={permission.action}
     >
-      {record.state ? <StopOutlined /> : <AIcon type={'icon-fabu'} />}
+      {record.state ? <StopOutlined /> : <PlayCircleOutlined />}
     </PermissionButton>,
     <PermissionButton
       key="unBindUser"
@@ -559,7 +560,7 @@ const Product = observer(() => {
                 type={'link'}
                 isPermission={permission.action}
               >
-                {record.state ? <StopOutlined /> : <AIcon type={'icon-fabu'} />}
+                {record.state ? <StopOutlined /> : <PlayCircleOutlined />}
                 {intl.formatMessage({
                   id: `pages.data.option.${record.state ? 'disabled' : 'enabled'}`,
                   defaultMessage: record.state ? '禁用' : '启用',

src/pages/system/Basis/index.tsx

@@ -56,6 +56,7 @@ const Basis = () => {
     if (res.status === 200) {
       const basis = res.result?.filter((item: any) => item.scope === 'basis');
       const api = res?.result.filter((item: any) => item.scope === 'api');
+      localStorage.setItem(SystemConst.AMAP_KEY, api[0].properties.api);
       // console.log(basis?.[0])
       setImageUrl(basis[0].properties?.logo);
       form.setFieldsValue({
@@ -102,7 +103,6 @@ const Basis = () => {
   };
 
   useEffect(() => {
-    console.log(initialState);
     detail(['basis', 'api']);
   }, []);
 
@@ -151,12 +151,20 @@ const Basis = () => {
             </div>
             <Upload {...uploadProps}>
               {imageUrl ? (
-                <img src={imageUrl} alt="avatar" style={{ width: '100%', height: '100%' }} />
+                <img
+                  src={imageUrl}
+                  alt="avatar"
+                  onError={() => {
+                    setImageUrl(require('/public/images/img-miss.png'));
+                  }}
+                  style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                />
               ) : (
                 uploadButton
               )}
             </Upload>
           </div>
+          <div style={{ paddingTop: 215, color: '#a2a5a7' }}>推荐分辨率200*200</div>
         </div>
         <div>
           <PermissionButton

src/pages/user/Login/service.ts

@@ -56,6 +56,10 @@ const Service = {
     request(`/${SystemConst.API_BASE}/system/config/${scopes}`, {
       method: 'GET',
     }),
+  userDetail: () =>
+    request(`/${SystemConst.API_BASE}/user/detail`, {
+      method: 'GET',
+    }),
 };
 
 export default Service;