mky-vent-base/src/views/vent/gas/gasPumpMonitor/components/monitorChart.vue

<template>
  <div class="monitor-chart">
    <Row :gutter="[40, 40]">
      <Col v-for="(chart, i) in monitorCharts" :key="`monitor-chart-${i}`" :span="12">
        <div class="h-400px monitor-chart__wrapper p-20px">
          <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" :title="chart.title" />
          <components
            :is="componentMap[chart.type]"
            :propTypeArr="chart.seriesMap"
            :xAxisPropType="chart.dateProp"
            :chartData="chartData.items"
            height="350px"
          />
        </div>
      </Col>
    </Row>
  </div>
</template>

<script setup lang="ts">
  import FormTitle from '/@/views/vent/gas/components/form/formTitle.vue';
  import BarMulti from '/@/components/chart/BarMulti.vue';
  import LineMulti from '/@/components/chart/LineMulti.vue';
  import { Row, Col } from 'ant-design-vue';
  import { LimitedArray } from '/@/utils/limitedArray';
  import { onMounted, onUnmounted, ref } from 'vue';
  import { monitorCharts } from '../gasPumpMonitor.data';
  import _ from 'lodash-es';

  const props = defineProps({
    device: {
      type: Object,
      require: true,
    },
  });

  const chartData = ref(new LimitedArray(10));
  const componentMap = {
    line: LineMulti,
    bar: BarMulti,
  };
  // const testChartData = ref(new LimitedArray(10));
  // const chartSeriesMap = new Map([
  //   ['valueA', '值A'],
  //   ['valueB', '值B'],
  // ]);
  let timer: any = null;

  onMounted(() => {
    timer = setInterval(() => {
      const data = Object.assign({ ...props.device }, _.get(props.device, 'datalist[0]'));
      chartData.value.push({
        ...data,
        date: new Date().getSeconds().toString(),
      });
      // const testobj = {
      //   valueA: Math.floor(Math.random() * 10),
      //   valueB: Math.floor(Math.random() * 10),
      //   date: new Date().getSeconds().toString(),
      // };
      // testChartData.value.push(testobj);
    }, 2000);
  });
  onUnmounted(() => {
    clearTimeout(timer);
  });
</script>

<style lang="less" scoped>
  @import '@/design/vent/color.less';

  .monitor-chart {
    margin-top: 100px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .monitor-chart__wrapper {
    color: @white;
    border-top: 3px solid @vent-gas-primary-text;
    background-color: @vent-gas-primary-trasparent-bg;
  }
</style>