gasInjection-project/src/views/vent/monitorManager/groutMonitor/components/groutHomelt.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 groutFanMonitorData" :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
                    :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 class="device-val">故障</div>
          <div class="device-val">运行反馈</div>
        </div>
        <div v-for="(device, key) in deviceMonitorListLt" 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] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
            }}</span>
            <span v-if="index == 1" :style="{ color: monitorData[detailItem.code] == '0' ? '#BFBFBF' : '#10BC79' }">{{
              monitorData[detailItem.code] == '0' ? '是' : monitorData[detailItem.code] == '1' ? '否' : '-'
            }}</span>
            <span
              v-if="index == 2"
              :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }"
              >{{ monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' : '-' }}</span
            >
            <span
              v-if="index == 3"
              :style="{ color: monitorData[detailItem.code] == '0' ? '#10BC79' : monitorData[detailItem.code] == '1' ? '#F14C4C' : '#BFBFBF' }"
              >{{ monitorData[detailItem.code] == '0' ? '正常' : monitorData[detailItem.code] == '1' ? '报警' : '-' }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="lr-box area-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 preFanMonitorData" :key="index">
                  <div class="state-title">{{ preFan.title + (preFan.unit !== 'signal' ? `(${preFan.unit})` : '') }}</div>

                  <div
                    :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 ref="playerRef" style="z-index: 9999; position: absolute; top: 550px; 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 { deviceMonitorListLt, preFanMonitorData, groutFanMonitorData } from '../grout.data';
  import { list } 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) {
    // debugger;
    const res = await list({ devicetype: 'pulping_auto', systemID, pagetype: 'normal' });
    const result = res.deviceInfo;
    for (const key in result) {
      const item = result[key];
      if (item.type.startsWith('pulping')) {
        monitorData.value = Object.assign(item['datalist'][0], item['datalist'][0]['readData']);
      }

      loading.value = false;
    }
  }

  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/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 {
      margin: 50px 15px 0px 15px;

      .header-container {
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        color: #fff;
        box-shadow: 0 0 30px rgb(0, 153, 184) inset;
        margin-top: 500px;
      }

      .device-title {
        width: 130px;
        text-align: center;
        border-top: 1px solid #00baffd4;
        border-left: 1px solid #00baffd4;
        line-height: 46px;
        color: #00e5ff;
        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 #00baffd4;
          }
        }

        .device-val {
          line-height: 36px;
          border-top: 1px solid #00baffd4;
          border-left: 1px solid #00baffd4;

          &:last-child {
            border-bottom: 1px solid #00baffd4;
          }
        }
      }
    }

    .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;
      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>