vent-template/src/views/vent/monitorManager/compressor/components/nitrogenHome_ln.vue

<template>
  <div id="compressor3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
  <template v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex">
    <div :id="`compressorCss3D${sysIndex + 1}`" class="threejs-Object-CSS compressorCss3D-box"
      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
    </div>
  </template>
  <!-- 模型卡片 -->
  <div v-for="(sysItem, sysIndex) in monitorDataGroupArr" :key="sysIndex" style="position: absolute; z-index: -1">
    <div v-show="monitorDataGroupFlag == sysIndex + 1" :id="`nitrogenMonitorBox${sysIndex}`">
      <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
        <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
          <div class="title">{{ `空压机${groupNum}` }} </div>
          <template v-for="(preMonitor, preMonitorIndex) in preMonitorList" :key="preMonitorIndex">
            <div v-if="preMonitor.code !== 'signal'" class="monitor-item">
              <span class="monitor-title">{{ preMonitor.title }}:</span>
              <span class="monitor-val"><span class="val">{{
                monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
                  ? formatNum(monitorData[preMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
                  : preMonitor.value
                    ? preMonitor.value
                    : '-'
              }}</span><span class="unit">{{ preMonitor.unit }}</span></span>
            </div>
            <div v-else class="signal-item">
              <div class="signal" v-for="(signal, childIndex) in preMonitor.child" :key="childIndex">
                <span class="monitor-title">{{ signal.title }}</span>
                <span :class="{
                  'signal-round': true,
                  'signal-round-run': signal.title != '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
                  'signal-round-warning':
                    signal.title == '故障信号' && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
                  'signal-round-gry': monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
                }"></span>
              </div>
            </div>
          </template>
        </fourBorderBg>
        <fourBorderBg :class="`cqg${groupNum}`" :id="`cqgMonitor${groupNum}`"
          v-if="cqgMonitorList && cqgMonitorList.length > 0">
          <div class="title">{{ `风包${groupNum}` }}</div>
          <template v-for="(cqgMonitor, cqgMonitorIndex) in cqgMonitorList" :key="cqgMonitorIndex">
            <div class="monitor-item">
              <span class="monitor-title">{{ cqgMonitor.title }}:</span>
              <span class="monitor-val"><span class="val">{{
                monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)]
                  ? formatNum(monitorData[cqgMonitor.code.replace(prefix[0], `${prefix[0]}${groupNum}`)])
                  : cqgMonitor.value
                    ? cqgMonitor.value
                    : '-'
              }}</span><span class="unit">{{ cqgMonitor.unit }}</span></span>
            </div>
          </template>
        </fourBorderBg>
      </div>
    </div>
  </div>
  <div class="nitrogen-home">

    <!-- 顶部导航提示 -->
    <!-- <div class="total-data" v-if="totalData && totalData.length > 0">
      <div class="vent-flex-row">
        <div class="item" v-for="(data, index) in totalData" :key="index"
          >{{ data.title + '(' + data.unit + ')' }}：<span class="val">{{
            monitorData[data.code] ? formatNum(monitorData[data.code]) : data.value ? data.value : '-'
          }}</span></div
        >
      </div>
    </div> -->

    <div class="nitrogen-container">
      <div v-if="monitorData['netStatus'] == 0" class="device-state">网络断开</div>
      <div class="top-box">
        <!-- 左边监测数据 -->
        <div class="lr-box left-box">
          <div class="left-container" v-if="preFanMonitorData && preFanMonitorData.length > 0">
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
              <div class="monitor-box">
                <ventBox1>
                  <template #title>
                    <div>{{ groupNum }}号压风机</div>
                  </template>
                  <template #container>
                    <div class="state-item">
                      <div class="item-col" v-for="(preFan, preFanIndex) in preFanMonitorData" :key="preFanIndex">
                        <span class="state-title">{{
                          preFan.title + (preFan.unit !== 'signal' && preFan.unit !== 'warning' ? `(${preFan.unit})` :
                            '')
                          }}</span>
                        <span v-if="preFan.unit !== 'signal' && preFan.unit !== 'warning'" class="state-val">{{
                          monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[1], prefix[1] + groupNum)]))
                            : preFan.value
                              ? preFan.value
                              : '-'
                        }}</span>
                        <span v-else :class="{
                          'signal-round': true,
                          'signal-round-run':
                            preFan.unit == 'signal' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
                          'signal-round-warning':
                            preFan.unit == 'warning' && monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
                          'signal-round-gry': monitorData[preFan.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] != '1',
                        }"></span>
                      </div>
                    </div>
                  </template>
                </ventBox1>
              </div>
            </div>
          </div>
        </div>
        <div v-if="renderPlayer" ref="playerRef" class="playerBox"> </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="nitrogenHome">
import { onMounted, onUnmounted, ref, onBeforeUnmount } from 'vue';
import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
import { mountedThree, destroy, setModelType } from '../nitrogen.threejs';
import { list } from '../nitrogen.api';
import ventBox1 from '/@/components/vent/ventBox1.vue';
import { monitorDataGroupArr, preFanMonitorData, preMonitorList, cqgMonitorList, prefix,  totalData,  } from '../nitrogen.data.lh';
import { formatNum } from '/@/utils/ventutil';
import { useCamera } from '/@/hooks/system/useCamera';

const loading = ref(true);
const monitorDataGroupFlag = ref(1);
const monitorDataGroup = ref<Number[]>([]);
const monitorData = ref<Object | []>({});
const playerRef = ref();
const renderPlayer = ref(true);

const { getCamera, removeCamera } = useCamera();

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

async function getDataSource() {
  const res = await list({ devicetype: 'forcFan', pagetype: 'normal' });
  let dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : [];

  if (dataSource) {
    Object.assign(monitorData.value, dataSource, dataSource.readData);
  }
  loading.value = false;
}

function setMonitorGroupNum(flag) {
  if (flag != monitorDataGroupFlag.value) monitorDataGroupFlag.value = flag;
  const monitorGroup = monitorDataGroupArr[flag - 1];
  setModelType('compressor' + (flag - 1));
  monitorDataGroup.value = monitorGroup;
}

onMounted(async () => {
  setTimeout(() => {
    mountedThree(monitorDataGroupArr).then(async () => {
      setMonitorGroupNum(1);
      getMonitor(true).then(async () => {
        if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef, renderPlayer);
      });
    });
  }, 0);
});
onBeforeUnmount(() => {
  removeCamera(playerRef);
});
onUnmounted(() => {
  destroy();
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
});
</script>

<style lang="less" scoped>
@import '../../comment/less/workFace.less';
@ventSpace: zxm;

.compressorCss3D-box {
  .modal-monitor {
    position: absolute;
    left: 0px;
    top: 0px;
  }

  &:deep(.win) {
    margin: 0 !important;
    background: #00000044;
  }

  &:deep(.main) {
    .title {
      height: 34px;
      text-align: center;
      font-weight: 600;
      color: #7af5ff;
      // background-image: url('../../../assets/img/yfj/light.png');
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: 100%;
      background-size: 80%;
      font-size: 16px;
    }

    .monitor-item {
      display: flex;
      flex-direction: row;
      width: auto;
      margin-bottom: 3px;

      .monitor-val {
        color: #ffb700;
        display: flex;
        width: auto;

        .val {
          width: 80px;
          font-size: 14px;
        }

        .unit {
          color: #ffffffbb;
          font-size: 14px;
        }
      }
    }

    .monitor-title {
      width: 100px;
      color: #7af5ff;
      font-weight: 400;
      font-size: 14px;
    }

    .signal-item {
      display: flex;
      justify-content: space-between;

      // margin-bottom: 5px;
      .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;
        }
      }
    }
  }
}

.nitrogen-home {
  width: 100%;
  height: calc(100%);
  position: fixed;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  top: 60px;

  .total-data {
    position: absolute;
    color: #e4cd00;
    z-index: 9;
    top: 20px;
    right: 30px;
    // display: flex;
    font-size: 18px;

    .item {
      margin-left: 20px;

      .val {
        display: inline-box;
        width: 150px;
        color: #00d8ff;
      }
    }
  }

  .nitrogen-container {
    width: 100%;
    height: calc(100%);
    display: flex;
    justify-content: space-between;
    position: relative;

    .device-state {
      width: 100%;
      position: absolute;
      top: 20px;
      color: #e90000;
      display: flex;
      justify-content: center;
      font-size: 20px;
    }

    .top-box {
      width: 100%;
      padding: 10px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;

      .lr-box {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 9999;
        pointer-events: auto;
      }

      .item {
        width: 285px;
        height: auto;
        position: relative;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 0px;
        pointer-events: auto;
        color: #fff;
        overflow: hidden;

        .control-item {
          height: auto;
          min-height: 35px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 5px;
          margin: 0 10px 0 3px;
          pointer-events: auto;
          background: linear-gradient(to right, #0063cd22, #0063cd04);

          margin-bottom: 5px;
          border-width: 1px;
          border-style: dashed;

          border-image: linear-gradient(to right, #008ccd66, #0063cd04) 1 1;
          border-radius: 5px;

          &:last-child {
            margin-bottom: 0;
          }

          .control-item-l {
            display: flex;
            align-items: center;
            font-size: 14px;

            .round {
              display: inline-block;
              width: 3px;
              height: 3px;
              padding: 1px;
              border-radius: 50%;
              background-color: #3df6ff;
              margin-right: 5px;
              box-shadow: 0 0 1px 1px #64f7ff;
            }
          }

          .control-item-r {
            text-align: right;
          }

          .button-box {
            position: relative;
            padding: 5px;
            border: 1px transparent solid;
            background-clip: border-box;
            border-radius: 5px;
            margin-left: 8px;
          }

          .a-button {
            pointer-events: auto;
          }

          &::v-deep .a-button--mini {
            padding: 6px 10px;
          }

          &::v-deep .a-button--mini.is-round {
            padding: 6px 10px;
          }
        }

        .base-title {
          width: calc(100% - 60px);
          text-align: center;
          color: #00d8ff;
        }

        .state-item {
          width: 100%;
          display: flex;
          flex-direction: row;

          flex-wrap: wrap;

          .item-col {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 5px;

            .state-title {
              color: #ffffffcc;
              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;
          }
        }
      }


      .left-box {
        height: calc(100% - 50px);
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
        direction: rtl;

        .item-l {
          width: 335px;

          .monitor-box {
            background-color: #ffffff05;
          }
        }

        .left-container {
          direction: ltr;
        }

        .control-item {
          height: 36px;
        }
      }
    }
  }

  .playerBox {
    z-index: 9999;
    position: fixed;
    // top: 200px;
    right: 15px;
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
    margin: auto;
    pointer-events: none;
    display: flex;
    justify-content: end;

    &:deep(#LivePlayerBox) {
      width: auto !important;
      height: auto !important;
      display: flex;
      flex-flow: column;
      justify-content: end;
    }
  }
}

.btn {
  padding: 2px 12px;
  position: relative;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;

  &::before {
    position: absolute;
    display: block;
    content: '';
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    border-radius: 2px;
    z-index: -1;
  }
}

.btn1 {
  border: 1px solid #5cfaff;

  &::before {
    background-image: linear-gradient(#2effee92, #0cb1d592);
  }

  &:hover {
    border: 1px solid #5cfaffaa;

    &::before {
      background-image: linear-gradient(#2effee72, #0cb1d572);
    }
  }
}

.btn2 {
  border: 1px solid #e91927;
  margin-left: 10px;

  &::before {
    background-image: linear-gradient(#b02533, #a31f2e);
  }

  &:hover {
    &::before {
      background-image: linear-gradient(#bd2e3ccc, #a31f2ecc);
    }
  }
}
</style>