mky-vent-base/src/views/vent/monitorManager/nitrogen/components/nitrogenEcharts.vue

<template>
  <div class="nitrogen-echatrs-box">  
    <div class="button-box">
      <div style="color: #fff; font-weight: 600;">{{ currentTime }}</div>
    </div>
    <div class="echarts-container">
      <div v-for="(item, index) in dataSource" :key="index" class="echarts-item">
        <div class="echarts-nitrogen-item">
          <BarAndLine
          xAxisPropType="readTime"
          :dataSource="item"
          height="100%"
          :chartsColumns="nitrogenChartsColumns"
          :option="nitrogenOption"
          chartsType="detail" />
        </div>
        <div class="echarts-cqg-item">
          <BarAndLine
            xAxisPropType="readTime"
            :dataSource="item"
            height="100%"
            :chartsColumns="cqgChartsColumns"
            :option="cqgOption"
            chartsType="detail" />
        </div>
      </div>    
    </div>
    </div>
  </template>
  <script setup lang="ts">
    import{ref, onMounted, onUnmounted, reactive } from 'vue'
    import dayjs from 'dayjs'
    import BarAndLine from '/@/components/chart/BarAndLine.vue';
    import { list } from '../nitrogen.api'

    const nitrogenChartsColumns = [
      {
        legend: '空压机排气压力',
        seriesName: '(Mpa)',
        ymax: 100,
        yname: 'Pa',
        linetype: 'line',
        yaxispos: 'left',
        color: '#9BCB75',
        sort: 1,
        xRotate: 0,
        dataIndex: 'compressExhaustPressF1',
      },
      {
        legend: '空压机分离压力',
        seriesName: '(Mpa)',
        ymax: 100,
        yname: 'Mpa',
        linetype: 'line',
        yaxispos: 'left',
        color: '#1EB0FC',
        sort: 1,
        xRotate: 0,
        dataIndex: 'compressSeparatePressF1',
      },
      {
        legend: '空压机主机温度',
        seriesName: '(℃)',
        ymax: 200,
        yname: '℃',
        linetype: 'line',
        yaxispos: 'right',
        color: '#FDB146',
        sort: 2,
        xRotate: 0,
        dataIndex: 'compressHostTempF1',
      },
      {
        legend: '空压机机组温度',
        seriesName: '(℃)',
        ymax: 200,
        yname: '℃',
        linetype: 'line',
        yaxispos: 'right',
        color: '#EE6666',
        sort: 2,
        xRotate: 0,
        dataIndex: 'compressCrewTempF1',
      },
    ];
    const cqgChartsColumns = [
    {
      legend: '储气罐压力',
      seriesName: '(Mpa)',
      ymax: 100,
      yname: 'Pa',
      linetype: 'line',
      yaxispos: 'left',
      color: '#9BCB75',
      sort: 1,
      xRotate: 0,
      dataIndex: 'airReceiverPress',
    },
    {
      legend: '储气罐温度',
      seriesName: '(℃)',
      ymax: 100,
      yname: '℃',
      linetype: 'line',
      yaxispos: 'right',
      color: '#DD7FCD',
      sort: 2,
      xRotate: 0,
      dataIndex: 'airReceiverTemp',
    },
    {
      legend: '储气罐流量',
      seriesName: '(m³/k)',
      ymax: 200,
      yname: 'm³/k',
      linetype: 'line',
      yaxispos: 'right',
      color: '#56B1FD',
      sort: 3,
      xRotate: 0,
      dataIndex: 'airReceiverFlow',
    },
  ];

    const nitrogenOption = {
      grid: {
        top: '20%',
        left: '2px',
        right: '0px',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature:{
          
        }
      }
    }

    const cqgOption = {
      grid: {
        top: '20%',
        left: '0px',
        right: '40px',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {

        }
      }
    }

    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
    // const monitorData = [] as any[]
    const dataSource = reactive<any[]>([])

    // https获取监测数据
    let timer: null | NodeJS.Timeout = null;
    let count = 0
    async function getMonitor(flag?) {
      if (Object.prototype.toString.call(timer) === '[object Null]') {
        timer = await setTimeout(async () => {
          await getDataSource();
          if (timer) {
            timer = null;
          }
          await getMonitor();
        }, flag ? 0 : 1000);
      }
    };

    async function getDataSource() {
      
      const res = await list({ devicetype: 'pressurefan', pagetype: 'normal' });
      const dataList = res.msgTxt[0].datalist || [];
      dataList.forEach((data, index) => {
        const item = data.readData;
        Object.assign(item, data);
        item['readTime'] = item['readTime'].substring(11)
        if(count == 0){
          dataSource.push([item])
        }else {
          if(dataSource[index].length < 10){
            dataSource[index].push(item)
          }else {
            dataSource[index].shift()
            dataSource[index].push(item)
          }
        }
      });
      count++ // 实时数据累计
      console.log('实时监测数据----->', dataSource)
    };

    onMounted(() => {
      getMonitor(true)
    })

    onUnmounted(() => {
      if (timer) {
        clearTimeout(timer);
        timer = undefined;
      }
    });

</script>
<style lang="less" scoped>
  .button-box{
    text-align: end;
    margin-top: 10px;
    margin-right: 10px;
  }
  .nitrogen-echatrs-box{
    width: 100%;
    height: 100%;
  }
  .echarts-container{
    position: fixed;
    width: 100%;
    height: 730px;
    color: #fff;
    overflow: scroll;
    top: 100px;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 99999;
    
    .echarts-item{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .echarts-nitrogen-item{
        width: calc(60% - 30px);
        height: 240px;
      }
      .echarts-cqg-item{
        width: calc(40% - 10px);
        height: 240px;
      }
    }
    
  }

</style>