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

src/pages/DataBoard/areaDeviceData.tsx

@@ -19,10 +19,8 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
       text: '地区Top 5',
       top: 0,
       right: '10%',
-      textStyle: {
-        color: '#fff',
-        fontSize: 16,
-      },
+      color: '#fff',
+      fontSize: 16,
     },
     grid: {
       top: '25%',
@@ -52,9 +50,7 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
           },
         },
         axisLabel: {
-          textStyle: {
-            color: '#fff',
-          },
+          color: '#fff',
           margin: 30,
         },
       },
@@ -64,9 +60,7 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
         show: false,
         type: 'value',
         axisLabel: {
-          textStyle: {
-            color: '#fff',
-          },
+          color: '#fff',
         },
         splitLine: {
           lineStyle: {
@@ -87,13 +81,11 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
         symbolPosition: 'end',
         z: 12,
         label: {
-          normal: {
-            show: true,
-            position: 'top',
-            fontSize: 15,
-            fontWeight: 'bold',
-            color: '#34DCFF',
-          },
+          show: true,
+          position: 'top',
+          fontSize: 15,
+          fontWeight: 'bold',
+          color: '#34DCFF',
         },
         color: '#2DB1EF',
         data: [],
@@ -116,12 +108,10 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
         symbolOffset: [0, 12], // 下部内环
         z: 10,
         itemStyle: {
-          normal: {
-            color: 'transparent',
-            borderColor: '#2EA9E5',
-            borderType: 'solid',
-            borderWidth: 1,
-          },
+          color: 'transparent',
+          borderColor: '#2EA9E5',
+          borderType: 'solid',
+          borderWidth: 1,
         },
         data: [],
       },
@@ -132,12 +122,10 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
         symbolOffset: [0, 18], // 下部外环
         z: 10,
         itemStyle: {
-          normal: {
-            color: 'transparent',
-            borderColor: '#19465D',
-            borderType: 'solid',
-            borderWidth: 2,
-          },
+          color: 'transparent',
+          borderColor: '#19465D',
+          borderType: 'solid',
+          borderWidth: 2,
         },
         data: [],
       },
@@ -147,19 +135,17 @@ const AreaDeviceData: React.FC<propsData> = (props) => {
         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,
-          },
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+            {
+              offset: 0,
+              color: '#38B2E6',
+            },
+            {
+              offset: 1,
+              color: '#0B3147',
+            },
+          ]),
+          opacity: 0.8,
         },
         data: [],
       },

src/pages/DataBoard/index.tsx

@@ -128,6 +128,8 @@ const DataBoard: React.FC = () => {
   const [mapData, setMapData] = useState({
     company_name: '',
   });
+  const [deviceData, setDeviceData] = useState(0);
+  const [userData, setUserData] = useState(0);
 
   const settings = {
     dots: false, //圆点显示（false隐藏）
@@ -135,7 +137,7 @@ const DataBoard: React.FC = () => {
     autoplay: true, //自动播放，速度默认为（3000毫秒）
     speed: 3000, //自动播放速度（毫秒）
     slidesToShow: 2, //在一帧中显示2张卡片
-    slidesToScroll: 1, //一次滚动2张卡片
+    slidesToScroll: 1, //一次滚动1张卡片
     variableWidth: true,
   };
 
@@ -143,6 +145,7 @@ const DataBoard: React.FC = () => {
   const getDeviceData = () => {
     queryDeviceData().then((res) => {
       if (res?.code === 0) {
+        setDeviceData(res.data.device_count);
         // 设备数
         setDeviceNum((data) => {
           data.number = [res.data.device_count];
@@ -176,6 +179,7 @@ const DataBoard: React.FC = () => {
   const userNumData = () => {
     queryUserData().then((res) => {
       if (res?.code === 0) {
+        setUserData(res.data.user_count);
         // 注册用户数
         setUserNum((data) => {
           data.number = [res.data.user_count];
@@ -488,7 +492,12 @@ const DataBoard: React.FC = () => {
           {/* 地图 */}
           {areaDeviceList && areaDeviceList.length ? (
             <Suspense fallback={<div>loading</div>}>
-              <MapComponent mapData={mapData} userData={userNum} areaList={areaDeviceList} />
+              <MapComponent
+                mapData={mapData}
+                userData={userData}
+                deviceData={deviceData}
+                areaList={areaDeviceList}
+              />
             </Suspense>
           ) : (
             <datav.Loading style={{ position: 'absolute' }}>Loading...</datav.Loading>
@@ -524,6 +533,7 @@ const DataBoard: React.FC = () => {
           {homeInfo && homeInfo.length ? (
             <Slider {...settings} className="swiper-container">
               {homeInfo.map((res) => {
+                console.log(res);
                 return (
                   <Suspense key={res} fallback={<div>loading</div>}>
                     <SliderData key={res} data={res} />

src/pages/DataBoard/lineChartsCommon.tsx

@@ -80,11 +80,9 @@ const LineChartsCommon: React.FC<editPros> = (props) => {
         symbol: 'circle', //拐点设置为实心
         symbolSize: 2, //拐点大小
         itemStyle: {
-          normal: {
-            borderColor: 'rgba(42,157,255,.2)', //拐点边框颜色
-            borderWidth: 10, //拐点边框大小，
-            color: '#1890FF',
-          },
+          borderColor: 'rgba(42,157,255,.2)', //拐点边框颜色
+          borderWidth: 10, //拐点边框大小，
+          color: '#1890FF',
         },
         tooltip: {
           trigger: 'axis',
@@ -94,11 +92,9 @@ const LineChartsCommon: React.FC<editPros> = (props) => {
           },
         },
         lineStyle: {
-          normal: {
-            width: 3,
-            shadowColor: '#1890FF',
-            shadowBlur: 20,
-          },
+          width: 3,
+          shadowColor: '#1890FF',
+          shadowBlur: 20,
         },
         areaStyle: {
           opacity: 1,
@@ -134,10 +130,8 @@ const LineChartsCommon: React.FC<editPros> = (props) => {
           color: '#0069d9',
         },
         lineStyle: {
-          normal: {
-            width: 1,
-            opacity: 0,
-          },
+          width: 1,
+          opacity: 0,
         },
         // 光点
         data: [

src/pages/DataBoard/mapComponent.less

@@ -9,18 +9,23 @@
   .content_num {
     position: absolute;
     top: 360px;
-    //right: 50px;
-    left: 240px;
+    right: 0;
+    width: 280px;
+    height: 195px;
+    background-image: url('../../../public/assets/border2.png');
     .content {
       position: absolute;
-      bottom: 4px;
+      top: 60px;
+      left: 75px;
       width: 100%;
       text-align: center;
       .content_title {
         color: #fff;
-        font-size: 12px;
+        font-size: 15px;
+        line-height: 40px;
       }
       .content_value {
+        margin-left: 35px;
         color: #fff;
         font-weight: bold;
         font-size: 25px;

src/pages/DataBoard/mapComponent.tsx

@@ -1,11 +1,10 @@
 import * as echarts from 'echarts';
 import styles from './mapComponent.less';
 import React, { useEffect, useRef } from 'react';
-import border from '../../../public/assets/decoration_six.png';
-import * as datav from '@jiaminghi/data-view-react';
 
 interface propsData {
-  userData: object;
+  userData: number;
+  deviceData: number;
   areaList: any;
   mapData: any;
 }
@@ -16,8 +15,7 @@ interface propsData {
  */
 const MapComponent: React.FC<propsData> = (props) => {
   const chartRef: any = useRef();
-  const { userData, areaList, mapData } = props;
-  const data: any = mapData.map_json; //地图的数据来自之前引入的json文件
+  const { userData, deviceData, areaList, mapData } = props;
   const geoCoordMap = {
     济南市: [117, 36.65],
     青岛市: [120.33, 36.07],
@@ -53,168 +51,65 @@ const MapComponent: React.FC<propsData> = (props) => {
   };
 
   useEffect(() => {
+    // 初始化统计图对象
     const myChart = echarts.init(chartRef.current);
-    echarts.registerMap('shandong', data); //此步不可省略，要想展示一个地图，先需要注册，巨坑（官方根本无文档，全靠瞎猜,气死我了快）
-
-    // 点位
-    // const points = [];
-    // // 线
-    // const lineData = [];
-    // for(let i=0;i<Object.keys(geoCoordMap).length;i++){
-    //   points.push({
-    //     name:Object.keys(geoCoordMap)[i],
-    //     value:geoCoordMap[Object.keys(geoCoordMap)[i]]
-    //   })
-    //   lineData.push({
-    //     name:`济南 -> ${Object.keys(geoCoordMap)[i]}`,
-    //     value: 40,
-    //     coords: [
-    //       [117, 36.65],
-    //       geoCoordMap[Object.keys(geoCoordMap)[i]]
-    //     ]
-    //   })
-    // }
-    // const colors = ['#46bee9'];
-
-    const options = {
-      geo: {
-        show: true,
-        map: 'shandong',
-        roam: false,
-        zoom: 1.2,
-        label: {
-          normal: {
-            show: false,
-          },
-          emphasis: {
+    if (mapData && mapData.map_json) {
+      const data = JSON.parse(mapData.map_json);
+      echarts.registerMap('map', data);
+      const options = {
+        geo: {
+          show: true,
+          map: 'map',
+          roam: false,
+          zoom: 1.2,
+          label: {
             show: false,
           },
-        },
-        itemStyle: {
-          normal: {
+          itemStyle: {
             areaColor: '#091632',
             borderColor: '#1773c3',
             shadowColor: '#1773c3',
             shadowBlur: 20,
           },
         },
-      },
-      series: [
-        {
-          name: 'light',
-          type: 'scatter',
-          coordinateSystem: 'geo',
-          data: convertData(areaList),
-          symbolSize: function (val: number[]) {
-            return val[2];
-          },
-          label: {
-            normal: {
+        series: [
+          {
+            name: 'light',
+            type: 'scatter',
+            coordinateSystem: 'geo',
+            data: convertData(areaList),
+            symbolSize: function (val: number[]) {
+              return val[2];
+            },
+            label: {
               formatter: '{b}',
               position: 'right',
               show: true,
             },
-            emphasis: {
-              show: true,
-            },
-          },
-          itemStyle: {
-            normal: {
+            itemStyle: {
               color: '#ddb926',
             },
           },
-        },
-        {
-          type: 'map',
-          map: 'shandong',
-          zoom: 1.2,
-          label: {
-            normal: {
+          {
+            type: 'map',
+            map: 'map',
+            zoom: 1.2,
+            label: {
               show: false,
+              color: '#fff',
             },
-            emphasis: {
-              show: false,
-              textStyle: {
-                color: '#fff',
-              },
-            },
-          },
-          roam: false,
-          itemStyle: {
-            normal: {
+            roam: false,
+            itemStyle: {
               areaColor: '#031525',
               borderColor: '#3B5077',
               borderWidth: 1,
             },
-            emphasis: {
-              areaColor: '#0f2c70',
-            },
+            data: [],
           },
-          data: [],
-        },
-        // {
-        //   type: 'effectScatter',
-        //   coordinateSystem: 'geo',
-        //   showEffectOn: 'render',
-        //   rippleEffect: {
-        //     period: 5,
-        //     scale: 5,
-        //     brushType: 'fill'
-        //   },
-        //   hoverAnimation: true,
-        //   label: {
-        //     formatter: '{b}',
-        //     position: 'right',
-        //     offset: [15, 0],
-        //     color: (param: { dataIndex: number; }) => colors[param.dataIndex % colors.length],
-        //     show: true
-        //   },
-        //   itemStyle: {
-        //     color: (param: { dataIndex: number; }) => {
-        //       return colors[param.dataIndex % colors.length];
-        //     },
-        //     shadowBlur: 10,
-        //     shadowColor: '#333',
-        //     opacity: 0.75
-        //   },
-        //   emphasis: {
-        //     itemStyle: {
-        //       opacity: 1, //线条宽度
-        //     }
-        //   },
-        //   data: points
-        // },
-        // {
-        //   name: '济南',
-        //   type: 'lines',
-        //   zlevel: 2,
-        //   symbol: ['none', 'arrow'],
-        //   symbolSize: 7,
-        //   effect: {
-        //     show: true,
-        //     period: 4,
-        //     trailLength: 0.02,
-        //     symbol: 'circle',
-        //     symbolSize: 4,
-        //     color: '#46bee9'
-        //   },
-        //   lineStyle: {
-        //     width: 0.5, //线条宽度
-        //     opacity: 0.5, //尾迹线条透明度
-        //     curveness: .3, //尾迹线条曲直度
-        //     shadowBlur: 10,
-        //     color: '#46bee9'
-        //   },
-        //   emphasis: {
-        //     lineStyle: {
-        //       width: 2, //线条宽度
-        //     }
-        //   },
-        //   data: lineData
-        // }
-      ],
-    };
-    myChart.setOption(options, true);
+        ],
+      };
+      myChart.setOption(options);
+    }
     // 组件卸载
     return () => {
       myChart.clear();
@@ -225,19 +120,14 @@ const MapComponent: React.FC<propsData> = (props) => {
     <div className={styles.container}>
       <div ref={chartRef} className={styles.mapContent} />
       <div className={styles.content_num}>
-        <div style={{ position: 'relative' }}>
-          <img
-            src={border}
-            alt="装饰线条"
-            style={{ width: '200px', height: '95px', transform: 'rotateY(180deg)' }}
-          />
-          <div className={styles.content}>
-            <datav.DigitalFlop
-              config={userData}
-              className={styles.content_value}
-              style={{ width: '200px', height: '50px' }}
-            />
+        <div className={styles.content}>
+          <div style={{ display: 'flex' }}>
             <div className={styles.content_title}>用户数</div>
+            <div className={styles.content_value}>{userData}</div>
+          </div>
+          <div style={{ display: 'flex' }}>
+            <div className={styles.content_title}>设备数</div>
+            <div className={styles.content_value}>{deviceData}</div>
           </div>
         </div>
       </div>

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,8 +14,7 @@ interface propsData {
  * @constructor
  */
 const SliderData: React.FC<propsData> = (props) => {
-  // const { data, MQTTMessage } = props;
-  const { data } = props;
+  const { data, MQTTMessage } = props;
   const [voltage, setVoltage] = useState({ ua: 0 });
   const [current, setCurrent] = useState({ ia: 0 });
   const [activePower, setActivePower] = useState({ active_power: 0 });
@@ -29,65 +28,49 @@ const SliderData: React.FC<propsData> = (props) => {
     co2: data.co2,
   });
 
-  // 回头删掉
   useEffect(() => {
-    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 === '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],
+        });
+      }
+    }
 
-  // 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]);
+    //温湿度等
+    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) {