hsq-pro/src/views/vent/monitorManager/alarmMonitor/common/predictionCurve.vue

<template>
  <EchartLine3
    :x-data="chartConfig.x"
    :y1-data="chartConfig.y1"
    :y2-data="chartConfig.y2"
    :y3-data="chartConfig.y3"
    :y4-data="chartConfig.y4"
    :legend-name="chartConfig.label"
  />
</template>

<script lang="ts" setup>
  import moment from 'moment';
  import { ref, watch } from 'vue';
  import EchartLine3 from './echartLine3.vue';

  // 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[] };
    timeout?: number;
  }>();

  const chartConfig = ref<{
    label: string;
    /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
    indexMark: number;
    x: string[];
    y1: number[];
    y2: number[];
    y3: number[];
    y4: number[];
  }>({
    label: '',
    indexMark: 0,
    x: [],
    y1: [],
    y2: [],
    y3: [],
    y4: [],
  });
  let chartId = 0;

  watch(
    () => props.chart,
    (el) => {
      if (!el) return;
      const arr = new Array(el.time.length).fill(0);
      if (chartConfig.value.indexMark === 0 || chartId !== el.id) {
        // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
        // 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;
          // }),
          x: el.time.map((item) => {
            return item + '：00';
          }),
          y1: arr.map(() => {
            return el.data[0];
          }),
          y2: arr.map(() => {
            return el.data[1];
          }),
          y3: arr.map(() => {
            return el.data[2];
          }),
          y4: el.monitorData,
        };
      } 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;
      }
    },
    { immediate: true, deep: true }
  );
</script>

<style scoped lang="less">
  .work-box {
    width: 100%;
    height: 100%;
  }
</style>