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' ? 'icon2' : 'icon1'" @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');
+
+  .icon1 {
+    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;
+    }
+  }
+
+  .icon2 {
+    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' ? 'icon2' : 'icon1'" @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');
+  }
+
+  .icon1 {
+    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;
+    }
   }
+
+  .icon2 {
+    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/vent/home/configurable/components/content-green.vue

@@ -85,6 +85,9 @@
         <template v-if="config.name === 'dz_card'">
           <DzCard></DzCard>
         </template>
+        <template v-if="config.name === 'dz_dust'">
+         <DzDust></DzDust>
+        </template>
         <template v-if="config.name === 'dz_onfire'">
           <DzScrollList></DzScrollList>
         </template>
@@ -127,6 +130,7 @@ 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 DzDust from './preset/dz-dust.vue'
 import DzScrollList from './preset/dz-scroll-list.vue'
 import DzUnScrollList from './preset/dz-unscroll-list.vue'
 // import FIreWarn from './preset/FIreWarn.vue';

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

@@ -201,19 +201,33 @@ defineEmits(['click']);
 
 .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;
+  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 {
@@ -318,7 +332,7 @@ defineEmits(['click']);
 .mini-board__label_J {
   width: 100%;
   padding-top: 10px;
-  
+
 }
 
 .mini-board__value_J {
@@ -332,23 +346,13 @@ defineEmits(['click']);
   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;
+  z-index: 999;
+
 }
 
+
+
 .mini-board_H_low_risk {
   background-image: var(--image-board_bg_3);
 }
@@ -364,5 +368,4 @@ defineEmits(['click']);
 .mini-board_H_warning {
   background-image: var(--image-board_bg_4);
 }
-
 </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,
@@ -22,62 +28,269 @@ let props = defineProps({
     }
 })
 
+//获取dom元素节点
+let chartRef = ref<any>();
+// 类别
+let category = [
+    {
+        name: "报警",
+        value: 300
+    },
+    {
+        name: "重大风险",
+        value: 300
+    },
+    {
+        name: "较大风险",
+        value: 300.2
+    },
+    {
+        name: "一般风险",
+        value: 548.7
+    },
+    {
+        name: "低风险",
+        value: 612.5
+    },
 
-// 1. 准备数据
-const riskData: any[] = [
-    { name: '低风险', color: '#1890FF', value: 123 },
-    { name: '一般风险', color: '#FFB900', value: 123 },
-    { name: '较大风险', color: '#FFA800', value: 123 },
-    { name: '严重风险', color: '#FF4D4F', value: 123 },
 ];
+let total = ref(1000) // 数据总数
+let datas = [];
+category.forEach(value => {
+    datas.push(value.value);
+});
+
+function getOption() {
+
+    nextTick(() => {
+        let myChart = echarts.init(chartRef.value);
+        let option = {
+            xAxis: {
+                max: 1000,
+                splitLine: {
+                    show: false
+                },
+                axisLine: {
+                    show: false
+                },
+                axisLabel: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            grid: {
+                left: 10,
+                top: 15, // 设置条形图的边距
+                right: 10,
+                bottom: 15
+            },
+            yAxis: [{
+                type: "category",
+                inverse: false,
+                data: category,
+                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: '{warnLevel1|{b}}', // 使用富文本占位符
+                            textStyle: {
+                                color: "#fff",
+                                fontSize: 14
+                            },
+                            position: [15, -26],
+                            show: true,
+                            rich: { //富文本
+                                warnLevel1: {
+                                    backgroundColor: {
+                                        image: 'image://' + warnLevel1,
+                                    }
+                                },
+                                warnLevel2: {
+                                    backgroundColor: { //这里可以添加你想自定义的图片
+                                        image: 'image://' + warnLevel2,
+                                    },
+                                },
+                                warnLevel3: {
+                                    backgroundColor: {
+                                        image: 'image://' + warnLevel3,
+                                    },
+                                },
+                                warnLevel14: {
+                                    backgroundColor: { //这里可以添加你想自定义的图片
+                                        image: 'image://' + warnLevel4,
+                                    },
+                                },
+                                warnLevel15: {
+                                    backgroundColor: { //这里可以添加你想自定义的图片
+                                        image: 'image://' + warnLevel5,
+                                    },
+                                },
+
+                            },
 
-// 2. 初始化图表
-const chartRef = ref(null);
-let chartInstance: any = null;
+                        }
+                    },
+                    data: category,
+                    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: 1000,
+                    data: [1000, 1000, 1000, 1000, 1000],
+                    z: 2,
+                    animationEasing: "elasticOut",
+
+
+                },
+                {
+                    // label
+                    type: "pictorialBar",
+                    symbolBoundingData: 1000,
+                    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, -15],
+                            show: true
+                        }
+                    },
+                    data: [612.5, 548.7, 300.2, 300, 299],
+                    z: 0,
+
+                },
+
+                {
+                    name: "外框",
+                    type: "bar",
+                    barGap: "-130%", // 设置外框粗细
+                    data: [1000, 1000, 1000, 1000, 1000],
+                
+                    barWidth: 29,
+                    itemStyle: {
+                        normal: {
+                            barBorderRadius: [0, 0, 0, 0],
+                            color: "transparent", // 填充色
+                            barBorderColor: "#3ecca7", // 边框色
+                            barBorderWidth: 1, // 边框宽度
+                            
+                        }
+                    },
+                
+                    z: 0
+                },
+                {
+                    type: 'scatter',
+                    name: '条形',
+                    symbol: 'roundRect',
+                    symbolSize: [6, 14],
+                    symbolOffset: [3, -3],
+                    symbolKeepAspect: true,
+                    itemStyle: {
+                        normal: {
+                            color: "#3ecca7"
+                        }
+                    },
+                    data: [1000, 1000, 1000, 1000,1000],
+                }
+
+            ]
+        }
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
 
 
 onMounted(() => {
-    chartInstance = echarts.init(chartRef.value);
-    renderChart();
+    getOption()
+
 })
 
-// 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, // 进度条颜色
-            },
-            data: [item.value], // 进度条长度（对应数值）
-        })),
-    };
-    chartInstance.setOption(option);
-}
+
 // let windData = reactive<any>({})
 
 // watch(() => props.echartData, (newV, oldV) => {
@@ -89,7 +302,7 @@ function renderChart() {
 <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,419 @@
+<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"
+    }
+    ]
+}
+];
+const barWidth = 30;
+
+function getOption() {
+    nextTick(() => {
+        let myChart = echarts.init(chartDust.value);
+        let option = {
+            tooltip: {
+                trigger: "item"
+            },
+            grid: {
+                left: 10,
+                right: 10,
+                bottom: 10,
+                top: 10,
+                containLabel: true
+            },
+            xAxis: {
+                data: ["1", "2", "3", "4", "5"],
+                axisTick: {
+                    show: true
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#425b78'
+                    }
+                },
+                axisLabel: {
+                    color: '#b9bec6',
+                    fontSize: 14
+                }
+            },
+            yAxis: {
+                type: 'value',
+                name: '单位 / K㎡',
+                nameTextStyle: {
+                    color: "#b9bec6",
+                    fontSize: 12,
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#425b78',
+                        fontSize: 14
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#587485',
+                    },
+                },
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#b9bec6',
+
+                    },
+                },
+            },
+            series: [{
+                z: 1,
+                type: "bar",
+                barWidth: 30,
+                data: [{
+                    value: 220,
+                    itemStyle: {
+                        normal: {
+                            color: colors[1]
+                        }
+                    }
+                },
+                {
+                    value: 182,
+                    itemStyle: {
+                        normal: {
+                            color: colors[2]
+                        }
+                    }
+                },
+                {
+                    value: 191,
+                    itemStyle: {
+                        normal: {
+                            color: colors[3]
+                        }
+                    }
+                },
+                {
+                    value: 234,
+                    itemStyle: {
+                        normal: {
+                            color: colors[4]
+                        }
+                    }
+                },
+                {
+                    value: 290,
+                    itemStyle: {
+                        normal: {
+                            color: colors[5]
+                        }
+                    }
+                }
+                ]
+            },
+            {
+                z: 2,
+                name: "底部",
+                type: "pictorialBar",
+                data: [{
+                    value: 1,
+                    itemStyle: {
+                        normal: {
+                            color: colors[1]
+                        }
+                    }
+                },
+                {
+                    value: 1,
+                    itemStyle: {
+                        normal: {
+                            color: colors[2]
+                        }
+                    }
+                },
+                {
+                    value: 1,
+                    itemStyle: {
+                        normal: {
+                            color: colors[3]
+                        }
+                    }
+                },
+                {
+                    value: 1,
+                    itemStyle: {
+                        normal: {
+                            color: colors[4]
+                        }
+                    }
+                },
+                {
+                    value: 1,
+                    itemStyle: {
+                        normal: {
+                            color: colors[5]
+                        }
+                    }
+                }
+                ],
+                symbol: "diamond",
+                symbolOffset: [0, "50%"],
+                symbolSize: [barWidth, 10]
+            },
+            {
+                z: 3,
+                name: "上部1",
+                type: "pictorialBar",
+                symbolPosition: "end",
+                data: [{
+                    value: 220,
+                    itemStyle: {
+                        normal: {
+                            borderColor: colors[1],
+                            borderWidth: 2,
+                            color: colors[1]
+                        }
+                    }
+                },
+                {
+                    value: 182,
+                    itemStyle: {
+                        normal: {
+                            borderColor: colors[2],
+                            borderWidth: 2,
+                            color: colors[2]
+                        }
+                    }
+                },
+                {
+                    value: 191,
+                    itemStyle: {
+                        normal: {
+                            borderColor: colors[3],
+                            borderWidth: 2,
+                            color: colors[3]
+                        }
+                    }
+                },
+                {
+                    value: 234,
+                    itemStyle: {
+                        normal: {
+                            borderColor: colors[4],
+                            borderWidth: 2,
+                            color: colors[4]
+                        }
+                    }
+                },
+                {
+                    value: 290,
+                    itemStyle: {
+                        normal: {
+                            borderColor: colors[5],
+                            borderWidth: 2,
+                            color: colors[5]
+                        }
+                    }
+                }
+                ],
+                symbol: "diamond",
+                symbolOffset: [0, "-50%"],
+                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth]
+            }
+            ]
+        }
+        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-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/configurable.data.ts

@@ -3006,154 +3006,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 +3161,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,9 +3171,9 @@ 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',
             },
           }
 
@@ -3190,7 +3190,7 @@ export const testConfigFusionGreen: Config[] = [
   },
   {
     deviceType: 'fusionManageInfo',
-    moduleName: '瓦斯监测预警',
+    moduleName: '火灾监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
       header: {
@@ -3223,20 +3223,21 @@ export const testConfigFusionGreen: Config[] = [
           },
         ],
       },
-      board: [
+     board: [
         {
           type: 'K',
-          readFrom: 'fireManageInfo',
+          readFrom: 'ventWarn',
           layout: 'label-top',
           items: [
             {
-              label: '安全监测系统监测点',
-              value: '${nyWarnLevel}',
+              label: '内因火灾',
+              value: '',
             },
             {
-              label: '瓦斯抽采系统监测点',
-              value: '${wyWarnLevel}',
+              label: '外因火灾',
+              value: '',
             },
+           
           ],
         },
       ],
@@ -3286,10 +3287,9 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_chart',
+            name: 'dz_dust',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3301,7 +3301,7 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_chart',
+          readFrom: 'dz_dust',
 
         },
       ],
@@ -3315,7 +3315,7 @@ export const testConfigFusionGreen: Config[] = [
   },
   {
     deviceType: 'fusionManageInfo',
-    moduleName: '火灾监测预警',
+    moduleName: '瓦斯监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
       header: {

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':