mky-vent-base/src/views/vent/monitorManager/nitrogen/components/nitrogenHomeBLT.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">
    <div v-show="monitorDataGroupFlag == sysIndex + 1" style="width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: -1">
      <div v-for="(groupNum, index) in sysItem" :key="index" class="modal-monitor">
        <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
          <div class="title">{{ kyjs[index] }} </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}`)])
                    : '-'
                }}</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.isWaring && monitorData[signal.code.replace(prefix[0], `${prefix[0]}${groupNum}`)] == '1',
                    'signal-round-warning': signal.isWaring && 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}`">
          <div class="title">{{ cqgs[index] }}</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[1]}${groupNum}`)]
                    ? formatNum(monitorData[cqgMonitor.code.replace(prefix[1], `${prefix[1]}${groupNum}`)])
                    : '-'
                }}</span
                ><span class="unit">{{ cqgMonitor.unit }}</span></span
              >
            </div>
          </template>
        </fourBorderBg>
      </div>
    </div>
  </div>
  <div class="nitrogen-home">
    <div style="position: absolute; color: #fff; top: 30px; pointer-events: auto; display: flex">
      <div
        v-for="(sysItem, sysIndex) in ['北风井', '南风井']"
        :key="sysIndex"
        class="tab-button-box"
        :class="{ 'tab-button-box-active': monitorDataGroupFlag == sysIndex + 1 }"
        @click="setMonitorGroupNum(sysIndex + 1)"
        >{{ sysItem }}
        <!-- (运行: <p style="padding: 0 5px"></p>
        <span
          :class="{
            'signal-round': true,
            'signal-round-run':
              sysIndex + 1 == 1 ? sysStateList[sysIndex] && sysStateList[sysIndex].isRun : sysStateList1[sysIndex] && sysStateList1[sysIndex].isRun,
            'signal-round-gry':
              sysIndex + 1 == 1 ? sysStateList[sysIndex] && !sysStateList[sysIndex].isRun : sysStateList1[sysIndex] && !sysStateList1[sysIndex].isRun,
          }"
        ></span>
        <p style="padding: 0 5px"></p>故障:<p style="padding: 0 5px"></p
        ><span
          :class="{
            'signal-round': true,
            'signal-round-warning':
              sysIndex + 1 == 1 ? sysStateList[sysIndex] && sysStateList[sysIndex].fault : sysStateList1[sysIndex] && sysStateList1[sysIndex].fault,
            'signal-round-gry':
              sysIndex + 1 == 1 ? sysStateList[sysIndex] && !sysStateList[sysIndex].fault : sysStateList1[sysIndex] && !sysStateList1[sysIndex].fault,
          }"
        ></span>
        <p style="padding: 0 5px"></p> ) -->
      </div>
    </div>
    <div class="total-data">
      <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]) : '-'
          }}</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-right-box">
          <div class="lr-container">
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
              <div class="monitor-box" v-if="groupNum !== 3">
                <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})` : '') }}</span>
                        <span v-if="preFan.unit !== 'signal'" class="state-val">{{
                          monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)]))
                            : '-'
                        }}</span>
                        <span
                          v-else
                          :class="{
                            'signal-round': true,
                            'signal-round-warning': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] == '1',
                            'signal-round-gry': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] != '1',
                          }"
                        ></span>
                      </div>
                    </div>
                  </template>
                </ventBox1>
              </div>
            </div>
          </div>
        </div>
        <div class="lr-box left-right-box" style="margin-top: 80px">
          <div class="lr-container">
            <div class="item item-l" v-for="(groupNum, index) in monitorDataGroup" :key="index">
              <div class="monitor-box" v-if="groupNum === 3">
                <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})` : '') }}</span>
                        <span v-if="preFan.unit !== 'signal'" class="state-val">{{
                          monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)] >= 0
                            ? formatNum(Number(monitorData[preFan.code.replace(prefix[2], prefix[2] + groupNum)]))
                            : '-'
                        }}</span>
                        <span
                          v-else
                          :class="{
                            'signal-round': true,
                            'signal-round-warning': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] == '1',
                            'signal-round-gry': monitorData[preFan.code.replace(prefix[2], `${prefix[2]}${groupNum}`)] != '1',
                          }"
                        ></span>
                      </div>
                    </div>
                  </template>
                </ventBox1>
              </div>
            </div>
          </div>
        </div>
        <div ref="playerRef" style="z-index: 9999; position: fixed; top: 180px; right: 15px; height: 100%; pointer-events: none"> </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, prefix, getMonitorProperty, getSysState, getSysState1 } from '../nitrogen.dataBLT';
  import type { State } from '../nitrogen.dataBLT';

  import { formatNum } from '/@/utils/ventutil';
  import { useCamera } from '/@/hooks/system/useCamera';
  const playerRef = ref();

  const loading = ref(true);
  const monitorDataGroupFlag = ref(0);
  const monitorDataGroup = ref<Number[]>([]);
  const kyjs = ref<string[]>([]);
  const cqgs = ref<string[]>([]);
  const monitorData = ref<Object | []>({});
  const sysStateList = ref<State[]>([]);
  const sysStateList1 = ref<State[]>([]);
  let preFanMonitorData, preMonitorList, cqgMonitorList, totalData;

  const { getCamera, removeCamera } = useCamera();
  /// forcFan_north 北风井  /// forcFan_south 南风井

  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  async function getMonitor(flag?) {
    if (Object.prototype.toString.call(timer) === '[object Null]') {
      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' });
    // const res = {
    //   cmd: 'monitordata',
    //   msgTxt: [
    //     {
    //       datalist: [
    //         {
    //           msgType: null,
    //           deviceID: '1749326253834444802',
    //           strname: '北风井压风',
    //           strinstallpos: '北风井压风',
    //           fsectarea: 'null',
    //           stationname: '北风井压风',
    //           stationtype: 'redis',
    //           deviceType: 'forcFan_north',
    //           typeName: '压风机北',
    //           netStatus: 1,
    //           warnFlag: 0,
    //           warnLevel: 0,
    //           warnLevel_str: '正常',
    //           syswarnLevel: null,
    //           syswarnLevel_str: null,
    //           syswarnLevel_des: null,
    //           warnTime: null,
    //           readTime: '2024-12-02 18:40:56',
    //           warnDes: '',
    //           frontGateOpenCtrl: null,
    //           rearGateOpenCtrl: null,
    //           readData: {
    //             PRE1_CPR_InletPre: '2.00',
    //             PRE2_CPR_HeadTemp: '13.00',
    //             PRE1_MOT_PhaseATemp: '56.40',
    //             PRE2_MOT_PhaseAOverTemp: '0',
    //             sign: '0',
    //             PRE1_CPR_UnLoadPre: '6.20',
    //             PRE1_CPR_LoadorUnload: '0',
    //             PRE2_CPR_ExhaustTemp: '15.00',
    //             PRE2_FaultSignal1: '0',
    //             PRE2_CPR_LoadorUnload: '1',
    //             PRE2_MOT_PhaseCOverTemp: '0',
    //             PRE1_MOT_PhaseBOverTemp: '0',
    //             PRE1_CPR_ExhaustPre: '6.40',
    //             PRE1_MOT_FrontAxleTemp2: '35.80',
    //             PRE1_MOT_FrontAxleTemp1: '0.00',
    //             PRE2_CPR_CoolantTemp: '12.00',
    //             PRE1_FaultSignal: '0',
    //             PRE2_FaultSignal: '0',
    //             PRE2_MOT_FrontAxleTemp: '0.00',
    //             PRE1_MOT_TotalRunTime: '5477.00',
    //             PRE1_CPR_LoadTime: '2405.00',
    //             PRE2_CPR_LoadTime: '4464.00',
    //             PRE1_CPR_HeadTemp: '86.00',
    //             PRE1_MOT_PhaseAOverTemp: '0',
    //             PRE2_MOT_PhaseBTemp: '18.50',
    //             PRE2_HostorLoc: '0',
    //             PRE2_MOT_TotalRunTime: '6534.00',
    //             PRE2_MOT_BackAxleTemp: '0.00',
    //             PRE2_MOT_RunReturn: '0',
    //             TotalInPipeFlow: '869.00',
    //             PRE2_CPR_InletPre: '0.00',
    //             PRE1_FaultSignal1: '0',
    //             PRE2_CPR_ExhaustPre: '5.90',
    //             PRE2_MOT_Current: '0.00',
    //             PRE1_MOT_BackAxleTemp: '0.00',
    //             PRE1_MOT_Current: '24.50',
    //             PRE2_MOT_PhaseATemp: '18.20',
    //             PRE1_MOT_PhaseCOverTemp: '0',
    //             PRE2_MOT_PhaseBOverTemp: '0',
    //             PRE1_HostorLoc: '0',
    //             PRE1_CPR_LoadPre: '7.00',
    //             PRE1_CPR_SeparationCylinderPressure: '77.00',
    //             PRE1_MOT_RunReturn: '1',
    //             PRE2_MOT_CtrlMode: '1',
    //             PRE1_MOT_CtrlMode: '0',
    //             PRE2_CPR_LoadPre: '7.00',
    //             PRE1_MOT_PhaseCTemp: '32.60',
    //             TotalOutPipePre: '6.40',
    //             PRE1_CPR_CoolantTemp: '64.00',
    //             PRE1_MOT_PhaseBTemp: '59.30',
    //             PRE2_MOT_PhaseCTemp: '18.20',
    //             PRE2_CPR_UnLoadPre: '6.20',
    //             PRE2_CPR_SeparationCylinderPressure: '5.90',
    //             isRun: '-2',
    //             PRE1_CPR_ExhaustTemp: '23.20',
    //           },
    //           readDataDes: null,
    //           summaryHour: [],
    //           summaryDay: [],
    //           history: [],
    //           dayhistory: [],
    //           totalInfo: null,
    //           sign: null,
    //           cameras: [
    //             {
    //               id: '1854452465886429185',
    //               addr: 'c70e0a6f7e0947368e4d9acd37bb3bac',
    //               name: '北压风机房',
    //               devicekind: 'toHKHLs',
    //               cameraRate: null,
    //             },
    //             {
    //               id: '1854452718454833154',
    //               addr: 'dfa82251816845a4a1c7957384bf2443',
    //               name: '北压风机房变电所',
    //               devicekind: 'toHKHLs',
    //               cameraRate: null,
    //             },
    //           ],
    //           links: [],
    //           other1: null,
    //           other2: null,
    //           other3: null,
    //           remarkInfo: null,
    //           linkInfo: null,
    //           addrIndex: null,
    //           warnLogNotOkCount: 0,
    //           otherInfo: null,
    //         },
    //         {
    //           msgType: null,
    //           deviceID: '1749326210754748418',
    //           strname: '南风井压风',
    //           strinstallpos: '南风井压风',
    //           fsectarea: 'null',
    //           stationname: '南风井压风',
    //           stationtype: 'redis',
    //           deviceType: 'forcFan_south',
    //           typeName: '压风机南',
    //           netStatus: 1,
    //           warnFlag: 0,
    //           warnLevel: 0,
    //           warnLevel_str: '正常',
    //           syswarnLevel: null,
    //           syswarnLevel_str: null,
    //           syswarnLevel_des: null,
    //           warnTime: null,
    //           readTime: '2024-12-02 18:40:56',
    //           warnDes: '',
    //           frontGateOpenCtrl: null,
    //           rearGateOpenCtrl: null,
    //           readData: {
    //             PRE1_MOT_FrontAxleOverTempAlam: '0',
    //             PRE3_MOT_PhaseBTempStop: '0',
    //             PRE3_CPR_CoolantTemp: '72.00',
    //             PRE1_MOT_PhaseATemp: '83.40',
    //             PRE2_MOT_PhaseCTempStop: '0',
    //             PRE2_MOT_PhaseAOverTemp: '0',
    //             PRE2_MOT_BackAxleOverTempAlam: '0',
    //             PRE3_AlarmHistory: '0.00',
    //             PRE1_MOT_BackAxleOverTempStop: '0',
    //             PRE2_CPR_LoadorUnload: '1',
    //             PRE3_MOT_PhaseBTemp: '74.80',
    //             PRE1_MOT_PhaseBOverTemp: '0',
    //             PRE1_CPR_ExhaustPre: '5.00',
    //             PRE3_MOT_RunReturn: '1',
    //             PRE1_ExitPressure: '26214.00',
    //             PRE2_ExitPressure: '5130.00',
    //             PRE1_CPR_LoadTime: '8272.00',
    //             PRE2_CPR_LoadTime: '424.00',
    //             PRE1_MOT_PhaseAOverTemp: '0',
    //             PRE2_MOT_Power: '0.00',
    //             PRE3_CPR_LoadTime: '244.00',
    //             PRE2_MOT_PhaseBTempStop: '0',
    //             PRE1_MOT_PhaseATempStop: '0',
    //             PRE2_MOT_RunReturn: '1',
    //             PRE2_AlarmHistory: '3.10',
    //             PRE1_Status: '8454',
    //             PRE3_MOT_PhaseATempStop: '0',
    //             PRE2_CPR_ExhaustPre: '5.10',
    //             PRE3_CPR_ExhaustTemp: '48.00',
    //             PRE3_MOT_TotalRunTime: '244.00',
    //             PRE1_MOT_BackAxleTemp: '0.00',
    //             PRE3_MOT_PhaseAOverTemp: '0',
    //             PRE2_MOT_PhaseATemp: '71.20',
    //             PRE2_MOT_BackAxleOverTempStop: '0',
    //             PRE3_MOT_FrontAxleOverTempAlam: '0',
    //             PRE3_MOT_BackAxleOverTempStop: '0',
    //             PRE1_HostorLoc: '0',
    //             PRE1_CPR_LoadPre: '6.30',
    //             PRE1_MOT_RunReturn: '1',
    //             PRE3_CPR_LoadPre: '6.30',
    //             PRE1_MOT_CtrlMode: '1',
    //             PRE2_CPR_LoadPre: '6.30',
    //             PRE3_MOT_CtrlMode: '1',
    //             PRE3_CPR_LoadorUnload: '1',
    //             PRE1_CPR_CoolantTemp: '71.00',
    //             PRE1_MOT_PhaseBTemp: '83.10',
    //             PRE2_MOT_FrontAxleOverTempAlam: '0',
    //             PRE2_MOT_PhaseCTemp: '57.20',
    //             PRE3_MOT_PhaseCTemp: '73.80',
    //             PRE2_CPR_HeadTemp: '98.00',
    //             sign: '0',
    //             PRE1_CPR_UnLoadPre: '7.00',
    //             PRE1_CPR_LoadorUnload: '1',
    //             PRE3_CPR_ExhaustPre: '5.10',
    //             PRE2_MOT_PhaseATempStop: '0',
    //             PRE1_MOT_PhaseBTempStop: '0',
    //             PRE2_CPR_ExhaustTemp: '62.00',
    //             PRE2_MOT_PhaseCOverTemp: '0',
    //             PRE3_MOT_PhaseBOverTemp: '0',
    //             PRE3_FaultSignal: '0',
    //             PRE3_MOT_Power: '1000.00',
    //             PRE3_MOT_PhaseATemp: '82.20',
    //             PRE2_CPR_CoolantTemp: '76.00',
    //             PRE3_HostorLoc: '0',
    //             PRE2_FaultSignal: '0',
    //             PRE1_FaultSignal: '0',
    //             PRE2_MOT_FrontAxleTemp: '0.00',
    //             PRE3_MOT_BackAxleTemp: '20.50',
    //             PRE1_MOT_TotalRunTime: '22.00',
    //             PRE3_MOT_FrontAxleTemp: '43.10',
    //             PRE1_CPR_HeadTemp: '92.00',
    //             PRE1_MOT_PhaseCTempStop: '0',
    //             PRE3_MOT_BackAxleOverTempAlam: '0',
    //             PRE2_HostorLoc: '0',
    //             PRE3_MOT_FrontAxleOverTempStop: '0',
    //             PRE2_MOT_PhaseBTemp: '64.20',
    //             PRE3_MOT_PhaseCTempStop: '0',
    //             PRE3_CPR_HeadTemp: '95.00',
    //             PRE2_MOT_TotalRunTime: '2802.00',
    //             PRE1_MOT_BackAxleOverTempAlam: '0',
    //             PRE2_MOT_BackAxleTemp: '0.00',
    //             TotalInPipeFlow: '1005.80',
    //             PRE3_CPR_UnLoadPre: '7.00',
    //             PRE3_MOT_PhaseCOverTemp: '0',
    //             PRE1_MOT_PhaseCOverTemp: '0',
    //             PRE1_MOT_FrontAxleTemp: '0.00',
    //             PRE2_MOT_PhaseBOverTemp: '0',
    //             PRE1_MOT_Power: '0.00',
    //             PRE1_MOT_FrontAxleOverTempStop: '0',
    //             PRE2_MOT_CtrlMode: '1',
    //             PRE1_MOT_PhaseCTemp: '82.90',
    //             TotalOutPipePre: '5.60',
    //             PRE1_AlarmHistory: '2.00',
    //             PRE2_MOT_FrontAxleOverTempStop: '0',
    //             PRE2_CPR_UnLoadPre: '7.00',
    //             isRun: '-2',
    //             PRE1_CPR_ExhaustTemp: '56.00',
    //           },
    //           readDataDes: null,
    //           summaryHour: [],
    //           summaryDay: [],
    //           history: [],
    //           dayhistory: [],
    //           totalInfo: null,
    //           sign: null,
    //           cameras: [
    //             {
    //               id: '1854452219160690689',
    //               addr: 'd37096a7d41244a1974bd99b4e2cfe35',
    //               name: '南压风机房配电室',
    //               devicekind: 'toHKHLs',
    //               cameraRate: null,
    //             },
    //             {
    //               id: '1854452329282142210',
    //               addr: '0f22a6377b084f8bb74435ef9eeff958',
    //               name: '南压风机',
    //               devicekind: 'toHKHLs',
    //               cameraRate: null,
    //             },
    //           ],
    //           links: [],
    //           other1: null,
    //           other2: null,
    //           other3: null,
    //           remarkInfo: null,
    //           linkInfo: null,
    //           addrIndex: null,
    //           warnLogNotOkCount: 0,
    //           otherInfo: null,
    //         },
    //       ],
    //       avginfo: {
    //         warnFlag: {
    //           value: 0,
    //         },
    //       },
    //       typeName: '压风机',
    //       type: 'forcFan',
    //       locallist: [],
    //     },
    //   ],
    // };

    if (res.msgTxt[0] && res.msgTxt[0].datalist && res.msgTxt[0].datalist.length > 0) {
      let dataSource;
      let dataSourceNorth = res.msgTxt[0].datalist.find((item) => item.deviceType === 'forcFan_north');
      let dataSourceSouth = res.msgTxt[0].datalist.find((item) => item.deviceType === 'forcFan_south');
      if (monitorDataGroupFlag.value == 1) {
        // 北风井
        dataSource = dataSourceNorth;
        if (dataSource) {
          monitorData.value = Object.assign(dataSource, dataSource.readData);
        }
      } else if (monitorDataGroupFlag.value == 2) {
        // 南风井
        dataSource = dataSourceSouth;
        if (dataSource) {
          monitorData.value = Object.assign(dataSource, dataSource.readData);
        }
      } else {
      }
      sysStateList.value = getSysState(Object.assign(dataSourceNorth, dataSourceNorth.readData));
      sysStateList1.value = getSysState1(Object.assign(dataSourceSouth, dataSourceSouth.readData));
    }
    loading.value = false;
  }

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

  function changeGroup(val) {
    kyjs.value = val.map((item) => `${item}号空压机`);
    cqgs.value = val.map((item) => `${item}号储气罐`);
    monitorData.value = new Array(val.length).fill({
      strName: '空压机',
      compressGroupName: '',
      compressExhaustPressF1: '-',
      compressSeparatePressF1: '-',
      compressHostTempF1: '-',
      compressCrewTempF1: '-',
      compressRunTimeF1: '-',
      controlModel: 'LOC',
    });
  }

  function getMonitorPro(type) {
    const propertyObj = getMonitorProperty(type);
    preFanMonitorData = propertyObj.preFanMonitorData;
    preMonitorList = propertyObj.preMonitorList;
    cqgMonitorList = propertyObj.cqgMonitorList;
    totalData = propertyObj.totalData;
  }

  onMounted(async () => {
    mountedThree(monitorDataGroupArr).then(() => {
      getMonitor(true).then(async () => {
        if (monitorData.value && monitorData.value['deviceID']) await getCamera(monitorData.value['deviceID'], playerRef.value);
        monitorDataGroupFlag.value = 1;
        setMonitorGroupNum(1);
        getMonitorPro(1);
      });
    });
  });

  onBeforeUnmount(() => {
    removeCamera();
  });

  onUnmounted(() => {
    destroy();
    removeCamera();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
  });
</script>

<style lang="less" scoped>
  @ventSpace: zxm;

  .nitrogen-home {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .total-data {
      position: absolute;
      color: #e4cd00;
      z-index: 9;
      top: 50px;
      right: 30px;
      // display: flex;
      font-size: 18px;
      .item {
        width: 200px;
        margin-left: 30px;
        .val {
          color: #00d8ff;
        }
      }
    }
  }

  .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% - 100px);
    position: fixed;
    z-index: 99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    top: 60px;
    .nitrogen-container {
      width: 100%;
      height: calc(100%);
      display: flex;
      justify-content: space-between;
      margin-bottom: 100px;
      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;
            }
          }
        }

        .item-l {
          width: 335px;

          .monitor-box {
            // width: 335px;
            background-color: #ffffff05;
            // margin-left: 2px;
            // border-radius: 5px;
            // backdrop-filter: blur(10px);
          }
        }

        .right-box {
          width: 330px;
          .control-group {
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;
            .control-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 0 4px;
              .control-item-title {
                color: #a6dce9;
                position: relative;
                top: 5px;
              }
              .control-item-state {
                width: 94px;
                height: 47px;
                background: url('/@/assets/images/vent/control-switch-bg.png');
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
              }

              .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;
              }
            }
          }
          .control-btn-group {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .control-left-box {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              padding: 0 20px;
              .btn-box {
                width: 100px;
                color: #fff;
                display: flex;
                justify-content: space-between;
                span {
                  display: inline-block;
                  padding: 2px 8px;
                  background: #007099;
                  border-radius: 4px;
                  border: 1px solid rgb(125, 230, 249);
                  cursor: pointer;
                  &:hover {
                    background: #005574;
                  }
                }
              }
              .icon-box {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #00bcdd;
                box-shadow: 0 0 20px #ffffff88;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 20px;

                .icon {
                  width: 18px;
                  height: 18px;
                  border-radius: 9px;
                  border: 3px solid #d7f9ff;
                  position: relative;
                  background: #00bcdd;
                  &::before {
                    position: absolute;
                    content: '';
                    width: 2px;
                    height: 12px;
                    background-color: #00bcdd;
                    left: 6px;
                    top: -16px;
                  }
                  &::after {
                    position: absolute;
                    content: '';
                    width: 2px;
                    height: 12px;
                    left: 6px;
                    top: 17px;
                    background-color: #00d9ff;
                  }
                }
              }
              .remote-icon-box {
                transform: rotate(30deg);
                animation: iconRotate 1s linear;
              }
              .remote-icon-box1 {
                transform: rotate(-30deg);
                animation: iconRotate1 1s linear;
              }

              @keyframes iconRotate {
                from {
                  transform: rotate(-30deg);
                }
                to {
                  transform: rotate(30deg);
                }
              }
              @keyframes iconRotate1 {
                from {
                  transform: rotate(30deg);
                }
                to {
                  transform: rotate(-30deg);
                }
              }
            }
            .control-right-box {
              width: 100px;
              color: #fff;
              height: 80px;
              justify-content: space-between;
              align-items: center;
              .btn {
                margin-bottom: 30px;
              }
            }
          }
        }

        .left-right-box {
          height: calc(100%);
          overflow-x: hidden;
          overflow-y: auto;
          pointer-events: auto;
          direction: rtl;
          .lr-container {
            direction: ltr;
          }
          .control-item {
            height: 36px;
          }
        }
      }
    }
  }
  .tab-button-box {
    display: inline-block;
    position: relative;
    padding: 5px;
    // border: 1px transparent solid;
    border-radius: 5px;
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    // height: 40px;
    // border: 1px solid #65dbea;
    height: 35px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 0 15px 5px 15px;
    cursor: pointer;
    &:hover {
      background: linear-gradient(#2cd1ff55, #1eb0ff55);
    }
    &::before {
      width: calc(100% - 6px);
      height: 27px;
      content: '';
      position: absolute;
      top: 3px;
      right: 0;
      left: 3px;
      bottom: 0;
      z-index: -1;
      border-radius: inherit; /*important*/
      background: linear-gradient(#1fa6cb, #127cb5);
    }
    &::after {
      width: calc(100% + 32px);
      height: 10px;
      content: '';
      position: absolute;
      top: 28px;
      right: 0;
      left: -16px;
      bottom: 0;
      z-index: -1;
      border-radius: inherit; /*important*/
      background: url('/@/assets/images/vent/short-light.png') no-repeat;
      background-position: center;
      background-size: 100%;
      z-index: 999;
    }
  }

  .tab-button-box-active {
    border: 1px solid #66989e !important;
    &:hover {
      background: none !important;
    }
    &::before {
      background: linear-gradient(#1fa6cbcc, #127cb5cc) !important;
    }
  }
</style>