Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

README.md

@@ -219,11 +219,6 @@ function themifyScript(
 上述的生成组件的脚本如下：
 
 ```javascript
-/**
- * 使用方式：node index.js --keys=key1,key2
- *
- * 输出位置：当前目录下的 workspace/animated-component.vue 文件
- */
 const fs = require('fs');
 const path = require('path');
 const { parseString } = require('xml2js');
@@ -273,88 +268,74 @@ async function parseSVG(filePath) {
 }
 
 /**
- * 递归查找包含指定id的group元素
+ * 递归查找所有包含指定id引用的group元素
  * @param {Object} node - XML节点对象
  * @param {string} id - 要查找的id
- * @returns {Object|null} 找到的group元素或null
+ * @returns {Array} 找到的group元素数组
  */
-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;
+function findGroupsWithIdRef(node, id) {
+  const groups = [];
+
+  function traverse(currentNode) {
+    if (!currentNode) return;
+
+    // 检查当前节点是否为group且有use元素引用目标id
+    if (currentNode.g && Array.isArray(currentNode.g)) {
+      for (const group of currentNode.g) {
+        // 检查group是否有use元素引用目标id
+        if (group.use && Array.isArray(group.use)) {
+          for (const use of group.use) {
+            if (use.$ && use.$['xlink:href'] === `#${id}`) {
+              groups.push(currentNode);
+              break;
+            }
           }
         }
+
+        // 递归检查子元素
+        traverse(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;
+  traverse(node);
+  return groups;
 }
 
 /**
- * 为SVG元素添加动态类绑定
+ * 为SVG元素添加唯一标识和初始transform
  * @param {Object} svgData - 解析后的SVG对象
- * @param {Array<string>} keys - 需要添加绑定的key数组
- * @returns {Object} 修改后的SVG对象
+ * @param {Array<string>} keys - 需要处理的key数组
+ * @returns {Object} 修改后的SVG对象和元素映射
  */
-function addDynamicClassBinding(svgData, keys) {
+function addElementIdentifiers(svgData, keys) {
+  const elementInfoMap = new Map();
+
   keys.forEach((key) => {
-    const group = findGroupWithId(svgData, key);
-    if (group && group.$) {
-      // 添加动态类绑定
-      group.$[':class'] = `{${key}_animate:!manager.${key},${key}_animate_reverse:manager.${key}}`;
-    }
-  });
-  return svgData;
-}
+    const groups = findGroupsWithIdRef(svgData, key);
 
-/**
- * 生成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`;
-    }
+    groups.forEach((group, counter) => {
+      const elementId = `anim_${key}_${counter++}`;
+
+      // 确保group有属性对象
+      if (!group.$) group.$ = {};
+
+      // 添加唯一标识
+      group.$['data-anim-id'] = elementId;
+
+      // 保存初始transform
+      const transform = group.$.transform || '';
+
+      // 存储元素信息
+      elementInfoMap.set(elementId, {
+        key,
+        initialTransform: transform,
+        transforms: [], // 将在后续步骤填充
+      });
+    });
   });
 
-  css += '}\n';
-  return css;
+  return { modifiedSvg: svgData, elementInfoMap };
 }
 
 /**
@@ -379,50 +360,127 @@ function extractSVGContent(svgObj) {
 }
 
 /**
- * 生成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组件内容
+ * 收集所有SVG文件中每个元素的transform变化
+ * @param {string} workspaceDir - 工作目录路径
+ * @param {Array} files - SVG文件列表
+ * @param {Map} elementInfoMap - 元素信息Map
+ * @returns {Promise<Map>} 更新后的元素信息Map
  */
-function generateVueComponent(svgContent, transformsByKey, firstTransforms, lastTransforms, keys) {
-  let template = `<template>\n${svgContent}\n</template>\n\n`;
+async function collectTransforms(workspaceDir, files, elementInfoMap) {
+  // 为每个元素初始化transform序列
+  for (const [elementId, info] of elementInfoMap) {
+    info.transforms = [];
+  }
 
-  let script = `<script setup lang="ts">\ndefineProps<{\nmanager:Record<string, boolean>;\n}>();\n</script>\n\n`;
+  // 按顺序处理所有SVG文件
+  for (const file of files) {
+    const filePath = path.join(workspaceDir, file);
+    const svgData = await parseSVG(filePath);
 
-  let style = `<style scoped>\n`;
+    // 为每个元素查找对应的transform
+    for (const [elementId, info] of elementInfoMap) {
+      const key = info.key;
+      const groups = findGroupsWithIdRef(svgData.svg, key);
 
-  // 为每个key生成样式
-  keys.forEach((key) => {
-    const animationName = key.replace(/^___/, '').replace(/_/g, '');
+      // 查找具有相同相对位置的group（假设顺序一致）
+      const elementIndex = parseInt(elementId.split('_').pop());
+      if (groups[elementIndex] && groups[elementIndex].$ && groups[elementIndex].$.transform) {
+        info.transforms.push(groups[elementIndex].$.transform);
+      } else {
+        // 如果找不到transform，使用前一个值或初始值
+        const lastTransform = info.transforms.length > 0 ? info.transforms[info.transforms.length - 1] : info.initialTransform;
+        info.transforms.push(lastTransform);
+      }
+    }
+  }
 
-    // 添加keyframes
-    style += generateKeyframes(animationName, transformsByKey[key]);
+  return elementInfoMap;
+}
 
-    // 添加正向动画类
-    style += `.${key}_animate {\n`;
-    style += `transition: transform 3s;\n`;
-    if (lastTransforms[key]) {
-      style += `transform: ${lastTransforms[key]};\n`;
+/**
+ * 生成Vue组件文件内容
+ * @param {string} svgContent - SVG内容字符串
+ * @param {Map} elementInfoMap - 元素信息Map
+ * @param {Array<string>} keys - key数组
+ * @returns {string} 生成的Vue组件内容
+ */
+function generateVueComponent(svgContent, elementInfoMap, keys) {
+  return `
+<template>\n${svgContent}\n</template>\n\n
+<script setup lang="ts">
+import { watch, onMounted, defineExpose, defineProps } from "vue";
+
+const props = defineProps<{
+  manager: Record<string, boolean>;
+}>();
+
+// 存储所有动画元素（不在模板中使用，不需要ref）
+const animElements = new Map<string, HTMLElement>();
+
+// 元素信息（常量数据，使用Map）
+const elementInfo = new Map([
+${Array.from(elementInfoMap.entries())
+  .map(([key, value]) => `  ["${key}", ${JSON.stringify(value)}]`)
+  .join(',\n')}
+]);
+
+// 初始化元素引用
+onMounted(() => {
+  elementInfo.forEach((info, elementId) => {
+    const el = document.querySelector(\`[data-anim-id="\${elementId}"]\`);
+    if (el) {
+      animElements.set(elementId, el as HTMLElement);
+      // 设置初始transform
+      const initialTransform = info.transforms[0] || '';
+      el.setAttribute('transform', initialTransform);
     }
-    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`;
+  });
+});
+
+// 监听manager变化并执行动画
+watch(() => props.manager, (newManager) => {
+  Object.keys(newManager).forEach(key => {
+    const isActive = newManager[key];
+    
+    // 找到所有属于这个key的元素
+    animateByKey(key, isActive);
+  });
+}, { deep: true });
+
+// 直接控制动画的方法
+const animateElement = (elementId: string, toEnd: boolean, duration: number = 3000) => {
+  const el = animElements.get(elementId);
+  const info = elementInfo.get(elementId);
+  
+  if (el && info && info.transforms.length > 1) {
+    el.style.transition = \`transform \${duration}ms\`;
+    el.setAttribute('transform', toEnd ? info.transforms[info.transforms.length - 1] : info.transforms[0]);
+  }
+};
+
+// 批量控制同一key的所有元素
+const animateByKey = (key: string, toEnd: boolean, duration: number = 3000) => {
+  animElements.forEach((el, elementId) => {
+    const info = elementInfo.get(elementId);
+    if (info && info.key === key) {
+      animateElement(elementId, toEnd, duration);
     }
-    style += `/*animation: ${animationName} 3s forwards reverse;*/\n`;
-    style += `}\n\n`;
   });
+};
 
-  style += `</style>`;
 
-  return template + script + style;
+// 导出方法以便外部调用
+defineExpose({
+  animateElement,
+  animateByKey
+});
+</script>
+<style scoped>
+/* 可以添加一些基础样式 */
+[data-anim-id] {
+  transition: transform 3s;
+}
+</style>`;
 }
 
 /**
@@ -457,54 +515,26 @@ async function main() {
 
     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文件并添加动态类绑定
+    // 读取第一个SVG文件
     const firstSvgPath = path.join(workspaceDir, files[0]);
     const firstSvgData = await parseSVG(firstSvgPath);
 
-    // 添加动态类绑定
-    const modifiedSvgData = addDynamicClassBinding(firstSvgData.svg, keys);
+    // 为SVG元素添加唯一标识
+    const { modifiedSvg, elementInfoMap } = addElementIdentifiers(firstSvgData.svg, keys);
+
+    // 收集所有SVG文件中每个元素的transform变化
+    const updatedElementInfoMap = await collectTransforms(workspaceDir, files, elementInfoMap);
 
     // 提取SVG内容（不包含XML声明和根标签）
-    const svgContent = extractSVGContent(modifiedSvgData);
+    const svgContent = extractSVGContent(modifiedSvg);
 
     // 生成Vue组件
-    const vueComponent = generateVueComponent(svgContent, transformsByKey, firstTransforms, lastTransforms, keys);
+    const vueComponent = generateVueComponent(svgContent, updatedElementInfoMap, keys);
 
     // 写入Vue组件文件
     fs.writeFileSync(outputFile, vueComponent);
     console.log(`Vue组件已生成: ${outputFile}`);
+    console.log(`共找到 ${updatedElementInfoMap.size} 个动画元素`);
   } catch (error) {
     console.error('错误:', error.message);
     process.exit(1);

src/views/vent/deviceManager/comment/FormModal.vue

@@ -10,58 +10,74 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { inject, nextTick, watch, unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form/index';
-  // 声明Emits
-  const emit = defineEmits(['saveOrUpdate']);
-  const testData = inject('formData') as any;
-  //表单配置
-  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-    schemas: unref(inject('formSchema')),
-    showActionButtonGroup: false,
-  });
+import { inject, nextTick, watch, unref, onMounted } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { getRegulation as getRegulationList } from '/@/views/vent/deviceManager/substationTabel/substation.api';
 
-  watch(
-    testData,
-    (newV) => {
-      nextTick(() => {
-        setFieldsValue({ ...newV });
-      });
-    },
-    { immediate: true }
-  );
+// 声明Emits
+const emit = defineEmits(['saveOrUpdate']);
+const testData = inject('formData') as any;
 
-  // 重置表单
-  async function onReset() {
-    await resetFields();
-    await setFieldsValue({ ...testData });
-  }
-  //表单提交事件
-  async function handleSubmit(v) {
-    try {
-      let values = await validate();
-      emit('saveOrUpdate', values);
-    } finally {
-      // setModalProps({ confirmLoading: false });
-    }
+const existingSchemas = unref(inject('formSchema')) || [];
+const newSchema = {
+  label: '规程值',
+  field: 'regulation',
+  component: 'ApiSelect',
+  componentProps: {
+    api: getRegulationList,
+    labelField: 'name',
+    valueField: 'id',
+  },
+};
+// 在索引位置1处插入规程值配置
+const insertPosition = 3;
+const mergedSchemas = [...existingSchemas.slice(0, insertPosition), newSchema, ...existingSchemas.slice(insertPosition)];
+//表单配置
+const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+  schemas: mergedSchemas,
+  showActionButtonGroup: false,
+});
+watch(
+  testData,
+  (newV) => {
+    nextTick(() => {
+      setFieldsValue({ ...newV });
+    });
+  },
+  { immediate: true }
+);
+
+// 重置表单
+async function onReset() {
+  await resetFields();
+  await setFieldsValue({ ...testData });
+}
+//表单提交事件
+async function handleSubmit(v) {
+  try {
+    let values = await validate();
+    emit('saveOrUpdate', values);
+  } finally {
+    // setModalProps({ confirmLoading: false });
   }
+}
 </script>
 <style lang="less" scoped>
-  @ventSpace: zxm;
-  .j-box-bottom-button-float {
-    border: none !important;
-    padding-bottom: 30px;
-    left: 0px !important;
-    right: 0px !important;
-    bottom: 0px !important;
-  }
-  .vent-form {
-    // width: 100%;
-    max-height: 700px;
-    overflow-y: auto;
+@ventSpace: zxm;
+.j-box-bottom-button-float {
+  border: none !important;
+  padding-bottom: 30px;
+  left: 0px !important;
+  right: 0px !important;
+  bottom: 0px !important;
+}
+.vent-form {
+  // width: 100%;
+  max-height: 700px;
+  overflow-y: auto;
 
-    .@{ventSpace}-select-selection-item {
-      color: rgba(255, 255, 255, 1) !important;
-    }
+  .@{ventSpace}-select-selection-item {
+    color: rgba(255, 255, 255, 1) !important;
   }
+}
 </style>

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -504,7 +504,7 @@
     height: 17px;
   }
   .mini-board__value_E {
-    font-size: 20px;
+    font-size: 19px;
     font-weight: bold;
   }
   .mini-board__label_E {

src/views/vent/home/configurable/components/green-nav.vue

@@ -4,14 +4,23 @@
     <div class="main-title">{{ Title }}</div>
     <!-- menu区域 -->
     <div class="nav-menu">
-      <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
-        :key="index" @click="menuClick(index, item)">
+      <div
+        :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'"
+        v-for="(item, index) in menuList"
+        :key="index"
+        @click="menuClick(index, item)"
+      >
         <div>{{ item.name }}</div>
         <!-- menu-item -->
         <div v-if="activeIndex == index && isShowMenuItem && item.MenuItemList.length != 0" class="nav-menu-item">
           <div class="nav-menu-content">
-            <div :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
-              v-for="(ite, ind) in item.MenuItemList" :key="ind" @click.stop="menuItemClick(ind)">{{ ite.name }}</div>
+            <div
+              :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+              v-for="(ite, ind) in item.MenuItemList"
+              :key="ind"
+              @click.stop="menuItemClick(ind)"
+              >{{ ite.name }}</div
+            >
           </div>
         </div>
       </div>
@@ -70,123 +79,121 @@ function menuItemClick(ind) {
 }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-.green-nav {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background: url('../../../../../assets/images/home-green/green-nav-bg.png') no-repeat;
-  background-size: 100% 100%;
-
-  .main-title {
-    width: 518px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    padding-left: 70px;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 20px;
-    letter-spacing: 2px;
-
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
-  .nav-menu {
-    position: absolute;
-    top: 0;
-    left: 675px;
-    width: 880px;
+  .green-nav {
+    position: relative;
+    width: 100%;
     height: 100%;
-    display: flex;
-    justify-content: flex-start;
-
-    .nav-menu-active {
-      position: relative;
-      width: 120px;
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-      margin: 0px 20px;
-      font-size: 18px;
-      letter-spacing: 2px;
-      background: url('../../../../../assets/images/home-green/green-menu-bg.png') no-repeat;
-      background-size: 100% 100%;
-    }
+    background: url('../../../../../assets/images/home-green/green-nav-bg.png') no-repeat;
+    background-size: 100% 100%;
 
-    .nav-menu-unactive {
-      position: relative;
-      width: 120px;
-      height: 60px;
-      line-height: 60px;
-      text-align: center;
-      margin: 0px 10px;
-      font-size: 16px;
+    .main-title {
+      width: 518px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-left: 70px;
+      font-family: 'douyuFont';
+      font-size: 20px;
       letter-spacing: 2px;
-      background-size: 100% 100%;
-      cursor: pointer;
     }
 
-    .nav-menu-item {
+    .nav-menu {
       position: absolute;
-      left: -34px;
-      top: 56px;
-      width: 186px;
-      height: 273px;
-      padding: 28px 12px 12px 12px;
-      background: url(/src/assets/images/home-green/green-menu-item.png) no-repeat;
+      top: 0;
+      left: 675px;
+      width: 880px;
+      height: 100%;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      box-sizing: border-box;
-
-
-      .nav-menu-content {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
+      justify-content: flex-start;
+
+      .nav-menu-active {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin: 0px 20px;
+        font-size: 18px;
+        letter-spacing: 2px;
+        background: url('../../../../../assets/images/home-green/green-menu-bg.png') no-repeat;
+        background-size: 100% 100%;
+      }
 
-        .menu-item-active {
-          width: 100%;
-          height: 36px;
-          line-height: 36px;
-          font-size: 14px;
-          background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
-        }
+      .nav-menu-unactive {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        margin: 0px 10px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
 
-        .menu-item-unactive {
+      .nav-menu-item {
+        position: absolute;
+        left: -34px;
+        top: 56px;
+        width: 186px;
+        height: 273px;
+        padding: 28px 12px 12px 12px;
+        background: url(/src/assets/images/home-green/green-menu-item.png) no-repeat;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .nav-menu-content {
           width: 100%;
-          height: 40px;
-          line-height: 40px;
-          font-size: 14px;
+          height: 100%;
+          overflow-y: auto;
+
+          .menu-item-active {
+            width: 100%;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
+          }
+
+          .menu-item-unactive {
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+          }
         }
       }
-    }
 
-    // @keyframes fadeIn {
-    //   from {
-    //     opacity: 0;
-    //   }
-
-    //   to {
-    //     opacity: 1;
-    //   }
-    // }
-
-    // /* 定义淡出动画 */
-    // @keyframes fadeOut {
-    //   from {
-    //     opacity: 1;
-    //   }
-
-    //   to {
-    //     opacity: 0;
-    //   }
-    // }
+      // @keyframes fadeIn {
+      //   from {
+      //     opacity: 0;
+      //   }
+
+      //   to {
+      //     opacity: 1;
+      //   }
+      // }
+
+      // /* 定义淡出动画 */
+      // @keyframes fadeOut {
+      //   from {
+      //     opacity: 1;
+      //   }
+
+      //   to {
+      //     opacity: 0;
+      //   }
+      // }
+    }
   }
-}
 </style>

src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -73,6 +73,7 @@ export function getMonitorComponent() {
     case 'sdmtjtcctmk': //榆家梁
     case 'sdmtjtswmk': //上湾
     case 'zmhjhzmy': // 韩咀
+    case 'dttzjymy': //东泰金源
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
       break;
     case 'sdmtjtwlmlmk': //乌兰木伦
@@ -552,7 +553,7 @@ export const noWarningArr = [
   'bundleSpyDayReport',
   'gate_linkdlfm',
   'substation_normal',
-  'safetymonitor'
+  'safetymonitor',
 ]; // 无预警详情的
 export const haveSysDetailArr = ['forcFan', 'pulping']; //有场景详情的
 

src/views/vent/monitorManager/gateMonitor/components/entryThree.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="deviceDetail" class="device-detail">
+      <div id="deviceCard" class="device-card" style="z-index: -1; position: absolute">
+        <div class="title">KJ-980-F矿用本安型监控分站</div>
+        <div class="detail-box">
+          <div class="left-box"></div>
+          <div class="right-box">
+            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
+            <div
+              ><span class="detail-title">技术参数：</span>
+              <span
+                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="damper3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{ loading: boolean }>();
+</script>

src/views/vent/monitorManager/gateMonitor/components/gateSVG.vue

@@ -8,6 +8,7 @@
     y="0px"
     width="1536px"
     height="100%"
+    style="margin-left: calc(50% - 768px)"
     viewBox="0 0 1920 1080"
   >
     <defs>
@@ -1117,13 +1118,7 @@
       </g>
     </g>
     <g transform="matrix( 1, 0, 0, 1, 10.3,1.4) " />
-    <g
-      transform="matrix( 1, 0, 0, 1, 920.85,570.6) "
-      :class="{
-        ___R_0_Layer0_0_FILL_animate: !manager.___R_0_Layer0_0_FILL,
-        ___R_0_Layer0_0_FILL_animate_reverse: manager.___R_0_Layer0_0_FILL,
-      }"
-    >
+    <g transform="matrix( 1, 0, 0, 1, 920.85,570.6) " data-anim-id="anim____R_0_Layer0_0_FILL_0">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#___R_0_Layer0_0_FILL" />
       </g>
@@ -1134,13 +1129,7 @@
         <use xlink:href="#___0_Layer0_0_1_STROKES" />
       </g>
     </g>
-    <g
-      transform="matrix( 1, 0, 0, 1, 874.05,582.8) "
-      :class="{
-        ___L_0_Layer0_0_FILL_animate: !manager.___L_0_Layer0_0_FILL,
-        ___L_0_Layer0_0_FILL_animate_reverse: manager.___L_0_Layer0_0_FILL,
-      }"
-    >
+    <g transform="matrix( 1, 0, 0, 1, 874.05,582.8) " data-anim-id="anim____L_0_Layer0_0_FILL_0">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#___L_0_Layer0_0_FILL" />
       </g>
@@ -1149,217 +1138,154 @@
 </template>
 
 <script setup lang="ts">
-  defineProps<{
+  import { watch, onMounted, defineExpose, defineProps } from 'vue';
+
+  const props = defineProps<{
     manager: Record<string, boolean>;
   }>();
-</script>
 
-<style scoped>
-  @keyframes L0Layer00FILL {
-    0% {
-      transform: matrix(1, 0, 0, 1, 874.05, 582.8);
-    }
-    3% {
-      transform: matrix(1.0739898681640625, 0.12255859375, 0, 1, 875.85, 585.75);
-    }
-    7% {
-      transform: matrix(1.081298828125, 0.137237548828125, 0, 1, 876, 586.15);
-    }
-    10% {
-      transform: matrix(1.0883636474609375, 0.1521148681640625, 0, 1, 876.2, 586.5);
-    }
-    14% {
-      transform: matrix(1.0952606201171875, 0.167205810546875, 0, 1, 876.35, 586.8);
-    }
-    17% {
-      transform: matrix(1.1019439697265625, 0.1824951171875, 0, 1, 876.5, 587.2);
-    }
-    21% {
-      transform: matrix(1.1084136962890625, 0.1979827880859375, 0, 1, 876.65, 587.55);
-    }
-    24% {
-      transform: matrix(1.114654541015625, 0.2136688232421875, 0, 1, 876.9, 587.95);
-    }
-    28% {
-      transform: matrix(1.120697021484375, 0.229522705078125, 0, 1, 876.95, 588.35);
-    }
-    31% {
-      transform: matrix(1.126495361328125, 0.245574951171875, 0, 1, 877.1, 588.7);
-    }
-    34% {
-      transform: matrix(1.1320648193359375, 0.2617950439453125, 0, 1, 877.25, 589.1);
-    }
-    38% {
-      transform: matrix(1.0088958740234375, 0.012725830078125, 0, 1, 874.25, 583.1);
-    }
-    41% {
-      transform: matrix(1.137420654296875, 0.2782135009765625, 0, 1, 877.45, 589.5);
-    }
-    45% {
-      transform: matrix(1.14251708984375, 0.2947998046875, 0, 1, 877.5, 589.9);
-    }
-    48% {
-      transform: matrix(1.1473846435546875, 0.3115692138671875, 0, 1, 877.65, 590.3);
-    }
-    52% {
-      transform: matrix(1.152008056640625, 0.3284912109375, 0, 1, 877.8, 590.75);
-    }
-    55% {
-      transform: matrix(1.1563873291015625, 0.3455810546875, 0, 1, 877.8, 591.15);
-    }
-    59% {
-      transform: matrix(1.1605224609375, 0.3628387451171875, 0, 1, 877.95, 591.55);
-    }
-    62% {
-      transform: matrix(1.1644134521484375, 0.3802642822265625, 0, 1, 878.1, 592);
-    }
-    66% {
-      transform: matrix(1.1680450439453125, 0.3978271484375, 0, 1, 878.1, 592.4);
-    }
-    69% {
-      transform: matrix(1.1714019775390625, 0.415557861328125, 0, 1, 878.2, 592.8);
-    }
-    72% {
-      transform: matrix(1.1744842529296875, 0.4334259033203125, 0, 1, 878.3, 593.25);
-    }
-    76% {
-      transform: matrix(1.0176544189453125, 0.0256805419921875, 0, 1, 874.5, 583.4);
-    }
-    79% {
-      transform: matrix(1.177337646484375, 0.4514617919921875, 0, 1, 878.25, 593.55);
-    }
-    83% {
-      transform: matrix(1.0262298583984375, 0.0388641357421875, 0, 1, 874.7, 583.7);
-    }
-    86% {
-      transform: matrix(1.0346527099609375, 0.0522918701171875, 0, 1, 874.85, 584.05);
-    }
-    90% {
-      transform: matrix(1.0428924560546875, 0.0659027099609375, 0, 1, 875.1, 584.4);
-    }
-    93% {
-      transform: matrix(1.0509490966796875, 0.0797576904296875, 0, 1, 875.3, 584.7);
-    }
-    97% {
-      transform: matrix(1.0588226318359375, 0.09381103515625, 0, 1, 875.45, 585);
-    }
-    100% {
-      transform: matrix(1.066497802734375, 0.1080780029296875, 0, 1, 875.65, 585.45);
-    }
-  }
-  .___L_0_Layer0_0_FILL_animate {
-    transition: transform 3s;
-    transform: matrix(1.066497802734375, 0.1080780029296875, 0, 1, 875.65, 585.45);
-    /*animation: L0Layer00FILL 3s forwards;*/
-  }
+  // 存储所有动画元素（不在模板中使用，不需要ref）
+  const animElements = new Map<string, HTMLElement>();
 
-  .___L_0_Layer0_0_FILL_animate_reverse {
-    transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 874.05, 582.8);
-    /*animation: L0Layer00FILL 3s forwards reverse;*/
-  }
+  // 元素信息（常量数据，使用Map）
+  const elementInfo = new Map([
+    [
+      'anim____L_0_Layer0_0_FILL_0',
+      {
+        key: '___L_0_Layer0_0_FILL',
+        initialTransform: 'matrix( 1, 0, 0, 1, 874.05,582.8) ',
+        transforms: [
+          'matrix( 1, 0, 0, 1, 874.05,582.8) ',
+          'matrix( 1.0739898681640625, 0.12255859375, 0, 1, 875.85,585.75) ',
+          'matrix( 1.081298828125, 0.137237548828125, 0, 1, 876,586.15) ',
+          'matrix( 1.0883636474609375, 0.1521148681640625, 0, 1, 876.2,586.5) ',
+          'matrix( 1.0952606201171875, 0.167205810546875, 0, 1, 876.35,586.8) ',
+          'matrix( 1.1019439697265625, 0.1824951171875, 0, 1, 876.5,587.2) ',
+          'matrix( 1.1084136962890625, 0.1979827880859375, 0, 1, 876.65,587.55) ',
+          'matrix( 1.114654541015625, 0.2136688232421875, 0, 1, 876.9,587.95) ',
+          'matrix( 1.120697021484375, 0.229522705078125, 0, 1, 876.95,588.35) ',
+          'matrix( 1.126495361328125, 0.245574951171875, 0, 1, 877.1,588.7) ',
+          'matrix( 1.1320648193359375, 0.2617950439453125, 0, 1, 877.25,589.1) ',
+          'matrix( 1.0088958740234375, 0.012725830078125, 0, 1, 874.25,583.1) ',
+          'matrix( 1.137420654296875, 0.2782135009765625, 0, 1, 877.45,589.5) ',
+          'matrix( 1.14251708984375, 0.2947998046875, 0, 1, 877.5,589.9) ',
+          'matrix( 1.1473846435546875, 0.3115692138671875, 0, 1, 877.65,590.3) ',
+          'matrix( 1.152008056640625, 0.3284912109375, 0, 1, 877.8,590.75) ',
+          'matrix( 1.1563873291015625, 0.3455810546875, 0, 1, 877.8,591.15) ',
+          'matrix( 1.1605224609375, 0.3628387451171875, 0, 1, 877.95,591.55) ',
+          'matrix( 1.1644134521484375, 0.3802642822265625, 0, 1, 878.1,592) ',
+          'matrix( 1.1680450439453125, 0.3978271484375, 0, 1, 878.1,592.4) ',
+          'matrix( 1.1714019775390625, 0.415557861328125, 0, 1, 878.2,592.8) ',
+          'matrix( 1.1744842529296875, 0.4334259033203125, 0, 1, 878.3,593.25) ',
+          'matrix( 1.0176544189453125, 0.0256805419921875, 0, 1, 874.5,583.4) ',
+          'matrix( 1.177337646484375, 0.4514617919921875, 0, 1, 878.25,593.55) ',
+          'matrix( 1.0262298583984375, 0.0388641357421875, 0, 1, 874.7,583.7) ',
+          'matrix( 1.0346527099609375, 0.0522918701171875, 0, 1, 874.85,584.05) ',
+          'matrix( 1.0428924560546875, 0.0659027099609375, 0, 1, 875.1,584.4) ',
+          'matrix( 1.0509490966796875, 0.0797576904296875, 0, 1, 875.3,584.7) ',
+          'matrix( 1.0588226318359375, 0.09381103515625, 0, 1, 875.45,585) ',
+          'matrix( 1.066497802734375, 0.1080780029296875, 0, 1, 875.65,585.45) ',
+        ],
+      },
+    ],
+    [
+      'anim____R_0_Layer0_0_FILL_0',
+      {
+        key: '___R_0_Layer0_0_FILL',
+        initialTransform: 'matrix( 1, 0, 0, 1, 920.85,570.6) ',
+        transforms: [
+          'matrix( 1, 0, 0, 1, 920.85,570.6) ',
+          'matrix( 1.0812530517578125, 0.11395263671875, 0, 1, 919,568) ',
+          'matrix( 1.0894622802734375, 0.127685546875, 0, 1, 918.8,567.7) ',
+          'matrix( 1.0975189208984375, 0.1416168212890625, 0, 1, 918.65,567.4) ',
+          'matrix( 1.105377197265625, 0.15576171875, 0, 1, 918.45,567.05) ',
+          'matrix( 1.1130828857421875, 0.1701202392578125, 0, 1, 918.3,566.75) ',
+          'matrix( 1.120574951171875, 0.1846771240234375, 0, 1, 918.1,566.4) ',
+          'matrix( 1.1278839111328125, 0.1994171142578125, 0, 1, 918,566.1) ',
+          'matrix( 1.135009765625, 0.2143707275390625, 0, 1, 917.8,565.8) ',
+          'matrix( 1.1419525146484375, 0.2294921875, 0, 1, 917.7,565.4) ',
+          'matrix( 1.1486663818359375, 0.2448272705078125, 0, 1, 917.5,565.05) ',
+          'matrix( 1.0095977783203125, 0.0117645263671875, 0, 1, 920.65,570.3) ',
+          'matrix( 1.155181884765625, 0.260345458984375, 0, 1, 917.35,564.7) ',
+          'matrix( 1.1614837646484375, 0.2760467529296875, 0, 1, 917.25,564.3) ',
+          'matrix( 1.1676025390625, 0.2919158935546875, 0, 1, 917.05,564) ',
+          'matrix( 1.1734771728515625, 0.3079833984375, 0, 1, 916.9,563.65) ',
+          'matrix( 1.1791534423828125, 0.3242340087890625, 0, 1, 916.8,563.25) ',
+          'matrix( 1.18463134765625, 0.3406524658203125, 0, 1, 916.7,562.85) ',
+          'matrix( 1.1898345947265625, 0.3572235107421875, 0, 1, 916.55,562.5) ',
+          'matrix( 1.1948394775390625, 0.3739776611328125, 0, 1, 916.45,562.15) ',
+          'matrix( 1.199615478515625, 0.3909149169921875, 0, 1, 916.35,561.75) ',
+          'matrix( 1.2041473388671875, 0.407989501953125, 0, 1, 916.2,561.35) ',
+          'matrix( 1.01910400390625, 0.023773193359375, 0, 1, 920.4,570.05) ',
+          'matrix( 1.208465576171875, 0.42523193359375, 0, 1, 916.1,560.8) ',
+          'matrix( 1.0284271240234375, 0.0359954833984375, 0, 1, 920.2,569.75) ',
+          'matrix( 1.037628173828125, 0.0484466552734375, 0, 1, 920,569.5) ',
+          'matrix( 1.046661376953125, 0.0611114501953125, 0, 1, 919.8,569.25) ',
+          'matrix( 1.0555572509765625, 0.0739898681640625, 0, 1, 919.6,568.95) ',
+          'matrix( 1.0642852783203125, 0.08709716796875, 0, 1, 919.4,568.65) ',
+          'matrix( 1.0728302001953125, 0.1004180908203125, 0, 1, 919.2,568.35) ',
+        ],
+      },
+    ],
+  ]);
 
-  @keyframes R0Layer00FILL {
-    0% {
-      transform: matrix(1, 0, 0, 1, 920.85, 570.6);
-    }
-    3% {
-      transform: matrix(1.0812530517578125, 0.11395263671875, 0, 1, 919, 568);
-    }
-    7% {
-      transform: matrix(1.0894622802734375, 0.127685546875, 0, 1, 918.8, 567.7);
-    }
-    10% {
-      transform: matrix(1.0975189208984375, 0.1416168212890625, 0, 1, 918.65, 567.4);
-    }
-    14% {
-      transform: matrix(1.105377197265625, 0.15576171875, 0, 1, 918.45, 567.05);
-    }
-    17% {
-      transform: matrix(1.1130828857421875, 0.1701202392578125, 0, 1, 918.3, 566.75);
-    }
-    21% {
-      transform: matrix(1.120574951171875, 0.1846771240234375, 0, 1, 918.1, 566.4);
-    }
-    24% {
-      transform: matrix(1.1278839111328125, 0.1994171142578125, 0, 1, 918, 566.1);
-    }
-    28% {
-      transform: matrix(1.135009765625, 0.2143707275390625, 0, 1, 917.8, 565.8);
-    }
-    31% {
-      transform: matrix(1.1419525146484375, 0.2294921875, 0, 1, 917.7, 565.4);
-    }
-    34% {
-      transform: matrix(1.1486663818359375, 0.2448272705078125, 0, 1, 917.5, 565.05);
-    }
-    38% {
-      transform: matrix(1.0095977783203125, 0.0117645263671875, 0, 1, 920.65, 570.3);
-    }
-    41% {
-      transform: matrix(1.155181884765625, 0.260345458984375, 0, 1, 917.35, 564.7);
-    }
-    45% {
-      transform: matrix(1.1614837646484375, 0.2760467529296875, 0, 1, 917.25, 564.3);
-    }
-    48% {
-      transform: matrix(1.1676025390625, 0.2919158935546875, 0, 1, 917.05, 564);
-    }
-    52% {
-      transform: matrix(1.1734771728515625, 0.3079833984375, 0, 1, 916.9, 563.65);
-    }
-    55% {
-      transform: matrix(1.1791534423828125, 0.3242340087890625, 0, 1, 916.8, 563.25);
-    }
-    59% {
-      transform: matrix(1.18463134765625, 0.3406524658203125, 0, 1, 916.7, 562.85);
-    }
-    62% {
-      transform: matrix(1.1898345947265625, 0.3572235107421875, 0, 1, 916.55, 562.5);
-    }
-    66% {
-      transform: matrix(1.1948394775390625, 0.3739776611328125, 0, 1, 916.45, 562.15);
-    }
-    69% {
-      transform: matrix(1.199615478515625, 0.3909149169921875, 0, 1, 916.35, 561.75);
-    }
-    72% {
-      transform: matrix(1.2041473388671875, 0.407989501953125, 0, 1, 916.2, 561.35);
-    }
-    76% {
-      transform: matrix(1.01910400390625, 0.023773193359375, 0, 1, 920.4, 570.05);
-    }
-    79% {
-      transform: matrix(1.208465576171875, 0.42523193359375, 0, 1, 916.1, 560.8);
-    }
-    83% {
-      transform: matrix(1.0284271240234375, 0.0359954833984375, 0, 1, 920.2, 569.75);
-    }
-    86% {
-      transform: matrix(1.037628173828125, 0.0484466552734375, 0, 1, 920, 569.5);
-    }
-    90% {
-      transform: matrix(1.046661376953125, 0.0611114501953125, 0, 1, 919.8, 569.25);
-    }
-    93% {
-      transform: matrix(1.0555572509765625, 0.0739898681640625, 0, 1, 919.6, 568.95);
-    }
-    97% {
-      transform: matrix(1.0642852783203125, 0.08709716796875, 0, 1, 919.4, 568.65);
-    }
-    100% {
-      transform: matrix(1.0728302001953125, 0.1004180908203125, 0, 1, 919.2, 568.35);
+  // 初始化元素引用
+  onMounted(() => {
+    elementInfo.forEach((info, elementId) => {
+      const el = document.querySelector(`[data-anim-id="${elementId}"]`);
+      if (el) {
+        animElements.set(elementId, el as HTMLElement);
+        // 设置初始transform
+        const initialTransform = info.transforms[0] || '';
+        el.setAttribute('transform', initialTransform);
+      }
+    });
+  });
+
+  // 监听manager变化并执行动画
+  watch(
+    () => props.manager,
+    (newManager) => {
+      Object.keys(newManager).forEach((key) => {
+        const isActive = newManager[key];
+
+        // 找到所有属于这个key的元素
+        animateByKey(key, isActive);
+      });
+    },
+    { deep: true }
+  );
+
+  // 直接控制动画的方法
+  const animateElement = (elementId: string, toEnd: boolean, duration: number = 3000) => {
+    const el = animElements.get(elementId);
+    const info = elementInfo.get(elementId);
+
+    if (el && info && info.transforms.length > 1) {
+      el.style.transition = `transform ${duration}ms`;
+      el.setAttribute('transform', toEnd ? info.transforms[info.transforms.length - 1] : info.transforms[0]);
     }
-  }
-  .___R_0_Layer0_0_FILL_animate {
-    transition: transform 3s;
-    transform: matrix(1.0728302001953125, 0.1004180908203125, 0, 1, 919.2, 568.35);
-    /*animation: R0Layer00FILL 3s forwards;*/
-  }
+  };
+
+  // 批量控制同一key的所有元素
+  const animateByKey = (key: string, toEnd: boolean, duration: number = 3000) => {
+    animElements.forEach((el, elementId) => {
+      const info = elementInfo.get(elementId);
+      if (info && info.key === key) {
+        animateElement(elementId, toEnd, duration);
+      }
+    });
+  };
 
-  .___R_0_Layer0_0_FILL_animate_reverse {
+  // 导出方法以便外部调用
+  defineExpose({
+    animateElement,
+    animateByKey,
+  });
+</script>
+<style scoped>
+  /* 可以添加一些基础样式 */
+  [data-anim-id] {
     transition: transform 3s;
-    transform: matrix(1, 0, 0, 1, 920.85, 570.6);
-    /*animation: R0Layer00FILL 3s forwards reverse;*/
   }
 </style>

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

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
@@ -314,3 +315,16 @@ export const chartsColumns = [
   //   dataIndex: '2zdqfktl',
   // },
 ];
+
+export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    if (!is2DModel) return import('./components/entryThree.vue');
+    switch (sysOrgCode) {
+      // case '000000':
+      //   return import('./components/000000.vue');
+      default:
+        return import('./components/gateSVG.vue');
+    }
+  });
+}

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

@@ -1,32 +1,5 @@
 <template>
-  <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">
-        <div class="title">KJ-980-F矿用本安型监控分站</div>
-        <div class="detail-box">
-          <div class="left-box"></div>
-          <div class="right-box">
-            <div><span class="detail-title">规格型号：</span> <span>KJ-980-F</span></div>
-            <div
-              ><span class="detail-title">技术参数：</span>
-              <span
-                >380V，电机功率22kW,50Hz，B级绝缘，额定电流42.2A，效率90.5%，能效等级3，接法角型，2940r/min，轴承6311/CM 6211/CM，功率因数0.89</span
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </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>
+  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -367,7 +340,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref } from 'vue';
+  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref, defineAsyncComponent } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -379,7 +352,7 @@
   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 { chartsColumns, getModelComponent } from './gate.data';
   import lodash from 'lodash';
   import { setDivHeight } from '/@/utils/event';
   import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
@@ -396,12 +369,14 @@
   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<any>('globalConfig');
 
+  /** 模型对应的组件，根据实际情况分为二维三维 */
+  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+
   const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
   const MonitorDataTable = ref();
@@ -410,7 +385,7 @@
   const deviceType = ref('gate');
   const activeKey = ref('1'); // tab
   const loading = ref(false);
-  const stationType = ref('plc1');
+  // const stationType = ref('plc1');
   const scroll = reactive({
     y: 230,
   });

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

@@ -1101,7 +1101,7 @@ const getDataSource = async () => {
     data = Object.assign(data, readData);
     dataSource.value.push(data);
     IdList.value.push({
-      deviceId: data.deviceId,
+      deviceId: data.deviceID,
       strname: data.strname,
     });
   });
@@ -1122,7 +1122,8 @@ const getDataSource = async () => {
     }
   }
   await getPointData();
-  if (requestLock.value && sysOrgCode === 'hnjtymhmk') {
+  // && sysOrgCode === 'hnjtymhmk'
+  if (requestLock.value) {
     getFaultDiagnosisList(IdList.value);
   }
   return selectData;
@@ -1803,6 +1804,7 @@ function goOutLink(type: string) {
 }
 function getFaultDiagnosisList(data) {
   const idParams = data.map((item) => item.deviceId);
+  console.log('idParams', idParams);
   getFaultDiagnosis(idParams).then((res) => {
     const mergeById = (arr1, arr2) => {
       const map = new Map(arr2.map((item) => [String(item.deviceId), item]));
@@ -1813,8 +1815,8 @@ function getFaultDiagnosisList(data) {
     };
     if (res.length > 0 && data.length > 0) {
       warnList.value = mergeById(res, data);
+      modalWarnIsShow.value = true;
     }
-    modalWarnIsShow.value = true;
     requestLock.value = false;
   });
 }
@@ -1903,8 +1905,8 @@ onUnmounted(() => {
   width: auto;
 }
 .faultreason {
-  height: 30px;
-  line-height: 30px;
+  height: 50px;
+  line-height: 50px;
   background: url('/@/assets/images/vent/fault3.png') no-repeat;
   background-size: 100% 100%;
   width: auto;
@@ -1918,6 +1920,7 @@ onUnmounted(() => {
     font-size: 12px;
     color: #32d9e7;
     float: right;
+    white-space: normal;
   }
 }
 

src/views/vent/monitorManager/windowMonitor/components/entryThree.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
+    <a-spin :spinning="loading" />
+    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
+      <div>
+        <div ref="elementContent" class="elementContent">
+          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
+          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
+          <p><span class="data-title">故障诊断：</span>
+            <i
+              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
+            ></i>{{selectData.fault}}</p>
+        </div>
+      </div>
+    </div> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps<{ loading: boolean }>();
+</script>

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

@@ -1,20 +1,5 @@
 <template>
-  <div class="bg" style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden">
-    <a-spin :spinning="loading" />
-    <div id="window3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
-    <!-- <div id="damper3DCSS" v-show="!loading" style="width: 100%; height: 100%; top:0; left: 0; position: absolute; overflow: hidden;">
-      <div>
-        <div ref="elementContent" class="elementContent">
-          <p><span class="data-title">压力(Pa)：</span>{{selectData.frontRearDP}}</p>
-          <p><span class="data-title">动力源压力(MPa)：</span>{{selectData.sourcePressure}}</p>
-          <p><span class="data-title">故障诊断：</span>
-            <i
-              :class="{'state-icon': true, 'open': selectData.messageBoxStatus, 'close': !selectData.messageBoxStatus}"
-            ></i>{{selectData.fault}}</p>
-        </div>
-      </div>
-    </div> -->
-  </div>
+  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center" style="display: flex">
@@ -244,11 +229,17 @@
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getModelComponent } from './window.data';
+  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
   const globalConfig = inject('globalConfig');
 
+  /** 模型对应的组件，根据实际情况分为二维三维 */
+  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+
+  const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
 
   const MonitorDataTable = ref();
@@ -395,6 +386,7 @@
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
   const playAnimation = (data, maxarea = 90, isFirst = false) => {
+    triggerAnimation('shanye_0_Layer0_0_FILL', isFirst);
     computePlay(data, maxarea, isFirst);
   };
 

src/views/vent/monitorManager/windowMonitor/window.data.ts

@@ -1,4 +1,5 @@
 import { BasicColumn } from '/@/components/Table';
+import { defineAsyncComponent } from 'vue';
 import { FormSchema } from '/@/components/Table';
 import { rules } from '/@/utils/helper/validator';
 export const columns: BasicColumn[] = [
@@ -302,3 +303,16 @@ export const chartsColumns = [
     dataIndex: 'rearPresentValue',
   },
 ];
+
+export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+  // @ts-ignore
+  return defineAsyncComponent(() => {
+    if (!is2DModel) return import('./components/entryThree.vue');
+    switch (sysOrgCode) {
+      // case '000000':
+      //   return import('./components/000000.vue');
+      default:
+        return import('./components/windowSVG.vue');
+    }
+  });
+}

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

@@ -151,776 +151,775 @@
 </template>
 
 <script setup lang="ts">
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import MonitorTable from '../comment/MonitorTable.vue';
-import ModalTable from './components/modalTable.vue';
-import HandleModal from './components/modal.vue';
-import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-import ResultTable from './components/resultTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import AlarmNumTable from '../comment/AlarmNumTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
-import { list, pathList, deviceList, testWind, exportXls, resetWind, getRegulation } from './windrect.api';
-import { message, Progress } from 'ant-design-vue';
-import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { useModal } from '/@/components/Modal';
-import { useCamera } from '/@/hooks/system/useCamera';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-const { hasPermission } = usePermission();
-
-const globalConfig = inject('globalConfig');
-
-const { sysOrgCode } = useGlobSetting();
-const { currentRoute } = useRouter();
-
-const MonitorDataTable = ref();
-const scroll = reactive({
-  y: 230,
-});
-const modalType = ref('');
-const modalIsShow = ref(false);
-const modalTable = ref();
-const runNum = ref(5); //设备运行数量
-const criticalPathList = ref([]);
-const playerRef = ref();
-const activeKey = ref('1');
-const loading = ref(false);
-// 默认初始是第一行
-const selectRowIndex = ref(-1);
-// 监测数据
-const selectData = reactive({
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  // sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  sign: -1,
-  sensorRight: 0,
-  sensorMiddle: 1,
-  sensorLeft: 0,
-});
-const deviceType = ref('windrect');
-const deviceId = ref('');
-const chartsColumnArr = getTableHeaderColumns('windrect_chart');
-const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
-
-// const dataSource = computed(() => {
-//   const data = [...getRecordList()] || [];
-//   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-//   addMonitorText(selectData);
-//   return data;
-// });
-
-const dataSource = ref([]);
-const [regModal, { openModal }] = useModal();
-
-const { getCamera, removeCamera } = useCamera();
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-    });
-  }
-};
-
-// 设备数据
-const controlType = ref(1);
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner();
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-// function getMonitor(flag?) {
-//   if (Object.prototype.toString.call(timer) === '[object Null]') {
-//     timer = setTimeout(
-//       () => {
-//         list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
-//           if (res && res.msgTxt[0]) {
-//             // dataSource.value = res.msgTxt[0].datalist || [];
-//             const getData = res.msgTxt[0].datalist || [];
-//             getData.forEach((data) => {
-//               if (data.regulation) {
-//                 getRegulationList(data.regulation);
-//               }
-//             });
-//             dataSource.value = getData;
-//             if (dataSource.value.length > 0) {
-//               dataSource.value.forEach((data: any) => {
-//                 const readData = data.readData;
-//                 data = Object.assign(data, readData);
-//               });
-//               if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
-//                 // 初始打开页面
-//                 if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
-//                   MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
-//                 } else {
-//                   MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
-//                 }
-//               }
-//               const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-//               Object.assign(selectData, data);
-//               addMonitorText(selectData);
-
-//               palyAnimation(selectData);
-//             }
-//           }
-//           if (timer) {
-//             timer = null;
-//           }
-//           getMonitor();
-//         });
-//       },
-//       flag ? 0 : 1000
-//     );
-//   }
-// }
-// function getRegulationList(data) {
-//   getRegulation().then((res) => {
-//     if (res) {
-//       const regulation = res.find((item) => item.id == data);
-//       data.regulation = regulation;
-//       data.fmin = data.regulation.fmin;
-//       data.fmax = data.regulation.fmax;
-//     }
-//   });
-// }
-function getMonitor(flag?: boolean) {
-  if (timer === null) {
-    timer = setTimeout(
-      async () => {
-        try {
-          const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
-          if (res && res.msgTxt[0]) {
-            const rawData = res.msgTxt[0].datalist || [];
-            const processedData = [...rawData];
-
-            // 并行获取所有regulation数据
-            const regulationPromises = processedData.filter((data) => data.regulation).map((data) => getRegulationList(data.regulation, data));
-
-            await Promise.all(regulationPromises);
-
-            // 确保所有异步操作完成后再更新数据源
-            dataSource.value = processedData;
-
-            // 处理readData和初始选择
-            if (dataSource.value.length > 0) {
-              await processReadData(processedData);
-              await handleInitialSelection();
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import ModalTable from './components/modalTable.vue';
+  import HandleModal from './components/modal.vue';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+  import ResultTable from './components/resultTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import AlarmNumTable from '../comment/AlarmNumTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
+  import { list, pathList, deviceList, testWind, exportXls, resetWind, getRegulation } from './windrect.api';
+  import { message, Progress } from 'ant-design-vue';
+  import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { hasPermission } = usePermission();
+
+  const globalConfig = inject('globalConfig');
+
+  const { sysOrgCode } = useGlobSetting();
+  const { currentRoute } = useRouter();
+
+  const MonitorDataTable = ref();
+  const scroll = reactive({
+    y: 230,
+  });
+  const modalType = ref('');
+  const modalIsShow = ref(false);
+  const modalTable = ref();
+  const runNum = ref(5); //设备运行数量
+  const criticalPathList = ref([]);
+  const playerRef = ref();
+  const activeKey = ref('1');
+  const loading = ref(false);
+  // 默认初始是第一行
+  const selectRowIndex = ref(-1);
+  // 监测数据
+  const selectData = reactive({
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    // sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    sign: -1,
+    sensorRight: 0,
+    sensorMiddle: 1,
+    sensorLeft: 0,
+  });
+  const deviceType = ref('windrect');
+  const deviceId = ref('');
+  const chartsColumnArr = getTableHeaderColumns('windrect_chart');
+  const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
+
+  // const dataSource = computed(() => {
+  //   const data = [...getRecordList()] || [];
+  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
+  //   addMonitorText(selectData);
+  //   return data;
+  // });
+
+  const dataSource = ref([]);
+  const [regModal, { openModal }] = useModal();
+
+  const { getCamera, removeCamera } = useCamera();
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+
+  // 设备数据
+  const controlType = ref(1);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  // function getMonitor(flag?) {
+  //   if (Object.prototype.toString.call(timer) === '[object Null]') {
+  //     timer = setTimeout(
+  //       () => {
+  //         list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
+  //           if (res && res.msgTxt[0]) {
+  //             // dataSource.value = res.msgTxt[0].datalist || [];
+  //             const getData = res.msgTxt[0].datalist || [];
+  //             getData.forEach((data) => {
+  //               if (data.regulation) {
+  //                 getRegulationList(data.regulation);
+  //               }
+  //             });
+  //             dataSource.value = getData;
+  //             if (dataSource.value.length > 0) {
+  //               dataSource.value.forEach((data: any) => {
+  //                 const readData = data.readData;
+  //                 data = Object.assign(data, readData);
+  //               });
+  //               if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
+  //                 // 初始打开页面
+  //                 if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+  //                   MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+  //                 } else {
+  //                   MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+  //                 }
+  //               }
+  //               const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+  //               Object.assign(selectData, data);
+  //               addMonitorText(selectData);
+
+  //               palyAnimation(selectData);
+  //             }
+  //           }
+  //           if (timer) {
+  //             timer = null;
+  //           }
+  //           getMonitor();
+  //         });
+  //       },
+  //       flag ? 0 : 1000
+  //     );
+  //   }
+  // }
+  // function getRegulationList(data) {
+  //   getRegulation().then((res) => {
+  //     if (res) {
+  //       const regulation = res.find((item) => item.id == data);
+  //       data.regulation = regulation;
+  //       data.fmin = data.regulation.fmin;
+  //       data.fmax = data.regulation.fmax;
+  //     }
+  //   });
+  // }
+  function getMonitor(flag?: boolean) {
+    if (timer === null) {
+      timer = setTimeout(
+        async () => {
+          try {
+            const res = await list({ devicetype: deviceType.value, pagetype: 'normal' });
+            if (res && res.msgTxt[0]) {
+              const rawData = res.msgTxt[0].datalist || [];
+              const processedData = [...rawData];
+
+              // 并行获取所有regulation数据
+              const regulationPromises = processedData.filter((data) => data.regulation).map((data) => getRegulationList(data.regulation, data));
+
+              await Promise.all(regulationPromises);
+
+              // 确保所有异步操作完成后再更新数据源
+              dataSource.value = processedData;
+
+              // 处理readData和初始选择
+              if (dataSource.value.length > 0) {
+                await processReadData(processedData);
+                await handleInitialSelection();
+              }
             }
+          } catch (error) {
+            console.error('Erro', error);
+          } finally {
+            timer = null;
+            getMonitor(flag);
           }
-        } catch (error) {
-          console.error('Erro', error);
-        } finally {
-          timer = null;
-          getMonitor(flag);
-        }
-      },
-      flag ? 0 : 1000
-    );
-  }
-}
-
-async function getRegulationList(regulationId: string, data: any) {
-  const res = await getRegulation();
-  if (res) {
-    const regulation = res.find((item) => item.id === regulationId);
-    if (regulation) {
-      data.regulation = regulation;
-      data.fmin = regulation.fmin;
-      data.fmax = regulation.fmax;
+        },
+        flag ? 0 : 1000
+      );
     }
   }
-}
 
-async function processReadData(data: any[]) {
-  const promises = data
-    .filter((item) => item.readData)
-    .map(async (item) => {
-      item.readData && Object.assign(item, item.readData);
-    });
-  await Promise.all(promises);
-}
-
-async function handleInitialSelection() {
-  if (selectRowIndex.value === -1 && dataSource.value.length > 0) {
-    const deviceId = currentRoute.value?.query?.['id'] || dataSource.value[0]['deviceID'];
-    selectRowIndex.value = dataSource.value.findIndex((item) => item.deviceID === deviceId);
-
-    const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
-    Object.assign(selectData, selectedData);
-    addMonitorText(selectData);
-    palyAnimation(selectedData);
+  async function getRegulationList(regulationId: string, data: any) {
+    const res = await getRegulation();
+    if (res) {
+      const regulation = res.find((item) => item.id === regulationId);
+      if (regulation) {
+        data.regulation = regulation;
+        data.fmin = regulation.fmin;
+        data.fmax = regulation.fmax;
+      }
+    }
+  }
 
-    MonitorDataTable.value.setSelectedRowKeys([deviceId]);
+  async function processReadData(data: any[]) {
+    const promises = data
+      .filter((item) => item.readData)
+      .map(async (item) => {
+        item.readData && Object.assign(item, item.readData);
+      });
+    await Promise.all(promises);
   }
-}
-let deviceRunState = '',
-  tanTouRunState = '';
-// 根据3个点位分别执行动画
-function palyAnimation(selectData) {
-  if (selectData.deviceType == 'windrect_normal') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag, true);
+
+  async function handleInitialSelection() {
+    if (dataSource.value.length > 0) {
+      const selectedData = toRaw(dataSource.value[selectRowIndex.value]);
+      Object.assign(selectData, selectedData);
+      addMonitorText(selectData);
+      palyAnimation(selectedData);
     }
   }
-  // 运行中是0，运行到达是1
-  if (selectData.deviceType == 'windrect_rect_single') {
-    if (selectData['apparatusRun'] == 1) {
-      // 镜头指向横杆
-      // if(!deviceRunState && !tanTouRunState)playCamera('start')
-      // 正在执行或是开始执行
-
-      //开始执行时，
-      // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
-
-      // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
-      // 2. 探头左移play('left')
-      // 3. 探头右移play('right')
-      // 4. 横杆向中位移动，探头在右边
-      // 5. 探头移到中间play('middle')
-      // 6. 探头移到左边play('left')
-      // 7. 横杆向低位移动，探头在左边
-      // 8. 探头移到中间play('middle')
-      // 9. 探头右移play('right')
-      // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-      if (selectData['poleIncipient'] == 1) {
-        // 横杆在高位，开始执行 或是 执行结束
-        if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
-          // 1. 开始执行
-          deviceRunState = 'up';
-          tanTouRunState = 'middle';
-          play('up', true);
-          play('middle', true);
-        }
-        if (deviceRunState == 'up-m') {
-          play('up', true);
-          play('middle', true);
-          deviceRunState = '';
-          tanTouRunState = '';
-          playCamera('end');
-        }
-        // 初始已经在运行
+  let deviceRunState = '',
+    tanTouRunState = '';
+  // 根据3个点位分别执行动画
+  function palyAnimation(selectData) {
+    if (selectData.deviceType == 'windrect_normal') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag, true);
+      }
+    }
+    // 运行中是0，运行到达是1
+    if (selectData.deviceType == 'windrect_rect_single') {
+      if (selectData['apparatusRun'] == 1) {
+        // 镜头指向横杆
+        // if(!deviceRunState && !tanTouRunState)playCamera('start')
+        // 正在执行或是开始执行
+
+        //开始执行时，
+        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
+
+        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
+        // 2. 探头左移play('left')
+        // 3. 探头右移play('right')
+        // 4. 横杆向中位移动，探头在右边
+        // 5. 探头移到中间play('middle')
+        // 6. 探头移到左边play('left')
+        // 7. 横杆向低位移动，探头在左边
+        // 8. 探头移到中间play('middle')
+        // 9. 探头右移play('right')
+        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+        if (selectData['poleIncipient'] == 1) {
+          // 横杆在高位，开始执行 或是 执行结束
+          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
+            // 1. 开始执行
+            deviceRunState = 'up';
+            tanTouRunState = 'middle';
+            play('up', true);
+            play('middle', true);
+          }
+          if (deviceRunState == 'up-m') {
+            play('up', true);
+            play('middle', true);
+            deviceRunState = '';
+            tanTouRunState = '';
+            playCamera('end');
+          }
+          // 初始已经在运行
 
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //2.探头左移play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //2.探头左移play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
+            //3. 探头右移play('right')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
           }
-          //3. 探头右移play('right')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
-            play('left', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
           }
-        }
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
+        } else if (selectData['poleMiddle'] == 1) {
+          if (deviceRunState == 'center-m') {
+            play('center', true);
+            deviceRunState = 'center';
+            tanTouRunState = 'right';
+            play('right', true);
+          }
+          if (!deviceRunState) {
+            deviceRunState = 'center';
+            play('center', true);
+          }
+          if (!tanTouRunState) {
             play('right', true);
           }
-        }
-      } else if (selectData['poleMiddle'] == 1) {
-        if (deviceRunState == 'center-m') {
-          play('center', true);
-          deviceRunState = 'center';
-          tanTouRunState = 'right';
-          play('right', true);
-        }
-        if (!deviceRunState) {
-          deviceRunState = 'center';
-          play('center', true);
-        }
-        if (!tanTouRunState) {
-          play('right', true);
-        }
 
-        // 横杆在中位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //5. 探头移到中间play('middle')
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'middle-m';
-            play('middle');
+          // 横杆在中位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //5. 探头移到中间play('middle')
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'middle-m';
+              play('middle');
+            }
+            //6. 探头移到左边play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
           }
-          //6. 探头移到左边play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorMiddle == 1) {
+            tanTouRunState = 'middle';
+            if (!tanTouRunState || tanTouRunState == 'middle-m') {
+              play('middle', true);
+            }
           }
-        }
-        if (selectData.sensorMiddle == 1) {
-          tanTouRunState = 'middle';
-          if (!tanTouRunState || tanTouRunState == 'middle-m') {
-            play('middle', true);
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
+        } else if (selectData['poleNether'] == 1) {
+          if (deviceRunState == 'down-m') {
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
             play('left', true);
           }
-        }
-      } else if (selectData['poleNether'] == 1) {
-        if (deviceRunState == 'down-m') {
-          play('down', true);
-          deviceRunState = 'down';
-          tanTouRunState = 'left';
-          play('left', true);
-        }
-        if (!deviceRunState) {
-          play('down', true);
-          deviceRunState = 'down';
-        }
-        if (!tanTouRunState) {
-          play('left', true);
-        }
-        // 横杆在低位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //8. 探头移到中间play('middle')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'left-middle-m';
-            play('middle');
+          if (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
-          //9. 探头右移play('right')
-          if (tanTouRunState == 'middle1') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (!tanTouRunState) {
+            play('left', true);
           }
-          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'right-middle-m';
-            play('middle');
+          // 横杆在低位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //8. 探头移到中间play('middle')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'left-middle-m';
+              play('middle');
+            }
+            //9. 探头右移play('right')
+            if (tanTouRunState == 'middle1') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
+            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'right-middle-m';
+              play('middle');
+            }
           }
-        }
 
-        if (selectData.sensorMiddle == 1) {
-          if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
-          if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
+          if (selectData.sensorMiddle == 1) {
+            if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
+            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
 
-          if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
-            play('middle', true);
+            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
+              play('middle', true);
+            }
           }
-        }
 
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
-            play('right', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
+          }
+        } else {
+          // 横杆正在运行
+          if (deviceRunState == 'up') {
+            deviceRunState = 'center-m';
+            play('center');
+          }
+          if (deviceRunState == 'center') {
+            deviceRunState = 'down-m';
+            play('down');
+          }
+          if (deviceRunState == 'down') {
+            deviceRunState = 'up-m';
+            play('up');
           }
         }
-      } else {
-        // 横杆正在运行
-        if (deviceRunState == 'up') {
-          deviceRunState = 'center-m';
-          play('center');
-        }
-        if (deviceRunState == 'center') {
-          deviceRunState = 'down-m';
-          play('down');
-        }
-        if (deviceRunState == 'down') {
-          deviceRunState = 'up-m';
-          play('up');
-        }
-      }
 
-      // //正在执行时
+        // //正在执行时
 
-      // // 判断上中下是否都为0
-      // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
-      //   // 判断是否有前一个状态值，有的话执行
-      //   //没有前一个状态
+        // // 判断上中下是否都为0
+        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
+        //   // 判断是否有前一个状态值，有的话执行
+        //   //没有前一个状态
 
-      //   //有前一个状态
+        //   //有前一个状态
 
-      //   // 横杆前状态在上位时，横杆中位移动，探头在右边
+        //   // 横杆前状态在上位时，横杆中位移动，探头在右边
 
-      //   // 横杆前状态在中位时，横杆下位移动，探头在左边
+        //   // 横杆前状态在中位时，横杆下位移动，探头在左边
 
-      //   // 横杆前状态在下位时，横杆上位移动，探头在中间
+        //   // 横杆前状态在下位时，横杆上位移动，探头在中间
 
-      // }else{
-      //   // 判断当前动画停在固定位置
-      //   if(selectData['poleIncipient'] == 1) {
-      //     // 滑杆停在上面，探头在中间
+        // }else{
+        //   // 判断当前动画停在固定位置
+        //   if(selectData['poleIncipient'] == 1) {
+        //     // 滑杆停在上面，探头在中间
 
-      //   }else if (selectData['poleMiddle'] == 1) {
-      //     // 滑杆停在中间面，初始探头在右边
+        //   }else if (selectData['poleMiddle'] == 1) {
+        //     // 滑杆停在中间面，初始探头在右边
 
-      //   } else if (selectData['poleNether'] == 1) {
-      //     // 滑杆停在下面，初始探头在左边
+        //   } else if (selectData['poleNether'] == 1) {
+        //     // 滑杆停在下面，初始探头在左边
 
-      //   }
-      // }
-    } else {
-      // if(selectData['poleIncipient'] == 1){
-      //   deviceRunState = ''
-      //   tanTouRunState = ''
-      // }
+        //   }
+        // }
+      } else {
+        // if(selectData['poleIncipient'] == 1){
+        //   deviceRunState = ''
+        //   tanTouRunState = ''
+        // }
+      }
     }
-  }
 
-  if (selectData.deviceType == 'windrect_rect') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
-      if (flag) play(flag, true);
+    if (selectData.deviceType == 'windrect_rect') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
+        if (flag) play(flag, true);
+      }
+    }
+
+    if (selectData.deviceType == 'windrect_ds') {
+      if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
+        if (!deviceRunState) {
+          deviceRunState = 'start';
+          play('down');
+        }
+      } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+        deviceRunState = '';
+        play('up');
+      }
     }
   }
 
-  if (selectData.deviceType == 'windrect_ds') {
-    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-      if (!deviceRunState) {
-        deviceRunState = 'start';
+  // 自测动画方法
+  function testPlay(flag) {
+    if (selectData.deviceType == 'windrect_rect') {
+      setTimeout(() => {
+        play('center');
+      }, 0);
+      setTimeout(() => {
         play('down');
+      }, 4000);
+      setTimeout(() => {
+        play('up');
+      }, 10000);
+    }
+    if (selectData.deviceType == 'windrect_normal') {
+      setTimeout(() => {
+        play('up');
+      }, 0);
+      setTimeout(() => {
+        play('center');
+      }, 10000);
+      setTimeout(() => {
+        play('down');
+      }, 18000);
+      setTimeout(() => {
+        play('up');
+      }, 21000);
+    }
+    if (selectData.deviceType == 'windrect_ds') {
+      play('moni');
+    }
+  }
+
+  function clearPlay() {
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+
+  function startRun() {
+    modalType.value = 'sing';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
+  }
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (selectRow) {
+      loading.value = true;
+      selectRowIndex.value = index;
+      Object.assign(selectData, selectRow);
+      let type = '';
+      if (selectRow['modelType']) {
+        type = selectRow['modelType'];
+        // debugger;
+      } else {
+        if (selectRow.deviceType.startsWith('windrect_rect')) {
+          type = 'lmWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_normal')) {
+          type = 'zdWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_rect_single')) {
+          type = 'lmWindSide';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds')) {
+          type = 'dsWindRect_move';
+          // type = 'duisheFixed';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_four')) {
+          //windrect_ds_two
+          type = 'dsWindRect_four';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_two')) {
+          type = 'dsWindRect_two';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
+          type = 'duisheFixed';
+        }
+        if (
+          selectRow.deviceType.startsWith('windrect_dd') ||
+          selectRow.deviceType == 'windrect_safety' ||
+          selectRow.deviceType == 'windrect_sensor'
+        ) {
+          type = 'ddWindSide';
+        }
       }
-    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+
+      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      await setModelType(type);
+      loading.value = false;
       deviceRunState = '';
-      play('up');
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
     }
   }
-}
-
-// 自测动画方法
-function testPlay(flag) {
-  if (selectData.deviceType == 'windrect_rect') {
-    setTimeout(() => {
-      play('center');
-    }, 0);
-    setTimeout(() => {
-      play('down');
-    }, 4000);
-    setTimeout(() => {
-      play('up');
-    }, 10000);
-  }
-  if (selectData.deviceType == 'windrect_normal') {
-    setTimeout(() => {
-      play('up');
-    }, 0);
-    setTimeout(() => {
-      play('center');
-    }, 10000);
-    setTimeout(() => {
-      play('down');
-    }, 18000);
-    setTimeout(() => {
-      play('up');
-    }, 21000);
+
+  /* 一键测风 */
+  function handleOk() {
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-  if (selectData.deviceType == 'windrect_ds') {
-    play('moni');
+
+  /* 打开一键测风弹窗 */
+  function openModel() {
+    setModalProps({ visible: true });
   }
-}
 
-function clearPlay() {
-  modalType.value = 'autoClear';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function resetHandle() {
+    modalType.value = 'resetWind';
+    modalIsShow.value = true;
   }
-}
 
-function startRun() {
-  modalType.value = 'sing';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function exportExcel(id) {
+    exportXls({ testid: id });
   }
-}
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (selectRow) {
-    loading.value = true;
-    selectRowIndex.value = index;
-    Object.assign(selectData, selectRow);
-    let type = '';
-    if (selectRow['modelType']) {
-      type = selectRow['modelType'];
-      // debugger;
-    } else {
-      if (selectRow.deviceType.startsWith('windrect_rect')) {
-        type = 'lmWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_normal')) {
-        type = 'zdWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
-        type = 'lmWindSide';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds')) {
-        type = 'dsWindRect_move';
-        // type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
-        //windrect_ds_two
-        type = 'dsWindRect_four';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
-        type = 'dsWindRect_two';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
-        type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
-        type = 'ddWindSide';
-      }
-    }
 
-    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
-    await setModelType(type);
-    loading.value = false;
-    deviceRunState = '';
-    tanTouRunState = '';
-    await getCamera(selectRow.deviceID, playerRef.value);
+  /* 关闭一键测风弹窗 */
+  function handleCancel() {
+    setModalProps({ visible: false });
+    modalTable.value.clearSelectedRowKeys();
   }
-}
-
-/* 一键测风 */
-function handleOk() {
-  modalType.value = 'multiple';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+
+  /* 关闭一键测风控制*/
+  function handleCancelControl() {
+    modalIsShow.value = false;
   }
-}
-
-/* 打开一键测风弹窗 */
-function openModel() {
-  setModalProps({ visible: true });
-}
-
-function resetHandle() {
-  modalType.value = 'resetWind';
-  modalIsShow.value = true;
-}
-
-function exportExcel(id) {
-  exportXls({ testid: id });
-}
-
-/* 关闭一键测风弹窗 */
-function handleCancel() {
-  setModalProps({ visible: false });
-  modalTable.value.clearSelectedRowKeys();
-}
-
-/* 关闭一键测风控制*/
-function handleCancelControl() {
-  modalIsShow.value = false;
-}
-
-function controlDevice(passWord, type) {
-  try {
-    if (type == 'sing') {
-      testWind({
-        ids: [selectData.deviceID],
-        maxnum: 1000,
-        windnum: 1,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+
+  function controlDevice(passWord, type) {
+    try {
+      if (type == 'sing') {
+        testWind({
+          ids: [selectData.deviceID],
+          maxnum: 1000,
+          windnum: 1,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-      });
-    } else if (type == 'multiple') {
-      const ids = toRaw(modalTable.value.selectedRowKeys);
-      testWind({
-        ids: ids,
-        maxnum: 1000,
-        windnum: modalTable.value.selectedRowKeys.length,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+        });
+      } else if (type == 'multiple') {
+        const ids = toRaw(modalTable.value.selectedRowKeys);
+        testWind({
+          ids: ids,
+          maxnum: 1000,
+          windnum: modalTable.value.selectedRowKeys.length,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-        setModalProps({ visible: false });
-        modalTable.value.clearSelectedRowKeys();
-      });
-    } else if (type == 'autoClear') {
-      const data = {
-        deviceid: selectData.deviceID,
-        devicetype: selectData.deviceType,
-        paramcode: 'autoClear',
-        value: null,
-        password: passWord || globalConfig?.simulatedPassword,
-        masterComputer: selectData.masterComputer,
-      };
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
-        if (res.success) {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+          setModalProps({ visible: false });
+          modalTable.value.clearSelectedRowKeys();
+        });
+      } else if (type == 'autoClear') {
+        const data = {
+          deviceid: selectData.deviceID,
+          devicetype: selectData.deviceType,
+          paramcode: 'autoClear',
+          value: null,
+          password: passWord || globalConfig?.simulatedPassword,
+          masterComputer: selectData.masterComputer,
+        };
+        deviceControlApi(data).then((res) => {
+          // 模拟时开启
+          if (res.success) {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           } else {
-            message.success('指令已下发成功！');
+            message.error(res.message);
           }
-        } else {
-          message.error(res.message);
-        }
+          modalIsShow.value = false;
+        });
+      } else if (type == 'resetWind') {
+        resetWind({}).then((res: any) => {
+          message.info(res);
+        });
         modalIsShow.value = false;
-      });
-    } else if (type == 'resetWind') {
-      resetWind({}).then((res: any) => {
-        message.info(res);
-      });
+      }
+    } catch (error) {
+      message.error('测风失败，请联系管理员。。。');
       modalIsShow.value = false;
     }
-  } catch (error) {
-    message.error('测风失败，请联系管理员。。。');
-    modalIsShow.value = false;
   }
-}
 
-/** 避灾路线上的测风装置 */
-async function getPathList() {
-  const pathArr = await pathList({});
-  criticalPathList.value = pathArr.records.filter((item) => {
-    return item.strsystype == 3;
-  });
-}
-
-/* 根据路线选择测风装置 */
-function selectCriticalPath(pathId) {
-  deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
-    const ids: string[] = [];
-    res.records.forEach((item) => {
-      ids.push(item.id);
+  /** 避灾路线上的测风装置 */
+  async function getPathList() {
+    const pathArr = await pathList({});
+    criticalPathList.value = pathArr.records.filter((item) => {
+      return item.strsystype == 3;
     });
-    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-  });
-}
+  }
 
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation();
-  openModal(true, {
-    type,
-    deviceId: record['deviceID'],
+  /* 根据路线选择测风装置 */
+  function selectCriticalPath(pathId) {
+    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
+      const ids: string[] = [];
+      res.records.forEach((item) => {
+        ids.push(item.id);
+      });
+      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
+    });
+  }
+
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
+
+  onBeforeMount(() => {
+    getPathList();
   });
-}
-
-onBeforeMount(() => {
-  getPathList();
-});
-
-onMounted(async () => {
-  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
-  // loading.value = true;
-  // mountedThree(playerDom).then(async () => {
-  //   getMonitor(true);
-  //   // loading.value = false;
-  // });
-  const { query } = unref(currentRoute);
-  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-  loading.value = true;
-  mountedThree(null).then(async () => {
-    await getMonitor(true);
-    loading.value = false;
+
+  onMounted(async () => {
+    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+    // loading.value = true;
+    // mountedThree(playerDom).then(async () => {
+    //   getMonitor(true);
+    //   // loading.value = false;
+    // });
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+    loading.value = true;
+    mountedThree(null).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-});
 
-onUnmounted(() => {
-  removeCamera();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy();
-});
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+  });
 </script>
 <style scoped lang="less">
-@import '/@/design/theme.less';
-@import '/@/design/vent/modal.less';
-@ventSpace: zxm;
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
-.scene-box {
-  .bottom-tabs-box {
-    height: 350px;
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @ventSpace: zxm;
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    height: 100%;
   }
-}
-.head-line {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  .button-box {
-    position: relative;
-    padding: 5px;
-    border: 1px transparent solid;
-    border-radius: 5px;
-    margin-left: 8px;
-    margin-right: 8px;
-    width: auto;
-    height: 34px;
-    border: 1px solid var(--vent-base-border);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--vent-font-color);
-    padding: 0 15px;
-    cursor: pointer;
-    pointer-events: auto;
-    &:hover {
-      background: var(--vent-device-manager-control-btn-hover);
+  .scene-box {
+    .bottom-tabs-box {
+      height: 350px;
     }
-    &::before {
-      width: calc(100% - 6px);
-      height: 26px;
-      content: '';
-      position: absolute;
-      top: 3px;
-      right: 0;
-      left: 3px;
-      bottom: 0;
-      z-index: -1;
-      border-radius: inherit; /*important*/
-      background: var(--vent-device-manager-control-btn);
+  }
+  .head-line {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    .button-box {
+      position: relative;
+      padding: 5px;
+      border: 1px transparent solid;
+      border-radius: 5px;
+      margin-left: 8px;
+      margin-right: 8px;
+      width: auto;
+      height: 34px;
+      border: 1px solid var(--vent-base-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--vent-font-color);
+      padding: 0 15px;
+      cursor: pointer;
+      pointer-events: auto;
+      &:hover {
+        background: var(--vent-device-manager-control-btn-hover);
+      }
+      &::before {
+        width: calc(100% - 6px);
+        height: 26px;
+        content: '';
+        position: absolute;
+        top: 3px;
+        right: 0;
+        left: 3px;
+        bottom: 0;
+        z-index: -1;
+        border-radius: inherit; /*important*/
+        background: var(--vent-device-manager-control-btn);
+      }
     }
   }
-}
-:deep(.@{ventSpace}-picker-datetime-panel) {
-  height: 200px !important;
-  overflow-y: auto !important;
-}
+  :deep(.@{ventSpace}-picker-datetime-panel) {
+    height: 200px !important;
+    overflow-y: auto !important;
+  }
 </style>