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

README.md

@@ -189,34 +189,33 @@ function themifyScript(
 
 2、将图组放入指定脚本的工作区内生成可用的vue组件，脚本可见项目的README文档，然后自行新建文件、复制代码、安装依赖并运行
 
-3、将可用的vue组件引入到需要使用动画的页面中，并使用useSvgAnimation钩子进行动画控制，例如`<SVGAnimation :manager="animationManager" />`
+3、将可用的vue组件引入到需要使用动画的页面中，并使用useSvgAnimation钩子进行动画控制，例如`<SVGAnimation ref="svgRef" />`
 
-4、通过浏览器的元素检查功能，找到svg对应的group，复制group的id，并使用该id进行动画控制
+4、通过浏览器的元素检查功能，找到svg对应的group，复制group的id，并使用该id进行动画控制，详细可见步骤2中生成的组件的`animate`方法注释
 
 使用示例：
 
 ```vue
 <template>
-  <SVGAni :manager="animationManager" />
+  <SVGAni ref="svgRef" />
 </template>
 <script setup>
   import SVGAni from 'path/to/SVGAnimation.vue';
-  import useSvgAnimation from 'path/to/useSvgAnimation.ts';
 
-  const { animationManager，triggerAnimation } = useSvgAnimation();
+  const modelRef = ref();
 
   onMounted(() => {
-    // 根据情况触发动画
+    // 根据情况触发动画，每个组件有各自的animate实现，需要传入不同的参数
     if (condition) {
-      triggerAnimation('id', false);
-      } else {
-      triggerAnimation('id', true);
-      }
-  })
+      modelRef.value?.animate?.(specialArgs);
+    } else {
+      modelRef.value?.animate?.(specialArgs);
+    }
+  });
 </script>
 ```
 
-上述的生成组件的脚本如下：
+上述的生成组件的脚本如下，注意脚本需要独立安装依赖运行：
 
 ```javascript
 const fs = require('fs');
@@ -408,14 +407,9 @@ function generateVueComponent(svgContent, elementInfoMap, keys) {
   return `
 <template>\n${svgContent}\n</template>\n\n
 <script setup lang="ts">
-import { watch, onMounted, defineExpose, defineProps } from "vue";
+import { onMounted, defineExpose } from "vue";
+import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
-const props = defineProps<{
-  manager: Record<string, boolean>;
-}>();
-
-// 存储所有动画元素（不在模板中使用，不需要ref）
-const animElements = new Map<string, HTMLElement>();
 
 // 元素信息（常量数据，使用Map）
 const elementInfo = new Map([
@@ -424,55 +418,27 @@ ${Array.from(elementInfoMap.entries())
   .join(',\n')}
 ]);
 
+const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
+
 // 初始化元素引用
 onMounted(() => {
-  elementInfo.forEach((info, elementId) => {
+  elementInfo.forEach((__, 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);
+      animationElements.set(elementId, el as HTMLElement);
     }
   });
 });
 
-// 监听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);
-    }
-  });
-};
-
+/** 根据SVG的使用场景播放动画 */
+function animate() {
+  // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#RE_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
+  // triggerAnimation(["${keys.join('","')}"], false);
+}
 
 // 导出方法以便外部调用
 defineExpose({
-  animateElement,
-  animateByKey
+  animate,
 });
 </script>
 <style scoped>
@@ -507,13 +473,25 @@ async function main() {
     const files = fs
       .readdirSync(workspaceDir)
       .filter((file) => file.endsWith('.svg'))
-      .sort(); // 按字母顺序排序以确保正确的动画顺序
+      .sort((a, b) => {
+        const getNumber = (filename) => {
+          // 匹配文件名中的数字（在最后以后缀形式例如_1、_2）
+          const arr = filename.split('_');
+          return parseInt(arr[arr.length - 1]);
+        };
+
+        const numA = getNumber(a);
+        const numB = getNumber(b);
+
+        return numA - numB;
+      });
 
     if (files.length === 0) {
       throw new Error('workspace目录下没有找到SVG文件');
     }
 
     console.log(`找到 ${files.length} 个SVG文件`);
+    console.log(`序列为：\n${files.join('\n')}`);
 
     // 读取第一个SVG文件
     const firstSvgPath = path.join(workspaceDir, files[0]);

src/hooks/vent/useSvgAnimation.ts

@@ -5,7 +5,9 @@ import { ref } from 'vue';
  *
  * 备注：一个元素的动画仅有两种状态，正常播放、倒放；例如：`triggerAnimation(id1, false)`代表触发id1对应的动画，false代表触发正常播放的动画
  */
-export function useSvgAnimation() {
+export function useSvgAnimation(elementInfo: Map<string, { key: string; transforms: string[] }>) {
+  /** 所有动画元素 */
+  const animationElements = new Map<string, HTMLElement>();
   /** 管理节点是否处于初始状态 */
   const animationManager = ref<{ [id: string]: boolean }>({});
 
@@ -17,7 +19,7 @@ export function useSvgAnimation() {
    * @param id 标识符号（可以在页面中使用元素选择器选择具体元素后查询其id），可以传数组
    * @param reverse 是否需要反向执行动画，如果id传了数组该参数可以传数组以一一匹配，默认为false
    */
-  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false) {
+  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false, duration = 3000) {
     const idArray = typeof id === 'string' ? [id] : id;
     const reverseArray = typeof reverse === 'boolean' ? idArray.map(() => reverse) : reverse;
 
@@ -27,31 +29,59 @@ export function useSvgAnimation() {
       }
       const unchanged = animationManager.value[id];
 
-      //   const element = document.querySelector(`#${id}`) as SVGElement;
-      //   if (!element) return;
-      //   const group = element.parentElement?.parentElement;
-      //   console.log('debug rrrr', element, group);
-      //   if (!group) return;
-
       const reverse = reverseArray[index] || false;
       // 不指定反向播放且group处于初始状态时播放正常动画
       if (!reverse && unchanged) {
-        // group.classList.remove(`${id}_animate_reverse`);
-        // group.classList.add(`${id}_animate`);
         animationManager.value[id] = false;
+        animateByKey(id, true, duration);
         return;
       }
       if (reverse && !unchanged) {
-        // group.classList.remove(`${id}_animate`);
-        // group.classList.add(`${id}_animate_reverse`);
         animationManager.value[id] = true;
+        animateByKey(id, false, duration);
         return;
       }
     });
   }
 
+  // 直接控制动画的方法
+  const animateElement = (elementId: string, toEnd: boolean, duration: number = 3000) => {
+    const el = animationElements.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) => {
+    animationElements.forEach((__, elementId) => {
+      const info = elementInfo.get(elementId);
+      if (info && info.key === key) {
+        animateElement(elementId, toEnd, duration);
+      }
+    });
+  };
+
+  // watch(
+  //   () => animationManager,
+  //   () => {
+  //     Object.keys(animationManager).forEach((key) => {
+  //       const unchanged = animationManager[key];
+
+  //       // 找到所有属于这个key的元素
+  //       animateByKey(key, !unchanged);
+  //     });
+  //   },
+  //   { deep: true }
+  // );
+
   return {
-    animationManager,
+    animationElements,
     triggerAnimation,
+    animateElement,
+    animateByKey,
   };
 }

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

@@ -36,126 +36,133 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    label: string;
-    value?: string;
-    // 告示牌布局，类型为：'val-top' | 'label-top'
-    layout: string;
-    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
-    type?: string;
-  }>(),
-  {
-    value: '/',
-    type: 'A',
-    layout: 'val-top',
-  }
-);
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      // 告示牌布局，类型为：'val-top' | 'label-top'
+      layout: string;
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+      type?: string;
+    }>(),
+    {
+      value: '/',
+      type: 'A',
+      layout: 'val-top',
+    }
+  );
 
-// 获取某些 value 对应的特殊的 装饰用的类名
-function getValueDecoClass(value) {
-  switch (value) {
-    case '低风险':
-      return 'low_risk';
-    case '一般风险':
-      return 'risk';
-    case '较大风险':
-      return 'high_risk';
-    case '报警':
-      return 'warning';
-    default:
-      return '';
-  }
-}
+  // 获取某些 value 对应的特殊的 装饰用的类名
+  function getValueDecoClass(value) {
+    switch (value) {
+      case '低风险':
+        return 'low_risk';
+      case '一般风险':
+        return 'risk';
+      case '较大风险':
+        return 'high_risk';
+      case '报警':
+        return 'warning';
+      default:
+        return '';
+    }
+  }
 
-defineEmits(['click']);
+  defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+  @{theme-deepblue} {
+    .mini-board {
+      --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
+      --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
+      --image-areaNew2: url('/@/assets/images/fireNew/8.png');
+    }
+  }
+
+  .mini-board__label {
+    white-space: nowrap;
+  }
+  .mini-board__value {
+    white-space: nowrap;
+  }
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
     --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
     --image-areaNew2: url('/@/assets/images/fireNew/8.png');
+    height: 50px;
+    line-height: 25px;
+    width: 130px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: var(--image-areaNew);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 33px 0 0 82px;
   }
-}
-
-.mini-board {
-  --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
-  --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
-  --image-areaNew2: url('/@/assets/images/fireNew/8.png');
-  height: 50px;
-  line-height: 25px;
-  width: 130px;
-  padding: 0 5px 0 5px;
-  text-align: center;
-  background-size: 100% 100%;
-  position: relative;
-}
-.mini-board_H {
-  width: 174px;
-  height: 104px;
-  background-image: var(--image-areaNew);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  padding: 33px 0 0 82px;
-}
 
-.mini-board__value_H {
-  font-size: 16px;
-  font-weight: bold;
-  height: 23px;
-  line-height: 50px;
-  margin-top: 2px;
-  font-family: 'douyuFont';
-}
-.mini-board__label_H {
-  line-height: 20px;
-  height: 20px;
-}
-.mini-board_E:nth-child(1) {
-  .mini-board__label_E {
-    background-image: var(--image-hycd);
-  }
-}
-.mini-board_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
-  }
-}
-.mini-board_E:nth-child(3) {
-  .mini-board__label_E {
-    background-image: var(--image-jdjl);
-  }
-}
+  .mini-board__value_H {
+    font-size: 16px;
+    font-weight: bold;
+    height: 23px;
+    line-height: 50px;
+    margin-top: 2px;
+    font-family: 'douyuFont';
+  }
+  .mini-board__label_H {
+    line-height: 20px;
+    height: 20px;
+  }
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: var(--image-hycd);
+    }
+  }
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: var(--image-dyfl);
+    }
+  }
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: var(--image-jdjl);
+    }
+  }
 
-.mini-board_H_low_risk:nth-child(1) {
-  background-image: var(--image-areaNew);
-}
-.mini-board_H_low_risk:nth-child(2) {
-  background-image: var(--image-areaNew1);
-}
+  .mini-board_H_low_risk:nth-child(1) {
+    background-image: var(--image-areaNew);
+  }
+  .mini-board_H_low_risk:nth-child(2) {
+    background-image: var(--image-areaNew1);
+  }
 
-.mini-board_F {
-  width: 100px;
-  height: 60px;
-  background-image: var(--image-areaNew2);
-  background-size: 100% 100%;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board__value_F {
-  font-size: 15px;
-  color: @vent-gas-primary-text;
-}
-.mini-board__label_F {
-  line-height: 17px;
-}
+  .mini-board_F {
+    width: 100px;
+    height: 60px;
+    background-image: var(--image-areaNew2);
+    background-size: 100% 100%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board__value_F {
+    font-size: 15px;
+    color: @vent-gas-primary-text;
+  }
+  .mini-board__label_F {
+    line-height: 17px;
+  }
 </style>

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

@@ -68,352 +68,359 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    label: string;
-    value?: string;
-    // 告示牌布局，类型为：'val-top' | 'label-top'
-    layout: string;
-    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
-    type?: string;
-  }>(),
-  {
-    value: '/',
-    type: 'A',
-    layout: 'val-top',
-  }
-);
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      // 告示牌布局，类型为：'val-top' | 'label-top'
+      layout: string;
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+      type?: string;
+    }>(),
+    {
+      value: '/',
+      type: 'A',
+      layout: 'val-top',
+    }
+  );
 
-// 获取某些 value 对应的特殊的 装饰用的类名
-function getValueDecoClass(value) {
-  switch (value) {
-    case '低风险':
-      return 'low_risk';
-    case '一般风险':
-      return 'risk';
-    case '较大风险':
-      return 'high_risk';
-    case '报警':
-      return 'warning';
-    default:
-      return '';
-  }
-}
+  // 获取某些 value 对应的特殊的 装饰用的类名
+  function getValueDecoClass(value) {
+    switch (value) {
+      case '低风险':
+        return 'low_risk';
+      case '一般风险':
+        return 'risk';
+      case '较大风险':
+        return 'high_risk';
+      case '报警':
+        return 'warning';
+      default:
+        return '';
+    }
+  }
 
-defineEmits(['click']);
+  defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .mini-board {
+      --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+      --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+      --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+      --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+      --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+    }
+  }
 
-@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
     --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
     --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
     --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-  }
-}
+    --image-area3: url('/@/assets/images/company/area3.png');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+    --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
 
-.mini-board {
-  --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-  --image-area3: url('/@/assets/images/company/area3.png');
-  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
-  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
-  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    height: 50px;
+    line-height: 25px;
+    width: 130px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+  }
 
-  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-  height: 50px;
-  line-height: 25px;
-  width: 130px;
-  padding: 0 5px 0 5px;
-  text-align: center;
-  background-size: 100% 100%;
-  position: relative;
-}
+  .mini-board__label {
+    white-space: nowrap;
+  }
+  .mini-board__value {
+    white-space: nowrap;
+  }
 
-.mini-board_New {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-areaNew);
-  background-size: 100% 100%;
-}
-.mini-board_New1 {
-  width: 118px;
-  height: 60px;
-  background-image: var(--image-areaNew1);
-  background-size: 100% 100%;
-}
-.mini-board_New2 {
-  width: 93px;
-  height: 60px;
-  margin: 0px;
-  background-image: var(--image-areaNew2);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-.mini-board_New3 {
-  margin-bottom: 0;
-  width: 170px;
-  height: 50px;
-}
-.mini-board_New3_jin {
-  background-image: var(--image-areaNew3);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.mini-board_New3_hui {
-  background-image: var(--image-areaNew4);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.mini-board_A {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-area3);
-  background-size: 100% 100%;
-}
-.mini-board_B {
-  width: 131px;
-  height: 64px;
-  background-image: var(--image-value-bg);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_C {
-  width: 121px;
-  height: 69px;
-  background-image: var(--image-vent-param-bg);
-}
-.mini-board_D {
-  // width: 105px;
-  height: 58px;
-  background-image: var(--image-mini-board-1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_E {
-  width: 30%;
-  height: 180px;
-  padding: 20px 5px;
-  background-image: var(--image-board_bg_1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.mini-board_F {
-  width: 120px;
-  height: 70px;
-  background-image: var(--image-miehuo);
-  background-size: 100% 80%;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_G {
-  width: 98px;
-  height: 70px;
-  background-image: var(--image-value-bg-2);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_H {
-  width: 174px;
-  height: 104px;
-  background-image: var(--image-board_bg_3);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  padding: 45px 0 0 0;
-}
-.mini-board_I {
-  width: 139px;
-  height: 67px;
-  background-image: var(--image-board_bg_6);
-  background-size: 100% 100%;
-}
+  .mini-board_New {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-areaNew);
+    background-size: 100% 100%;
+  }
+  .mini-board_New1 {
+    width: 118px;
+    height: 60px;
+    background-image: var(--image-areaNew1);
+    background-size: 100% 100%;
+  }
+  .mini-board_New2 {
+    width: 93px;
+    height: 60px;
+    margin: 0px;
+    background-image: var(--image-areaNew2);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .mini-board_New3 {
+    margin-bottom: 0;
+    width: 170px;
+    height: 50px;
+  }
+  .mini-board_New3_jin {
+    background-image: var(--image-areaNew3);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .mini-board_New3_hui {
+    background-image: var(--image-areaNew4);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .mini-board_A {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-area3);
+    background-size: 100% 100%;
+  }
+  .mini-board_B {
+    width: 131px;
+    height: 64px;
+    background-image: var(--image-value-bg);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_C {
+    width: 121px;
+    height: 69px;
+    background-image: var(--image-vent-param-bg);
+  }
+  .mini-board_D {
+    // width: 105px;
+    height: 58px;
+    background-image: var(--image-mini-board-1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_E {
+    width: 30%;
+    height: 180px;
+    padding: 20px 5px;
+    background-image: var(--image-board_bg_1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .mini-board_F {
+    width: 120px;
+    height: 70px;
+    background-image: var(--image-miehuo);
+    background-size: 100% 80%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_G {
+    width: 98px;
+    height: 70px;
+    background-image: var(--image-value-bg-2);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: var(--image-board_bg_3);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 45px 0 0 0;
+  }
+  .mini-board_I {
+    width: 139px;
+    height: 67px;
+    background-image: var(--image-board_bg_6);
+    background-size: 100% 100%;
+  }
 
-.mini-board__value_New {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  float: left;
-  margin: 0 0 0 13px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New1 {
-  color: @vent-gas-primary-text;
-  font-size: 16px;
-  float: left;
-  margin: 0 0 0 45%;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New1 {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New2 {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New2 {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New3 {
-  color: #afe6f2;
-  font-size: 15px;
-  font-weight: bold;
-  margin-left: 10px;
-}
-.mini-board__lable_New3 {
-  color: #afe6f2;
-  height: 30px;
-  font-size: 10px;
-}
-.mini-board__value_A {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
+  .mini-board__value_New {
+    color: @vent-gas-primary-text;
+    font-size: 15px;
+    float: left;
+    margin: 0 0 0 13px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New1 {
+    color: @vent-gas-primary-text;
+    font-size: 16px;
+    float: left;
+    margin: 0 0 0 45%;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New1 {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New2 {
+    color: @vent-gas-primary-text;
+    font-size: 15px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New2 {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New3 {
+    color: #afe6f2;
+    font-size: 15px;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+  .mini-board__lable_New3 {
+    color: #afe6f2;
+    height: 30px;
+    font-size: 10px;
+  }
+  .mini-board__value_A {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
 
-.mini-board__value_B {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-.mini-board__label_B {
-  line-height: 24px;
-  height: 24px;
-}
+  .mini-board__value_B {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+  .mini-board__label_B {
+    line-height: 24px;
+    height: 24px;
+  }
 
-.mini-board__value_C {
-  color: @vent-gas-primary-text;
-  height: 40px;
-  line-height: 40px;
-  font-size: 20px;
-  font-weight: bold;
-}
+  .mini-board__value_C {
+    color: @vent-gas-primary-text;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+  }
 
-.mini-board__value_D {
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-.mini-board__label_D {
-  line-height: 17px;
-  height: 17px;
-}
-.mini-board__value_E {
-  font-size: 20px;
-  font-weight: bold;
-}
-.mini-board__label_E {
-  line-height: 20px;
-  height: 90px;
-  padding-top: 30%;
-  background-repeat: no-repeat;
-  background-position: center top;
-}
+  .mini-board__value_D {
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+  .mini-board__label_D {
+    line-height: 17px;
+    height: 17px;
+  }
+  .mini-board__value_E {
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .mini-board__label_E {
+    line-height: 20px;
+    height: 90px;
+    padding-top: 30%;
+    background-repeat: no-repeat;
+    background-position: center top;
+  }
 
-.mini-board__value_F {
-  font-size: 20px;
-  font-weight: bold;
-  color: @vent-gas-primary-text;
-}
-.mini-board__label_F {
-  line-height: 50px;
-}
+  .mini-board__value_F {
+    font-size: 20px;
+    font-weight: bold;
+    color: @vent-gas-primary-text;
+  }
+  .mini-board__label_F {
+    line-height: 50px;
+  }
 
-.mini-board__value_G {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 42px;
-  line-height: 42px;
-}
-.mini-board__label_G {
-  line-height: 20px;
-  height: 20px;
-}
+  .mini-board__value_G {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 42px;
+    line-height: 42px;
+  }
+  .mini-board__label_G {
+    line-height: 20px;
+    height: 20px;
+  }
 
-.mini-board_E:nth-child(1) {
-  .mini-board__label_E {
-    background-image: var(--image-hycd);
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: var(--image-hycd);
+    }
   }
-}
-.mini-board_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: var(--image-dyfl);
+    }
   }
-}
-.mini-board_E:nth-child(3) {
-  .mini-board__label_E {
-    background-image: var(--image-jdjl);
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: var(--image-jdjl);
+    }
   }
-}
 
-.mini-board_H_low_risk {
-  background-image: var(--image-board_bg_3);
-}
-.mini-board_H_risk {
-  background-image: var(--image-board_bg_2);
-}
-.mini-board_H_high_risk {
-  background-image: var(--image-board_bg_5);
-}
-.mini-board_H_warning {
-  background-image: var(--image-board_bg_4);
-}
+  .mini-board_H_low_risk {
+    background-image: var(--image-board_bg_3);
+  }
+  .mini-board_H_risk {
+    background-image: var(--image-board_bg_2);
+  }
+  .mini-board_H_high_risk {
+    background-image: var(--image-board_bg_5);
+  }
+  .mini-board_H_warning {
+    background-image: var(--image-board_bg_4);
+  }
 </style>

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

@@ -25,347 +25,344 @@
         </div>
       </slot>
     </template>
-
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    label: string;
-    value?: string;
-    dw?: string;
-    // 告示牌布局，类型为：'val-top' | 'label-top'
-    layout: string;
-    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F'
-    type?: string;
-  }>(),
-  {
-    value: '/',
-    type: 'A',
-    layout: 'val-top',
-  }
-);
-
-// 获取某些 value 对应的特殊的 装饰用的类名
-function getValueDecoClass(value) {
-  switch (value) {
-    case '低风险':
-      return 'low_risk';
-    case '一般风险':
-      return 'risk';
-    case '较大风险':
-      return 'high_risk';
-    case '报警':
-      return 'warning';
-    default:
-      return '';
-  }
-}
-
-defineEmits(['click']);
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      dw?: string;
+      // 告示牌布局，类型为：'val-top' | 'label-top'
+      layout: string;
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F'
+      type?: string;
+    }>(),
+    {
+      value: '/',
+      type: 'A',
+      layout: 'val-top',
+    }
+  );
+
+  // 获取某些 value 对应的特殊的 装饰用的类名
+  function getValueDecoClass(value) {
+    switch (value) {
+      case '低风险':
+        return 'low_risk';
+      case '一般风险':
+        return 'risk';
+      case '较大风险':
+        return 'high_risk';
+      case '报警':
+        return 'warning';
+      default:
+        return '';
+    }
+  }
+
+  defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .mini-board {
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      //   --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+    }
+  }
 
-@{theme-deepblue} {
   .mini-board {
-    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-    // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    //   --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-  }
-}
-
-.mini-board {
-  --image-area3: url('/@/assets/images/company/area3.png');
-  // --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-  --image-value-bg: url('/@/assets/images/home-green/green-tag.png');
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  // --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-  --image-mini-board-1: url('/@/assets/images/home-green/green-tag.png');
-  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
-  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
-  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
-
-  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-  height: 52px;
-  line-height: 25px;
-  width: 110px;
-  padding: 0 5px 0 5px;
-  text-align: center;
-  background-size: 100% 100%;
-  position: relative;
-}
-
-.mini-board_A {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-area3);
-  background-size: 100% 100%;
-}
-
-.mini-board_B {
-  width: 115px;
-  height: 50px;
-  background-image: var(--image-value-bg);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 100%
-}
-
-.mini-board_C {
-  width: 121px;
-  height: 69px;
-  background-image: var(--image-vent-param-bg);
-}
-
-.mini-board_D {
-  // width: 105px;
-  height: 50px;
-  background-image: var(--image-mini-board-1);
-  background-position: center bottom;
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-
-.mini-board_E {
-  width: 30%;
-  height: 180px;
-  padding: 20px 5px;
-  background-image: var(--image-board_bg_1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.mini-board_F {
-  width: 125px;
-  height: 70px;
-  background-image: var(--image-miehuo);
-  background-size: 100% 80%;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_G {
-  width: 98px;
-  height: 70px;
-  background-image: var(--image-value-bg-2);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-
-.mini-board_H {
-  width: 174px;
-  height: 104px;
-  background-image: var(--image-board_bg_3);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  padding: 45px 0 0 0;
-}
-
-.mini-board_I {
-  width: 139px;
-  height: 67px;
-  background-image: var(--image-board_bg_6);
-  background-size: 100% 100%;
-}
-
-.mini-board_J {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 121px;
-  height: 100%;
-
-}
-
-.mini-board_K {
-
-  width: 50%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  &:nth-child(1) {
-    .mini-board__value_K {
-      width: 69px;
-      height: 76px;
-      background: url('@/assets/images/home-green/800.png') no-repeat;
-      background-size: 100% 100%;
-    }
+    --image-area3: url('/@/assets/images/company/area3.png');
+    // --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-value-bg: url('/@/assets/images/home-green/green-tag.png');
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    // --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+    --image-mini-board-1: url('/@/assets/images/home-green/green-tag.png');
+    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+    --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    height: 52px;
+    line-height: 25px;
+    width: 110px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+  }
+
+  .mini-board__label {
+    white-space: nowrap;
+  }
+  .mini-board__value {
+    white-space: nowrap;
+  }
+
+  .mini-board_A {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-area3);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_B {
+    width: 115px;
+    height: 50px;
+    background-image: var(--image-value-bg);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .mini-board_C {
+    width: 121px;
+    height: 69px;
+    background-image: var(--image-vent-param-bg);
+  }
+
+  .mini-board_D {
+    // width: 105px;
+    height: 50px;
+    background-image: var(--image-mini-board-1);
+    background-position: center bottom;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_E {
+    width: 30%;
+    height: 180px;
+    padding: 20px 5px;
+    background-image: var(--image-board_bg_1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .mini-board_F {
+    width: 125px;
+    height: 70px;
+    background-image: var(--image-miehuo);
+    background-size: 100% 80%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_G {
+    width: 98px;
+    height: 70px;
+    background-image: var(--image-value-bg-2);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: var(--image-board_bg_3);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 45px 0 0 0;
+  }
+
+  .mini-board_I {
+    width: 139px;
+    height: 67px;
+    background-image: var(--image-board_bg_6);
+    background-size: 100% 100%;
+  }
+
+  .mini-board_J {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 121px;
+    height: 100%;
   }
 
-  &:nth-child(2) {
-    .mini-board__value_K {
-      height: 76px;
-      width: 69px;
-      background: url('@/assets/images/home-green/1000.png') no-repeat;
-      background-size: 100% 100%;
+  .mini-board_K {
+    width: 50%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    &:nth-child(1) {
+      .mini-board__value_K {
+        width: 69px;
+        height: 76px;
+        background: url('@/assets/images/home-green/800.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+
+    &:nth-child(2) {
+      .mini-board__value_K {
+        height: 76px;
+        width: 69px;
+        background: url('@/assets/images/home-green/1000.png') no-repeat;
+        background-size: 100% 100%;
+      }
     }
   }
 
+  .mini-board__value_A {
+    color: @vent-gas-primary-text;
+    font-size: 16px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
 
+  .mini-board__value_B {
+    // color: @vent-gas-primary-text;
+    color: #3ecca7;
+    font-size: 12px;
+    font-family: 'douyuFont';
+    height: 28px;
+    line-height: 28px;
+  }
 
-}
-
-.mini-board__value_A {
-  color: @vent-gas-primary-text;
-  font-size: 16px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-
-.mini-board__value_B {
-  // color: @vent-gas-primary-text;
-  color: #3ecca7;
-  font-size: 12px;
-  font-family: 'douyuFont';
-  height: 28px;
-  line-height: 28px;
-}
-
-.mini-board__label_B {
-  line-height: 16px;
-  height: 16px;
-  font-size: 12px;
-}
-
-.mini-board__value_C {
-  color: @vent-gas-primary-text;
-  height: 40px;
-  line-height: 40px;
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.mini-board__value_D {
-  font-size: 12px;
-  height: 28px;
-  line-height: 32px;
-  color: #3ecca7;
-  font-family: 'douyuFont'
-}
-
-.mini-board__label_D {
-  line-height: 18px;
-  height: 18px;
-  font-size: 12px;
-}
-
-.mini-board__value_E {
-  font-size: 20px;
-  font-weight: bold;
-}
-
-.mini-board__label_E {
-  line-height: 20px;
-  height: 90px;
-  padding-top: 30%;
-  background-repeat: no-repeat;
-  background-position: center top;
-}
-
-.mini-board__value_F {
-  font-size: 20px;
-  font-weight: bold;
-  color: @vent-gas-primary-text;
-}
-
-.mini-board__label_F {
-  line-height: 34px;
-}
-
-.mini-board__value_G {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 42px;
-  line-height: 42px;
-}
-
-.mini-board__label_G {
-  line-height: 20px;
-  height: 20px;
-}
-
-.mini-board_E:nth-child(1) {
-  .mini-board__label_E {
-    background-image: var(--image-hycd);
+  .mini-board__label_B {
+    line-height: 16px;
+    height: 16px;
+    font-size: 12px;
   }
-}
 
-.mini-board_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
+  .mini-board__value_C {
+    color: @vent-gas-primary-text;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+  }
+
+  .mini-board__value_D {
+    font-size: 12px;
+    height: 28px;
+    line-height: 32px;
+    color: #3ecca7;
+    font-family: 'douyuFont';
+  }
+
+  .mini-board__label_D {
+    line-height: 18px;
+    height: 18px;
+    font-size: 12px;
+  }
+
+  .mini-board__value_E {
+    font-size: 20px;
+    font-weight: bold;
   }
-}
 
-.mini-board_E:nth-child(3) {
   .mini-board__label_E {
-    background-image: var(--image-jdjl);
+    line-height: 20px;
+    height: 90px;
+    padding-top: 30%;
+    background-repeat: no-repeat;
+    background-position: center top;
   }
-}
 
-.mini-board__label_J {
-  width: 100%;
-  padding-top: 10px;
+  .mini-board__value_F {
+    font-size: 20px;
+    font-weight: bold;
+    color: @vent-gas-primary-text;
+  }
 
-}
+  .mini-board__label_F {
+    line-height: 34px;
+  }
 
-.mini-board__value_J {
-  position: relative;
-  width: 102px;
-  height: 45px;
-  font-family: 'douyuFont';
-  font-size: 12px;
-  color: #3afde7;
-  background: url('@/assets/images/home-green/100.png') no-repeat;
-  background-size: 100% 100%;
-}
+  .mini-board__value_G {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 42px;
+    line-height: 42px;
+  }
 
-.mini-board__label_K {
-  z-index: 999;
+  .mini-board__label_G {
+    line-height: 20px;
+    height: 20px;
+  }
 
-}
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: var(--image-hycd);
+    }
+  }
 
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: var(--image-dyfl);
+    }
+  }
 
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: var(--image-jdjl);
+    }
+  }
 
-.mini-board_H_low_risk {
-  background-image: var(--image-board_bg_3);
-}
+  .mini-board__label_J {
+    width: 100%;
+    padding-top: 10px;
+  }
 
-.mini-board_H_risk {
-  background-image: var(--image-board_bg_2);
-}
+  .mini-board__value_J {
+    position: relative;
+    width: 102px;
+    height: 45px;
+    font-family: 'douyuFont';
+    font-size: 12px;
+    color: #3afde7;
+    background: url('@/assets/images/home-green/100.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-.mini-board_H_high_risk {
-  background-image: var(--image-board_bg_5);
-}
+  .mini-board__label_K {
+    z-index: 999;
+  }
 
-.mini-board_H_warning {
-  background-image: var(--image-board_bg_4);
-}
+  .mini-board_H_low_risk {
+    background-image: var(--image-board_bg_3);
+  }
+
+  .mini-board_H_risk {
+    background-image: var(--image-board_bg_2);
+  }
+
+  .mini-board_H_high_risk {
+    background-image: var(--image-board_bg_5);
+  }
+
+  .mini-board_H_warning {
+    background-image: var(--image-board_bg_4);
+  }
 </style>

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

@@ -176,6 +176,13 @@
     position: relative;
   }
 
+  .mini-board__label {
+    white-space: nowrap;
+  }
+  .mini-board__value {
+    white-space: nowrap;
+  }
+
   .mini-board_New {
     width: 120px;
     height: 60px;

src/views/vent/home/configurable/configurable.data.ts

@@ -2951,7 +2951,7 @@ export const testConfigFusionGreen: Config[] = [
               [{ color: 'rgba(254,111,0, 1 )' }, { color: 'rgba(254,111,0, 0.8 )' }, { color: 'rgba(254,111,0, 0.08 )' }],
               [{ color: 'rgba(255,0,0, 1 )' }, { color: 'rgba(255,0,0, 0.8 )' }, { color: 'rgba(255,0,0, 0.08 )' }],
             ],
-            fontColor: ['rgba(46,144,165, 1 )', 'rgba(254,254,53, 1 )', 'rgba(234,179,105, 1 )', 'rgba(254,111,0, 1 )', 'rgba(255,0,0, 1 )']
+            fontColor: ['rgba(46,144,165, 1 )', 'rgba(254,254,53, 1 )', 'rgba(234,179,105, 1 )', 'rgba(254,111,0, 1 )', 'rgba(255,0,0, 1 )'],
           },
         },
       ],
@@ -3175,9 +3175,7 @@ export const testConfigFusionGreen: Config[] = [
               warnCount: 'modelsensor_warn',
               closeCount: 'modelsensor_close',
             },
-          }
-
-
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3237,7 +3235,6 @@ export const testConfigFusionGreen: Config[] = [
               label: '外因火灾',
               value: '',
             },
-
           ],
         },
       ],
@@ -3250,7 +3247,6 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_card',
-
         },
       ],
       // mock: BDfireMock,
@@ -3302,7 +3298,6 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_dust',
-
         },
       ],
       // mock: BDfireMock,
@@ -3346,7 +3341,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'dz_fire',
             basis: '50%',
           },
-
         ],
       },
       board: [],
@@ -3401,6 +3395,7 @@ export const testConfigFusionGreen: Config[] = [
           value: '',
         },
       },
+
       background: {
         show: false,
         type: 'video',
@@ -3413,7 +3408,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'dz_risk',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3429,13 +3423,15 @@ export const testConfigFusionGreen: Config[] = [
         },
       ],
       // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:360px;height:240px;',
-      version: '原版',
-      position: 'bottom:15px;right:450px',
-    },
-  },
+
+      showStyle: {
+        size: 'width:360px;height:240px;',
+        version: '原版',
+        position: 'bottom:15px;right:450px',
+      },
+    }
+  }
+
 ];
 
 export const testConfigVentNew: Config[] = [
@@ -3836,7 +3832,6 @@ export const testConfigVentNew: Config[] = [
       headerPosition: 'rightTop',
     },
   },
-
   {
     deviceType: 'sys_majorpath',
     moduleName: '关键通风路线',

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

@@ -319,12 +319,14 @@ export const chartsColumns = [
 export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
   // @ts-ignore
   return defineAsyncComponent(() => {
+    // return import('./components/gateTripleSVG.vue');
     if (!is2DModel) return import('./components/entryThree.vue');
     switch (sysOrgCode) {
       // case '000000':
-      //   return import('./components/000000.vue');
+      //   双道风门
+      //   return import('./components/gateDualSVG.vue');
       default:
-        return import('./components/gateSVG.vue');
+        return import('./components/gateTripleSVG.vue');
     }
   });
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
+  <component ref="modelRef" :loading="loading" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center row">
@@ -340,7 +340,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref, defineAsyncComponent } from 'vue';
+  import { onBeforeUnmount, onUnmounted, onMounted, ref, reactive, nextTick, inject, unref, defineAsyncComponent, provide } from 'vue';
   import MonitorTable from '../comment/MonitorTable.vue';
   import HistoryTable from '../comment/HistoryTable.vue';
   import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
@@ -374,10 +374,10 @@
   const { sysOrgCode } = useGlobSetting();
   const globalConfig = inject<any>('globalConfig');
 
+  const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
   const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
 
-  const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
   const MonitorDataTable = ref();
   let contrlValue = '';
@@ -978,77 +978,71 @@
     if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
-        // 反转播放前门动画即为播放关门动画
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
-        // 播放后门动画即为播放开门动画
-        triggerAnimation('___R_0_Layer0_0_FILL', false);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
         frontDeviceState = 1;
         frontDoorIsOpen.value = false;
         backDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
     if (selectData.frontGateOpen == '0' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
       if (frontDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
-        triggerAnimation('___R_0_Layer0_0_FILL', false);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(1, timeScale) : play(1);
         play(1, timeScale);
         frontDeviceState = 1;
         frontDoorIsOpen.value = false;
         backDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
     if (selectData.frontGateClose == '1' && selectData.frontGateOpen == '0' && isFrontOpenRunning) {
       isFrontOpenRunning = false;
       if (frontDeviceState != 0) {
-        triggerAnimation('___L_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(2, timeScale) : play(2);
         play(2, timeScale);
         frontDeviceState = 0;
         frontDoorIsOpen.value = false;
         // backDoorIsOpen.value = false
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
     if (selectData.rearGateOpen == '1' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
       isRearOpenRunning = true;
 
       if (rearDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(3, timeScale);
         rearDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
     if (selectData.rearGateOpen == '0' && selectData.rearGateClose == '0' && !isRearOpenRunning) {
       isRearOpenRunning = true;
 
       if (rearDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(3, timeScale);
         rearDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
     if (selectData.rearGateClose == '1' && selectData.rearGateOpen == '0' && isRearOpenRunning) {
       isRearOpenRunning = false;
       if (rearDeviceState != 0) {
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
         play(4, timeScale);
         rearDeviceState = 0;
         backDoorIsOpen.value = false;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
@@ -1056,13 +1050,12 @@
       isMidOpenRunning = true;
 
       if (midDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(8, timeScale);
         midDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
@@ -1070,24 +1063,23 @@
       isMidOpenRunning = true;
 
       if (midDeviceState != 1) {
-        triggerAnimation('___L_0_Layer0_0_FILL', false);
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(3, timeScale) : play(3);
         play(8, timeScale);
         midDeviceState = 1;
         backDoorIsOpen.value = false;
         frontDoorIsOpen.value = true;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
 
     if (selectData.midGateClose == '1' && selectData.midGateOpen == '0' && isMidOpenRunning) {
       isMidOpenRunning = false;
       if (midDeviceState != 0) {
-        triggerAnimation('___R_0_Layer0_0_FILL', true);
         // import.meta.env.VITE_GLOB_IS_SIMULATE ? play(4, timeScale) : play(4);
         play(9, timeScale);
         midDeviceState = 0;
         backDoorIsOpen.value = false;
+        modelRef.value?.animate?.(frontDoorIsOpen.value, midDoorIsOpen.value, backDoorIsOpen.value);
       }
     }
   }

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

@@ -1636,7 +1636,7 @@
 
   // 批量控制同一key的所有元素
   const animateByKey = (key: string, toEnd: boolean, duration: number = 3000) => {
-    animElements.forEach((el, elementId) => {
+    animElements.forEach((__, elementId) => {
       const info = elementInfo.get(elementId);
       if (info && info.key === key) {
         animateElement(elementId, toEnd, duration);