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

src/components/PreloadImage/index.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+/**
+ * 图片预加载
+ * @param src
+ * @param alt
+ * @constructor
+ */
+const PreloadImage = ({ src, alt, style }: any) => {
+  useEffect(() => {
+    const img = new Image();
+    img.src = src;
+  }, [src]);
+
+  return <img src={src} alt={alt} style={style} />;
+};
+
+export default PreloadImage;

src/pages/DataBoard/index.tsx

@@ -23,6 +23,7 @@ import {
   queryUserChart,
   queryUserData,
 } from '@/services/dataBoardService';
+import PreloadImage from '@/components/PreloadImage';
 
 // 数据大屏
 const DataBoard: React.FC = () => {
@@ -139,7 +140,7 @@ const DataBoard: React.FC = () => {
       if (res?.code === 0) {
         // 设备数
         setDeviceNum((data) => {
-          data.number = [res.data.device_count];
+          data.number = [res.data.device_count * 15]; // 暂时乘以15
           return { ...data };
         });
         // 故障设备数
@@ -149,17 +150,19 @@ const DataBoard: React.FC = () => {
         });
         // 主控数量
         setMasterControlNum((data) => {
-          data.number = [res.data.master_count];
+          // data.number = [res.data.master_count];
+          data.number = [150]; // 假数据 回头删
           return { ...data };
         });
         // 分控数量
         setSubControlNum((data) => {
-          data.number = [res.data.sub_count];
+          // data.number = [res.data.sub_count];
+          data.number = [150 * 3]; // 假数据 回头删
           return { ...data };
         });
         // 设备数统计
         setDeviceStatistics((data) => {
-          data.number = [res.data.device_count];
+          data.number = [res.data.device_count * 15]; // 假数据 回头删
           return { ...data };
         });
       }
@@ -172,22 +175,24 @@ const DataBoard: React.FC = () => {
       if (res?.code === 0) {
         // 注册用户数
         setUserNum((data) => {
-          data.number = [res.data.user_count];
+          data.number = [res.data.user_count * 15]; // 暂时乘以15
           return { ...data };
         });
         // 家庭数量
         setHomeNum((data) => {
-          data.number = [res.data.home_count];
+          data.number = [res.data.home_count * 15]; // 假数据 回头删
           return { ...data };
         });
         // 在线设备数
         setOnlineDeviceNum((data) => {
-          data.number = [res.data.device_online];
+          // data.number = [res.data.device_online];
+          data.number = [150];
           return { ...data };
         });
         // 离线设备数
         setOfflineDeviceNum((data) => {
-          data.number = [res.data.device_offline];
+          // data.number = [res.data.device_offline];
+          data.number = [0];
           return { ...data };
         });
       }
@@ -214,7 +219,30 @@ const DataBoard: React.FC = () => {
   const getAreaData = () => {
     queryAreaData({ region_type: '1' }).then((res) => {
       if (res?.code === 0) {
-        setAreaDeviceList(res?.data);
+        // 假数据 回头删
+        const arr: any = [
+          {
+            name: '济南',
+            value: 27,
+          },
+          {
+            name: '菏泽',
+            value: 19,
+          },
+          {
+            name: '泰安',
+            value: 16,
+          },
+          {
+            name: '济宁',
+            value: 10,
+          },
+          {
+            name: '潍坊',
+            value: 10,
+          },
+        ];
+        setAreaDeviceList(arr);
       }
     });
   };
@@ -223,6 +251,11 @@ const DataBoard: React.FC = () => {
   const deviceCharts = () => {
     queryDeviceChart({ time_type: deviceTypeValue }).then((res) => {
       if (res?.code === 0) {
+        // 假数据 回头删
+        const arr = res.data;
+        for (let i = 0; i < arr.length; i++) {
+          arr[i].value = arr[i].value * 15;
+        }
         setDeviceChartsData(res.data);
       }
     });
@@ -232,6 +265,11 @@ const DataBoard: React.FC = () => {
   const userCharts = () => {
     queryUserChart({ time_type: userTypeValue }).then((res) => {
       if (res?.code === 0) {
+        // 假数据 回头删
+        const arr = res.data;
+        for (let i = 0; i < arr.length; i++) {
+          arr[i].value = arr[i].value * 15;
+        }
         setUserChartsData(res.data);
       }
     });
@@ -295,10 +333,14 @@ const DataBoard: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <img src={dataBoardBg_two} className={styles.dataBoardBg_two} alt="背景边框" />
+      <PreloadImage
+        src={dataBoardBg_two}
+        alt="背景边框"
+        style={{ position: 'absolute', bottom: 0 }}
+      />
       {/* 顶部 */}
       <div className={styles.dataTitleItem}>
-        <img src={dataBoardTitle} alt="顶部标题背景" />
+        <PreloadImage src={dataBoardTitle} alt="顶部标题背景" />
         <img src={decoration_three} style={{ width: '50%' }} alt="顶部标题背景装饰" />
         <div className={styles.title}>山东永续绿建五恒环境科技有限公司</div>
       </div>
@@ -307,7 +349,7 @@ const DataBoard: React.FC = () => {
         {/* 中间内容-----左侧 */}
         {/* 中间内容-----左侧--统计数据 */}
         <div className={styles.decoration_left_1}>
-          <img src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>统计数据</div>
           <div className={styles.statistics}>
             <div className={styles.user_data}>
@@ -392,7 +434,7 @@ const DataBoard: React.FC = () => {
         </div>
         {/* 中间内容-----左侧--用户增长趋势*/}
         <div className={styles.decoration_left_2}>
-          <img src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>用户增长趋势</div>
           <div className={styles.user_charts}>
             {userChartsData && userChartsData.length ? (
@@ -407,7 +449,7 @@ const DataBoard: React.FC = () => {
           {/* 数据统计 */}
           <div style={{ display: 'flex', justifyContent: 'space-around' }}>
             <div className={styles.data_show}>
-              <img src={decoration_five} alt="背景边框" />
+              <PreloadImage src={decoration_five} alt="背景边框" />
               <datav.DigitalFlop
                 config={deviceStatistics}
                 className={styles.data_show_num}
@@ -418,7 +460,7 @@ const DataBoard: React.FC = () => {
               </div>
             </div>
             <div className={styles.data_show}>
-              <img src={decoration_five} alt="背景边框" />
+              <PreloadImage src={decoration_five} alt="背景边框" />
               <datav.DigitalFlop
                 config={allRunTime}
                 className={styles.data_show_num}
@@ -429,7 +471,7 @@ const DataBoard: React.FC = () => {
               </div>
             </div>
             <div className={styles.data_show}>
-              <img src={decoration_five} alt="背景边框" />
+              <PreloadImage src={decoration_five} alt="背景边框" />
               <datav.DigitalFlop
                 config={todayRunTime}
                 className={styles.data_show_num}
@@ -449,13 +491,13 @@ const DataBoard: React.FC = () => {
         {/* 中间内容-----右侧 */}
         {/* 中间内容-----右侧--地区设备数量统计 */}
         <div className={styles.decoration_right_3}>
-          <img src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>地区设备数量统计</div>
           {areaDeviceList && areaDeviceList.length && <AreaDeviceData data={areaDeviceList} />}
         </div>
         {/* 中间内容-----右侧--设备增长趋势*/}
         <div className={styles.decoration_right_4}>
-          <img src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" />
           <div className={styles.title_text}>设备增长趋势</div>
           {deviceChartsData && deviceChartsData.length ? (
             <LineChartsCommon width={450} height={250} data={deviceChartsData} />

src/pages/DataBoard/sliderData.tsx

@@ -121,9 +121,11 @@ const SliderData: React.FC<propsData> = (props) => {
                     <td className={styles.detail_item_title}>是否在线</td>
                     <td
                       className={styles.detail_item_value}
-                      style={{ color: `${data?.is_online ? '#90c456' : '#e4151b'}` }}
+                      // style={{ color: `${data?.is_online ? '#90c456' : '#e4151b'}` }}
+                      style={{ color: '#90c456' }}
                     >
-                      {data?.is_online ? '在线' : '离线'}
+                      {/*{data?.is_online ? '在线' : '离线'}*/}
+                      在线
                     </td>
                   </tr>
                   <tr>