mky-vent-base/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';

  /** 给定全量数据，绘制曲线对应的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: CurveProp | PointProp;
    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: [],
  });

  watch(
    () => props.chart,
    (el) => {
      // debugger;
      if (!el || !el.time) return;

      // 新版的预测曲线处理，应用到了火灾预警下的各个模块
      if (isCurveProp(el)) {
        const arr = new Array(el.time.length).fill(0);
        chartConfig.value = {
          label: el.label,
          indexMark: 1,
          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 {
        // indexMark为0表示还没插入过数据，初始化数据
        if (chartConfig.value.indexMark === 0) {
          const arr = new Array(20).fill(0);
          const startFrom = moment(el.time);
          chartConfig.value = {
            // label: el.label,
            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((item, index) => {
              return index == 0 ? el.data[3] : null;
            }),
          };
        } 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;

          chartConfig.value = val;
        }
      }
    },
    { immediate: true, deep: true }
  );
</script>

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