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/assets/images/home-warn/5-4.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.286" height="12.701" viewBox="0 0 12.286 12.701">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#4eabd9"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57266" data-name="路径 57266" d="M89.8,32.62a.444.444,0,0,0-.28-.4l-5.175-2.065a.442.442,0,0,0-.329,0l-5.175,2.065a.445.445,0,0,0-.28.4c-.007.178-.133,4.351.759,6.068.921,1.769,4.558,3.059,4.713,3.113a.452.452,0,0,0,.293,0c.155-.053,3.792-1.343,4.711-3.113.895-1.716.768-5.89.761-6.068Zm-2.484,3.919H86.026l-.417-1.088-1.436,3.219-1.1-2.367L82.6,37.5H81.049v-.888H82l1.015-2.555,1.143,2.469,1.514-3.392.966,2.518h.682v.888Z" transform="translate(-78.041 -29.623)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/home-warn/5-5.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.114" height="10.497" viewBox="0 0 14.114 10.497">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#4eabd9"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57265" data-name="路径 57265" d="M27.611,32.769a4.279,4.279,0,0,1-4.338-4.209V24.12a.867.867,0,0,1,1.734,0V28.56a2.605,2.605,0,0,0,5.208,0v-.788a2.009,2.009,0,0,1,4.017,0V29.86a.867.867,0,0,1-1.734,0V27.772a.271.271,0,0,0-.278-.261.268.268,0,0,0-.272.261v.789a4.278,4.278,0,0,1-4.337,4.209ZM35.52,30.7a.857.857,0,0,1-.867-.847V27.769a2.6,2.6,0,0,0-5.2,0v.789a2.012,2.012,0,0,1-4.021,0V24.119a.867.867,0,0,1,1.734,0v4.438a.277.277,0,0,0,.554,0v-.789a4.338,4.338,0,0,1,8.671,0v2.087a.857.857,0,0,1-.867.847Z" transform="translate(-22.773 -22.773)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

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/layouts/default/sider/bottomSideder.vue

@@ -49,7 +49,7 @@
     </div>
   </div>
   <div v-else-if="isShowMenu == 0" class="menu-show-icon">
-    <div :class="themeIcon=='styleTwo' ? 'icon1': 'icon'" @click="openMenu"></div>
+    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon-2' : 'icon-1'" @click="openMenu"></div>
   </div>
 </template>
 
@@ -320,8 +320,7 @@ export default defineComponent({
     width: 60px;
     height: 60px;
     position: relative;
-    background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
-    background-position: center;
+
 
     &:before {
       content: '';
@@ -339,8 +338,6 @@ export default defineComponent({
       width: 60px;
       height: 60px;
       position: absolute;
-      background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
-      background-position: center;
       animation-timing-function: ease-in;
       animation: fadenum 8s infinite;
     }
@@ -359,13 +356,25 @@ export default defineComponent({
       }
     }
   }
-  .icon1{
-     width: 72px;
-    height: 72px;
-    position: relative;
-    background-image: url('/@/assets/images/vent/bottom-icon/bottom-icon.png');
+
+  .icon-1 {
+    background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
+    background-position: center;
+
+    &:after {
+      background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
+      background-position: center;
+    }
+  }
+
+  .icon-2 {
+    background-image: url('/@/assets/images/vent/bottom-icon/1.png');
     background-position: center;
-    background-size: 100% 100%;
+
+    &:after {
+      background: url('/@/assets/images/vent/bottom-icon/2.png') no-repeat;
+      background-position: center;
+    }
   }
 }
 </style>

src/layouts/default/sider/bottomSideder1.vue

@@ -6,7 +6,8 @@
           {{ menu.name }}
         </div>
         <div class="vent-flex-row-wrap child-menu">
-          <div class="child-menu-item" v-for="(childMenu, childIndex) in menu.children" :key="childIndex" @click="handleMenuClick(childMenu)">
+          <div class="child-menu-item" v-for="(childMenu, childIndex) in menu.children" :key="childIndex"
+            @click="handleMenuClick(childMenu)">
             {{ childMenu.name }}
           </div>
         </div>
@@ -14,7 +15,8 @@
     </FourBorderBg>
     <div class="vent-flex-row-between menu-button-group">
       <div class="vent-flex-row program-group">
-        <div v-for="(programMenu, index) in programMenus" class="program-menu" :key="index">{{ programMenu.title }}</div>
+        <div v-for="(programMenu, index) in programMenus" class="program-menu" :key="index">{{ programMenu.title }}
+        </div>
       </div>
       <div class="setting-group">
         <SvgIcon class="icon-style" size="18" name="home" />
@@ -26,203 +28,229 @@
     </div>
   </div>
   <div v-else-if="isShowMenu == 0" class="menu-show-icon">
-    <div :class="themeIcon=='styleTwo' ? 'icon1': 'icon'" @click="openMenu"></div>
+    <div class="icon" :class="themeIcon == 'styleTwo' ? 'icon-2' : 'icon-1'" @click="openMenu"></div>
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, onMounted, ref } from 'vue';
-  import type { Menu } from '/@/router/types';
-  import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { Icon as SvgIcon } from '/@/components/Icon';
-  import { getMenus } from '/@/router/menus';
-  import { useGo } from '/@/hooks/web/usePage';
-  import { useAppStore } from '/@/store/modules/app';
-
-  export default defineComponent({
-    name: 'BottomSider',
-    components: { FourBorderBg, SvgIcon },
-    setup() {
-       const appStore = useAppStore();
+import { defineComponent, onMounted, ref } from 'vue';
+import type { Menu } from '/@/router/types';
+import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
+import { Icon as SvgIcon } from '/@/components/Icon';
+import { getMenus } from '/@/router/menus';
+import { useGo } from '/@/hooks/web/usePage';
+import { useAppStore } from '/@/store/modules/app';
+
+export default defineComponent({
+  name: 'BottomSider',
+  components: { FourBorderBg, SvgIcon },
+  setup() {
+    const appStore = useAppStore();
     const themeIcon = ref(appStore.getDarkMode)
-      const isShowMenu = ref(0);
-      let menuModules = ref<Menu[]>([]);
-      const go = useGo();
-      const programMenus = [
-        {
-          title: '通风系统',
-          path: '',
-        },
-        {
-          title: '防尘系统',
-          path: '',
-        },
-        {
-          title: '防灭火系统',
-          path: '',
-        },
-      ];
-
-      function handleMenuClick(path: Menu) {
-        go(path.path);
-        isShowMenu.value = 0;
-      }
-      const closeMenu = () => {
-        isShowMenu.value = 0;
-        window.removeEventListener('click', closeMenu);
-      };
-
-      function openMenu() {
-        isShowMenu.value = -1;
-        window.addEventListener('click', closeMenu, true);
-      }
+    const isShowMenu = ref(0);
+    let menuModules = ref<Menu[]>([]);
+    const go = useGo();
+    const programMenus = [
+      {
+        title: '通风系统',
+        path: '',
+      },
+      {
+        title: '防尘系统',
+        path: '',
+      },
+      {
+        title: '防灭火系统',
+        path: '',
+      },
+    ];
+
+    function handleMenuClick(path: Menu) {
+      go(path.path);
+      isShowMenu.value = 0;
+    }
+    const closeMenu = () => {
+      isShowMenu.value = 0;
+      window.removeEventListener('click', closeMenu);
+    };
+
+    function openMenu() {
+      isShowMenu.value = -1;
+      window.addEventListener('click', closeMenu, true);
+    }
 
-      onMounted(async () => {
-        menuModules.value = await getMenus();
-      });
-      return {
-        themeIcon,
-        menuModules,
-        isShowMenu,
-        handleMenuClick,
-        openMenu,
-        programMenus,
-      };
-    },
-  });
+    onMounted(async () => {
+      menuModules.value = await getMenus();
+    });
+    return {
+      themeIcon,
+      menuModules,
+      isShowMenu,
+      handleMenuClick,
+      openMenu,
+      programMenus,
+    };
+  },
+});
 </script>
 
 <style lang="less" scoped>
-  @keyframes menuShow {
-    0% {
-      width: 0;
-      height: 0;
-    }
-    100% {
-      width: 480px;
-      height: 436px;
-    }
+@keyframes menuShow {
+  0% {
+    width: 0;
+    height: 0;
   }
-  .bottom-side {
+
+  100% {
     width: 480px;
     height: 436px;
-    position: fixed;
-    bottom: 2px;
-    left: 0px;
-    z-index: 99999;
-    color: #fff;
-    border: 1px solid #0099e6;
-    background-color: #06115a;
-    backdrop-filter: blur(8px);
-    .four-border-bg {
+  }
+}
+
+.bottom-side {
+  width: 480px;
+  height: 436px;
+  position: fixed;
+  bottom: 2px;
+  left: 0px;
+  z-index: 99999;
+  color: #fff;
+  border: 1px solid #0099e6;
+  background-color: #06115a;
+  backdrop-filter: blur(8px);
+
+  .four-border-bg {
+    margin: 5px;
+    background-color: #ffffff00;
+
+    .main-container {
+      background-color: #ffffff00 !important;
+      box-shadow: 0 0 3px #ffffff33 inset;
+    }
+
+    .parent-menu {
+      width: 100px;
+    }
+
+    .child-menu {
+      width: 340px;
+      font-size: 13px;
+    }
+
+    .child-menu-item {
+      width: 100px;
+      background-color: #0c3898;
+      border-radius: 2px;
+      text-align: center;
       margin: 5px;
-      background-color: #ffffff00;
-      .main-container {
-        background-color: #ffffff00 !important;
-        box-shadow: 0 0 3px #ffffff33 inset;
-      }
+      cursor: pointer;
+      box-shadow: 0 0 3px #ffffff22 inset;
 
-      .parent-menu {
-        width: 100px;
-      }
-      .child-menu {
-        width: 340px;
-        font-size: 13px;
-      }
-      .child-menu-item {
-        width: 100px;
-        background-color: #0c3898;
-        border-radius: 2px;
-        text-align: center;
-        margin: 5px;
-        cursor: pointer;
-        box-shadow: 0 0 3px #ffffff22 inset;
-        &:hover {
-          background-color: #0069ed;
-        }
+      &:hover {
+        background-color: #0069ed;
       }
     }
-    .menu-button-group {
-      margin-bottom: 5px;
-      .program-menu {
-        width: 90px;
-        background: linear-gradient(#214ea5, #0f3075);
-        margin-left: 5px;
-        text-align: center;
-        border-radius: 2px;
-        cursor: pointer;
-      }
-      .icon-style {
-        margin-right: 10px;
-        &:last-child {
-          margin-right: 5px;
-        }
+  }
+
+  .menu-button-group {
+    margin-bottom: 5px;
+
+    .program-menu {
+      width: 90px;
+      background: linear-gradient(#214ea5, #0f3075);
+      margin-left: 5px;
+      text-align: center;
+      border-radius: 2px;
+      cursor: pointer;
+    }
+
+    .icon-style {
+      margin-right: 10px;
+
+      &:last-child {
+        margin-right: 5px;
       }
     }
   }
-  .bottom-size-show {
-    animation: menuShow 0.4s;
-    animation-iteration-count: 1;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease-in;
-    /* Safari and Chrome */
-    -webkit-animation: menuShow 0.4s;
-    -webkit-animation-iteration-count: 1;
-    -webkit-animation-fill-mode: forwards;
-    -webkit-animation-timing-function: ease-in;
-  }
-  .menu-show-icon {
-    position: fixed;
-    bottom: 5px;
-    left: 5px;
-    z-index: 1000000;
-    .icon {
+}
+
+.bottom-size-show {
+  animation: menuShow 0.4s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+  /* Safari and Chrome */
+  -webkit-animation: menuShow 0.4s;
+  -webkit-animation-iteration-count: 1;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: ease-in;
+}
+
+.menu-show-icon {
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  z-index: 1000000;
+
+  .icon {
+    width: 60px;
+    height: 60px;
+    position: relative;
+
+
+    &:before {
+      content: '';
+      display: block;
       width: 60px;
       height: 60px;
-      position: relative;
-      background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
+      position: absolute;
+      background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
       background-position: center;
+    }
 
-      &:before {
-        content: '';
-        display: block;
-        width: 60px;
-        height: 60px;
-        position: absolute;
-        background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
-        background-position: center;
+    &:after {
+      content: '';
+      display: block;
+      width: 60px;
+      height: 60px;
+      position: absolute;
+      animation-timing-function: ease-in;
+      animation: fadenum 8s infinite;
+    }
+
+    @keyframes fadenum {
+      0% {
+        transform: rotate(0deg);
       }
-      &:after {
-        content: '';
-        display: block;
-        width: 60px;
-        height: 60px;
-        position: absolute;
-        background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
-        background-position: center;
-        animation-timing-function: ease-in;
-        animation: fadenum 8s infinite;
+
+      10% {
+        transform: rotate(360deg);
       }
 
-      @keyframes fadenum {
-        0% {
-          transform: rotate(0deg);
-        }
-        10% {
-          transform: rotate(360deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
+      100% {
+        transform: rotate(360deg);
       }
     }
-     .icon1{
-     width: 72px;
-    height: 72px;
-    position: relative;
-    background-image: url('/@/assets/images/vent/bottom-icon/bottom-icon.png');
+  }
+
+  .icon-1 {
+    background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
     background-position: center;
-    background-size: 100% 100%;
+
+    &:after {
+      background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
+      background-position: center;
+    }
   }
+
+  .icon-2 {
+    background-image: url('/@/assets/images/vent/bottom-icon/1.png');
+    background-position: center;
+
+    &:after {
+      background: url('/@/assets/images/vent/bottom-icon/2.png') no-repeat;
+      background-position: center;
+    }
   }
+}
 </style>

src/views/monitor/log/index.vue

@@ -1,86 +1,110 @@
 <template>
-  <BasicTable @register="registerTable" :searchInfo="searchInfo" :columns="logColumns" :scroll="{ y: 660, x: true }">
-    <template #tableTitle>
-      <a-tabs defaultActiveKey="1" @change="tabChange" size="small">
-        <a-tab-pane tab="登录日志" key="1" />
-        <a-tab-pane tab="操作日志" key="2" />
-        <a-tab-pane tab="浏览日志" key="3" />
-      </a-tabs>
-    </template>
+  <a-tabs v-modal="searchInfo.logType" @change="tabChange" size="small">
+    <a-tab-pane tab="登录日志" key="1" />
+    <a-tab-pane tab="操作日志" key="2" />
+    <a-tab-pane tab="浏览日志" key="3" />
+    <a-tab-pane tab="登录统计" key="4" />
+  </a-tabs>
+  <BasicTable :key="searchInfo.logType" @register="registerTable" :api="logApi" :searchInfo="searchInfo"
+    :scroll="{ y: 660, x: true }">
     <template #expandedRowRender="{ record }">
       <div v-if="searchInfo.logType == 2">
         <div style="margin-bottom: 5px">
           <a-badge status="success" style="vertical-align: middle" />
-          <span style="vertical-align: middle">请求方法:{{ record.method }}</span></div
-        >
+          <span style="vertical-align: middle">请求方法:{{ record.method }}</span>
+        </div>
         <div>
           <a-badge status="processing" style="vertical-align: middle" />
-          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span></div
-        >
+          <span style="vertical-align: middle">请求参数:{{ record.requestParam }}</span>
+        </div>
       </div>
     </template>
   </BasicTable>
 </template>
 <script lang="ts" name="monitor-log" setup>
-  import { ref } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { getLogList } from './log.api';
-  import { columns, searchFormSchema, operationLogColumn, browserColumn } from './log.data';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  const { createMessage } = useMessage();
-  const checkedKeys = ref<Array<string | number>>([]);
+import { ref } from 'vue';
+import { BasicTable, useTable, TableAction } from '/@/components/Table';
+import { getLogList, getUserLoginStats } from './log.api';
+import { columns, searchFormSchema, searchFormSchema1, operationLogColumn, browserColumn, loginTjColumn } from './log.data';
+import { useListPage } from '/@/hooks/system/useListPage';
+const checkedKeys = ref<Array<string | number>>([]);
 
-  const logColumns = ref<any>(columns);
-  const searchInfo = { logType: '1' };
-  // 列表页面公共参数、方法
-  const { prefixCls, tableContext } = useListPage({
-    designScope: 'user-list',
-    tableProps: {
-      title: '日志列表',
-      api: getLogList,
-      showActionColumn: false,
-      rowSelection: {
-        columnWidth: 20,
-      },
-      formConfig: {
-        schemas: searchFormSchema,
-        fieldMapToTime: [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']],
-      },
+const logColumns = ref<any>(columns);
+const logApi = ref<any>(getLogList)
+const logSchemas = ref<any[]>(searchFormSchema)
+const paramTime = ref<any[]>(['createTime_begin', 'createTime_end'])
+const searchInfo = { logType: '1' };
+// 列表页面公共参数、方法
+const { prefixCls, tableContext } = useListPage({
+  designScope: 'user-list',
+  tableProps: {
+    title: '',
+    columns: logColumns,
+    showActionColumn: false,
+    rowSelection: {
+      columnWidth: 20,
+    },
+    formConfig: {
+      schemas: logSchemas as any,
+      fieldMapToTime: paramTime as any,
     },
-  });
+  },
+});
 
-  const [registerTable, { reload }] = tableContext;
+const [registerTable, { reload }] = tableContext;
 
-  // 日志类型
-  function tabChange(key) {
-    searchInfo.logType = key;
-    //update-begin---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对------------
-    switch (key) {
-      case '1':
-        logColumns.value = columns;
-        break;
-      case '2':
-        logColumns.value = operationLogColumn;
-        break;
-      case '3':
-        logColumns.value = browserColumn;
-        break;
-    }
-    //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------
-    reload();
+// 日志类型
+function tabChange(key) {
+  searchInfo.logType = key;
+  //update-begin---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对------------
+  switch (key) {
+    case '1':
+      logColumns.value = columns;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '2':
+      logColumns.value = operationLogColumn;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '3':
+      logColumns.value = browserColumn;
+      logSchemas.value = searchFormSchema
+      paramTime.value = [['fieldTime', ['createTime_begin', 'createTime_end'], 'YYYY-MM-DD']]
+      logApi.value = getLogList
+      break;
+    case '4':
+      logColumns.value = loginTjColumn;
+      logSchemas.value = searchFormSchema1
+      paramTime.value = [['fieldTime', ['dayStart', 'dayEnd'], 'YYYY-MM-DD']]
+      logApi.value = getUserLoginStats
+      break;
   }
+  //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------
+  reload();
+}
 
-  /**
-   * 选择事件
-   */
-  function onSelectChange(selectedRowKeys: (string | number)[]) {
-    checkedKeys.value = selectedRowKeys;
-  }
+/**
+ * 选择事件
+ */
+function onSelectChange(selectedRowKeys: (string | number)[]) {
+  checkedKeys.value = selectedRowKeys;
+}
 </script>
 <style lang="less" scoped>
-  ::v-deep .table-form {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
+::v-deep .table-form {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+::v-deep .zxm-table-title {
+  display: none !important;
+}
+
+::v-deep .zxm-tabs-nav-wrap {
+  padding: 0px 15px !important;
+}
 </style>

src/views/monitor/log/log.api.ts

@@ -2,6 +2,8 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   list = '/sys/log/list',
+  getUserLoginStats='/sys/log/getUserLoginStats'
+
 }
 
 /**
@@ -11,3 +13,11 @@ enum Api {
 export const getLogList = (params) => {
   return defHttp.get({ url: Api.list, params });
 };
+
+/**
+ *统计用户登录记录
+ * @param params
+ */
+export const getUserLoginStats = (params) => {
+  return defHttp.post({ url: Api.getUserLoginStats, params });
+};

src/views/monitor/log/log.data.ts

@@ -71,6 +71,19 @@ export const searchFormSchema: FormSchema[] = [
     },
   },
 ];
+export const searchFormSchema1: FormSchema[] = [
+  {
+    field: 'fieldTime',
+    component: 'RangePicker',
+    label: '创建时间',
+    componentProps: {
+      valueType: 'Date',
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+];
 
 export const browserColumn: BasicColumn[] = [
   {
@@ -112,3 +125,25 @@ export const browserColumn: BasicColumn[] = [
     width: 80,
   },
 ];
+
+export const loginTjColumn: BasicColumn[] = [
+  
+  {
+    title: '操作人ID',
+    dataIndex: 'userId',
+  },
+  {
+    title: '操作人',
+    dataIndex: 'userName',
+  },
+  {
+    title: '登录次数',
+    dataIndex: 'loginCount',
+  },
+  {
+    title: '最后登录时间',
+    dataIndex: 'lastLoginTime',
+  },
+ 
+];
+

src/views/vent/betKy/index.vue

@@ -0,0 +1,220 @@
+
+<template>
+  <div class="pressure-monitor">
+    <div class="header">
+      <h2>矿压监测系统</h2>
+      <div class="time-display">{{ currentTime }}</div>
+    </div>
+
+    <div class="chart-container">
+      <div ref="chartEl" class="chart"></div>
+    </div>
+
+    <div class="info-panel">
+      <div class="legend-section">
+        <h3>状态说明</h3>
+        <div class="legend-grid">
+          <div v-for="(item, index) in legendData" :key="index" class="legend-item">
+            <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
+            <span class="legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="range-section">
+        <h3>数据范围(kPa)</h3>
+        <div class="range-grid">
+          <div v-for="(item, idx) in dataRanges" :key="idx" class="range-item">
+            <span class="color-indicator" :style="{ backgroundColor: item.color }"></span>
+            <span class="legend-text">{{ item.label }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import * as echarts from 'echarts';
+
+const chartEl = ref<HTMLElement>();
+const currentTime = computed(() => new Date().toLocaleString());
+
+const colorRanges = [
+  { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
+  { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
+  { min: 252, max: 375, color: '#91cc75', label: '正常' },
+  { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
+  { min: 425, max: 475, color: '#ee6666', label: '强来压' },
+  { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
+];
+const dataRanges = [
+  { min: -Infinity, max: 0, color: '#999', label: '<0' },
+  { min: 0, max: 252, color: '#5470c6', label: '0-252' },
+  { min: 252, max: 375, color: '#91cc75', label: '252-375' },
+  { min: 375, max: 425, color: '#fac858', label: '375-425' },
+  { min: 425, max: 475, color: '#ee6666', label: '425-475' },
+  { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
+];
+
+const legendData = colorRanges.map((item) => ({
+  color: item.color,
+  label: item.label,
+}));
+
+onMounted(() => {
+  if (!chartEl.value) return;
+
+  const chart = echarts.init(chartEl.value);
+  const data = Array.from({ length: 50 }, () => Math.floor(Math.random() * 700) - 100);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: (params: any) => {
+        const value = params[0].value;
+        const range = colorRanges.find((r) => value >= r.min && value < r.max);
+        return `${params[0].dataIndex + 1}#<br/>
+                值: ${value}kPa<br/>
+                状态: ${range?.label || '未知'}`;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: data.map((_, i) => `${i + 1}#`),
+      axisLabel: {
+        interval: 1,
+        rotate: 45,
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '矿压值(kPa)',
+      min: -50,
+      max: 600,
+    },
+    series: [
+      {
+        data: data.map((value) => ({
+          value,
+          itemStyle: {
+            color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
+          },
+        })),
+        type: 'bar',
+        barWidth: '60%',
+        label: {
+          show: true,
+          position: 'top',
+          formatter: '{c}',
+        },
+      },
+    ],
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '15%',
+      containLabel: true,
+    },
+  };
+
+  chart.setOption(option);
+  window.addEventListener('resize', () => chart.resize());
+});
+</script>
+
+<style scoped>
+.pressure-monitor {
+  width: 100%;
+  height: 100%;
+  padding: 10px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #093ff1;
+}
+
+.header h2 {
+  color: #fff;
+  font-size: 24px;
+  margin: 0;
+}
+
+.time-display {
+  color: #fff;
+  font-size: 14px;
+}
+
+.chart-container {
+  width: 100%;
+  height: 500px;
+  border-radius: 8px;
+  padding: 15px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.info-panel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.legend-section,
+.range-section {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+h3 {
+  color: #fff;
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-size: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #303efd;
+}
+
+.legend-grid,
+.range-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.legend-item,
+.range-item {
+  display: flex;
+  align-items: center;
+}
+
+.color-indicator {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+
+.legend-text,
+.range-text {
+  font-size: 14px;
+  color: #fff;
+}
+
+.range-text {
+  font-family: monospace;
+}
+</style>

src/views/vent/home/configurable/components/ModuleWarnMonitor.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- 原版模块 -->
+  <component
+    :is="getModuleComponent(showStyle)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
+    @close="$emit('close')"
+    @click="redirectTo"
+  >
+    <slot>
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+    </slot>
+  </component>
+</template>
+<script lang="ts" setup>
+import Header from './header-green.vue';
+import Content from './content-warn.vue';
+import ModuleLeft from './original/moduleLeft-warn.vue';
+import ModuleBottom from './original/moduleBottom-warn.vue';
+import { computed, ref } from 'vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+// import { ModuleProps } from '../types';
+
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+}>();
+defineEmits(['close', 'click']);
+
+const { header } = props.moduleData;
+const selectedData = ref();
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+function getModuleComponent({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return ModuleBottom;
+  }
+  if (position.includes('left')) {
+    return ModuleLeft;
+  }
+  if (position.includes('right')) {
+    return ModuleLeft;
+  }
+  return ModuleBottom;
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
+</script>

src/views/vent/home/configurable/components/center-area-warn.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="center-area-green">
+    <div class="container">
+      <!-- <div class="risk-score">
+        <div class="ite-content">
+          <div class="ite-label">瓦斯监测预警</div>
+          <div class="ite-val">低风险</div>
+        </div>
+        <div class="ite-content">
+          <div class="ite-label">矿井瓦斯等级鉴定</div>
+          <div class="ite-val">低瓦斯</div>
+        </div>
+      </div>
+      <div class="dust-warn">
+        <div class="dust-icon"></div>
+        <div class="item-content">
+          <div class="ite-label">粉尘监测预警</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="vent-warn">
+        <div class="vent-icon"></div>
+        <div class="item-content">
+          <div class="ite-label">通风监测预警</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="gas-warn">
+        <div class="gas-icon"></div>
+        <div class="item-content1">
+          <div class="item-label">风险得分</div>
+          <div class="item-val">1.45</div>
+        </div>
+      </div>
+      <div class="device-warn">
+        <div class="device-icon"></div>
+        <div class="item-content">
+          <div class="ite-label">设备监测预警</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="fire-warn">
+        <div class="fire-icon"></div>
+        <div class="item-content">
+          <div class="ite-label">火灾监测预警</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+</script>
+
+<style lang="less" scoped>
+.center-area-green {
+  height: 100%;
+
+  .container {
+    position: relative;
+    width: 50%;
+    height: 70%;
+    margin-top: 16%;
+    margin-left: 25%;
+    background: url(/src/assets/images/home-warn/6-1.png) no-repeat center;
+    background-size: 95% 100%;
+  }
+
+  .risk-score {
+    position: absolute;
+    left: 50%;
+    top: -46px;
+    transform: translate(-44%, 0);
+    width: 206px;
+    height: 60px;
+    font-size: 18px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/1-2.png) no-repeat;
+    background-size: 100% 100%;
+
+    .item-label {
+      text-align: center;
+      margin-bottom: 5px;
+    }
+
+    .item-val {
+      text-align: center;
+      font-family: 'douyuFont';
+    }
+  }
+
+  .dust-warn {
+    position: absolute;
+    left: 220px;
+    top: 52px;
+    width: 120px;
+    height: 106px;
+    background: url(/src/assets/images/home-warn/1-7.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .vent-warn {
+    position: absolute;
+    left: 134px;
+    top: 232px;
+    width: 120px;
+    height: 106px;
+    background: url(/src/assets/images/home-warn/1-5.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .gas-warn {
+    position: absolute;
+    left: 434px;
+    top: 368px;
+    width: 120px;
+    height: 106px;
+    background: url(/src/assets/images/home-warn/1-3.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .device-warn {
+    position: absolute;
+    right: 130px;
+    top: 222px;
+    width: 120px;
+    height: 106px;
+    background: url(/src/assets/images/home-warn/1-6.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .fire-warn {
+    position: absolute;
+    right: 121px;
+    top: 52px;
+    width: 120px;
+    height: 106px;
+    background: url(/src/assets/images/home-warn/1-4.png) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .item-content {
+    position: absolute;
+    left: -4px;
+    top: -54px;
+    width: 127px;
+    height: 56px;
+    background: url(/src/assets/images/home-warn/1-8.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .item-content1 {
+    display: flex;
+    position: absolute;
+    left: -60px;
+    top: -54px;
+    width: 258px;
+    height: 56px;
+    background: url(/src/assets/images/home-warn/1-9.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .ite-label {
+    text-align: center;
+    margin-bottom: 8px;
+    padding-top: 4px;
+  }
+  .ite-val {
+    text-align: center;
+    font-family: 'douyuFont';
+  }
+  .ite-content {
+    width: 50%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -19,7 +19,7 @@
               :dw="item.dw" :type="config.type" :layout="config.layout" />
           </div>
         </template>
-        
+
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
           <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
@@ -85,12 +85,16 @@
         <template v-if="config.name === 'dz_card'">
           <DzCard></DzCard>
         </template>
-        <template v-if="config.name === 'dz_onfire'">
-          <DzScrollList></DzScrollList>
+        <template v-if="config.name === 'dz_dust'">
+          <DzDust></DzDust>
+        </template>
+        <template v-if="config.name === 'dz_risk'">
+          <DzRisk></DzRisk>
         </template>
-        <template v-if="config.name === 'dz_outfire'">
-          <DzUnScrollList></DzUnScrollList>
+        <template v-if="config.name === 'dz_fire'">
+          <DzFire :type="config.config.type" :titleData="config.config.titleData"></DzFire>
         </template>
+      
 
       </div>
     </div>
@@ -127,8 +131,9 @@ import DeviceAlarm from './preset/DeviceAlarm.vue';
 import DzChart from './preset/dz-chart.vue'
 import DzList from './preset/dz-list.vue'
 import DzCard from './preset/dz-card.vue'
-import DzScrollList from './preset/dz-scroll-list.vue'
-import DzUnScrollList from './preset/dz-unscroll-list.vue'
+import DzDust from './preset/dz-dust.vue'
+import DzFire from './preset/dz-fire.vue'
+import DzRisk from './preset/dz-risk.vue'
 // import FIreWarn from './preset/FIreWarn.vue';
 // import FIreControl from './preset/FIreControl.vue';
 

src/views/vent/home/configurable/components/content-warn.vue

@@ -0,0 +1,435 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 主体内容部分 -->
+  <div class="content">
+    <!-- 背景 -->
+    <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
+    <video
+      v-if="background.show && background.type === 'video'"
+      class="content__background content__background_video"
+      width="100%"
+      autoplay
+      loop
+      muted
+      disablepictureinpicture
+      playsinline
+    >
+      <source :src="background.link" />
+      Not Supportted Link Or Browser
+    </video>
+    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'hidden' : 'hidden' }">
+        <!-- 告示板部分 -->
+        <template v-if="config.name === 'board'">
+          <div class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :dw="item.dw"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+        </template>
+
+        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
+        <template v-if="config.name === 'chart'">
+          <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
+        </template>
+        <!-- 通常列表部分 -->
+        <template v-if="config.name === 'list'">
+          <template v-if="config.type === 'timeline'">
+            <TimelineList class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else-if="config.type === 'timelineNew'">
+            <TimelineListNew class="content__module" :list-config="config.items" />
+          </template>
+          <template v-else>
+            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+          </template>
+        </template>
+        <!-- 画廊部分 -->
+        <template v-if="config.name === 'gallery'">
+          <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
+        </template>
+        <!-- 复杂列表部分 -->
+        <template v-if="config.name === 'gallery_list'">
+          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
+        </template>
+        <!-- 复杂列表部分 -->
+        <template v-if="config.name === 'complex_list'">
+          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 表格部分，这部分通常是占一整个模块的 -->
+        <template v-if="config.name === 'table'">
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
+        </template>
+        <template v-if="config.name === 'tabs'">
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+        </template>
+        <template v-if="config.name === 'blast_delta'">
+          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 178 }" />
+        </template>
+        <template v-if="config.name === 'qh_curve'">
+          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
+        </template>
+        <template v-if="config.name === 'ai_chat'">
+          <AIChat class="content__module" />
+        </template>
+        <template v-if="config.name === 'device_alarm'">
+          <DeviceAlarm class="content__module" :devicedata="config.data" />
+        </template>
+        <template v-if="config.name === 'measure_detail'">
+          <MeasureDetail
+            class="content__module"
+            :show-title="false"
+            :composite-data="config.data"
+            :topconfig="config.config.topconfig"
+            :btnconfig="config.config.btnconfig"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard-Warn.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList-green.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable-green.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
+
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+}>();
+
+const { background, layout } = props.moduleData;
+
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
+
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
+      return {
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
+      };
+    });
+  }
+  return getItems(raw, items);
+}
+
+/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        } else {
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        }
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        } else {
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        }
+        break;
+      }
+      case 'chart': {
+        const cfg = chart.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          config: cfg,
+          data,
+        });
+        break;
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
+      }
+    }
+    return arr;
+  }, []);
+});
+</script>
+<style lang="less" scoped>
+@import '@/design/theme.less';
+
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  // z-index: -2;
+  display: flex;
+  flex-direction: column;
+}
+
+.content__background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
+
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+// .content__module:first-of-type {
+//   margin-top: 0;
+// }
+// .content__module:last-of-type {
+//   margin-bottom: 0;
+// }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  /* background-color: transparent; */
+  color: #fff;
+}
+
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
+
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
+
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+</style>

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-Warn.vue

@@ -0,0 +1,364 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
+    <template v-if="layout === 'val-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ dw ? `${label}${dw}` : label }}
+        </div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+    </template>
+    <template v-if="layout === 'label-top'">
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
+        </div>
+      </slot>
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
+        </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 'normal_risk';
+    case '较大风险':
+      return 'high_risk';
+    case '重大风险':
+      return 'higher_risk';
+    case '报警':
+      return 'warning';
+    default:
+      return '';
+  }
+}
+
+defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+@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');
+  }
+}
+
+.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: 186px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 126px;
+    height: 74px;
+    left: 27px;
+    top: -15px;
+    background: url(@/assets/images/vent/small-bg1.png) no-repeat;
+    background-size: cover;
+  }
+}
+
+.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_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__label_J {
+  width: 100%;
+  padding-top: 10px;
+}
+
+.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_K {
+  font-size: 18px;
+  font-family: 'douyuFont';
+  color: #3afde7;
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+.mini-board__label_K {
+  width: 185px;
+  height: 48px;
+  text-align: center;
+  background: url(@/assets/images/vent/plane.png) no-repeat;
+  background-size: contain;
+  background-position: bottom;
+}
+
+.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,344 +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: 186px;
-
-  &::before {
-    position: absolute;
-   content: '';
-    width: 126px;
-    height: 74px;
-    left: 27px;
-    top: -15px;
-    background: url(@/assets/images/vent/small-bg1.png) no-repeat;
-    background-size: cover;
-  }
-
-}
-
-.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);
+    --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_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
+  .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%;
+  }
+
+  .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__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_E:nth-child(3) {
   .mini-board__label_E {
-    background-image: var(--image-jdjl);
-  }
-}
-
-.mini-board__label_J {
-  width: 100%;
-  padding-top: 10px;
-  
-}
-
-.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_K {
-  font-size: 18px;
-  font-family: 'douyuFont';
-  color: #3afde7;
-  text-align: center;
-  margin-bottom: 5px;
-}
-
-.mini-board__label_K {
-  width: 185px;
-  height: 48px;
-  text-align: center;
-  background: url(@/assets/images/vent/plane.png) no-repeat;
-  background-size: contain;
-  background-position: bottom;
-}
-
-.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);
-}
+    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_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__label_J {
+    width: 100%;
+    padding-top: 10px;
+  }
+
+  .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__label_K {
+    z-index: 999;
+  }
+
+  .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/components/original/moduleBottom-warn.vue

@@ -0,0 +1,97 @@
+<template>
+  <div v-if="visible" class="module-content">
+    <div v-if="title" class="module-content__title__expand">
+      <span class="action-btn close-btn" @click="closeModel"></span>
+      <span @click="clickHandler">{{ title }}</span>
+    </div>
+    <div class="module-slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+function closeModel() {
+  emit('close');
+}
+function clickHandler() {
+  emit('click');
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .module-content {
+  }
+}
+
+.module-content {
+  --image-model_original_title_bg_expand: url('@/assets/images/home-green/green-title-bg.png');
+  --bg-height: 28px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: url('@/assets/images/home-warn/2-2.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 15px 15px 0px 15px;
+}
+
+.module-content__title__expand {
+  width: 100%;
+  height: var(--bg-height);
+  position: relative;
+  line-height: var(--bg-height);
+  padding-left: 36px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+// .module-content__title {
+//   width: 50%;
+//   height: var(--bg-height);
+//   background: url('../../../../../assets/images/home-container/configurable/model_bottom_title_bg.png') no-repeat;
+//   background-size: 100% 100%;
+//   position: relative;
+//   text-align: left;
+//   padding-left: 5%;
+// }
+
+// 固定在父容器右上角的按钮图标
+// .action-btn {
+//   width: 18px;
+//   height: 18px;
+//   background: url('../../../../../assets/images/home-container/configurable/expand.svg') no-repeat center;
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+// }
+// .show-btn {
+//   transform: rotate(-90deg);
+// }
+
+.module-slot {
+  height: calc(100% - 33px);
+  width: calc(100% - 15px);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  margin-top: 20px;
+}
+
+// Transition动画相关
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transform: translateY(-33px);
+}
+</style>

src/views/vent/home/configurable/components/original/moduleLeft-warn.vue

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="visible" class="module-content">
+    <div v-if="title" class="module-content__title__expand">
+      <span class="action-btn close-btn" @click="closeModel"></span>
+      <span @click="clickHandler">{{ title }}</span>
+    </div>
+    <div class="module-slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+function closeModel() {
+  emit('close');
+}
+function clickHandler() {
+  emit('click');
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
+  }
+}
+
+.module-content {
+  --bg-height: 28px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: url('@/assets/images/home-warn/2-1.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 15px 15px 0px 15px;
+}
+
+.module-content__title__expand {
+  width: 100%;
+  text-align: center;
+  line-height: 3px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+// .module-content__title {
+//   width: 50%;
+//   height: var(--bg-height);
+//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+//   background-size: 100% 100%;
+//   position: relative;
+//   text-align: right;
+//   padding: 4px 10% 0 0;
+// }
+
+// 固定在父容器右上角的按钮图标
+// .action-btn {
+//   width: 18px;
+//   height: 18px;
+//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+//   position: absolute;
+//   right: 0;
+//   top: 0;
+// }
+// .close-btn {
+//   transform: rotate(-90deg);
+// }
+
+.module-slot {
+  height: calc(100% - 46px);
+  width: 100%;
+  backdrop-filter: blur(5px);
+  margin-top: 26px;
+}
+
+// Transition动画相关
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  // opacity: 1;
+  transform: translateX(-100%);
+  // transform: scaleY(0);
+  // transform-origin: center top;
+}
+</style>

src/views/vent/home/configurable/components/originalNew/NewNavFire.vue

@@ -53,278 +53,267 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-  import { useRouter, useRoute } from 'vue-router';
-  let props = defineProps({
-    Title: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  });
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+let props = defineProps({
+  Title: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-  let menuList = ref<any[]>([
-    {
-      name: '智能通风',
-      targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
-    },
-    {
-      name: '火灾监控',
-      targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
-    },
-    {
-      name: '粉尘监控',
-      targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
-    },
-    {
-      name: '瓦斯监控',
-      MenuItemList: [
-        { name: '多灾融合预警' },
-        { name: '通风监测预警' },
-        { name: '火灾监测预警' },
-        { name: '粉尘监测预警' },
-        { name: '瓦斯监测预警' },
-      ],
-    },
-    {
-      name: '灾害预警',
-      MenuItemList: [
-        { name: '多灾融合预警' },
-        { name: '通风监测预警' },
-        { name: '火灾监测预警' },
-        { name: '粉尘监测预警' },
-        { name: '瓦斯监测预警' },
-      ],
-    },
-  ]); //一级菜单列表
-  let activeIndex = ref(0); //当前激活menu索引
-  const router = useRouter();
-  const route = useRoute();
-  let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
-  let menuItemActive = ref(0); //menuItem当前激活选项
-  const leftMenus = computed(() => menuList.value.slice(0, 4));
-  const rightMenus = computed(() => menuList.value.slice(4));
-  function menuClick(data) {
-    activeIndex.value = data.index;
-    isShowMenuItem.value = !isShowMenuItem.value;
-    router.push({ path: data.item.targatUrl });
-  }
-  function menuItemClick(index) {
-    menuItemActive.value = index;
-    isShowMenuItem.value = false;
-  }
-  function updateActiveState(path: string) {
-    menuList.value.forEach((menu, index) => {
-      // 处理有直接链接的菜单项
-      if (menu.targatUrl === path) {
+let menuList = ref<any[]>([
+  {
+    name: '智能通风',
+    targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
+  },
+  {
+    name: '火灾监控',
+    targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+  },
+  {
+    name: '粉尘监控',
+    targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+  },
+  {
+    name: '瓦斯监控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '灾害预警',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+]); //一级菜单列表
+let activeIndex = ref(0); //当前激活menu索引
+const router = useRouter();
+const route = useRoute();
+let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+let menuItemActive = ref(0); //menuItem当前激活选项
+const leftMenus = computed(() => menuList.value.slice(0, 4));
+const rightMenus = computed(() => menuList.value.slice(4));
+function menuClick(data) {
+  activeIndex.value = data.index;
+  isShowMenuItem.value = !isShowMenuItem.value;
+  router.push({ path: data.item.targatUrl });
+}
+function menuItemClick(index) {
+  menuItemActive.value = index;
+  isShowMenuItem.value = false;
+}
+function updateActiveState(path: string) {
+  menuList.value.forEach((menu, index) => {
+    // 处理有直接链接的菜单项
+    if (menu.targatUrl === path) {
+      activeIndex.value = index;
+      isShowMenuItem.value = false;
+      return;
+    }
+    // 处理有子菜单的菜单项
+    if (menu.MenuItemList) {
+      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+      if (itemIndex !== -1) {
         activeIndex.value = index;
-        isShowMenuItem.value = false;
-        return;
-      }
-      // 处理有子菜单的菜单项
-      if (menu.MenuItemList) {
-        const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
-        if (itemIndex !== -1) {
-          activeIndex.value = index;
-          menuItemActive.value = itemIndex;
-          isShowMenuItem.value = true;
-        }
+        menuItemActive.value = itemIndex;
+        isShowMenuItem.value = true;
       }
-    });
-  }
-  watch(
-    () => route.path,
-    (newPath) => {
-      updateActiveState(newPath);
-    },
-    {
-      immediate: true,
     }
-  );
-  onMounted(() => {
-    updateActiveState(route.path);
   });
+}
+watch(
+  () => route.path,
+  (newPath) => {
+    updateActiveState(newPath);
+  },
+  {
+    immediate: true,
+  }
+);
+onMounted(() => {
+  updateActiveState(route.path);
+});
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
 
-  @font-face {
+.New-nav {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .main-title {
+    width: 518px;
+    height: 100%;
+    display: flex;
+    align-items: center;
     font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
+    font-size: 25px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    padding: 0;
+    color: #fff;
   }
 
-  .New-nav {
-    position: relative;
-    width: 100%;
+  .nav-menu {
+    position: absolute;
+    top: 0;
+    left: 675px;
     height: 100%;
+    display: flex;
+    position: static; // 移除绝对定位
+    display: flex;
+    width: auto;
+    .nav-menu-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      float: left;
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
+        background-size: 100% 100%;
+      }
 
-    .main-title {
-      width: 518px;
-      height: 100%;
+      .nav-menu-unactive {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .nav-menu-right {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      font-family: 'douyuFont';
-      font-size: 25px;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      width: auto;
-      padding: 0;
+      float: left;
+      margin-left: 42%;
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .nav-menu-unactive {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
+        background-size: 100% 100%;
+      }
     }
 
-    .nav-menu {
+    .nav-menu-item {
       position: absolute;
-      top: 0;
-      left: 675px;
-      height: 100%;
-      display: flex;
-      position: static; // 移除绝对定位
+      top: 23px;
+      width: 130px;
       display: flex;
-      width: auto;
-      .nav-menu-left {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        float: left;
-        .nav-menu-active {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
-          background-size: 100% 100%;
-        }
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box;
 
-        .nav-menu-unactive {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
+      .nav-menu-content {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        margin-top: 25%;
+        .nav-menu-List {
+          background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
           background-size: 100% 100%;
         }
-      }
-      .nav-menu-right {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        float: left;
-        margin-left: 42%;
-        .nav-menu-active {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
+        .menu-item-active {
+          color: #ddd;
+          z-index: 999;
+          width: 100%;
+          height: 36px;
+          line-height: 36px;
+          font-size: 14px;
+          background: url('@/assets/images/fireNew/2-2.png') no-repeat;
           background-size: 100% 100%;
         }
 
-        .nav-menu-unactive {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
+        .menu-item-unactive {
+          color: #ddd;
+          width: 100%;
           height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
-          background-size: 100% 100%;
+          line-height: 40px;
+          font-size: 14px;
         }
       }
+    }
 
-      .nav-menu-item {
-        position: absolute;
-        top: 23px;
-        width: 130px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-
-        .nav-menu-content {
-          width: 100%;
-          height: 100%;
-          overflow-y: auto;
-          margin-top: 25%;
-          .nav-menu-List {
-            background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
-            background-size: 100% 100%;
-          }
-          .menu-item-active {
-            color: #ddd;
-            z-index: 999;
-            width: 100%;
-            height: 36px;
-            line-height: 36px;
-            font-size: 14px;
-            background: url('@/assets/images/fireNew/2-2.png') no-repeat;
-            background-size: 100% 100%;
-          }
-
-          .menu-item-unactive {
-            color: #ddd;
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            font-size: 14px;
-          }
-        }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
       }
 
-      @keyframes fadeIn {
-        from {
-          opacity: 0;
-        }
-
-        to {
-          opacity: 1;
-        }
+      to {
+        opacity: 1;
       }
+    }
 
-      /* 定义淡出动画 */
-      @keyframes fadeOut {
-        from {
-          opacity: 1;
-        }
+    /* 定义淡出动画 */
+    @keyframes fadeOut {
+      from {
+        opacity: 1;
+      }
 
-        to {
-          opacity: 0;
-        }
+      to {
+        opacity: 0;
       }
     }
+  }
 
-    .userInfo {
-      width: 120px;
-      float: right;
-      background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
-      background-size: 100% 100%;
-      position: absolute;
-      top: 14px;
-      right: 0;
-      .userName {
-        margin-left: 40px;
-        font-size: 20px;
-      }
+  .userInfo {
+    width: 120px;
+    float: right;
+    background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 14px;
+    right: 0;
+    .userName {
+      margin-left: 40px;
+      font-size: 20px;
     }
   }
+}
 </style>

src/views/vent/home/configurable/components/originalNew/NewNavWarn.vue

@@ -0,0 +1,295 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="New-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div class="nav-menu-left">
+        <div v-for="(item, index) in leftMenus" :key="index">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })">
+            <div style="color: #ddd">{{ item.name }}</div>
+
+            <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <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>
+          </div>
+        </div>
+      </div>
+      <div class="nav-menu-right">
+        <div v-for="(item, index) in rightMenus" :key="index + 4">
+          <div
+            :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'"
+            :key="index + 4"
+            @click="menuClick({ item, index: index + 4 })"
+          >
+            <div style="color: #ddd">{{ item.name }}</div>
+            <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  let props = defineProps({
+    Title: {
+      type: String,
+      default: '',
+    },
+  });
+
+  let menuList = ref<any[]>([
+    {
+      name: '智能通风',
+      targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
+    },
+    {
+      name: '火灾监控',
+      targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+    },
+    {
+      name: '粉尘监控',
+      targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+    },
+    {
+      name: '瓦斯监控',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+    {
+      name: '灾害预警',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+  ]); //一级菜单列表
+  let activeIndex = ref(0); //当前激活menu索引
+  const router = useRouter();
+  const route = useRoute();
+  let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+  let menuItemActive = ref(0); //menuItem当前激活选项
+  const leftMenus = computed(() => menuList.value.slice(0, 4));
+  const rightMenus = computed(() => menuList.value.slice(4));
+  function menuClick(data) {
+    activeIndex.value = data.index;
+    isShowMenuItem.value = !isShowMenuItem.value;
+    router.push({ path: data.item.targatUrl });
+  }
+  function menuItemClick(index) {
+    menuItemActive.value = index;
+    isShowMenuItem.value = false;
+  }
+  function updateActiveState(path: string) {
+    menuList.value.forEach((menu, index) => {
+      // 处理有直接链接的菜单项
+      if (menu.targatUrl === path) {
+        activeIndex.value = index;
+        isShowMenuItem.value = false;
+        return;
+      }
+      // 处理有子菜单的菜单项
+      if (menu.MenuItemList) {
+        const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+        if (itemIndex !== -1) {
+          activeIndex.value = index;
+          menuItemActive.value = itemIndex;
+          isShowMenuItem.value = true;
+        }
+      }
+    });
+  }
+  watch(
+    () => route.path,
+    (newPath) => {
+      updateActiveState(newPath);
+    }
+  );
+  onMounted(() => {
+    updateActiveState(route.path);
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  .New-nav {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .main-title {
+      width: 518px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-family: 'douyuFont';
+      font-size: 25px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      padding: 0;
+    }
+
+    .nav-menu {
+      position: absolute;
+      top: 0;
+      left: 675px;
+      height: 100%;
+      display: flex;
+      position: static; // 移除绝对定位
+      display: flex;
+      width: auto;
+      .nav-menu-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+      }
+      .nav-menu-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+        margin-left: 40%;
+      }
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 120px;
+        height: 60px;
+        margin-top: 20px;
+        line-height: 45px;
+        text-align: center;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background: url('@/assets/images/vent/homeNew/Select-btn.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .nav-menu-unactive {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 65px;
+        text-align: center;
+        margin: 0px 10px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
+
+      .nav-menu-item {
+        position: absolute;
+        top: 23px;
+        width: 130px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .nav-menu-content {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          margin-top: 25%;
+          .nav-menu-List {
+            background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .menu-item-active {
+            color: #ddd;
+            z-index: 999;
+            width: 100%;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            background: url('@/assets/images/vent/homeNew/selectActive.png') no-repeat;
+            background-size: 100% 100%;
+          }
+
+          .menu-item-unactive {
+            color: #ddd;
+            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;
+        }
+      }
+    }
+
+    .userInfo {
+      width: 120px;
+      float: right;
+      background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 14px;
+      right: 0;
+      .userName {
+        margin-left: 40px;
+        font-size: 20px;
+      }
+    }
+  }
+</style>

src/views/vent/home/configurable/components/preset/dz-card.vue

@@ -3,17 +3,45 @@
         <div class="gas-box">
             <div class="gas-item">
                 <div class="detail-box">
-                    <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                        <div class="">{{ item.label }}</div>
-                        <div class="value">{{ !item.value ? '-' : item.value }}</div>
+                    <div class="detail-container">
+                        <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
+                            <div class="item-box">
+                                <div class="item-box-label">监测位置</div>
+                                <div class="item-box-val">竖管1嘻嘻嘻嘻嘻嘻</div>
+                            </div>
+                            <div class="item-box">
+                                <div class="item-box-label">预警等级</div>
+                                <div class="item-box-val">橙色预警</div>
+                            </div>
+                            <div class="item-box">
+                                <div class="item-box-label">煤自燃阶段</div>
+                                <div class="item-box-val">加速氧化阶段</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="gas-item">
                 <div class="detail-box">
-                    <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                        <div class="">{{ item.label }}</div>
-                        <div class="value">{{ !item.value1 ? '-' : item.value1 }}</div>
+                    <div class="detail-container">
+                        <div class="detail-item">
+                            <div class="item-box1">
+                                <div class="item-box-label">温度</div>
+                                <div class="item-box-val1">低风险</div>
+                            </div>
+                            <div class="item-box1">
+                                <div class="item-box-label">烟雾</div>
+                                <div class="item-box-val1">束管1</div>
+                            </div>
+                            <div class="item-box1">
+                                <div class="item-box-label">火焰</div>
+                                <div class="item-box-val1">束管1</div>
+                            </div>
+                            <div class="item-box1">
+                                <div class="item-box-label">CO最大值(ppm)</div>
+                                <div class="item-box-val1">182.39</div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -32,62 +60,86 @@ let gasMonitor = ref([
 
 <style lang="less" scoped>
 .dzCard {
-    position: relative;
     width: 100%;
-    height: 100%;
+    height: 72%;
+    position: absolute;
+    left: 0;
+    top: 86px;
 
     .gas-box {
         display: flex;
-        justify-content: space-around;
+        justify-content: center;
         height: 100%;
-        overflow-y: auto;
 
         .gas-item {
             position: relative;
-            width: 170px;
+            width: 50%;
             height: 100%;
-            margin-left: 10px;
+            margin: 0px 5px;
+
+            &:nth-child(1) {
+                background: url('@/assets/images/home-green/900.png') no-repeat;
+                background-size: 100% 100%;
+            }
+
+            &:nth-child(2) {
+                background: url('@/assets/images/home-green/1100.png') no-repeat;
+                background-size: 100% 100%;
+            }
 
             .detail-box {
                 position: relative;
-                margin: 0 auto;
-                width: 100%;
                 height: 100%;
-                background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
-                background-size: cover;
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                overflow-y: auto;
-
-                &::after {
-                    position: absolute;
-                    content: '';
-                    left: 0px;
-                    bottom: 0px;
-                    width: 100%;
-                    height: 31px;
-                    background: url('@/assets/images/vent/plane1.png') no-repeat center;
-                    background-size: 100% 100%;
-                    background-position: bottom;
-                }
+                padding-top: 68px;
+
+                .detail-container {
+                    height: 100%;
+                    overflow-y: auto;
+
+                    .detail-item {
+                        width: 100%;
+                        height: 100%;
+
+                        .item-box {
+                            width: 100%;
+                            padding: 0px 10px;
+                            height: 60px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                        }
+
+                        .item-box1 {
+                            width: 100%;
+                            padding: 0px 10px;
+                            height: 42px;
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+
+                        }
+
+                        .item-box-label {
+                            flex-shrink: 0;
+                            width: 70px;
+                            text-align: left;
+                            margin-right: 10px;
+                        }
 
-                .detail-item {
-                    width: 100%;
-                    height: 40px;
-                    background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
-                    display: flex;
-                    padding: 0 10px;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 30px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        text-align: center;
+                        .item-box-val {
+                            text-align: right;
+                            color: #b9ffe5;
+                            font-family: 'douyuFont';
+                            font-size: 12px;
+                        }
+                          .item-box-val1 {
+                            text-align: right;
+                            color: #b9f1ff;
+                            font-family: 'douyuFont';
+                            font-size: 12px;
+                            
+                        }
                     }
                 }
             }

src/views/vent/home/configurable/components/preset/dz-chart.vue

@@ -5,8 +5,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from 'vue'
+import { ref, reactive, watch, onMounted, nextTick } from 'vue'
 import * as echarts from 'echarts';
+import warnLevel1 from '@/assets/images/home-green/300.png'
+import warnLevel2 from '@/assets/images/home-green/400.png'
+import warnLevel3 from '@/assets/images/home-green/500.png'
+import warnLevel4 from '@/assets/images/home-green/600.png'
+import warnLevel5 from '@/assets/images/home-green/700.png'
+
 let props = defineProps({
     echartOption: {
         type: Object,
@@ -15,81 +21,284 @@ let props = defineProps({
         }
     },
     echartData: {
-        type: Object,
+        type: Array,
         default: () => {
-            return {}
+            return []
         }
     }
 })
 
+//获取dom元素节点
+let chartRef = ref<any>();
+// 类别
+let category = ref<any[]>([])
+let echartY=ref<any[]>([])
+function getOption() {
+    let myChart = echarts.init(chartRef.value);
+    let option = {
+        xAxis: {
+            max: 10,
+            splitLine: {
+                show: false
+            },
+            axisLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+        },
+        grid: {
+            left: 10,
+            top: 10, // 设置条形图的边距
+            right: 10,
+            bottom: 0
+        },
+        yAxis: [{
+            type: "category",
+            inverse: false,
+            data: category.value,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            },
+        }],
+        series: [
+            {
+                // 内
+                type: "bar",
+                barWidth: 18,
+                silent: true,
+                itemStyle: {
+                    normal: {
+                        color: function (param) {
+                            const colors = ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5',];
+                            return colors[param.dataIndex % colors.length];
+                        }
+                    }
+                },
+                label: {
+                    normal: {
+                        formatter: (params) => {
+                            let text;
+                            if (params.dataIndex == 0) {
+                                text = `{warnLevel5|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            } else if (params.dataIndex == 1) {
+                                text = `{warnLevel4|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            } else if (params.dataIndex == 2) {
+                                text = `{warnLevel3|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            } else if (params.dataIndex == 3) {
+                                text = `{warnLevel2|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            } else if (params.dataIndex == 4) {
+                                text = `{warnLevel1|\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0${params.data.name}}`;
+                            }
+                            return text;
+                        },
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 12
+                        },
+                        position: [0, -22],
+                        show: true,
+                        rich: { //富文本
+                            warnLevel1: {
+                                backgroundColor: {
+                                    image: warnLevel1,
+                                },
+                                height: 16,
+                                width: 16,
+                            },
+                            warnLevel2: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel2,
+                                },
+                                height: 16,
+                                width: 16,
+                            },
+                            warnLevel3: {
+                                backgroundColor: {
+                                    image: warnLevel3,
+                                },
+                                height: 16,
+                                width: 16,
+                            },
+                            warnLevel4: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel4,
+                                },
+                                height: 16,
+                                width: 16,
+                            },
+                            warnLevel5: {
+                                backgroundColor: { //这里可以添加你想自定义的图片
+                                    image: warnLevel5,
+                                },
+                                height: 16,
+                                width: 16,
+                            },
 
-// 1. 准备数据
-const riskData: any[] = [
-    { name: '低风险', color: '#1890FF', value: 123 },
-    { name: '一般风险', color: '#FFB900', value: 123 },
-    { name: '较大风险', color: '#FFA800', value: 123 },
-    { name: '严重风险', color: '#FF4D4F', value: 123 },
-];
+                        },
 
-// 2. 初始化图表
-const chartRef = ref(null);
-let chartInstance: any = null;
+                    }
+                },
+                data: category.value,
+                z: 1,
+                animationEasing: "elasticOut"
+            },
 
+            {
+                // 分隔
+                type: "pictorialBar",
+                itemStyle: {
+                    normal: {
+                        color: "rgba(28, 48, 52)"
+                    }
+                },
+                symbolRepeat: "fixed",
+                symbolMargin: 3,
+                symbol: "rect",
+                symbolClip: true,
+                symbolSize: [10, 24],
+                symbolPosition: "start",
+                symbolOffset: [1, -4],
+                symbolBoundingData: 10,
+                data: [10, 10, 10, 10, 10],
+                z: 2,
+                animationEasing: "elasticOut",
 
 
-onMounted(() => {
-    chartInstance = echarts.init(chartRef.value);
-    renderChart();
-})
+            },
+            {
+                // label
+                type: "pictorialBar",
+                symbolBoundingData: 10,
+                itemStyle: {
+                    normal: {
+                        color: "none"
+                    }
+                },
+                label: {
+                    normal: {
+                        formatter: (params) => {
+                            let text;
+                            if (params.dataIndex == 0) {
+                                text = '{a| ' + params.data + '}';
+                            } else if (params.dataIndex == 1) {
+                                text = '{b| ' + params.data + '}';
+                            } else if (params.dataIndex == 2) {
+                                text = '{c| ' + params.data + '}';
+                            } else if (params.dataIndex == 3) {
+                                text = '{d| ' + params.data + '}';
+                            } else if (params.dataIndex == 4) {
+                                text = '{e| ' + params.data + '}';
+                            } else {
+                                text = '{f| ' + params.data + '}';
+                            }
+
+                            return text;
+                        },
+                        rich: {
+                            a: {
+                                color: "#ff0000"
+                            },
+                            b: {
+                                color: "#ff7700"
+                            },
+                            c: {
+                                color: "#d8b66f"
+                            },
+                            d: {
+                                color: "#dbbf2e"
+                            },
+                            e: {
+                                color: "#61b4c5"
+                            },
+                            f: {
+                                color: "#fff"
+                            },
+                        },
+                        position: [330, -12],
+                        show: true
+                    }
+                },
+                data: echartY.value,
+                z: 0,
 
-// 3. 配置图表选项
-function renderChart() {
-    const option = {
-        // 隐藏 x 轴刻度、y 轴刻度，仅显示标签
-        xAxis: {
-            show: false,
-        },
-        yAxis: {
-            type: 'category',
-            inverse: true, // 倒置 y 轴，让“低风险”在最上方
-            axisTick: { show: false }, // 隐藏刻度线
-            axisLine: { show: false }, // 隐藏轴线
-            axisLabel: {
-                color: '#fff', // 标签颜色（背景深色时用白色）
-                fontSize: 14,
-                margin: 20, // 标签与进度条的间距
-                formatter: (value) => `${value} ${riskData.find(item => item.name === value).value}`, // 格式化：风险等级 + 数值
             },
-            data: riskData.map(item => item.name), // 风险等级列表
-        },
-        series: riskData.map((item, index) => ({
-            name: item.name,
-            type: 'bar',
-            symbol: 'path://M 0 5 L 17 0 L 17 10 z', // 进度条形状（矩形块）
-            symbolOffset: [0, 0], // 形状偏移（0,0 表示不偏移）
-            barWidth: 13, // 进度条宽度
-            itemStyle: {
-                barBorderWidth: 2, // 进度条边框宽度
-                barBorderColor: 'rgb(254, 127, 125)', // 进度条边框颜色（可选，此处为占位）
-                color: item.color, // 进度条颜色
+
+            {
+                name: "外框",
+                type: "bar",
+                barGap: "-130%", // 设置外框粗细
+                data: [10, 10, 10, 10, 10],
+
+                barWidth: 29,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [0, 0, 0, 0],
+                        color: "transparent", // 填充色
+                        barBorderColor: "#3ecca7", // 边框色
+                        barBorderWidth: 1, // 边框宽度
+
+                    }
+                },
+
+                z: 2
             },
-            data: [item.value], // 进度条长度（对应数值）
-        })),
+            {
+                type: 'scatter',
+                name: '条形',
+                symbol: 'roundRect',
+                symbolSize: [6, 14],
+                symbolOffset: [3, -3],
+                symbolKeepAspect: true,
+                itemStyle: {
+                    normal: {
+                        color: "#3ecca7"
+                    }
+                },
+                data: [10, 10, 10, 10, 10],
+            }
+
+        ]
+    }
+    myChart.setOption(option);
+    window.onresize = function () {
+        myChart.resize();
     };
-    chartInstance.setOption(option);
+
 }
-// let windData = reactive<any>({})
 
-// watch(() => props.echartData, (newV, oldV) => {
-//     windData = Object.assign({}, newV)
-// }, { immediate: true, deep: true })
+
+
+
+
+
+
+watch(() => props.echartData, (newV, oldV) => {
+  console.log(newV,'99900')
+  if(newV.length){
+    category.value=newV
+    echartY.value=newV.map((el:any)=>el.value)
+    console.log(echartY.value,'900')
+    getOption()
+  }
+}, { immediate: true,  })
 
 </script>
 
 <style lang="less" scoped>
 .dz_chart {
     position: relative;
-    width: 100%;
+    padding-top: 10px;
     height: 100%;
 
     .chartRef {

src/views/vent/home/configurable/components/preset/dz-dust.vue

@@ -0,0 +1,424 @@
+<template>
+    <div class="dz-dust">
+        <div ref="chartDust" class="chartDust"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, nextTick } from 'vue'
+import * as echarts from 'echarts';
+
+//获取dom元素节点
+let chartDust = ref<any>();
+const colors = [{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#8331D9"
+    },
+    {
+        offset: 0.5,
+        color: "#720DFF"
+    },
+    {
+        offset: 0.5,
+        color: "#B635FC"
+    },
+    {
+        offset: 1,
+        color: "#7F2CF1"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#F27921"
+    },
+    {
+        offset: 0.5,
+        color: "#EE3E70"
+    },
+    {
+        offset: 0.5,
+        color: "#F48D35"
+    },
+    {
+        offset: 1,
+        color: "#C82957"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#F17620"
+    },
+    {
+        offset: 0.5,
+        color: "#F5D01C"
+    },
+    {
+        offset: 0.5,
+        color: "#EF8E08"
+    },
+    {
+        offset: 1,
+        color: "#FEDC44"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#4D34FF"
+    },
+    {
+        offset: 0.5,
+        color: "#244EFB"
+    },
+    {
+        offset: 0.5,
+        color: "#5034D9"
+    },
+    {
+        offset: 1,
+        color: "#316CE8"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#20AAF8"
+    },
+    {
+        offset: 0.5,
+        color: "#2C74FF"
+    },
+    {
+        offset: 0.5,
+        color: "#27AEFA"
+    },
+    {
+        offset: 1,
+        color: "#4D8AFF"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#289DF5"
+    },
+    {
+        offset: 0.5,
+        color: "#0DE8FF"
+    },
+    {
+        offset: 0.5,
+        color: "#49B1FB"
+    },
+    {
+        offset: 1,
+        color: "#17E9FD"
+    }
+    ]
+},
+{
+    type: "linear",
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+        offset: 0,
+        color: "#4FC3B2"
+    },
+    {
+        offset: 0.5,
+        color: "#49B5A3"
+    },
+    {
+        offset: 0.5,
+        color: "#57D1BF"
+    },
+    {
+        offset: 1,
+        color: "#5AD1BD"
+    }
+    ]
+}
+];
+
+
+function getOption() {
+    nextTick(() => {
+        let myChart = echarts.init(chartDust.value);
+        const offsetX = 8;
+        const offsetY = 4;
+        const colorList=[
+            ['rgba(63, 124, 136, 1)','rgba(77, 193, 211, 1)'],
+              ['rgba(145, 129, 47, 1)','rgba(211, 184, 46, 1)'],
+                ['rgba(159, 121, 69, 1)','rgba(226, 173, 101, 1)'],
+                  ['rgba(163, 90, 25, 1)','rgba(240, 114, 4, 1)'],
+                    ['rgba(158, 13, 13, 1)','rgba(239, 2, 2, 1)'],
+        ];
+        // 绘制左侧面
+        const CubeLeft = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const xAxisPoint = shape.xAxisPoint;
+                const c0 = [shape.x, shape.y];
+                const c1 = [shape.x - offsetX, shape.y - offsetY];
+                const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+                const c3 = [xAxisPoint[0], xAxisPoint[1]];
+                ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
+            },
+        });
+        // 绘制右侧面
+        const CubeRight = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const xAxisPoint = shape.xAxisPoint;
+                const c1 = [shape.x, shape.y];
+                const c2 = [xAxisPoint[0], xAxisPoint[1]];
+                const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+                const c4 = [shape.x + offsetX, shape.y - offsetY];
+                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+            },
+        });
+        // 绘制顶面
+        const CubeTop = echarts.graphic.extendShape({
+            shape: {
+                x: 0,
+                y: 0,
+            },
+            buildPath: function (ctx, shape) {
+                const c1 = [shape.x, shape.y];
+                const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+                const c3 = [shape.x, shape.y - offsetX];
+                const c4 = [shape.x - offsetX, shape.y - offsetY];
+                ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
+            },
+        });
+        // 注册三个面图形
+        echarts.graphic.registerShape('CubeLeft', CubeLeft);
+        echarts.graphic.registerShape('CubeRight', CubeRight);
+        echarts.graphic.registerShape('CubeTop', CubeTop);
+        let option = {
+            tooltip: {
+                trigger: 'item',
+            },
+            grid: {
+                top: "8%",
+                left: "5%",
+                right: "5%",
+                bottom: "5%",
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                data: ['低风险', '一般风险', '较大风险', '重大风险', '报警'],
+                // X
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        // width: 1,
+                        color: '#2B7BD6',
+                    },
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    fontSize: 14,
+                    interval: 0,
+                },
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(34, 55, 81,.7)',
+                    },
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: '#FFF',  //更改坐标轴文字颜色
+                        fontSize: 12     //更改坐标轴文字大小
+                    }
+                }
+            },
+            yAxis: {
+                name: '',
+                type: 'value',
+                axisLine: {
+                    show: false,
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        // type: 'dashed',
+                      color: 'rgba(34, 55, 81,.7)',
+                    },
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    fontSize: 14,
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: '#FFF',  //更改坐标轴文字颜色
+                        fontSize: 12     //更改坐标轴文字大小
+                    }
+                }
+            },
+            series: [
+                // 柱体
+                {
+                    name: '',
+                    type: 'custom',
+                    stack: "Ad",
+                    renderItem: (params, api) => {
+                        console.log(params,'111---')
+                        const location = api.coord([api.value(0), api.value(1)]);
+                        return {
+                            type: 'group',
+                            x: 1,
+                            children: [
+                                {
+                                    type: 'CubeLeft',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                                {
+                                    type: 'CubeRight',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                                {
+                                    type: 'CubeTop',
+                                    shape: {
+                                        api,
+                                        xValue: api.value(0),
+                                        yValue: api.value(1),
+                                        x: location[0],
+                                        y: location[1],
+                                        xAxisPoint: api.coord([api.value(0), 0]),
+                                    },
+                                    style: {
+                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                            {
+                                                offset: 0,
+                                                color: colorList[params.dataIndex][0],
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: colorList[params.dataIndex][1],
+                                            },
+                                        ]),
+                                    },
+                                },
+                            ],
+                        };
+                    },
+                    data: [21, 35, 44, 61, 74,],
+                },
+            ],
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+
+onMounted(() => {
+    getOption()
+})
+
+</script>
+
+<style lang="less" scoped>
+.dz-dust {
+    position: relative;
+    height: 100%;
+
+    .chartDust {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/views/vent/home/configurable/components/preset/dz-fire.vue

@@ -0,0 +1,139 @@
+<template>
+    <div class="dz-fire">
+        <div class="fire-container" :class="`fire-container_${type}`">
+            <div class="title-box" :class="`title-box_${type}`">
+                <div :class="`title-box-label_${type}`">{{ titleData.label }}</div>
+                <div :class="`title-box-val_${type}`">{{ titleData.value }}</div>
+            </div>
+            <div class="content-box" :class="`content-box_${type}`">
+                <div class="content-box-item" v-for="(item, index) in List" :key="index">
+                    <div class="box-item-label">{{ item.label }}</div>
+                    <div class="box-item-value">{{ item.value }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, } from 'vue'
+
+let props = defineProps({
+    type: {
+        type: String,
+        defualt: '',
+    },
+    titleData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+let List = ref<any[]>([
+    { label: '22煤', value: '20' },
+    { label: '32煤', value: '21' },
+    { label: '42煤', value: '22' },
+    { label: '52煤', value: '23' },
+
+])
+
+
+</script>
+
+<style lang="less" scoped>
+.dz-fire {
+    height: 100%;
+    padding: 10px 25px 0px 25px;
+    box-sizing: border-box;
+
+    .fire-container_A {
+        position: relative;
+        width: 100%;
+        height: 85px;
+        background: url('@/assets/images/home-green/1300.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .fire-container_B {
+        position: relative;
+        width: 100%;
+        height: 85px;
+        background: url('@/assets/images/home-green/1200.png') no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .title-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        left: 122px;
+        top: 0;
+    }
+
+    .content-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        left: 122px;
+        top: 32px;
+    }
+    .content-box-item{
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+    .box-item-value{
+         font-family: 'douyuFont';
+                    font-size: 12px;
+    }
+
+
+    .title-box_A {
+        width: 398px;
+        height: 32px;
+    }
+
+    .title-box_B {
+        width: 398px;
+        height: 32px;
+    }
+
+    .title-box-label_A {
+        color: #b9ffe5;
+    }
+
+    .title-box-label_B {
+        color: #b9f1ff;
+    }
+
+    .title-box-val_A {
+        font-family: 'douyuFont';
+        color: #b9ffe5;
+    }
+
+    .title-box-val_B {
+        font-family: 'douyuFont';
+        color: #b9f1ff;
+    }
+
+    .content-box_A {
+        display: flex;
+        width: 398px;
+        height: 42px;
+    }
+    .content-box_B {
+        display: flex;
+        width: 398px;
+        height: 42px;
+    }
+
+
+}
+</style>

src/views/vent/home/configurable/components/preset/dz-list.vue

@@ -3,23 +3,21 @@
         <div class="icons-box" @mouseleave="resetScroll">
             <template v-for="(item, key) in listOption" :key="key">
                 <div class="icon-item">
-                    <div class="wrapper">
-                        {{ item.text }}
-                    </div>
-                    <div></div>
-                    <img :src="item.url" :alt="item.text" />
+                    <!-- <img :src="item.url" :alt="item.text" /> -->
                     <div class="level-text">
                         <div class="all-count">
                             <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
-                            <span class="num-count">{{ item.allCount || 0 }}</span>
+                            <span class="num-count">{{ listData[item.allCount] || 0 }}</span>
                         </div>
                         <div class="warn-count">
                             <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
-                            <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ item.warnCount || 0 }}</span>
+                            <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ listData[item.warnCount] || 0
+                                }}</span>
                         </div>
                         <div class="close-count">
                             <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
-                            <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ item.closeCount || 0
+                            <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ listData[item.closeCount] ||
+                                0
                                 }}</span>
                         </div>
                     </div>
@@ -30,18 +28,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive,watch } from 'vue'
+import { ref, reactive, watch } from 'vue'
 
-let props=defineProps({
-    listOption:{
-        type:Object,
-        default:()=>{
+let props = defineProps({
+    listOption: {
+        type: Object,
+        default: () => {
             return {}
         }
     },
-    listData:{
-        type:Object,
-        default:()=>{
+    listData: {
+        type: Object,
+        default: () => {
             return {}
         }
     }
@@ -52,9 +50,9 @@ const resetScroll = (e: Event) => {
     if (e.target && e.target) (e.target as Element).scrollTop = 0;
 };
 
-watch(()=>props.listData,(newV,oldV)=>{
-console.log(newV,'设备')
-},{immediate:true,deep:true})
+watch(() => props.listData, (newV, oldV) => {
+    console.log(newV, '设备')
+}, { immediate: true, deep: true })
 </script>
 
 <style lang="less" scoped>
@@ -73,10 +71,14 @@ console.log(newV,'设备')
 
         .icon-item {
             position: relative;
+            width: 100%;
+            height: 46px;
+            background: url('@/assets/images/home-green/1600.png') no-repeat;
+            background-size: 100% 100%;
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 3px;
+            margin: 5px auto;
 
             &:nth-child(even) {
                 padding-right: 0px;
@@ -87,10 +89,10 @@ console.log(newV,'设备')
                 display: flex;
                 justify-content: space-around;
                 position: absolute;
-                top: 33px;
+                top: 10px;
                 left: 76px;
                 color: #ffffffe0;
-                font-size: 13px;
+                font-size: 14px;
                 text-align: center;
                 letter-spacing: 1px;
 
@@ -117,16 +119,6 @@ console.log(newV,'设备')
                 height: 60px;
             }
         }
-
-        .wrapper {
-            position: absolute;
-            top: 48px;
-            left: 112px;
-            color: #ffffffe0;
-            font-size: 13px;
-            text-align: center;
-            letter-spacing: 1px;
-        }
     }
 }
 </style>

src/views/vent/home/configurable/components/preset/dz-risk.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="dz-risk">
+        <div class="risk-container">
+            <div class="risk-center"></div>
+            <div ref="riskPie" class="risk-pie"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue'
+import * as echarts from 'echarts';
+
+let riskPie = ref(null)
+
+function getOption() {
+    nextTick(() => {
+        const colorList = [
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(182, 242, 255,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(95, 228, 255,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(176, 255, 236,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(86, 255, 171,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(255, 253, 176,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(255, 255, 86,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+            {
+                type: 'radial',
+                r: 1,
+                colorStops: [{
+                    offset: 0, color: 'rgba(215, 179, 255,1)' // 0% 处的颜色
+                }, {
+                    offset: 1, color: 'rgba(134, 88, 255,1)' // 100% 处的颜色
+                }],
+                // global: false // 缺省为 false
+            },
+        ]
+        const arr = [
+            { value: 123, name: '通风' },
+            { value: 102, name: '火灾' },
+            { value: 122, name: '瓦斯' },
+            { value: 137, name: '粉尘' },
+
+        ]
+        let myChart = echarts.init(riskPie.value);
+        let option = {
+            color: colorList,
+            tooltip: {
+                trigger: 'item'
+            },
+            series: [{
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['48%', '70%'],
+                // clockwise: false,
+                avoidLabelOverlap: false,
+                emphasis: {
+                    label: {
+                        show: true
+                    }
+                },
+                
+                // hoverOffset: 0,
+                 highlight: true,
+                itemStyle: {
+                    normal: {
+                        color: function (params) {
+                            return colorList[params.dataIndex]
+                        }
+                    }
+                },
+                label: {
+                    show: true,
+                    position: 'outside',
+                    formatter: '{a|{b}：{d}%}\n{hr|}',
+                  rich: {
+                hr: {
+                    backgroundColor: 't',
+                    borderRadius: 3,
+                    width: 3,
+                    height: 3,
+                    padding: [3, 3, 0, -12]
+                },
+                a: {
+                    padding: [-30, 15, -20, 15]
+                }
+            }
+                },
+
+
+                labelLine: {
+                    normal: {
+                        length: 10,
+                        length2: 20,
+                        lineStyle: {
+                            width: 1
+                        }
+                    }
+                },
+                data: arr,
+            }]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+
+onMounted(() => {
+    getOption()
+
+})
+</script>
+
+<style lang="less" scoped>
+.dz-risk {
+    height: 100%;
+
+    .risk-container {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        height: 210px;
+        background: url('@/assets/images/home-green/1400.png') no-repeat center;
+        background-size: auto 100%;
+
+        .risk-center {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: 80px;
+            background: url('@/assets/images/home-green/1500.png') no-repeat center;
+            background-size: auto 100%;
+        }
+
+        .risk-pie {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

src/views/vent/home/configurable/components/preset/dz-scroll-list.vue

@@ -1,248 +0,0 @@
-<template>
-    <div class="dzScrollList">
-        <div class="item item1">
-            <div class="icon"></div>
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" :step="0.18"
-                :limit-scroll-num="fireMonitor1.length" class="seamless-warp1">
-                <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
-                    <div class="box-item">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.value1 ? item.value1 : '--' }}</div>
-                        <div class="title">监测位置</div>
-                    </div>
-
-                    <div class="box-item">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.warnLevel || '-' }}
-                        </div>
-                        <div class="title">预警等级</div>
-                    </div>
-                    <div class="box-item1">
-                        <div :class="{
-                            value1: item.warnLevel == '绿色预警',
-                            value2: item.warnLevel == '黄色预警',
-                            value3: item.warnLevel == '红色预警',
-                        }">{{ item.smokeJd || '-' }}
-                        </div>
-                        <div class="title">煤自燃阶段</div>
-                    </div>
-                </div>
-            </vue3-seamless-scroll>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-
-let fireMonitor1 = reactive<any[]>([
-    { warnLevel: '束管1', smokeJd: '绿色预警', value1: '潜伏期阶段' },
-    { warnLevel: '束管2', smokeJd: '黄色预警', value1: '加速氧化阶段' },
-]);
-
-</script>
-
-<style lang="less" scoped>
-.dzScrollList {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .item {
-        height: 102px;
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-content: center;
-        padding-top: 35px;
-
-        &::before {
-            content: '';
-            width: 100%;
-            height: 120px;
-            position: absolute;
-            top: 0px;
-            background: url(/src/assets/images/vent/fire-bg-top.png);
-            background-size: 100% 100%;
-        }
-
-        .icon {
-            width: 72px;
-            height: 36px;
-            margin: 0 15px 0 45px;
-            background: url(/src/assets/images/vent/icon-bottom-bg.png);
-            position: relative;
-            top: 30px;
-            background-size: 100% 100%;
-
-            &::after {
-                position: absolute;
-                content: '';
-                width: 50px;
-                height: 50px;
-                top: -25px;
-                left: 17px;
-                background: url(/src/assets/images/vent/outer-icon.svg) no-repeat;
-            }
-        }
-        .seamless-warp1 {
-            width: 382px;
-            height: 80%;
-            overflow: hidden;
-
-            .data-box {
-                display: flex;
-                width: 382px;
-                justify-content: center;
-                align-items: center;
-                margin: 30px auto;
-
-                .box-item {
-                    width: 30%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-
-                .box-item1 {
-                    width: 40%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-            }
-        }
-    }
-
-    .item1 {
-        top: 0px;
-
-        &::before {
-            transform: matrix(1, 0, 0, -1, 0, 0);
-        }
-
-        .icon {
-            &::after {
-                background: url('@/assets/images/vent/inner-icon.svg') no-repeat;
-            }
-        }
-    }
-}
-</style>

src/views/vent/home/configurable/components/preset/dz-unscroll-list.vue

@@ -1,291 +0,0 @@
-<template>
-    <div class="dzUnScrollList">
-        <div class="item">
-            <div class="icon"></div>
-            <div style="display: flex; justify-content: flex-start">
-                <div class="data-box1" v-for="(item, index) in fireMonitor" :key="index">
-                    <div class="value1"> {{ !item.value ? '低风险' : item.value == '正常' ? '低风险' : item.value }} </div>
-                    <div class="title">{{ item.title }}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-let fireMonitor=ref<any[]>([
-  {
-    title: '温度',
-    code: '',
-    level: null,
-    value: '正常',
-  },
-  {
-    title: '烟雾',
-    code: '',
-    level: null,
-    value: '正常',
-  },
-  {
-    title: '火焰',
-    code: '',
-    level: null,
-    value: '-',
-  },
-  {
-    title: 'CO最大值(ppm)',
-    code: '',
-    level: null,
-    value: '0',
-  },
-  
-])
-</script>
-
-<style lang="less" scoped>
-.dzUnScrollList {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .item {
-        height: 102px;
-        width: 100%;
-        position: relative;
-        display: flex;
-        align-content: center;
-        padding-top: 42px;
-
-        &::before {
-            content: '';
-            width: 100%;
-            height: 120px;
-            position: absolute;
-            top: 0px;
-            background: url(/src/assets/images/vent/fire-bg-top.png);
-            background-size: 100% 100%;
-        }
-
-        .icon {
-            width: 72px;
-            height: 36px;
-            margin: 0 15px 0 45px;
-            background: url(/src/assets/images/vent/icon-bottom-bg.png);
-            position: relative;
-            top: 30px;
-            background-size: 100% 100%;
-
-            &::after {
-                position: absolute;
-                content: '';
-                width: 50px;
-                height: 50px;
-                top: -25px;
-                left: 17px;
-                background: url(/src/assets/images/vent/outer-icon.svg) no-repeat;
-            }
-        }
-
-        .data-box1 {
-            display: flex;
-            flex-direction: column;
-
-            width: 94px;
-            align-items: center;
-
-            .value {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                color: #2bdcff;
-                margin-bottom: 5px;
-            }
-
-            .value1 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: rgb(145, 230, 9);
-            }
-
-            .value2 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffff35;
-            }
-
-            .value3 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-            }
-
-            .value4 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ffbe69;
-            }
-
-            .value5 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff6f00;
-            }
-
-            .value6 {
-                font-size: 14px;
-                font-family: 'douyuFont';
-                margin-bottom: 5px;
-                color: #ff0000;
-            }
-
-            .title {
-                font-size: 12px;
-            }
-        }
-
-        .seamless-warp1 {
-            width: 382px;
-            height: 80%;
-            overflow: hidden;
-
-            .data-box {
-                display: flex;
-                width: 382px;
-                justify-content: center;
-                align-items: center;
-                margin: 30px auto;
-
-                .box-item {
-                    width: 30%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-
-                .box-item1 {
-                    width: 40%;
-                    height: 100%;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    padding: 0 10px;
-
-                    .value {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        color: #2bdcff;
-                        margin-bottom: 5px;
-                    }
-
-                    .value1 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: rgb(145, 230, 9);
-                    }
-
-                    .value2 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffff35;
-                    }
-
-                    .value3 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .value4 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ffbe69;
-                    }
-
-                    .value5 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff6f00;
-                    }
-
-                    .value6 {
-                        font-size: 14px;
-                        font-family: 'douyuFont';
-                        margin-bottom: 5px;
-                        color: #ff0000;
-                    }
-
-                    .title {
-                        font-size: 12px;
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

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

@@ -2,7 +2,7 @@ import { floor, isArray, random, slice } from 'lodash-es';
 import { defHttp } from '/@/utils/http/axios';
 import { get } from '../billboard/utils';
 import { useGlobSetting } from '/@/hooks/setting';
-import { reactive } from 'vue'
+import { ref, reactive } from 'vue'
 
 enum Api {
   list = '/safety/ventanalyDevice/homedata2',
@@ -377,26 +377,34 @@ export const sysTypeWarnList = (params) => {
   });
 };
 //多灾融合预警
-function getLevelNum(warnNumMap) {
+function getLevelNum() {
   return new Promise(async (resolve) => {
+    const list = {}
     const typeArr = ['fire', 'dust', 'vent', 'gas'];
     for (let i = 0; i < typeArr.length; i++) {
       const type = typeArr[i];
       const result = await sysTypeWarnList({ type });
-      warnNumMap.set(type, result['length']);
+      if (type == 'fire') {
+        list.fire = result.length || 0
+      } else if (type == 'dust') {
+        list.dust = result.length || 0
+      } else if (type == 'vent') {
+        list.vent = result.length || 0
+      } else if (type == 'gas') {
+        list.gas = result.length || 0
+      }
     }
-    resolve(null);
+    resolve(list);
   });
 }
 export const getTotal = (params) => {
   const { sysOrgCode, sysDataType } = useGlobSetting();
-  const warnNumMap = new Map([
-    ['fire', 0],
-    ['dust', 0],
-    ['vent', 0],
-    ['gas', 0],
-  ]);
-  getLevelNum(warnNumMap)
+  let data = ref<any>({})
+  getLevelNum().then(res => {
+    data.value = res
+  })
+  console.log(data, '888')
+
   const key = `${Api.getTotal}?${JSON.stringify(params)}`;
   if (!cache.has(key)) {
     cache.set(
@@ -408,6 +416,29 @@ export const getTotal = (params) => {
   }
   return (cache.get(key) as Promise<any>).then((res) => {
     console.log(res, '多灾融合预警数据')
+     
+    const levelsList = [
+      {
+        name: "报警",
+        value: 0
+      },
+      {
+        name: "重大风险",
+        value: 0
+      },
+      {
+        name: "较大风险",
+        value: 0
+      },
+      {
+        name: "一般风险",
+        value: 0
+      },
+      {
+        name: "低风险",
+        value: data.value ? data.value.vent : 0
+      },
+    ];
     //通风监测预警数据
     switch (sysDataType) {
       case 'monitor':
@@ -416,7 +447,30 @@ export const getTotal = (params) => {
           ventXf: res.ventInfo.xufengliang,
           ventHf: res.ventInfo.zonghuifeng,
         }
-        res.ventData = { ...res.info.sysInfo.ventS.levels, blue: warnNumMap.get('vent') };
+        console.log(data.value,'999')
+        res.ventData = [
+          {
+            name: "报警",
+            value: res.info.sysInfo.ventS.levels.alarm
+          },
+          {
+            name: "重大风险",
+            value: res.info.sysInfo.ventS.levels.red
+          },
+          {
+            name: "较大风险",
+            value: res.info.sysInfo.ventS.levels.orange
+          },
+          {
+            name: "一般风险",
+            value: res.info.sysInfo.ventS.levels.yellow
+          },
+          {
+            name: "低风险",
+            value: data.value.vent ? data.value.vent : res.info.sysInfo.ventS.levels.blue
+          },
+        ];
+
         break;
       case 'report':
         res.ventWarn = {
@@ -424,7 +478,7 @@ export const getTotal = (params) => {
           ventXf: res.ventInfo.xufengliang,
           ventHf: res.ventInfo.totalRetM3,
         }
-        res.ventData = { alarm: 0, blue: warnNumMap.get('vent'), orange: 0, red: 0, yellow: 0 }
+        res.ventData = levelsList
         break;
       default:
         res.ventWarn = {
@@ -432,7 +486,7 @@ export const getTotal = (params) => {
           ventXf: res.ventInfo.xufengliang,
           ventHf: res.ventInfo.totalRetM3,
         }
-        res.ventData = { alarm: 0, blue: warnNumMap.get('vent'), orange: 0, red: 0, yellow: 0 }
+        res.ventData = levelsList
     }
     //设备监测预警数据
     res.deviceWarn = reactive({})

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

@@ -2910,49 +2910,8 @@ export const testConfigFusionGreen: Config[] = [
         {
           readFrom: 'ventData',
           echartOption: {
-            xAxisData: [
-              { key: '低风险', valueKey: 'blue' },
-              { key: '一般风险', valueKey: 'yellow' },
-              { key: '较大风险', valueKey: 'orange' },
-              { key: '重大风险', valueKey: 'red' },
-              { key: '报警', valueKey: 'alarm' },
-            ],
-            chartsColumns: [
-              {
-                legend: '低风险',
-                seriesName: '(Pa)',
-                ymax: 50,
-                ymin: 0,
-                yname: '个',
-                linetype: 'bar',
-                yaxispos: 'left',
-                color: '#cd5fff',
-                sort: 1,
-                dataIndex: '',
-                xRotate: 0,
-              },
-            ],
-            option: {
-              grid: {
-                top: '20px',
-                bottom: 15,
-                right: 20,
-                left: 10,
-                containLabel: true,
-              },
-              yAxis: {
-                show: false,
-              },
-            },
-            colors: [
-              [{ color: 'rgba(46,144,165, 1 )' }, { color: 'rgba(46,144,165, 0.8 )' }, { color: 'rgba(46, 144, 165, 0.08 )' }],
-              [{ color: 'rgba(254,254,53, 1 )' }, { color: 'rgba(254,254,53, 0.8 )' }, { color: 'rgba(254,254,53, 0.08 )' }],
-              [{ color: 'rgba(234,179,105, 1 )' }, { color: 'rgba(234,179,105, 0.8 )' }, { color: 'rgba(234,179,105, 0.08 )' }],
-              [{ 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 )']
-          },
+              colorList:['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5'],
+          }
         },
       ],
       // mock: BDfireMock,
@@ -3006,154 +2965,154 @@ export const testConfigFusionGreen: Config[] = [
           readFrom: 'deviceWarn',
           listOption: {
             fanmain: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
+              url: getThemifyImagesURL(),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${fanmain_all}',
-              warnCount: '${fanmain_warn}',
-              closeCount: '${fanmain_close}',
+              allCount: 'fanmain_all',
+              warnCount: 'fanmain_warn',
+              closeCount: 'fanmain_close',
             },
             fanlocal: {
-              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${fanlocal_all}',
-              warnCount: '${fanlocal_warn}',
-              closeCount: '${fanlocal_close}',
+              allCount: 'fanlocal_all',
+              warnCount: 'fanlocal_warn',
+              closeCount: 'fanlocal_close',
             },
             bundletube: {
-              url: getThemifyImagesURL('vent/alarm-icons/shug.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${bundletube_all}',
-              warnCount: '${bundletube_warn}',
-              closeCount: '${bundletube_close}',
+              allCount: 'bundletube_all',
+              warnCount: 'bundletube_warn',
+              closeCount: 'bundletube_close',
             },
             fanlocaldp: {
-              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${fanlocaldp_all}',
-              warnCount: '${fanlocaldp_warn}',
-              closeCount: '${fanlocaldp_close}',
+              allCount: 'fanlocaldp_all',
+              warnCount: 'fanlocaldp_warn',
+              closeCount: 'fanlocaldp_close',
             },
             gate: {
-              url: getThemifyImagesURL('vent/alarm-icons/fm.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${gate_all}',
-              warnCount: '${gate_warn}',
-              closeCount: '${gate_close}',
+              allCount: 'gate_all',
+              warnCount: 'gate_warn',
+              closeCount: 'gate_close',
             },
             window: {
-              url: getThemifyImagesURL('vent/alarm-icons/fc.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${window_all}',
-              warnCount: '${window_warn}',
-              closeCount: '${window_close}',
+              allCount: 'window_all',
+              warnCount: 'window_warn',
+              closeCount: 'window_close',
             },
             windrect: {
-              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${windrect_all}',
-              warnCount: '${windrect_warn}',
-              closeCount: '${windrect_close}',
+              allCount: 'windrect_all',
+              warnCount: 'windrect_warn',
+              closeCount: 'windrect_close',
             },
             forcFan: {
-              url: getThemifyImagesURL('vent/alarm-icons/yafeng.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${forcFan_all}',
-              warnCount: '${forcFan_warn}',
-              closeCount: '${forcFan_close}',
+              allCount: 'forcFan_all',
+              warnCount: 'forcFan_warn',
+              closeCount: 'forcFan_close',
             },
             spray: {
-              url: getThemifyImagesURL('vent/alarm-icons/penlin.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${spray_all}',
-              warnCount: '${spray_warn}',
-              closeCount: '${spray_close}',
+              allCount: 'spray_all',
+              warnCount: 'spray_warn',
+              closeCount: 'spray_close',
             },
             dustdev: {
-              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${dustdev_all}',
-              warnCount: '${dustdev_warn}',
-              closeCount: '${dustdev_close}',
+              allCount: 'dustdev_all',
+              warnCount: 'dustdev_warn',
+              closeCount: 'dustdev_close',
             },
             nitrogen: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhudan.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${nitrogen_all}',
-              warnCount: '${nitrogen_warn}',
-              closeCount: '${nitrogen_close}',
+              allCount: 'nitrogen_all',
+              warnCount: 'nitrogen_warn',
+              closeCount: 'nitrogen_close',
             },
             pulping: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${pulping_all}',
-              warnCount: '${pulping_warn}',
-              closeCount: '${pulping_close}',
+              allCount: 'pulping_all',
+              warnCount: 'pulping_warn',
+              closeCount: 'pulping_close',
             },
             atomizing: {
-              url: getThemifyImagesURL('vent/alarm-icons/pw.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${atomizing_all}',
-              warnCount: '${atomizing_warn}',
-              closeCount: '${atomizing_close}',
+              allCount: 'atomizing_all',
+              warnCount: 'atomizing_warn',
+              closeCount: 'atomizing_close',
             },
             dustsensor: {
-              url: getThemifyImagesURL('vent/alarm-icons/ccq.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${dustsensor_all}',
-              warnCount: '${dustsensor_warn}',
-              closeCount: '${dustsensor_close}',
+              allCount: 'dustsensor_all',
+              warnCount: 'dustsensor_warn',
+              closeCount: 'dustsensor_close',
             },
             gas: {
-              url: getThemifyImagesURL('vent/alarm-icons/wasichoucaig.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${gas_all}',
-              warnCount: '${gas_warn}',
-              closeCount: '${gas_close}',
+              allCount: 'gas_all',
+              warnCount: 'gas_warn',
+              closeCount: 'gas_close',
             },
             pump: {
               url: getThemifyImagesURL('vent/alarm-icons/wasibeng.png'),
@@ -3161,9 +3120,9 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${pump_all}',
-              warnCount: '${pump_warn}',
-              closeCount: '${pump_close}',
+              allCount: 'pump_all',
+              warnCount: 'pump_warn',
+              closeCount: 'pump_close',
             },
             modelsensor: {
               url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
@@ -3171,13 +3130,11 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${modelsensor_all}',
-              warnCount: '${modelsensor_warn}',
-              closeCount: '${modelsensor_close}',
+              allCount: 'modelsensor_all',
+              warnCount: 'modelsensor_warn',
+              closeCount: 'modelsensor_close',
             },
-          }
-
-
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3190,7 +3147,7 @@ export const testConfigFusionGreen: Config[] = [
   },
   {
     deviceType: 'fusionManageInfo',
-    moduleName: '瓦斯监测预警',
+    moduleName: '火灾监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
       header: {
@@ -3226,16 +3183,16 @@ export const testConfigFusionGreen: Config[] = [
       board: [
         {
           type: 'K',
-          readFrom: 'fireManageInfo',
+          readFrom: 'ventWarn',
           layout: 'label-top',
           items: [
             {
-              label: '安全监测系统监测点',
-              value: '${nyWarnLevel}',
+              label: '内因火灾',
+              value: '',
             },
             {
-              label: '瓦斯抽采系统监测点',
-              value: '${wyWarnLevel}',
+              label: '外因火灾',
+              value: '',
             },
           ],
         },
@@ -3249,7 +3206,6 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_card',
-
         },
       ],
       // mock: BDfireMock,
@@ -3286,10 +3242,9 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_chart',
+            name: 'dz_dust',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3301,8 +3256,7 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_chart',
-
+          readFrom: 'dz_dust',
         },
       ],
       // mock: BDfireMock,
@@ -3315,7 +3269,7 @@ export const testConfigFusionGreen: Config[] = [
   },
   {
     deviceType: 'fusionManageInfo',
-    moduleName: '火灾监测预警',
+    moduleName: '瓦斯监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
       header: {
@@ -3339,14 +3293,13 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_onfire',
+            name: 'dz_fire',
             basis: '50%',
           },
           {
-            name: 'dz_outfire',
+            name: 'dz_fire',
             basis: '50%',
           },
-
         ],
       },
       board: [],
@@ -3358,12 +3311,20 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_onfire',
-
+          readFrom: 'dz_fire',
+          type: 'A',
+          titleData: {
+            label: '安全监测系统监测点',
+            value: '25',
+          },
         },
         {
-          readFrom: 'dz_outfire',
-
+          readFrom: 'dz_fire',
+          type: 'B',
+          titleData: {
+            label: '瓦斯抽采系统监测点',
+            value: '25',
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3400,29 +3361,25 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'chart',
+            name: 'dz_risk',
             basis: '100%',
           },
 
         ],
       },
       board: [],
-      chart: [
-        {
-          type: 'pie_halo',
-          readFrom: '',
-          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
-          xAxis: [{ show: false }],
-          yAxis: [{ show: false, name: '风量', position: 'left' }],
-          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
-        }
-      ],
+      chart: [],
       gallery: [],
       gallery_list: [],
       table: [],
       list: [],
       complex_list: [],
-      preset: [],
+      preset: [
+        {
+          readFrom: 'dz_risk',
+        },
+
+      ],
       // mock: BDfireMock,
     },
     showStyle: {
@@ -3431,6 +3388,7 @@ export const testConfigFusionGreen: Config[] = [
       position: 'bottom:15px;right:450px',
     },
   },
+
 ];
 
 export const testConfigVentNew: Config[] = [
@@ -3831,7 +3789,6 @@ export const testConfigVentNew: Config[] = [
       headerPosition: 'rightTop',
     },
   },
-
   {
     deviceType: 'sys_majorpath',
     moduleName: '关键通风路线',
@@ -3982,3 +3939,586 @@ export const testConfigVentNew: Config[] = [
     },
   },
 ];
+
+export const testConfigWarnMonitor: Config[] = [
+  {
+    deviceType: 'ventWarn',
+    moduleName: '通风监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '20%',
+          },
+          {
+            name: 'dz_chart',
+            basis: '80%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'J',
+          readFrom: 'ventWarn',
+          layout: 'label-top',
+          items: [
+            {
+              label: '总进风量',
+              dw: '(m³/min)',
+              value: '${ventJf}',
+            },
+            {
+              label: '总回风量',
+              dw: '(m³/min)',
+              value: '${ventHf}',
+            },
+            {
+              label: '总需风量',
+              dw: '(m³/min)',
+              value: '${ventXf}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'ventData',
+          echartOption: {
+            xAxisData: [
+              { key: '低风险', valueKey: 'blue' },
+              { key: '一般风险', valueKey: 'yellow' },
+              { key: '较大风险', valueKey: 'orange' },
+              { key: '重大风险', valueKey: 'red' },
+              { key: '报警', valueKey: 'alarm' },
+            ],
+            chartsColumns: [
+              {
+                legend: '低风险',
+                seriesName: '(Pa)',
+                ymax: 50,
+                ymin: 0,
+                yname: '个',
+                linetype: 'bar',
+                yaxispos: 'left',
+                color: '#cd5fff',
+                sort: 1,
+                dataIndex: '',
+                xRotate: 0,
+              },
+            ],
+            option: {
+              grid: {
+                top: '20px',
+                bottom: 15,
+                right: 20,
+                left: 10,
+                containLabel: true,
+              },
+              yAxis: {
+                show: false,
+              },
+            },
+            colors: [
+              [{ color: 'rgba(46,144,165, 1 )' }, { color: 'rgba(46,144,165, 0.8 )' }, { color: 'rgba(46, 144, 165, 0.08 )' }],
+              [{ color: 'rgba(254,254,53, 1 )' }, { color: 'rgba(254,254,53, 0.8 )' }, { color: 'rgba(254,254,53, 0.08 )' }],
+              [{ color: 'rgba(234,179,105, 1 )' }, { color: 'rgba(234,179,105, 0.8 )' }, { color: 'rgba(234,179,105, 0.08 )' }],
+              [{ 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 )' }],
+            ],
+          },
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:70px;left:15px;',
+    },
+  },
+  {
+    deviceType: 'deviceWarn',
+    moduleName: '火灾监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'dz_onfire',
+            basis: '50%',
+          },
+          {
+            name: 'dz_outfire',
+            basis: '50%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_onfire',
+        },
+        {
+          readFrom: 'dz_outfire',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:614px;height:240px;',
+      version: '原版',
+      position: 'bottom:15px;left:450px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '瓦斯监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'dz_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'deviceWarn',
+          listOption: {
+            fanmain: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanmain_all}',
+              warnCount: '${fanmain_warn}',
+              closeCount: '${fanmain_close}',
+            },
+            fanlocal: {
+              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanlocal_all}',
+              warnCount: '${fanlocal_warn}',
+              closeCount: '${fanlocal_close}',
+            },
+            bundletube: {
+              url: getThemifyImagesURL('vent/alarm-icons/shug.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${bundletube_all}',
+              warnCount: '${bundletube_warn}',
+              closeCount: '${bundletube_close}',
+            },
+            fanlocaldp: {
+              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanlocaldp_all}',
+              warnCount: '${fanlocaldp_warn}',
+              closeCount: '${fanlocaldp_close}',
+            },
+            gate: {
+              url: getThemifyImagesURL('vent/alarm-icons/fm.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${gate_all}',
+              warnCount: '${gate_warn}',
+              closeCount: '${gate_close}',
+            },
+            window: {
+              url: getThemifyImagesURL('vent/alarm-icons/fc.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${window_all}',
+              warnCount: '${window_warn}',
+              closeCount: '${window_close}',
+            },
+            windrect: {
+              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${windrect_all}',
+              warnCount: '${windrect_warn}',
+              closeCount: '${windrect_close}',
+            },
+            forcFan: {
+              url: getThemifyImagesURL('vent/alarm-icons/yafeng.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${forcFan_all}',
+              warnCount: '${forcFan_warn}',
+              closeCount: '${forcFan_close}',
+            },
+            spray: {
+              url: getThemifyImagesURL('vent/alarm-icons/penlin.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${spray_all}',
+              warnCount: '${spray_warn}',
+              closeCount: '${spray_close}',
+            },
+            dustdev: {
+              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${dustdev_all}',
+              warnCount: '${dustdev_warn}',
+              closeCount: '${dustdev_close}',
+            },
+            nitrogen: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhudan.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${nitrogen_all}',
+              warnCount: '${nitrogen_warn}',
+              closeCount: '${nitrogen_close}',
+            },
+            pulping: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${pulping_all}',
+              warnCount: '${pulping_warn}',
+              closeCount: '${pulping_close}',
+            },
+            atomizing: {
+              url: getThemifyImagesURL('vent/alarm-icons/pw.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${atomizing_all}',
+              warnCount: '${atomizing_warn}',
+              closeCount: '${atomizing_close}',
+            },
+            dustsensor: {
+              url: getThemifyImagesURL('vent/alarm-icons/ccq.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${dustsensor_all}',
+              warnCount: '${dustsensor_warn}',
+              closeCount: '${dustsensor_close}',
+            },
+            gas: {
+              url: getThemifyImagesURL('vent/alarm-icons/wasichoucaig.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${gas_all}',
+              warnCount: '${gas_warn}',
+              closeCount: '${gas_close}',
+            },
+            pump: {
+              url: getThemifyImagesURL('vent/alarm-icons/wasibeng.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${pump_all}',
+              warnCount: '${pump_warn}',
+              closeCount: '${pump_close}',
+            },
+            modelsensor: {
+              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${modelsensor_all}',
+              warnCount: '${modelsensor_warn}',
+              closeCount: '${modelsensor_close}',
+            },
+          },
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:480px;left:15px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '风险权重比例',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'pie_halo',
+          readFrom: '',
+          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
+          xAxis: [{ show: false }],
+          yAxis: [{ show: false, name: '风量', position: 'left' }],
+          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:360px;height:240px;',
+      version: '原版',
+      position: 'bottom:15px;right:450px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '设备监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'dz_card',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'K',
+          readFrom: 'fireManageInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '安全监测系统监测点',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '瓦斯抽采系统监测点',
+              value: '${wyWarnLevel}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_card',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:70px;right:15px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '火灾监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'dz_chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_chart',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:480px;right:15px',
+    },
+  },
+];

src/views/vent/home/configurable/fusion-warn-green.vue

@@ -1,24 +1,31 @@
 <template>
-    <div class="fusion-home">
-        <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-        <template v-if="!route.query.deviceType">
-            <div class="main-container">
-                <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index"
-                    :show-style="cfg.showStyle" :module-data="cfg.moduleData" :module-name="cfg.moduleName"
-                    :device-type="cfg.deviceType" :data="data" :visible="true" />
-            </div>
-        </template>
+  <div class="fusion-home">
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <ModuleOriginal
+          v-for="(cfg, index) in configs"
+          :key="cfg.deviceType + index"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+        />
+      </div>
+    </template>
 
-        <div class="center-area">
-            <CenterAreaGreen></CenterAreaGreen>
-        </div>
+    <div class="center-area">
+      <CenterAreaGreen></CenterAreaGreen>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
-import CenterAreaGreen from './components/center-area-green.vue'
+import CenterAreaGreen from './components/center-area-green.vue';
 import { useRoute } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import { testConfigFusionGreen } from './configurable.data';
@@ -32,98 +39,98 @@ const route = useRoute();
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
-    timer = setTimeout(
-        async () => {
-            getTotal({}).then(updateData);
-            if (timer) {
-                timer = null;
-            }
-            getMonitor();
-        },
-        flag ? 0 : 20000
-    );
+  timer = setTimeout(
+    async () => {
+      getTotal({}).then(updateData);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 20000
+  );
 }
 onMounted(() => {
-    fetchConfigs('fusion-warn-green').then(() => {
-        configs.value = testConfigFusionGreen;
-        // updateEnhancedConfigs(configs.value);
-        // Promise.resolve(BDFireMock).then(updateData);
-        getMonitor(true);
-    });
+  fetchConfigs('fusion-warn-green').then(() => {
+    configs.value = testConfigFusionGreen;
+    // updateEnhancedConfigs(configs.value);
+    // Promise.resolve(BDFireMock).then(updateData);
+    getMonitor(true);
+  });
 });
 
 onUnmounted(() => {
-    clearTimeout(timer);
-    timer = undefined;
+  clearTimeout(timer);
+  timer = undefined;
 });
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
 @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
 }
 
 .fusion-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .main-container {
     width: 100%;
     height: 100%;
-    position: relative;
-
-    .main-container {
-        width: 100%;
-        height: 100%;
-
-        .left-area {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 420px;
-            height: 100%;
-            padding: 15px;
-            background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-            overflow-y: auto;
-        }
 
-        .bottom-area {
-            position: absolute;
-            left: 435px;
-            bottom: 0;
-            width: calc(100% - 435px);
-            height: 290px;
-            padding: 15px;
-            background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-        }
+    .left-area {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 420px;
+      height: 100%;
+      padding: 15px;
+      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
 
-        .right-area {
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            width: 420px;
-            height: calc(100% - 305px);
-            padding: 15px 15px 0px 15px;
-            background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-            overflow-y: auto;
-        }
+    .bottom-area {
+      position: absolute;
+      left: 435px;
+      bottom: 0;
+      width: calc(100% - 435px);
+      height: 290px;
+      padding: 15px;
+      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
     }
 
-    .center-area {
-        position: absolute;
-        left: 450px;
-        top: 0;
-        width: calc(100% - 900px);
-        height: calc(100% - 270px);
-        border: 1px solid #000;
+    .right-area {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 420px;
+      height: calc(100% - 305px);
+      padding: 15px 15px 0px 15px;
+      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      overflow-y: auto;
     }
+  }
+
+  .center-area {
+    position: absolute;
+    left: 450px;
+    top: 0;
+    width: calc(100% - 900px);
+    height: calc(100% - 270px);
+    border: 1px solid #000;
+  }
 }
 
 :deep(.loading-box) {
-    position: unset;
+  position: unset;
 }
 </style>

src/views/vent/home/configurable/hooks/helper.ts

@@ -40,6 +40,7 @@ export function getRawProp(formatter: string): string {
 // 获取模块所依赖的数据的方法
 export function getData(raw, readFrom, parser?) {
   const result = readFrom ? get(raw, readFrom) : raw;
+  console.log()
   if (!result) return result;
   switch (parser) {
     case 'json':

src/views/vent/home/configurable/warnMonitor.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="fusion-home">
+    <div class="top-bg">
+      <NewNav Title="预警监测管控系统" />
+    </div>
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <ModuleOriginal
+          v-for="(cfg, index) in configs"
+          :key="cfg.deviceType + index"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+        />
+      </div>
+    </template>
+
+    <div class="center-area">
+      <CenterAreaWarn></CenterAreaWarn>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleOriginal from './components/ModuleWarnMonitor.vue';
+import CenterAreaWarn from './components/center-area-warn.vue';
+import { useRoute } from 'vue-router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { testConfigWarnMonitor } from './configurable.data';
+import NewNav from './components/originalNew/NewNavFire.vue';
+import { getTotal } from './configurable.api';
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData } = useInitPage(title);
+const route = useRoute();
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  timer = setTimeout(
+    async () => {
+      getTotal({}).then(updateData);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 20000
+  );
+}
+onMounted(() => {
+  fetchConfigs('fusion-warn-green').then(() => {
+    configs.value = testConfigWarnMonitor;
+    // updateEnhancedConfigs(configs.value);
+    // Promise.resolve(BDFireMock).then(updateData);
+    getMonitor(true);
+  });
+});
+
+onUnmounted(() => {
+  clearTimeout(timer);
+  timer = undefined;
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+
+.fusion-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: url('../../../../assets/images/home-warn/1-1.png') no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 56px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .top-nav {
+      position: absolute;
+      top: 0;
+      width: 880px;
+      height: 100%;
+      display: flex;
+      justify-content: flex-start;
+    }
+  }
+  .main-container {
+    width: 100%;
+    height: 100%;
+    background: url('../../../../assets/images/home-warn/bg.png') no-repeat;
+    background-size: 100% 100%;
+    .left-area {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 420px;
+      height: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    .bottom-area {
+      position: absolute;
+      left: 435px;
+      bottom: 0;
+      width: calc(100% - 435px);
+      height: 290px;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+
+    .right-area {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 420px;
+      height: calc(100% - 305px);
+      padding: 15px 15px 0px 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+  }
+
+  .center-area {
+    position: absolute;
+    left: 450px;
+    top: 0;
+    width: calc(100% - 900px);
+    height: calc(100% - 270px);
+    border: 1px solid #000;
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>
+

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -197,7 +197,7 @@ export function getMonitorFlag() {
       typeFlag = '2';
       return typeFlag;
     default:
-      typeFlag = '';
+      typeFlag = '2';
       return typeFlag;
   }
 }

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeBet.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="monitor-container">
+    <div id="FlowSensor" class="FlowSensor-box" style="position: absolute; display: none">
+      <!-- <div class="elementContent" v-if="selectData['deviceType'].startsWith('pump_under') || selectData['deviceType'] == 'pump_n12m2pq'">
+        <fourBorderBg>
+          <template v-for="(item, index) in modelMonitor" :key="index">
+            <div class="gas-monitor-row">
+              <div class="title">{{ item.title }}</div>
+              <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
+            </div>
+          </template>
+        </fourBorderBg>
+      </div> -->
+    </div>
+    <!-- 布尔台新瓦斯泵模型上的数据 -->
+    <div class="elementContent" style="position: absolute; display: none">
+      <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
+        <div class="title">{{ tag.title }}</div>
+        <div
+          v-if="tag.type == 'sign'"
+          class="signal-round"
+          :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }"
+        ></div>
+        <div v-else class="value">{{ selectData[tag.code] }}</div>
+      </div>
+    </div>
+    <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
+    <div class="lr left-box">
+      <div class="left-container">
+        <div class="monitor-box">
+          <template v-for="(device, leftIndex) in deviceProperty.leftMonitor" :key="leftIndex">
+            <ventBox1 :class="{ 'vent-margin-t-10': leftIndex > 0 }">
+              <template #title>
+                <div>{{ device.title }}</div>
+              </template>
+              <template #container>
+                <template v-for="(deviceChild, deviceChildIndex) in device.children" :key="deviceChildIndex">
+                  <div v-for="(deviceKey, deviceIndex) in deviceChild.key" :key="deviceIndex">
+                    <div v-if="deviceChild.key.length > 1" class="parameter-title group-parameter-title"
+                      ><SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ deviceChild.childTitle[deviceIndex] }}</span></div
+                    >
+                    <div class="input-box">
+                      <div v-for="(item, index) in deviceChild.list" class="input-item" :key="index">
+                        <div
+                          :class="{
+                            'w-280px': item.type == 'sign' || item.type == 'warning',
+                            title: item.type !== 'sign' && item.type !== 'warning',
+                          }"
+                          >{{ item.title }}：</div
+                        >
+                        <template v-if="item.type !== 'sign' && item.type !== 'warning'">
+                          <div class="value">{{
+                            selectData && selectData[deviceKey + item.code] ? formatNum(selectData[deviceKey + item.code], 1) : '-'
+                          }}</div>
+                        </template>
+                        <template v-else>
+                          <div class="value">
+                            <span
+                              :class="{
+                                'signal-round': true,
+                                'signal-round-run': item.type === 'sign' && selectData[deviceKey + item.code] == '1',
+                                'signal-round-gry': selectData[deviceKey + item.code] == '0' || !selectData[deviceKey + item.code],
+                                'signal-round-warning': item.type === 'warning' && selectData[deviceKey + item.code] == '1',
+                              }"
+                            ></span>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </template>
+            </ventBox1>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="lr right-box">
+      <div class="item-box sensor-container">
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>泵站远程集中控制</div>
+          </template>
+          <template #container>
+            <div class="top-btn">
+              <div class="btn-group">
+                <a-button class="btn-item" type="primary" @click="handlerFn('zfw')">总复位</a-button>
+                <a-button class="btn-item" type="default" disabled @click="handlerFn('change')">一键切换</a-button>
+              </div>
+              <div class="btn-group">
+                <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary" @click="openModal">瓦斯泵控制</a-button>
+              </div>
+              <div>
+                <div class="control-item">
+                  <div class="control-title">控制模式：</div>
+                  <div class="control-container">
+                    <a-radio-group v-model:value="selectData['ykjdqh']">
+                      <a-radio :value="'0'">就地</a-radio>
+                      <a-radio :value="'1'">远程</a-radio>
+                    </a-radio-group>
+                    <div class="btn-box">
+                      <div class="btn btn1" @click="changeCtr(0)">就地</div>
+                      <div class="btn btn1" @click="changeCtr(1)">远程</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="control-item">
+                  <div class="control-title">检修模式：</div>
+                  <div class="control-container">
+                    <a-radio-group v-model:value="selectData['jxmsqh']">
+                      <a-radio :value="'0'">关闭</a-radio>
+                      <a-radio :value="'1'">开启</a-radio>
+                    </a-radio-group>
+                    <div class="btn-box">
+                      <div class="btn btn1" @click="changeMode(0)">关闭</div>
+                      <div class="btn btn1" @click="changeMode(1)">开启</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ventBox1>
+        <ventBox1 v-for="(device, rightIndex) in deviceProperty.rightMonitor" :key="rightIndex" class="vent-margin-t-10">
+          <template #title>
+            <div>{{ device.title }}</div>
+          </template>
+          <template #container>
+            <ListItem
+              v-for="(item, index) in device.list"
+              :key="index"
+              class="w-100% mb-5px"
+              :value="selectData[item.code]"
+              :label="item.title"
+              label-width="250px"
+            />
+          </template>
+        </ventBox1>
+      </div>
+      <!-- <div class="item-box" >
+      <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
+    </div> -->
+    </div>
+    <div ref="playerRef" class="player-box"></div>
+  </div>
+  <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
+  <PasswordModal
+    :modal-is-show="passwordModalIsShow"
+    modal-title="密码检验"
+    :modal-type="handlerType"
+    @handle-ok="handleOK"
+    @handle-cancel="handleCancel"
+  />
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import { setModelType, playAnimate } from '../gasPump.threejs';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { getModelMonitorTags, devicePropertyType, getMonitorData } from '../gasPump.data';
+  import { list } from '../gasPump.api';
+  import { SvgIcon } from '/@/components/Icon';
+  import { formatNum } from '/@/utils/ventutil';
+  import DetailModal from './DetailModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import PasswordModal from '../../comment/components/PasswordModal.vue';
+  import { message } from 'ant-design-vue';
+  import { useCamera } from '/@/hooks/system/useCamera';
+
+  const globalConfig = inject('globalConfig');
+
+  const props = defineProps({
+    deviceId: {
+      type: String,
+      require: true,
+    },
+    deviceType: {
+      type: String,
+      require: true,
+    },
+  });
+  const [register, { openModal }] = useModal();
+  const modelMonitorTags = getModelMonitorTags();
+  const deviceProperty = ref({
+    leftMonitor: [] as devicePropertyType[],
+    rightMonitor: [] as devicePropertyType[],
+    modelMonitor: [] as devicePropertyType[],
+    detailCtrl: [] as devicePropertyType[],
+  });
+  const loading = ref(false);
+  const tabActiveKey = ref(1);
+  const passwordModalIsShow = ref(false);
+  const handlerType = ref('');
+  const playerRef = ref();
+
+  // 监测数据
+  const selectData = ref({
+    pump1: false,
+    pump2: false,
+    pump3: false,
+    pump4: false,
+    waterPump1: false,
+    waterPump2: false,
+    waterPump3: false,
+    waterPump4: false,
+    inValve1: false,
+    outValve1: false,
+    inValve2: false,
+    outValve2: false,
+    inValve3: false,
+    outValve3: false,
+    inValve4: false,
+    outValve4: false,
+    jxmsqh: '1',
+    ykjdqh: '1',
+    FlowSensor_InputFlux: '-',
+    deviceType: '',
+  });
+
+  const { getCamera, removeCamera } = useCamera();
+
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      return new Promise((resolve) => {
+        timer = setTimeout(
+          async () => {
+            if (props.deviceId) {
+              const data = await getDataSource(props.deviceId);
+              selectData.value = data;
+              playAnimate(data);
+              // Object.assign(selectData, data);
+            }
+            if (timer) {
+              timer = null;
+            }
+            resolve(null);
+            await getMonitor();
+            loading.value = false;
+          },
+          flag ? 0 : 1000
+        );
+      });
+    }
+  }
+
+  async function getDataSource(systemID) {
+    const res = await list({ devicetype: props.deviceType, ids: systemID });
+    const result = res.msgTxt[0]['datalist'][0];
+    Object.assign(result, result['readData']);
+    return result;
+  }
+
+  function handler(passWord, paramcode) {
+    let value = '';
+    if (paramcode == 'ykjdqh') {
+      value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
+    }
+    if (paramcode == 'jxmsqh') {
+      value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
+    }
+    const data = {
+      deviceid: selectData.value['deviceID'],
+      devicetype: selectData.value['deviceType'],
+      paramcode: paramcode,
+      password: passWord,
+      value: value,
+    };
+    deviceControlApi(data)
+      .then((res) => {
+        if (globalConfig.History_Type == 'remote') {
+          message.success('指令已下发至生产管控平台成功！');
+        } else {
+          message.success('指令已下发成功！');
+        }
+      })
+      .catch((err) => {
+        message.success('控制异常');
+      });
+  }
+
+  function changeCtr(e) {
+    if (e == 1) {
+      // 就地
+      handlerType.value = 'jxmsqh';
+    } else if (e == 2) {
+      // 远程
+      handlerType.value = 'jxmsqh';
+    }
+    passwordModalIsShow.value = true;
+  }
+
+  function changeMode(e) {
+    if (e == 1) {
+      // 检修开
+      handlerType.value = 'ykjdqh';
+    } else if (e == 2) {
+      // 检修关
+      handlerType.value = 'ykjdqh';
+    }
+    passwordModalIsShow.value = true;
+  }
+
+  function handlerFn(paramcode) {
+    handlerType.value = paramcode;
+    passwordModalIsShow.value = true;
+  }
+
+  function handleOK(passWord, handlerState) {
+    handler(passWord, handlerState);
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  function handleCancel() {
+    passwordModalIsShow.value = false;
+    handlerType.value = '';
+  }
+
+  // 喷粉操作
+  function handlerDevice(code, data) {}
+
+  watch(
+    () => props.deviceType,
+    () => {
+      removeCamera();
+      getMonitorData(props.deviceType).then((data) => {
+        deviceProperty.value = data;
+
+        if (props.deviceType == 'pump_over') {
+          setModelType('gasPump');
+        } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
+          setModelType('gasPumpUnder');
+        }
+      });
+    }
+  );
+  watch(
+    () => props.deviceId,
+    async (deviceID) => {
+      removeCamera();
+      if (deviceID) await getCamera(deviceID, playerRef.value);
+    }
+  );
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
+  });
+
+  onBeforeUnmount(() => {
+    removeCamera();
+  });
+
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+  @import '/@/design/vent/modal.less';
+  @import '../../comment/less/workFace.less';
+  @ventSpace: zxm;
+
+  .elementContent {
+    :deep(.main-container) {
+      display: flex;
+      flex-wrap: wrap;
+      width: 690px;
+      padding: 10px 12px 10px 15px;
+      border: 1px solid #d3e1ff33;
+      background-color: #061c2a55;
+      box-shadow: 0 0 15px #3b567f55;
+      background-color: #38383833;
+      .gas-monitor-row {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        color: #fff;
+        line-height: 32px;
+        .title {
+          width: 250px;
+          color: #baeaff;
+        }
+        .value {
+          width: 80px;
+          color: #efae05;
+        }
+      }
+    }
+  }
+  .modal-monitor-box {
+    background-color: #000;
+    color: #fff;
+    padding: 0 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .title {
+      margin-right: 5px;
+    }
+    .signal-round {
+      margin-left: 5px;
+    }
+    .value {
+      width: 30px;
+      color: #efae05;
+    }
+  }
+  .device-state {
+    width: 100%;
+    position: absolute;
+    top: 20px;
+    color: #e90000;
+    display: flex;
+    justify-content: center;
+    font-size: 20px;
+  }
+
+  .lr {
+    margin-top: 0 !important;
+  }
+  .left-box {
+    width: 360px !important;
+    direction: rtl;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100% - 60px);
+    margin-top: 30px !important;
+
+    .left-container {
+      direction: ltr;
+    }
+  }
+  .right-box {
+    width: 350px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    .environment-monitor {
+      .item {
+        flex: 1;
+        margin: 0 5px;
+        .title {
+          color: #7ae5ff;
+          text-align: center;
+          margin-bottom: 2px;
+        }
+        .num {
+          width: 100%;
+          height: 30px;
+          text-align: center;
+          border-top: 2px solid #50c8fc;
+          border-radius: 4px;
+          background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
+        }
+      }
+    }
+    .pool-box {
+      width: 327px;
+      height: 65px;
+      padding: 0 5px;
+      background: url('/@/assets/images/vent/pump1.png') no-repeat;
+      background-size: cover;
+      background-origin: content-box;
+      margin-top: 2px;
+      .num {
+        color: aqua;
+      }
+      .center {
+        padding-right: 5px;
+      }
+    }
+  }
+  .player-box {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    padding: 0 20px 0 20px;
+    z-index: 9999;
+    display: flex;
+    align-items: end;
+    bottom: 80px;
+    :deep(#LivePlayerBox) {
+      display: flex;
+      justify-content: end;
+    }
+  }
+
+  .input-box {
+    width: calc(100%);
+    display: flex;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    .input-item {
+      width: calc(50% - 8px);
+      padding: 0 2px;
+
+      &:nth-child(2n) {
+        margin-left: 4px;
+      }
+    }
+  }
+  .btn-group {
+    display: flex;
+    justify-content: space-around;
+    .btn-item {
+      width: 82px;
+      text-align: center;
+    }
+  }
+  .top-btn {
+    .btn-group {
+      margin-bottom: 8px;
+      .btn-item {
+        width: calc(50% - 16px);
+        margin: 0 4px;
+      }
+    }
+    .control-item {
+      margin-left: 10px;
+      margin-bottom: 8px;
+      display: flex;
+      .control-title {
+        width: 80px;
+        color: var(--vent-font-action-link);
+      }
+      .control-container {
+        display: flex;
+      }
+    }
+  }
+  .btn-box {
+    display: flex;
+    .btn {
+      padding: 0 8px !important;
+      margin: 0 2px;
+    }
+  }
+  .state-header {
+    display: flex;
+    color: var(--vent-font-action-link);
+    .header-item {
+      width: 25%;
+      text-align: center;
+    }
+  }
+  .device-row {
+    display: flex;
+    margin-top: 10px;
+    .state {
+      width: 25%;
+      text-align: center;
+      font-size: 13px;
+    }
+  }
+
+  :deep(.@{ventSpace}-tabs-tabpane-active) {
+    overflow: auto;
+  }
+  :deep(.list-item__background) {
+    background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
+    line-height: 30px !important;
+    height: 30px !important;
+  }
+</style>

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.bet.ts

@@ -0,0 +1,315 @@
+export const leftMonitor = [
+  {
+    type: 'list',
+    title: '瓦斯泵',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#瓦斯泵磁力启动器', '2#瓦斯泵磁力启动器'],
+        key: ['Starter5_', 'Starter6_'],
+        list: [
+          {
+            title: '断路器状态',
+            code: 'CBStatus',
+            type: 'sign',
+          },
+          {
+            title: '合闸失败',
+            code: 'CloseFail',
+            type: 'warning',
+          },
+          {
+            title: 'A相电流(A)',
+            code: 'Ia',
+            type: '',
+          },
+          {
+            title: 'B相电流(A)',
+            code: 'Ib',
+            type: '',
+          },
+          {
+            title: 'C相电流(A)',
+            code: 'Ic',
+            type: '',
+          },
+          {
+            title: 'AB电压(V)',
+            code: 'Uab',
+            type: '',
+          },
+          {
+            title: '健康信号',
+            code: 'Ready',
+            type: 'sign',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '注水泵',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#注水泵', '2#注水泵'],
+        key: ['WaterfloodPump1_', 'WaterfloodPump2_'],
+        list: [
+          {
+            title: '运行状态',
+            code: 'CBStatus',
+            type: 'sign',
+          },
+          {
+            title: '启动准备',
+            code: 'Ready',
+            type: 'sign',
+          },
+          {
+            title: '电压(V)',
+            code: 'SysVoltage',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '排水泵',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#排水泵', '2#排水泵'],
+        key: ['DewateringPump1_', 'DewateringPump2_'],
+        list: [
+          {
+            title: '运行状态',
+            code: 'CBStatus',
+            type: 'sign',
+          },
+          {
+            title: '启动准备',
+            code: 'Ready',
+            type: 'sign',
+          },
+          {
+            title: '电压(V)',
+            code: 'SysVoltage',
+            type: '',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const rightMonitor = [
+  {
+    title: '泵站监测详情',
+    list: [
+      {
+        title: '泵站输入管道内工混流量(m³/min)',
+        code: 'mixedTraffic',
+      },
+      {
+        title: '泵站内瓦斯(%CH₄)',
+        code: 'gas2',
+      },
+      {
+        title: '泵站输入管道内标况流量(m³/min)',
+        code: 'standardTraffic',
+      },
+      {
+        title: '泵站输入管道内瓦斯（%CH₄)',
+        code: 'gas3',
+      },
+      {
+        title: '泵站输入管道内工混累计(m³)',
+        code: 'totalGasDrainage',
+      },
+      {
+        title: '泵站管道输出瓦斯(%CH₄)',
+        code: 'gas4',
+      },
+      {
+        title: '泵站输入管道内一氧化碳(ppm)',
+        code: 'coVal',
+      },
+      {
+        title: '泵站管路出口30米处瓦斯(%CH₄)',
+        code: 'gas1',
+      },
+      {
+        title: '泵站内温度(℃)',
+        code: 'temp',
+      },
+      {
+        title: '泵站输入管道内温度(℃)',
+        code: 'pipeTemp',
+      },
+    ],
+  },
+];
+
+export const detailCtrl = [
+  {
+    title: '回路控制',
+    type: [
+      {
+        title: '1回路',
+        childTitle: ['1回路'],
+        key: ['PD13_SG1_Loop1'],
+      },
+      {
+        title: '2回路',
+        childTitle: ['2回路'],
+        key: ['PD13_SG1_Loop2'],
+      },
+      {
+        title: '3回路',
+        childTitle: ['3回路'],
+        key: ['PD13_SG1_Loop3'],
+      },
+      {
+        title: '4回路',
+        childTitle: ['4回路'],
+        key: ['PD13_SG1_Loop4'],
+      },
+    ],
+    items: [
+      {
+        title: '分闸运行',
+        code: '_HMISwitchOff',
+      },
+      {
+        title: '合闸运行',
+        code: '_HMISwitchOn',
+      },
+      {
+        title: '远程短路试验',
+        code: '_HMIShortTest',
+      },
+      {
+        title: '远程漏电试验',
+        code: '_HMILeakageTest',
+      },
+    ],
+  },
+  {
+    title: '泵站控制',
+    type: [
+      // {
+      //   title: '瓦斯泵',
+      //   childTitle: ['1#瓦斯泵', '2#瓦斯泵'],
+      //   key: ['PD13_Starter201', 'PD13_Starter202'],
+      // },
+      {
+        title: '排水泵',
+        childTitle: ['1#排水泵', '2#排水泵'],
+        key: ['PD13_Starter208'],
+      },
+      {
+        title: '注水泵',
+        childTitle: ['1#排水泵', '2#排水泵'],
+        key: ['PD13_Starter203', 'PD13_Starter204'],
+      },
+    ],
+    items: [
+      {
+        title: '远程短路试验',
+        code: '_HMIShortTest',
+      },
+      {
+        title: '远程漏电试验',
+        code: '_HMILeakageTest',
+      },
+      {
+        title: '通信合闸安全校验',
+        code: '_SafetyVerify',
+      },
+    ],
+  },
+  {
+    title: '阀门控制',
+    type: [
+      {
+        title: '注水阀',
+        childTitle: ['1#注水阀', '2#注水阀'],
+        key: ['DRS13_GVL1', 'DRS13_GVL2'],
+      },
+      {
+        title: '抽气阀',
+        childTitle: ['1#抽气阀', '2#抽气阀'],
+        key: ['DRS13_GVL4', 'DRS13_GVL6'],
+      },
+      {
+        title: '排气阀',
+        childTitle: ['1#排气阀', '2#排气阀'],
+        key: ['DRS13_GVL3', 'DRS13_GVL5'],
+      },
+    ],
+    items: [
+      {
+        title: '开启',
+        code: '_HMIOpen',
+      },
+      {
+        title: '关闭',
+        code: '_HMIClose',
+      },
+      {
+        title: '停止',
+        code: '_HMIStop',
+      },
+    ],
+  },
+];
+
+export const modelMonitor = [
+  {
+    title: '泵站输入管道内工混流量(m³/min)',
+    code: 'mixedTraffic',
+  },
+  {
+    title: '泵站内瓦斯(%CH₄)',
+    code: 'gas2',
+  },
+  {
+    title: '泵站输入管道内标况流量(m³/min)',
+    code: 'standardTraffic',
+  },
+  {
+    title: '泵站输入管道内瓦斯（%CH₄)',
+    code: 'gas3',
+  },
+  {
+    title: '泵站输入管道内工混累计(m³)',
+    code: 'totalGasDrainage',
+  },
+
+  {
+    title: '泵站管道输出瓦斯(%CH₄)',
+    code: 'gas4',
+  },
+  {
+    title: '泵站输入管道内一氧化碳(ppm)',
+    code: 'coVal',
+  },
+  {
+    title: '泵站管路出口30米处瓦斯(%CH₄)',
+    code: 'gas1',
+  },
+  {
+    title: '泵站内温度(℃)',
+    code: 'temp',
+  },
+  {
+    title: '泵站输入管道内温度(℃)',
+    code: 'pipeTemp',
+  },
+];

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.bet2.ts

@@ -0,0 +1,253 @@
+export const leftMonitor = [
+  {
+    type: 'list',
+    title: '瓦斯泵',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1#瓦斯泵磁力启动器', '2#瓦斯泵磁力启动器'],
+        key: ['CentrifugalPump1_', 'CentrifugalPump2_'],
+        list: [
+          {
+            title: '电机电流',
+            code: 'VFD_Current',
+            type: '',
+          },
+          {
+            title: '电机轴温',
+            code: 'MOT_FrontAxleTemp',
+            type: '',
+          },
+          {
+            title: '电机频率',
+            code: 'VFD_Frequency',
+            type: '',
+          },
+          {
+            title: '减速器轴温',
+            code: 'GEA_Temp',
+            type: '',
+          },
+          {
+            title: '电机电压',
+            code: 'MOT1_AvgVoltage',
+            type: '',
+          },
+          {
+            title: '泵轴温',
+            code: 'PU_Temp',
+            type: '',
+          },
+          {
+            title: '输入电压',
+            code: 'VFD_DCBusVoltage',
+            type: '',
+          },
+          // {
+          //   title: '切换准备好',
+          //   code: 'PU_Ready',
+          //   type: 'sign',
+          // },
+          // {
+          //   title: '故障切换',
+          //   code: 'VFD_Status3',
+          //   type: '',
+          // },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'list',
+    title: '冷却泵',
+    stateHeader: [],
+    children: [
+      {
+        title: '',
+        childTitle: ['1-1冷却泵', '1-2冷却泵', '2-1冷却泵', '2-2冷却泵'],
+        key: ['SubmarinePump1_MOT3_', 'SubmarinePump1_MOT4_', 'SubmarinePump2_MOT1_', 'SubmarinePump2_MOT2_'],
+        list: [
+          {
+            title: '电流(A)',
+            code: 'Ia',
+            type: '',
+          },
+          {
+            title: '电压(V)',
+            code: 'Uab',
+            type: '',
+          },
+          // {
+          //   title: '运行状态',
+          //   code: 'Status',
+          //   type: 'sign',
+          // },
+        ],
+      },
+    ],
+  },
+];
+
+export const rightMonitor = [
+  {
+    title: '智能装置备（调前）',
+    list: [
+      {
+        title: '甲烷(%)',
+        code: 'VFD_GasConcentration1',
+      },
+      {
+        title: 'CO(ppm)',
+        code: 'PipeCO',
+      },
+      {
+        title: '压力(KPa)',
+        code: 'PressureSensor1_Pressure',
+      },
+      {
+        title: '温度(℃)',
+        code: 'VFD_CavityTemp',
+      },
+      {
+        title: '流量(m³/min)',
+        code: 'FlowSensor_InputFlux',
+      },
+    ],
+  },
+  {
+    title: '智能装置备（调后）',
+    list: [
+      {
+        title: '甲烷(%)',
+        code: 'VFD_GasConcentration2',
+      },
+      {
+        title: '开度(%)',
+        code: 'GVL_OpenDegree',
+      },
+      {
+        title: '压力(KPa)',
+        code: 'PressureSensor2_Pressure',
+      },
+      {
+        title: '配风流量(m³/min)',
+        code: 'FlowSensor_InputFlux1',
+      },
+    ],
+  },
+];
+
+export const detailCtrl = [
+  {
+    title: '回路控制',
+    type: [
+      {
+        title: '1回路',
+        childTitle: ['1回路'],
+        key: ['PD13_SG1_Loop1'],
+      },
+      {
+        title: '2回路',
+        childTitle: ['2回路'],
+        key: ['PD13_SG1_Loop2'],
+      },
+      {
+        title: '3回路',
+        childTitle: ['3回路'],
+        key: ['PD13_SG1_Loop3'],
+      },
+      {
+        title: '4回路',
+        childTitle: ['4回路'],
+        key: ['PD13_SG1_Loop4'],
+      },
+    ],
+    items: [
+      {
+        title: '分闸运行',
+        code: '_HMISwitchOff',
+      },
+      {
+        title: '合闸运行',
+        code: '_HMISwitchOn',
+      },
+      {
+        title: '远程短路试验',
+        code: '_HMIShortTest',
+      },
+      {
+        title: '远程漏电试验',
+        code: '_HMILeakageTest',
+      },
+    ],
+  },
+  {
+    title: '泵站控制',
+    type: [
+      // {
+      //   title: '瓦斯泵',
+      //   childTitle: ['1#瓦斯泵', '2#瓦斯泵'],
+      //   key: ['PD13_Starter201', 'PD13_Starter202'],
+      // },
+      {
+        title: '排水泵',
+        childTitle: ['1#排水泵', '2#排水泵'],
+        key: ['PD13_Starter208'],
+      },
+      {
+        title: '注水泵',
+        childTitle: ['1#排水泵', '2#排水泵'],
+        key: ['PD13_Starter203', 'PD13_Starter204'],
+      },
+    ],
+    items: [
+      {
+        title: '远程短路试验',
+        code: '_HMIShortTest',
+      },
+      {
+        title: '远程漏电试验',
+        code: '_HMILeakageTest',
+      },
+      {
+        title: '通信合闸安全校验',
+        code: '_SafetyVerify',
+      },
+    ],
+  },
+  {
+    title: '阀门控制',
+    type: [
+      {
+        title: '注水阀',
+        childTitle: ['1#注水阀', '2#注水阀'],
+        key: ['DRS13_GVL1', 'DRS13_GVL2'],
+      },
+      {
+        title: '抽气阀',
+        childTitle: ['1#抽气阀', '2#抽气阀'],
+        key: ['DRS13_GVL4', 'DRS13_GVL6'],
+      },
+      {
+        title: '排气阀',
+        childTitle: ['1#排气阀', '2#排气阀'],
+        key: ['DRS13_GVL3', 'DRS13_GVL5'],
+      },
+    ],
+    items: [
+      {
+        title: '开启',
+        code: '_HMIOpen',
+      },
+      {
+        title: '关闭',
+        code: '_HMIClose',
+      },
+      {
+        title: '停止',
+        code: '_HMIStop',
+      },
+    ],
+  },
+];

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -503,16 +503,16 @@ export const getModelMonitorTags = () => {
 
 export function getComponent() {
   const { sysOrgCode } = useGlobSetting();
-  // const sysOrgCode = 'sdmtjtcctmk';
+  // const sysOrgCode = 'sdmtjtbetmk';
   let gasPumpHome;
   switch (sysOrgCode) {
     case 'sdmtjtbetmk': // 布尔台
-      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
+      gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeBet.vue'));
       return gasPumpHome;
     case 'sdmtjtcctmk': // 寸草塔1
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
       return gasPumpHome;
-    case 'sdmtjtcctrk': // 布尔台
+    case 'sdmtjtcctrk': // 寸草塔2
       gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCC.vue'));
       return gasPumpHome;
     case 'sdmtjtbdmk': // 保德
@@ -530,6 +530,13 @@ export async function getMonitorData(deviceType) {
   const { sysOrgCode } = useGlobSetting();
   // const sysOrgCode = 'sdmtjtcctmk';
   switch (sysOrgCode) {
+    // 布尔台
+    case 'sdmtjtbetmk':
+      if (deviceType == 'pump_22m2pq') {
+        return await import('./gasPump.data.bet2');
+      } else {
+        return await import('./gasPump.data.bet');
+      }
     case 'sdmtjtcctmk':
       return await import('./gasPump.dataCc');
     case 'sdmtjtcctrk':

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/mainFanMonitor/index.vue

@@ -826,6 +826,8 @@
 
   <!-- 摄像头显示隐藏图标 -->
   <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
+  <!-- 主风机故障诊断显示隐藏图标 -->
+  <div class="warn-icon" @click="showModalWarn"></div>
   <!-- 工况辅助决策 -->
   <ConditionAssistance @register="registerModal" :deviceType="deviceType" :selectData="currentData" />
   <DeviceBaseInfo @register="registerModalDeviceEdit" :device-type="selectData['deviceType']" />
@@ -1781,6 +1783,13 @@ const handlefaultCancel = () => {
 const handlefaultOk = () => {
   modalWarnIsShow.value = false;
 };
+function showModalWarn() {
+  if (warnList.value.length > 0) {
+    modalWarnIsShow.value = true;
+  } else {
+    createMessage.info('当前无告警信息');
+  }
+}
 function deviceEdit(e: Event, type: string, record) {
   e.stopPropagation();
   openModalDeviceEdit(true, {
@@ -2360,7 +2369,17 @@ onUnmounted(() => {
   z-index: 1;
   font-size: 28px;
 }
-
+.warn-icon {
+  width: 30px;
+  height: 38px;
+  position: absolute;
+  top: 600px;
+  right: 460px;
+  background: url('/@/assets/images/vent/normal-mainfan.png') no-repeat;
+  background-size: contain;
+  z-index: 1;
+  font-size: 28px;
+}
 .no-play {
   &::after {
     position: absolute;

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);