gas-injection/src/views/vent/monitorManager/windrectMonitor/index.vue

<template>
  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
    <a-spin :spinning="loading" />
    <div id="window3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
  </div>
  <div class="scene-box">
    <div class="top-box">
      <div class="top-center row">
        <!-- <div class="button-box" @click="start(0)">复位</div> -->
        <div class="button-box" @click="testPlay('')">模拟动画</div>
        <div class="button-box" @click="clearPlay()">自动清洁</div>
        <div class="button-box" @click="startRun()">启动测风</div>
        <!-- <div class="button-box" @click="testPlay('up')">上</div>
        <div class="button-box" @click="testPlay('center')">中</div>
        <div class="button-box" @click="testPlay('down')">下</div>
        <div class="button-box" @click="testPlay('reset')">复位</div> -->
      </div>
      <!-- <div class="top-right row">
        <div class="control-type row">
          <div class="control-title">控制模式：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">就地</a-radio>
            <a-radio :value="2">远程</a-radio>
          </a-radio-group>
        </div>
        <div class="run-type row">
          <div class="control-title">运行状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">检修</a-radio>
          </a-radio-group>
        </div>
        <div class="run-state row">
          <div class="control-title">网络状态：</div>
          <a-radio-group v-model:value="controlType">
            <a-radio :value="1">运行</a-radio>
          </a-radio-group>
        </div>
      </div> -->
    </div>
    <div class="title-text">
      {{ selectData.strname }}
    </div>
    <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 350, scroll)">
      <dv-border-box8 :dur="5"  :style="`padding: 5px; height: ${scroll.y + 120}px`" >
        <div class="tabs-button-group">
          <a-button class="tabs-button" type="primary" @click="openModel">一键测风</a-button>
        </div>
        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="实时监测">
            <MonitorTable
              v-if="activeKey === '1'"
              ref="MonitorDataTable"
              columnsType="windrect_monitor"
              :dataSource="dataSource"
              design-scope="windrect-monitor"
              @selectRow="getSelectRow"
              :scroll="{ y: scroll.y - 40 }"
              title="测风装置监测"
              :isShowPagination="true"
            >
              <template #filterCell="{ column, record }">
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? '#FF5812' : 'green'">{{
                  record.netStatus == 0 ? '断开' : '连接'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray' "> {{
                  record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'sign'" :color="record.sign == 0 ? '#95CF65' : record.sign == 1 ? '#4590EA' : '#9876AA'"> {{ 
                  record.sign == 0 ? '高位' : record.sign == 1 ? '中位' : '低位'
                }}</a-tag>
                <template v-if="record && column && column.dataIndex === 'isRun' && record.isRun">
                  <a-tag v-if="record.isRun == -2 || record.isRun == -1" :color="record.isRun == -2 ? '#95CF65' : '#ED5700'">{{
                    record.isRun == -2 ? '空闲' : '等待'
                  }}</a-tag>
                  <a-tag v-else-if="record.isRun == 100" color="#4693FF">完成</a-tag>
                  <Progress v-else :percent="Number(record.isRun)" size="small" status="active" />
                </template>
              </template>
            </MonitorTable>
          </a-tab-pane>
          <a-tab-pane key="2" tab="监测曲线图" force-render>
            <div class="tab-item" v-if="activeKey === '2'">
              <DeviceEcharts
                chartsColumnsType="windrect_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                :chartsColumns="chartsColumns"
                :device-list-api="baseList"
                device-type="windrect"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item">
              <HistoryTable columns-type="windrect" device-type="windrect" :device-list-api="baseList" designScope="windrect-history" :scroll="scroll">
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'"> {{
                    record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
                  }}</a-tag>
                </template>
              </HistoryTable>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable columns-type="alarm" device-type="windrect" :device-list-api="baseList" designScope="alarm-history" :scroll="scroll"/>
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="操作历史">
            <div class="tab-item" v-if="activeKey === '5'">
              <HandlerHistoryTable columns-type="operator_history" device-type="windrect" :device-list-api="baseList" designScope="operator_history" :scroll="scroll"/>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="测风结果">
            <ResultTable  deviceType="windrect_list" :scroll="scroll"/>
          </a-tab-pane>
        </a-tabs>
      </dv-border-box8>
    </div>
  </div>
  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 10px; width: 300px; height: 280px; margin: auto"></div>

  <BasicModal v-bind="$attrs" @register="registerModal" title="一键测风" width="900px" @ok="handleOk" @cancel="handleCancel">
    <div class="head-line">
      <div class="vent-flex-row">
        <span>同时运行数量：</span>
        <a-input-number v-model:value="runNum" :min="1" :max="10" />
      </div>
      <div class="vent-flex-row">
        <div v-for="(criticalPath, index) in criticalPathList" :key="index" class="button-box" @click="selectCriticalPath(criticalPath.id)">{{
          criticalPath.systemname
        }}</div>
      </div>
    </div>
    <div>
      <ModalTable ref="modalTable" deviceType="windrect_list" />
    </div>
  </BasicModal>
  <HandleModal v-if="!globalConfig?.simulatedPassword" :modal-is-show="modalIsShow" modal-title="启动测风" :modal-type="modalType"  @handle-ok="controlDevice"
      @handle-cancel="handleCancelControl" />
</template>

<script setup lang="ts">
  import DeviceEcharts from '../comment/DeviceEcharts.vue';
  import { onBeforeMount,ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import MonitorTable from '../comment/MonitorTable.vue';
  import ModalTable from './components/modalTable.vue';
  import HandleModal from './components/modal.vue';
  import ResultTable from './components/resultTable.vue';
  import HistoryTable from '../comment/HistoryTable.vue';
  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
  import { deviceControlApi } from '/@/api/vent/index';
  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera, initCameraCanvas } from './windrect.threejs';
  import { list, pathList, deviceList, testWind, cameraAddrList, cameraList, exportXls } from './windrect.api';
  import { list as baseList} from '../../deviceManager/windfindingTabel/windfinding.api';
  import { message, Progress } from 'ant-design-vue';
  import { chartsColumns } from './windrect.data';
  import { setDivHeight } from '/@/utils/event';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import { useRouter } from 'vue-router';
  import { deviceCameraInit } from '/@/utils/ventutil.ts'

  const globalConfig = inject('globalConfig');

  const { currentRoute } = useRouter();

  const MonitorDataTable = ref()
  let webRtcServer: any[] = []

  const scroll = reactive({
    y: 230
  })
  const modalType = ref('')
  const modalIsShow = ref(false)
  const modalTable = ref();
  const runNum = ref(5); //设备运行数量
  const criticalPathList = ref([]);
  const playerRef = ref();
  const activeKey = ref('1');
  const loading = ref(false);
  // 默认初始是第一行
  const selectRowIndex = ref(-1);
  // 监测数据
  const selectData = reactive({
    deviceID: '',
    deviceType: '',
    strname: '',
    dataDh: '-', //压差
    dataDtestq: '-', //测试风量
    sourcePressure: '-', //气源压力
    dataDequivalarea: '-',
    netStatus: '0', //通信状态
    fault: '气源压力超限',
    sign: -1,
    sensorRight: 0,
    sensorMiddle: 1,
    sensorLeft: 0
  });


  // const dataSource = computed(() => {
  //   const data = [...getRecordList()] || [];
  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
  //   addMonitorText(selectData);
  //   return data;
  // });

  const dataSource = ref([]);

  const tabChange = (activeKeyVal) => {
    activeKey.value = activeKeyVal;
    if (activeKeyVal == 1) {
      nextTick(() => {
        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID])
      })
    }
  };

  // 设备数据
  const controlType = ref(1);
    //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner();


  // https获取监测数据
  let timer: null | NodeJS.Timeout = null;
  function getMonitor(flag?) {
    if (timer == null) {
      timer = setTimeout(() => {
        list({ devicetype: 'windrect', pagetype: 'normal' }).then((res) => {
          if(res && res.msgTxt[0]){
            dataSource.value = res.msgTxt[0].datalist || [];
            if (dataSource.value.length > 0) {
              dataSource.value.forEach((data: any) => {
                const readData = data.readData;
                data = Object.assign(data, readData);
              });
              if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
                // 初始打开页面
                if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
                  MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']])
                } else {
                  MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']])
                }
              }
              const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
              Object.assign(selectData, data);
              addMonitorText(selectData);

              palyAnimation(selectData)

            }
          }
          if (timer) {
            timer = null;
          }
          getMonitor();
        });
      }, flag ? 0 : 1000);
    }
  };
  
  let deviceRunState = '', tanTouRunState= '';
  // 根据3个点位分别执行动画
  function palyAnimation(selectData) {
    if (selectData.deviceType == "windrect_normal") {
      if (selectData['apparatusRun'] == 1) {
        const flag = selectData.sign == 0 ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null
        if (flag) play(flag);
      } else {
        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null
        if (flag) play(flag, true);
      }
    }
    // 运行中是0，运行到达是1
    if (selectData.deviceType == "windrect_rect_single") {
      if(selectData['apparatusRun'] == 1){
        // 镜头指向横杆
        // if(!deviceRunState && !tanTouRunState)playCamera('start')
        // 正在执行或是开始执行

        //开始执行时，
        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束

        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
        // 2. 探头左移play('left')
        // 3. 探头右移play('right')
        // 4. 横杆向中位移动，探头在右边
        // 5. 探头移到中间play('middle')
        // 6. 探头移到左边play('left')
        // 7. 横杆向低位移动，探头在左边
        // 8. 探头移到中间play('middle')
        // 9. 探头右移play('right')
        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
        if(selectData['poleIncipient'] == 1){
          // 横杆在高位，开始执行 或是 执行结束
          if(selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState){
            
            // 1. 开始执行
            deviceRunState = 'up'
            tanTouRunState= 'middle'
            play('up', true)
            play('middle', true)
          }
          if (deviceRunState == 'up-m') {
            play('up', true)
            play('middle', true)
            deviceRunState = ''
            tanTouRunState = ''
            playCamera('end')
          }
          // 初始已经在运行
          
          if(selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
            //2.探头左移play('left')
            if(tanTouRunState == 'middle'){
              tanTouRunState = 'left-m'
              play('left')
            }
            //3. 探头右移play('right')
            if (tanTouRunState == 'left') {
              tanTouRunState = 'right-m'
              play('right')
            }
          }
          if(selectData.sensorLeft == 1){
            tanTouRunState = 'left'
            if (!tanTouRunState || tanTouRunState == 'left-m') {
              play('left', true)
            }
          }
          if (selectData.sensorRight == 1) {
            tanTouRunState = 'right'
            if (!tanTouRunState || tanTouRunState == 'right-m') {
              play('right', true)
            }
          }
        }else if (selectData['poleMiddle'] == 1) {
          
          if(deviceRunState == 'center-m'){
            play('center', true)
            deviceRunState = 'center'
            tanTouRunState = 'right'
            play('right', true)
          }
          if (!deviceRunState) {
            deviceRunState = 'center'
            play('center', true)
          }
          if (!tanTouRunState) {
            play('right', true)
          }
          
          // 横杆在中位
          if (selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
            //5. 探头移到中间play('middle')
            if (tanTouRunState == 'right') {
              tanTouRunState = 'middle-m'
              play('middle')
            }
            //6. 探头移到左边play('left')
            if (tanTouRunState == 'middle') {
              tanTouRunState = 'left-m'
              play('left')
            }
          }
          if (selectData.sensorMiddle == 1) {
            tanTouRunState = 'middle'
            if (!tanTouRunState || tanTouRunState == 'middle-m') {
              play('middle', true)
            }
          }
          if (selectData.sensorLeft == 1) {
            tanTouRunState = 'left'
            if (!tanTouRunState || tanTouRunState == 'left-m') {
              play('left', true)
            }
          }
        }else if (selectData['poleNether'] == 1) {
          
          if (deviceRunState == 'down-m') {
            play('down', true)
            deviceRunState = 'down'
            tanTouRunState = 'left'
            play('left', true)
          }
          if(!deviceRunState) {
            play('down', true)
            deviceRunState = 'down'
          }
          if (!tanTouRunState) {
            play('left', true)
          }
          // 横杆在低位
          if (selectData.sensorLeft == 0 && selectData.sensorMiddle == 0 && selectData.sensorRight == 0) {
            //8. 探头移到中间play('middle')
            if (tanTouRunState == 'left') {
              tanTouRunState = 'left-middle-m'
              play('middle')
            }
            //9. 探头右移play('right')
            if (tanTouRunState == 'middle1') {
              tanTouRunState = 'right-m'
              play('right')
            }
            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
            if (tanTouRunState == 'right') {
              tanTouRunState = 'right-middle-m'
              play('middle')
            }
          }

          if (selectData.sensorMiddle == 1) {
            if(tanTouRunState == 'left-middle-m')tanTouRunState = 'middle1'
            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2'

            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
              play('middle', true)
            }
          }
          
          if (selectData.sensorRight == 1) {
            tanTouRunState = 'right'
            if (!tanTouRunState || tanTouRunState == 'right-m') {
              play('right', true)
            }
          }

        }else {
          // 横杆正在运行
          if(deviceRunState == 'up'){
            deviceRunState = 'center-m'
            play('center')
          }
          if (deviceRunState == 'center') {
            deviceRunState = 'down-m'
            play('down')
          }
          if (deviceRunState == 'down') {
            deviceRunState = 'up-m'
            play('up')
          }
        }
        

        // //正在执行时

        // // 判断上中下是否都为0
        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
        //   // 判断是否有前一个状态值，有的话执行
        //   //没有前一个状态


        //   //有前一个状态

        //   // 横杆前状态在上位时，横杆中位移动，探头在右边

        //   // 横杆前状态在中位时，横杆下位移动，探头在左边

        //   // 横杆前状态在下位时，横杆上位移动，探头在中间

        // }else{
        //   // 判断当前动画停在固定位置
        //   if(selectData['poleIncipient'] == 1) {
        //     // 滑杆停在上面，探头在中间

        //   }else if (selectData['poleMiddle'] == 1) {
        //     // 滑杆停在中间面，初始探头在右边

        //   } else if (selectData['poleNether'] == 1) {
        //     // 滑杆停在下面，初始探头在左边

        //   }
        // }

      }else {
        // if(selectData['poleIncipient'] == 1){
        //   deviceRunState = ''
        //   tanTouRunState = ''
        // }
      }
    }

    if (selectData.deviceType == "windrect_rect") {
      if (selectData['apparatusRun'] == 1) {
        const flag = selectData.sign == 0 ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null
        if (flag) play(flag);
      } else {
        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == 0 ? 'up' : null
        if (flag) play(flag, true);
      }
    }

    if (selectData.deviceType == "windrect_ds") {
      if (selectData['apparatusRun'] == 1) {
        if(!deviceRunState) {
          deviceRunState = 'start'
          play('start')
        }
        
      } else {
        deviceRunState = ''
        play('start', true)
      }
    }
  }

  // 自测动画方法
  function testPlay(flag) {

    if (selectData.deviceType == 'windrect_rect') {
      setTimeout(() => {
        play('center')
      }, 0)
      setTimeout(() => {
        play('down')
      }, 4000)
      setTimeout(() => {
        play('up')
      }, 10000)
    }
    if(selectData.deviceType == 'windrect_normal') {
      setTimeout(() => {
        play('up')
      }, 0)
      setTimeout(() => {
        play('center')
      }, 10000)
      setTimeout(() => {
        play('down')
      }, 18000)
      setTimeout(() => {
        play('up')
      }, 21000)

    }
    if(selectData.deviceType == 'windrect_ds') {
      play('moni')
    }
  };
  
  function clearPlay() {
    modalType.value = 'autoClear'
    modalIsShow.value = true
    if (globalConfig?.simulatedPassword) {
      controlDevice('', modalType.value)
    }
  }

  function startRun() {
    modalType.value = 'sing'
    modalIsShow.value = true
    if (globalConfig?.simulatedPassword) {
      controlDevice('', modalType.value)
    }
  }

  async function getCamera() {
    const res = await cameraList({ deviceid: selectData['deviceID'] })
    const cameras: [] = res.records || []
    let cameraAddrs: any[] = [], cameraNames: string[] = [];
    if (cameras.length > 0) {
      cameras.forEach(item => {
        if (item['devicekind'] == 'toRtsp' || item['devicekind'] == 'toHLS') {
          cameraNames.push(item['name'])
        } else {
          cameraAddrs.push({ name: item['name'], addr: item['addr'] })
        }
      })
    }
    if (cameraNames.length > 0) {
      // 请求接口从装备院拿数据
      const addrs: string[] = await cameraAddrList({ cameraNameList: cameraNames })
      for (let i = 0; i < addrs.length; i++) {
        cameraAddrs.push({ name: '摄像头' + i, addr: addrs[i] })
      }
    }
    const obj = await deviceCameraInit(cameraAddrs, playerRef.value, webRtcServer)
    webRtcServer = obj.webRtcServerList
    const playerDoms = obj.playerDoms
    // 注意前后门适应需要对应 //[0] 后门 [1]前门
    await initCameraCanvas(...playerDoms)
  }

  // 切换检测数据
  async function getSelectRow(selectRow, index) {
    if(selectRow){
      loading.value = true;
      selectRowIndex.value = index;
      Object.assign(selectData, selectRow);
      let type = ''
      if(selectRow.deviceType == 'windrect_rect') {
        type = 'lmWindRect'
      }
      if (selectRow.deviceType == 'windrect_normal') {
        type = 'zdWindRect'
      }
      if (selectRow.deviceType == 'windrect_rect_single') {
        type = 'lmWindSide'
      }
      if (selectRow.deviceType == 'windrect_ds') {
        type = 'dsWindRect_move'
      }
      if (selectRow.deviceType == 'windrect_ds_four') {
        type = 'dsWindRect_four'
      }
      if (selectRow.deviceType == 'windrect_ds_two') {
        type = 'dsWindRect_two'
      }
      
      if (selectRow.deviceType == 'windrect_dd' || selectRow.deviceType == 'windrect_safety') {
        type = 'ddWindSide'
      }
      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
      await setModelType(type);
      loading.value = false;
      deviceRunState = ''
      tanTouRunState = ''
      getCamera()
    }
    
  };

  /* 一键测风 */
  function handleOk() {
    modalType.value = 'multiple'
    modalIsShow.value = true
    if (globalConfig?.simulatedPassword) {
      controlDevice('', modalType.value)
    }
  };

  /* 打开一键测风弹窗 */
  function openModel() {
    setModalProps({ visible: true });
  };

  function exportExcel(id) {
    exportXls({ testid: id })
  }

  /* 关闭一键测风弹窗 */
  function handleCancel() {
    setModalProps({ visible: false });
    modalTable.value.clearSelectedRowKeys();
  };

  /* 关闭一键测风控制*/
  function handleCancelControl() {
    modalIsShow.value = false
  };

  function controlDevice(passWord, type) {
    if(type == 'sing'){
      testWind({ ids: [selectData.deviceID], maxnum: runNum.value, password: passWord }).then((res) => {
        message.success('开始测风。。。');
      });
    }else if(type == 'multiple'){
      const ids = toRaw(modalTable.value.selectedRowKeys);
      testWind({ ids: ids, maxnum: runNum.value, password: passWord }).then((res) => {
        message.success(res);
        setModalProps({ visible: false });
        modalTable.value.clearSelectedRowKeys();
      });
    }else if(type == 'autoClear') {
      const data = {
        deviceid: selectData.deviceID,
        devicetype: selectData.deviceType,
        paramcode: 'autoClear',
        value: null,
        password: passWord,
        masterComputer: selectData.masterComputer,
      };
      deviceControlApi(data)
      .then((res) => {
        // 模拟时开启
        if (res.success) {
          message.success('指令下发成功！')
        }
      })
    }
  }

  /** 避灾路线上的测风装置 */
  async function getPathList() {
    const pathArr = await pathList({});
    criticalPathList.value = pathArr.records.filter((item) => {
      return item.strsystype == 3;
    });
  };

  /* 根据路线选择测风装置 */
  function selectCriticalPath(pathId) {
    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
      const ids: string[] = [];
      res.records.forEach((item) => {
        ids.push(item.id);
      });
      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
    });
  };

  onBeforeMount(() => {
    getPathList();
  });

  onMounted(() => {
    loading.value = true;
    mountedThree().then(async () => {
      getMonitor(true);
      // loading.value = false;
    });
  });

  onUnmounted(() => {
    destroy();
    if (timer) {
      clearTimeout(timer);
      timer = undefined;
    }
    if (webRtcServer.length > 0) {
      webRtcServer.forEach(item => {
        item.disconnect()
      })
    }
  });
</script>
<style scoped lang="less">
  @import '/@/design/vent/modal.less';
  @ventSpace: zxm;

  
  :deep(.@{ventSpace}-tabs-tabpane-active) {
    height: 100%;
  }
  .scene-box{
    .bottom-tabs-box{
      height: 350px;
    }
  }
  .head-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .button-box {
      position: relative;
      padding: 5px;
      border: 1px transparent solid;
      border-radius: 5px;
      margin-left: 8px;
      margin-right: 8px;
      width: auto;
      height: 34px;
      border: 1px solid #65dbea;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 0 15px;
      cursor: pointer;
      pointer-events: auto;
      &:hover {
        background: linear-gradient(#3eb2ff55, #00c3ff55);
      }
      &::before {
        width: calc(100% - 6px);
        height: 26px;
        content: '';
        position: absolute;
        top: 3px;
        right: 0;
        left: 3px;
        bottom: 0;
        z-index: -1;
        border-radius: inherit; /*important*/
        background: linear-gradient(#014978, #3bf3fc);
      }
    }
  }
</style>