1. 优化预测曲线组件

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

@@ -38,7 +38,7 @@
     </div>
     <div v-if="shown === 'chart'" class="chart-item">
       <div v-for="(item, index) in charts" :key="`acmt${index}`">
-        <PredictionCurve style="height: 300px; width: 400px; margin: 0 5px" :chart="item" :timeout="timeout" />
+        <PredictionCurve style="height: 300px; width: 480px; margin: 15px" :chart="item" :timeout="timeout" />
         <div class="text-center">
           {{ item.label }}
         </div>

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

@@ -17,7 +17,7 @@
   // well i know this is trash but the time is reaching
   const props = defineProps<{
     /** 测点图配置，该测点图在每次数据更新时追加曲线数据，但如果需要更新图表，那么需要更改id来告知组件 */
-    chart: { id: number | string; label: string; time: []; data: [number, number, number, number]; monitorData: number[] };
+    chart: { id: number | string; label: string; time: [] | Date; data: [number, number, number, number?]; monitorData: number[] };
     timeout?: number;
   }>();
 
@@ -45,21 +45,24 @@
     () => props.chart,
     (el) => {
       if (!el) return;
-      const arr = new Array(el.time.length).fill(0);
-      if (chartConfig.value.indexMark === 0 || chartId !== el.id) {
+
+      if (Array.isArray(el.time) || (!Array.isArray(el.time) && chartConfig.value.indexMark === 0) || chartId !== el.id) {
         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
-        // const startFrom = moment(el.time);
+        chartId = el.id;
+        const startFrom = !Array.isArray(el.time) ? moment(el.time) : null;
+        const arr = new Array(!startFrom ? el.time.length : 20).fill(0);
         chartConfig.value = {
-          label: el.label,
+          label: startFrom ? '' : el.label,
           indexMark: 1,
-          // x: arr.map(() => {
-          //   const str = startFrom.format('HH:mm:ss');
-          //   startFrom.add(props.timeout || 3000);
-          //   return str;
-          // }),
-          x: el.time.map((item) => {
-            return item + '：00';
-          }),
+          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;
+              }),
           y1: arr.map(() => {
             return el.data[0];
           }),
@@ -69,12 +72,17 @@
           y3: arr.map(() => {
             return el.data[2];
           }),
-          y4: el.monitorData,
+          y4: startFrom
+            ? arr.map((item, index) => {
+                return index == 0 ? el.data[3] : 0;
+              })
+            : el.monitorData,
         };
-      } else {
+      } else if (!Array.isArray(el.time)) {
         // 更新配置
         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
         // 那么应该按先进后出的队列模式更新数据了
+
         const val = chartConfig.value;
         if (val.indexMark === 20) {
           val.x.shift();
@@ -91,6 +99,8 @@
         val.y4[val.indexMark] = el.data[3];
         // 指针向后移动1
         val.indexMark += 1;
+
+        chartConfig.value = val;
       }
     },
     { immediate: true, deep: true }