gasInjection-project/src/views/vent/monitorManager/groutMonitor/components/groutHomehlg.vue

<template>
    <div class="monitor-container">
      <div class="area-box lr-box">
        <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
          <ventBox1>
            <template #title>
              <div>注浆站输出监测</div>
            </template>
            <template #container>
              <div class="monitor-box">
                <div class="monitor-item">
                  <div class="state-item" v-for="(preFan, index) in groutFanMonitorDataHlg" :key="index">
                    <div class="state-title">{{ preFan.title }}</div>
                    <div v-if="preFan.unit !== 'signal'" class="state-val">{{
                      monitorData[preFan.code] >= 0 ? formatNum(Number(monitorData[preFan.code])) : '-'
                    }}</div>
                      <div
                      v-else-if="preFan.code=='Running'"
                      :class="{
                        'signal-round': true,
                        'signal-round-warning': monitorData[preFan.code] == '0',
                        'signal-round-run': monitorData[preFan.code] == '1',
                        'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
                      }"
                    ></div>
                    <div
                      v-else
                      :class="{
                        'signal-round': true,
                        'signal-round-warning': monitorData[preFan.code] == '1',
                        'signal-round-run': monitorData[preFan.code] == '0',
                        'signal-round-gry': monitorData[preFan.code] != '0' && monitorData[preFan.code] != '1',
                      }"
                    ></div>
                  </div>
                </div>
              </div>
            </template>
          </ventBox1>
        </div>
      </div>
      <div class="header-box">
        <div class="header-container">
          <div class="device-detail">
            <div class="device-title">&nbsp</div>
            <div class="device-val">故障代码</div>
            <div class="device-val">警告代码</div>
          </div>
          <div v-for="(device, key) in deviceMonitorListHlg" class="device-detail" :key="key">
            <div class="device-title">{{ device.title }}</div>
            <div v-for="(detailItem, index) in device.dataList" :key="detailItem.code" class="device-val">
              <span v-if="index == 0" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
                monitorData[detailItem.code] 
              }}</span>
              <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
                monitorData[detailItem.code]
              }}</span>
            
            </div>
          </div>
        </div>
      </div>
     
  
      <div ref="playerRef" style="z-index: 9999; position: absolute; top: 0px; right: 15px; height: 100%; margin: auto; pointer-events: none"> </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import { watch, ref, onMounted, onUnmounted, defineProps, reactive } from 'vue';
    import ventBox1 from '/@/components/vent/ventBox1.vue';
    import { mountedThree, destroy, setModelType } from '../grout.threejs';
    import { formatNum } from '/@/utils/ventutil';
    import { deviceMonitorListHlg, groutFanMonitorDataHlg } from '../grout.data';
    import { device } from '../grout.api';
    import { useCamera } from '/@/hooks/system/useCamera';
  
    const props = defineProps({
      deviceId: {
        type: String,
        require: true,
      },
      deviceType: {
        type: String,
        require: true,
      },
    });
  
    let monitorDataGroupNum = ref(1);
  
    const loading = ref(false);
    const monitorData = ref({});
  
    const playerRef = ref();
    const { getCamera, removeCamera } = useCamera();
  
    // https获取监测数据
    let timer: null | NodeJS.Timeout = null;
    function getMonitor(flag?) {
      if (Object.prototype.toString.call(timer) === '[object Null]') {
        return new Promise((resolve) => {
          timer = setTimeout(
            async () => {
              if (props.deviceId) {
                await getDataSource(props.deviceId);
              }
              if (timer) {
                timer = null;
              }
              resolve(null);
              await getMonitor();
            },
            flag ? 0 : 1000
          );
        });
      }
    }
  
    async function getDataSource(systemID) {
      // const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
      const res = await device({ devicetype: 'pulping', pagetype: 'normal' });
    if(res && res.result.msgTxt[0]){
        const result = res.result.msgTxt[0];
        if (result.type.startsWith('pulping')) {
          monitorData.value = Object.assign(result['datalist'][0], result['datalist'][0]['readData']);
        }
        loading.value = false;
    }else {
        monitorData.value={}
    }
    }
  
    watch(
      () => props.deviceId,
      async (deviceId) => {
        if (deviceId) {
          await getCamera(deviceId, playerRef.value, 'pulping');
        }
      }
    );
  
    onMounted(() => {
      getMonitor(true)?.then(async () => {
        if (props.deviceId) await getCamera(props.deviceId, playerRef.value, 'pulping');
      });
      loading.value = true;
      mountedThree().then(async () => {
        // await setModelType('groutBase');
        await setModelType('bertaiBase');
        loading.value = false;
        timer = null;
      });
    });
    onUnmounted(() => {
      destroy();
      removeCamera();
      if (timer) {
        clearTimeout(timer);
        timer = undefined;
      }
    });
  </script>
  <style lang="less" scoped>
    @import '/@/design/theme.less';
    @import '/@/design/vent/modal.less';
    @ventSpace: zxm;
  
    @{theme-deepblue} {
      .monitor-container {
        --box-shadow: #316b92;
        --border-color: #0a80fad4;
      }
    }
  
    .monitor-container {
      --box-shadow: #0099b8;
      --border-color: #00baffd4;
      position:relative;
      width: 100%;
      height: 100%;
      // height: 550px;
      // border: 1px solid #fff;
      margin-top: 80px;
    //   display: flex;
    //   justify-content: space-between;
      // justify-content: center;
      padding: 0 5px;
  
      .header-box {
        position:absolute;
        bottom:20px;
        left:50%;
        transform:translate(-50%,0%);
        // margin: 50px 15px 0px 15px;
  
        .header-container {
          height: auto;
          display: flex;
          flex-direction: row;
          justify-content: center;
          color: #fff;
          box-shadow: 0 0 30px var(--box-shadow) inset;
          margin-top: 500px;
        }
  
        .device-title {
          width: 130px;
          text-align: center;
          border-top: 1px solid var(--border-color);
          border-left: 1px solid var(--border-color);
          line-height: 46px;
          color: var(--vent-table-action-link);
          background-color: #00bbff21;
          backdrop-filter: blur(5px);
        }
  
        .device-detail {
          text-align: center;
  
          &:first-child {
            background-color: #00bbff11;
          }
  
          &:last-child {
            .device-val,
            .device-title {
              border-right: 1px solid var(--border-color);
            }
          }
  
          .device-val {
            line-height: 36px;
            border-top: 1px solid var(--border-color);
            border-left: 1px solid var(--border-color);
  
            &:last-child {
              border-bottom: 1px solid var(--border-color);
            }
          }
        }
      }
  
      .lr-box {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        // overflow: hidden;
        z-index: 9999;
        pointer-events: auto;
        overflow-y: auto;
        overflow-x: hidden;
      }
  
      .area-box {
        width: 335px;
        margin-top: 50px;
  
        .input-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 4px 8px;
          margin: 6px 0;
          background-image: linear-gradient(to right, #39deff15, #3977e500);
  
          .title {
            width: 200px;
          }
  
          .title-auto {
            width: auto;
          }
  
          .input-value {
            width: 80px;
            height: 28px;
            line-height: 28px !important;
            background: transparent !important;
            border-color: #228da2 !important;
            color: #fff !important;
          }
  
          .value {
            width: 100px;
            color: #00d8ff;
            padding-right: 20px;
          }
  
          .unit {
            width: 80px;
          }
        }
      }
  
      .item {
        width: 305px;
        height: 450px;
        position: relative;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 0px;
        pointer-events: auto;
        color: #fff;
        // overflow: hidden;
  
        &:first-child {
          margin-top: 0px;
        }
  
        .base-title {
          color: #fff;
          margin-bottom: 8px;
          padding-left: 10px;
          position: relative;
          font-size: 16px;
  
          &::after {
            content: '';
            position: absolute;
            display: block;
            width: 4px;
            height: 12px;
            top: 7px;
            left: 0px;
            background: #45d3fd;
            border-radius: 4px;
          }
        }
  
        .monitor-item {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
  
          .state-item {
            width: 50%;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
  
            .state-title {
              width: 100px;
              color: #ffffffdd;
              flex: 9;
              font-size: 14px;
  
              .unit {
                // color: #ffffffbb;
              }
            }
  
            .state-val {
              flex: 1;
              color: #e4a300;
              margin-right: 5px;
              text-align: right;
              font-size: 14px;
            }
          }
        }
  
        .signal-box {
          margin: 5px 0;
          display: flex;
          align-items: center;
  
          .signal-title {
            color: #7af5ff;
            margin: 0 5px;
          }
  
          &:last-child {
            margin-right: 0px;
          }
        }
  
        .list-item {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .item-data-key {
            color: #ffffff99;
          }
        }
  
        .item-data-box {
          color: #fff;
  
          .state-icon {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 12px;
          }
  
          .open {
            border: 5px solid #133a56;
            background: #4ecb73;
          }
  
          .close {
            border: 5px solid #192961;
            background: #6d7898;
          }
        }
      }
  
      .item-l {
        width: 100%;
  
        .monitor-box {
          width: 100%;
  
          .parameter-title {
            position: relative;
            width: 100%;
            height: 14px;
            margin-top: 10px;
  
            .icon,
            span {
              position: absolute;
              top: -10px;
            }
          }
  
          .group-parameter-title {
            background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
  
            .icon {
              left: -12px;
              top: -17px;
            }
  
            span {
              left: 18px;
            }
  
            .item-col {
              background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
            }
          }
  
          .device-parameter-title {
            background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
  
            .icon {
              left: -10px;
              top: -14px;
            }
  
            span {
              left: 18px;
            }
  
            .item-col {
              background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
            }
          }
        }
      }
  
      .signal-round {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        // margin: 0 10px;
        margin: 0 5px;
        position: relative;
  
        &::after {
          display: block;
          content: '';
          position: absolute;
          width: 12px;
          height: 12px;
          top: -2px;
          left: -2px;
          border-radius: 50%;
        }
      }
  
      .signal-round-gry {
        background-color: #858585;
  
        &::after {
          background-color: #85858544;
          box-shadow: 0 0 1px 1px #85858599;
        }
      }
  
      .signal-round-run {
        background-color: #67fc00;
  
        &::after {
          background-color: #67fc0044;
          box-shadow: 0 0 1px 1px #c6ff77;
        }
      }
  
      .signal-round-warning {
        background-color: #e9170b;
  
        &::after {
          background-color: #e9170b44;
          box-shadow: 0 0 1px 1px #e9170b;
        }
      }
    }
  
    :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>