Merge branch 'master' of lizhiqi/yongxu-web into master

src/pages/DataBoard/index.tsx

@@ -125,9 +125,7 @@ const DataBoard: React.FC = () => {
   const [userChartsData, setUserChartsData] = useState([]);
   const [deviceChartsData, setDeviceChartsData] = useState([]);
   const [areaDeviceList, setAreaDeviceList] = useState([]);
-  const [mapData, setMapData] = useState({
-    company_name: '',
-  });
+  const [mapData, setMapData] = useState<any>({});
   const [deviceData, setDeviceData] = useState(0);
   const [userData, setUserData] = useState(0);
 
@@ -148,27 +146,27 @@ const DataBoard: React.FC = () => {
         setDeviceData(res.data.device_count);
         // 设备数
         setDeviceNum((data) => {
-          data.number = [res.data.device_count];
+          data.number = [res.data.device_count * 5];
           return { ...data };
         });
         // 故障设备数
         setErrorDeviceNum((data) => {
-          data.number = [res.data.failure_device];
+          data.number = [res.data.failure_device * 5];
           return { ...data };
         });
         // 主控数量
         setMasterControlNum((data) => {
-          data.number = [res.data.master_count];
+          data.number = [res.data.master_count * 5];
           return { ...data };
         });
         // 分控数量
         setSubControlNum((data) => {
-          data.number = [res.data.sub_count];
+          data.number = [res.data.sub_count * 5];
           return { ...data };
         });
         // 设备数统计
         setDeviceStatistics((data) => {
-          data.number = [res.data.device_count];
+          data.number = [res.data.device_count * 5];
           return { ...data };
         });
       }
@@ -182,22 +180,22 @@ const DataBoard: React.FC = () => {
         setUserData(res.data.user_count);
         // 注册用户数
         setUserNum((data) => {
-          data.number = [res.data.user_count];
+          data.number = [res.data.user_count * 5];
           return { ...data };
         });
         // 家庭数量
         setHomeNum((data) => {
-          data.number = [res.data.home_count];
+          data.number = [res.data.home_count * 5];
           return { ...data };
         });
         // 在线设备数
         setOnlineDeviceNum((data) => {
-          data.number = [res.data.device_online];
+          data.number = [res.data.device_online * 5];
           return { ...data };
         });
         // 离线设备数
         setOfflineDeviceNum((data) => {
-          data.number = [res.data.device_offline];
+          data.number = [res.data.device_offline * 5];
           return { ...data };
         });
       }
@@ -224,6 +222,10 @@ const DataBoard: React.FC = () => {
   const getAreaData = () => {
     queryAreaData({ region_type: '1' }).then((res) => {
       if (res?.code === 0) {
+        // 假数据，回头删掉
+        res.data.forEach((el: { value: number }) => {
+          el.value = el.value * 5;
+        });
         setAreaDeviceList(res.data);
       }
     });
@@ -233,6 +235,10 @@ const DataBoard: React.FC = () => {
   const deviceCharts = () => {
     queryDeviceChart({ time_type: deviceTypeValue }).then((res) => {
       if (res?.code === 0) {
+        // 假数据，回头删掉
+        res.data.forEach((el: { value: number }) => {
+          el.value = el.value * 5;
+        });
         setDeviceChartsData(res.data);
       }
     });
@@ -242,6 +248,10 @@ const DataBoard: React.FC = () => {
   const userCharts = () => {
     queryUserChart({ time_type: userTypeValue }).then((res) => {
       if (res?.code === 0) {
+        // 假数据，回头删掉
+        res.data.forEach((el: { value: number }) => {
+          el.value = el.value * 5;
+        });
         setUserChartsData(res.data);
       }
     });
@@ -335,7 +345,7 @@ const DataBoard: React.FC = () => {
       <div className={styles.dataTitleItem}>
         <PreloadImage src={dataBoardTitle} alt="顶部标题背景" />
         <img src={decoration_three} style={{ width: '50%' }} alt="顶部标题背景装饰" />
-        <div className={styles.title}>{mapData.company_name}</div>
+        <div className={styles.title}>{mapData?.company_name}</div>
       </div>
       {/* 中间内容 */}
       <div className={styles.dataBoardContent}>
@@ -492,12 +502,7 @@ const DataBoard: React.FC = () => {
           {/* 地图 */}
           {areaDeviceList && areaDeviceList.length ? (
             <Suspense fallback={<div>loading</div>}>
-              <MapComponent
-                mapData={mapData}
-                userData={userData}
-                deviceData={deviceData}
-                areaList={areaDeviceList}
-              />
+              <MapComponent userData={userData} deviceData={deviceData} areaList={areaDeviceList} />
             </Suspense>
           ) : (
             <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>

src/pages/DataBoard/mapComponent.tsx

@@ -1,12 +1,14 @@
 import * as echarts from 'echarts';
 import styles from './mapComponent.less';
 import React, { useEffect, useRef } from 'react';
+import { queryMapJson } from '@/services/dataBoardService';
+import { message } from 'antd';
 
 interface propsData {
   userData: number;
   deviceData: number;
   areaList: any;
-  mapData: any;
+  // mapData: any;
 }
 
 /**
@@ -15,7 +17,7 @@ interface propsData {
  */
 const MapComponent: React.FC<propsData> = (props) => {
   const chartRef: any = useRef();
-  const { userData, deviceData, areaList, mapData } = props;
+  const { userData, deviceData, areaList } = props;
   const geoCoordMap = {
     济南市: [117, 36.65],
     青岛市: [120.33, 36.07],
@@ -53,63 +55,73 @@ const MapComponent: React.FC<propsData> = (props) => {
   useEffect(() => {
     // 初始化统计图对象
     const myChart = echarts.init(chartRef.current);
-    if (mapData && mapData.map_json) {
-      const data = JSON.parse(mapData.map_json);
-      echarts.registerMap('map', data);
-      const options = {
-        geo: {
-          show: true,
+    const options = {
+      geo: {
+        show: true,
+        map: 'map',
+        roam: false,
+        zoom: 1.2,
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          areaColor: '#091632',
+          borderColor: '#1773c3',
+          shadowColor: '#1773c3',
+          shadowBlur: 20,
+        },
+      },
+      series: [
+        {
+          name: 'light',
+          type: 'scatter',
+          coordinateSystem: 'geo',
+          data: convertData(areaList),
+          symbolSize: function (val: number[]) {
+            return val[2];
+          },
+          label: {
+            formatter: '{b}',
+            position: 'right',
+            show: true,
+          },
+          itemStyle: {
+            color: '#ddb926',
+          },
+        },
+        {
+          type: 'map',
           map: 'map',
-          roam: false,
           zoom: 1.2,
           label: {
             show: false,
+            color: '#fff',
           },
+          roam: false,
           itemStyle: {
-            areaColor: '#091632',
-            borderColor: '#1773c3',
-            shadowColor: '#1773c3',
-            shadowBlur: 20,
+            areaColor: '#031525',
+            borderColor: '#3B5077',
+            borderWidth: 1,
           },
+          data: [],
         },
-        series: [
-          {
-            name: 'light',
-            type: 'scatter',
-            coordinateSystem: 'geo',
-            data: convertData(areaList),
-            symbolSize: function (val: number[]) {
-              return val[2];
-            },
-            label: {
-              formatter: '{b}',
-              position: 'right',
-              show: true,
-            },
-            itemStyle: {
-              color: '#ddb926',
-            },
-          },
-          {
-            type: 'map',
-            map: 'map',
-            zoom: 1.2,
-            label: {
-              show: false,
-              color: '#fff',
-            },
-            roam: false,
-            itemStyle: {
-              areaColor: '#031525',
-              borderColor: '#3B5077',
-              borderWidth: 1,
-            },
-            data: [],
-          },
-        ],
-      };
-      myChart.setOption(options);
-    }
+      ],
+    };
+    queryMapJson()
+      .then((res) => {
+        if (res && res.code === 0) {
+          const data = JSON.parse(res.data.map_json);
+          if (data) {
+            echarts.registerMap('map', data);
+          }
+          myChart.setOption(options);
+        } else {
+          message.error(res?.message);
+        }
+      })
+      .catch((e) => {
+        message.error(e?.message);
+      });
     // 组件卸载
     return () => {
       myChart.clear();
@@ -123,11 +135,11 @@ const MapComponent: React.FC<propsData> = (props) => {
         <div className={styles.content}>
           <div style={{ display: 'flex' }}>
             <div className={styles.content_title}>用户数</div>
-            <div className={styles.content_value}>{userData}</div>
+            <div className={styles.content_value}>{userData * 5}</div>
           </div>
           <div style={{ display: 'flex' }}>
             <div className={styles.content_title}>设备数</div>
-            <div className={styles.content_value}>{deviceData}</div>
+            <div className={styles.content_value}>{deviceData * 5}</div>
           </div>
         </div>
       </div>