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

src/pages/DataBoard/index.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useRef, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styles from './index.less';
 import * as datav from '@jiaminghi/data-view-react';
 import dataBoardTitle from '../../../public/assets/dataBoardTitle.png';
@@ -124,8 +124,6 @@ const DataBoard: React.FC = () => {
   const [userChartsData, setUserChartsData] = useState([]);
   const [deviceChartsData, setDeviceChartsData] = useState([]);
   const [areaDeviceList, setAreaDeviceList] = useState([]);
-  const deviceInterval: any = useRef(null);
-  const userInterval: any = useRef(null);
 
   const settings = {
     dots: false, //圆点显示（false隐藏）
@@ -288,6 +286,15 @@ const DataBoard: React.FC = () => {
     });
   };
 
+  const timerFun = (callback: () => void, interval: number | undefined) => {
+    let timer: any = setTimeout(() => {
+      callback();
+      clearTimeout(timer);
+      timer = null;
+      timerFun(callback, interval);
+    }, interval);
+  };
+
   useEffect(() => {
     // 组件挂载时立即获取一次数据
     getAreaData();
@@ -298,51 +305,40 @@ const DataBoard: React.FC = () => {
     userCharts();
     getHomeListInfo();
 
-    // 定义一个函数，用于设置定时器
-    const timer = setInterval(() => {
+    timerFun(() => {
       getAreaData();
       userNumData();
       getDeviceData();
-    }, 10 * 60 * 1000); // 10分钟，单位为毫秒
+    }, 10 * 60 * 1000);
 
-    // 两秒刷新一次顶部的时长数据
-    const timer_two = setInterval(() => {
+    timerFun(() => {
       getRunTime();
-    }, 1000 * 2);
+    }, 1000 * 5);
 
-    // 组件卸载时清除定时器
-    return () => {
-      clearInterval(timer);
-      clearInterval(timer_two);
-    };
-  }, []); // 传入一个空数组作为第二个参数，确保只在组件挂载和卸载时执行一次
+    return () => {};
+  }, []);
 
   // 设备增长趋势切换
   useEffect(() => {
-    deviceCharts();
-    if (!deviceInterval.current) {
-      deviceInterval.current = setInterval(() => {
-        setDeviceTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
-      }, 1000 * 10);
-    }
+    const timerId = setTimeout(() => {
+      setDeviceTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
+      deviceCharts();
+    }, 1000 * 10); // 10秒钟
+
     return () => {
-      clearInterval(deviceInterval.current);
-      deviceInterval.current = null;
+      clearTimeout(timerId);
     };
   }, [deviceTypeValue]);
 
   // 用户增长趋势切换
   useEffect(() => {
-    userCharts();
-    if (!userInterval.current) {
-      userInterval.current = setInterval(() => {
-        setUserTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
-      }, 1000 * 10);
-    }
+    const timerId = setTimeout(() => {
+      setUserTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
+      userCharts();
+    }, 1000 * 10); // 10秒钟
+
     return () => {
-      clearInterval(userInterval.current);
-      userInterval.current = null;
-      console.log('userInterval---', userInterval.current);
+      clearTimeout(timerId);
     };
   }, [userTypeValue]);
 

src/pages/DataBoard/mapComponent.tsx

@@ -37,6 +37,7 @@ const MapComponent: React.FC<propsData> = (props) => {
     菏泽市: [115.47, 35.25],
   };
 
+  // 处理数据结构
   const convertData = (mapData: string | any[]) => {
     const res = [];
     for (let i = 0; i < mapData.length; i++) {
@@ -135,7 +136,7 @@ const MapComponent: React.FC<propsData> = (props) => {
     myChart.setOption(options, true);
     // 组件卸载
     return () => {
-      myChart.dispose();
+      myChart.clear();
     };
   }, []);