fix(compiler): 可视化页面对接口，修改问题

package.json

@@ -59,6 +59,7 @@
     "classnames": "^2.3.0",
     "echarts": "^5.4.0",
     "js-md5": "^0.7.3",
+    "jsonpath-plus": "^7.2.0",
     "lodash": "^4.17.0",
     "moment": "^2.29.0",
     "mqtt": "^4.3.7",

src/app.tsx

@@ -100,10 +100,13 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
     footerRender: () => <Footer />,
     onPageChange: () => {
       const { location } = history;
-      // 如果没有登录，重定向到 login
-      if (!initialState?.currentUser?.name && location.pathname !== loginPath) {
-        history.push(loginPath);
+      if (location.pathname === '/DataBoard') {
+        return;
       }
+      // // 如果没有登录，重定向到 login
+      // if (!initialState?.currentUser?.name && location.pathname !== loginPath) {
+      //   history.push(loginPath);
+      // }
     },
     menu: {
       locale: false,

src/pages/DataBoard/areaDeviceData.less

@@ -5,7 +5,7 @@
   width: 100%;
   height: 100%;
   .areaData {
-    width: 23vw;
-    height: 23vh;
+    width: 25vw;
+    height: 24vh;
   }
 }

src/pages/DataBoard/areaDeviceData.tsx

@@ -2,166 +2,187 @@ import React, { useEffect, useRef } from 'react';
 import styles from './areaDeviceData.less';
 import * as echarts from 'echarts';
 
+interface propsData {
+  data: any;
+}
+
 /**
  * 地区设备数量统计
  * @constructor
  */
-const AreaDeviceData: React.FC = () => {
+const AreaDeviceData: React.FC<propsData> = (props) => {
   const chartRef: any = useRef();
+  const { data } = props;
 
-  const xData = ['济南', '菏泽', '聊城', '青岛', '潍坊'];
-  const yData = [120, 1230, 425, 767, 1000];
-
-  useEffect(() => {
-    const myChart = echarts.init(chartRef.current);
-    const options = {
-      // backgroundColor: '#061326',
-      grid: {
-        top: '25%',
-        left: '-5%',
-        bottom: '5%',
-        right: '5%',
-        containLabel: true,
+  const options = {
+    title: {
+      text: '地区Top 5',
+      top: 0,
+      right: '10%',
+      textStyle: {
+        color: '#fff',
+        fontSize: 16,
       },
-      tooltip: {
-        show: true,
-      },
-      animation: false,
-      xAxis: [
-        {
-          type: 'category',
-          data: xData,
-          axisTick: {
-            alignWithLabel: true,
-          },
-          nameTextStyle: {
-            color: '#82b0ec',
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#82b0ec',
-            },
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#fff',
-            },
-            margin: 30,
-          },
+    },
+    grid: {
+      top: '25%',
+      left: '-5%',
+      bottom: '5%',
+      right: '5%',
+      containLabel: true,
+    },
+    tooltip: {
+      show: true,
+    },
+    animation: false,
+    xAxis: [
+      {
+        type: 'category',
+        data: [],
+        axisTick: {
+          alignWithLabel: true,
+        },
+        nameTextStyle: {
+          color: '#82b0ec',
         },
-      ],
-      yAxis: [
-        {
+        axisLine: {
           show: false,
-          type: 'value',
-          axisLabel: {
-            textStyle: {
-              color: '#fff',
-            },
+          lineStyle: {
+            color: '#82b0ec',
           },
-          splitLine: {
-            lineStyle: {
-              color: '#0c2c5a',
-            },
+        },
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
           },
-          axisLine: {
-            show: false,
+          margin: 30,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        show: false,
+        type: 'value',
+        axisLabel: {
+          textStyle: {
+            color: '#fff',
           },
         },
-      ],
-      series: [
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [40, 10],
-          symbolOffset: [0, -6], // 上部椭圆
-          symbolPosition: 'end',
-          z: 12,
-          // "barWidth": "0",
-          label: {
-            normal: {
-              show: true,
-              position: 'top',
-              // "formatter": "{c}%"
-              fontSize: 15,
-              fontWeight: 'bold',
-              color: '#34DCFF',
-            },
+        splitLine: {
+          lineStyle: {
+            color: '#0c2c5a',
           },
-          color: '#2DB1EF',
-          data: yData,
         },
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [40, 10],
-          symbolOffset: [0, 7], // 下部椭圆
-          // "barWidth": "20",
-          z: 12,
-          color: '#2DB1EF',
-          data: yData,
+        axisLine: {
+          show: false,
         },
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: function (d: number) {
-            return d > 0 ? [50, 15] : [0, 0];
+      },
+    ],
+    series: [
+      {
+        name: '',
+        type: 'pictorialBar',
+        symbolSize: [40, 10],
+        symbolOffset: [0, -6], // 上部椭圆
+        symbolPosition: 'end',
+        z: 12,
+        label: {
+          normal: {
+            show: true,
+            position: 'top',
+            fontSize: 15,
+            fontWeight: 'bold',
+            color: '#34DCFF',
           },
-          symbolOffset: [0, 12], // 下部内环
-          z: 10,
-          itemStyle: {
-            normal: {
-              color: 'transparent',
-              borderColor: '#2EA9E5',
-              borderType: 'solid',
-              borderWidth: 1,
-            },
+        },
+        color: '#2DB1EF',
+        data: [],
+      },
+      {
+        name: '',
+        type: 'pictorialBar',
+        symbolSize: [40, 10],
+        symbolOffset: [0, 7], // 下部椭圆
+        z: 12,
+        color: '#2DB1EF',
+        data: [],
+      },
+      {
+        name: '',
+        type: 'pictorialBar',
+        symbolSize: function (d: number) {
+          return d > 0 ? [50, 15] : [0, 0];
+        },
+        symbolOffset: [0, 12], // 下部内环
+        z: 10,
+        itemStyle: {
+          normal: {
+            color: 'transparent',
+            borderColor: '#2EA9E5',
+            borderType: 'solid',
+            borderWidth: 1,
           },
-          data: yData,
         },
-        {
-          name: '',
-          type: 'pictorialBar',
-          symbolSize: [70, 20],
-          symbolOffset: [0, 18], // 下部外环
-          z: 10,
-          itemStyle: {
-            normal: {
-              color: 'transparent',
-              borderColor: '#19465D',
-              borderType: 'solid',
-              borderWidth: 2,
-            },
+        data: [],
+      },
+      {
+        name: '',
+        type: 'pictorialBar',
+        symbolSize: [70, 20],
+        symbolOffset: [0, 18], // 下部外环
+        z: 10,
+        itemStyle: {
+          normal: {
+            color: 'transparent',
+            borderColor: '#19465D',
+            borderType: 'solid',
+            borderWidth: 2,
           },
-          data: yData,
         },
-        {
-          type: 'bar',
-          //silent: true,
-          barWidth: '40',
-          barGap: '10%', // Make series be overlap
-          barCateGoryGap: '10%',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
-                {
-                  offset: 0,
-                  color: '#38B2E6',
-                },
-                {
-                  offset: 1,
-                  color: '#0B3147',
-                },
-              ]),
-              opacity: 0.8,
-            },
+        data: [],
+      },
+      {
+        type: 'bar',
+        barWidth: '40',
+        barGap: '10%', // Make series be overlap
+        barCateGoryGap: '10%',
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+              {
+                offset: 0,
+                color: '#38B2E6',
+              },
+              {
+                offset: 1,
+                color: '#0B3147',
+              },
+            ]),
+            opacity: 0.8,
           },
-          data: yData,
         },
-      ],
-    };
+        data: [],
+      },
+    ],
+  };
+
+  useEffect(() => {
+    const myChart = echarts.init(chartRef.current);
+    const name: any = [];
+    const value: any = [];
+    if (data && data.length > 0) {
+      data.slice(0, 5).forEach((res: { name: any; value: any }) => {
+        name.push(res.name);
+        value.push(res.value);
+      });
+    }
 
+    options.xAxis[0].data = name;
+    options.series[0].data = value;
+    options.series[1].data = value;
+    options.series[2].data = value;
+    options.series[3].data = value;
+    options.series[4].data = value;
     myChart.setOption(options, true);
 
     // 组件卸载

src/pages/DataBoard/index.less

@@ -1,3 +1,6 @@
+body {
+  margin: 0;
+}
 .container {
   position: relative;
   width: 100%;

src/pages/DataBoard/index.tsx

@@ -26,73 +26,142 @@ import {
 
 // 数据大屏
 const DataBoard: React.FC = () => {
-  const [typeValue, setTypeValue] = useState(1);
-  const [userNum, setUserNum] = useState({});
-  const [homeNum, setHomeNum] = useState({});
-  const [onlineDeviceNum, setOnlineDeviceNum] = useState({});
-  const [offlineDeviceNum, setOfflineDeviceNum] = useState({});
-  const [deviceNum, setDeviceNum] = useState({});
-  const [errorDeviceNum, setErrorDeviceNum] = useState({});
-  const [masterControlNum, setMasterControlNum] = useState({});
-  const [subControlNum, setSubControlNum] = useState({});
-  const [deviceStatistics, setDeviceStatistics] = useState({});
-  const [allRunTime, setAllRunTime] = useState({});
-  const [todayRunTime, setTodayRunTime] = useState({});
+  const [deviceTypeValue, setDeviceTypeValue] = useState(1);
+  const [userTypeValue, setUserTypeValue] = useState(1);
+  const [userNum, setUserNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 28,
+      fill: '#2ff8ff',
+    },
+  });
+  const [homeNum, setHomeNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 28,
+      fill: '#2ff8ff',
+    },
+  });
+  const [onlineDeviceNum, setOnlineDeviceNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [offlineDeviceNum, setOfflineDeviceNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [deviceNum, setDeviceNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [errorDeviceNum, setErrorDeviceNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [masterControlNum, setMasterControlNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [subControlNum, setSubControlNum] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 20,
+      fill: '#2ff8ff',
+    },
+  });
+  const [deviceStatistics, setDeviceStatistics] = useState({
+    number: [0],
+    content: '{nt}',
+    style: {
+      fontSize: 33,
+      fill: '#08c7f1',
+    },
+  });
+  const [allRunTime, setAllRunTime] = useState({
+    number: [0],
+    content: '{nt}',
+    toFixed: 2,
+    style: {
+      fontSize: 33,
+      fill: '#ffb026',
+    },
+  });
+  const [todayRunTime, setTodayRunTime] = useState({
+    number: [0],
+    content: '{nt}',
+    toFixed: 2,
+    style: {
+      fontSize: 33,
+      fill: '#0dde79',
+    },
+  });
   const [homeInfo, setHomeInfo] = useState([]);
   const [userChartsData, setUserChartsData] = useState([]);
   const [deviceChartsData, setDeviceChartsData] = useState([]);
+  const [areaDeviceList, setAreaDeviceList] = useState([]);
 
   const settings = {
     dots: false, //圆点显示（false隐藏）
     infinite: true, //无限的环绕内容
-    autoplay: true, //自动播放，速度默认为（3000毫秒）
+    autoplay: false, //自动播放，速度默认为（3000毫秒）
     speed: 500, //自动播放速度（毫秒）
     slidesToShow: 2, //在一帧中显示2张卡片
     slidesToScroll: 1, //一次滚动2张卡片
     variableWidth: true,
   };
 
-  //地区设备数量Top5
-  const getAreaData = () => {
-    queryAreaData({ region_type: '1' }).then((res) => {
-      if (res?.code === 0) {
-        console.log(res);
-      }
-    });
-  };
   // 设备统计
   const getDeviceData = () => {
     queryDeviceData().then((res) => {
       if (res?.code === 0) {
-        const common = {
-          content: '{nt}',
-          style: {
-            fontSize: 20,
-            fill: '#2ff8ff',
-          },
-        };
-        const device = {
-          content: '{nt}',
-          style: {
-            fontSize: 33,
-            fill: '#08c7f1',
-          },
-        };
         // 设备数
-        const deviceData = { number: [res.data.device_count], ...common };
+        setDeviceNum((data) => {
+          data.number = [res.data.device_count];
+          return { ...data };
+        });
         // 故障设备数
-        const errorDeviceData = { number: [res.data.failure_device], ...common };
+        setErrorDeviceNum((data) => {
+          data.number = [res.data.failure_device];
+          return { ...data };
+        });
         // 主控数量
-        const masterControlData = { number: [res.data.master_count], ...common };
+        setMasterControlNum((data) => {
+          data.number = [res.data.master_count];
+          return { ...data };
+        });
         // 分控数量
-        const subControlData = { number: [res.data.sub_count], ...common };
-        // 顶部设备数统计
-        const deviceSta = { number: [res.data.device_count], ...device };
-        setDeviceNum(deviceData);
-        setErrorDeviceNum(errorDeviceData);
-        setMasterControlNum(masterControlData);
-        setSubControlNum(subControlData);
-        setDeviceStatistics(deviceSta);
+        setSubControlNum((data) => {
+          data.number = [res.data.sub_count];
+          return { ...data };
+        });
+        // 设备数统计
+        setDeviceStatistics((data) => {
+          data.number = [res.data.device_count];
+          return { ...data };
+        });
       }
     });
   };
@@ -101,32 +170,26 @@ const DataBoard: React.FC = () => {
   const userNumData = () => {
     queryUserData().then((res) => {
       if (res?.code === 0) {
-        const userCommon = {
-          content: '{nt}',
-          style: {
-            fontSize: 28,
-            fill: '#2ff8ff',
-          },
-        };
-        const deviceCommon = {
-          content: '{nt}',
-          style: {
-            fontSize: 20,
-            fill: '#2ff8ff',
-          },
-        };
         // 注册用户数
-        const userData = { number: [res.data.user_count], ...userCommon };
+        setUserNum((data) => {
+          data.number = [res.data.user_count];
+          return { ...data };
+        });
         // 家庭数量
-        const homeData = { number: [res.data.home_count], ...userCommon };
+        setHomeNum((data) => {
+          data.number = [res.data.home_count];
+          return { ...data };
+        });
         // 在线设备数
-        const onlineData = { number: [res.data.device_online], ...deviceCommon };
+        setOnlineDeviceNum((data) => {
+          data.number = [res.data.device_online];
+          return { ...data };
+        });
         // 离线设备数
-        const offlineData = { number: [res.data.device_offline], ...deviceCommon };
-        setUserNum(userData);
-        setHomeNum(homeData);
-        setOnlineDeviceNum(onlineData);
-        setOfflineDeviceNum(offlineData);
+        setOfflineDeviceNum((data) => {
+          data.number = [res.data.device_offline];
+          return { ...data };
+        });
       }
     });
   };
@@ -135,36 +198,30 @@ const DataBoard: React.FC = () => {
   const getRunTime = () => {
     queryDeviceRunTime().then((res) => {
       if (res.code === 0) {
-        const common = { content: '{nt}' };
-        // 总运行时长（小时）
-        const allTime = {
-          number: [res.data.total_run_time],
-          toFixed: 2,
-          style: {
-            fontSize: 33,
-            fill: '#ffb026',
-          },
-          ...common,
-        };
-        // 今日运行时长（小时）
-        const todayTime = {
-          number: [res.data.day_run_time],
-          toFixed: 2,
-          style: {
-            fontSize: 33,
-            fill: '#0dde79',
-          },
-          ...common,
-        };
-        setAllRunTime(allTime);
-        setTodayRunTime(todayTime);
+        setAllRunTime((data) => {
+          data.number = [res.data.total_run_time];
+          return { ...data };
+        });
+        setTodayRunTime((data) => {
+          data.number = [res.data.day_run_time];
+          return { ...data };
+        });
+      }
+    });
+  };
+
+  //地区设备数量Top5
+  const getAreaData = () => {
+    queryAreaData({ region_type: '1' }).then((res) => {
+      if (res?.code === 0) {
+        setAreaDeviceList(res?.data);
       }
     });
   };
 
   // 设备增长趋势
-  const deviceCharts = (item: number) => {
-    queryDeviceChart({ time_type: item }).then((res) => {
+  const deviceCharts = () => {
+    queryDeviceChart({ time_type: deviceTypeValue }).then((res) => {
       if (res?.code === 0) {
         setDeviceChartsData(res.data);
       }
@@ -173,7 +230,7 @@ const DataBoard: React.FC = () => {
 
   // 用户增长趋势
   const userCharts = () => {
-    queryUserChart({ time_type: 1 }).then((res) => {
+    queryUserChart({ time_type: userTypeValue }).then((res) => {
       if (res?.code === 0) {
         setUserChartsData(res.data);
       }
@@ -189,27 +246,13 @@ const DataBoard: React.FC = () => {
     });
   };
 
-  // 初始化
-  // useEffect(() => {
-  //   getAreaData();
-  //   userNumData();
-  //   getDeviceData();
-  //   const intervalId = setInterval(() => {
-  //     getAreaData();
-  //     userNumData();
-  //     getDeviceData();
-  //     setTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
-  //   }, 1000 * 100);
-  //   return () => clearInterval(intervalId);
-  // }, []);
-
   useEffect(() => {
     // 组件挂载时立即获取一次数据
     getAreaData();
     userNumData();
     getDeviceData();
     getRunTime();
-    deviceCharts(1);
+    deviceCharts();
     userCharts();
     getHomeListInfo();
 
@@ -218,36 +261,46 @@ const DataBoard: React.FC = () => {
       getAreaData();
       userNumData();
       getDeviceData();
-      userCharts();
     }, 10 * 60 * 1000); // 10分钟，单位为毫秒
 
+    // 两秒刷新一次顶部的时长数据
     const timer_two = setInterval(() => {
       getRunTime();
     }, 1000 * 2);
 
-    const timer_three = setInterval(() => {
-      setTypeValue((prevValue) => {
-        deviceCharts(prevValue === 1 ? 2 : 1);
-        return prevValue === 1 ? 2 : 1;
-      });
-    }, 1000 * 2);
-
     // 组件卸载时清除定时器
     return () => {
       clearInterval(timer);
       clearInterval(timer_two);
-      clearInterval(timer_three);
     };
   }, []); // 传入一个空数组作为第二个参数，确保只在组件挂载和卸载时执行一次
 
+  // 设备增长趋势切换
+  useEffect(() => {
+    deviceCharts();
+    const interval = setInterval(() => {
+      setDeviceTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
+    }, 1000 * 10);
+    return () => clearInterval(interval);
+  }, [deviceTypeValue]);
+
+  // 用户增长趋势切换
+  useEffect(() => {
+    userCharts();
+    const interval = setInterval(() => {
+      setUserTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
+    }, 1000 * 10);
+    return () => clearInterval(interval);
+  }, [userTypeValue]);
+
   return (
     <datav.FullScreenContainer>
       <div className={styles.container}>
-        <img src={dataBoardBg_two} className={styles.dataBoardBg_two} alt="" />
+        <img src={dataBoardBg_two} className={styles.dataBoardBg_two} alt="背景边框" />
         {/* 顶部 */}
         <div className={styles.dataTitleItem}>
-          <img src={dataBoardTitle} alt="" />
-          <img src={decoration_three} style={{ width: '50%' }} alt="" />
+          <img src={dataBoardTitle} alt="顶部标题背景" />
+          <img src={decoration_three} style={{ width: '50%' }} alt="顶部标题背景装饰" />
           <div className={styles.title}>山东永续绿建五恒环境科技有限公司</div>
         </div>
         {/* 中间内容 */}
@@ -287,7 +340,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>设备数</div>
                   </div>
                   <div className={styles.device_item}>
@@ -296,7 +349,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>在线设备数</div>
                   </div>
                   <div className={styles.device_item}>
@@ -305,7 +358,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>离线设备数</div>
                   </div>
                 </div>
@@ -316,7 +369,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>故障设备数</div>
                   </div>
                   <div className={styles.device_item}>
@@ -325,7 +378,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>主控数量</div>
                   </div>
                   <div className={styles.device_item}>
@@ -334,7 +387,7 @@ const DataBoard: React.FC = () => {
                       className={styles.device_num}
                       style={{ width: '200px', height: '50px' }}
                     />
-                    <img src={decoration_two} className={styles.device_bg} alt="" />
+                    <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
                     <div className={styles.device_title}>分控数量</div>
                   </div>
                 </div>
@@ -345,13 +398,12 @@ const DataBoard: React.FC = () => {
           <div className={styles.decoration_left_2}>
             <img src={border} alt="边框" />
             <div className={styles.title_text}>用户增长趋势</div>
-            {/* TODO 改一下样式 */}
-            <div className={styles.radio_style}>
-              {typeValue === 1 && <span style={{ color: '#fff' }}>月</span>}
-              {typeValue === 2 && <span style={{ color: '#fff' }}>日</span>}
-            </div>
             <div className={styles.user_charts}>
-              <LineChartsCommon width={23} height={23} data={userChartsData} />
+              {userChartsData && userChartsData.length ? (
+                <LineChartsCommon width={23} height={23} data={userChartsData} />
+              ) : (
+                <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
+              )}
             </div>
           </div>
           {/* 中间内容-----地图 */}
@@ -359,7 +411,7 @@ const DataBoard: React.FC = () => {
             {/* 数据统计 */}
             <div style={{ display: 'flex', justifyContent: 'space-around' }}>
               <div className={styles.data_show}>
-                <img src={decoration_five} alt="" />
+                <img src={decoration_five} alt="背景边框" />
                 <datav.DigitalFlop
                   config={deviceStatistics}
                   className={styles.data_show_num}
@@ -370,7 +422,7 @@ const DataBoard: React.FC = () => {
                 </div>
               </div>
               <div className={styles.data_show}>
-                <img src={decoration_five} alt="" />
+                <img src={decoration_five} alt="背景边框" />
                 <datav.DigitalFlop
                   config={allRunTime}
                   className={styles.data_show_num}
@@ -381,7 +433,7 @@ const DataBoard: React.FC = () => {
                 </div>
               </div>
               <div className={styles.data_show}>
-                <img src={decoration_five} alt="" />
+                <img src={decoration_five} alt="背景边框" />
                 <datav.DigitalFlop
                   config={todayRunTime}
                   className={styles.data_show_num}
@@ -392,21 +444,27 @@ const DataBoard: React.FC = () => {
                 </div>
               </div>
             </div>
-            <MapComponent />
+            {areaDeviceList && areaDeviceList.length ? (
+              <MapComponent userData={userNum} areaList={areaDeviceList} />
+            ) : (
+              <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
+            )}
           </div>
           {/* 中间内容-----右侧 */}
           {/* 中间内容-----右侧--地区设备数量统计 */}
           <div className={styles.decoration_right_3}>
             <img src={border} alt="边框" />
             <div className={styles.title_text}>地区设备数量统计</div>
-            <AreaDeviceData />
+            {areaDeviceList && areaDeviceList.length && <AreaDeviceData data={areaDeviceList} />}
           </div>
           {/* 中间内容-----右侧--设备增长趋势*/}
           <div className={styles.decoration_right_4}>
             <img src={border} alt="边框" />
             <div className={styles.title_text}>设备增长趋势</div>
-            {deviceChartsData && deviceChartsData.length && (
+            {deviceChartsData && deviceChartsData.length ? (
               <LineChartsCommon width={23} height={25} data={deviceChartsData} />
+            ) : (
+              <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
             )}
           </div>
         </div>

src/pages/DataBoard/lineChartsCommon.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styles from './lineChartsCommon.less';
 import * as echarts from 'echarts';
 
 interface editPros {
   width: number;
   height: number;
-  data: any[];
+  data: any;
 }
 
 /**
@@ -15,157 +15,163 @@ interface editPros {
 const LineChartsCommon: React.FC<editPros> = (props) => {
   const chartRef: any = useRef();
   const { width, height, data } = props;
+  const [chartsData, setChartsData] = useState(data);
 
-  useEffect(() => {
-    const myChart = echarts.init(chartRef.current);
-    if (data && data.length > 0) {
-      const list: any = [];
-      const value: any = [];
-      const total: any = [];
-      data.forEach((res: { time: string; value: number }) => {
-        list.push(res.time);
-        value.push(res.value);
-        total.push([res.time, res.value]);
-      });
-      const options = {
-        color: ['#1890FF'],
+  const options = {
+    color: ['#1890FF'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
+    },
+    grid: {
+      top: '15%',
+      left: '5%',
+      right: '0',
+      bottom: '8%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [],
+        boundaryGap: false,
+        axisTick: {
+          show: false, // 不显示坐标轴刻度线
+        },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: 'solid',
+            color: 'rgba(230, 247, 255, 0.20)',
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: '#27b4c2',
+          },
+        },
+        //x底部文字
+        axisLabel: {
+          interval: 0,
+          rotate: 30,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        // y轴的分割线
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'solid',
+            color: 'rgba(230, 247, 255, 0.20)',
+          },
+        },
+      },
+    ],
+    series: [
+      {
+        type: 'line',
+        smooth: false,
+        symbol: 'circle', //拐点设置为实心
+        symbolSize: 2, //拐点大小
+        itemStyle: {
+          normal: {
+            borderColor: 'rgba(42,157,255,.2)', //拐点边框颜色
+            borderWidth: 10, //拐点边框大小，
+            color: '#1890FF',
+          },
+        },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
           },
         },
-        grid: {
-          top: '15%',
-          left: '5%',
-          right: '0',
-          bottom: '8%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: list,
-            boundaryGap: false,
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                type: 'solid',
-                color: 'rgba(230, 247, 255, 0.20)',
-              },
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#27b4c2',
-              },
-            },
-            //x底部文字
-            axisLabel: {
-              interval: 0,
-              rotate: 30,
-            },
+        lineStyle: {
+          normal: {
+            width: 3,
+            shadowColor: '#1890FF',
+            shadowBlur: 20,
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            // y轴的分割线
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'solid',
-                color: 'rgba(230, 247, 255, 0.20)',
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            type: 'line',
-            smooth: false,
-            symbol: 'circle', //拐点设置为实心
-            symbolSize: 2, //拐点大小
-            itemStyle: {
-              normal: {
-                borderColor: 'rgba(42,157,255,.2)', //拐点边框颜色
-                borderWidth: 10, //拐点边框大小，
-                color: '#1890FF',
-              },
-            },
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                // 坐标轴指示器，坐标轴触发有效
-                type: 'line', // 默认为直线，可选为：'line' | 'shadow'
-              },
+        },
+        areaStyle: {
+          opacity: 1,
+          //右下左上
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(24, 144, 255, .5)',
             },
-            lineStyle: {
-              normal: {
-                width: 3,
-                shadowColor: '#1890FF',
-                shadowBlur: 20,
-              },
+            {
+              offset: 0.3,
+              color: 'rgba(24, 144, 255, 0.2)',
             },
-            areaStyle: {
-              opacity: 1,
-              //右下左上
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: 'rgba(24, 144, 255, .5)',
-                },
-                {
-                  offset: 0.3,
-                  color: 'rgba(24, 144, 255, 0.2)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(24, 144, 255, 0)',
-                },
-              ]),
+            {
+              offset: 1,
+              color: 'rgba(24, 144, 255, 0)',
             },
-            data: value,
+          ]),
+        },
+        data: [],
+      },
+      {
+        type: 'lines',
+        coordinateSystem: 'cartesian2d',
+        symbolSize: 8,
+        polyline: true, // 多线段
+        effect: {
+          show: true,
+          period: 5,
+          trailLength: 0.3,
+          symbolSize: 11,
+          symbol: 'circle',
+          color: '#0069d9',
+        },
+        lineStyle: {
+          normal: {
+            width: 1,
+            opacity: 0,
           },
+        },
+        // 光点
+        data: [
           {
-            type: 'lines',
-            coordinateSystem: 'cartesian2d',
-            symbolSize: 8,
-            polyline: true, // 多线段
-            effect: {
-              show: true,
-              period: 5,
-              trailLength: 0.3,
-              symbolSize: 11,
-              symbol: 'circle',
-              color: '#0069d9',
-            },
-            lineStyle: {
-              normal: {
-                width: 1,
-                opacity: 0,
-              },
-            },
-            // 光点
-            data: [
-              {
-                coords: total,
-              },
-            ],
+            coords: [],
           },
         ],
-      };
+      },
+    ],
+  };
+
+  const setCharts = () => {
+    const myChart = echarts.init(chartRef.current);
+    if (chartsData && chartsData.length > 0) {
+      const list: any = [];
+      const value: any = [];
+      const total: any = [];
+      chartsData.forEach((res: { time: string; value: number }) => {
+        list.push(res.time);
+        value.push(res.value);
+        total.push([res.time, res.value]);
+      });
+      options.xAxis[0].data = list;
+      options.series[0].data = value;
+      options.series[1].data[0].coords = total;
       myChart.setOption(options, true);
     }
+  };
+
+  useEffect(() => {
+    setChartsData(data);
+    setCharts();
+  }, [data]);
 
-    // 组件卸载
-    return () => {
-      myChart.dispose();
-    };
-  }, []);
   return (
     <div className={styles.container}>
       <div ref={chartRef} style={{ width: `${width}vw`, height: `${height}vh` }} />

src/pages/DataBoard/mapComponent.less

@@ -14,7 +14,7 @@
       position: absolute;
       bottom: 4px;
       width: 100%;
-      text-align: right;
+      text-align: center;
       .content_title {
         color: #fff;
         font-size: 12px;

src/pages/DataBoard/mapComponent.tsx

@@ -3,73 +3,40 @@ import styles from './mapComponent.less';
 import React, { useEffect, useRef } from 'react';
 import chinaMap from '../../mapJson/chinaMapData.json';
 import border from '../../../public/assets/decoration_six.png';
+import * as datav from '@jiaminghi/data-view-react';
+
+interface propsData {
+  userData: object;
+  areaList: any;
+}
 
 /**
  * 地图组件
  * @constructor
  */
-const MapComponent: React.FC = () => {
+const MapComponent: React.FC<propsData> = (props) => {
   const chartRef: any = useRef();
-
+  const { userData, areaList } = props;
   const data: any = chinaMap; //地图的数据来自之前引入的json文件
-
-  const demo = [
-    { name: '青岛', value: 18 },
-    { name: '莱西', value: 21 },
-    { name: '日照', value: 21 },
-    { name: '胶南', value: 22 },
-    { name: '威海', value: 25 },
-    { name: '烟台', value: 28 },
-    { name: '即墨', value: 30 },
-    { name: '莱州', value: 32 },
-    { name: '寿光', value: 40 },
-    { name: '章丘', value: 45 },
-    { name: '胶州', value: 52 },
-    { name: '东营', value: 62 },
-    { name: '潍坊', value: 65 },
-    { name: '枣庄', value: 84 },
-    { name: '淄博', value: 85 },
-    { name: '济南', value: 92 },
-    { name: '聊城', value: 116 },
-    { name: '德州', value: 120 },
-    { name: '济宁', value: 120 },
-    { name: '菏泽', value: 194 },
-  ];
-
   const geoCoordMap = {
-    青岛: [120.33, 36.07],
-    莱西: [120.53, 36.86],
-    日照: [119.46, 35.42],
-    胶南: [119.97, 35.88],
-    威海: [122.1, 37.5],
-    烟台: [121.39, 37.52],
-    即墨: [120.45, 36.38],
-    莱州: [119.942327, 37.177017],
-    寿光: [118.73, 36.86],
-    胶州: [120.03336, 36.264622],
-    东营: [118.49, 37.46],
-    潍坊: [119.1, 36.62],
-    淄博: [118.05, 36.78],
-    济南: [117, 36.65],
-    聊城: [115.97, 36.45],
-    德州: [116.29, 37.45],
-    菏泽: [115.480656, 35.23375],
+    济南市: [117, 36.65],
+    青岛市: [120.33, 36.07],
+    淄博市: [118.05, 36.78],
+    枣庄市: [117.57, 34.86],
+    东营市: [118.49, 37.46],
+    烟台市: [121.39, 37.52],
+    潍坊市: [119.1, 36.62],
+    济宁市: [116.59, 35.38],
+    泰安市: [117.13, 36.18],
+    威海市: [122.1, 37.5],
+    日照市: [119.46, 35.42],
+    临沂市: [118.35, 35.05],
+    德州市: [116.29, 37.45],
+    聊城市: [115.97, 36.45],
+    滨州市: [118.03, 37.36],
+    菏泽市: [115.47, 35.25],
   };
 
-  // const COORDS_LINE = {
-  //   '济南': [
-  //     [117.122338,36.658402],
-  //     [125.465512,37.381275]
-  //   ]
-  // }
-  //
-  // const citydata = [{
-  //   name: '济南',
-  //   value: 5
-  // }];
-
-  // const activeAreaName = '';
-
   const convertData = (mapData: string | any[]) => {
     const res = [];
     for (let i = 0; i < mapData.length; i++) {
@@ -86,9 +53,7 @@ const MapComponent: React.FC = () => {
 
   useEffect(() => {
     const myChart = echarts.init(chartRef.current);
-
-    echarts.registerMap('china', data); //此步不可省略，要想展示一个地图，先需要注册，巨坑（官方根本无文档，全靠瞎猜）
-
+    echarts.registerMap('china', data); //此步不可省略，要想展示一个地图，先需要注册，巨坑（官方根本无文档，全靠瞎猜,气死我了快）
     const options = {
       geo: {
         map: 'china',
@@ -146,12 +111,12 @@ const MapComponent: React.FC = () => {
               areaColor: '#0f2c70',
             },
           },
-          data: [{ name: '北京', value: 21300 }],
+          data: [],
         },
         {
           type: 'scatter',
           coordinateSystem: 'geo',
-          data: convertData(demo),
+          data: convertData(areaList),
           symbolSize: function (val: number[]) {
             return val[2] / 20;
           },
@@ -171,92 +136,9 @@ const MapComponent: React.FC = () => {
             },
           },
         },
-        // {
-        //   type: 'lines',
-        //   z: 3,
-        //   coordinateSystem: 'geo',
-        //   symbolSize: [6, 0],
-        //   label: {
-        //     show: true,
-        //     position: 'end',
-        //     formatter: () =>{
-        //       const result = `<div>
-        //         <img src={border} alt="">
-        //     </div>`
-        //       return result
-        //     },
-        //     rich: {
-        //       title: {
-        //         align: 'center',
-        //         lineHeight: 17,
-        //         fontSize: 12,
-        //         color: '#fff',
-        //         backgroundColor: '#17A597',
-        //         width: 64,
-        //         height: 20,
-        //         borderRadius: [4, 4, 0, 0]
-        //       },
-        //       value: {
-        //         height: 25,
-        //         width: 64,
-        //         color: '#17A597',
-        //         backgroundColor: '#fff',
-        //         borderRadius: [0, 0, 4, 4]
-        //       }
-        //     }
-        //   },
-        //   lineStyle: {
-        //     type: 'solid',
-        //     opacity: 1,
-        //     width:3,
-        //     color: '#fff',
-        //     curveness: 0.1
-        //   },
-        //   data: citydata.map((item) => {
-        //     let label = {};
-        //     if (item.name === activeAreaName) {
-        //       const width = 92;
-        //       label = {
-        //         formatter: [
-        //           `{title_active|{b}}`,
-        //           `{value_active|{c} 例}`
-        //         ].join('\n'),
-        //         backgroundColor: '#eee',
-        //         borderColor: '#FFB569',
-        //         width,
-        //         rich: {
-        //           title_active: {
-        //             align: 'center',
-        //             lineHeight: 17,
-        //             fontSize: 12,
-        //             color: '#fff',
-        //             backgroundColor: '#FFB569',
-        //             width,
-        //             height: 26,
-        //             borderRadius: [4, 4, 0, 0]
-        //           },
-        //           value_active: {
-        //             height: 32,
-        //             lineHeight: 32,
-        //             width,
-        //             color: '#FFB569',
-        //             backgroundColor: '#fff',
-        //             borderRadius: [0, 0, 4, 4]
-        //           }
-        //         }
-        //       };
-        //     }
-        //     return Object.assign({
-        //       coords: COORDS_LINE[item.name],
-        //       label
-        //     }, item);
-        //   })
-        // }
       ],
     };
-
     myChart.setOption(options, true);
-
     // 组件卸载
     return () => {
       myChart.dispose();
@@ -268,10 +150,13 @@ const MapComponent: React.FC = () => {
       <div ref={chartRef} className={styles.mapContent} />
       <div className={styles.content_num}>
         <div style={{ position: 'relative' }}>
-          <img src={border} alt="" />
+          <img src={border} alt="装饰线条" />
           <div className={styles.content}>
-            <div className={styles.content_value}>23,123</div>
-            {/*<datav.DigitalFlop config={userNum} className={styles.item_content} style={{width: '200px', height: '50px'}} />*/}
+            <datav.DigitalFlop
+              config={userData}
+              className={styles.content_value}
+              style={{ width: '200px', height: '50px' }}
+            />
             <div className={styles.content_title}>用户数</div>
           </div>
         </div>

src/pages/DataBoard/sliderData.less

@@ -9,7 +9,7 @@
     width: 100%;
     height: 100%;
     .detail_left {
-      width: 25%;
+      width: 35%;
       margin: 4%;
       padding: 3% 0;
       border-radius: 10px;
@@ -35,31 +35,36 @@
           width: 100%;
           line-height: 32px;
           .detail_item_title {
+            width: 250px;
             margin-right: 10%;
             color: #ccc;
             font-size: 15px;
             text-align: left;
           }
           .detail_item_value {
+            display: block;
+            width: 110px;
+            overflow: hidden;
             color: #fde17b;
             font-size: 15px;
+            white-space: nowrap;
             text-align: left;
+            text-overflow: ellipsis;
           }
         }
       }
     }
     .detail_right {
-      width: 75%;
+      width: 65%;
       padding-top: 4%;
       overflow: hidden;
       .detail_right_top {
-        display: flex;
-        justify-content: space-around;
         width: 97%;
         .detail_right_top_content {
-          width: 16%;
-          margin: 0 1%;
-          padding: 1% 0;
+          float: left;
+          width: 25%;
+          margin: 10px 13px;
+          padding: 7px 0;
           text-align: center;
           border: 1px solid #407fff;
           .content_title {
@@ -74,6 +79,19 @@
           }
         }
       }
+      .detail_right_bottom {
+        display: flex;
+        justify-content: space-around;
+        .electric_content {
+          width: 50%;
+          margin: 60px 0;
+          line-height: 30px;
+          .content_num {
+            color: #fff;
+            font-size: 20px;
+          }
+        }
+      }
     }
   }
 }

src/pages/DataBoard/sliderData.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as datav from '@jiaminghi/data-view-react';
 import styles from './sliderData.less';
-import * as echarts from 'echarts';
 import { connect } from '@@/plugin-dva/exports';
+import { JSONPath } from 'jsonpath-plus';
 
 interface propsData {
   data: any;
@@ -14,190 +14,325 @@ interface propsData {
  * @constructor
  */
 const SliderData: React.FC<propsData> = (props) => {
-  const { MQTTMessage, data } = props;
-  const chartRef: any = useRef();
+  const { data, MQTTMessage } = props;
+  const [voltage, setVoltage] = useState({ ua: 0 });
+  const [current, setCurrent] = useState({ ia: 0 });
+  const [activePower, setActivePower] = useState({ active_power: 0 });
+  const [controlData, setControlData] = useState({
+    power: data.power ? data.power : 0,
+    mode: data.mode,
+    set_temp: data.set_temp,
+    temperature: data.temperature,
+    humidity: data.humidity,
+    air_quality: data.air_quality,
+    co2: data.co2,
+  });
 
   useEffect(() => {
-    if (MQTTMessage.message?.DeviceCode === data.electric_id) {
-      console.log();
+    // 电
+    if (
+      MQTTMessage.message?.DeviceCode === 'DT645-4G' &&
+      MQTTMessage.message?.SubDeviceId !== '' &&
+      data.electric_id !== '' &&
+      MQTTMessage.message?.SubDeviceId === data.electric_id
+    ) {
+      // 电压
+      if (Object.keys(MQTTMessage.message.Data)[0] === 'voltage') {
+        setVoltage({ ua: JSONPath({ json: MQTTMessage.message.Data, path: '$.voltage.ua' })[0] });
+      }
+      // 电流
+      if (Object.keys(MQTTMessage.message.Data)[0] === 'current') {
+        setCurrent({ ia: JSONPath({ json: MQTTMessage.message.Data, path: '$.current.ia' })[0] });
+      }
+      // 用电量
+      if (Object.keys(MQTTMessage.message.Data)[0] === 'power') {
+        setActivePower({
+          active_power: JSONPath({
+            json: MQTTMessage.message.Data,
+            path: '$.power.active_power',
+          })[0],
+        });
+      }
     }
 
-    const myChart = echarts.init(chartRef.current);
-    const options = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          lineStyle: {
-            color: '#57617B',
-          },
-        },
-      },
-      grid: {
-        top: '10%',
-        left: '0',
-        right: '5%',
-        bottom: '3%',
-        containLabel: true,
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLine: {
-            show: false,
-          },
-          data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35'],
-        },
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          name: '单位（%）',
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-          axisLabel: {
-            margin: 10,
-            textStyle: {
-              fontSize: 14,
-            },
-          },
-          splitLine: { show: false },
-        },
-      ],
-      series: [
-        {
-          name: '移动',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 5,
-          showSymbol: false,
-          lineStyle: {
-            normal: {
-              width: 3,
-            },
-          },
-          areaStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                1,
-                0,
-                [
-                  {
-                    offset: 0,
-                    color: 'rgba(16,97,204, 0.3)',
-                  },
-                  {
-                    offset: 0.8,
-                    color: 'rgba(17,235,210, 0)',
-                  },
-                ],
-                false,
-              ),
-              shadowColor: 'rgba(0, 0, 0, 0.1)',
-              shadowBlur: 10,
-            },
-          },
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                {
-                  offset: 0,
-                  color: 'rgba(16,97,204,1)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(17,235,210,1)',
-                },
-              ]),
-            },
-            emphasis: {
-              color: 'rgb(0,196,132)',
-              borderColor: 'rgba(0,196,132,0.2)',
-              extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
-              borderWidth: 10,
-            },
-          },
-          data: [220, 182, 191, 134, 150, 120, 110, 125],
-        },
-      ],
-    };
-    myChart.setOption(options, true);
-    // 组件卸载
-    return () => {
-      myChart.dispose();
-    };
-  }, []);
+    //温湿度等
+    if (
+      MQTTMessage.message?.DeviceCode === data.device_id &&
+      MQTTMessage.message?.SubDeviceId === ''
+    ) {
+      setControlData({
+        power: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.power' })[0],
+        mode: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.mode' })[0],
+        set_temp: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.set_temp' })[0],
+        temperature: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.temperature' })[0],
+        humidity: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.humidity' })[0],
+        air_quality: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.air_quality' })[0],
+        co2: JSONPath({ json: MQTTMessage.message.Data, path: '$.status.co2' })[0],
+      });
+    }
+  }, [MQTTMessage.message?.DeviceCode && MQTTMessage.message?.SubDeviceId]);
+
+  const handleCo2Grade = (co2: number) => {
+    if (co2 >= 0 && co2 < 800) {
+      return '#90c456';
+    }
+    if (co2 >= 800 && co2 < 1600) {
+      return '#eceb3b';
+    }
+    if (co2 >= 1600) {
+      return '#e4151b';
+    }
+    return '';
+  };
+
+  const handlePm25Grade = (pm25: number) => {
+    if (pm25 >= 0 && pm25 <= 50) {
+      return '#90c456';
+    }
+    if (pm25 > 50 && pm25 < 150) {
+      return '#eceb3b';
+    }
+    if (pm25 >= 150) {
+      return '#e4151b';
+    }
+    return '';
+  };
+
+  // const chartRef: any = useRef();
+  //
+  // const colorSet = {
+  //   color: '#0063E7'
+  // }
+  // const dataArr = 70;
+
+  // useEffect(() => {
+  // const myChart = echarts.init(chartRef.current);
+  // const options = {
+  //   series: [
+  //     {
+  //       name: "内部进度条",
+  //       type: "gauge",
+  //       radius: '50%',
+  //       axisLine: {
+  //         show: false
+  //         // lineStyle: {
+  //         //   color: [
+  //         //     [1, colorSet.color]
+  //         //   ],
+  //         //   width: 3,
+  //         //   shadowColor: 'rgba(145,207,255,.5)',
+  //         //   shadowBlur: 6,
+  //         //   shadowOffsetX: 0,
+  //         // }
+  //       },
+  //       axisLabel: {
+  //         show: false,
+  //       },
+  //       axisTick: {
+  //         show: false,
+  //       },
+  //       splitLine: {
+  //         show: false,
+  //       },
+  //       itemStyle: {
+  //         show: false,
+  //       },
+  //       detail: {
+  //         formatter: function(value: number) {
+  //           if (value !== 0) {
+  //             const num = Math.round(value ) ;
+  //             return parseInt(String(num)).toFixed(0);
+  //           } else {
+  //             return 0;
+  //           }
+  //         },
+  //         offsetCenter: [0, 30],
+  //         textStyle: {
+  //           padding: [0, 0, 0, 0],
+  //           fontSize: 18,
+  //           fontWeight: '700',
+  //           color: colorSet.color
+  //         }
+  //       },
+  //       title: { //标题
+  //         show: true,
+  //         offsetCenter: [0, 70], // x, y，单位px
+  //         textStyle: {
+  //           color: "#fff",
+  //           fontSize: 14, //表盘上的标题文字大小
+  //           fontWeight: 400,
+  //           fontFamily: 'PingFangSC'
+  //         }
+  //       },
+  //       data: [{
+  //         name: "电压",
+  //         value: dataArr,
+  //       }],
+  //       pointer: {
+  //         show: true,
+  //         length: '75%',
+  //         radius: '20%',
+  //         width: 5, //指针粗细
+  //       },
+  //       animationDuration: 4000,
+  //     },
+  //     {
+  //       name: '外部刻度',
+  //       type: 'gauge',
+  //       radius: '80%',
+  //       min: 0, //最小刻度
+  //       max: 230, //最大刻度
+  //       startAngle: 225,
+  //       endAngle: -45,
+  //       axisLine: {
+  //         show: true,
+  //         lineStyle: {
+  //           width: 1,
+  //           color: [
+  //             [1, 'rgba(0,0,0,0)']
+  //           ]
+  //         }
+  //       }, //仪表盘轴线
+  //       axisLabel: {
+  //         show: true,
+  //         color: '#4d5bd1',
+  //         distance: 25,
+  //       },
+  //       //刻度标签。
+  //       axisTick: {
+  //         show: true,
+  //         splitNumber: 7,
+  //         lineStyle: {
+  //           color: colorSet.color, //用颜色渐变函数不起作用
+  //           width: 1,
+  //         },
+  //         length: -8
+  //       }, //刻度样式
+  //       splitLine: {
+  //         show: true,
+  //         length: -20,
+  //         lineStyle: {
+  //           color: colorSet.color, //用颜色渐变函数不起作用
+  //         }
+  //       }, //分隔线样式
+  //       detail: {
+  //         show: false
+  //       },
+  //       pointer: {
+  //         show: false
+  //       }
+  //     },
+  //   ]
+  // }
+  // myChart.setOption(options, true);
+  // // 组件卸载
+  // return () => {
+  //   myChart.dispose();
+  // };
+  // }, []);
+
+  //  四舍五入保留一位小数
+  // const decimal = (num: number) => {
+  //   return Math.round(num * 10) / 10;
+  // };
 
   return (
     <div>
       <datav.BorderBox12
         className={styles.decoration_bottom_border}
-        style={{ width: '40vw', height: '26vh' }}
+        style={{ width: '30vw', height: '26vh' }}
       >
         <div className={styles.home_detail}>
           <div className={styles.detail_left}>
             <div className={styles.detail_left_left}>
-              {/*<img src={home} alt="家图标" className={styles.home_icon}/>*/}
               <div className={styles.decoration_on} />
               <div className={styles.home_name}>{data?.home_name ? data?.home_name : '我的家'}</div>
             </div>
             <div className={styles.detail_left_right}>
               <table className={styles.detail_item}>
-                <tr>
-                  <td className={styles.detail_item_title}>管理员</td>
-                  <td className={styles.detail_item_value}>{data?.admin}</td>
-                </tr>
-                <tr>
-                  <td className={styles.detail_item_title}>是否在线</td>
-                  <td className={styles.detail_item_value}>{data?.is_online ? '在线' : '离线'}</td>
-                </tr>
-                <tr>
-                  <td className={styles.detail_item_title}>运行状态</td>
-                  <td className={styles.detail_item_value}>{{ 0: '关', 1: '开' }[data?.power]}</td>
-                </tr>
-                <tr>
-                  <td className={styles.detail_item_title}>模式</td>
-                  <td className={styles.detail_item_value}></td>
-                </tr>
+                <tbody>
+                  <tr>
+                    <td className={styles.detail_item_title}>管理员</td>
+                    <td className={styles.detail_item_value}>{data?.admin}</td>
+                  </tr>
+                  <tr>
+                    <td className={styles.detail_item_title}>是否在线</td>
+                    <td
+                      className={styles.detail_item_value}
+                      style={{ color: `${data?.is_online ? '#90c456' : '#e4151b'}` }}
+                    >
+                      {data?.is_online ? '在线' : '离线'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className={styles.detail_item_title}>运行状态</td>
+                    <td className={styles.detail_item_value} style={{ color: '#ffb026' }}>
+                      {{ 0: '关', 1: '开' }[controlData.power]}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className={styles.detail_item_title}>模式</td>
+                    <td className={styles.detail_item_value}>
+                      {{ 0: '制冷', 1: '制热', 2: '除湿', 3: '送风', 4: '加湿' }[controlData?.mode]}
+                    </td>
+                  </tr>
+                </tbody>
               </table>
             </div>
           </div>
           <div className={styles.detail_right}>
             <div className={styles.detail_right_top}>
-              <div className={styles.detail_right_top_content}>
-                <div className={styles.content_title}>电压</div>
-                <div className={styles.content_value}></div>
-              </div>
               <div className={styles.detail_right_top_content}>
                 <div className={styles.content_title}>设定温度</div>
-                <div className={styles.content_value}>{data?.set_temp}</div>
+                <div className={styles.content_value}>{controlData?.set_temp}°C</div>
               </div>
               <div className={styles.detail_right_top_content}>
                 <div className={styles.content_title}>室内温度</div>
-                <div className={styles.content_value}>{data?.temperature}</div>
+                <div className={styles.content_value}>{controlData?.temperature}°C</div>
               </div>
               <div className={styles.detail_right_top_content}>
                 <div className={styles.content_title}>湿度</div>
-                <div className={styles.content_value}>{data?.humidity}</div>
+                <div className={styles.content_value}>{controlData?.humidity}%rh</div>
               </div>
               <div className={styles.detail_right_top_content}>
                 <div className={styles.content_title}>PM25</div>
-                <div className={styles.content_value}>{data?.air_quality}</div>
+                <div
+                  className={styles.content_value}
+                  style={{ color: handlePm25Grade(controlData?.air_quality) }}
+                >
+                  {controlData?.air_quality}μg/m³
+                </div>
               </div>
               <div className={styles.detail_right_top_content}>
                 <div className={styles.content_title}>CO2</div>
-                <div className={styles.content_value}>{data?.co2}</div>
+                <div
+                  className={styles.content_value}
+                  style={{ color: handleCo2Grade(controlData?.co2) }}
+                >
+                  {controlData?.co2}
+                </div>
+              </div>
+              <div className={styles.detail_right_top_content}>
+                <div className={styles.content_title}>用电量</div>
+                <div className={styles.content_value}>{activePower?.active_power}kwh</div>
+              </div>
+              <div className={styles.detail_right_top_content}>
+                <div className={styles.content_title}>电压</div>
+                <div className={styles.content_value}>{voltage?.ua}V</div>
+              </div>
+              <div className={styles.detail_right_top_content}>
+                <div className={styles.content_title}>电流</div>
+                <div className={styles.content_value}>{current?.ia}A</div>
               </div>
             </div>
-            <div style={{ color: '#fff', marginTop: '10px' }}>用电量</div>
-            <div ref={chartRef} style={{ width: '23w', height: '13vh' }} />
+            {/*<div style={{ color: '#fff', marginTop: '10px' }}>用电量</div>*/}
+            {/*<div className={styles.detail_right_bottom}>*/}
+            {/*  <div ref={chartRef} style={{ width: '11vw', height: '17vh' , marginTop:'8px' }} />*/}
+            {/*  <div className={styles.electric_content}>*/}
+            {/*    <div className={styles.content_num}><span>总电量：</span><span>122</span></div>*/}
+            {/*    <div className={styles.content_num}><span>电压：</span><span>122</span></div>*/}
+            {/*  </div>*/}
+            {/*</div>*/}
           </div>
         </div>
       </datav.BorderBox12>