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

src/components/PreloadImage/index.tsx

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
  * 图片预加载
  * @param src
  * @param alt
+ * @param style
  * @constructor
  */
 const PreloadImage = ({ src, alt, style }: any) => {

src/models/electricityMessage.ts

@@ -1,14 +1,14 @@
-import { mqttConnect, mqttSub } from '@/pages/mqtt-connet';
+// import { mqttConnect, mqttSub } from '@/pages/mqtt-connet';
 
-const parseTopic = (topic: string): DeviceMessage => {
-  const result: DeviceMessage = {};
-  const arr = topic.split('/');
-  if (arr.length > 4) {
-    result.DeviceCode = arr[3];
-    result.SubDeviceId = arr[4];
-  }
-  return result;
-};
+// const parseTopic = (topic: string): DeviceMessage => {
+//   const result: DeviceMessage = {};
+//   const arr = topic.split('/');
+//   if (arr.length > 4) {
+//     result.DeviceCode = arr[3];
+//     result.SubDeviceId = arr[4];
+//   }
+//   return result;
+// };
 export default {
   namespace: 'MQTTMessage',
   state: {
@@ -19,25 +19,26 @@ export default {
     setupHistory({ dispatch, history }: any) {
       history.listen((location: any) => {
         if (location.pathname === '/DataBoard') {
-          const client = mqttConnect();
-          client.on('connect', () => {
-            dispatch({ type: 'connected', payload: true });
-            mqttSub(client, {
-              topic: ['/device_message/1ps9djpswi0cds7cofynkso300eql4iu/#'],
-              qos: 0,
-            });
-          });
-          client.on('error', () => {
-            client.end();
-          });
-
-          client.on('message', (topic, message: Buffer) => {
-            // console.log('收到的消息', topic, message.toString());
-            const data = JSON.parse(message.toString());
-            const msg = parseTopic(topic);
-            msg.Data = data;
-            dispatch({ type: 'message', payload: msg });
-          });
+          console.log(dispatch);
+          // const client = mqttConnect();
+          // client.on('connect', () => {
+          //   dispatch({ type: 'connected', payload: true });
+          //   mqttSub(client, {
+          //     topic: ['/device_message/1ps9djpswi0cds7cofynkso300eql4iu/#'],
+          //     qos: 0,
+          //   });
+          // });
+          // client.on('error', () => {
+          //   client.end();
+          // });
+          //
+          // client.on('message', (topic, message: Buffer) => {
+          //   // console.log('收到的消息', topic, message.toString());
+          //   const data = JSON.parse(message.toString());
+          //   const msg = parseTopic(topic);
+          //   msg.Data = data;
+          //   dispatch({ type: 'message', payload: msg });
+          // });
         }
       });
     },

src/pages/DataBoard/index.less

@@ -7,7 +7,7 @@ body {
   height: 1080px;
   overflow: hidden;
   //background: #010421;
-  background: url('../../../public/assets/dataBoardBg.jpg') center no-repeat;
+  background: url('../../../public/assets/dataBoardBg.webp') center no-repeat;
   background-size: 100% 100%;
 
   .dataBoardBg_two {

src/pages/DataBoard/index.tsx

@@ -309,11 +309,11 @@ const DataBoard: React.FC = () => {
       getAreaData();
       userNumData();
       getDeviceData();
-    }, 10 * 60 * 1000);
+    }, 10 * 60 * 1000); // 10分钟
 
     timerFun(() => {
       getRunTime();
-    }, 1000 * 5);
+    }, 1000 * 10); // 10秒钟
 
     return () => {};
   }, []);
@@ -323,7 +323,7 @@ const DataBoard: React.FC = () => {
     const timerId = setTimeout(() => {
       setDeviceTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
       deviceCharts();
-    }, 1000 * 10); // 10秒钟
+    }, 1000 * 30); // 30秒钟
 
     return () => {
       clearTimeout(timerId);
@@ -335,7 +335,7 @@ const DataBoard: React.FC = () => {
     const timerId = setTimeout(() => {
       setUserTypeValue((prevValue) => (prevValue === 1 ? 2 : 1));
       userCharts();
-    }, 1000 * 10); // 10秒钟
+    }, 1000 * 30); // 30秒钟
 
     return () => {
       clearTimeout(timerId);
@@ -347,6 +347,7 @@ const DataBoard: React.FC = () => {
       <PreloadImage
         src={dataBoardBg_two}
         alt="背景边框"
+        loading="lazy"
         style={{ position: 'absolute', bottom: 0 }}
       />
       {/* 顶部 */}
@@ -360,7 +361,7 @@ const DataBoard: React.FC = () => {
         {/* 中间内容-----左侧 */}
         {/* 中间内容-----左侧--统计数据 */}
         <div className={styles.decoration_left_1}>
-          <PreloadImage src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" style={{ width: '480px', height: '300px' }} />
           <div className={styles.title_text}>统计数据</div>
           <div className={styles.statistics}>
             <div className={styles.user_data}>
@@ -457,7 +458,7 @@ const DataBoard: React.FC = () => {
         </div>
         {/* 中间内容-----左侧--用户增长趋势*/}
         <div className={styles.decoration_left_2}>
-          <PreloadImage src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" style={{ width: '480px', height: '300px' }} />
           <div className={styles.title_text}>用户增长趋势</div>
           <div className={styles.user_charts}>
             {userChartsData && userChartsData.length ? (
@@ -518,7 +519,7 @@ const DataBoard: React.FC = () => {
         {/* 中间内容-----右侧 */}
         {/* 中间内容-----右侧--地区设备数量统计 */}
         <div className={styles.decoration_right_3}>
-          <PreloadImage src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" style={{ width: '480px', height: '300px' }} />
           <div className={styles.title_text}>地区设备数量统计</div>
           {areaDeviceList && areaDeviceList.length && (
             <Suspense fallback={<div>loading</div>}>
@@ -528,7 +529,7 @@ const DataBoard: React.FC = () => {
         </div>
         {/* 中间内容-----右侧--设备增长趋势*/}
         <div className={styles.decoration_right_4}>
-          <PreloadImage src={border} alt="边框" />
+          <PreloadImage src={border} alt="边框" style={{ width: '480px', height: '300px' }} />
           <div className={styles.title_text}>设备增长趋势</div>
           {deviceChartsData && deviceChartsData.length ? (
             <Suspense fallback={<div>loading</div>}>

src/pages/DataBoard/mapComponent.tsx

@@ -145,7 +145,7 @@ const MapComponent: React.FC<propsData> = (props) => {
       <div ref={chartRef} className={styles.mapContent} />
       <div className={styles.content_num}>
         <div style={{ position: 'relative' }}>
-          <img src={border} alt="装饰线条" />
+          <img src={border} alt="装饰线条" style={{ width: '200px', height: '95px' }} />
           <div className={styles.content}>
             <datav.DigitalFlop
               config={userData}

src/pages/DataBoard/sliderData.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import * as datav from '@jiaminghi/data-view-react';
 import styles from './sliderData.less';
 import { connect } from '@@/plugin-dva/exports';
-import { JSONPath } from 'jsonpath-plus';
+// import { JSONPath } from 'jsonpath-plus';
 
 interface propsData {
   data: any;
@@ -14,7 +14,8 @@ interface propsData {
  * @constructor
  */
 const SliderData: React.FC<propsData> = (props) => {
-  const { data, MQTTMessage } = props;
+  // const { data, MQTTMessage } = props;
+  const { data } = props;
   const [voltage, setVoltage] = useState({ ua: 0 });
   const [current, setCurrent] = useState({ ia: 0 });
   const [activePower, setActivePower] = useState({ active_power: 0 });
@@ -28,49 +29,65 @@ const SliderData: React.FC<propsData> = (props) => {
     co2: data.co2,
   });
 
+  // 回头删掉
   useEffect(() => {
-    // 电
-    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],
-        });
-      }
-    }
+    setCurrent({ ia: 0 });
+    setVoltage({ ua: 0 });
+    setActivePower({ active_power: 0 });
+    setControlData({
+      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,
+    });
+  }, []);
 
-    //温湿度等
-    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]);
+  // useEffect(() => {
+  //   // 电
+  //   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],
+  //       });
+  //     }
+  //   }
+  //
+  //   //温湿度等
+  //   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) {