Browse Source

环境参数折线图

anxiaoxia 2 years ago
parent
commit
2881c06425

+ 0 - 3
src/pages/Environment/components/chartModal/index.jsx

@@ -96,9 +96,6 @@ export default ({ onClose, showSpace, selNav }) => {
             </div>
             <div className={styles.chart}>
               <LineChart paramObj={paramObj} spaceId={showSpace.id} />
-              <div className={styles.chartText}>
-                <span>{paramObj.id == 'Tdb,RH' ? '温湿度逐时分布' : '浓度逐时分布'}</span>
-              </div>
             </div>
             <div className={styles.foot}>
               <div className={styles.l}>{paramObj.name}</div>

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

@@ -106,4 +106,10 @@
       height: 96px;
     }
   }
+
+  .noNum {
+    color: #c4c4c4;
+    line-height: 220px;
+    text-align: center;
+  }
 }

+ 45 - 8
src/pages/Environment/components/chartModal/lineChart.jsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Line } from '@ant-design/plots';
+import { Spin } from 'antd';
+import styles from './index.less';
 import { queryPropertyData } from '@/services/ant-design-pro/environment';
 export default ({ paramObj, spaceId }) => {
   let [data, setData] = useState([]);
@@ -26,8 +28,8 @@ export default ({ paramObj, spaceId }) => {
         resArr.push(resData);
       });
       Promise.all(resArr).then((res) => {
-        dataArr = [...res[0], ...res[1]];
-        setData(dataArr);
+        const resData = [...res[0], ...res[1]];
+        setData(resData);
       });
     } else {
       const resData = await getChartData(paramObj.id, paramObj.name);
@@ -42,17 +44,33 @@ export default ({ paramObj, spaceId }) => {
     return queryPropertyData(params).then((res) => {
       let chartArr = [];
       if (res.dayTarget) {
+        let scalesCheckArr = [];
+        let arr = [];
         const max = res.dayTarget[0] && res.dayTarget[0][paramObj.maxType];
         setLevelMax(max); // 最大值
         res.propertyData.shift();
-        const arr = res.propertyData;
-
+        arr = res.propertyData;
         arr.forEach((itemArr) => {
-          const scales =
-            itemArr[1] == '-9999' ? '--' : Number(itemArr[1].toFixed(paramObj.pointNum));
+          let scales = '--';
+          if (itemArr[1] == '-9999') {
+            scalesCheckArr.push(itemArr[1]);
+            scales = '--';
+          } 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 });
         });
+        if (scalesCheckArr.length == arr.length) {
+          // 有返回时间且数据都是-9999 显示暂无数据
+          return ['noNum'];
+        }
+      } else {
+        // 无返回数据 显示 该空间数据未配置
+        return ['notDeploy'];
       }
+
       return chartArr;
     });
   };
@@ -85,5 +103,24 @@ export default ({ paramObj, spaceId }) => {
       },
     ],
   };
-  return <Line {...config} />;
+  if (data[0] == 'notDeploy') {
+    return <div className={styles.noNum}>该空间数据未配置</div>;
+  } 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>
+      </>
+    );
+  } else {
+    return (
+      <div className={styles.noNum}>
+        <Spin />
+      </div>
+    );
+  }
 };

+ 1 - 1
src/services/ant-design-pro/environment.ts

@@ -71,7 +71,7 @@ function commonParams() {
 // chart
 export async function queryPropertyData(params: any, options?: { [key: string]: any }) {
   return request<API.DeviceTimeType>(
-    `/sgadmin/duoduo-service/duoduoenv-service/spaceAdjust/queryPropertyData`,
+    `/sgadmin/duoduo-service/duoduoenv-service/spaceAdjust/queryPropertyData?${commonParams()}`,
     {
       method: 'GET',
       params: params,