Просмотр исходного кода

Merge branch 'master' of http://39.106.8.246:3003/sagacloud/sagacloud-manager-control

zhaojijng 2 лет назад
Родитель
Сommit
28bc01527f

+ 107 - 0
src/pages/Environment/components/chartModal/TdbRHchart.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { DualAxes } from '@ant-design/plots';
+import { Spin } from 'antd';
+import styles from './index.less';
+export default ({ data }) => {
+  let tdbArr = [];
+  let rhArr = [];
+  let minMaxTdb = {
+    minTdb: 100,
+    maxTdb: 0,
+  };
+  let minMaxRH = {
+    maxRH: 0,
+    minRH: 100,
+  };
+  data.map((item) => {
+    if (item.Tdb) {
+      tdbArr = data;
+      if (item.Tdb < minMaxTdb.minTdb) {
+        minMaxTdb.minTdb = item.Tdb;
+      }
+      if (item.Tdb > minMaxTdb.maxTdb) {
+        minMaxTdb.maxTdb = item.Tdb;
+      }
+    }
+    if (item.RH) {
+      rhArr = data;
+      if (item.RH < minMaxRH.minRH) {
+        minMaxRH.minRH = item.RH;
+      }
+      if (item.RH > minMaxRH.maxRH) {
+        minMaxRH.maxRH = item.RH;
+      }
+    }
+  });
+  const config = {
+    data: [tdbArr, rhArr],
+    xField: 'Date',
+    yField: ['Tdb', 'RH'],
+    padding: [16],
+    xAxis: {
+      range: [0, 1],
+    },
+    yAxis: {
+      RH: {
+        max: Math.ceil(minMaxRH.maxRH),
+        min: Math.floor(minMaxRH.minRH),
+        // tickCount: 5,
+      },
+      Tdb: {
+        max: Math.ceil(minMaxTdb.maxTdb),
+        min: Math.floor(minMaxTdb.minTdb),
+        // tickCount: 5,
+      },
+    },
+    tooltip: {
+      formatter: (item) => {
+        return {
+          name: item.RH ? '湿度' : '温度',
+          value: item.RH ? `${item.RH}%` : `${item.Tdb}°C`,
+        };
+      },
+    },
+    legend: false,
+    annotations: [
+      [
+        {
+          type: 'text',
+          content: '°C',
+          position: ['-6%', '-10%'],
+        },
+      ],
+      [
+        {
+          type: 'text',
+          content: '%',
+          position: ['102%', '-10%'],
+        },
+      ],
+    ],
+    geometryOptions: [
+      {
+        geometry: 'line',
+        color: '#5B8FF9',
+      },
+      {
+        geometry: 'line',
+        color: '#5AD8A6',
+      },
+    ],
+  };
+  return (
+    <>
+      <div className={styles.legend}>
+        <div className={styles.itemLegend}>
+          <i className={`${styles.linebox} ${styles.lineTdb}`}></i>
+          <span>温度</span>
+        </div>
+        <div className={styles.itemLegend}>
+          <i className={styles.linebox}></i>
+          <span>湿度</span>
+        </div>
+      </div>
+      <DualAxes {...config} />
+    </>
+  );
+};

+ 25 - 0
src/pages/Environment/components/chartModal/index.less

@@ -90,6 +90,7 @@
   .chartText {
     padding: 10px 0;
     color: #c4c4c4;
+    text-align: center;
   }
   .leveSt {
     padding-top: 40px;
@@ -112,4 +113,28 @@
     line-height: 220px;
     text-align: center;
   }
+  .legend {
+    position: absolute;
+    left: 50%;
+    display: flex;
+    justify-content: center;
+    transform: translateX(-50%);
+  }
+  .itemLegend {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+  }
+
+  .linebox {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 10px;
+    height: 1px;
+    margin-right: 10px;
+    border-top: 2px solid #5ad8a6;
+  }
+  .lineTdb {
+    border-top: 2px solid #5b8ff9;
+  }
 }

+ 39 - 12
src/pages/Environment/components/chartModal/lineChart.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Line } from '@ant-design/plots';
 import { Spin } from 'antd';
 import styles from './index.less';
+import TdbRHchart from './TdbRHchart.jsx';
 import { queryPropertyData } from '@/services/sagacare_service/environment';
 export default ({ paramObj, spaceId }) => {
   let [data, setData] = useState([]);
@@ -27,8 +28,20 @@ export default ({ paramObj, spaceId }) => {
         const resData = getChartData(item, type);
         resArr.push(resData);
       });
+
       Promise.all(resArr).then((res) => {
-        const resData = [...res[0], ...res[1]];
+        let resData = [];
+        if (res[0].length === 1 && res[1] === 1) {
+          // 都没有数据
+          resData = res[0];
+        } else {
+          res[0] = res[0].length !== 1 ? res[0] : [];
+          res[1] = res[1].length !== 1 ? res[1] : [];
+          for (let i = 0; i < res[0].length; i++) {
+            let tempObj = { ...res[0][i], ...res[1][i] };
+            resData.push(tempObj);
+          }
+        }
         setData(resData);
       });
     } else {
@@ -50,6 +63,11 @@ export default ({ paramObj, spaceId }) => {
         setLevelMax(max); // 最大值
         res.propertyData.shift();
         arr = res.propertyData;
+        let key = 'scales';
+
+        if (objId === 'RH' || objId === 'Tdb') {
+          key = objId;
+        }
         arr.forEach((itemArr) => {
           let scales = '--';
           if (itemArr[1] == '-9999') {
@@ -58,9 +76,7 @@ export default ({ paramObj, spaceId }) => {
           } else {
             scales = Number(itemArr[1].toFixed(paramObj.pointNum));
           }
-          //   const scales =
-          //     itemArr[1] == '-9999' ? '--' : Number(itemArr[1].toFixed(paramObj.pointNum));
-          chartArr.push({ Date: dealTime(itemArr[0]), scales: scales, type: type });
+          chartArr.push({ Date: dealTime(itemArr[0]), [key]: scales, type: type });
         });
         if (scalesCheckArr.length == arr.length) {
           // 有返回时间且数据都是-9999 显示暂无数据
@@ -108,14 +124,25 @@ export default ({ paramObj, spaceId }) => {
   } else if (data[0] == 'noNum') {
     return <div className={styles.noNum}>暂无数据</div>;
   } else if (data.length > 3) {
-    return (
-      <>
-        <Line {...config} />
-        <div className={styles.chartText}>
-          <span>{paramObj.id == 'Tdb,RH' ? '温湿度逐时分布' : '浓度逐时分布'}</span>
-        </div>
-      </>
-    );
+    if (paramObj.id == 'Tdb,RH') {
+      return (
+        <>
+          <TdbRHchart data={data} />
+          <div className={styles.chartText}>
+            <span>温湿度逐时分布</span>
+          </div>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <Line {...config} />
+          <div className={styles.chartText}>
+            <span>浓度逐时分布</span>
+          </div>
+        </>
+      );
+    }
   } else {
     return (
       <div className={styles.noNum}>