|  | @@ -1,7 +1,7 @@
 | 
											
												
													
														|  |  <template>
 |  |  <template>
 | 
											
												
													
														|  | -  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;">
 |  | 
 | 
											
												
													
														|  | 
 |  | +  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
 | 
											
												
													
														|  |      <a-spin :spinning="loading" />
 |  |      <a-spin :spinning="loading" />
 | 
											
												
													
														|  | -    <div id="damper3D" style="width: 100%; height: 100%;; position: absolute; overflow: hidden;"> </div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
 | 
											
												
													
														|  |      <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
 |  |      <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
 | 
											
												
													
														|  |        <div>
 |  |        <div>
 | 
											
												
													
														|  |          <div ref="elementContent" class="elementContent">
 |  |          <div ref="elementContent" class="elementContent">
 | 
											
										
											
												
													
														|  | @@ -18,12 +18,17 @@
 | 
											
												
													
														|  |    <div class="scene-box">
 |  |    <div class="scene-box">
 | 
											
												
													
														|  |      <div class="top-box">
 |  |      <div class="top-box">
 | 
											
												
													
														|  |        <div class="top-center row">
 |  |        <div class="top-center row">
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': backDoorIsOpen}" @click="playAnimation(1)">打开前门</div>
 |  | 
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': backDoorIsOpen}" @click="playAnimation(2)">关闭前门</div>
 |  | 
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': frontDoorIsOpen}" @click="playAnimation(3)">打开后门</div>
 |  | 
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': frontDoorIsOpen}" @click="playAnimation(4)">关闭后门</div>
 |  | 
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': frontDoorIsOpen || backDoorIsOpen}" @click="playAnimation(5)">打开前后门</div>
 |  | 
 | 
											
												
													
														|  | -        <div class="button-box" :class="{'button-disable': (frontDoorIsOpen && !backDoorIsOpen) || (backDoorIsOpen && !frontDoorIsOpen)}" @click="playAnimation(6)">关闭前后门</div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +        <div class="button-box" :class="{ 'button-disable': backDoorIsOpen }" @click="playAnimation(1)">打开前门</div>
 | 
											
												
													
														|  | 
 |  | +        <div class="button-box" :class="{ 'button-disable': backDoorIsOpen }" @click="playAnimation(2)">关闭前门</div>
 | 
											
												
													
														|  | 
 |  | +        <div class="button-box" :class="{ 'button-disable': frontDoorIsOpen }" @click="playAnimation(3)">打开后门</div>
 | 
											
												
													
														|  | 
 |  | +        <div class="button-box" :class="{ 'button-disable': frontDoorIsOpen }" @click="playAnimation(4)">关闭后门</div>
 | 
											
												
													
														|  | 
 |  | +        <div class="button-box" :class="{ 'button-disable': frontDoorIsOpen || backDoorIsOpen }" @click="playAnimation(5)">打开前后门</div>
 | 
											
												
													
														|  | 
 |  | +        <div
 | 
											
												
													
														|  | 
 |  | +          class="button-box"
 | 
											
												
													
														|  | 
 |  | +          :class="{ 'button-disable': (frontDoorIsOpen && !backDoorIsOpen) || (backDoorIsOpen && !frontDoorIsOpen) }"
 | 
											
												
													
														|  | 
 |  | +          @click="playAnimation(6)"
 | 
											
												
													
														|  | 
 |  | +          >关闭前后门</div
 | 
											
												
													
														|  | 
 |  | +        >
 | 
											
												
													
														|  |          <!-- <div class="button-box" @click="enterMY">漫游</div> -->
 |  |          <!-- <div class="button-box" @click="enterMY">漫游</div> -->
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  |        <div class="top-right row">
 |  |        <div class="top-right row">
 | 
											
										
											
												
													
														|  | @@ -47,7 +52,6 @@
 | 
											
												
													
														|  |            </a-radio-group>
 |  |            </a-radio-group>
 | 
											
												
													
														|  |          </div>
 |  |          </div>
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  |      <div class="title-text">
 |  |      <div class="title-text">
 | 
											
												
													
														|  |        {{ selectData.stationname }}
 |  |        {{ selectData.stationname }}
 | 
											
										
											
												
													
														|  | @@ -55,7 +59,29 @@
 | 
											
												
													
														|  |      <div class="bottom-tabs-box">
 |  |      <div class="bottom-tabs-box">
 | 
											
												
													
														|  |        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
 |  |        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
 | 
											
												
													
														|  |          <a-tab-pane key="1" tab="实时监测">
 |  |          <a-tab-pane key="1" tab="实时监测">
 | 
											
												
													
														|  | -            <MonitorTable class="monitor-table" columnsType="gate_monitor" :dataSource="dataSource" design-scope="gate-monitor" @selectRow="getSelectRow" title="风门监测" />
 |  | 
 | 
											
												
													
														|  | 
 |  | +          <MonitorTable
 | 
											
												
													
														|  | 
 |  | +            class="monitor-table"
 | 
											
												
													
														|  | 
 |  | +            columnsType="gate_monitor"
 | 
											
												
													
														|  | 
 |  | +            :dataSource="dataSource"
 | 
											
												
													
														|  | 
 |  | +            design-scope="gate-monitor"
 | 
											
												
													
														|  | 
 |  | +            @selectRow="getSelectRow"
 | 
											
												
													
														|  | 
 |  | +            title="风门监测"
 | 
											
												
													
														|  | 
 |  | +          >
 | 
											
												
													
														|  | 
 |  | +            <template #filterCell="{ column, record }">
 | 
											
												
													
														|  | 
 |  | +              <a-tag v-if="column.dataIndex === 'frontGateOpen'" :color="record.frontGateOpen == 0 ? 'default' : 'processing'">{{
 | 
											
												
													
														|  | 
 |  | +                record.frontGateOpen == 0 ? '关闭' : '打开'
 | 
											
												
													
														|  | 
 |  | +              }}</a-tag>
 | 
											
												
													
														|  | 
 |  | +              <a-tag v-if="column.dataIndex === 'rearGateOpen'" :color="record.rearGateOpen == 0 ? 'default' : 'processing'">{{
 | 
											
												
													
														|  | 
 |  | +                record.rearGateOpen == 0 ? '关闭' : '打开'
 | 
											
												
													
														|  | 
 |  | +              }}</a-tag>
 | 
											
												
													
														|  | 
 |  | +              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
 | 
											
												
													
														|  | 
 |  | +                record.warnFlag == 0 ? '正常' : '报警'
 | 
											
												
													
														|  | 
 |  | +              }}</a-tag>
 | 
											
												
													
														|  | 
 |  | +              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
 | 
											
												
													
														|  | 
 |  | +                record.netStatus == 0 ? '断开' : '连接'
 | 
											
												
													
														|  | 
 |  | +              }}</a-tag>
 | 
											
												
													
														|  | 
 |  | +            </template>
 | 
											
												
													
														|  | 
 |  | +          </MonitorTable>
 | 
											
												
													
														|  |          </a-tab-pane>
 |  |          </a-tab-pane>
 | 
											
												
													
														|  |          <a-tab-pane key="2" tab="实时曲线图" force-render>
 |  |          <a-tab-pane key="2" tab="实时曲线图" force-render>
 | 
											
												
													
														|  |            <div class="tab-item" v-if="activeKey === '2'">
 |  |            <div class="tab-item" v-if="activeKey === '2'">
 | 
											
										
											
												
													
														|  | @@ -72,7 +98,7 @@
 | 
											
												
													
														|  |          </a-tab-pane>
 |  |          </a-tab-pane>
 | 
											
												
													
														|  |          <a-tab-pane key="3" tab="历史数据">
 |  |          <a-tab-pane key="3" tab="历史数据">
 | 
											
												
													
														|  |            <div class="tab-item">
 |  |            <div class="tab-item">
 | 
											
												
													
														|  | -            <HistoryTable columns-type="gate_history" device-type="gate" :device-list-api="baseList" designScope="gate-history"/>
 |  | 
 | 
											
												
													
														|  | 
 |  | +            <HistoryTable columns-type="gate_history" device-type="gate" :device-list-api="baseList" designScope="gate-history" />
 | 
											
												
													
														|  |            </div>
 |  |            </div>
 | 
											
												
													
														|  |          </a-tab-pane>
 |  |          </a-tab-pane>
 | 
											
												
													
														|  |          <a-tab-pane key="4" tab="报警历史">
 |  |          <a-tab-pane key="4" tab="报警历史">
 | 
											
										
											
												
													
														|  | @@ -88,43 +114,54 @@
 | 
											
												
													
														|  |        </a-tabs>
 |  |        </a-tabs>
 | 
											
												
													
														|  |      </div>
 |  |      </div>
 | 
											
												
													
														|  |    </div>
 |  |    </div>
 | 
											
												
													
														|  | -  <div style=" z-index: -1; position: absolute; top: 50px; right: 10px; width:300px;height:280px;margin:auto" class="palyer1">
 |  | 
 | 
											
												
													
														|  | 
 |  | +  <div style="z-index: -1; position: absolute; top: 50px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer1">
 | 
											
												
													
														|  |      <LivePlayer id="fm-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
 |  |      <LivePlayer id="fm-player1" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
 | 
											
												
													
														|  | -    <LivePlayer id="fm-player2" ref="player2" :videoUrl="flvURL1()" muted live loading controls style="margin-top: 10px"/>
 |  | 
 | 
											
												
													
														|  | 
 |  | +    <LivePlayer id="fm-player2" ref="player2" :videoUrl="flvURL1()" muted live loading controls style="margin-top: 10px" />
 | 
											
												
													
														|  |    </div>
 |  |    </div>
 | 
											
												
													
														|  | 
 |  | +  <!-- <a-modal v-model:visible="modalIsShow" :title="modalTitle" @ok="handleOk">
 | 
											
												
													
														|  | 
 |  | +    <div class="modal-container">
 | 
											
												
													
														|  | 
 |  | +      <div class="vent-flex-row">
 | 
											
												
													
														|  | 
 |  | +        <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
 | 
											
												
													
														|  | 
 |  | +        <div class="warning-text">您是否要进行{{ modalTitle }}操作?</div>
 | 
											
												
													
														|  | 
 |  | +      </div>
 | 
											
												
													
														|  | 
 |  | +    </div>
 | 
											
												
													
														|  | 
 |  | +  </a-modal> -->
 | 
											
												
													
														|  | 
 |  | +  <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK" @handle-cancel="handleCancel" />
 | 
											
												
													
														|  |  </template>
 |  |  </template>
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |  <script setup lang="ts">
 |  |  <script setup lang="ts">
 | 
											
												
													
														|  |    import '/@/design/vent/modal.less';
 |  |    import '/@/design/vent/modal.less';
 | 
											
												
													
														|  | -  import LivePlayer from '@liveqing/liveplayer-v3'
 |  | 
 | 
											
												
													
														|  | -  import {onBeforeMount, onBeforeUnmount, onUnmounted, onMounted, ref, Ref, reactive, toRaw } from 'vue';
 |  | 
 | 
											
												
													
														|  | -  import BarAndLine from '../../../../components/chart/BarAndLine.vue';
 |  | 
 | 
											
												
													
														|  | 
 |  | +  import LivePlayer from '@liveqing/liveplayer-v3';
 | 
											
												
													
														|  | 
 |  | +  import { onBeforeMount, onBeforeUnmount, onUnmounted, onMounted, ref, reactive, toRaw, nextTick } from 'vue';
 | 
											
												
													
														|  |    import DeviceEcharts from '../comment/DeviceEcharts.vue';
 |  |    import DeviceEcharts from '../comment/DeviceEcharts.vue';
 | 
											
												
													
														|  |    import MonitorTable from '../comment/MonitorTable.vue';
 |  |    import MonitorTable from '../comment/MonitorTable.vue';
 | 
											
												
													
														|  |    import HistoryTable from '../comment/HistoryTable.vue';
 |  |    import HistoryTable from '../comment/HistoryTable.vue';
 | 
											
												
													
														|  |    import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
 |  |    import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
 | 
											
												
													
														|  |    import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
 |  |    import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
 | 
											
												
													
														|  | 
 |  | +  import HandleModal from './modal.vue';
 | 
											
												
													
														|  |    import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
 |  |    import { initWebSocket, getRecordList } from '/@/hooks/web/useVentWebSocket';
 | 
											
												
													
														|  | -  import { mountedThree, addFmText, play, destroy, initOpenState} from './gate.threejs'
 |  | 
 | 
											
												
													
														|  | 
 |  | +  import { mountedThree, addFmText, play, destroy, initOpenState } from './gate.threejs';
 | 
											
												
													
														|  |    import { deviceControlApi } from '/@/api/vent/index';
 |  |    import { deviceControlApi } from '/@/api/vent/index';
 | 
											
												
													
														|  |    import { message } from 'ant-design-vue';
 |  |    import { message } from 'ant-design-vue';
 | 
											
												
													
														|  | -  import { list } from "/@/views/vent/monitorManager/windowMonitor/window.api";
 |  | 
 | 
											
												
													
														|  | -  import { list as baseList } from '../../deviceManager/damperTabel/damper.api'
 |  | 
 | 
											
												
													
														|  | -  import {chartsColumns} from './gate.data'
 |  | 
 | 
											
												
													
														|  | -  import lodash from "lodash";
 |  | 
 | 
											
												
													
														|  | 
 |  | +  import { list } from '/@/views/vent/monitorManager/windowMonitor/window.api';
 | 
											
												
													
														|  | 
 |  | +  import { list as baseList } from '../../deviceManager/damperTabel/damper.api';
 | 
											
												
													
														|  | 
 |  | +  import { chartsColumns } from './gate.data';
 | 
											
												
													
														|  | 
 |  | +  import lodash from 'lodash';
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -  const player1 = ref(null)
 |  | 
 | 
											
												
													
														|  | -  const player2 = ref(null)
 |  | 
 | 
											
												
													
														|  | -  const elementContent = <Ref<HTMLElement>>ref()
 |  | 
 | 
											
												
													
														|  | -  const activeKey = ref('1')
 |  | 
 | 
											
												
													
														|  | -  const loading = ref(false);
 |  | 
 | 
											
												
													
														|  | 
 |  | +  const player1 = ref(null);
 | 
											
												
													
														|  | 
 |  | +  const player2 = ref(null);
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | 
 |  | +  const activeKey = ref('1');
 | 
											
												
													
														|  | 
 |  | +  const loading = ref(false);
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    const frontDoorIsOpen = ref(false); //前门是否开启
 |  |    const frontDoorIsOpen = ref(false); //前门是否开启
 | 
											
												
													
														|  |    const backDoorIsOpen = ref(false); //后门是否开启
 |  |    const backDoorIsOpen = ref(false); //后门是否开启
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | 
 |  | +  const modalIsShow = ref<boolean>(false); // 是否显示模态框
 | 
											
												
													
														|  | 
 |  | +  const modalTitle = ref(''); // 模态框标题显示内容,根据设备操作类型决定
 | 
											
												
													
														|  | 
 |  | +  const modalType = ref(''); // 模态框内容显示类型,设备操作类型
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -  const selectRowIndex = ref(0)
 |  | 
 | 
											
												
													
														|  | 
 |  | +  const selectRowIndex = ref(0);
 | 
											
												
													
														|  |    const dataSource = ref([]);
 |  |    const dataSource = ref([]);
 | 
											
												
													
														|  |    //  webSocket 请求 实时监测数据
 |  |    //  webSocket 请求 实时监测数据
 | 
											
												
													
														|  |    // const dataSource:any = computed(() => {
 |  |    // const dataSource:any = computed(() => {
 | 
											
										
											
												
													
														|  | @@ -137,13 +174,12 @@
 | 
											
												
													
														|  |    //   return data;
 |  |    //   return data;
 | 
											
												
													
														|  |    // });
 |  |    // });
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |    // 设备数据
 |  |    // 设备数据
 | 
											
												
													
														|  | -  const controlType = ref(1)
 |  | 
 | 
											
												
													
														|  | 
 |  | +  const controlType = ref(1);
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    const tabChange = (activeKeyVal) => {
 |  |    const tabChange = (activeKeyVal) => {
 | 
											
												
													
														|  | -    activeKey.value = activeKeyVal
 |  | 
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | 
 |  | +    activeKey.value = activeKeyVal;
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |    const initData = {
 |  |    const initData = {
 | 
											
												
													
														|  |      deviceID: '',
 |  |      deviceID: '',
 | 
											
												
													
														|  |      deviceType: '',
 |  |      deviceType: '',
 | 
											
										
											
												
													
														|  | @@ -154,7 +190,7 @@
 | 
											
												
													
														|  |      frontGateOpen: '0',
 |  |      frontGateOpen: '0',
 | 
											
												
													
														|  |      rearGateOpen: '0',
 |  |      rearGateOpen: '0',
 | 
											
												
													
														|  |      fault: '气源压力超限',
 |  |      fault: '气源压力超限',
 | 
											
												
													
														|  | -    autoRoManual: 0
 |  | 
 | 
											
												
													
														|  | 
 |  | +    autoRoManual: 0,
 | 
											
												
													
														|  |    };
 |  |    };
 | 
											
												
													
														|  |    // 监测数据
 |  |    // 监测数据
 | 
											
												
													
														|  |    const selectData = reactive(lodash.cloneDeep(initData));
 |  |    const selectData = reactive(lodash.cloneDeep(initData));
 | 
											
										
											
												
													
														|  | @@ -165,52 +201,102 @@
 | 
											
												
													
														|  |      if (Object.prototype.toString.call(timer) === '[object Null]') {
 |  |      if (Object.prototype.toString.call(timer) === '[object Null]') {
 | 
											
												
													
														|  |        timer = setTimeout(() => {
 |  |        timer = setTimeout(() => {
 | 
											
												
													
														|  |          list({ devicetype: 'gate', pagetype: 'normal' }).then((res) => {
 |  |          list({ devicetype: 'gate', pagetype: 'normal' }).then((res) => {
 | 
											
												
													
														|  | -          if(res.msgTxt && res.msgTxt[0]){
 |  | 
 | 
											
												
													
														|  | 
 |  | +          if (res.msgTxt && res.msgTxt[0]) {
 | 
											
												
													
														|  |              dataSource.value = res.msgTxt[0].datalist || [];
 |  |              dataSource.value = res.msgTxt[0].datalist || [];
 | 
											
												
													
														|  |              dataSource.value.forEach((data: any) => {
 |  |              dataSource.value.forEach((data: any) => {
 | 
											
												
													
														|  |                const readData = data.readData;
 |  |                const readData = data.readData;
 | 
											
												
													
														|  |                data = Object.assign(data, readData);
 |  |                data = Object.assign(data, readData);
 | 
											
												
													
														|  |              });
 |  |              });
 | 
											
												
													
														|  | -            if(dataSource.value.length > selectRowIndex.value) {
 |  | 
 | 
											
												
													
														|  | 
 |  | +            if (dataSource.value.length > selectRowIndex.value) {
 | 
											
												
													
														|  |                const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
 |  |                const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
 | 
											
												
													
														|  |                Object.assign(selectData, data);
 |  |                Object.assign(selectData, data);
 | 
											
												
													
														|  |                addFmText(selectData);
 |  |                addFmText(selectData);
 | 
											
												
													
														|  | -              if(timer){
 |  | 
 | 
											
												
													
														|  | 
 |  | +              if (timer) {
 | 
											
												
													
														|  |                  timer = null;
 |  |                  timer = null;
 | 
											
												
													
														|  |                }
 |  |                }
 | 
											
												
													
														|  |                getMonitor();
 |  |                getMonitor();
 | 
											
												
													
														|  |              }
 |  |              }
 | 
											
												
													
														|  |            }
 |  |            }
 | 
											
												
													
														|  | -          
 |  | 
 | 
											
												
													
														|  |          });
 |  |          });
 | 
											
												
													
														|  |        }, 1000);
 |  |        }, 1000);
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |    };
 |  |    };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    // 切换检测数据
 |  |    // 切换检测数据
 | 
											
												
													
														|  | -  const getSelectRow = async(selectRow, index) => {
 |  | 
 | 
											
												
													
														|  | -    loading.value = true
 |  | 
 | 
											
												
													
														|  | -    selectRowIndex.value = index
 |  | 
 | 
											
												
													
														|  | -    frontDoorIsOpen.value = selectData.frontGateOpen === '1'
 |  | 
 | 
											
												
													
														|  | -    backDoorIsOpen.value = selectData.rearGateOpen === '1'
 |  | 
 | 
											
												
													
														|  | -    await initOpenState(selectData)
 |  | 
 | 
											
												
													
														|  | -    loading.value = false
 |  | 
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | 
 |  | +  const getSelectRow = async (selectRow, index) => {
 | 
											
												
													
														|  | 
 |  | +    loading.value = true;
 | 
											
												
													
														|  | 
 |  | +    selectRowIndex.value = index;
 | 
											
												
													
														|  | 
 |  | +    frontDoorIsOpen.value = selectData.frontGateOpen === '1';
 | 
											
												
													
														|  | 
 |  | +    backDoorIsOpen.value = selectData.rearGateOpen === '1';
 | 
											
												
													
														|  | 
 |  | +    await initOpenState(selectData);
 | 
											
												
													
														|  | 
 |  | +    loading.value = false;
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    // 播放动画
 |  |    // 播放动画
 | 
											
												
													
														|  |    const playAnimation = (handlerState) => {
 |  |    const playAnimation = (handlerState) => {
 | 
											
												
													
														|  | 
 |  | +    switch (handlerState) {
 | 
											
												
													
														|  | 
 |  | +      case 1: // 打开前门
 | 
											
												
													
														|  | 
 |  | +        if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '打开前门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '1';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +      case 2: // 关闭前门
 | 
											
												
													
														|  | 
 |  | +        if (frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '关闭前门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '2';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +      case 3: // 打开后门
 | 
											
												
													
														|  | 
 |  | +        if (!backDoorIsOpen.value && !frontDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '打开后门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '3';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +      case 4: // 关闭后门
 | 
											
												
													
														|  | 
 |  | +        if (backDoorIsOpen.value && !frontDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '关闭后门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '4';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +      case 5: // 打开前后门
 | 
											
												
													
														|  | 
 |  | +        if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '打开前后门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '5';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +      case 6: // 关闭前后门
 | 
											
												
													
														|  | 
 |  | +        if (frontDoorIsOpen.value && backDoorIsOpen.value) {
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '关闭前后门';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '6';
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = true;
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  | 
 |  | +        break;
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const handleOK = (passWord, handlerState) => {
 | 
											
												
													
														|  | 
 |  | +    if (passWord !== '123456') {
 | 
											
												
													
														|  | 
 |  | +      message.warning('密码不正确,请重新输入');
 | 
											
												
													
														|  | 
 |  | +      return;
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |      const data = {
 |  |      const data = {
 | 
											
												
													
														|  |        deviceid: selectData.deviceID,
 |  |        deviceid: selectData.deviceID,
 | 
											
												
													
														|  |        devicetype: selectData.deviceType,
 |  |        devicetype: selectData.deviceType,
 | 
											
												
													
														|  |        paramcode: '',
 |  |        paramcode: '',
 | 
											
												
													
														|  |        value: null,
 |  |        value: null,
 | 
											
												
													
														|  | -      autoRoManual: selectData.autoRoManual
 |  | 
 | 
											
												
													
														|  | 
 |  | +      autoRoManual: selectData.autoRoManual,
 | 
											
												
													
														|  |      };
 |  |      };
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |      let handler = () => {};
 |  |      let handler = () => {};
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      switch (handlerState) {
 |  |      switch (handlerState) {
 | 
											
												
													
														|  | -      case 1: // 打开前门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '1': // 打开前门
 | 
											
												
													
														|  |          if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 |  |          if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              frontDoorIsOpen.value = true;
 |  |              frontDoorIsOpen.value = true;
 | 
											
										
											
												
													
														|  | @@ -218,7 +304,7 @@
 | 
											
												
													
														|  |            data.paramcode = 'frontGateOpen_S';
 |  |            data.paramcode = 'frontGateOpen_S';
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  | -      case 2: // 关闭前门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '2': // 关闭前门
 | 
											
												
													
														|  |          if (frontDoorIsOpen.value && !backDoorIsOpen.value) {
 |  |          if (frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              frontDoorIsOpen.value = false;
 |  |              frontDoorIsOpen.value = false;
 | 
											
										
											
												
													
														|  | @@ -226,7 +312,7 @@
 | 
											
												
													
														|  |            data.paramcode = 'frontGateClose_S';
 |  |            data.paramcode = 'frontGateClose_S';
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  | -      case 3: // 打开后门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '3': // 打开后门
 | 
											
												
													
														|  |          if (!backDoorIsOpen.value && !frontDoorIsOpen.value) {
 |  |          if (!backDoorIsOpen.value && !frontDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              backDoorIsOpen.value = true;
 |  |              backDoorIsOpen.value = true;
 | 
											
										
											
												
													
														|  | @@ -234,7 +320,7 @@
 | 
											
												
													
														|  |            data.paramcode = 'rearGateOpen_S';
 |  |            data.paramcode = 'rearGateOpen_S';
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  | -      case 4: // 关闭后门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '4': // 关闭后门
 | 
											
												
													
														|  |          if (backDoorIsOpen.value && !frontDoorIsOpen.value) {
 |  |          if (backDoorIsOpen.value && !frontDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              backDoorIsOpen.value = false;
 |  |              backDoorIsOpen.value = false;
 | 
											
										
											
												
													
														|  | @@ -242,16 +328,16 @@
 | 
											
												
													
														|  |            data.paramcode = 'rearGateClose_S';
 |  |            data.paramcode = 'rearGateClose_S';
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  | -      case 5: // 打开前后门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '5': // 打开前后门
 | 
											
												
													
														|  |          if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 |  |          if (!frontDoorIsOpen.value && !backDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              frontDoorIsOpen.value = true;
 |  |              frontDoorIsOpen.value = true;
 | 
											
												
													
														|  | -            backDoorIsOpen.value = true
 |  | 
 | 
											
												
													
														|  | 
 |  | +            backDoorIsOpen.value = true;
 | 
											
												
													
														|  |            };
 |  |            };
 | 
											
												
													
														|  |            data.paramcode = 'sameTimeOpen';
 |  |            data.paramcode = 'sameTimeOpen';
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  | -      case 6: // 关闭前后门
 |  | 
 | 
											
												
													
														|  | 
 |  | +      case '6': // 关闭前后门
 | 
											
												
													
														|  |          if (frontDoorIsOpen.value && backDoorIsOpen.value) {
 |  |          if (frontDoorIsOpen.value && backDoorIsOpen.value) {
 | 
											
												
													
														|  |            handler = () => {
 |  |            handler = () => {
 | 
											
												
													
														|  |              frontDoorIsOpen.value = false;
 |  |              frontDoorIsOpen.value = false;
 | 
											
										
											
												
													
														|  | @@ -261,7 +347,6 @@
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |          break;
 |  |          break;
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |      if (data.paramcode) {
 |  |      if (data.paramcode) {
 | 
											
												
													
														|  |        deviceControlApi(data)
 |  |        deviceControlApi(data)
 | 
											
												
													
														|  |          .then((res) => {
 |  |          .then((res) => {
 | 
											
										
											
												
													
														|  | @@ -269,11 +354,19 @@
 | 
											
												
													
														|  |            }
 |  |            }
 | 
											
												
													
														|  |          })
 |  |          })
 | 
											
												
													
														|  |          .finally(() => {
 |  |          .finally(() => {
 | 
											
												
													
														|  | 
 |  | +          modalIsShow.value = false;
 | 
											
												
													
														|  | 
 |  | +          modalTitle.value = '';
 | 
											
												
													
														|  | 
 |  | +          modalType.value = '';
 | 
											
												
													
														|  |            handler();
 |  |            handler();
 | 
											
												
													
														|  | -          play(handlerState)
 |  | 
 | 
											
												
													
														|  | 
 |  | +          play(Number(handlerState));
 | 
											
												
													
														|  |          });
 |  |          });
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |    };
 |  |    };
 | 
											
												
													
														|  | 
 |  | +  const handleCancel = () => {
 | 
											
												
													
														|  | 
 |  | +    modalIsShow.value = false;
 | 
											
												
													
														|  | 
 |  | +    modalTitle.value = '';
 | 
											
												
													
														|  | 
 |  | +    modalType.value = '';
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    // 远程、就地切换
 |  |    // 远程、就地切换
 | 
											
												
													
														|  |    const changeType = () => {
 |  |    const changeType = () => {
 | 
											
										
											
												
													
														|  | @@ -281,61 +374,63 @@
 | 
											
												
													
														|  |        deviceid: selectData.deviceID,
 |  |        deviceid: selectData.deviceID,
 | 
											
												
													
														|  |        devicetype: selectData.deviceType,
 |  |        devicetype: selectData.deviceType,
 | 
											
												
													
														|  |        paramcode: 'autoRoManual',
 |  |        paramcode: 'autoRoManual',
 | 
											
												
													
														|  | -      value: selectData.autoRoManual
 |  | 
 | 
											
												
													
														|  | 
 |  | +      value: selectData.autoRoManual,
 | 
											
												
													
														|  |      };
 |  |      };
 | 
											
												
													
														|  |      deviceControlApi(data).then(() => {
 |  |      deviceControlApi(data).then(() => {
 | 
											
												
													
														|  | -      message.success('状态切换成功!')
 |  | 
 | 
											
												
													
														|  | -    })
 |  | 
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | 
 |  | +      message.success('状态切换成功!');
 | 
											
												
													
														|  | 
 |  | +    });
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -  const flvURL1 = () =>{
 |  | 
 | 
											
												
													
														|  | -    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`
 |  | 
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | -  const flvURL2 = () =>{
 |  | 
 | 
											
												
													
														|  | -    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`
 |  | 
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | 
 |  | +  const flvURL1 = () => {
 | 
											
												
													
														|  | 
 |  | +    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  | 
 |  | +  const flvURL2 = () => {
 | 
											
												
													
														|  | 
 |  | +    return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    // 视频播放
 |  |    // 视频播放
 | 
											
												
													
														|  |    const addPlayVideo = () => {
 |  |    const addPlayVideo = () => {
 | 
											
												
													
														|  | -    if(player1.value && player2.value && player1.value?.play && player2.value?.play) {
 |  | 
 | 
											
												
													
														|  | 
 |  | +    if (player1.value && player2.value && player1.value?.play && player2.value?.play) {
 | 
											
												
													
														|  |        // player1.value.setMuted(false);
 |  |        // player1.value.setMuted(false);
 | 
											
												
													
														|  |        // player2.value.setMuted(false);
 |  |        // player2.value.setMuted(false);
 | 
											
												
													
														|  |        player1.value.play();
 |  |        player1.value.play();
 | 
											
												
													
														|  |        player2.value.play();
 |  |        player2.value.play();
 | 
											
												
													
														|  | -      document.body.removeEventListener('mousedown', addPlayVideo)
 |  | 
 | 
											
												
													
														|  | 
 |  | +      document.body.removeEventListener('mousedown', addPlayVideo);
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  | -  }
 |  | 
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +  const handleOk = (e: MouseEvent) => {
 | 
											
												
													
														|  | 
 |  | +    //
 | 
											
												
													
														|  | 
 |  | +  };
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    onBeforeMount(() => {
 |  |    onBeforeMount(() => {
 | 
											
												
													
														|  |      const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'gate', orgcode: '', ids: '', systemID: '' });
 |  |      const sendVal = JSON.stringify({ pagetype: 'normal', devicetype: 'gate', orgcode: '', ids: '', systemID: '' });
 | 
											
												
													
														|  |      initWebSocket(sendVal);
 |  |      initWebSocket(sendVal);
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  |    });
 |  |    });
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |    onMounted(() => {
 |  |    onMounted(() => {
 | 
											
												
													
														|  | -    loading.value = true
 |  | 
 | 
											
												
													
														|  | -    getMonitor()
 |  | 
 | 
											
												
													
														|  | 
 |  | +    loading.value = true;
 | 
											
												
													
														|  | 
 |  | +    getMonitor();
 | 
											
												
													
														|  |      mountedThree(player1.value, player2.value).then(() => {
 |  |      mountedThree(player1.value, player2.value).then(() => {
 | 
											
												
													
														|  | -      addFmText(selectData)
 |  | 
 | 
											
												
													
														|  | -      loading.value = false
 |  | 
 | 
											
												
													
														|  | -    })
 |  | 
 | 
											
												
													
														|  | 
 |  | +      nextTick(() => {
 | 
											
												
													
														|  | 
 |  | +        addFmText(selectData);
 | 
											
												
													
														|  | 
 |  | +      });
 | 
											
												
													
														|  | 
 |  | +      loading.value = false;
 | 
											
												
													
														|  | 
 |  | +    });
 | 
											
												
													
														|  |      document.body.addEventListener('mousedown', addPlayVideo, false);
 |  |      document.body.addEventListener('mousedown', addPlayVideo, false);
 | 
											
												
													
														|  |    });
 |  |    });
 | 
											
												
													
														|  | -  onBeforeUnmount(() => {
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | -  })
 |  | 
 | 
											
												
													
														|  | 
 |  | +  onBeforeUnmount(() => {});
 | 
											
												
													
														|  |    onUnmounted(() => {
 |  |    onUnmounted(() => {
 | 
											
												
													
														|  | -    if(timer) {
 |  | 
 | 
											
												
													
														|  | -      clearTimeout(timer)
 |  | 
 | 
											
												
													
														|  | 
 |  | +    if (timer) {
 | 
											
												
													
														|  | 
 |  | +      clearTimeout(timer);
 | 
											
												
													
														|  |        timer = undefined;
 |  |        timer = undefined;
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  | -    destroy()
 |  | 
 | 
											
												
													
														|  | -  })
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | 
 |  | +    destroy();
 | 
											
												
													
														|  | 
 |  | +  });
 | 
											
												
													
														|  |  </script>
 |  |  </script>
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -<style  lang="less" scoped>
 |  | 
 | 
											
												
													
														|  | -  .button-box{
 |  | 
 | 
											
												
													
														|  | 
 |  | +<style lang="less" scoped>
 | 
											
												
													
														|  | 
 |  | +  .button-box {
 | 
											
												
													
														|  |      border: none !important;
 |  |      border: none !important;
 | 
											
												
													
														|  |      height: 34px !important;
 |  |      height: 34px !important;
 | 
											
												
													
														|  |      &:hover {
 |  |      &:hover {
 | 
											
										
											
												
													
														|  | @@ -349,7 +444,7 @@
 | 
											
												
													
														|  |        top: 35px !important;
 |  |        top: 35px !important;
 | 
											
												
													
														|  |      }
 |  |      }
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
												
													
														|  | -  :deep(.ant-tabs-tabpane-active){
 |  | 
 | 
											
												
													
														|  | 
 |  | +  :deep(.ant-tabs-tabpane-active) {
 | 
											
												
													
														|  |      overflow: auto;
 |  |      overflow: auto;
 | 
											
												
													
														|  |    }
 |  |    }
 | 
											
												
													
														|  |  </style>
 |  |  </style>
 |