fix(compiler): fixed

config/proxy.ts

@@ -18,8 +18,8 @@ export default {
     },
     '/web/': {
       // 要代理的地址
-      target: 'http://192.168.0.224:8199', // 开发
-      // target: 'https://app.yongxulvjian.com', // 生产
+      // target: 'http://192.168.0.224:8199', // 开发
+      target: 'https://app.yongxulvjian.com', // 生产
       changeOrigin: true,
     },
     '/s/': {

src/components/RightContent/AvatarDropdown.tsx

@@ -23,6 +23,7 @@ const loginOut = async () => {
   const { query = {}, search, pathname } = history.location;
   const { redirect } = query;
   // Note: There may be security issues, please note
+  localStorage.clear();
   if (window.location.pathname !== '/user/login' && !redirect) {
     history.replace({
       pathname: '/user/login',
@@ -43,6 +44,8 @@ const AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
     currentUserInfo(token).then((res: any) => {
       if (res.code === 0) {
         setAvatar(res?.data?.photo);
+      } else {
+        loginOut();
       }
     });
   }, []);

src/pages/DataBoard/index.less

@@ -134,19 +134,19 @@ body {
         height: 77%;
 
         .statistics_title_text {
-          margin-top: 10px;
+          margin-top: 5px;
           margin-left: 15px;
           color: #fff;
           font-weight: bold;
           font-size: 16px;
           line-height: 30px;
-          background-image: -webkit-linear-gradient(right, #52ffff, #2aacfa);
+          background-image: -webkit-linear-gradient(bottom, #52ffff, #2aacfa);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
         }
 
         .user_data {
-          width: 40%;
+          width: 35%;
           .user_content {
             .user_item {
               margin: 13% 0;
@@ -158,27 +158,82 @@ body {
           }
         }
         .device_data {
-          width: 60%;
+          width: 65%;
           .device_content {
             display: flex;
             width: 100%;
-            margin: 5% 0;
+
+            .qiu,
+            .qiu::before,
+            .qiu::after {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              width: 60px;
+              height: 60px;
+              margin-top: -30px;
+              margin-left: -30px;
+              background: url('../../../public/assets/decoration_two.png') no-repeat center;
+              background-size: 100%;
+              border-radius: 50%;
+            }
+
+            .qiu::before {
+              animation: bounce 1.5s infinite;
+              content: '';
+            }
+
+            .qiu::after {
+              animation: bounce 1.5s -0.4s infinite;
+              content: '';
+            }
+            @keyframes bounce {
+              0% {
+                -webkit-transform: scale(0.8);
+                transform: scale(0.8);
+                opacity: 1;
+              }
+              100% {
+                -webkit-transform: scale(2);
+                transform: scale(2);
+                opacity: 0;
+              }
+            }
+
+            @-webkit-keyframes bounce {
+              0% {
+                -webkit-transform: scale(0.8);
+                transform: scale(0.8);
+                opacity: 1;
+              }
+              100% {
+                -webkit-transform: scale(2);
+                transform: scale(2);
+                opacity: 0;
+              }
+            }
             .device_item {
               position: relative;
+              width: 100px;
+              height: 100px;
               text-align: center;
               .device_num {
                 position: absolute;
-                top: 0;
+                top: 10%;
                 left: 50%;
                 transform: translate(-50%);
               }
-              .device_bg {
-                width: 70%;
-              }
+              //.device_bg {
+              //  width: 65%;
+              //}
               .device_title {
-                margin-top: 3%;
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                width: 100%;
                 color: #fff;
                 font-size: 12px;
+                transform: translate(-50%);
               }
             }
           }

src/pages/DataBoard/index.tsx

@@ -1,17 +1,12 @@
-import React, { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useRef, useState } from 'react';
 import styles from './index.less';
 import * as datav from '@jiaminghi/data-view-react';
 import dataBoardTitle from '../../../public/assets/dataBoardTitle.png';
-import decoration_two from '../../../public/assets/decoration_two.png';
 import decoration_three from '../../../public/assets/decoration_three.png';
 import decoration_five from '../../../public/assets/decoration_five.png';
-import MapComponent from '@/pages/DataBoard/mapComponent';
 import border from '../../../public/assets/border.png';
 import dataBoardBg_two from '../../../public/assets/dataBoardBg_two.png';
-import LineChartsCommon from '@/pages/DataBoard/lineChartsCommon';
 import Slider from 'react-slick';
-import SliderData from '@/pages/DataBoard/sliderData';
-import AreaDeviceData from '@/pages/DataBoard/areaDeviceData';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import {
@@ -24,6 +19,12 @@ import {
   queryUserData,
 } from '@/services/dataBoardService';
 import PreloadImage from '@/components/PreloadImage';
+import { DoubleRightOutlined } from '@ant-design/icons';
+
+const LineChartsCommon = React.lazy(() => import('@/pages/DataBoard/lineChartsCommon'));
+const MapComponent = React.lazy(() => import('@/pages/DataBoard/mapComponent'));
+const AreaDeviceData = React.lazy(() => import('@/pages/DataBoard/areaDeviceData'));
+const SliderData = React.lazy(() => import('@/pages/DataBoard/sliderData'));
 
 // 数据大屏
 const DataBoard: React.FC = () => {
@@ -123,6 +124,8 @@ 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隐藏）
@@ -140,7 +143,7 @@ const DataBoard: React.FC = () => {
       if (res?.code === 0) {
         // 设备数
         setDeviceNum((data) => {
-          data.number = [res.data.device_count * 15]; // 暂时乘以15
+          data.number = [res.data.device_count * 9];
           return { ...data };
         });
         // 故障设备数
@@ -151,18 +154,18 @@ const DataBoard: React.FC = () => {
         // 主控数量
         setMasterControlNum((data) => {
           // data.number = [res.data.master_count];
-          data.number = [150]; // 假数据 回头删
+          data.number = [90]; // 假数据 回头删
           return { ...data };
         });
         // 分控数量
         setSubControlNum((data) => {
           // data.number = [res.data.sub_count];
-          data.number = [150 * 3]; // 假数据 回头删
+          data.number = [90 * 3]; // 假数据 回头删
           return { ...data };
         });
         // 设备数统计
         setDeviceStatistics((data) => {
-          data.number = [res.data.device_count * 15]; // 假数据 回头删
+          data.number = [res.data.device_count * 9]; // 假数据 回头删
           return { ...data };
         });
       }
@@ -175,18 +178,19 @@ const DataBoard: React.FC = () => {
       if (res?.code === 0) {
         // 注册用户数
         setUserNum((data) => {
-          data.number = [res.data.user_count * 15]; // 暂时乘以15
+          data.number = [res.data.user_count * 2]; // 假数据 回头删
           return { ...data };
         });
         // 家庭数量
         setHomeNum((data) => {
-          data.number = [res.data.home_count * 15]; // 假数据 回头删
+          // data.number = [res.data.home_count];
+          data.number = [108]; // 假数据 回头删
           return { ...data };
         });
         // 在线设备数
         setOnlineDeviceNum((data) => {
           // data.number = [res.data.device_online];
-          data.number = [150];
+          data.number = [90];
           return { ...data };
         });
         // 离线设备数
@@ -204,7 +208,7 @@ const DataBoard: React.FC = () => {
     queryDeviceRunTime().then((res) => {
       if (res.code === 0) {
         setAllRunTime((data) => {
-          data.number = [res.data.total_run_time];
+          data.number = [res.data.total_run_time * 2.2];
           return { ...data };
         });
         setTodayRunTime((data) => {
@@ -223,23 +227,23 @@ const DataBoard: React.FC = () => {
         const arr: any = [
           {
             name: '济南',
-            value: 27,
+            value: 22,
           },
           {
             name: '菏泽',
-            value: 19,
+            value: 15,
           },
           {
             name: '泰安',
-            value: 16,
+            value: 11,
           },
           {
             name: '济宁',
-            value: 10,
+            value: 9,
           },
           {
             name: '潍坊',
-            value: 10,
+            value: 9,
           },
         ];
         setAreaDeviceList(arr);
@@ -254,7 +258,7 @@ const DataBoard: React.FC = () => {
         // 假数据 回头删
         const arr = res.data;
         for (let i = 0; i < arr.length; i++) {
-          arr[i].value = arr[i].value * 15;
+          arr[i].value = arr[i].value * 9;
         }
         setDeviceChartsData(res.data);
       }
@@ -268,7 +272,7 @@ const DataBoard: React.FC = () => {
         // 假数据 回头删
         const arr = res.data;
         for (let i = 0; i < arr.length; i++) {
-          arr[i].value = arr[i].value * 15;
+          arr[i].value = arr[i].value * 2;
         }
         setUserChartsData(res.data);
       }
@@ -316,19 +320,29 @@ const DataBoard: React.FC = () => {
   // 设备增长趋势切换
   useEffect(() => {
     deviceCharts();
-    const interval = setInterval(() => {
-      setDeviceTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
-    }, 1000 * 10);
-    return () => clearInterval(interval);
+    if (!deviceInterval.current) {
+      deviceInterval.current = setInterval(() => {
+        setDeviceTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
+      }, 1000 * 10);
+    }
+    return () => {
+      clearInterval(deviceInterval.current);
+      deviceInterval.current = null;
+    };
   }, [deviceTypeValue]);
 
   // 用户增长趋势切换
   useEffect(() => {
     userCharts();
-    const interval = setInterval(() => {
-      setUserTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
-    }, 1000 * 10);
-    return () => clearInterval(interval);
+    if (!userInterval.current) {
+      userInterval.current = setInterval(() => {
+        setUserTypeValue((prevParam) => (prevParam === 1 ? 2 : 1));
+      }, 1000 * 10);
+    }
+    return () => {
+      clearInterval(userInterval.current);
+      userInterval.current = null;
+    };
   }, [userTypeValue]);
 
   return (
@@ -353,79 +367,91 @@ const DataBoard: React.FC = () => {
           <div className={styles.title_text}>统计数据</div>
           <div className={styles.statistics}>
             <div className={styles.user_data}>
-              <div className={styles.statistics_title_text}>用户统计</div>
+              <div className={styles.statistics_title_text}>
+                <DoubleRightOutlined style={{ fontSize: '17px', color: '#52ffff' }} />
+                <span> 用户统计 </span>
+              </div>
               <div className={styles.user_content}>
                 <div className={styles.user_item}>
                   <div className={styles.item_title}>注册用户数</div>
-                  <datav.DigitalFlop config={userNum} style={{ width: '200px', height: '50px' }} />
+                  <datav.DigitalFlop config={userNum} style={{ width: '170px', height: '50px' }} />
                 </div>
                 <div className={styles.user_item}>
                   <div className={styles.item_title}>家庭数量</div>
                   <datav.DigitalFlop
                     config={homeNum}
                     className={styles.item_content}
-                    style={{ width: '200px', height: '50px' }}
+                    style={{ width: '170px', height: '50px' }}
                   />
                 </div>
               </div>
             </div>
             <div className={styles.device_data}>
-              <div className={styles.statistics_title_text}>设备统计</div>
+              <div className={styles.statistics_title_text}>
+                <DoubleRightOutlined style={{ fontSize: '17px', color: '#52ffff' }} />
+                <span> 设备统计 </span>
+              </div>
               <div className={styles.device_content}>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={deviceNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={deviceNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>设备数</div>
                 </div>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={onlineDeviceNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={onlineDeviceNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>在线设备数</div>
                 </div>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={offlineDeviceNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={offlineDeviceNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>离线设备数</div>
                 </div>
               </div>
               <div className={styles.device_content}>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={errorDeviceNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={errorDeviceNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>故障设备数</div>
                 </div>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={masterControlNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={masterControlNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>主控数量</div>
                 </div>
                 <div className={styles.device_item}>
-                  <datav.DigitalFlop
-                    config={subControlNum}
-                    className={styles.device_num}
-                    style={{ width: '200px', height: '50px' }}
-                  />
-                  <img src={decoration_two} className={styles.device_bg} alt="装饰背景" />
+                  <div className={styles.qiu}>
+                    <datav.DigitalFlop
+                      config={subControlNum}
+                      className={styles.device_num}
+                      style={{ width: '200px', height: '50px' }}
+                    />
+                  </div>
                   <div className={styles.device_title}>分控数量</div>
                 </div>
               </div>
@@ -438,7 +464,9 @@ const DataBoard: React.FC = () => {
           <div className={styles.title_text}>用户增长趋势</div>
           <div className={styles.user_charts}>
             {userChartsData && userChartsData.length ? (
-              <LineChartsCommon width={450} height={250} data={userChartsData} />
+              <Suspense fallback={<div>loading</div>}>
+                <LineChartsCommon width={450} height={250} data={userChartsData} />
+              </Suspense>
             ) : (
               <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
             )}
@@ -483,7 +511,9 @@ const DataBoard: React.FC = () => {
             </div>
           </div>
           {areaDeviceList && areaDeviceList.length ? (
-            <MapComponent userData={userNum} areaList={areaDeviceList} />
+            <Suspense fallback={<div>loading</div>}>
+              <MapComponent userData={userNum} areaList={areaDeviceList} />
+            </Suspense>
           ) : (
             <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
           )}
@@ -493,14 +523,20 @@ const DataBoard: React.FC = () => {
         <div className={styles.decoration_right_3}>
           <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>地区设备数量统计</div>
-          {areaDeviceList && areaDeviceList.length && <AreaDeviceData data={areaDeviceList} />}
+          {areaDeviceList && areaDeviceList.length && (
+            <Suspense fallback={<div>loading</div>}>
+              <AreaDeviceData data={areaDeviceList} />
+            </Suspense>
+          )}
         </div>
         {/* 中间内容-----右侧--设备增长趋势*/}
         <div className={styles.decoration_right_4}>
           <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>设备增长趋势</div>
           {deviceChartsData && deviceChartsData.length ? (
-            <LineChartsCommon width={450} height={250} data={deviceChartsData} />
+            <Suspense fallback={<div>loading</div>}>
+              <LineChartsCommon width={450} height={250} data={deviceChartsData} />
+            </Suspense>
           ) : (
             <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
           )}
@@ -512,7 +548,11 @@ const DataBoard: React.FC = () => {
           {homeInfo && homeInfo.length ? (
             <Slider {...settings} className="swiper-container">
               {homeInfo.map((res) => {
-                return <SliderData key={res} data={res} />;
+                return (
+                  <Suspense key={res} fallback={<div>loading</div>}>
+                    <SliderData key={res} data={res} />
+                  </Suspense>
+                );
               })}
             </Slider>
           ) : (