gasInjection-project/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 v-if="hasPermission('btn:testWind')" class="button-box" @click="startRun()">启动测风</div>
        <!-- <div v-if="globalConfig?.simulatedPassword" class="button-box" @click="testPlay('')">模拟动画</div> -->
        <!-- <div class="button-box" @click="testPlay('')">模拟动画</div> -->
        <!-- <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.supplyAirAddr || selectData.strinstallpos || 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 v-if="hasPermission('windrect:handler')" class="tabs-button" type="primary" @click="openModel">一键测风</a-button>
          <a-button v-if="hasPermission('windrect:reset')" class="tabs-button" type="primary" @click="resetHandle">一键复位</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="deviceType"
              :dataSource="dataSource"
              design-scope="windrect-monitor"
              @selectRow="getSelectRow"
              :scroll="{ y: scroll.y - 40 }"
              title="测风装置监测"
              :isShowPagination="true"
              :isShowActionColumn="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>
              <template #action="{ record }">
                <a v-if="globalConfig?.showReport" class="table-action-link" @click="deviceEdit($event, 'reportInfo', record)">报表录入</a>
                <a class="table-action-link" @click="deviceEdit($event, 'deviceInfo', record)">设备编辑</a>
              </template>
            </MonitorTable>
          </a-tab-pane>
          <a-tab-pane key="2" tab="监测曲线图" force-render>
            <div class="tab-item" style="height: 280px" v-if="activeKey === '2'">
              <DeviceEcharts
                chartsColumnsType="windrect_chart"
                xAxisPropType="strname"
                :dataSource="dataSource"
                height="100%"
                :chartsColumns="chartsColumnList"
                :device-list-api="list.bind(null, { devicetype: 'windrect', pagetype: 'normal' })"
                device-type="windrect"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="历史数据">
            <div class="tab-item">
              <HistoryTable :columns-type="deviceType" :device-type="deviceType" designScope="windrect-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="报警历史">
            <div class="tab-item" v-if="activeKey === '4'">
              <AlarmHistoryTable columns-type="alarm" :device-type="deviceType" designScope="alarm-history" :scroll="scroll" />
            </div>
          </a-tab-pane>
          <a-tab-pane v-if="hasPermission('windrect:result')" key="6" tab="测风结果">
            <ResultTable v-if="activeKey === '6'" deviceType="windrect_list" :scroll="scroll" />
          </a-tab-pane>
          <a-tab-pane v-if="sysOrgCode != 'xjttzhqmk'" key="7" tab="报警次数统计">
            <div class="tab-item" v-if="activeKey === '7'">
              <AlarmNumTable columns-type="alarmNum" :device-type="deviceType" designScope="alarm-history" :scroll="280" />
            </div>
          </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"
  />
  <DeviceBaseInfo @register="regModal" :device-type="selectData['deviceType']" />
</template>

<script setup lang="ts">
import DeviceEcharts from '../comment/DeviceEcharts.vue';
import { unref, 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 DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
import ResultTable from './components/resultTable.vue';
import HistoryTable from '../comment/HistoryTable.vue';
import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
import AlarmNumTable from '../comment/AlarmNumTable.vue';
import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
import { deviceControlApi } from '/@/api/vent/index';
import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
import { message, Progress } from 'ant-design-vue';
import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
import { setDivHeight } from '/@/utils/event';
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
import { useRouter } from 'vue-router';
import { useModal } from '/@/components/Modal';
import { useCamera } from '/@/hooks/system/useCamera';
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
const { hasPermission } = usePermission();

const globalConfig = inject('globalConfig');

const { sysOrgCode } = useGlobSetting();
const { currentRoute } = useRouter();

const MonitorDataTable = ref();
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 deviceType = ref('windrect');
const deviceId = ref('');
const chartsColumnArr = getTableHeaderColumns('windrect_chart');
const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);

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

const dataSource = ref([]);
const [regModal, { openModal }] = useModal();

const { getCamera, removeCamera } = useCamera();
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 (Object.prototype.toString.call(timer) === '[object Null]') {
    timer = setTimeout(
      () => {
        list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
          if (res && res.msgTxt[0]) {
            // dataSource.value = res.msgTxt[0].datalist || [];
            const getData = res.msgTxt[0].datalist || [];
            getData.forEach((data) => {
              if (data.regulation) {
                const testRegulation = JSON.parse(data.regulation);
                data.fmin = testRegulation.fmin;
                data.fmax = testRegulation.fmax;
              }
            });
            dataSource.value = getData;
            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 && selectData['sign'] == 2) {
      if (!deviceRunState) {
        deviceRunState = 'start';
        play('down');
      }
    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
      deviceRunState = '';
      play('up');
    }
  }
}

// 自测动画方法
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 getSelectRow(selectRow, index) {
  if (selectRow) {
    loading.value = true;
    selectRowIndex.value = index;
    Object.assign(selectData, selectRow);
    let type = '';
    if (selectRow['modelType']) {
      type = selectRow['modelType'];
    } else {
      if (selectRow.deviceType.startsWith('windrect_rect')) {
        type = 'lmWindRect';
      }
      if (selectRow.deviceType.startsWith('windrect_normal')) {
        type = 'zdWindRect';
      }
      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
        type = 'lmWindSide';
      }
      if (selectRow.deviceType.startsWith('windrect_ds')) {
        type = 'dsWindRect_move';
        // type = 'duisheFixed';
      }
      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
        //windrect_ds_two
        type = 'dsWindRect_four';
      }
      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
        type = 'dsWindRect_two';
      }
      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
        type = 'duisheFixed';
      }
      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
        type = 'ddWindSide';
      }
    }

    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
    await setModelType(type);
    loading.value = false;
    deviceRunState = '';
    tanTouRunState = '';
    await getCamera(selectRow.deviceID, playerRef.value);
  }
}

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

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

function resetHandle() {
  modalType.value = 'resetWind';
  modalIsShow.value = true;
}

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

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

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

function controlDevice(passWord, type) {
  try {
    if (type == 'sing') {
      testWind({
        ids: [selectData.deviceID],
        maxnum: 1000,
        windnum: 1,
        password: passWord || globalConfig?.simulatedPassword,
      }).then((res) => {
        if (res && res.success === false) {
          message.error(res.message);
        } else {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！');
          } else {
            message.success('指令已下发成功！');
          }
        }
        modalIsShow.value = false;
      });
    } else if (type == 'multiple') {
      const ids = toRaw(modalTable.value.selectedRowKeys);
      testWind({
        ids: ids,
        maxnum: 1000,
        windnum: modalTable.value.selectedRowKeys.length,
        password: passWord || globalConfig?.simulatedPassword,
      }).then((res) => {
        if (res && res.success === false) {
          message.error(res.message);
        } else {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！');
          } else {
            message.success('指令已下发成功！');
          }
        }
        modalIsShow.value = false;
        setModalProps({ visible: false });
        modalTable.value.clearSelectedRowKeys();
      });
    } else if (type == 'autoClear') {
      const data = {
        deviceid: selectData.deviceID,
        devicetype: selectData.deviceType,
        paramcode: 'autoClear',
        value: null,
        password: passWord || globalConfig?.simulatedPassword,
        masterComputer: selectData.masterComputer,
      };
      deviceControlApi(data).then((res) => {
        // 模拟时开启
        if (res.success) {
          if (globalConfig.History_Type == 'remote') {
            message.success('指令已下发至生产管控平台成功！');
          } else {
            message.success('指令已下发成功！');
          }
        } else {
          message.error(res.message);
        }
        modalIsShow.value = false;
      });
    } else if (type == 'resetWind') {
      resetWind({}).then((res: any) => {
        message.info(res);
      });
      modalIsShow.value = false;
    }
  } catch (error) {
    message.error('测风失败，请联系管理员。。。');
    modalIsShow.value = false;
  }
}

/** 避灾路线上的测风装置 */
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);
  });
}

function deviceEdit(e: Event, type: string, record) {
  e.stopPropagation();
  openModal(true, {
    type,
    deviceId: record['deviceID'],
  });
}

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

onMounted(async () => {
  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
  // loading.value = true;
  // mountedThree(playerDom).then(async () => {
  //   getMonitor(true);
  //   // loading.value = false;
  // });
  const { query } = unref(currentRoute);
  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
  loading.value = true;
  mountedThree(null).then(async () => {
    await getMonitor(true);
    loading.value = false;
  });
});

onUnmounted(() => {
  removeCamera();
  if (timer) {
    clearTimeout(timer);
    timer = undefined;
  }
  destroy();
});
</script>
<style scoped lang="less">
@import '/@/design/theme.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 var(--vent-base-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vent-font-color);
    padding: 0 15px;
    cursor: pointer;
    pointer-events: auto;
    &:hover {
      background: var(--vent-device-manager-control-btn-hover);
    }
    &::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: var(--vent-device-manager-control-btn);
    }
  }
}
:deep(.@{ventSpace}-picker-datetime-panel) {
  height: 200px !important;
  overflow-y: auto !important;
}
</style>