[Feat 0000] 预警-测点组件向预测曲线兼容

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

@@ -37,15 +37,8 @@
       </div>
     </div>
     <div v-if="shown === 'chart'" class="chart-item">
-      <div v-for="(item, index) in chartsConfig" :key="`acmt${index}`">
-        <EchartLine3
-          style="height: 300px; width: 400px; margin: 0 5px"
-          :x-data="item.x"
-          :y1-data="item.y1"
-          :y2-data="item.y2"
-          :y3-data="item.y3"
-          :y4-data="item.y4"
-        />
+      <div v-for="(item, index) in charts" :key="`acmt${index}`">
+        <PredictionCurve style="height: 300px; width: 400px; margin: 0 5px" :chart="item" :timeout="timeout" />
         <div class="text-center">
           {{ item.label }}
         </div>
@@ -54,86 +47,86 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { ref, watch } from 'vue';
-  import EchartLine3 from './echartLine3.vue';
+  import { ref } from 'vue';
   import BaseTab from '../../../gas/components/tab/baseTab.vue';
-  import moment from 'moment';
+  import PredictionCurve from './predictionCurve.vue';
 
-  const props = defineProps<{
+  // 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: { label: string; time: Date; data: [number, number, number, number] }[];
+    charts: { id: string; label: string; time: []; data: [number, number, number, number]; monitorData: number[] }[];
     title: string;
     timeout?: number;
   }>();
 
   const shown = ref('default');
-  const chartsConfig = ref<
-    {
-      label: string;
-      /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
-      indexMark: number;
-      x: string[];
-      y1: number[];
-      y2: number[];
-      y3: number[];
-      y4: number[];
-    }[]
-  >([]);
-
-  watch(
-    () => props.charts,
-    () => {
-      const arr = new Array(20).fill(0);
-      props.charts.forEach((el, i) => {
-        if (chartsConfig.value[i]) {
-          // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
-          // 那么应该按先进后出的队列模式更新数据了
-          const val = chartsConfig.value[i];
-          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;
-        } else {
-          // 更新配置
-          // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
-          const startFrom = moment(el.time);
-          chartsConfig.value[i] = {
-            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];
-            }),
-          };
-        }
-      });
-    },
-    { immediate: true, deep: true }
-  );
+  // const chartsConfig = ref<
+  //   {
+  //     label: string;
+  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+  //     indexMark: number;
+  //     x: string[];
+  //     y1: number[];
+  //     y2: number[];
+  //     y3: number[];
+  //     y4: number[];
+  //   }[]
+  // >([]);
+
+  // watch(
+  //   () => props.charts,
+  //   () => {
+  //     const arr = new Array(20).fill(0);
+  //     props.charts.forEach((el, i) => {
+  //       if (chartsConfig.value[i]) {
+  //         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+  //         // 那么应该按先进后出的队列模式更新数据了
+  //         const val = chartsConfig.value[i];
+  //         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;
+  //       } else {
+  //         // 更新配置
+  //         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+  //         const startFrom = moment(el.time);
+  //         chartsConfig.value[i] = {
+  //           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];
+  //           }),
+  //         };
+  //       }
+  //     });
+  //   },
+  //   { immediate: true, deep: true }
+  // );
 </script>
 <style lang="less">
   @import '/@/design/theme.less';