[Wip 0000] 修改了svg动画的实现方式，让svg、三维模型合并在一个页面里并根据需要显示

public/js/config.js

@@ -20,4 +20,5 @@ const VENT_PARAM = {
   gasControlMock : true, // 项目关于瓦斯自主调控，是否模拟演示， true: 真实调控； false 模拟调控
   historyIsMultiple: false, // 设备历史数据是否支持多选
   isShowQy: true, // 是否显示气压
+  is2DModel: false, // 是否尽最大可能使用2D模型
 }

src/main.ts

@@ -80,6 +80,7 @@ async function bootstrap() {
     History_Type: History_Type['type'],
     pageType: '',
     showReport: VENT_PARAM['showReport'],
+    is2DModel: VENT_PARAM['is2DModel'],
   });
 
   // 挂载应用

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -52,6 +52,7 @@ const { mouseDownFn } = useEvent();
 
 // 初始化左右摇摆动画
 const startAnimation = () => {
+  if (!model) return;
   // 定义鼠标点击事件
   model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
   model.canvasContainer?.addEventListener('pointerup', (event) => {
@@ -89,6 +90,7 @@ const startAnimation = () => {
 
 // 鼠标点击、松开事件
 const mouseEvent = (event) => {
+  if (!model) return;
   if (event.button == 0) {
     mouseDownFn(model, group, event, (intersects) => {
       if (fmType === 'fm1' && fm1) {
@@ -124,6 +126,7 @@ const mouseEvent = (event) => {
 };
 
 export const addMonitorText = (selectData) => {
+  if (!model) return;
   if (fmType === 'fm1' && fm1) {
     return fm1?.addMonitorText.call(fm1, selectData);
   } else if (fmType === 'fm2' && fm2) {
@@ -154,6 +157,7 @@ export const addMonitorText = (selectData) => {
 };
 
 export const deviceDetailCard = () => {
+  if (!model) return;
   if (fmType === 'fm1') {
     return fm1?.deviceDetailCard.call(fm1);
   } else if (fmType === 'fm3') {
@@ -166,6 +170,7 @@ export const deviceDetailCard = () => {
 };
 
 export const play = (handlerState, flag?) => {
+  if (!model) return;
   if (fmType === 'fm1' && fm1) {
     return fm1.play.call(fm1, handlerState, flag);
   } else if (fmType === 'fm2' && fm2) {
@@ -204,6 +209,7 @@ export const play = (handlerState, flag?) => {
 // };
 
 export function computePlay(data, maxarea, isFirst = false) {
+  if (!model) return;
   // 前门后窗  rearPresentValue1
   // 前门前窗 frontPresentValue1
   // 后门后窗 rearPresentValue2
@@ -256,6 +262,7 @@ export function computePlay(data, maxarea, isFirst = false) {
 
 // 切换风门类型
 export const setModelType = (type) => {
+  if (!model) return Promise.reject('model is null');
   fmType = type;
   return new Promise((resolve) => {
     // 暂停风门1动画
@@ -680,6 +687,7 @@ export const setModelType = (type) => {
 };
 
 export const initCameraCanvas = async (playerVal1) => {
+  if (!model) return;
   if (fmType === 'fm1' && fm1) {
     return await fm1.initCamera.call(fm1, playerVal1);
   } else if (fmType === 'fm2' && fm2) {
@@ -693,7 +701,6 @@ export const initCameraCanvas = async (playerVal1) => {
 
 export const mountedThree = (playerDom) => {
   // const { sysOrgCode } = useGlobSetting();
-  debugger;
   // const sysOrgCode = 'gsgszdek';
   return new Promise(async (resolve) => {
     model = new UseThree('#damper3D', '', '#deviceDetail');

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+  <div
+    v-if="!globalConfig.is2DModel"
+    class="bg"
+    style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden"
+  >
     <a-spin :spinning="loading" />
     <div id="deviceDetail" class="device-detail">
       <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
@@ -20,6 +24,9 @@
     </div>
     <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
   </div>
+  <div v-if="globalConfig.is2DModel" class="flex justify-center">
+    <GateSVG :manager="animationManager" />
+  </div>
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -113,9 +120,7 @@
         </div> -->
       </div>
     </div>
-    <div class="title-text">
-      {{ selectData.supplyAirAddr || selectData.strinstallpos || selectData.strname }}
-    </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`">
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
@@ -390,10 +395,14 @@
   import { defHttp } from '/@/utils/http/axios';
   import BarAndLine from '/@/components/chart/BarAndLine.vue';
   import HistoryTableChart from '../comment/HistoryTableChart.vue';
+  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+  import GateSVG from './components/gateSVG.vue';
+
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
-  const globalConfig = inject('globalConfig');
+  const globalConfig = inject<any>('globalConfig');
 
+  const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
   const MonitorDataTable = ref();
   let contrlValue = '';
@@ -985,6 +994,7 @@
   let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
   let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
+
   function monitorAnimation(selectData) {
     const timeScale = 0.005;
     // 带风窗 风窗动画
@@ -993,6 +1003,10 @@
     if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
+        // 反转播放前门动画即为播放关门动画
+        triggerAnimation('___L_0_Layer0_0_FILL', true);
+        // 播放后门动画即为播放开门动画
+        triggerAnimation('___R_0_Layer0_0_FILL', false);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
         frontDeviceState = 1;
@@ -1004,6 +1018,8 @@
     if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
+        triggerAnimation('___L_0_Layer0_0_FILL', true);
+        triggerAnimation('___R_0_Layer0_0_FILL', false);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
         frontDeviceState = 1;
@@ -1015,6 +1031,7 @@
     if (selectData.frontGateClose == '1' && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
       isFrontOpenRunning = false;
       if (frontDeviceState != 0) {
+        triggerAnimation('___L_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
         play(2, timeScale);
         frontDeviceState = 0;
@@ -1026,9 +1043,11 @@
       isRearOpenRunning = true;
 
       if (rearDeviceState != 1) {
-        rearDeviceState = 1;
+        triggerAnimation('___L_0_Layer0_0_FILL', false);
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(3, timeScale);
+        rearDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
       }
@@ -1037,9 +1056,11 @@
       isRearOpenRunning = true;
 
       if (rearDeviceState != 1) {
-        rearDeviceState = 1;
+        triggerAnimation('___L_0_Layer0_0_FILL', false);
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(3, timeScale);
+        rearDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
       }
@@ -1048,9 +1069,10 @@
     if (selectData.rearGateClose == '1' && selectData.rearGateOpen == '0' && isRearOpenRunning) {
       isRearOpenRunning = false;
       if (rearDeviceState != 0) {
-        rearDeviceState = 0;
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
         play(4, timeScale);
+        rearDeviceState = 0;
         backDoorIsOpen.value = false;
       }
     }
@@ -1059,9 +1081,11 @@
       isMidOpenRunning = true;
 
       if (midDeviceState != 1) {
-        midDeviceState = 1;
+        triggerAnimation('___L_0_Layer0_0_FILL', false);
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(8, timeScale);
+        midDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
       }
@@ -1071,9 +1095,11 @@
       isMidOpenRunning = true;
 
       if (midDeviceState != 1) {
-        midDeviceState = 1;
+        triggerAnimation('___L_0_Layer0_0_FILL', false);
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(8, timeScale);
+        midDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
       }
@@ -1082,9 +1108,10 @@
     if (selectData.midGateClose == '1' && selectData.midGateOpen == '0' && isMidOpenRunning) {
       isMidOpenRunning = false;
       if (midDeviceState != 0) {
-        midDeviceState = 0;
+        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
         play(9, timeScale);
+        midDeviceState = 0;
         backDoorIsOpen.value = false;
       }
     }
@@ -1138,26 +1165,28 @@
     const { query } = unref(currentRoute);
     if (query['deviceType']) deviceType.value = query['deviceType'] as string;
     modelList.value = await getDictItems('gateModel');
-    loading.value = true;
-    const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
-    debugger;
-    mountedThree(playerDom)
-      .then(async () => {
-        if (sysOrgCode != 'zmhjhzmy') {
-          await getMonitor(true);
-          loading.value = false;
-        } else {
-          // 韩咀无风门设备,只有报警历史数据,无其他数据
-          setModelType('fm1').then(async () => {
+    if (globalConfig.is2DModel) {
+      await getMonitor(true);
+    } else {
+      loading.value = true;
+      const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
+
+      mountedThree(playerDom)
+        .then(async () => {
+          if (sysOrgCode != 'zmhjhzmy') {
+            await getMonitor(true);
             loading.value = false;
-            dataSource.value = [];
-            addMonitorText(selectData);
-          });
-        }
-      })
-      .catch(() => {
-        debugger;
-      });
+          } else {
+            // 韩咀无风门设备,只有报警历史数据,无其他数据
+            setModelType('fm1').then(async () => {
+              loading.value = false;
+              dataSource.value = [];
+              addMonitorText(selectData);
+            });
+          }
+        })
+        .catch(() => {});
+    }
   });
 
   onBeforeUnmount(() => {

src/views/vent/monitorManager/gateMonitor/indexSVG.vue

@@ -1,1161 +0,0 @@
-<template>
-  <div class="flex justify-center">
-    <GateSVG :manager="animationManager" />
-  </div>
-  <div class="scene-box">
-    <div class="top-box">
-      <div class="top-center row">
-        <div class="button-box" @click="triggerAnimation(['___L_0_Layer0_0_FILL', '___R_0_Layer0_0_FILL'], false)">开门</div>
-        <div class="button-box" @click="triggerAnimation(['___L_0_Layer0_0_FILL', '___R_0_Layer0_0_FILL'], true)">关门</div>
-      </div>
-      <!-- 控制模式 -->
-      <div class="top-right row" v-if="hasPermission('btn:remote')">
-        <!--  -->
-        <div class="vent-flex-m row" v-if="selectData.contrlMod == 'loopCtrl' && modelList.length > 0">
-          <div class="control-title">控制模式：</div>
-          <a-radio-group v-model:value="selectData.autoRoManual">
-            <template v-for="(item, index) in modelList" :key="index">
-              <a-radio :value="item.value" :disabled="true">{{ item.text }}</a-radio>
-            </template>
-          </a-radio-group>
-          <div class="button-box" @click="playAnimation(7)">切换模式</div>
-        </div>
-        <!-- 控制指令是多个，每个状态需要下发单独的指令 -->
-        <div class="vent-flex-m row" v-else-if="selectData.contrlMod == 'codeCtrl' && modelList.length > 0">
-          <div class="control-title">控制模式：</div>
-          <a-radio-group v-model:value="selectData.autoRoManual">
-            <template v-for="(item, index) in modelList" :key="index">
-              <a-radio :value="item.value" :disabled="true">{{ item.text }}</a-radio>
-            </template>
-          </a-radio-group>
-          <div class="button-box" v-for="(item, index) in modelList" @click="playAnimation(7, item.value)" :key="index">{{ item.text }}</div>
-        </div>
-        <!-- 济南嘉鸿远程、就地、自动控制，自动切换，点位为true就是选中状态 -->
-        <div class="vent-flex-m row" v-else-if="selectData.contrlMod == 'jnjhCtrl' && modelList.length > 0">
-          <div class="control-title">控制模式：</div>
-          <a-radio v-model:checked="selectData['autoRoManual']" :disabled="true">远程</a-radio>
-          <a-radio v-model:checked="selectData['autoRoManual1']" :disabled="true">自动</a-radio>
-          <a-radio v-model:checked="selectData['autoRoManual2']" :disabled="true">手动</a-radio>
-          <div class="button-box" @click="playAnimation(7)">模式切换</div>
-        </div>
-        <div class="vent-flex-m row" v-else-if="modelList.length > 0">
-          <div class="control-title">控制模式：</div>
-          <a-radio-group v-model:value="selectData.autoRoManual">
-            <template v-for="(item, index) in modelList" :key="index">
-              <a-radio :value="item.value" :disabled="true">{{ item.text }}</a-radio>
-            </template>
-          </a-radio-group>
-          <div class="button-box" v-for="(item, index) in modelList" @click="playAnimation(7, item.value)" :key="index">{{ item.text }}</div>
-        </div>
-
-        <!-- <div class="run-type row">
-          <div class="control-title">运行状态：</div>
-          <a-radio-group v-model:value="selectData.runRoRecondition">
-            <a-radio :value="`0`">检修</a-radio>
-            <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`">
-        <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
-          <a-tab-pane v-if="!hasPermission('show:noMonitor')" key="1" tab="实时监测">
-            <MonitorTable
-              v-if="activeKey === '1'"
-              ref="MonitorDataTable"
-              class="monitor-table"
-              :columnsType="deviceType"
-              :isShowActionColumn="true"
-              :dataSource="dataSource"
-              design-scope="gate-monitor"
-              @selectRow="getSelectRow"
-              :scroll="{ y: scroll.y - 40 }"
-              title="风门监测"
-              :isShowPagination="true"
-            >
-              <template #filterCell="{ column, record }">
-                <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
-                  >正在运行</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1" color="default"
-                  >关闭</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'" color="#46C66F"
-                  >打开</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'" color="#FF0000"
-                  >点位异常</a-tag
-                >
-                <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
-                  >正在运行</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'" color="default"
-                  >关闭</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'" color="#46C66F"
-                  >打开</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'" color="#FF0000"
-                  >点位异常</a-tag
-                >
-                <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
-                  >正在运行</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
-                  >关闭</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
-                  >打开</a-tag
-                >
-                <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
-                  >点位异常</a-tag
-                >
-                <template v-if="column.dataIndex === 'ndoortype'">
-                  <span>{{ render.renderDictText(record.ndoortype, 'ndoortype') }}</span>
-                </template>
-                <template v-if="column.dataIndex === 'doorUse'">
-                  <span>{{ render.renderDictText(record.doorUse, 'doorUse') }}</span>
-                </template>
-                <template v-else-if="column.dataIndex === 'warnLevel'">
-                  <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
-                  <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
-                  <a-tag v-else color="green">正常</a-tag>
-                </template>
-                <a-tag v-else-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' ? '#f00' : 'green'">{{
-                  record.netStatus == '0' ? '断开' : '连接'
-                }}</a-tag>
-              </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" v-if="activeKey === '2'">
-              <DeviceEcharts chartsColumnsType="gate_chart" xAxisPropType="strname" :dataSource="dataSource" height="100%"
-                :chartsColumns="chartsColumns" :device-list-api="list" device-type="gate" />
-            </div>
-          </a-tab-pane> -->
-          <a-tab-pane v-if="!hasPermission('show:noHistory')" key="3" tab="历史数据">
-            <div class="tab-item" v-if="activeKey === '3'">
-              <HistoryTable :columnsType="deviceType" :device-type="deviceType" designScope="gate-history" :scroll="scroll">
-                <template #filterCell="{ column, record }">
-                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == '0'" color="red"
-                    >正在运行</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '0' && record.frontGateClose == 1" color="default"
-                    >关闭</a-tag
-                  >
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '0'"
-                    color="#46C66F"
-                    >打开</a-tag
-                  >
-                  <a-tag
-                    v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == '1' && record.frontGateClose == '1'"
-                    color="#FF0000"
-                    >点位异常</a-tag
-                  >
-                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '0'" color="red"
-                    >正在运行</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '0' && record.rearGateClose == '1'" color="default"
-                    >关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '0'" color="#46C66F"
-                    >打开</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == '1' && record.rearGateClose == '1'" color="#FF0000"
-                    >点位异常</a-tag
-                  >
-                  <a-tag v-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == '0'" color="red"
-                    >正在运行</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '0' && record.midGateClose == 1" color="default"
-                    >关闭</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '0'" color="#46C66F"
-                    >打开</a-tag
-                  >
-                  <a-tag v-else-if="column.dataIndex === 'midGateOpen' && record.midGateOpen == '1' && record.midGateClose == '1'" color="#FF0000"
-                    >点位异常</a-tag
-                  >
-                  <template v-if="column.dataIndex === 'ndoortype'">
-                    <span v-if="record.ndoortype == '0'">气动风门</span>
-                    <span v-else color="default">液压风门</span>
-                  </template>
-                  <template v-if="column.dataIndex === 'doorUse'">
-                    <span v-if="record.doorUse == 1" color="default">行车风门</span>
-                    <span v-else-if="record.doorUse == 2">行人风门</span>
-                    <span v-else-if="record.doorUse == 3">短路风门</span>
-                    <span v-else-if="record.doorUse == 4">行车/短路风门</span>
-                  </template>
-                  <template v-else-if="column.dataIndex === 'warnLevel'">
-                    <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
-                    <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
-                    <a-tag v-else color="green">正常</a-tag>
-                  </template>
-                </template>
-              </HistoryTable>
-            </div>
-          </a-tab-pane>
-          <a-tab-pane v-if="!hasPermission('show:noAlarm')" key="4" tab="报警历史">
-            <div class="tab-item" v-if="activeKey === '4'">
-              <template v-if="sysOrgCode != 'zmhjhzmy'">
-                <AlarmHistoryTable
-                  columns-type="alarm"
-                  :device-type="deviceType"
-                  :device-list-api="getTableList"
-                  designScope="alarm-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
-                    >
-                    <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                      record.netStatus == '0' ? '断开' : '连接'
-                    }}</a-tag>
-                  </template>
-                </AlarmHistoryTable>
-              </template>
-              <template v-else>
-                <AlarmHistoryTableHj :scroll="scroll" />
-              </template>
-            </div>
-          </a-tab-pane>
-          <a-tab-pane v-if="!hasPermission('show:noHandleHistory')" key="5" tab="操作历史">
-            <div class="tab-item" v-if="activeKey === '5'">
-              <HandlerHistoryTable
-                columns-type="operator_history"
-                :device-type="deviceType"
-                :device-list-api="getTableList"
-                designScope="operator_history"
-                :scroll="scroll"
-              />
-            </div>
-          </a-tab-pane>
-          <!-- v-if="sysOrgCode === 'sdmtjtswmk'" -->
-          <a-tab-pane v-if="sysOrgCode === 'sdmtjtswmk'" key="2" tab="风门轴反馈推力曲线">
-            <div class="tab-item" v-if="activeKey === '2'">
-              <!-- <div class="history-chart">
-                <BarAndLine
-                  :charts-columns="chartsColumns"
-                  chartsType="history"
-                  :option="Option"
-                  :data-source="sharedData"
-                  height="290px"
-                  :x-axis-prop-type="stationType !== 'redis' ? 'ttime' : 'time'"
-                />
-              </div> -->
-              <HistoryTableChart
-                chartsColumnsType="gate_chart"
-                :dataSource="sharedData"
-                height="100%"
-                :chartsColumns="chartsColumns"
-                device-type="gate"
-                :is-show-child-type="true"
-              />
-            </div>
-          </a-tab-pane>
-        </a-tabs>
-      </dv-border-box8>
-    </div>
-  </div>
-  <div ref="playerRef" style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 300px; height: 280px; margin: auto"> </div>
-  <LivePlayer
-    id="fm-player1"
-    style="height: 220px; width: 300px; position: absolute; top: 0px; z-index: -1"
-    ref="player1"
-    :videoUrl="flvURL1()"
-    muted
-    live
-    loading
-    controls
-  />
-  <HandleModal
-    v-if="!globalConfig?.simulatedPassword"
-    :modal-is-show="modalIsShow"
-    :modal-title="modalTitle"
-    :modal-type="modalType"
-    @handle-ok="handleOK"
-    @handle-cancel="handleCancel"
-  />
-  <DeviceBaseInfo @register="registerModal" :device-type="selectData['deviceType']" />
-</template>
-
-<script setup lang="ts">
-  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref } from 'vue';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import HistoryTable from '../comment/HistoryTable.vue';
-  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-  import AlarmHistoryTableHj from './components/AlarmHistoryTableHj.vue';
-  import GateSVG from './gateSVG.vue';
-  import HandleModal from './modal.vue';
-  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from './gate.threejs';
-  import { deviceControlApi } from '/@/api/vent/index';
-  import { message } from 'ant-design-vue';
-  import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
-  import { chartsColumns } from './gate.data';
-  import lodash from 'lodash';
-  import { setDivHeight } from '/@/utils/event';
-  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-  import { useRouter } from 'vue-router';
-  import LivePlayer from '@liveqing/liveplayer-v3';
-  import { useModal } from '/@/components/Modal';
-  import { useCamera } from '/@/hooks/system/useCamera';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { getDictItems } from '/@/api/common/api';
-  import { render } from '/@/utils/common/renderUtils';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { getDictItemsByCode } from '/@/utils/dict';
-  import { defHttp } from '/@/utils/http/axios';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import HistoryTableChart from '../comment/HistoryTableChart.vue';
-  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
-  const { hasPermission } = usePermission();
-  const { sysOrgCode } = useGlobSetting();
-  const globalConfig = inject('globalConfig');
-
-  const { animationManager, triggerAnimation } = useSvgAnimation();
-
-  const aniIndex = ref(3);
-  const { currentRoute } = useRouter();
-  const MonitorDataTable = ref();
-  let contrlValue = '';
-  const playerRef = ref();
-  const deviceType = ref('gate');
-  const activeKey = ref('1'); // tab
-  const loading = ref(false);
-  const stationType = ref('plc1');
-  const scroll = reactive({
-    y: 230,
-  });
-  const modelList = ref<{ text: string; value: string }[]>([]);
-  const frontDoorIsOpen = ref(false); //前门是否开启
-  const backDoorIsOpen = ref(false); //后门是否开启
-  const midDoorIsOpen = ref(false); //中间门是否开启
-
-  const modalIsShow = ref<boolean>(false); // 是否显示模态框
-  const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
-  const modalType = ref(''); // 模态框内容显示类型，设备操作类型
-
-  const selectRowIndex = ref(-1); // 选中行
-  const dataSource = ref([]);
-  const sharedData = ref([]);
-  const deviceBaseList = ref([]); // 设备基本信息
-  const updateSharedData = (data) => {
-    sharedData.value = data;
-  };
-  const Option = {
-    grid: {
-      top: '20%',
-      left: '5%',
-      right: '5%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    toolbox: {
-      feature: null,
-    },
-  };
-  const [registerModal, { openModal, closeModal }] = useModal();
-
-  const { getCamera, removeCamera } = useCamera();
-
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
-    if (activeKeyVal == 1) {
-      nextTick(() => {
-        if (MonitorDataTable.value) MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-      });
-    }
-  };
-
-  const initData = {
-    deviceID: '',
-    deviceType: '',
-    strname: '',
-    frontRearDP: '-', //压差
-    // sourcePressure: '-', //气源压力
-    runRoRecondition: null,
-    autoRoManual: null,
-    netStatus: '0', //通信状态
-    frontGateOpen: '0',
-    frontGateClose: '1',
-    rearGateOpen: '0',
-    rearGateClose: '1',
-    midGateOpen: '0',
-    midGateClose: '1',
-    fault: '气源压力超限',
-    masterComputer: 0,
-    frontGateOpenCtrl: false,
-    rearGateOpenCtrl: false,
-    cameras: [],
-  };
-
-  // 监测数据
-  const selectData = reactive(lodash.cloneDeep(initData));
-
-  const flvURL1 = () => {
-    // return ''
-    return `/video/gate.mp4`;
-  };
-
-  function deviceEdit(e: Event, type: string, record) {
-    e.stopPropagation();
-    openModal(true, {
-      type,
-      deviceId: record['deviceID'],
-    });
-  }
-  // 获取设备基本信息列表
-  function getDeviceBaseList() {
-    getTableList({ pageSize: 1000 }).then((res) => {
-      deviceBaseList.value = res.records;
-    });
-  }
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  async function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = await setTimeout(
-        async () => {
-          const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-          if (res.msgTxt && res.msgTxt[0]) {
-            dataSource.value = res.msgTxt[0].datalist || [];
-            dataSource.value.forEach((data: any) => {
-              const readData = data.readData;
-              data = Object.assign(data, readData);
-            });
-            if (dataSource.value.length > 0 && selectRowIndex.value == -1 && MonitorDataTable.value) {
-              // 初始打开页面
-              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']]);
-              }
-            }
-            Object.assign(selectData, dataSource.value[selectRowIndex.value]);
-            if (selectData.contrlMod == 'jnjhCtrl') {
-              selectData['autoRoManual'] = selectData['autoRoManual'] == 1 ? true : false;
-              selectData['autoRoManual1'] = selectData['autoRoManual1'] == 1 ? true : false;
-              selectData['autoRoManual2'] = selectData['autoRoManual2'] == 1 ? true : false;
-            }
-            monitorAnimation(selectData);
-            if (timer) {
-              timer = null;
-            }
-            getMonitor();
-          }
-        },
-        flag ? 0 : 1000
-      );
-    }
-  }
-
-  // 切换检测数据
-  async function getSelectRow(selectRow, index) {
-    if (!selectRow) return;
-    loading.value = true;
-    selectRowIndex.value = index;
-
-    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-    Object.assign(selectData, initData, selectRow, baseData);
-    isFrontOpenRunning = false; //开关门动作是否在进行
-    isRearOpenRunning = false; //开关门动作是否在进行
-    isMidOpenRunning = false; //开关门动作是否在进行
-    frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-    rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-    midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-
-    let type;
-    const dictCodes = getDictItemsByCode('gateStyle');
-    if (selectData && dictCodes && dictCodes.length > 0) {
-      const gateStyle = selectData['gateStyle'];
-      switch (gateStyle) {
-        case 'gate_qd':
-          type = 'fm3';
-          break;
-        case 'fmtl3':
-          type = 'fmThreeTl';
-          break;
-        case 'fmSs':
-          type = 'fmTwoSs';
-          break;
-        case 'fm_fc':
-          type = 'fmWindow';
-          break;
-        case 'fmXr':
-          type = 'fmXr';
-          break;
-        case 'fmYy':
-          type = 'fm1';
-          break;
-        case 'fmSs3':
-          type = 'fm2';
-          break;
-        case 'fm_fc_hjg':
-          type = 'fmWindowHjg';
-          break;
-        case 'fm_fc_zhq':
-          type = 'fmWindowZhq';
-          break;
-        default:
-          type = gateStyle;
-      }
-    } else {
-      type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
-      if (selectData['doorUse'] == 2) {
-        type = 'fmXr';
-      } else if (selectData.ndoorcount == '3' || selectData.deviceType == 'gate_nomal3') {
-        type = 'fmThreeTl';
-      } else {
-        if (selectData.deviceType == 'gate_ss') {
-          type = 'fm2';
-        } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
-          type = 'fm3';
-        } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
-          type = 'fmTwoSs';
-        } else if (selectData.deviceType == 'gate_tj') {
-          type = 'fmWindow';
-        } else {
-          type = 'fm1'; // 液压
-        }
-      }
-    }
-
-    await getCamera(selectRow.deviceID, playerRef.value);
-  }
-
-  // 播放动画
-  function playAnimation(handlerState, data: any = null) {
-    const value = data;
-    switch (handlerState) {
-      case 1: // 打开前门
-        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-          modalTitle.value = '打开前门';
-          modalType.value = '1';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('前门已经打开或正在打开,请勿重新操作');
-          message.warning('没有监测到前门关到位,无法进行指令下发操作');
-        }
-        break;
-      case 2: // 关闭前门
-        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-          modalTitle.value = '关闭前门';
-          modalType.value = '2';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('前门已经关闭或正在关闭,请勿重新操作');
-          message.warning('没有监测到前门开到位,无法进行指令下发操作');
-        }
-        break;
-      case 3: // 打开后门
-        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-          modalTitle.value = '打开后门';
-          modalType.value = '3';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('后门已经打开或正在打开,请勿重新操作');
-          message.warning('没有监测到后门关到位,无法进行指令下发操作');
-        }
-        break;
-      case 4: // 关闭后门
-        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-          modalTitle.value = '关闭后门';
-          modalType.value = '4';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('后门已经关闭或正在关闭,请勿重新操作');
-          message.warning('没有监测到后门开到位,无法进行指令下发操作');
-        }
-        break;
-      case 8: // 打开中间门
-        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
-          modalTitle.value = '打开中间门';
-          modalType.value = '8';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('后门已经打开或正在打开,请勿重新操作');
-          message.warning('没有监测到中间门关到位,无法进行指令下发操作');
-        }
-        break;
-      case 9: // 关闭中间门
-        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
-          modalTitle.value = '关闭中间门';
-          modalType.value = '9';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('后门已经关闭或正在关闭,请勿重新操作');
-          message.warning('没有监测到中间门开到位,无法进行指令下发操作');
-        }
-        break;
-      case 5: // 打开前后门
-        if (
-          selectData.frontGateOpen == '0' &&
-          selectData.frontGateClose == '1' &&
-          selectData.rearGateOpen == '0' &&
-          selectData.rearGateClose == '1'
-        ) {
-          modalTitle.value = '打开前后门';
-          modalType.value = '5';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('前后门已经打开或正在打开,请勿重新操作');
-          message.warning('没有监测到前门、后门关到位,无法进行指令下发操作');
-        }
-        break;
-      case 6: // 关闭前后门
-        if (
-          selectData.frontGateOpen == '1' &&
-          selectData.frontGateClose == '0' &&
-          selectData.rearGateOpen == '1' &&
-          selectData.rearGateClose == '0'
-        ) {
-          modalTitle.value = '关闭前后门';
-          modalType.value = '6';
-          modalIsShow.value = true;
-        } else {
-          // message.warning('前后门已经关闭或正在关闭,请勿重新操作');
-          message.warning('没有监测到前门、后门开到位,无法进行指令下发操作');
-        }
-        break;
-
-      case 7: // 控制模式切换
-        modalTitle.value = '控制模式切换';
-        modalType.value = '7';
-        modalIsShow.value = true;
-        break;
-
-      case 10: // 风窗控制
-        modalTitle.value = 'A窗控制';
-        modalType.value = '10';
-        modalIsShow.value = true;
-        break;
-
-      case 11: // 风窗控制
-        modalTitle.value = 'B窗控制';
-        modalType.value = '11';
-        modalIsShow.value = true;
-        break;
-      case 12: // 风窗控制
-        modalTitle.value = 'C窗控制';
-        modalType.value = '12';
-        modalIsShow.value = true;
-        break;
-      case 13: // 风窗控制
-        modalTitle.value = 'D窗控制';
-        modalType.value = '13';
-        modalIsShow.value = true;
-        break;
-    }
-
-    if (globalConfig?.simulatedPassword) {
-      handleOK('', handlerState + '');
-    }
-    contrlValue = value;
-  }
-  // 保德缺打开状态
-
-  // function playAnimation(handlerState, data: any = null) {
-  //   const value = data;
-  //   switch (handlerState) {
-  //     case 1: // 打开前门
-  //       modalTitle.value = '打开前门';
-  //       modalType.value = '1';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 2: // 关闭前门
-  //       modalTitle.value = '关闭前门';
-  //       modalType.value = '2';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 3: // 打开后门
-  //       modalTitle.value = '打开后门';
-  //       modalType.value = '3';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 4: // 关闭后门
-  //       modalTitle.value = '关闭后门';
-  //       modalType.value = '4';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 8: // 打开中间门
-  //       modalTitle.value = '打开中间门';
-  //       modalType.value = '8';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 9: // 关闭中间门
-  //       modalTitle.value = '关闭中间门';
-  //       modalType.value = '9';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 5: // 打开前后门
-  //       modalTitle.value = '打开前后门';
-  //       modalType.value = '5';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 6: // 关闭前后门
-  //       modalTitle.value = '关闭前后门';
-  //       modalType.value = '6';
-  //       modalIsShow.value = true;
-  //       break;
-
-  //     case 7: // 控制模式切换
-  //       modalTitle.value = '控制模式切换';
-  //       modalType.value = '7';
-  //       modalIsShow.value = true;
-  //       break;
-  //     case 10: // 风窗控制
-  //       modalTitle.value = '风窗控制';
-  //       modalType.value = '10';
-  //       modalIsShow.value = true;
-  //       break;
-  //   }
-
-  //   if (globalConfig?.simulatedPassword) {
-  //     handleOK('', handlerState + '');
-  //   }
-  //   contrlValue = value;
-  // }
-
-  function handleOK(passWord, handlerState, value?) {
-    if (!passWord && !globalConfig?.simulatedPassword) {
-      message.warning('请输入密码');
-      return;
-    }
-    if (isOpenRunning) {
-      message.warning('风门正在运行。。。');
-      modalIsShow.value = false;
-      return;
-    }
-    const data = {
-      deviceid: selectData.deviceID,
-      devicetype: selectData.deviceType,
-      paramcode: '',
-      value: contrlValue,
-      password: passWord || globalConfig?.simulatedPassword,
-      masterComputer: selectData.masterComputer,
-    };
-    let handler = () => {};
-    debugger;
-
-    switch (handlerState) {
-      case '1': // 打开前门
-        if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '1') {
-          handler = () => {
-            frontDoorIsOpen.value = true;
-          };
-          data.paramcode = 'frontGateOpen_S';
-        } else {
-          message.warning('前门已打开。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '2': // 关闭前门
-        if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0') {
-          handler = () => {
-            frontDoorIsOpen.value = false;
-          };
-          data.paramcode = 'frontGateClose_S';
-        } else {
-          message.warning('前门已关闭。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '3': // 打开后门
-        if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '1') {
-          handler = () => {
-            backDoorIsOpen.value = true;
-          };
-          data.paramcode = 'rearGateOpen_S';
-        } else {
-          message.warning('后门已打开。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '4': // 关闭后门
-        if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0') {
-          handler = () => {
-            backDoorIsOpen.value = false;
-          };
-          data.paramcode = 'rearGateClose_S';
-        } else {
-          message.warning('后门已关闭。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '8': // 打开中间门
-        if (selectData.midGateOpen == '0' && selectData.midGateClose == '1') {
-          handler = () => {
-            midDoorIsOpen.value = true;
-          };
-          data.paramcode = 'midGateOpen_S';
-        } else {
-          message.warning('中间风门已打开。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '9': // 关闭中间门
-        if (selectData.midGateOpen == '1' && selectData.midGateClose == '0') {
-          handler = () => {
-            midDoorIsOpen.value = false;
-          };
-          data.paramcode = 'midGateClose_S';
-        } else {
-          message.warning('中间风门已关闭。。。');
-          modalIsShow.value = false;
-        }
-        break;
-      case '5': // 打开前后门
-        if (
-          selectData.frontGateOpen == '0' &&
-          selectData.frontGateClose == '1' &&
-          selectData.rearGateOpen == '0' &&
-          selectData.rearGateClose == '1'
-        ) {
-          handler = () => {
-            frontDoorIsOpen.value = true;
-            backDoorIsOpen.value = true;
-          };
-          data.paramcode = 'sameTimeOpen';
-        }
-        break;
-      case '6': // 关闭前后门
-        if (
-          selectData.frontGateOpen == '1' &&
-          selectData.frontGateClose == '0' &&
-          selectData.rearGateOpen == '1' &&
-          selectData.rearGateClose == '0'
-        ) {
-          handler = () => {
-            frontDoorIsOpen.value = false;
-            backDoorIsOpen.value = false;
-          };
-          data.paramcode = 'sameTimeClose';
-        }
-        break;
-      case '7': // 远程与就地
-        if (selectData.contrlMod == 'codeCtrl') {
-          if (contrlValue == '1') {
-            data.paramcode = 'autoRoManualControl1';
-          } else if (contrlValue == '0') {
-            data.paramcode = 'autoRoManualControl2';
-          } else {
-            data.paramcode = 'autoRoManualControl0';
-          }
-          data.value = '';
-          selectData.autoRoManual = null;
-        } else if (selectData.contrlMod == 'loopCtrl' || selectData.contrlMod == 'jnjhCtrl') {
-          data.paramcode = 'autoRoManualControl';
-          data.value = '';
-          selectData.autoRoManual = null;
-        } else {
-          data.paramcode = 'autoRoManualControl';
-          data.value = contrlValue;
-          selectData.autoRoManual = null;
-        }
-        break;
-      case '10': // 前(A)窗控制
-        data.paramcode = 'frontSetValue1';
-        data.value = value;
-        break;
-      case '11': // 后(B)窗控制
-        data.paramcode = 'frontSetValue2';
-        data.value = value;
-        break;
-      case '12': // 后(B)窗控制
-        data.paramcode = 'rearSetValue1';
-        data.value = value;
-        break;
-      case '13': // 后(B)窗控制
-        data.paramcode = 'rearSetValue2';
-        data.value = value;
-        break;
-    }
-
-    if (data.paramcode) {
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
-        if (res.success) {
-          modalIsShow.value = false;
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
-          } else {
-            message.success('指令已下发成功！');
-          }
-        } else {
-          message.error(res.message);
-        }
-      });
-    }
-  }
-  let isOpenRunning = false; //开关门动作是否在进行
-  /** 开关门动画调用 */
-  let isFrontOpenRunning = false; //开关门动作是否在进行
-  // let isFrontCloseRunning = false; //开关门动作是否在进行
-  let isRearOpenRunning = false; //开关门动作是否在进行
-  // let isRearCloseRunning = false; //开关门动作是否在进行
-  let isMidOpenRunning = false; //中间门动作是否在进行
-  // let isMidCloseRunning = false; //中间门动作是否在进行
-  // 0 关闭 1 正在打开 2 打开 3正在关闭
-  let frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-  let rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-  let midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-  function monitorAnimation(selectData) {
-    const timeScale = 0.005;
-    // 带风窗 风窗动画
-    if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
-      isFrontOpenRunning = true;
-      if (frontDeviceState != 1) {
-        // 反转播放前门动画即为播放关门动画
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
-        // 播放后门动画即为播放开门动画
-        triggerAnimation('___R_0_Layer0_0_FILL', false);
-        frontDeviceState = 1;
-        frontDoorIsOpen.value = false;
-        backDoorIsOpen.value = true;
-      }
-    }
-
-    if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
-      isFrontOpenRunning = true;
-      if (frontDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
-        triggerAnimation('___R_0_Layer0_0_FILL', false);
-        frontDeviceState = 1;
-        frontDoorIsOpen.value = false;
-        backDoorIsOpen.value = true;
-      }
-    }
-
-    if (selectData.frontGateClose == '1' && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
-      isFrontOpenRunning = false;
-      if (frontDeviceState != 0) {
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
-        frontDeviceState = 0;
-        frontDoorIsOpen.value = false;
-        // backDoorIsOpen.value = false
-      }
-    }
-    if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
-      isRearOpenRunning = true;
-
-      if (rearDeviceState != 1) {
-        rearDeviceState = 1;
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-        frontDoorIsOpen.value = true;
-      }
-    }
-    if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
-      isRearOpenRunning = true;
-
-      if (rearDeviceState != 1) {
-        rearDeviceState = 1;
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-        frontDoorIsOpen.value = true;
-      }
-    }
-
-    if (selectData.rearGateClose == '1' && selectData.rearGateOpen == '0' && isRearOpenRunning) {
-      isRearOpenRunning = false;
-      if (rearDeviceState != 0) {
-        rearDeviceState = 0;
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-      }
-    }
-
-    if (selectData.midGateOpen == '1' && selectData.midGateClose == '0' && !isMidOpenRunning) {
-      isMidOpenRunning = true;
-
-      if (midDeviceState != 1) {
-        midDeviceState = 1;
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-        frontDoorIsOpen.value = true;
-      }
-    }
-
-    if (selectData.midGateOpen == '0' && selectData.midGateClose == '0' && !isMidOpenRunning) {
-      isMidOpenRunning = true;
-
-      if (midDeviceState != 1) {
-        midDeviceState = 1;
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-        frontDoorIsOpen.value = true;
-      }
-    }
-
-    if (selectData.midGateClose == '1' && selectData.midGateOpen == '0' && isMidOpenRunning) {
-      isMidOpenRunning = false;
-      if (midDeviceState != 0) {
-        midDeviceState = 0;
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
-        backDoorIsOpen.value = false;
-      }
-    }
-  }
-
-  function handleCancel() {
-    modalIsShow.value = false;
-    modalTitle.value = '';
-    modalType.value = '';
-  }
-
-  // // 远程、就地切换
-  // function changeType() {
-  //   const data = {
-  //     deviceid: selectData.deviceID,
-  //     devicetype: selectData.deviceType,
-  //     paramcode: 'autoRoManualControl',
-  //     value: selectData.autoRoManual,
-  //   };
-  //   deviceControlApi(data).then(() => {
-  //     if (globalConfig.History_Type == 'remote') {
-  //       message.success('指令已下发至生产管控平台成功！');
-  //     } else {
-  //       message.success('指令已下发成功！');
-  //     }
-  //   });
-  // }
-
-  // async function getDataSource() {
-  //   dataSource.value = [];
-  //   const params = await resetFormParam();
-  //   if (stationType.value !== 'redis') {
-  //     const result = await defHttp.get({ url: '/safety/ventanalyMonitorData/listdays', params: params });
-  //     if (result['datalist']['records'].length > 0) {
-  //       dataSource.value = result['datalist']['records'].map((item: any) => {
-  //         return Object.assign(item, item['readData']);
-  //       });
-  //     } else {
-  //       dataSource.value = [];
-  //     }
-  //   } else {
-  //     const result = await defHttp.post({ url: '/monitor/history/getHistoryData', params: params });
-  //     dataSource.value = result['records'] || [];
-  //   }
-  // }
-  onMounted(async () => {
-    const { query } = unref(currentRoute);
-    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-    modelList.value = await getDictItems('gateModel');
-    await getMonitor(true);
-  });
-
-  onBeforeUnmount(() => {
-    getDeviceBaseList();
-  });
-
-  onUnmounted(() => {
-    removeCamera();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
-</script>
-
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  .scene-box {
-    .bottom-tabs-box {
-      height: 350px;
-    }
-  }
-  .button-box {
-    border: none !important;
-    height: 34px !important;
-
-    &:hover {
-      background: var(--vent-device-manager-control-btn-hover) !important;
-    }
-
-    &::before {
-      height: 27px !important;
-      background: var(--vent-device-manager-control-btn) !important;
-    }
-
-    &::after {
-      top: 35px !important;
-    }
-  }
-
-  .animate-left-door-open {
-    // transform-style: preserve-3d;
-    // transform: rotateY(-75deg);
-    // transform-origin: left center;
-    transition: transform 3s;
-    transform: matrix(1.177337646484375, 0.4514617919921875, 0, 1, 878.25, 593.55);
-    // animation: LeftDoorAnimation 3s forwards;
-  }
-  .animate-left-door-close {
-    transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 874.05, 582.8);
-    // animation: LeftDoorAnimation 3s reverse;
-  }
-  .animate-right-door-open {
-    transition: transform 3s;
-    transform: matrix(1.208465576171875, 0.42523193359375, 0, 1, 916.1, 560.8);
-    // animation: RightDoorAnimation 3s forwards;
-  }
-  .animate-right-door-close {
-    transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 920.85, 570.6);
-    // animation: RightDoorAnimation 3s forwards reverse;
-  }
-
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-    background: #4288a444;
-  }
-  :deep(.zxm-radio-disabled + span) {
-    color: var(--vent-font-color) !important;
-  }
-  :deep(.zxm-radio-disabled .zxm-radio-inner::after) {
-    background-color: #127cb5 !important;
-  }
-  :deep(.@{ventSpace}-picker-datetime-panel) {
-    height: 200px !important;
-    overflow-y: auto !important;
-  }
-</style>