README.md

@@ -180,3 +180,337 @@ function themifyScript(
   return [varstr, strcopy];
 }
 ```
+
+### SVG模型动画开发
+
+关于svg二维模型动画开发，核心方法之一位置为/mky-vent-base/src/hooks/vent/useSvgAnimation.ts，说明如下：
+
+1、设计团队提供svg图组，通常是一组svg图片，每张图片对应一个动画帧
+
+2、将图组放入指定脚本的工作区内生成可用的vue组件，脚本可见项目的README文档，然后自行新建文件、复制代码、安装依赖并运行
+
+3、将可用的vue组件引入到需要使用动画的页面中，并使用useSvgAnimation钩子进行动画控制，例如`<SVGAnimation :manager="animationManager" />`
+
+4、通过浏览器的元素检查功能，找到svg对应的group，复制group的id，并使用该id进行动画控制
+
+使用示例：
+
+```vue
+<template>
+  <SVGAni :manager="animationManager" />
+</template>
+<script setup>
+  import SVGAni from 'path/to/SVGAnimation.vue';
+  import useSvgAnimation from 'path/to/useSvgAnimation.ts';
+
+  const { animationManager，triggerAnimation } = useSvgAnimation();
+
+  onMounted(() => {
+    // 根据情况触发动画
+    if (condition) {
+      triggerAnimation('id', false);
+      } else {
+      triggerAnimation('id', true);
+      }
+  })
+</script>
+```
+
+上述的生成组件的脚本如下：
+
+```javascript
+/**
+ * 使用方式：node index.js --keys=key1,key2
+ *
+ * 输出位置：当前目录下的 workspace/animated-component.vue 文件
+ */
+const fs = require('fs');
+const path = require('path');
+const { parseString } = require('xml2js');
+const { Builder } = require('xml2js');
+
+/**
+ * 解析命令行参数
+ * 支持 --keys=key1,key2 格式的参数
+ * @returns {Object} 包含解析后参数的对象
+ */
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const params = {};
+
+  args.forEach((arg) => {
+    if (arg.startsWith('--keys=')) {
+      // 分割并处理keys参数
+      params.keys = arg.split('=')[1].split(',');
+    }
+  });
+
+  return params;
+}
+
+/**
+ * 读取并解析SVG文件
+ * @param {string} filePath - SVG文件路径
+ * @returns {Promise<Object>} 解析后的SVG对象
+ */
+async function parseSVG(filePath) {
+  return new Promise((resolve, reject) => {
+    fs.readFile(filePath, 'utf8', (err, data) => {
+      if (err) {
+        reject(new Error(`读取文件失败: ${filePath}, 错误: ${err.message}`));
+        return;
+      }
+
+      parseString(data, (err, result) => {
+        if (err) {
+          reject(new Error(`解析SVG失败: ${filePath}, 错误: ${err.message}`));
+          return;
+        }
+        resolve(result);
+      });
+    });
+  });
+}
+
+/**
+ * 递归查找包含指定id的group元素
+ * @param {Object} node - XML节点对象
+ * @param {string} id - 要查找的id
+ * @returns {Object|null} 找到的group元素或null
+ */
+function findGroupWithId(node, id) {
+  // 检查当前节点是否有g元素
+  if (node.g && Array.isArray(node.g)) {
+    for (const group of node.g) {
+      // 检查group的id属性是否匹配
+      if (group.$ && group.$.id === id) {
+        return group;
+      }
+
+      // 递归检查子group
+      if (group.g) {
+        const result = findGroupWithId(group, id);
+        if (result) return group; // 返回找到的父group
+      }
+
+      // 检查use元素是否引用了目标id
+      if (group.use && Array.isArray(group.use)) {
+        for (const use of group.use) {
+          if (use.$ && use.$['xlink:href'] === `#${id}`) {
+            return group;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * 从group元素中提取transform值
+ * @param {Object} group - group元素对象
+ * @returns {string|null} transform值或null
+ */
+function extractTransform(group) {
+  if (!group || !group.$ || !group.$.transform) return null;
+  return group.$.transform;
+}
+
+/**
+ * 为SVG元素添加动态类绑定
+ * @param {Object} svgData - 解析后的SVG对象
+ * @param {Array<string>} keys - 需要添加绑定的key数组
+ * @returns {Object} 修改后的SVG对象
+ */
+function addDynamicClassBinding(svgData, keys) {
+  keys.forEach((key) => {
+    const group = findGroupWithId(svgData, key);
+    if (group && group.$) {
+      // 添加动态类绑定
+      group.$[':class'] = `{${key}_animate:!manager.${key},${key}_animate_reverse:manager.${key}}`;
+    }
+  });
+  return svgData;
+}
+
+/**
+ * 生成CSS keyframes动画
+ * @param {string} animationName - 动画名称
+ * @param {Array<string>} transforms - 变换矩阵数组
+ * @returns {string} 生成的CSS代码
+ */
+function generateKeyframes(animationName, transforms) {
+  const steps = transforms.length;
+  let css = `@keyframes ${animationName} {\n`;
+
+  transforms.forEach((transform, index) => {
+    if (transform) {
+      // 计算当前关键帧的百分比
+      const percentage = (index / (steps - 1)) * 100;
+      css += `  ${percentage.toFixed(0)}% {\n`;
+      css += `    transform: ${transform};\n`;
+      css += `  }\n`;
+    }
+  });
+
+  css += '}\n';
+  return css;
+}
+
+/**
+ * 从SVG对象中提取SVG内容（去除XML声明和根标签）
+ * @param {Object} svgObj - SVG对象
+ * @returns {string} SVG内容字符串
+ */
+function extractSVGContent(svgObj) {
+  const builder = new Builder({
+    headless: true, // 不包含XML声明
+  });
+
+  // 构建SVG内容，但不包含根标签
+  let svgContent = builder.buildObject({
+    svg: svgObj,
+  });
+
+  // 移除可能存在的<?xml>声明和DOCTYPE
+  svgContent = svgContent.replace(/<\?xml[^>]*>\s*/g, '').replace(/<!DOCTYPE[^>]*>\s*/g, '');
+
+  return svgContent;
+}
+
+/**
+ * 生成Vue组件文件内容
+ * @param {string} svgContent - SVG内容字符串
+ * @param {Object} transformsByKey - 每个key的transform数组
+ * @param {Object} firstTransforms - 第一个SVG文件中每个key的transform
+ * @param {Object} lastTransforms - 最后一个SVG文件中每个key的transform
+ * @param {Array<string>} keys - key数组
+ * @returns {string} 生成的Vue组件内容
+ */
+function generateVueComponent(svgContent, transformsByKey, firstTransforms, lastTransforms, keys) {
+  let template = `<template>\n${svgContent}\n</template>\n\n`;
+
+  let script = `<script setup lang="ts">\ndefineProps<{\nmanager:Record<string, boolean>;\n}>();\n</script>\n\n`;
+
+  let style = `<style scoped>\n`;
+
+  // 为每个key生成样式
+  keys.forEach((key) => {
+    const animationName = key.replace(/^___/, '').replace(/_/g, '');
+
+    // 添加keyframes
+    style += generateKeyframes(animationName, transformsByKey[key]);
+
+    // 添加正向动画类
+    style += `.${key}_animate {\n`;
+    style += `transition: transform 3s;\n`;
+    if (lastTransforms[key]) {
+      style += `transform: ${lastTransforms[key]};\n`;
+    }
+    style += `/*animation: ${animationName} 3s forwards;*/\n`;
+    style += `}\n\n`;
+
+    // 添加反向动画类
+    style += `.${key}_animate_reverse {\n`;
+    style += `transition: transform 3s;\n`;
+    if (firstTransforms[key]) {
+      style += `transform: ${firstTransforms[key]};\n`;
+    }
+    style += `/*animation: ${animationName} 3s forwards reverse;*/\n`;
+    style += `}\n\n`;
+  });
+
+  style += `</style>`;
+
+  return template + script + style;
+}
+
+/**
+ * 主函数 - 协调整个流程
+ */
+async function main() {
+  try {
+    // 解析命令行参数
+    const { keys } = parseArgs();
+
+    if (!keys || keys.length === 0) {
+      throw new Error('请提供keys参数，例如: --keys=key1,key2');
+    }
+
+    const workspaceDir = path.join(process.cwd(), 'workspace');
+    const outputFile = path.join(workspaceDir, 'animated-component.vue');
+
+    // 检查workspace目录是否存在
+    if (!fs.existsSync(workspaceDir)) {
+      throw new Error('workspace目录不存在');
+    }
+
+    // 读取并过滤SVG文件
+    const files = fs
+      .readdirSync(workspaceDir)
+      .filter((file) => file.endsWith('.svg'))
+      .sort(); // 按字母顺序排序以确保正确的动画顺序
+
+    if (files.length === 0) {
+      throw new Error('workspace目录下没有找到SVG文件');
+    }
+
+    console.log(`找到 ${files.length} 个SVG文件`);
+
+    // 为每个key创建transform数组
+    const transformsByKey = {};
+    const firstTransforms = {};
+    const lastTransforms = {};
+
+    keys.forEach((key) => {
+      transformsByKey[key] = [];
+    });
+
+    // 按顺序处理所有SVG文件
+    for (const file of files) {
+      const filePath = path.join(workspaceDir, file);
+      const svgData = await parseSVG(filePath);
+
+      // 为每个key查找对应的group并提取transform
+      for (const key of keys) {
+        const group = findGroupWithId(svgData.svg, key);
+        const transform = extractTransform(group);
+        transformsByKey[key].push(transform);
+
+        // 如果是第一个文件，保存transform
+        if (file === files[0]) {
+          firstTransforms[key] = transform;
+        }
+
+        // 如果是最后一个文件，保存transform
+        if (file === files[files.length - 1]) {
+          lastTransforms[key] = transform;
+        }
+      }
+    }
+
+    // 读取第一个SVG文件并添加动态类绑定
+    const firstSvgPath = path.join(workspaceDir, files[0]);
+    const firstSvgData = await parseSVG(firstSvgPath);
+
+    // 添加动态类绑定
+    const modifiedSvgData = addDynamicClassBinding(firstSvgData.svg, keys);
+
+    // 提取SVG内容（不包含XML声明和根标签）
+    const svgContent = extractSVGContent(modifiedSvgData);
+
+    // 生成Vue组件
+    const vueComponent = generateVueComponent(svgContent, transformsByKey, firstTransforms, lastTransforms, keys);
+
+    // 写入Vue组件文件
+    fs.writeFileSync(outputFile, vueComponent);
+    console.log(`Vue组件已生成: ${outputFile}`);
+  } catch (error) {
+    console.error('错误:', error.message);
+    process.exit(1);
+  }
+}
+
+// 执行主函数
+main();
+```

src/hooks/vent/useSvgAnimation.ts

@@ -0,0 +1,57 @@
+import { ref } from 'vue';
+
+/**
+ * svg二维模型动画使用的钩子，需要配合指定的组件使用，即svg模型组件（README里有更详细的说明）
+ *
+ * 备注：一个元素的动画仅有两种状态，正常播放、倒放；例如：`triggerAnimation(id1, false)`代表触发id1对应的动画，false代表触发正常播放的动画
+ */
+export function useSvgAnimation() {
+  /** 管理节点是否处于初始状态 */
+  const animationManager = ref<{ [id: string]: boolean }>({});
+
+  /**
+   * 触发动画函数，该函数用来根据id查找SVG图片中的对应group，然后触发绑定在此group上的动画
+   *
+   * 动画有且仅有两个状态，一种是初始状态，一种是结束状态，当动画触发后，会根据reverse传参自动切换状态
+   *
+   * @param id 标识符号（可以在页面中使用元素选择器选择具体元素后查询其id），可以传数组
+   * @param reverse 是否需要反向执行动画，如果id传了数组该参数可以传数组以一一匹配，默认为false
+   */
+  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false) {
+    const idArray = typeof id === 'string' ? [id] : id;
+    const reverseArray = typeof reverse === 'boolean' ? idArray.map(() => reverse) : reverse;
+
+    idArray.forEach((id, index) => {
+      if (animationManager.value[id] === undefined) {
+        animationManager.value[id] = true;
+      }
+      const unchanged = animationManager.value[id];
+
+      //   const element = document.querySelector(`#${id}`) as SVGElement;
+      //   if (!element) return;
+      //   const group = element.parentElement?.parentElement;
+      //   console.log('debug rrrr', element, group);
+      //   if (!group) return;
+
+      const reverse = reverseArray[index] || false;
+      // 不指定反向播放且group处于初始状态时播放正常动画
+      if (!reverse && unchanged) {
+        // group.classList.remove(`${id}_animate_reverse`);
+        // group.classList.add(`${id}_animate`);
+        animationManager.value[id] = false;
+        return;
+      }
+      if (reverse && !unchanged) {
+        // group.classList.remove(`${id}_animate`);
+        // group.classList.add(`${id}_animate_reverse`);
+        animationManager.value[id] = true;
+        return;
+      }
+    });
+  }
+
+  return {
+    animationManager,
+    triggerAnimation,
+  };
+}

src/views/vent/gas/gasPipeNet/index.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="gas-pipe-net">
-    <CustomHeader> 瓦斯管网监控系统 </CustomHeader>
+    <CustomHeader> 瓦斯管网联合解算 </CustomHeader>
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
       <VentModal />
     </div>

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

@@ -0,0 +1,1161 @@
+<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>