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

<template>
  <div class="monitor-chart">
    <Row :gutter="[40, 40]">
      <Col :span="12">
        <div class="h-400px monitor-chart__wrapper p-20px">
          <FormTitle class="monitor-chart__title" icon="gas-monitor-extract" title="累积抽采量" />
          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
        </div>
      </Col>
      <Col :span="12">
        <div class="h-400px monitor-chart__wrapper p-20px">
          <FormTitle class="monitor-chart__title" icon="gas-monitor-co" title="CO浓度" />
          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
        </div>
      </Col>
      <Col :span="12">
        <div class="h-400px monitor-chart__wrapper p-20px">
          <FormTitle class="monitor-chart__title" icon="gas-monitor-np" title="负压浓度" />
          <BarMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.items" height="350px" />
        </div>
      </Col>
      <Col :span="12">
        <div class="h-400px monitor-chart__wrapper p-20px">
          <FormTitle class="monitor-chart__title" icon="gas-monitor-flow" title="瞬时流量" />
          <LineMulti :propTypeArr="chartSeriesMap" xAxisPropType="date" :chartData="testChartData.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';
  defineProps({
    device: {
      type: Object,
      require: true,
    },
  });

  const testChartData = ref(new LimitedArray(10));
  const chartSeriesMap = new Map([
    ['valueA', '值A'],
    ['valueB', '值B'],
  ]);
  let timer: any = null;

  onMounted(() => {
    timer = setInterval(() => {
      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>