mky-vent-base/src/views/vent/monitorManager/groutMonitor/components/groutHomeDlt.vue

<template>
  <div class="monitor-container">
    <div class="header-box">
      <div class="header-container">
        <div class="device-detail">
          <div class="device-val">注浆站流量计瞬时流量 :</div>
          <div class="device-val">注浆站流量计累计流量 :</div>
          <div class="device-val">注浆站流量计运行时间 :</div>
        </div>
        <div class="device-detail">
          <div class="device-val">
            <span :style="{ color: '#10BC79' }">{{ monitorData['InputFlux'] !== undefined ? monitorData['InputFlux'] : '-' }}</span>
          </div>
          <div class="device-val">
            <span :style="{ color: '#10BC79' }">{{
              monitorData['CurrentCumulativeFlow'] !== undefined ? monitorData['CurrentCumulativeFlow'] : '-'
            }}</span>
          </div>
          <div class="device-val">
            <span :style="{ color: '#10BC79' }">{{
              monitorData['AccumulateRunDuration'] !== undefined ? monitorData['AccumulateRunDuration'] : '-'
            }}</span>
          </div>
        </div>
        <div class="device-detail">
          <div class="device-val">
            <span :style="{ color: '#BFBFBF' }">m³</span>
          </div>
          <div class="device-val">
            <span :style="{ color: '#BFBFBF' }">m³/min</span>
          </div>
          <div class="device-val">
            <span :style="{ color: '#BFBFBF' }">h</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, onUnmounted, defineProps } from 'vue';
  import { mountedThree, destroy, setModelType } from '../grout.threejs';
  import { list } from '../grout.api';

  const props = defineProps({
    deviceId: {
      type: String,
      require: true,
    },
    deviceType: {
      type: String,
      require: true,
    },
  });

  const loading = ref(false);
  const monitorData = ref({ InputFlux: undefined });

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

  async function getDataSource() {
    const res = await list({ devicetype: 'pulping_auto', pagetype: 'normal' });
    if (res.msgTxt && res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist[0]) {
      monitorData.value = Object.assign(res.msgTxt[0].datalist[0], res.msgTxt[0].datalist[0]['readData']);
    }
  }

  onMounted(() => {
    loading.value = true;
    mountedThree().then(async () => {
      await setModelType('bertaiBase');
      loading.value = false;
      timer = null;
      await getMonitor(true);
    });
  });
  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>
<style lang="less" scoped>
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;

  .monitor-container {
    width: 100%;
    height: 100%;
    // height: 550px;
    // border: 1px solid #fff;
    margin-top: 40px;
    display: flex;
    // justify-content: space-between;
    justify-content: center;
    padding: 0 5px;

    .header-box {
      // width: 100%;
      margin-top: 50px;
      .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: #fff;
        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
      }
      .device-title {
        width: 110px;
        text-align: center;
        border-top: 1px solid #00baffd4;
        border-left: 1px solid #00baffd4;
        line-height: 46px;
        color: #00e5ff;
        background-color: #00bbff21;
      }
      .device-detail {
        text-align: center;
        width: 250px;
        &:first-child {
          background-color: #00bbff11;
        }
        &:last-child {
          .device-val,
          .device-title {
            border-right: 1px solid #00baffd4;
          }
        }
        .device-val {
          line-height: 36px;
          border-top: 1px solid #00baffd4;
          border-left: 1px solid #00baffd4;
          &:last-child {
            border-bottom: 1px solid #00baffd4;
          }
        }
      }
    }
  }

  :deep(.@{ventSpace}-tabs-tabpane-active) {
    overflow: auto;
  }

  .input-box {
    display: flex;
    align-items: center;
    padding-left: 10px;

    .input-title {
      color: #73e8fe;
      width: auto;
    }

    .@{ventSpace}-input-number {
      border-color: #ffffff88 !important;
    }

    margin-right: 10px;
  }
</style>