[Pref 0000] 优化预警页面下的测点组件和预测曲线模块代码

src/views/vent/monitorManager/alarmMonitor/common/measurePoint.vue

@@ -54,7 +54,11 @@
   // well i know this is trash but the time is reaching
   defineProps<{
     cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
-    charts: { id: string; label: string; time: []; data: [number, number, number, number]; monitorData: number[] }[];
+    charts: {
+      label: string;
+      time: Date;
+      data: [number, number, number, number];
+    }[];
     title: string;
     timeout?: number;
   }>();

src/views/vent/monitorManager/alarmMonitor/common/predictionCurve.vue

@@ -14,10 +14,27 @@
   import { ref, watch } from 'vue';
   import EchartLine3 from './echartLine3.vue';
 
+  /** 给定全量数据，绘制曲线对应的prop */
+  interface CurveProp {
+    label: string;
+    time: [];
+    data: [number, number, number];
+    monitorData: number[];
+  }
+  /** 给定单点数据，更新曲线对应的prop */
+  interface PointProp {
+    label: string;
+    time: Date;
+    data: [number, number, number, number];
+  }
+  function isCurveProp(d: any): d is CurveProp {
+    return Boolean(d.monitorData);
+  }
+
   // well i know this is trash but the time is reaching
   const props = defineProps<{
     /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
-    chart: { id: number | string; label: string; time: [] | Date; data: [number, number, number, number?]; monitorData: number[] };
+    chart: CurveProp | PointProp;
     timeout?: number;
   }>();
 
@@ -39,7 +56,6 @@
     y3: [],
     y4: [],
   });
-  let chartId = 0;
 
   watch(
     () => props.chart,
@@ -47,23 +63,15 @@
       debugger;
       if (!el) return;
 
-      if (Array.isArray(el.time) || (!Array.isArray(el.time) && chartConfig.value.indexMark === 0) || chartId !== el.id) {
-        // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
-        chartId = el.id;
-        const startFrom = !Array.isArray(el.time) ? moment(el.time) : null;
-        const arr = new Array(!startFrom ? el.time.length : 20).fill(0);
+      // 新版的预测曲线处理，应用到了火灾预警下的各个模块
+      if (isCurveProp(el)) {
+        const arr = new Array(el.time.length).fill(0);
         chartConfig.value = {
-          label: startFrom ? '' : el.label,
+          label: el.label,
           indexMark: 1,
-          x: !startFrom
-            ? (el.time as []).map((item) => {
-                return item + '：00';
-              })
-            : arr.map(() => {
-                const str = startFrom.format('HH:mm:ss');
-                startFrom.add(props.timeout || 3000);
-                return str;
-              }),
+          x: el.time.map((item) => {
+            return item + '：00';
+          }),
           y1: arr.map(() => {
             return el.data[0];
           }),
@@ -73,35 +81,57 @@
           y3: arr.map(() => {
             return el.data[2];
           }),
-          y4: startFrom
-            ? arr.map((item, index) => {
-                return index == 0 ? el.data[3] : 0;
-              })
-            : el.monitorData,
+          y4: el.monitorData,
         };
-      } else if (!Array.isArray(el.time)) {
-        // 更新配置
-        // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
-        // 那么应该按先进后出的队列模式更新数据了
+      } else {
+        // indexMark为0表示还没插入过数据，初始化数据
+        if (chartConfig.value.indexMark === 0) {
+          const arr = new Array(20).fill(0);
+          const startFrom = moment(el.time);
+          chartConfig.value = {
+            label: el.label,
+            indexMark: 1,
+            x: arr.map(() => {
+              const str = startFrom.format('HH:mm:ss');
+              startFrom.add(props.timeout || 3000);
+              return str;
+            }),
+            y1: arr.map(() => {
+              return el.data[0];
+            }),
+            y2: arr.map(() => {
+              return el.data[1];
+            }),
+            y3: arr.map(() => {
+              return el.data[2];
+            }),
+            y4: arr.map(() => {
+              return el.data[3];
+            }),
+          };
+        } else {
+          // 更新配置
+          // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+          // 那么应该按先进后出的队列模式更新数据了
+          const val = chartConfig.value;
+          if (val.indexMark === 20) {
+            val.x.shift();
+            val.y1.shift();
+            val.y2.shift();
+            val.y3.shift();
+            val.y4.shift();
+            val.indexMark = 19;
+          }
+          val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+          val.y1[val.indexMark] = el.data[0];
+          val.y2[val.indexMark] = el.data[1];
+          val.y3[val.indexMark] = el.data[2];
+          val.y4[val.indexMark] = el.data[3];
+          // 指针向后移动1
+          val.indexMark += 1;
 
-        const val = chartConfig.value;
-        if (val.indexMark === 20) {
-          val.x.shift();
-          val.y1.shift();
-          val.y2.shift();
-          val.y3.shift();
-          val.y4.shift();
-          val.indexMark = 19;
+          chartConfig.value = val;
         }
-        val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
-        val.y1[val.indexMark] = el.data[0];
-        val.y2[val.indexMark] = el.data[1];
-        val.y3[val.indexMark] = el.data[2];
-        val.y4[val.indexMark] = el.data[3];
-        // 指针向后移动1
-        val.indexMark += 1;
-
-        chartConfig.value = val;
       }
     },
     { immediate: true, deep: true }

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -205,7 +205,7 @@
           chartListTf.push({
             label: el.strinstallpos,
             time: new Date(),
-            data: [avgParams.avg_dusting_value, avgParams.max_dusting_value, avgParams.min_dusting_value, el.readData.dustval, , 5, 10],
+            data: [avgParams.avg_dusting_value, avgParams.max_dusting_value, avgParams.min_dusting_value, el.readData.dustval],
           });
         });
         choiceData = res.dust;

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -185,10 +185,15 @@
             ],
           });
           // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          const avgParams = el.avgParam || {
+            avg_gas_value: 0,
+            max_gas_value: 0,
+            min_gas_value: 0,
+          };
           chartListWs.push({
             label: el.strinstallpos,
             time: new Date(),
-            data: [moment().format('ss'), 15, 5, 10],
+            data: [avgParams.avg_gas_value, avgParams.max_gas_value, avgParams.min_gas_value, el.readData.gasC],
           });
         });
       }

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -158,15 +158,19 @@
         ventilateTopList[2].value = res.xufengliang || '--';
         ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
 
-        if (res.vent)
-          res.vent.forEach((el) => {
-            // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
-            chartListTf.push({
-              label: el.strinstallpos,
-              time: new Date(),
-              data: [moment().format('ss'), 15, 5, 10],
-            });
+        res.vent.forEach((el) => {
+          // 初始化预测曲线配置，分别为x轴时间、平均、最大、最小、实时
+          const avgParams = el.avgParam || {
+            avg_vent_value: 0,
+            max_vent_value: 0,
+            min_vent_value: 0,
+          };
+          chartListTf.push({
+            label: el.strinstallpos,
+            time: new Date(),
+            data: [avgParams.avg_vent_value, avgParams.max_vent_value, avgParams.min_vent_value, el.readData.jin],
           });
+        });
 
         if (res.history.length != 0) {
           res.history.forEach((v) => {