mky-vent-base/src/views/vent/monitorManager/fireMonitor/index.vue

<template>
  <div class="vent-home-header">
    <Decoration5 class="header-icon" :dur="2" :color="['#21437F', '#2CF7FE']" style="width: 500px; height: 40px" />
    <div class="header-text">皮带机监测</div>
  </div>
  <div class="fire-box">
    <div class="fire-top">
      <div class="top-lr top-left">
        <div class="lr-item">
          <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
            <div class="item-top-title">火焰传感器监测</div>
            <div class="scroll-box">
              <!-- <ScrollBoard :config="hyConfig" ref="hyScrollBoard" style="width:100%;height:calc(100% - 40px)" @mouseover="mouseoverHandler" @click="clickHandler" /> -->
            </div>
          </BorderBox1>
        </div>
        <div class="lr-item">
          <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
            <div class="item-top-title">烟雾传感器监测</div>
            <div class="scroll-box">
              <ScrollBoard
                :config="ywConfig"
                ref="ywScrollBoard"
                style="width: 100%; height: calc(100% - 40px)"
                @mouseover="mouseoverHandler"
                @click="clickHandler"
              />
            </div>
          </BorderBox1>
        </div>
      </div>
      <div class="top-lr top-right">
        <div class="lr-item">
          <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
            <div class="item-top-title">火焰传感器监测</div>
            <div class="scroll-box">
              <ScrollBoard
                :config="hyConfig"
                ref="hyScrollBoard"
                style="width: 100%; height: calc(100% - 40px)"
                @mouseover="mouseoverHandler"
                @click="clickHandler"
              />
            </div>
          </BorderBox1>
        </div>
        <div class="lr-item">
          <BorderBox1 title="实时网络解算" :color="['#00FFFF']">
            <div class="item-top-title">喷淋灭火装置监测</div>
            <div class="scroll-box">
              <ScrollBoard
                :config="plConfig"
                ref="plScrollBoard"
                style="width: 100%; height: calc(100% - 40px)"
                @mouseover="mouseoverHandler"
                @click="clickHandler"
              />
            </div>
          </BorderBox1>
        </div>
      </div>
    </div>
    <div class="fire-bottom">
      <BorderBox11 title="光纤测温实时监测" :color="['#00FFFF']">
        <BarAndLine xAxisPropType="readTime" :dataSource="[]" height="100%" :chartsColumns="[]" chartsType="detail" @refresh="refreshEchatrs" />
      </BorderBox11>
    </div>
  </div>
</template>
<script setup lang="ts">
  import BarAndLine from '/@/components/chart/BarAndLine.vue';
  import { BorderBox1, ScrollBoard, BorderBox11, Decoration5 } from '@kjgl77/datav-vue3';
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { hyConfigFn, ywConfigFn, plConfigFn } from './fire.data';
  import { list } from './fire.api';

  const hyScrollBoard = ref();
  const ywScrollBoard = ref();
  const plScrollBoard = ref();

  const hyConfig = hyConfigFn();
  const ywConfig = ywConfigFn();
  const plConfig = plConfigFn();

  const wdOption = reactive({
    legend: '温度',
    seriesName: '(℃)',
    ymax: 50,
    yname: '℃',
    linetype: 'bar',
    yaxispos: 'right',
    color: '#FC4327',
    sort: 2,
    xRotate: 0,
    dataIndex: 'temperature',
  });

  function mouseoverHandler(e: any) {
    console.log(e);
  }

  function clickHandler(e: any) {
    console.log(e);
  }

  let timer: null | NodeJS.Timeout | undefined = null;
  async function getMonitor(flag?) {
    if (timer === null) {
      timer = setTimeout(
        async () => {
          const result = await list({ pagetype: 'normal', devicetype: 'sys', systemID: '1637983899775242242' });
          const hyDatas: any[] = [],
            ywDatas: any[] = [],
            plDatas: any[] = [],
            wdDatas: any[] = [];

          result.forEach((item) => {
            if (item.msgTxt.type === 'modelsensor_fire') {
              item.msgTxt.datalist.forEach((dataObj) => {
                hyDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)]);
              });
            }
            if (item.msgTxt.type === 'modelsensor_smoke') {
              item.msgTxt.datalist.forEach((dataObj) => {
                ywDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)]);
              });
            }
            if (item.msgTxt.type === 'modelsensor_temperature') {
              item.msgTxt.datalist.forEach((dataObj) => {
                wdDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)]);
              });
            }
            if (item.msgTxt.type === 'modelsensor_fire') {
              item.msgTxt.datalist.forEach((dataObj) => {
                plDatas.push([dataObj.strinstallpos, dataObj.warnFlag, dataObj.readTime?.substring(11)]);
              });
            }
          });
          hyScrollBoard.value.updateRows(hyDatas);
          ywScrollBoard.value.updateRows(ywDatas);
          plScrollBoard.value.updateRows(plDatas);
          // hyConfig.data = hyDatas
          // ywConfig.data = ywDatas
          // plConfig.data = plDatas

          await getMonitor();
        },
        flag ? 0 : 5000
      );

      if (timer) {
        timer = null;
      }
    }
  }

  async function refreshEchatrs() {
    timer = null;
    await getMonitor(true);
    console.log('echarts 刷新');
  }

  onMounted(async () => {
    await getMonitor(true);
  });
  onUnmounted(() => {
    timer = undefined;
  });
</script>

<style lang="less" scoped>
  .vent-home-header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    z-index: 99;
    .header-icon {
      margin-top: 45px;
    }
    .header-text {
      position: fixed;
      top: 18px;
      color: #fff;
      font-size: 26px;
    }
  }
  .fire-box {
    position: relative;
    z-index: 999;
    width: 100%;
    height: calc(100% - 48px);
    top: 0px;
    pointer-events: none;
    .fire-top {
      height: calc(100% - 300px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .top-lr {
        width: 400px;
        height: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        .lr-item {
          flex: 1;
          margin-top: 20px;
          .item-top-title {
            position: relative;
            top: -5px;
            color: #fff;
          }
        }
      }
      .top-right {
      }
    }

    .fire-bottom {
      height: 300px;
    }
    .scroll-box {
      padding: 0 20px;
      height: 100%;
    }
  }
</style>