Merge branch 'master' of http://39.97.59.228:8013/hrx/mky-vent-base

src/assets/icons/dwsl-gallery.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.97" height="21.998" viewBox="0 0 21.97 21.998">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="azure"/>
+      <stop offset="1" stop-color="#4ed9d9"/>
+    </linearGradient>
+  </defs>
+  <g id="断网数量" transform="translate(5052.511 -16445.235)">
+    <path id="路径_55986" data-name="路径 55986" d="M92.219,94.391a1.547,1.547,0,0,0,0,2.188l4.379,4.377a1.549,1.549,0,0,0,2.19,0l2.19-2.189a1.547,1.547,0,0,0,0-2.188L96.6,92.2a1.549,1.549,0,0,0-2.19,0l-2.189,2.188Zm6.169-3.028a.774.774,0,0,0,.948.546l2.991-.8a.774.774,0,1,0-.4-1.495l-2.992.8a.773.773,0,0,0-.547.949Zm-7.009,7a.774.774,0,0,0-.9.418l-.046.13-.8,2.99a.773.773,0,0,0,1.448.531l.046-.13.8-2.99a.773.773,0,0,0-.546-.949ZM95.7,88.027A.774.774,0,1,0,96.8,89.121l2.19-2.19a.774.774,0,0,0-1.1-1.094ZM85.85,97.875a.773.773,0,0,0,.986,1.184l.108-.09,2.19-2.19a.773.773,0,0,0-.988-1.183l-.108.09-2.188,2.19ZM83.459,85.637a1.547,1.547,0,0,0,0,2.189L87.838,92.2a1.549,1.549,0,0,0,2.191,0l2.19-2.19a1.546,1.546,0,0,0,0-2.188l-4.38-4.377a1.549,1.549,0,0,0-2.19,0l-2.189,2.189ZM93.714,82.5l-.8,2.99a.775.775,0,0,0,1.5.4l.8-2.993a.774.774,0,0,0-1.5-.4h0Zm-11.2,11.2a.773.773,0,0,0,.263,1.517l.136-.023,2.992-.8a.773.773,0,0,0-.263-1.52L85.5,92.9l-2.99.8Z" transform="translate(-5133.943 16363.813)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/lwsl-gallery.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22.568" height="22.731" viewBox="0 0 22.568 22.731">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="azure"/>
+      <stop offset="1" stop-color="#4ed9d9"/>
+    </linearGradient>
+  </defs>
+  <path id="连网数量" d="M38.779,40.38a2.5,2.5,0,0,0-2.352,1.663H34.537a4.179,4.179,0,0,0,.061-.694A4.024,4.024,0,0,0,32.476,37.8l.725-2.4a2.467,2.467,0,0,0,.589.071,2.5,2.5,0,1,0-.943-.186l-.709,2.352a4.033,4.033,0,0,0-4.272.733L24.15,34.661l-.04.042a2.5,2.5,0,1,0-.091.091l-.131.128L27.6,38.638a4.021,4.021,0,0,0-.232,5.144l-3.184,2.571a2.486,2.486,0,1,0,.2.311l3.216-2.6a4.015,4.015,0,0,0,2.966,1.3,3.967,3.967,0,0,0,1.669-.363l1.12,2.539a2.494,2.494,0,1,0,1.234-.327,2.538,2.538,0,0,0-.9.168l-1.121-2.55a4.032,4.032,0,0,0,1.88-2.427h1.874a2.391,2.391,0,0,0-.042.462,2.5,2.5,0,1,0,2.493-2.5Z" transform="translate(-19.211 -29.985)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/nav-l.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="38.367" height="38.366" viewBox="0 0 38.367 38.366">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#4eabd9"/>
+      <stop offset="1" stop-color="#4eabd9" stop-opacity="0.2"/>
+    </linearGradient>
+  </defs>
+  <g id="监测区域" transform="translate(-98 -99.6)">
+    <path id="路径_56494" data-name="路径 56494" d="M293.462,284.385A8.226,8.226,0,1,1,286,280.84l-.217-2.74a10.983,10.983,0,1,0,9.955,4.734Zm0,0" transform="translate(-169.476 -170.239)" fill="url(#linear-gradient)"/>
+    <path id="路径_56495" data-name="路径 56495" d="M483.975,99.642V117.45a1.375,1.375,0,1,0,1.375,1.375,1.355,1.355,0,0,0-.31-.865l13.838-11.209.018-.019s0,0,.009,0A19.143,19.143,0,0,0,483.988,99.6h-.014Zm0,0" transform="translate(-366.801)" fill="url(#linear-gradient)"/>
+    <path id="路径_56496" data-name="路径 56496" d="M133.02,109.293l-.019.019s0,0-.009,0l-2.235,1.537a16.1,16.1,0,0,1,1.564,2.869,16.447,16.447,0,1,1-16.457-9.987l-.213-2.689,0-.046a19.179,19.179,0,1,0,17.374,8.293Zm0,0" transform="translate(0 -1.335)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/icons/nav-r.svg

@@ -0,0 +1,15 @@
+<svg id="粉尘风险" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.23" height="31.157" viewBox="0 0 35.23 31.157">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#4eabd9"/>
+      <stop offset="1" stop-color="#4eabd9" stop-opacity="0.2"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_55460" data-name="路径 55460" d="M396.553,91.811m4.361,0a4.361,4.361,0,1,1-4.361-4.361A4.361,4.361,0,0,1,400.914,91.811Z" transform="translate(-379.257 -87.45)" fill="url(#linear-gradient)"/>
+  <path id="路径_55461" data-name="路径 55461" d="M638.321,587.94m4.363,0a4.363,4.363,0,1,1-4.363-4.362A4.363,4.363,0,0,1,642.684,587.94Z" transform="translate(-629.75 -565.679)" fill="url(#linear-gradient)"/>
+  <path id="路径_55462" data-name="路径 55462" d="M20.287,579.9m4.363,0a4.363,4.363,0,1,1-4.363-4.363A4.363,4.363,0,0,1,24.649,579.9Z" transform="translate(10.581 -557.932)" fill="url(#linear-gradient)"/>
+  <path id="路径_55463" data-name="路径 55463" d="M394.988,796.039m2.848,0a2.848,2.848,0,1,1-2.848-2.849A2.849,2.849,0,0,1,397.837,796.039Z" transform="translate(-376.178 -767.731)" fill="url(#linear-gradient)"/>
+  <path id="路径_55464" data-name="路径 55464" d="M837.46,340.767m2.848,0a2.848,2.848,0,1,1-2.848-2.848A2.849,2.849,0,0,1,840.308,340.767Z" transform="translate(-834.612 -328.884)" fill="url(#linear-gradient)"/>
+  <path id="路径_55465" data-name="路径 55465" d="M290.8,387.053m2.848,0A2.848,2.848,0,1,1,290.8,384.2,2.848,2.848,0,0,1,293.645,387.053Z" transform="translate(-268.228 -373.499)" fill="url(#linear-gradient)"/>
+  <path id="路径_55466" data-name="路径 55466" d="M31.111,220.141m2.848,0a2.848,2.848,0,1,1-2.848-2.848A2.848,2.848,0,0,1,33.959,220.141Z" transform="translate(0.826 -212.608)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/icons/sbzs-gallery.svg

@@ -0,0 +1,11 @@
+<svg id="设备总数" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.926" height="20.346" viewBox="0 0 20.926 20.346">
+  <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="路径_55982" data-name="路径 55982" d="M328.3,214.128a.662.662,0,0,0,1.324,0,2.8,2.8,0,1,1,5.6,0,.662.662,0,1,0,1.324,0,4.126,4.126,0,1,0-8.251,0Z" transform="translate(-321.885 -206.781)" fill="url(#linear-gradient)"/>
+  <path id="路径_55983" data-name="路径 55983" d="M183.162,72.108a.661.661,0,0,0,.662-.662,6.018,6.018,0,1,1,12.037,0,.662.662,0,1,0,1.324,0,7.34,7.34,0,0,0-12.533-5.2,7.371,7.371,0,0,0-1.573,2.334,7.293,7.293,0,0,0-.578,2.859A.661.661,0,0,0,183.162,72.108Z" transform="translate(-179.302 -64.1)" fill="url(#linear-gradient)"/>
+  <path id="路径_55984" data-name="路径 55984" d="M73.263,342.8a1.242,1.242,0,0,1,1.241,1.241v3.171h6.657a2.568,2.568,0,0,1,2.565,2.565v5.211a2.569,2.569,0,0,1-2.565,2.567h-15.8a2.569,2.569,0,0,1-2.565-2.567v-5.211a2.569,2.569,0,0,1,2.565-2.567h6.657v-3.169A1.242,1.242,0,0,1,73.263,342.8Zm7.9,13.6a1.409,1.409,0,0,0,1.406-1.409v-5.211a1.408,1.408,0,0,0-1.406-1.406H73.346v-4.33a.083.083,0,1,0-.165,0v4.328H65.365a1.409,1.409,0,0,0-1.406,1.409v5.211a1.409,1.409,0,0,0,1.406,1.409Zm-14-5.584a1.572,1.572,0,1,1-1.572,1.572A1.574,1.574,0,0,1,67.156,350.813Zm3.287,0a1.572,1.572,0,1,1-1.572,1.572A1.574,1.574,0,0,1,70.443,350.813Z" transform="translate(-62.8 -337.209)" fill="url(#linear-gradient)"/>
+</svg>

src/views/vent/home/configurable/blue/components/NavCard.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="nav-card">
+    <div class="nav-card-l">
+      <SvgIcon class="icon-style" size="32" name="nav-l" />
+      <div class="card-text">监测区域</div>
+    </div>
+    <div class="nav-card-c">
+      <div class="card-text1">低风险</div>
+    </div>
+    <div class="nav-card-r">
+      <div class="card-text">粉尘风险</div>
+      <SvgIcon class="icon-style" size="32" name="nav-r" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SvgIcon } from '/@/components/Icon';
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.nav-card {
+  --image-nav-bg: url('@/assets/images/home-container/configurable/dusthome/nav-bg.png');
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0px 15px 6px 15px;
+  background: var(--image-nav-bg) no-repeat;
+  background-size: 100% 100%;
+
+  .nav-card-l {
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-card-r {
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-style {
+    margin: 0px 10px;
+  }
+
+  .card-text {
+    font-size: 16px;
+  }
+
+  .card-text1 {
+    font-size: 24px;
+    color: #4eabd9;
+  }
+}
+</style>

src/views/vent/home/configurable/blue/components/NavVentCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="nav-vent-card">
+    <div class="vent-card-box">
+      <div class="vent-value vent-value-blue">25870</div>
+      <div class="vent-text">总回风量(m³/min)</div>
+    </div>
+    <div class="vent-card-box">
+      <div class="vent-value vent-value-green">24989</div>
+      <div class="vent-text">总进风量(m³/min)</div>
+    </div>
+    <div class="vent-card-box">
+      <div class="vent-value vent-value-purple">348</div>
+      <div class="vent-text">计划风量(m³/min)</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.nav-vent-card {
+  --image-nav-vent-bg: url('@/assets/images/fireNew/vent-bg.png');
+  --image-nav-vent-bg1: url('@/assets/images/fireNew/vent-1.png');
+  --image-nav-vent-bg2: url('@/assets/images/fireNew/vent-2.png');
+  --image-nav-vent-bg3: url('@/assets/images/fireNew/vent-3.png');
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--image-nav-vent-bg) no-repeat;
+  background-size: 100% 100%;
+
+  .vent-card-box {
+    width: 205px;
+    height: 53px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-left: 58px;
+
+    &:nth-child(1) {
+      background: var(--image-nav-vent-bg1) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(2) {
+      background: var(--image-nav-vent-bg2) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(3) {
+      background: var(--image-nav-vent-bg3) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .vent-value {
+      font-family: 'douyuFont';
+      margin-bottom: 5px;
+      font-size: 14px;
+    }
+
+    .vent-value-blue {
+      color: #b7f1fd;
+    }
+
+    .vent-value-green {
+      color: #b9ffef;
+    }
+
+    .vent-value-purple {
+      color: #b9d3ff;
+    }
+  }
+}
+</style>

src/views/vent/home/configurable/blue/components/content.vue

@@ -3,62 +3,38 @@
   <!-- 主体内容部分 -->
   <div class="content">
     <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background image__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
-    >
+    <img v-if="background.show && background.type === 'image'" class="content__background image__background"
+      :src="background.link" />
+    <video v-if="background.show && background.type == 'video'"
+      :class="layout.items.length ? 'content__background' : 'content__background_1'" 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 ? 'auto' : 'none' }">
+      <div v-for="config in layoutConfig" :key="config.name"
+        :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
-          <div
-            v-if="config.pageType == 'vent_New'"
-            style="padding-top: 11%"
-            class="content__module content__module1 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"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-if="config.pageType == 'vent_New'" style="padding-top: 11%"
+            class="content__module content__module1 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"
+              :type="config.type" :layout="config.layout" />
           </div>
-          <div v-else-if="config.pageType == 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
-            <MiniBoardNew
-              v-for="item in config.items"
-              :key="item.prop"
-              :label="item.label"
-              :value="item.value"
-              :type="config.type"
-              :layout="config.layout"
-            />
+          <div v-else-if="config.pageType == 'New_fire'"
+            class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
           <div v-else 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"
-              :type="config.type"
-              :layout="config.layout"
-            />
+            <MiniBoard v-for="item in config.items" :key="item.prop" :label="item.label" :value="item.value"
+              :type="config.type" :layout="config.layout" />
           </div>
         </template>
         <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
         <template v-if="config.name === 'chart'">
-          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-if="config.pageType == 'New_dust'" class="content__module_dust" :chart-config="config.config"
+            :chart-data="config.data" />
           <CustomChart v-else class="content__module" :chart-config="config.config" :chart-data="config.data" />
         </template>
         <!-- 通常列表部分 -->
@@ -80,32 +56,45 @@
         <template v-if="config.name === 'gallery'">
           <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
         </template>
+        <template v-if="config.name === 'gallery_new'">
+          <CustomGalleryNew class="content__module" :type="config.config.type" :option="config.config.items"
+            :galleryData="config.data" />
+        </template>
+
         <!-- 复杂列表部分 -->
         <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
+          <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 === 'complex_list_new'">
+          <ComplexListNew class="content__module" :complexData="config.data" />
+        </template>
         <!-- 表格部分，这部分通常是占一整个模块的 -->
         <template v-if="config.name === 'table'">
-          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
+          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns"
+            :data="config.data" />
+        </template>
+        <template v-if="config.name === 'table_new'">
+          <CustomTableNew class="content__module text-center overflow-auto" :columns="config.config.columns"
+            :tableData="config.data" />
         </template>
         <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items"
+            :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta
-            v-if="config.pageType === 'New_fire'"
-            class="content__moduleFire"
-            :pos-monitor="config.data"
-            :canvasSize="{ width: 250, height: 200 }"
-          />
-          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-if="config.pageType === 'New_fire'" class="content__moduleFire" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }" />
         </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" />
+          <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" />
@@ -118,13 +107,8 @@
           <SelectCs :devicedata="config.data" :config="config.config" />
         </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"
-          />
+          <MeasureDetail class="content__module" :show-title="false" :composite-data="config.data"
+            :topconfig="config.config.topconfig" :btnconfig="config.config.btnconfig" />
         </template>
         <template v-if="config.name === 'partition'">
           <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
@@ -136,7 +120,17 @@
           <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
         </template>
         <template v-if="config.name === 'button_list'">
-          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
+          <ButtonList class="content__module" :type="config.config.type" :config="config.config"
+            :buttonList="config.config.buttonList" />
+        </template>
+        <template v-if="config.name === 'vent_route'">
+          <VentRoute class="content__module" :ventData="config.data" :config="config.config.echartOption" />
+        </template>
+        <template v-if="config.name === 'early_warn_monitor'">
+          <EarlyWarnMonitor class="content__module" :warnData="config.data" />
+        </template>
+        <template v-if="config.name === 'mc-new'">
+          <CoalSeam class="content__module" :option="config.config.items" />
         </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
@@ -149,390 +143,406 @@
   </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 '../../components/detail/MiniBoard.vue';
-  import TimelineList from '../../components/detail/TimelineList.vue';
-  import TimelineListNew from '../../components/detail/TimelineListNew.vue';
-  import CustomList from '../../components/detail/CustomList.vue';
-  import CustomGallery from '../../components/detail/CustomGallery.vue';
-  import ComplexList from '../../components/detail/ComplexList.vue';
-  import GalleryList from '../../components/detail/GalleryList.vue';
-  import CustomTable from '../../components/detail/CustomTable.vue';
-  import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
-  import MeasureDetail from '../../components/preset/MeasureDetail.vue';
-  import CustomTabs from '../../components/preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
-  import SelectCs from '../../components/preset/SelectCs.vue';
-  import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
-  import Partition from '../../components/preset/partition.vue';
-  import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
-  import RadioLabel from '../../components/preset/radioLabel.vue';
-  import ButtonList from '../../components/preset/buttonList.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) => {
+import { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../deviceManager/configurationTable/types';
+import MiniBoard from '../../components/detail/MiniBoard.vue';
+import TimelineList from '../../components/detail/TimelineList.vue';
+import TimelineListNew from '../../components/detail/TimelineListNew.vue';
+import CustomList from '../../components/detail/CustomList.vue';
+import CustomGallery from '../../components/detail/CustomGallery.vue';
+import CustomGalleryNew from '../../components/preset/CustomGalleryNew.vue'
+import ComplexList from '../../components/detail/ComplexList.vue';
+import ComplexListNew from '../../components/preset/ComplexListNew.vue';
+import GalleryList from '../../components/detail/GalleryList.vue';
+import CustomTable from '../../components/detail/CustomTable.vue';
+import CustomTableNew from '../../components/preset/CustomTableNew.vue'
+import CustomChart from '../../components/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 '../../components/preset/QHCurve.vue';
+import MeasureDetail from '../../components/preset/MeasureDetail.vue';
+import CustomTabs from '../../components/preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
+import SelectCs from '../../components/preset/SelectCs.vue';
+import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
+import Partition from '../../components/preset/partition.vue';
+import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
+import RadioLabel from '../../components/preset/radioLabel.vue';
+import ButtonList from '../../components/preset/buttonList.vue';
+import VentRoute from '../../components/preset/ventRoute.vue'
+import EarlyWarnMonitor from '../../components/preset/earlyWarnMonitor.vue'
+import CoalSeam from '../../components/preset/CoalSeam.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 {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...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) || [];
+  const partition = clone(props.moduleData.partition) || [];
 
-  // 获取当 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 {
+  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,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
+          ...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);
 
-  /** 根据配置里的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) || [];
-    const partition = clone(props.moduleData.partition) || [];
-
-    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 '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: getItems(data, cfg.items),
+            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),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            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': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        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: getItems(data, cfg.items),
+            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),
+                  };
+                }),
+              };
+            }),
           });
-          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);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
+            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 '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);
+        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({
+          ...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;
-        }
-        case 'partition': {
-          const cfg = partition.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            overflow: true,
-            ...item,
-            data,
-            ...cfg,
-          });
-          break;
-        }
-        default: {
-          const cfg = preset.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data,
+        });
+        break;
+      }
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-          arr.push({
-            ...item,
-            data,
-            config: cfg,
-          });
-          break;
-        }
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
       }
-      // console.log(arr,'arr---')
-      return arr;
-    }, []);
-  });
+    }
+    // console.log(arr,'arr---')
+    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;
-    overflow-y: auto; // 这里会导致样式无故添加滚动条
-    overflow-x: hidden;
-  }
+@import '@/design/theme.less';
 
-  .content__background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  // z-index: -2;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // 这里会导致样式无故添加滚动条
+  overflow-x: hidden;
+}
 
-  .image__background {
-    width: 35%;
-    height: 61%;
-    left: 30%;
-  }
+.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%;
-  }
+.content__background_1 {
+  width: 100%;
+  height: calc(100% - 10px);
+  position: absolute;
+  top: 10px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
 
-  .content__module1 {
-    background: url('@/assets/images/vent/homeNew/databg/4.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 129px;
-    margin-top: 20%;
-  }
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
 
-  .content__moduleFire {
-    width: 100%;
-    height: 100%;
-    margin-left: -24% !important;
-  }
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+}
 
-  .content__module_dust {
-    // background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    // background-repeat: no-repeat;
-    // background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-  }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
 
-  // .content__module:first-of-type {
-  //   margin-top: 0;
-  // }
-  // .content__module:last-of-type {
-  //   margin-bottom: 0;
-  // }
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+.content__module_dust {
+  // background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    /* background-color: transparent; */
-    color: #fff;
-  }
+// .content__module:first-of-type {
+//   margin-top: 0;
+// }
+// .content__module:last-of-type {
+//   margin-bottom: 0;
+// }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  /* background-color: transparent; */
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-placeholder) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 
-  :deep(.dialog-overlay) {
-    width: 100%;
-    height: 100%;
-    position: unset;
-    box-shadow: unset;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !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/blue/components/header.vue

@@ -3,15 +3,11 @@
   <!-- Header部分 -->
   <div v-if="headerConfig.show" class="w-100% flex costume-header">
     <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
-    <Dropdown
-      v-if="headerConfig.selector.show"
-      class="flex-grow-1 costume-header_left"
-      :trigger="['click']"
-      :bordered="false"
-      @open-change="visible = $event"
-    >
+    <Dropdown v-if="headerConfig.selector.show" class="flex-grow-1 costume-header_left" :trigger="['click']"
+      :bordered="false" @open-change="visible = $event">
       <div class="flex-basis-100% flex flex-items-center" @click.prevent>
-        <SwapOutlined class="w-30px" />
+        <!-- <SwapOutlined class="w-30px" /> -->
+        <SvgIcon class="w-30px" size="16" name="toggle-select" style="margin: 0px 5px;" />
         <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
           {{ selectedDeviceLabel }}
         </div>
@@ -21,14 +17,15 @@
       <template #overlay>
         <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
           <MenuItem v-for="item in options" :key="item.value" :title="item.label">
-            {{ item.label }}
+          {{ item.label }}
           </MenuItem>
         </Menu>
       </template>
     </Dropdown>
     <template v-if="headerConfig.slot.show">
       <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
-        <SwapOutlined class="w-30px" />
+        <!-- <SwapOutlined class="w-30px" /> -->
+        <SvgIcon class="w-30px" size="16" name="toggle-select" style="margin: 0px 5px;"/>
         <div class="flex-grow-1">
           {{ selectedDeviceSlot }}
         </div>
@@ -37,79 +34,86 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { Config } from '../../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../../hooks/useInit';
-  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+import { ref, watch } from 'vue';
+import { Config } from '../../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../../hooks/useInit';
+import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+import { SvgIcon } from '/@/components/Icon';
 
-  const props = defineProps<{
-    moduleData: Config['moduleData'];
-    deviceType: Config['deviceType'];
-    data: any;
-  }>();
+const props = defineProps<{
+  moduleData: Config['moduleData'];
+  deviceType: Config['deviceType'];
+  data: any;
+}>();
 
-  const emit = defineEmits(['select']);
+const emit = defineEmits(['select']);
 
-  const visible = ref(false);
-  const headerConfig = props.moduleData.header;
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-    props.deviceType,
-    props.moduleData
-  );
+const visible = ref(false);
+const headerConfig = props.moduleData.header;
+const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+  props.deviceType,
+  props.moduleData
+);
 
-  function selectHandler({ key }) {
-    selectedDeviceID.value = key;
+function selectHandler({ key }) {
+  selectedDeviceID.value = key;
+  emit('select', selectedDevice.value);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    init(d);
     emit('select', selectedDevice.value);
+  },
+  {
+    immediate: true,
   }
-
-  watch(
-    () => props.data,
-    (d) => {
-      init(d);
-      emit('select', selectedDevice.value);
-    },
-    {
-      immediate: true,
-    }
-  );
+);
 </script>
 <style scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  .costume-header {
-    --image-Select: url('@/assets/images/fireNew/5.png');
-    height: 30px;
-    /* background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity)); */
-    background-image: var(--image-Select);
-    background-repeat: no-repeat;
-    background-size: 96% 100%;
-    background-position: center;
-    padding: 0 2%;
-  }
-  .costume-header_left {
-    /* border-left: 3px solid; */
-    border-right: 3px solid;
-    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-    border-image-slice: 1;
-  }
-  /* .costume-header_right {
+.costume-header {
+  --image-Select: url('@/assets/images/fireNew/5.png');
+  height: 30px;
+  /* background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity)); */
+  background-image: var(--image-Select);
+  background-repeat: no-repeat;
+  background-size: 96% 100%;
+  background-position: center;
+  padding: 0 2%;
+  margin-bottom: 5px;
+}
+
+.costume-header_left {
+  /* border-left: 3px solid; */
+  border-right: 3px solid;
+  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+  border-image-slice: 1;
+}
+
+/* .costume-header_right {
     border-right: 3px solid;
     border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
     border-image-slice: 1;
   } */
 
-  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-    /* background-color: transparent; */
-    color: #fff;
-  }
-  ::v-deep .zxm-select-arrow {
-    color: #fff;
-  }
-  ::v-deep .zxm-select-selection-item {
-    color: #fff !important;
-  }
-  ::v-deep .zxm-select-selection-placeholder {
-    color: #fff !important;
-  }
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+  /* background-color: transparent; */
+  color: #fff;
+}
+
+::v-deep .zxm-select-arrow {
+  color: #fff;
+}
+
+::v-deep .zxm-select-selection-item {
+  color: #fff !important;
+}
+
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+}
 </style>

src/views/vent/home/configurable/blue/components/moduleBottom-warn.vue

@@ -37,7 +37,7 @@ function clickHandler() {
   width: 100%;
   height: 100%;
   z-index: 999;
-  background: url('@/assets/images/home-warn/2-2.png') no-repeat;
+  background: url('@/assets/images/fireNew/4-2.png') no-repeat;
   background-size: 100% 100%;
   padding: 13px 15px 0px 15px;
 }
@@ -78,6 +78,8 @@ function clickHandler() {
 .module-slot {
   height: calc(100% - 33px);
   width: calc(100% - 15px);
+  // -webkit-backdrop-filter: blur(5px);
+  // backdrop-filter: blur(5px);
 }
 
 // Transition动画相关

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

@@ -87,11 +87,12 @@ function clickHandler() {
 //   transform: rotate(-90deg);
 // }
 
-.module-slot {
-  height: calc(100% - 46px);
-  width: 100%;
-  margin-top: 26px;
-}
+  .module-slot {
+    height: calc(100% - 46px);
+    width: 100%;
+    // backdrop-filter: blur(5px);
+    margin-top: 26px;
+  }
 
 // Transition动画相关
 .v-enter-active,

src/views/vent/home/configurable/blue/components/moduleMini-warn.vue

@@ -89,10 +89,14 @@
   // }
 
   .module-slot {
-    height: calc(100% - 46px);
-    width: 100%;
-    backdrop-filter: blur(5px);
-    margin-top: 26px;
+    // height: calc(100% - 46px);
+    // width: 100%;
+    // backdrop-filter: blur(5px);
+    // margin-top: 26px;
+    height: calc(100% - 54px);
+    width: calc(100% - 30px);
+    // backdrop-filter: blur(5px);
+    margin:34px 15px 0px 15px;
   }
 
   // Transition动画相关

src/views/vent/home/configurable/blue/dustNew.vue

@@ -3,12 +3,9 @@
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
       <VentModal />
-      <a-button
-        type="primary"
-        shape="circle"
+      <a-button type="primary" shape="circle"
         style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
-        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
-      >
+        @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')">
         <!-- <EyeFilled /> -->
       </a-button>
     </div>
@@ -16,173 +13,187 @@
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
       <NewNav :Title="mainTitle" />
     </div>
+    <div class="nav-cards">
+      <NavCard></NavCard>
+    </div>
     <!-- <ModuleDustNew -->
-    <ModuleDustNew
-      v-for="cfg in configs"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :data="data"
-      :visible="true"
-    />
+    <ModuleDustNew v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+      :visible="true" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  import ModuleDustNew from './components/ModuleDustNew.vue';
-  import NewNav from './components/NewNavFire.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  // import ModuleDustNew from './components/ModuleDustNew.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getDisHome } from '../configurable.api';
-  // import { EyeFilled } from '@ant-design/icons-vue';
-  import { testConfigNewDust } from '../configurable.data.New';
-  // const cfgs = computed(() =>
-  //   configs.value.filter((_, index) => {
-  //     return index !== 4 && index !== 3;
-  //   })
-  // );
-  // const cfgA = computed<any>(() =>
-  //   configs.value.find((_, index) => {
-  //     return index === 3;
-  //   })
-  // );
-  // const cfgB = computed<any>(() =>
-  //   configs.value.find((_, index) => {
-  //     return index === 4;
-  //   })
-  // );
-  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
-  let interval: number | undefined;
-  onMounted(() => {
-    fetchConfigs('New_dust').then(() => {
-      configs.value = testConfigNewDust;
-      getDisHome({
-        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-      }).then(updateData);
-    });
-    setInterval(() => {
-      getDisHome({
-        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-      }).then(updateData);
-    }, 2000);
+import { onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+import ModuleDustNew from './components/ModuleDustNew.vue';
+import NewNav from './components/NewNavFire.vue';
+import NavCard from './components/NavCard.vue'
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+// import ModuleDustNew from './components/ModuleDustNew.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { getDisHome } from '../configurable.api';
+// import { EyeFilled } from '@ant-design/icons-vue';
+import { testConfigNewDust } from '../configurable.data.New';
+// const cfgs = computed(() =>
+//   configs.value.filter((_, index) => {
+//     return index !== 4 && index !== 3;
+//   })
+// );
+// const cfgA = computed<any>(() =>
+//   configs.value.find((_, index) => {
+//     return index === 3;
+//   })
+// );
+// const cfgB = computed<any>(() =>
+//   configs.value.find((_, index) => {
+//     return index === 4;
+//   })
+// );
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
+let interval: number | undefined;
+onMounted(() => {
+  fetchConfigs('New_dust').then(() => {
+    configs.value = testConfigNewDust;
+    getDisHome({
+      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+    }).then(updateData);
   });
+  setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
 
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+onUnmounted(() => {
+  clearInterval(interval);
+});
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+function redirectTo(url) {
+  window.open(url);
+}
 </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 {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
-    }
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
   }
+}
 
-  .company-home {
-    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+  .top-bg {
+   width: 100%;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
 
-    .top-bg {
-      width: 100%;
+    .main-title {
       height: 56px;
-      background: var(--image-modal-top) no-repeat center;
-      position: absolute;
-      z-index: 1;
-      .main-title {
-        height: 56px;
-        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;
-      }
-    }
-    .left-t {
-      position: absolute;
-      width: 28%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-      z-index: 0;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    .right-t {
+
+    .top-nav {
       position: absolute;
-      width: 172%;
+      top: 0;
+      width: 880px;
       height: 100%;
-      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-      z-index: 0;
-    }
-    // .module-left {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   left: 0;
-    // }
-    // .module-right {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   right: 0;
-    // }
-    // .module-bottom {
-    //   position: absolute;
-    //   width: 1000px;
-    //   height: 280px;
-    // }
-    .module-dropdown {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-dropdown-original {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
+      display: flex;
+      justify-content: flex-start;
     }
   }
-  :deep(.loading-box) {
-    position: unset;
+
+  .left-t {
+    position: absolute;
+    width: 28%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+    z-index: 0;
+  }
+
+  .right-t {
+    position: absolute;
+    width: 172%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
+
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+  }
+
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, 0);
+    width: 523px;
+    height: 89px;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

src/views/vent/home/configurable/blue/ventNew copy.vue

@@ -0,0 +1,162 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+      <VentModal />
+    </div>
+    <div class="top-bg">
+      <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
+      <!-- <div class="main-title">{{ mainTitle }}</div> -->
+      <NewNav :Title="mainTitle" />
+    </div>
+    <ModuleDustNew
+      v-for="cfg in configs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import NewNav from './components/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.vue';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from '../configurable.api';
+  // import { useRoute } from 'vue-router';
+  import { testConfigVentNew } from '../configurable.data';
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
+  // const route = useRoute();
+  let interval: number | undefined;
+
+  onMounted(() => {
+    // fetchConfigs('vent_new').then(() => {
+    configs.value = testConfigVentNew;
+    // updateEnhancedConfigs(configs.value);
+
+    getHomeData({}).then(updateData);
+    // });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    }
+  }
+
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
+      height: 56px;
+      background: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        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;
+      }
+    }
+    .left-t {
+      position: absolute;
+      width: 28%;
+      height: 100%;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      height: 100%;
+      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+      z-index: 0;
+    }
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
+  }
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>

src/views/vent/home/configurable/blue/ventNew.vue

@@ -9,154 +9,168 @@
       <!-- <div class="main-title">{{ mainTitle }}</div> -->
       <NewNav :Title="mainTitle" />
     </div>
-    <ModuleDustNew
-      v-for="cfg in configs"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :data="data"
-      :visible="true"
-    />
+    <div class="nav-cards">
+      <NavVentCard></NavVentCard>
+    </div>
+    <ModuleDustNew v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+      :visible="true" />
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  // import MonitorCenter from './components/MonitorCenter.vue';
-  import NewNav from './components/NewNavFire.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import ModuleDustNew from './components/ModuleDustNew.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from '../configurable.api';
-  // import { useRoute } from 'vue-router';
-  import { testConfigVentNew } from '../configurable.data';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
-  // const route = useRoute();
-  let interval: number | undefined;
-
-  onMounted(() => {
-    // fetchConfigs('vent_new').then(() => {
-    configs.value = testConfigVentNew;
-    // updateEnhancedConfigs(configs.value);
+import { onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+// import MonitorCenter from './components/MonitorCenter.vue';
+import NewNav from './components/NewNavFire.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleDustNew from './components/ModuleDustNew.vue';
+import NavVentCard from './components/NavVentCard.vue'
+// import { useRoute } from 'vue-router';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { getHomeData } from '../configurable.api';
+// import { useRoute } from 'vue-router';
+import { testConfigVentNew } from '../configurable.data';
+const { configs, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
+// const route = useRoute();
+let interval: number | undefined;
+
+onMounted(() => {
+  // fetchConfigs('vent_new').then(() => {
+  configs.value = testConfigVentNew;
+  // updateEnhancedConfigs(configs.value);
 
+  getHomeData({}).then(updateData);
+  // });
+  setInterval(() => {
     getHomeData({}).then(updateData);
-    // });
-    setInterval(() => {
-      getHomeData({}).then(updateData);
-    }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+  }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
 </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 {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
-    }
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
   }
+}
 
-  .company-home {
-    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+  .top-bg {
     width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
 
-    .top-bg {
-      width: 100%;
+    .main-title {
       height: 56px;
-      background: var(--image-modal-top) no-repeat center;
-      position: absolute;
-      z-index: 1;
-      .main-title {
-        height: 56px;
-        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;
-      }
-    }
-    .left-t {
-      position: absolute;
-      width: 28%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-      z-index: 0;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    .right-t {
+
+    .top-nav {
       position: absolute;
-      width: 172%;
+      top: 0;
+      width: 880px;
       height: 100%;
-      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-      z-index: 0;
-    }
-    // .module-left {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   left: 0;
-    // }
-    // .module-right {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   right: 0;
-    // }
-    // .module-bottom {
-    //   position: absolute;
-    //   width: 1000px;
-    //   height: 280px;
-    // }
-    .module-dropdown {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-dropdown-original {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
+      display: flex;
+      justify-content: flex-start;
     }
   }
-  :deep(.loading-box) {
-    position: unset;
+
+  .left-t {
+    position: absolute;
+    width: 28%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+    z-index: 0;
+  }
+
+  .right-t {
+    position: absolute;
+    width: 172%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
+
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+  }
+
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, 0);
+    width: 661px;
+    height: 89px;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

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

@@ -511,7 +511,7 @@
         grid: {
           top: 50,
           bottom: dataZoom.length ? 80 : 30,
-          left: 50, // 缩小左侧边距，增加图表宽度
+          left: 75, // 缩小左侧边距，增加图表宽度
           right: 50, // 缩小右侧边距
           ...grid,
         },

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

@@ -51,12 +51,12 @@
     </template>
     <template v-if="layout === 'new3-top'">
       <div v-if="label === '进风(m³/min)'" class="mini-board_New3_jin">
-        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
         <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
       </div>
       <div v-if="label === '回风(m³/min)'" class="mini-board_New3_hui">
-        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
         <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
       </div>
       <!-- <slot name="value">
         <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
@@ -68,656 +68,764 @@
   </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',
-    }
-  );
-
-  // 获取某些 value 对应的特殊的 装饰用的类名
-  function getValueDecoClass(value) {
-    switch (value) {
-      case '低风险':
-        return 'low_risk';
-      case '一般风险':
-        return 'risk';
-      case '较大风险':
-        return 'high_risk';
-      case '报警':
-        return 'warning';
-      default:
-        return '';
-    }
-  }
+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',
+  }
+);
 
-  defineEmits(['click']);
+// 获取某些 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';
-
-  @{theme-green} {
-    .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-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-      // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-      // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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/green/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-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
-      --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
-      --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
-    }
-    // type E 专用样式调整
-    .mini-board_E .mini-board__label {
-      height: 100px;
-      white-space: normal;
-    }
-    .mini-board_E:nth-child(1) {
-      background-image: var(--image-hycd);
-      .mini-board__label_E {
-        background-image: none;
-      }
-    }
-    .mini-board_E:nth-child(2) {
-      background-image: var(--image-dyfl);
-      .mini-board__label_E {
-        background-image: none;
-      }
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+
+@{theme-green} {
+  .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-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+    // --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+    // --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+    // --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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/green/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-hycd: url(/@/assets/images/themify/green/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/themify/green/home-container/configurable/dusthome/jdjl.png);
+  }
+
+  // type E 专用样式调整
+  .mini-board_E .mini-board__label {
+    height: 100px;
+    white-space: normal;
+  }
+
+  .mini-board_E:nth-child(1) {
+    background-image: var(--image-hycd);
+
+    .mini-board__label_E {
+      background-image: none;
     }
-    .mini-board_E:nth-child(3) {
-      background-image: var(--image-jdjl);
-      .mini-board__label_E {
-        background-image: none;
-      }
+  }
+
+  .mini-board_E:nth-child(2) {
+    background-image: var(--image-dyfl);
+
+    .mini-board__label_E {
+      background-image: none;
     }
   }
-  @{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-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-      --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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');
+
+  .mini-board_E:nth-child(3) {
+    background-image: var(--image-jdjl);
+
+    .mini-board__label_E {
+      background-image: none;
     }
   }
+}
 
+@{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-areaNew66: url('/@/assets/images/vent/homeNew/databg/3-1.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-area3: url('/@/assets/images/company/area3.png');
-    --image-areaT: url('/@/assets/images/company/areaT.png');
-    --image-areaR: url('/@/assets/images/company/areaR.png');
-    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-    --image-value-S: url('/@/assets/images/vent/value-S.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-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
-    --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
-    --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
-    --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
-    --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
-    --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
-    --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
-    --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
-    --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
-    --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
-    --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
-    --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
-    --image-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
-    --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
-    --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
-    --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.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-areaNew88: url('/@/assets/images/vent/homeNew/databg/7.png');
+    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+    --image-areaQ: url('/@/assets/images/themify/deepblue/company/area-q.png');
+    --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+    --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+    --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.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');
+  }
+}
 
-  .mini-board__label {
-    white-space: nowrap;
-  }
-  .mini-board__value {
-    white-space: nowrap;
-  }
+.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-areaNew66: url('/@/assets/images/vent/homeNew/databg/3-1.png');
+  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+  --image-areaNew88: url('/@/assets/images/vent/homeNew/databg/3-2.png');
+  --image-area3: url('/@/assets/images/company/area3.png');
+  --image-areaQ: url('/@/assets/images/company/area-q.png');
+  --image-areaT: url('/@/assets/images/company/areaT.png');
+  --image-areaR: url('/@/assets/images/company/areaR.png');
+  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+  --image-value-S: url('/@/assets/images/vent/value-S.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-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
+  --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
+  --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
+  --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
+  --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
+  --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
+  --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
+  --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
+  --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
+  --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
+  --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
+  --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
+  --image-board_bg_7: url('/@/assets/images/home-container/configurable/board_bg_7.png');
+  --image-board_bg_8: url('/@/assets/images/home-container/configurable/board_bg_8.png');
+  --image-board_bg_9: url('/@/assets/images/home-container/configurable/board_bg_9.png');
+  --image-board_bg_10: url('/@/assets/images/home-container/configurable/board_bg_10.png');
 
-  .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;
-  }
+  --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_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_R {
-    width: 120px;
-    height: 90px;
-    background-image: var(--image-areaR);
-    background-size: 100% 100%;
-    position: relative;
-    .mini-board__value_R {
-      position: absolute;
-      left: 30%;
-      top: 30%;
-      font-family: 'douyuFont';
-      color: @vent-gas-primary-text;
-    }
-    .mini-board__label_R {
-      position: absolute;
-      right: 0;
-      bottom: 20px;
-      font-size: 15px;
-    }
-  }
-  .mini-board_S {
-    width: 131px;
-    height: 64px;
-    background-image: var(--image-value-S);
-    background-size: auto 40px;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_T {
-    width: 120px;
-    height: 80px;
-    background-image: var(--image-areaT);
-    background-size: 100% 100%;
-  }
-  .mini-board__label_T {
-    margin-top: 15px;
-  }
-  .mini-board__value_T {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 12px;
-    height: 30px;
-    line-height: 30px;
-  }
+.mini-board__label {
+  white-space: nowrap;
+}
 
-  .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: 140px;
-    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 {
+  white-space: nowrap;
+}
 
-  .mini-board_J {
-    width: 110px;
-    height: 58px;
-    background-image: var(--image-board-bg-J);
-    background-size: 100% 100%;
-  }
-  .mini-board_K {
-    width: 170px;
-    height: 70px;
-    background-size: 100% 100%;
-  }
-  /* 第一个mini-board_K使用k1背景 */
-  .mini-board_K:first-of-type {
-    background-image: var(--image-board-bg-k1);
-  }
+.mini-board_New {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-areaNew);
+  background-size: 100% 100%;
+}
 
-  /* 第二个mini-board_K使用k2背景 */
-  .mini-board_K:first-of-type + .mini-board_K {
-    background-image: var(--image-board-bg-k2);
-  }
+.mini-board_New1 {
+  width: 118px;
+  height: 60px;
+  background-image: var(--image-areaNew1);
+  background-size: 100% 100%;
+}
 
-  .mini-board_L {
-    width: 120px;
-    height: 100px;
-    background-size: 100% 100%;
-  }
-  .mini-board_L:nth-child(odd) {
-    background-image: var(--image-board-bg-l1);
-  }
-  .mini-board_L:nth-child(even) {
-    background-image: var(--image-board-bg-l2);
-  }
+.mini-board_New2 {
+  width: 93px;
+  height: 60px;
+  margin: 0px;
+  background-image: var(--image-areaNew2);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
 
-  .mini-board_M {
-    width: 180px;
-    height: 60px;
-    background-image: var(--image-board-bg-m1);
-    background-size: 100% 100%;
-    margin: 5px 0 15px 0;
-  }
-  .mini-board_M:nth-child(2),
-  .mini-board_M:nth-child(3),
-  .mini-board_M:nth-child(6),
-  .mini-board_M:nth-child(7) {
-    background-image: var(--image-board-bg-m2);
-    .mini-board__value_M {
-      color: #27cab7;
-    }
-  }
+.mini-board_New3 {
+  margin-bottom: 0;
+  width: 170px;
+  height: 50px;
+}
 
-  .mini-board_N {
-    width: 200px;
-    height: 68px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 25px 0 20px;
-    margin-top: -15px;
-    background-image: var(--image-board-bg-nl1);
-    background-size: 100% 100%;
-  }
-  .mini-board_N:nth-child(2) {
-    background-image: var(--image-board-bg-nr1);
-  }
-  .mini-board_N:nth-child(3) {
-    background-image: var(--image-board-bg-nl2);
-  }
-  .mini-board_N:nth-child(4) {
-    background-image: var(--image-board-bg-nr2);
-  }
-  .mini-board_N:nth-child(5) {
-    background-image: var(--image-board-bg-nl1);
-  }
-  .mini-board_N:nth-child(6) {
-    background-image: var(--image-board-bg-nr1);
-  }
+.mini-board_New4 {
+  margin-bottom: 0;
+  width: 179px;
+  height: 48px;
+}
 
-  .mini-board_O {
-    width: 110px;
-    height: 50px;
-    background-image: var(--image-board-bg-o);
-    background-size: 100% 100%;
-  }
+.mini-board_New3_jin {
+  background-image: var(--image-areaNew66);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 55px;
+}
 
-  .mini-board_P {
-    width: 97px;
-    height: 170px;
-    padding-top: 105px;
-    background-image: var(--image-board_bg_7), var(--image-board_bg_10);
-    background-size:
-      97px 105px,
-      100% 40px;
-    background-repeat: no-repeat;
-    background-position:
-      center top,
-      center bottom;
-  }
-  .mini-board_P:nth-of-type(2) {
-    width: 97px;
-    height: 170px;
-    padding-top: 105px;
-    background-image: var(--image-board_bg_8), var(--image-board_bg_9);
-    background-size:
-      97px 105px,
-      100% 40px;
-    background-repeat: no-repeat;
-    background-position:
-      center top,
-      center bottom;
-  }
+.mini-board_New3_hui {
+  background-image: var(--image-areaNew88);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 55px;
+}
 
-  .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 {
+.mini-board_A {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-area3);
+  background-size: 100% 100%;
+}
+
+.mini-board_Q {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 116px;
+  height: 55px;
+  background-image: var(--image-areaQ);
+  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_R {
+  width: 120px;
+  height: 90px;
+  background-image: var(--image-areaR);
+  background-size: 100% 100%;
+  position: relative;
+
+  .mini-board__value_R {
+    position: absolute;
+    left: 30%;
+    top: 30%;
+    font-family: 'douyuFont';
     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;
+
+  .mini-board__label_R {
+    position: absolute;
+    right: 0;
+    bottom: 20px;
     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_S {
+  width: 131px;
+  height: 64px;
+  background-image: var(--image-value-S);
+  background-size: auto 40px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board__value_C {
-    color: @vent-gas-primary-text;
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    font-weight: bold;
-  }
+.mini-board_T {
+  width: 120px;
+  height: 80px;
+  background-image: var(--image-areaT);
+  background-size: 100% 100%;
+}
 
-  .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: 19px;
-    font-weight: bold;
-  }
-  .mini-board__label_E {
-    line-height: 20px;
-    height: 90px;
-    padding-top: 30%;
-    background-repeat: no-repeat;
-    background-position: center top;
-    white-space: normal;
-  }
+.mini-board__label_T {
+  margin-top: 15px;
+}
 
-  .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_T {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 30px;
+  line-height: 30px;
+}
 
-  .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_C {
+  width: 121px;
+  height: 69px;
+  background-image: var(--image-vent-param-bg);
+}
 
-  .mini-board__value_J {
-    color: #b3ebf7;
-    font-size: 16px;
-    font-weight: bold;
-    height: 25px;
-    line-height: 25px;
-  }
-  .mini-board__label_J {
-    line-height: 20px;
-    height: 20px;
-  }
+.mini-board_D {
+  // width: 105px;
+  height: 58px;
+  background-image: var(--image-mini-board-1);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
 
-  .mini-board__value_K {
-    color: #fff;
-    font-family: 'douyuFont';
-    font-size: 16px;
-    // font-weight: bold;
-    height: 55px;
-    line-height: 55px;
-    padding-left: 60px;
-  }
-  .mini-board__label_K {
-    line-height: 21px;
-    height: 21px;
-    text-align: end;
-    font-size: 13px;
-  }
-  .mini-board__label_L {
-    line-height: 21px;
-    height: 21px;
-    text-align: center;
-    font-size: 14px;
-    margin-top: 30px;
-  }
-  .mini-board__value_L {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 14px;
-    height: 30px;
-    line-height: 30px;
-  }
+.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: 140px;
+  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 {
+  width: 110px;
+  height: 58px;
+  background-image: var(--image-board-bg-J);
+  background-size: 100% 100%;
+}
+
+.mini-board_K {
+  width: 170px;
+  height: 70px;
+  background-size: 100% 100%;
+}
+
+/* 第一个mini-board_K使用k1背景 */
+.mini-board_K:first-of-type {
+  background-image: var(--image-board-bg-k1);
+}
+
+/* 第二个mini-board_K使用k2背景 */
+.mini-board_K:first-of-type+.mini-board_K {
+  background-image: var(--image-board-bg-k2);
+}
+
+.mini-board_L {
+  width: 120px;
+  height: 100px;
+  background-size: 100% 100%;
+}
+
+.mini-board_L:nth-child(odd) {
+  background-image: var(--image-board-bg-l1);
+}
+
+.mini-board_L:nth-child(even) {
+  background-image: var(--image-board-bg-l2);
+}
+
+.mini-board_M {
+  width: 180px;
+  height: 60px;
+  background-image: var(--image-board-bg-m1);
+  background-size: 100% 100%;
+  margin: 5px 0 15px 0;
+}
+
+.mini-board_M:nth-child(2),
+.mini-board_M:nth-child(3),
+.mini-board_M:nth-child(6),
+.mini-board_M:nth-child(7) {
+  background-image: var(--image-board-bg-m2);
 
-  .mini-board__label_M {
-    line-height: 21px;
-    height: 21px;
-    text-align: center;
-    font-size: 14px;
-  }
   .mini-board__value_M {
-    font-family: 'douyuFont';
-    color: @vent-gas-primary-text;
-    font-size: 12px;
-    height: 23px;
-    margin-top: 5px;
+    color: #27cab7;
   }
+}
 
-  .mini-board__value_O {
-    font-family: 'douyuFont';
-    font-size: 11px;
-    color: @vent-gas-primary-text;
-  }
+.mini-board_N {
+  width: 200px;
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 25px 0 20px;
+  margin-top: -15px;
+  background-image: var(--image-board-bg-nl1);
+  background-size: 100% 100%;
+}
 
-  .mini-board__value_P {
-    font-family: 'douyuFont';
-    font-size: 20px;
-    margin-top: 10px;
-  }
+.mini-board_N:nth-child(2) {
+  background-image: var(--image-board-bg-nr1);
+}
 
-  .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_N:nth-child(3) {
+  background-image: var(--image-board-bg-nl2);
+}
 
-  .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_N:nth-child(4) {
+  background-image: var(--image-board-bg-nr2);
+}
+
+.mini-board_N:nth-child(5) {
+  background-image: var(--image-board-bg-nl1);
+}
+
+.mini-board_N:nth-child(6) {
+  background-image: var(--image-board-bg-nr1);
+}
+
+.mini-board_O {
+  width: 110px;
+  height: 50px;
+  background-image: var(--image-board-bg-o);
+  background-size: 100% 100%;
+}
+
+.mini-board_P {
+  width: 97px;
+  height: 170px;
+  padding-top: 105px;
+  background-image: var(--image-board_bg_7), var(--image-board_bg_10);
+  background-size:
+    97px 105px,
+    100% 40px;
+  background-repeat: no-repeat;
+  background-position:
+    center top,
+    center bottom;
+}
+
+.mini-board_P:nth-of-type(2) {
+  width: 97px;
+  height: 170px;
+  padding-top: 105px;
+  background-image: var(--image-board_bg_8), var(--image-board_bg_9);
+  background-size:
+    97px 105px,
+    100% 40px;
+  background-repeat: no-repeat;
+  background-position:
+    center top,
+    center bottom;
+}
+
+.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_New4 {
+  font-size: 12px;
+  font-family: 'douyuFont';
+  position: absolute;
+  left: 76px;
+  top: 4px;
+}
+
+.mini-board__label_New4 {
+  position: absolute;
+  left: 76px;
+  bottom: -2px;
+}
+
+.mini-board__value_A {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__value_Q {
+  color: #b7f1fd;
+  font-size: 12px;
+  font-family: 'douyuFont';
+}
+
+.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_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: 19px;
+  font-weight: bold;
+}
+
+.mini-board__label_E {
+  line-height: 20px;
+  height: 90px;
+  padding-top: 30%;
+  background-repeat: no-repeat;
+  background-position: center top;
+  white-space: normal;
+}
+
+.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_J {
+  color: #b3ebf7;
+  font-size: 16px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+}
+
+.mini-board__label_J {
+  line-height: 20px;
+  height: 20px;
+}
+
+.mini-board__value_K {
+  color: #fff;
+  font-family: 'douyuFont';
+  font-size: 16px;
+  // font-weight: bold;
+  height: 55px;
+  line-height: 55px;
+  padding-left: 60px;
+}
+
+.mini-board__label_K {
+  line-height: 21px;
+  height: 21px;
+  text-align: end;
+  font-size: 13px;
+}
+
+.mini-board__label_L {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 30px;
+}
+
+.mini-board__value_L {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.mini-board__label_M {
+  line-height: 21px;
+  height: 21px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.mini-board__value_M {
+  font-family: 'douyuFont';
+  color: @vent-gas-primary-text;
+  font-size: 12px;
+  height: 23px;
+  margin-top: 5px;
+}
+
+.mini-board__value_O {
+  font-family: 'douyuFont';
+  font-size: 11px;
+  color: @vent-gas-primary-text;
+}
+
+.mini-board__value_P {
+  font-family: 'douyuFont';
+  font-size: 20px;
+  margin-top: 10px;
+}
+
+.mini-board_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
   }
-  .mini-board_H_high_risk {
-    background-image: var(--image-board_bg_5);
+}
+
+.mini-board_E:nth-child(2) {
+  .mini-board__label_E {
+    background-image: var(--image-dyfl);
   }
-  .mini-board_H_warning {
-    background-image: var(--image-board_bg_4);
+}
+
+.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);
+}
 </style>

src/views/vent/home/configurable/components/preset/CoalSeam.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="coal-seam">
+    <div class="seam-box" v-for="(item, index) in option" :key="index">
+      <div class="seam-title">{{ item.label }}</div>
+      <div class="seam-text">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  option: {
+    type: Array as any
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.coal-seam {
+  --image-mc-bg-t: url('@/assets/images/home-container/configurable/dusthome/mc-top.png');
+  --image-mc-bg-b: url('@/assets/images/home-container/configurable/dusthome/mc-bottom.png');
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 25px 15px 15px 15px;
+
+  .seam-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .seam-title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 105px;
+      height: 43px;
+      background: var(--image-mc-bg-t) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .seam-text {
+      display: flex;
+      justify-content: center;
+      width: 102px;
+      height: 80px;
+      padding-top: 22px;
+      background: var(--image-mc-bg-b) no-repeat;
+      background-size: 100% 100%;
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+      font-size: 13px;
+    }
+  }
+}
+</style>

src/views/vent/home/configurable/components/preset/ComplexListNew.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="complex-list-new">
+    <div class="list-new-box" v-for="(item, index) in complexData" :key="index">
+      <div class="new-box-title">{{ item.sysNamme }}</div>
+      <div class="new-box-item">
+        <div class="box-item-text">风险监测</div>
+        <div class="box-item-val">{{ item.warnLevel }}</div>
+      </div>
+      <div class="new-box-item">
+        <div class="box-item-text">最高粉尘浓度</div>
+        <div class="box-item-val">{{ item.maxVal }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props=defineProps({
+  complexData:{
+    type:Array as any
+  }
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.complex-list-new {
+  --image-complex-bg: url('@/assets/images/home-container/configurable/dusthome/complex-bg.png');
+  --image-complex-item-bg: url('@/assets/images/home-container/configurable/dusthome/item-bg.png');
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  width: 100%;
+  height: 100%;
+  padding: 0px 15px 5px 15px;
+  overflow-y: auto;
+
+  .list-new-box {
+    position: relative;
+    width: 184px;
+    height: 128px;
+    background: var(--image-complex-bg) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 10px;
+  }
+
+  .new-box-title {
+    position: absolute;
+    width: 100%;
+    top: 6px;
+    text-align: center;
+  }
+
+  .new-box-item {
+    position: absolute;
+    width: 100%;
+    height: 26px;
+    background: var(--image-complex-item-bg) no-repeat;
+    background-size: 100% 100%;
+    padding: 0px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &:nth-child(2) {
+      left: 0px;
+      top: 40px;
+    }
+
+    &:nth-child(3) {
+      left: 0px;
+      top: 82px;
+    }
+  }
+  .box-item-val{
+   color: #b9f3ff;
+  }
+}
+</style>

src/views/vent/home/configurable/components/preset/CustomGalleryNew.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="custom-gallery-new">
+    <div :class="`gallery-new-box-${type}`">
+      <div :class="`gallery-content-${type}`" v-for="(item, index) in option" :key="index">
+        <SvgIcon v-if="type == 'B'" :class="index % 2 == 0 ? 'icon-style' : 'icon-style1'" size="20"
+          :name="item.iconName" />
+        <div :class="index % 2 == 0 ? 'gallery-content-text' : 'gallery-content-text-r'">{{ item.label }}</div>
+        <div :class="index % 2 == 0 ? 'gallery-content-value' : 'gallery-content-value-r'">{{ galleryData ?
+          galleryData[item.value] : 0}}</div>
+      </div>
+      <div :class="`gallery-content-${type}`">
+        <SvgIcon v-if="type == 'B'" class="icon-style2" size="30" name="zsj" />
+        <div v-else class="gallery-content-text1">{{ galleryData?.totalNum || 0 }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+
+let props = defineProps({
+  type: {
+    type: String
+  },
+  option: {
+    type: Array as any
+  },
+  galleryData: {
+    type: Object
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.custom-gallery-new {
+  --image-gallery-bg: url('@/assets/images/home-container/configurable/dusthome/gallery-bg.png');
+  --image-gallery-bg-b: url('@/assets/images/home-container/configurable/dusthome/gallery-bg-b.png');
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 20px 15px 10px 15px;
+
+  .gallery-new-box-A {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--image-gallery-bg) no-repeat;
+    background-size: 100% 100%;
+
+  }
+
+  .gallery-new-box-B {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--image-gallery-bg-b) no-repeat;
+    background-size: 100% 100%;
+
+  }
+
+  .gallery-content-A {
+    position: absolute;
+
+    &:nth-child(1) {
+      left: 22px;
+      top: 6px;
+    }
+
+    &:nth-child(2) {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      right: 24px;
+      top: 6px;
+    }
+
+    &:nth-child(3) {
+      left: 22px;
+      top: 83px;
+    }
+
+    &:nth-child(4) {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      right: 24px;
+      top: 83px;
+    }
+
+    &:nth-child(5) {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .gallery-content-text {
+      margin-bottom: 5px;
+    }
+
+    .gallery-content-text-r {
+      margin-bottom: 5px;
+    }
+
+    .gallery-content-text1 {
+      font-size: 24px;
+      font-family: 'douyuFont';
+    }
+
+    .gallery-content-value,
+    .gallery-content-value-r {
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+    }
+
+  }
+
+  .gallery-content-B {
+    position: absolute;
+    width: 160px;
+    height: 80px;
+
+    &:nth-child(1) {
+      left: 0px;
+      top: 0px;
+    }
+
+    &:nth-child(2) {
+      right: 0px;
+      top: 0px;
+    }
+
+    &:nth-child(3) {
+      left: 0px;
+      top: 99px;
+    }
+
+    &:nth-child(4) {
+      right: 0px;
+      top: 98px;
+    }
+
+    &:nth-child(5) {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .icon-style {
+      position: absolute;
+      left: 15px;
+      top: 8px;
+    }
+
+    .icon-style1 {
+      position: absolute;
+      right: 15px;
+      top: 8px;
+    }
+
+    .icon-style2 {
+      position: absolute;
+      left: 65px;
+      top: 25px;
+    }
+
+    .gallery-content-text {
+      position: absolute;
+      left: 42px;
+      top: 6px;
+    }
+
+    .gallery-content-text-r {
+      position: absolute;
+      right: 42px;
+      top: 6px;
+    }
+
+    .gallery-content-value {
+      position: absolute;
+      left: 42px;
+      top: 50px;
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+    }
+
+    .gallery-content-value-r {
+      position: absolute;
+      right: 42px;
+      top: 50px;
+      font-family: 'douyuFont';
+      color: #b9f3ff;
+    }
+  }
+
+
+}
+</style>

src/views/vent/home/configurable/components/preset/CustomTableNew.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="custom-table-new">
+    <div class="table-new-title">
+      <div class="new-title-item" v-for="(item, index) in columns" :key="index">{{ item.name }}</div>
+    </div>
+    <div class="table-new-content">
+      <div class="new-content-tr" v-for="(ite, ind) in tableData" :key="ind">
+        <div class="new-content-td">{{ ite[columns[0].prop] }}</div>
+        <div class="new-content-td">{{ ite[columns[1].prop] }}</div>
+        <div class="new-content-td">{{ ite[columns[2].prop] }}</div>
+        <div class="new-content-td">{{ ite[columns[3].prop] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+let props = defineProps({
+  columns: {
+    type: Array as any
+  },
+  tableData: {
+    type: Array as any
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.custom-table-new {
+  --image-table-bg: url('@/assets/images/home-container/configurable/dusthome/table-content-bg.png');
+  --image-table-title-bg: url('@/assets/images/home-container/configurable/dusthome/table-title-bg.png');
+  --image-tr-bg: url('@/assets/images/home-container/configurable/dusthome/item-bg.png');
+  width: 100%;
+  height: 100%;
+  padding: 15px 0px 5px 0px;
+  background: var(--image-table-bg) no-repeat;
+  background-size: 100% 100%;
+
+  .table-new-title {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 28px;
+    padding: 0px 10px;
+    box-sizing: border-box;
+    background: var(--image-table-title-bg) no-repeat;
+    background-size: 100% 100%;
+
+    .new-title-item {
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+
+      &:nth-child(1) {
+        width: 40%
+      }
+
+      &:nth-child(2) {
+        width: 20%
+      }
+
+      &:nth-child(3) {
+        width: 20%
+      }
+
+      &:nth-child(4) {
+        width: 20%
+      }
+    }
+  }
+
+  .table-new-content {
+    width: 100%;
+    height: calc(100% - 35px);
+    padding: 0px 10px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .new-content-tr {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      /* height: 34px; */
+      padding: 4px 0px;
+
+      &:nth-child(even) {
+        background-color: rgba(44, 182, 255,.1);
+        // background: var(--image-tr-bg) no-repeat;
+        // background-size: 100% 100%;
+      }
+
+      .new-content-td {
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+
+        &:nth-child(1) {
+          flex: 2;
+        }
+
+        &:nth-child(2) {
+          flex: 1;
+        }
+
+        &:nth-child(3) {
+          flex: 1;
+        }
+
+        &:nth-child(4) {
+          flex: 1;
+        }
+      }
+    }
+
+  }
+}
+
+::v-deep ::-webkit-scrollbar {
+  display: none !important;
+}
+</style>

src/views/vent/home/configurable/components/preset/earlyWarnMonitor.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="early-warn-monitor">
+    <div class="monitor-title">
+      <div class="title-text">报警</div>
+      <div class="title-val">{{ warnData?.alarm.val || 0 }}</div>
+    </div>
+    <div class="monitor-contents">
+      <div class="content-item">
+        <div class="item-bg bg-blue">
+          <div class="item-value text-blue">{{ warnData?.blue.val || 0 }}</div>
+          <div class="item-text">低风险</div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="item-bg bg-yellow">
+          <div class="item-value text-yellow">{{ warnData?.yellow.val || 0 }}</div>
+          <div class="item-text">一般风险</div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="item-bg bg-orange">
+          <div class="item-value text-orange">{{ warnData?.orange.val || 0 }}</div>
+          <div class="item-text">较大风险</div>
+        </div>
+      </div>
+      <div class="content-item">
+        <div class="item-bg bg-red">
+          <div class="item-value text-red">{{ warnData?.red.val || 0 }}</div>
+          <div class="item-text">重大风险</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+let props = defineProps({
+  warnData: {
+    type: Object
+  }
+})
+
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.early-warn-monitor {
+  --image-warn-title: url('@/assets/images/fireNew/warn-title.png');
+  --image-warn-bg: url('@/assets/images/fireNew/warn-bg.png');
+  --image-warn-red: url('@/assets/images/fireNew/warn-red.png');
+  --image-warn-orange: url('@/assets/images/fireNew/warn-orange.png');
+  --image-warn-yellow: url('@/assets/images/fireNew/warn-yellow.png');
+  --image-warn-blue: url('@/assets/images/fireNew/warn-blue.png');
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+
+  .monitor-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 48px;
+    background: var(--image-warn-title) no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 10px;
+    padding: 0px 35px;
+    font-size: 16px;
+  }
+
+  .title-val {
+    font-family: 'douyuFont';
+    font-size: 16px;
+    color: #ff0000;
+  }
+
+  .monitor-contents {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    width: 100%;
+    height: calc(100% - 58px);
+    background: var(--image-warn-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .content-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    height: 50%;
+  }
+
+  .item-bg {
+    position: relative;
+    width: 160px;
+    height: 62px;
+    text-align: center;
+  }
+
+  .bg-blue {
+    background: var(--image-warn-blue) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .bg-yellow {
+    background: var(--image-warn-yellow) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .bg-orange {
+    background: var(--image-warn-orange) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .bg-red {
+    background: var(--image-warn-red) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .item-value {
+    position: absolute;
+    width: 100%;
+    top: 22px;
+    left: 0;
+    font-family: 'douyuFont';
+    font-size: 12px;
+  }
+
+  .item-text {
+    position: absolute;
+    width: 100%;
+    top: 44px;
+    left: 0;
+    font-size: 12px;
+  }
+
+  .text-blue {
+    color: #32ddff;
+  }
+
+  .text-yellow {
+    color: #ffff00;
+  }
+
+  .text-orange {
+    color: #ff9b17;
+  }
+
+  .text-red {
+    color: #ff3823;
+  }
+
+
+}
+</style>

src/views/vent/home/configurable/components/preset/ventRoute.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="vent-route">
+    <div class="echart-box" ref="echartVentRoute"></div>
+    <div class="echart-icon"></div>
+    <div class="echart-lengend">
+      <div class="lengend-item">
+        <div class="lengend-item-val font-bg-1">{{ ventData?.retM3_merge ? ventData?.retM3_merge.value : '-' }}</div>
+        <div class="lengend-item-label">矿井风量</div>
+      </div>
+      <div class="lengend-item">
+        <div class="lengend-item-val font-bg-2">{{ ventData?.fy_merge ? ventData?.fy_merge.value : '-' }}</div>
+        <div class="lengend-item-label">矿井阻力</div>
+      </div>
+      <div class="lengend-item">
+        <div class="lengend-item-val font-bg-3">{{ ventData?.dengjikong ? ventData?.dengjikong.value : '-' }}</div>
+        <div class="lengend-item-label">等积孔</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, watch } from 'vue'
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  ventData: {
+    type: Object,
+  },
+  config: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+let echartVentRoute = ref(null)
+let seriesData = ref([
+  {
+    value: 4,
+    name: '节传单位'
+  },
+  {
+    value: 16,
+    name: '中短波发射中心'
+  },
+  {
+    value: 10,
+    name: '短波或中波发射台'
+  },
+  {
+    value: 11,
+    name: '中波电视调频台'
+  },
+  {
+    value: 0,
+    name: '其他'
+  }
+]
+)
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(echartVentRoute.value);
+    let option = {
+      // 设置提示框的显示属性
+      tooltip: props.config.tooltip,
+      // 设置图表的标题
+      title: props.config.title,
+      // 设置图表的系列
+      series: [{
+        name: '',
+        type: props.config.type,
+        // 设置饼图的半径
+        radius: props.config.radius,
+        // 设置饼图的中心位置
+        center: props.config.center,
+        // 设置饼图的数据
+        data: seriesData.value,
+        // 设置标签的显示属性
+        label: props.config.label,
+
+        // 设置图元的样式
+        itemStyle: {
+          // 设置图元的边框颜色
+          borderColor: props.config.borderColor,
+          // 设置图元的边框宽度
+          borderWidth: props.config.borderWidth,
+          // 设置图元的颜色
+          color: function (params) {
+            return {
+              x: 0,
+              y: 1,
+              x2: 1,
+              y2: 0,
+              // 根据索引值从 colorStops 数组中获取颜色渐变对象
+              colorStops: props.config.colorStops[params.dataIndex], // 100% 处的颜色
+
+            }
+          },
+        }
+      },
+
+      ]
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(() => {
+  getOption()
+})
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {}
+
+.vent-route {
+  --image-echart-bg: url('@/assets/images/fireNew/echart-bg.png');
+  --image-echart-icon: url('@/assets/images/fireNew/echart-icon.png');
+  --image-echart-lenged1: url('@/assets/images/fireNew/kjfl.png');
+  --image-echart-lenged2: url('@/assets/images/fireNew/kjzl.png');
+  --image-echart-lenged3: url('@/assets/images/fireNew/djk.png');
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .echart-box {
+    width: 169px;
+    height: 169px;
+    background: var(--image-echart-bg) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .echart-icon {
+    width: 57px;
+    height: 145px;
+    background: var(--image-echart-icon) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .echart-lengend {
+    width: 132px;
+    height: 172px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .lengend-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: 132px;
+    height: 45px;
+    padding-left: 50px;
+
+    &:nth-child(1) {
+      background: var(--image-echart-lenged1) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(2) {
+      background: var(--image-echart-lenged2) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    &:nth-child(3) {
+      background: var(--image-echart-lenged3) no-repeat;
+      background-size: 100% 100%;
+    }
+
+  }
+
+  .lengend-item-val {
+    font-size: 12px;
+    font-family: 'douyuFont';
+  }
+
+  .font-bg-1 {
+    color: #b7f1fd;
+  }
+
+  .font-bg-2 {
+    color: #b9ffef;
+  }
+
+  .font-bg-3 {
+    color: #b9d3ff;
+  }
+
+  .lengend-item-label {
+    font-size: 12px;
+  }
+}
+</style>

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

@@ -1,5 +1,114 @@
+import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
 import { Config } from '../../deviceManager/configurationTable/types';
 export const testConfigNewDust: Config[] = [
+  //{
+  //  deviceType: 'dustManageInfo',
+  //  moduleName: '工作面风险监测',
+  //  pageType: 'New_dust',
+  //  moduleData: {
+  //    header: {
+  //      show: false,
+  //      readFrom: '',
+  //      selector: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //      slot: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //    },
+  //    background: {
+  //      show: false,
+  //      type: 'video',
+  //      link: '',
+  //    },
+  //    layout: {
+  //      direction: 'column',
+  //      items: [
+  //        {
+  //          name: 'gallery',
+  //          basis: '30%',
+  //        },
+  //        {
+  //          name: 'complex_list',
+  //          basis: '70%',
+  //          pageType: 'New_dust',
+  //        },
+  //      ],
+  //    },
+  //    board: [],
+  //    chart: [],
+  //    gallery: [
+  //      {
+  //        type: 'I',
+  //        readFrom: 'dustManageInfo',
+  //        items: [
+  //          {
+  //            label: '',
+  //            value: '${totalNum}',
+  //            color: 'white',
+  //          },
+  //          {
+  //            label: '低风险',
+  //            value: '${dfxNum}',
+  //            color: 'lightblue',
+  //          },
+  //          {
+  //            label: '一般风险',
+  //            value: '${ybNum}',
+  //            color: 'lightblue',
+  //          },
+  //          {
+  //            label: '较大风险',
+  //            value: '${jdNum}',
+  //            color: 'lightblue',
+  //          },
+  //          {
+  //            label: '重大风险',
+  //            value: '${zdNum}',
+  //            color: 'lightblue',
+  //          },
+  //        ],
+  //      },
+  //    ],
+  //    gallery_list: [],
+  //    table: [],
+  //    list: [],
+  //    complex_list: [
+  //      {
+  //        type: 'E',
+  //        readFrom: 'dustManageInfo.sysList',
+  //        mapFromData: true,
+  //        items: [
+  //          {
+  //            title: '${sysNamme}',
+  //            contents: [
+  //              {
+  //                label: '风险监测',
+  //                value: '${warnLevel}',
+  //                color: 'blue',
+  //                info: '',
+  //              },
+  //              {
+  //                label: '最高粉尘浓度',
+  //                value: '${maxVal}',
+  //                color: 'blue',
+  //                info: '',
+  //              },
+  //            ],
+  //          },
+  //        ],
+  //      },
+  //    ],
+  //    preset: [],
+  //  },
+  //  showStyle: {
+  //    size: 'width:440px;height:550px;',
+  //    version: '淡蓝色',
+  //    position: 'top:60px;left:0;',
+  //  },
+  //},
   {
     deviceType: 'dustManageInfo',
     moduleName: '工作面风险监测',
@@ -26,88 +135,125 @@ export const testConfigNewDust: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'gallery',
-            basis: '30%',
+            name: 'gallery_new',
+            basis: '33%',
+            overflow: 'hidden'
           },
           {
-            name: 'complex_list',
-            basis: '70%',
-            pageType: 'New_dust',
+            name: 'complex_list_new',
+            basis: '67%',
+            overflow: 'hidden'
           },
         ],
       },
       board: [],
       chart: [],
-      gallery: [
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'I',
+          type: 'A',
           readFrom: 'dustManageInfo',
           items: [
-            {
-              label: '',
-              value: '${totalNum}',
-              color: 'white',
-            },
             {
               label: '低风险',
-              value: '${dfxNum}',
-              color: 'lightblue',
+              value: 'dfxNum',
             },
             {
               label: '一般风险',
-              value: '${ybNum}',
-              color: 'lightblue',
+              value: 'ybNum',
             },
             {
               label: '较大风险',
-              value: '${jdNum}',
-              color: 'lightblue',
+              value: 'jdNum',
             },
             {
               label: '重大风险',
-              value: '${zdNum}',
-              color: 'lightblue',
+              value: 'zdNum',
             },
           ],
         },
+        { readFrom: 'dustManageInfo.sysList', },
       ],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [
-        {
-          type: 'E',
-          readFrom: 'dustManageInfo.sysList',
-          mapFromData: true,
-          items: [
-            {
-              title: '${sysNamme}',
-              contents: [
-                {
-                  label: '风险监测',
-                  value: '${warnLevel}',
-                  color: 'blue',
-                  info: '',
-                },
-                {
-                  label: '最高粉尘浓度',
-                  value: '${maxVal}',
-                  color: 'blue',
-                  info: '',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      preset: [],
     },
     showStyle: {
-      size: 'width:450px;height:550px;',
+      size: 'width:440px;height:570px;',
       version: '淡蓝色',
       position: 'top:60px;left:0;',
     },
   },
+  // {
+  //   deviceType: 'atomizing',
+  //   moduleName: '喷雾设备信息',
+  //   pageType: 'New_dust',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       readFrom: '',
+  //       selector: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //       slot: {
+  //         show: false,
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: {
+  //       direction: 'row',
+  //       items: [
+  //         {
+  //           name: 'table',
+  //           basis: '100%',
+  //         },
+  //       ],
+  //     },
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [
+  //       {
+  //         type: 'A',
+  //         columns: [
+  //           {
+  //             name: '设备名称',
+  //             prop: 'strinstallpos',
+  //           },
+  //           {
+  //             name: '排污状态',
+  //             prop: 'airStatus_str',
+  //           },
+  //           {
+  //             name: '应用场景',
+  //             prop: 'appScenes_str',
+  //           },
+  //           {
+  //             name: '喷雾状态',
+  //             prop: 'stateSpray_str',
+  //           },
+  //         ],
+  //         readFrom: 'atomizingArray',
+  //       },
+  //     ],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [],
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:280px;',
+  //     version: '淡蓝色',
+  //     position: 'top:620px;left:0;',
+  //   },
+  // },
   {
     deviceType: 'atomizing',
     moduleName: '喷雾设备信息',
@@ -134,7 +280,7 @@ export const testConfigNewDust: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'table',
+            name: 'table_new',
             basis: '100%',
           },
         ],
@@ -143,9 +289,12 @@ export const testConfigNewDust: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-      table: [
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'A',
+          readFrom: 'atomizingArray',
           columns: [
             {
               name: '设备名称',
@@ -164,17 +313,13 @@ export const testConfigNewDust: Config[] = [
               prop: 'stateSpray_str',
             },
           ],
-          readFrom: 'atomizingArray',
-        },
+        }
       ],
-      list: [],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:440px;height:280px;',
       version: '淡蓝色',
-      position: 'top:620px;left:0;',
+      position: 'top:640px;left:0;',
     },
   },
   {
@@ -235,11 +380,85 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:980px;height:300px;',
+      size: 'width:1040px;height:280px;',
       version: '淡蓝色',
-      position: 'bottom:8px;left:470px',
+      position: 'bottom:8px;left:440px',
     },
   },
+  //{
+  //  deviceType: 'atomObj',
+  //  moduleName: '智能喷雾降尘装置',
+  //  pageType: 'New_dust',
+  //  moduleData: {
+  //    header: {
+  //      show: false,
+  //      readFrom: '',
+  //      selector: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //      slot: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //    },
+  //    background: {
+  //      show: false,
+  //      type: 'video',
+  //      link: '',
+  //    },
+  //    layout: {
+  //      direction: 'row',
+  //      items: [
+  //        {
+  //          name: 'gallery',
+  //          basis: '100%',
+  //        },
+  //      ],
+  //    },
+  //    board: [],
+  //    chart: [],
+  //    gallery: [
+  //      {
+  //        type: 'E',
+  //        readFrom: 'atomObj',
+  //        items: [
+  //          {
+  //            label: '设备总数',
+  //            value: '${totalNum}',
+  //            color: 'blue',
+  //          },
+  //          {
+  //            label: '喷雾开启数',
+  //            value: '${atomOpenNum}',
+  //            color: 'blue',
+  //          },
+  //          {
+  //            label: '连网数量',
+  //            value: '${openNum}',
+  //            color: 'blue',
+  //          },
+  //          {
+  //            label: '断网数量',
+  //            value: '${breakNum}',
+  //            color: 'blue',
+  //          },
+  //        ],
+  //      },
+  //    ],
+  //    gallery_list: [],
+  //    table: [],
+  //    list: [],
+  //    complex_list: [],
+  //    preset: [],
+  //    to: 'http://10.248.210.154:8801',
+  //  },
+  //  showStyle: {
+  //    size: 'width:450px;height: 280px;',
+  //    version: '淡蓝色',
+  //    position: 'top:60px;right:0;',
+  //  },
+  //},
   {
     deviceType: 'atomObj',
     moduleName: '智能喷雾降尘装置',
@@ -266,46 +485,46 @@ export const testConfigNewDust: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'gallery',
+            name: 'gallery_new',
             basis: '100%',
           },
         ],
       },
       board: [],
       chart: [],
-      gallery: [
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'E',
+          type: 'B',
           readFrom: 'atomObj',
           items: [
             {
               label: '设备总数',
-              value: '${totalNum}',
-              color: 'blue',
+              value: 'totalNum',
+              iconName: 'sbzs-gallery'
             },
             {
               label: '喷雾开启数',
-              value: '${atomOpenNum}',
-              color: 'blue',
+              value: 'atomOpenNum',
+              iconName: 'lwsl-gallery'
             },
             {
               label: '连网数量',
-              value: '${openNum}',
-              color: 'blue',
+              value: 'openNum',
+              iconName: 'pwkqs-gallery'
             },
             {
               label: '断网数量',
-              value: '${breakNum}',
-              color: 'blue',
+              value: 'breakNum',
+              iconName: 'dwsl-gallery'
             },
           ],
         },
       ],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [],
       to: 'http://10.248.210.154:8801',
     },
     showStyle: {
@@ -337,19 +556,24 @@ export const testConfigNewDust: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'row',
+        direction: '',
         items: [
           {
-            name: 'board',
-            basis: '99%',
+            name: 'mc-new',
+            basis: '100%',
           },
         ],
       },
-      board: [
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'E',
           readFrom: '',
-          layout: 'label-top',
           items: [
             {
               label: '火焰长度',
@@ -366,13 +590,6 @@ export const testConfigNewDust: Config[] = [
           ],
         },
       ],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -406,7 +623,7 @@ export const testConfigNewDust: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'table',
+            name: 'table_new',
             basis: '100%',
           },
         ],
@@ -415,9 +632,11 @@ export const testConfigNewDust: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-      table: [
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
         {
-          type: 'A',
           readFrom: 'devGbsb',
           columns: [
             {
@@ -433,11 +652,8 @@ export const testConfigNewDust: Config[] = [
               prop: 'kind',
             },
           ],
-        },
+        }
       ],
-      list: [],
-      complex_list: [],
-      preset: [],
     },
     showStyle: {
       size: 'width:440px;height:280px;',

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

@@ -3775,35 +3775,35 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: false,
+        show: true,
         type: 'video',
         link: '/video/mainFan.mp4',
       },
       layout: {
         direction: 'column',
         items: [
-          {
-            name: 'qh_curve',
-            basis: '67%',
-          },
+          //{
+          //  name: 'qh_curve',
+          //  basis: '67%',
+          //},
           {
             name: 'board',
-            basis: '33%',
+            basis: '34%',
           },
         ],
       },
       board: [
         {
-          type: 'New',
+          type: 'Q',
           readFrom: 'readData',
-          layout: 'new-top',
+          layout: 'val-top',
           items: [
             {
               label: '风量(m³/min)',
               value: '${m3}',
             },
             {
-              label: '风压(Pa)',
+              label: '负压(Pa)',
               value: '${DataPa}',
               // trans: {
               //   '1': '${Fan1FreqHz}',
@@ -3824,17 +3824,101 @@ export const testConfigVentNew: Config[] = [
       complex_list: [],
       gallery_list: [],
       preset: [
+        //{
+        //  readFrom: '',
+        //  fan1Prop: ['flow_merge', 'fy_merge'],
+        //  fan2Prop: ['flow_merge', 'fy_merge'],
+        //},
+      ],
+    },
+    showStyle: {
+      size: 'width:440px;height:280px;',
+      version: '原版',
+      position: 'top:60px;left:0;',
+    },
+  },
+  {
+    deviceType: 'fanlocal',
+    moduleName: '局部通风机系统',
+    pageType: 'vent_new',
+    moduleData: {
+      header: {
+        show: true,
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+        slot: {
+          show: true,
+          value: '风机：${readData.Fan1StartStatus}',
+          trans: {
+            '1': '1#风机',
+            '0': '2#风机',
+          },
+        },
+      },
+      background: {
+        show: true,
+        type: 'video',
+        link: '/video/fanLocal.mp4',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '34%',
+          },
+          //{
+          //  name: 'chart',
+          //  basis: '100%',
+          //},
+        ],
+      },
+      board: [
         {
-          readFrom: '',
-          fan1Prop: ['flow_merge', 'fy_merge'],
-          fan2Prop: ['flow_merge', 'fy_merge'],
+          type: 'Q',
+          readFrom: 'readData',
+          layout: 'new1-top',
+          items: [
+            {
+              label: '风筒出口风量',
+              value: '${windQuantity1}',
+            },
+            {
+              label: '风机吸入风量',
+              value: '${windQuantity2}',
+            },
+            {
+              label: '百米漏风率(%)',
+              value: '${windQuantity1}',
+            },
+          ],
         },
       ],
+      list: [],
+      chart: [
+        //{
+        //  type: 'bar_cylinder_wide',
+        //  readFrom: '',
+        //  legend: { show: false },
+        //  xAxis: [{ show: true }],
+        //  yAxis: [{ show: true, name: '(m³/min)', position: 'left' }],
+        //  series: [{ readFrom: 'chartData', xprop: 'x', yprop: 'y', label: '风量' }],
+        //},
+      ],
+      table: [],
+      gallery: [],
+      complex_list: [],
+      gallery_list: [],
+      preset: [],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
     },
     showStyle: {
       size: 'width:440px;height:280px;',
       version: '原版',
-      position: 'top:60px;left:0;',
+      position: 'top:350px;left:0;',
     },
   },
   {
@@ -3855,17 +3939,17 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: false,
+        show: true,
         type: 'video',
         link: '/video/fanLocal.webm',
       },
       layout: {
         direction: 'row',
         items: [
-          {
-            name: 'device_alarm',
-            basis: '100%',
-          },
+          //{
+          //  name: 'device_alarm',
+          //  basis: '100%',
+          //},
         ],
       },
       board: [],
@@ -3876,65 +3960,143 @@ export const testConfigVentNew: Config[] = [
       complex_list: [],
       gallery_list: [],
       preset: [
-        {
-          readFrom: 'device',
-        },
+        //{
+        //  readFrom: 'device',
+        //},
       ],
       mock: {
-        device: {
-          fanmain: {
-            maxLevel: 0,
-            name: '主扇',
-            totalCount: 0,
-            count: 0,
-            netstatus: 0,
-          },
-          fanlocal: {
-            maxLevel: 0,
-            name: '局扇',
-            totalCount: 0,
-            count: 0,
-            netstatus: 0,
-          },
-          gate: {
-            maxLevel: 0,
-            name: '风门',
-            totalCount: 0,
-            count: 0,
-            netstatus: 0,
-          },
-          window: {
-            maxLevel: 0,
-            name: '风窗',
-            totalCount: 0,
-            count: 0,
-            netstatus: 0,
-          },
-        },
+        //device: {
+        //  fanmain: {
+        //    maxLevel: 0,
+        //    name: '主扇',
+        //    totalCount: 0,
+        //    count: 0,
+        //    netstatus: 0,
+        //  },
+        //  fanlocal: {
+        //    maxLevel: 0,
+        //    name: '局扇',
+        //    totalCount: 0,
+        //    count: 0,
+        //    netstatus: 0,
+        //  },
+        //  gate: {
+        //    maxLevel: 0,
+        //    name: '风门',
+        //    totalCount: 0,
+        //    count: 0,
+        //    netstatus: 0,
+        //  },
+        //  window: {
+        //    maxLevel: 0,
+        //    name: '风窗',
+        //    totalCount: 0,
+        //    count: 0,
+        //    netstatus: 0,
+        //  },
+        //},
       },
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
     },
     showStyle: {
       size: 'width:440px;height:280px;',
       version: '原版',
-      position: 'top:350px;left:0;',
+      position: 'top:640px;left:0;',
     },
   },
+  //{
+  //  deviceType: 'warn',
+  //  moduleName: '预警监测',
+  //  pageType: 'vent_new',
+  //  moduleData: {
+  //    header: {
+  //      show: true,
+  //      readFrom: '',
+  //      selector: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //      slot: {
+  //        show: true,
+  //        value: '网络异常：${warn[0].netstatus.val}',
+  //      },
+  //    },
+  //    background: {
+  //      show: false,
+  //      type: 'video',
+  //      link: '',
+  //    },
+  //    layout: {
+  //      direction: 'row',
+  //      items: [
+  //        {
+  //          name: 'list',
+  //          basis: '100%',
+  //        },
+  //      ],
+  //    },
+  //    board: [],
+  //    list: [
+  //      {
+  //        type: 'timelineNew',
+  //        readFrom: 'warn[0]',
+  //        items: [
+  //          {
+  //            label: '重大风险预警',
+  //            value: '${red.val}',
+  //            info: '',
+  //            color: 'red',
+  //          },
+  //          {
+  //            label: '较大风险预警',
+  //            value: '${orange.val}',
+  //            info: '',
+  //            color: 'orange',
+  //          },
+  //          {
+  //            label: '一般风险预警',
+  //            value: '${yellow.val}',
+  //            info: '',
+  //            color: 'yellow',
+  //          },
+  //          {
+  //            label: '低风险预警',
+  //            value: '${blue.val}',
+  //            info: '',
+  //            color: 'blue',
+  //          },
+  //        ],
+  //      },
+  //    ],
+  //    preset: [],
+  //    table: [],
+  //    gallery: [],
+  //    chart: [],
+  //    gallery_list: [],
+  //    complex_list: [],
+  //    to: '/monitorChannel/monitor-alarm-home',
+  //  },
+  //  showStyle: {
+  //    size: 'width:440px;height:280px;',
+  //    version: '新版',
+  //    position: 'top:640px;left:0;',
+  //  },
+  //},
   {
     deviceType: 'warn',
     moduleName: '预警监测',
     pageType: 'vent_new',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: false,
           value: '',
         },
         slot: {
-          show: true,
-          value: '网络异常：${warn[0].netstatus.val}',
+          show: false,
+          value: '',
         },
       },
       background: {
@@ -3943,48 +4105,21 @@ export const testConfigVentNew: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'row',
+        direction: 'column',
         items: [
           {
-            name: 'list',
+            name: 'early_warn_monitor',
             basis: '100%',
           },
         ],
       },
       board: [],
-      list: [
+      list: [],
+      preset: [
         {
-          type: 'timelineNew',
           readFrom: 'warn[0]',
-          items: [
-            {
-              label: '重大风险预警',
-              value: '${red.val}',
-              info: '',
-              color: 'red',
-            },
-            {
-              label: '较大风险预警',
-              value: '${orange.val}',
-              info: '',
-              color: 'orange',
-            },
-            {
-              label: '一般风险预警',
-              value: '${yellow.val}',
-              info: '',
-              color: 'yellow',
-            },
-            {
-              label: '低风险预警',
-              value: '${blue.val}',
-              info: '',
-              color: 'blue',
-            },
-          ],
-        },
+        }
       ],
-      preset: [],
       table: [],
       gallery: [],
       chart: [],
@@ -3995,7 +4130,7 @@ export const testConfigVentNew: Config[] = [
     showStyle: {
       size: 'width:440px;height:280px;',
       version: '新版',
-      position: 'top:640px;left:0;',
+      position: 'top:640px;right:0;',
     },
   },
   {
@@ -4061,95 +4196,80 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect',
     },
     showStyle: {
-      size: 'width:1000px;height:260px;',
+      size: 'width:1000px;height:280px;',
       version: '原版',
       position: 'bottom:8px;left:460px;',
     },
   },
-  {
-    deviceType: 'fanlocal',
-    moduleName: '局部通风机系统',
-    pageType: 'vent_new',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${strinstallpos}',
-        },
-        slot: {
-          show: true,
-          value: '风机：${readData.Fan1StartStatus}',
-          trans: {
-            '1': '1#风机',
-            '0': '2#风机',
-          },
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '/video/fanLocal.mp4',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          // {
-          //   name: 'board',
-          //   basis: '25%',
-          // },
-          {
-            name: 'chart',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [
-        {
-          type: 'New1',
-          readFrom: 'readData',
-          layout: 'new1-top',
-          items: [
-            {
-              label: '风筒出口风量',
-              value: '${windQuantity1}',
-            },
-            {
-              label: '风机吸入风量',
-              value: '${windQuantity2}',
-            },
-            {
-              label: '百米漏风率(%)',
-              value: '${windQuantity1}',
-            },
-          ],
-        },
-      ],
-      list: [],
-      chart: [
-        {
-          type: 'bar_cylinder_wide',
-          readFrom: '',
-          legend: { show: false },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '(m³/min)', position: 'left' }],
-          series: [{ readFrom: 'chartData', xprop: 'x', yprop: 'y', label: '风量' }],
-        },
-      ],
-      table: [],
-      gallery: [],
-      complex_list: [],
-      gallery_list: [],
-      preset: [],
-      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
-    },
-    showStyle: {
-      size: 'width:440px;height:265px;',
-      version: '原版',
-      position: 'top:60px;right:0;',
-    },
-  },
+
+  //{
+  //  deviceType: 'sys_majorpath',
+  //  moduleName: '关键通风路线',
+  //  pageType: 'vent_new',
+  //  moduleData: {
+  //    header: {
+  //      show: true,
+  //      readFrom: '',
+  //      selector: {
+  //        show: true,
+  //        value: '${devicePos}',
+  //      },
+  //      slot: {
+  //        show: false,
+  //        value: '',
+  //      },
+  //    },
+  //    background: {
+  //      show: true,
+  //      type: 'image',
+  //      link: '/src/assets/images/vent/homeNew/gjBG.png',
+  //    },
+  //    layout: {
+  //      direction: 'column',
+  //      items: [
+  //        {
+  //          name: 'board',
+  //          basis: '100%',
+  //          pageType: 'vent_New',
+  //        },
+  //      ],
+  //    },
+  //    board: [
+  //      {
+  //        type: 'New2',
+  //        readFrom: 'readData',
+  //        layout: 'new2-top',
+  //        items: [
+  //          {
+  //            label: '风量(m³/min)',
+  //            value: '${retM3_merge.value}',
+  //          },
+  //          {
+  //            label: '矿井阻力(Pa)',
+  //            value: '${fy_merge.value}',
+  //          },
+  //          {
+  //            label: '等积孔',
+  //            value: '${dengjikong.value}',
+  //          },
+  //        ],
+  //      },
+  //    ],
+  //    complex_list: [],
+  //    gallery: [],
+  //    list: [],
+  //    table: [],
+  //    chart: [],
+  //    gallery_list: [],
+  //    preset: [],
+  //    to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
+  //  },
+  //  showStyle: {
+  //    size: 'width:440px;height:310px;',
+  //    version: '新版',
+  //    position: 'top:335px;right:0;',
+  //  },
+  //},
   {
     deviceType: 'sys_majorpath',
     moduleName: '关键通风路线',
@@ -4168,54 +4288,106 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: true,
+        show: false,
         type: 'image',
-        link: '/src/assets/images/vent/homeNew/gjBG.png',
+        link: '/src/assets/images/vent/homeNew/2-1.png',
       },
       layout: {
-        direction: 'column',
+        direction: 'row',
         items: [
           {
-            name: 'board',
+            name: 'vent_route',
             basis: '100%',
-            pageType: 'vent_New',
           },
         ],
       },
-      board: [
-        {
-          type: 'New2',
-          readFrom: 'readData',
-          layout: 'new2-top',
-          items: [
-            {
-              label: '风量(m³/min)',
-              value: '${retM3_merge.value}',
-            },
-            {
-              label: '矿井阻力(Pa)',
-              value: '${fy_merge.value}',
-            },
-            {
-              label: '等积孔',
-              value: '${dengjikong.value}',
-            },
-          ],
-        },
-      ],
+      board: [],
       complex_list: [],
       gallery: [],
       list: [],
       table: [],
       chart: [],
       gallery_list: [],
-      preset: [],
+      preset: [
+        {
+          readFrom: 'readData',
+          echartOption: {
+            // 设置提示框的显示属性
+            tooltip: {
+              show: false
+            },
+            // 设置图表的标题
+            title: [{ // 圆环中间内容
+              text: '三区',
+              left: "36%",
+              top: "40%",
+              textStyle: {
+                color: "#fff",
+                fontSize: 18,
+                align: "center"
+              },
+            }
+            ],
+            type: 'pie',
+            // 设置饼图的半径
+            radius: ['48%', '74%'],
+            // 设置饼图的中心位置
+            center: ['50%', '50%'],
+            // 设置标签的显示属性
+            label: {
+              show: false
+            },
+            // 设置图元的边框颜色
+            borderColor: 'rgba(27, 47, 63, 0.1)',
+            // 设置图元的边框宽度
+            borderWidth: 2,
+            colorStops: [
+              [{
+                offset: 0,
+                color: 'rgba(177, 242, 255)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(97, 228, 255)' // 100% 处的颜色
+              }
+              ],
+              [{
+                offset: 0,
+                color: 'rgba(215, 180, 255)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(145, 101, 255)' // 100% 处的颜色
+              }
+              ],
+              [{
+                offset: 0,
+                color: 'rgba(207, 170, 255)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(133, 87, 255)' // 100% 处的颜色
+              }
+              ],
+              [{
+                offset: 0,
+                color: 'rgba(166, 255, 229)' // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: 'rgba(85, 255, 171)' // 100% 处的颜色
+              }
+              ],
+            ]
+          },
+        }
+      ],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:440px;height:310px;',
+      size: 'width:440px;height:280px;',
       version: '新版',
-      position: 'top:335px;right:0;',
+      position: 'top:60px;right:0;',
     },
   },
   {
@@ -4243,19 +4415,19 @@ export const testConfigVentNew: Config[] = [
       layout: {
         direction: 'column',
         items: [
+          {
+            name: 'board',
+            basis: '28%',
+          },
           {
             name: 'chart',
-            basis: '100%',
+            basis: '72%',
           },
-          // {
-          //   name: 'board',
-          //   basis: '25%',
-          // },
         ],
       },
       board: [
         {
-          type: 'New3',
+          type: 'New4',
           readFrom: '',
           layout: 'new3-top',
           items: [
@@ -4276,7 +4448,7 @@ export const testConfigVentNew: Config[] = [
       gallery: [],
       chart: [
         {
-          type: 'line_area',
+          type: 'line',
           readFrom: '',
           legend: { show: false },
           xAxis: [{ show: true }],
@@ -4292,9 +4464,9 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_surface_caimei&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:440px;height:270px;',
+      size: 'width:440px;height:280px;',
       version: '新版',
-      position: 'top:650px;right:0;',
+      position: 'top:350px;right:0;',
     },
   },
 ];
@@ -6137,7 +6309,6 @@ export const testConfigElectro: Config[] = [
     },
   },
 ];
-
 export const testConfigVent182: Config[] = [
   {
     deviceType: 'fanmain',

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

@@ -2,7 +2,7 @@
   <div class="car-damage">
     <div class="search-area">
       <a-row>
-        <a-col :span="4">
+        <a-col :span="5">
           <div class="area-item">
             <div class="item-text">风门状态：</div>
             <a-select ref="select" v-model:value="type" style="width: 240px" placeholder="请选择风门状态">
@@ -11,7 +11,25 @@
             </a-select>
           </div>
         </a-col>
-        <a-col :span="4">
+        <a-col :span="5">
+          <div class="area-item">
+            <div class="item-text">开始时间：</div>
+            <!-- <a-select ref="select" v-model:value="type" style="width: 240px" placeholder="请选择风门状态">
+              <a-select-option v-for="(item, index) in typeList" :key="item.value" :value="item.value">{{
+                item.label }}</a-select-option>
+            </a-select> -->
+            <a-date-picker v-model:value="startTime" style="width:240px" show-time
+              valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" />
+          </div>
+        </a-col>
+          <a-col :span="5">
+          <div class="area-item">
+            <div class="item-text">结束时间：</div>
+            <a-date-picker v-model:value="endTime" style="width:240px" show-time
+                            valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" />
+          </div>
+        </a-col>
+        <a-col :span="5">
           <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
             @click="getSearch">查询</a-button>
           <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
@@ -27,7 +45,8 @@
             <div>{{ text ? text : '-' }}</div>
           </template>
           <template v-if="column.dataIndex == 'type'">
-            <div>{{ text == '1' ? '风门损坏' : '正常开闭' }}</div>
+            <div>{{ text == '0' ? '正常开闭' : text == '1' ? '风门常开' : text == '2' ? '风门关闭不严' : text == '3' ? '疑似车辆撞击' : '--' }}
+            </div>
           </template>
           <template v-if="column.dataIndex == 'photoC'">
             <img :src="text" alt="" class="photo_zp" @click="preViewImg(text)">
@@ -58,6 +77,8 @@ let props = defineProps({
 })
 
 let type = ref('0')
+let startTime=ref('')
+let endTime=ref('')
 let dataSource = ref<any[]>([])
 //分页参数配置
 let pagination = reactive({
@@ -76,7 +97,7 @@ let imgSrc = ref('')//抓拍图像路径
 
 //查询列表
 async function getCarList() {
-  let res = await props.deviceListApi({ gateIds: props.gateId, type: type.value, pageNo: pagination.current, pageSize: pagination.pageSize })
+  let res = await props.deviceListApi({ gateIds: props.gateId, type: type.value,startTime:startTime.value,endTime:endTime.value,  pageNo: pagination.current, pageSize: pagination.pageSize })
   const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
   dataSource.value = res.records.map(el => {
     return {
@@ -99,6 +120,8 @@ function getSearch() {
 //重置
 function getReset() {
   type.value = '0'
+  startTime.value=''
+  endTime.value=''
   pagination.current = 1
   getCarList()
 }

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

@@ -122,7 +122,7 @@ export const faultColumns: BasicColumn[] = [
 //风门状态
 export let typeList:any[] =[
   { label: '正常开闭', value: '0' },
-  { label: '风门损坏', value: '1' }
+  { label: '无法关闭', value: '1' }
 ]
 //车辆损坏排查
 export const carColumns: BasicColumn[] = [
@@ -147,7 +147,7 @@ export const carColumns: BasicColumn[] = [
     align: 'center'
   },
   {
-    title: '抓拍图像路径',
+    title: '抓拍图像',
     dataIndex: 'photoC',
     align: 'center'
   },

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

@@ -13,726 +13,726 @@
       :alarm-history-config="{}"
       strtype="sys_nitrogen"
     >
-      <template #default="{ monitorData }">
-        <div id="nitrogen2D" class="w-full h-full flex justify-center items-center overflow-hidden">
+      <template #default="{ monitorActive }">
+        <div v-show="monitorActive" id="nitrogen2D" class="w-full h-full flex justify-center items-center overflow-hidden">
           <!-- <a-spin :spinning="loading" /> -->
           <!-- <div id="sprayCSS3D" v-show="!loading" style="width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none"> </div> -->
           <!-- <div class="nitrogen2D"></div> -->
-          <modelTip :statusData="readData"></modelTip>
+          <ModelTip :statusData="readData" />
         </div>
       </template>
     </BasicMonitoring>
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
-import { useInitConfigs, useInitPage } from '../../home/configurable/hooks/useInit';
-import { nitrogenConfigs } from './nitrogen.data';
-import modelTip from './model-tip.vue';
-import { list } from './nitorgen.api';
+  import { onMounted, ref } from 'vue';
+  import BasicMonitoring from '/@/components/vent/BasicMonitoring.vue';
+  import { useInitConfigs, useInitPage } from '../../home/configurable/hooks/useInit';
+  // import { nitrogenConfigs } from './nitrogen.data';
+  import ModelTip from './model-tip.vue';
+  import { list } from './nitorgen.api';
 
-const loading = ref(false);
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData } = useInitPage('智能注氮管控系统');
-const readData = ref({});
-function refresh() {
-  // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-  fetchConfigs('nitrogen').then(() => {
-    // configs.value = nitrogenConfigs;
-    updateEnhancedConfigs(configs.value);
-    getDataSource();
-    // list({ devicetype: 'nitrogen', pagetype: 'normal' }).then((res) => {
-    //   const res1 = {
-    //     cmd: 'monitordata',
-    //     msgTxt: [
-    //       {
-    //         datalist: [
-    //           {
-    //             msgType: null,
-    //             deviceID: '2014560252506329090',
-    //             strname: '制氮机',
-    //             strinstallpos: '制氮机',
-    //             fsectarea: 'null',
-    //             planedVa: null,
-    //             regulation: null,
-    //             stationname: '制氮机1#PLC',
-    //             stationtype: 'plc',
-    //             deviceType: 'nitrogen_auto',
-    //             typeName: '制氮机',
-    //             netStatus: 1,
-    //             warnFlag: 0,
-    //             warnLevel: 0,
-    //             warnLevel_str: '正常',
-    //             syswarnLevel: null,
+  // const loading = ref(false);
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { updateEnhancedConfigs } = useInitPage('智能注氮管控系统');
+  const readData = ref({});
+  function refresh() {
+    // fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
+    fetchConfigs('nitrogen').then(() => {
+      // configs.value = nitrogenConfigs;
+      updateEnhancedConfigs(configs.value);
+      getDataSource();
+      // list({ devicetype: 'nitrogen', pagetype: 'normal' }).then((res) => {
+      //   const res1 = {
+      //     cmd: 'monitordata',
+      //     msgTxt: [
+      //       {
+      //         datalist: [
+      //           {
+      //             msgType: null,
+      //             deviceID: '2014560252506329090',
+      //             strname: '制氮机',
+      //             strinstallpos: '制氮机',
+      //             fsectarea: 'null',
+      //             planedVa: null,
+      //             regulation: null,
+      //             stationname: '制氮机1#PLC',
+      //             stationtype: 'plc',
+      //             deviceType: 'nitrogen_auto',
+      //             typeName: '制氮机',
+      //             netStatus: 1,
+      //             warnFlag: 0,
+      //             warnLevel: 0,
+      //             warnLevel_str: '正常',
+      //             syswarnLevel: null,
 
-    //             syswarnLevel_str: null,
+      //             syswarnLevel_str: null,
 
-    //             syswarnLevel_des: null,
+      //             syswarnLevel_des: null,
 
-    //             warnTime: null,
+      //             warnTime: null,
 
-    //             readTime: '2026-02-09 10:27:25',
+      //             readTime: '2026-02-09 10:27:25',
 
-    //             warnDes: '',
+      //             warnDes: '',
 
-    //             frontGateOpenCtrl: null,
+      //             frontGateOpenCtrl: null,
 
-    //             rearGateOpenCtrl: null,
+      //             rearGateOpenCtrl: null,
 
-    //             readData: {
-    //               Fan2ZdjJT: '0',
+      //             readData: {
+      //               Fan2ZdjJT: '0',
 
-    //               Fan1LgqJcqGz: '0',
+      //               Fan1LgqJcqGz: '0',
 
-    //               Fan2jqwd: '27.98',
+      //               Fan2jqwd: '27.98',
 
-    //               Fan2GdWdGGz: '0',
+      //               Fan2GdWdGGz: '0',
 
-    //               Fan1GdWdGGz: '0',
+      //               Fan1GdWdGGz: '0',
 
-    //               Fan2dqyl: '1.04',
+      //               Fan2dqyl: '1.04',
 
-    //               Fan2tjf: '0.00',
+      //               Fan2tjf: '0.00',
 
-    //               Fan1SwjQx: '1',
+      //               Fan1SwjQx: '1',
 
-    //               Fan1JrqJcqGz: '0',
+      //               Fan1JrqJcqGz: '0',
 
-    //               Fan2yqtyl: '1.14',
+      //               Fan2yqtyl: '1.14',
 
-    //               Fan2hjwd: '17.30',
+      //               Fan2hjwd: '17.30',
 
-    //               Fan1JxgUab: '10.37',
+      //               Fan1JxgUab: '10.37',
 
-    //               Fan1LnfsJcqGz: '0',
+      //               Fan1LnfsJcqGz: '0',
 
-    //               Fan2KyjStatus_str: '运行',
+      //               Fan2KyjStatus_str: '运行',
 
-    //               Fan2JqWdGGz: '0',
+      //               Fan2JqWdGGz: '0',
 
-    //               Fan1JqWdGGz: '0',
+      //               Fan1JqWdGGz: '0',
 
-    //               Fan1Lgjpqyl: '0.71',
+      //               Fan1Lgjpqyl: '0.71',
 
-    //               Fan1jrqTemp: '47.70',
+      //               Fan1jrqTemp: '47.70',
 
-    //               Fan1CxgCos: '0.00',
+      //               Fan1CxgCos: '0.00',
 
-    //               Fan1gdyl: '0.69',
+      //               Fan1gdyl: '0.69',
 
-    //               Fan1CxgUca: '10.34',
+      //               Fan1CxgUca: '10.34',
 
-    //               Fan2KyjStatus: '1',
+      //               Fan2KyjStatus: '1',
 
-    //               Fan2JCxgp: '420.75',
+      //               Fan2JCxgp: '420.75',
 
-    //               Fan1XxCw: '0',
+      //               Fan1XxCw: '0',
 
-    //               Fan1Yxzt: '0',
+      //               Fan1Yxzt: '0',
 
-    //               Fan1CxgUbc: '10.34',
+      //               Fan1CxgUbc: '10.34',
 
-    //               Fan2CxgUab: '10.08',
+      //               Fan2CxgUab: '10.08',
 
-    //               Fan2Cxgp: '417.47',
+      //               Fan2Cxgp: '417.47',
 
-    //               Fan1GdYlGGz: '0',
+      //               Fan1GdYlGGz: '0',
 
-    //               Fan1yxsj: '0.00',
+      //               Fan1yxsj: '0.00',
 
-    //               Fan2yqtTemp: '78.90',
+      //               Fan2yqtTemp: '78.90',
 
-    //               Fan2kyjTemp: '1.12',
+      //               Fan2kyjTemp: '1.12',
 
-    //               Fan1xnyq: '-0.04',
+      //               Fan1xnyq: '-0.04',
 
-    //               Fan2JxgLc: '27.97',
+      //               Fan2JxgLc: '27.97',
 
-    //               Fan2JxgLb: '27.96',
+      //               Fan2JxgLb: '27.96',
 
-    //               Fan1pqwd: '23.43',
+      //               Fan1pqwd: '23.43',
 
-    //               Fan1JCxgF: '0.81',
+      //               Fan1JCxgF: '0.81',
 
-    //               Fan2dqwd: '38.06',
+      //               Fan2dqwd: '38.06',
 
-    //               Fan1JCxgQ: '125.71',
+      //               Fan1JCxgQ: '125.71',
 
-    //               Fan1jqyl: '0.72',
+      //               Fan1jqyl: '0.72',
 
-    //               Fan2CxgUb: '5.80',
+      //               Fan2CxgUb: '5.80',
 
-    //               Fan2Yxzt_str: '运行',
+      //               Fan2Yxzt_str: '运行',
 
-    //               Fan2JCxgQ: '124.16',
+      //               Fan2JCxgQ: '124.16',
 
-    //               Fan2CxgUc: '5.81',
+      //               Fan2CxgUc: '5.81',
 
-    //               Fan2dqnd: '97.48',
+      //               Fan2dqnd: '97.48',
 
-    //               Fan2JrqWdGGz: '0',
+      //               Fan2JrqWdGGz: '0',
 
-    //               Fan1CxgUab: '10.34',
+      //               Fan1CxgUab: '10.34',
 
-    //               Fan2CxgF: '0.00',
+      //               Fan2CxgF: '0.00',
 
-    //               Fan2JrqJcqGz: '0',
+      //               Fan2JrqJcqGz: '0',
 
-    //               Fan2CxgQ: '217.04',
+      //               Fan2CxgQ: '217.04',
 
-    //               Fan2JxgLa: '28.29',
+      //               Fan2JxgLa: '28.29',
 
-    //               Fan1KyjStatus_str: '停止',
+      //               Fan1KyjStatus_str: '停止',
 
-    //               Fan1lxyc: '0.01',
+      //               Fan1lxyc: '0.01',
 
-    //               Fan1Lntemp: '10.70',
+      //               Fan1Lntemp: '10.70',
 
-    //               Fan1zyyl: '0.00',
+      //               Fan1zyyl: '0.00',
 
-    //               Fan2kyjdl: '0.00',
+      //               Fan2kyjdl: '0.00',
 
-    //               Fan1ll: '1226.02',
+      //               Fan1ll: '1226.02',
 
-    //               Fan2JCxgF: '0.86',
+      //               Fan2JCxgF: '0.86',
 
-    //               Fan2Lntemp: '40.80',
+      //               Fan2Lntemp: '40.80',
 
-    //               Fan1JCxgp: '351.93',
+      //               Fan1JCxgp: '351.93',
 
-    //               Fan1gdwd: '46.09',
+      //               Fan1gdwd: '46.09',
 
-    //               Fan2CxgUa: '5.82',
+      //               Fan2CxgUa: '5.82',
 
-    //               Fan2JxgUb: '5.80',
+      //               Fan2JxgUb: '5.80',
 
-    //               Fan1ljll: '35308516.00',
+      //               Fan1ljll: '35308516.00',
 
-    //               Fan2JtZgz: '0',
+      //               Fan2JtZgz: '0',
 
-    //               Fan2JxgUa: '5.80',
+      //               Fan2JxgUa: '5.80',
 
-    //               Fan2CxgLa: '28.36',
+      //               Fan2CxgLa: '28.36',
 
-    //               Fan2CxgLb: '24.36',
+      //               Fan2CxgLb: '24.36',
 
-    //               Fan2CxgLc: '28.24',
+      //               Fan2CxgLc: '28.24',
 
-    //               Fan1ZdjJT: '0',
+      //               Fan1ZdjJT: '0',
 
-    //               Fan2JxgUc: '5.81',
+      //               Fan2JxgUc: '5.81',
 
-    //               Fan1ckyl: '0.72',
+      //               Fan1ckyl: '0.72',
 
-    //               Fan2GdYlGGz: '0',
+      //               Fan2GdYlGGz: '0',
 
-    //               Fan1BrJcqGz: '0',
+      //               Fan1BrJcqGz: '0',
 
-    //               sign: '0',
+      //               sign: '0',
 
-    //               Fan1hjwd: '11.03',
+      //               Fan1hjwd: '11.03',
 
-    //               Fan1Cxgp: '0.00',
+      //               Fan1Cxgp: '0.00',
 
-    //               Fan1JrqWdGGz: '0',
+      //               Fan1JrqWdGGz: '0',
 
-    //               Fan2OHigh: '0',
+      //               Fan2OHigh: '0',
 
-    //               Fan2JxgUbc: '10.04',
+      //               Fan2JxgUbc: '10.04',
 
-    //               Fan1ZfTepm: '16.70',
+      //               Fan1ZfTepm: '16.70',
 
-    //               Fan1JxgUb: '5.98',
+      //               Fan1JxgUb: '5.98',
 
-    //               Fan1JxgUc: '5.97',
+      //               Fan1JxgUc: '5.97',
 
-    //               Fan1JxgUa: '5.99',
+      //               Fan1JxgUa: '5.99',
 
-    //               Fan1JtZgz: '0',
+      //               Fan1JtZgz: '0',
 
-    //               Fan1jqwd: '25.60',
+      //               Fan1jqwd: '25.60',
 
-    //               Fan1dqyl: '0.65',
+      //               Fan1dqyl: '0.65',
 
-    //               Fan1Yxzt_str: '停止',
+      //               Fan1Yxzt_str: '停止',
 
-    //               Fan2JxgCos: '0.00',
+      //               Fan2JxgCos: '0.00',
 
-    //               Fan2ll: '1279.52',
+      //               Fan2ll: '1279.52',
 
-    //               Fan1KyjStatus: '0',
+      //               Fan1KyjStatus: '0',
 
-    //               Fan2yxsj: '0.00',
+      //               Fan2yxsj: '0.00',
 
-    //               Fan2JxgUca: '10.06',
+      //               Fan2JxgUca: '10.06',
 
-    //               Fan2Yxzt: '1',
+      //               Fan2Yxzt: '1',
 
-    //               Fan2BrJcqGz: '0',
+      //               Fan2BrJcqGz: '0',
 
-    //               Fan1CxgUc: '5.96',
+      //               Fan1CxgUc: '5.96',
 
-    //               Fan1CxgUb: '5.96',
+      //               Fan1CxgUb: '5.96',
 
-    //               Fan1CxgUa: '5.98',
+      //               Fan1CxgUa: '5.98',
 
-    //               Fan2gdyl: '1.08',
+      //               Fan2gdyl: '1.08',
 
-    //               Fan1LgjGyBh: '0',
+      //               Fan1LgjGyBh: '0',
 
-    //               Fan2XxCw: '0',
+      //               Fan2XxCw: '0',
 
-    //               Fan1OHigh: '0',
+      //               Fan1OHigh: '0',
 
-    //               Fan1kyjTemp: '0.72',
+      //               Fan1kyjTemp: '0.72',
 
-    //               Fan2lxyc: '0.01',
+      //               Fan2lxyc: '0.01',
 
-    //               Fan2LgqJcqGz: '0',
+      //               Fan2LgqJcqGz: '0',
 
-    //               Fan1dqnd: '0.00',
+      //               Fan1dqnd: '0.00',
 
-    //               Fan1LgjZhGz: '0',
+      //               Fan1LgjZhGz: '0',
 
-    //               Fan1kyjdl: '0.00',
+      //               Fan1kyjdl: '0.00',
 
-    //               Fan1JxgCos: '0.00',
+      //               Fan1JxgCos: '0.00',
 
-    //               Fan2zyyl: '0.66',
+      //               Fan2zyyl: '0.66',
 
-    //               Fan2LgjZhGz: '0',
+      //               Fan2LgjZhGz: '0',
 
-    //               Fan2CxgCos: '0.89',
+      //               Fan2CxgCos: '0.89',
 
-    //               Fan2jqyl: '1.12',
+      //               Fan2jqyl: '1.12',
 
-    //               Fan1CxgLc: '0.00',
+      //               Fan1CxgLc: '0.00',
 
-    //               Fan1CxgLb: '0.00',
+      //               Fan1CxgLb: '0.00',
 
-    //               Fan2xnyq: '119.36',
+      //               Fan2xnyq: '119.36',
 
-    //               Fan1CxgLa: '0.00',
+      //               Fan1CxgLa: '0.00',
 
-    //               Fan2pqwd: '20.23',
+      //               Fan2pqwd: '20.23',
 
-    //               Fan2CxgUbc: '10.05',
+      //               Fan2CxgUbc: '10.05',
 
-    //               Fan2LgjDyBh: '0',
+      //               Fan2LgjDyBh: '0',
 
-    //               Fan1dqwd: '35.07',
+      //               Fan1dqwd: '35.07',
 
-    //               Fan1LgjDyBh: '0',
+      //               Fan1LgjDyBh: '0',
 
-    //               Fan1JxgUca: '10.35',
+      //               Fan1JxgUca: '10.35',
 
-    //               Fan1yqtyl: '0.00',
+      //               Fan1yqtyl: '0.00',
 
-    //               Fan2jrqTemp: '51.50',
+      //               Fan2jrqTemp: '51.50',
 
-    //               Fan2Lgjpqyl: '1.11',
+      //               Fan2Lgjpqyl: '1.11',
 
-    //               Fan1CxgF: '0.00',
+      //               Fan1CxgF: '0.00',
 
-    //               Fan1SwjQx_str: '打开',
+      //               Fan1SwjQx_str: '打开',
 
-    //               Fan2ckyl: '1.12',
+      //               Fan2ckyl: '1.12',
 
-    //               Fan2ljll: '13907482.00',
+      //               Fan2ljll: '13907482.00',
 
-    //               tTime: '2026-02-09 10:27:23',
+      //               tTime: '2026-02-09 10:27:23',
 
-    //               Fan1CxgQ: '0.00',
+      //               Fan1CxgQ: '0.00',
 
-    //               Fan1JxgLc: '24.02',
+      //               Fan1JxgLc: '24.02',
 
-    //               Fan2ZfTepm: '6.10',
+      //               Fan2ZfTepm: '6.10',
 
-    //               Fan1JxgLa: '24.09',
+      //               Fan1JxgLa: '24.09',
 
-    //               Fan1JxgLb: '24.16',
+      //               Fan1JxgLb: '24.16',
 
-    //               Fan2LnfsJcqGz: '0',
+      //               Fan2LnfsJcqGz: '0',
 
-    //               Fan2JxgUab: '10.04',
+      //               Fan2JxgUab: '10.04',
 
-    //               Fan1tjf: '-0.05',
+      //               Fan1tjf: '-0.05',
 
-    //               Fan2LgjGyBh: '0',
+      //               Fan2LgjGyBh: '0',
 
-    //               Fan2CxgUca: '10.07',
+      //               Fan2CxgUca: '10.07',
 
-    //               isRun: '-2',
+      //               isRun: '-2',
 
-    //               Fan1yqtTemp: '11.20',
+      //               Fan1yqtTemp: '11.20',
 
-    //               Fan1JxgUbc: '10.36',
+      //               Fan1JxgUbc: '10.36',
 
-    //               Fan2gdwd: '46.22',
-    //             },
+      //               Fan2gdwd: '46.22',
+      //             },
 
-    //             readDataDes: null,
+      //             readDataDes: null,
 
-    //             limits: null,
+      //             limits: null,
 
-    //             summaryHour: [],
+      //             summaryHour: [],
 
-    //             summaryDay: [],
+      //             summaryDay: [],
 
-    //             history: [],
+      //             history: [],
 
-    //             dayhistory: [],
+      //             dayhistory: [],
 
-    //             totalInfo: null,
+      //             totalInfo: null,
 
-    //             sign: null,
+      //             sign: null,
 
-    //             cameras: [],
+      //             cameras: [],
 
-    //             links: [],
+      //             links: [],
 
-    //             avgParam: {},
+      //             avgParam: {},
 
-    //             other1: null,
+      //             other1: null,
 
-    //             other2: null,
+      //             other2: null,
 
-    //             other3: null,
+      //             other3: null,
 
-    //             remarkInfo: null,
+      //             remarkInfo: null,
 
-    //             linkInfo: null,
+      //             linkInfo: null,
 
-    //             addrIndex: null,
+      //             addrIndex: null,
 
-    //             warnLogNotOkCount: 0,
+      //             warnLogNotOkCount: 0,
 
-    //             otherInfo: null,
+      //             otherInfo: null,
 
-    //             orderNum: 0,
+      //             orderNum: 0,
 
-    //             testFlag: 0,
+      //             testFlag: 0,
 
-    //             strRemark: null,
+      //             strRemark: null,
 
-    //             isAutosync: null,
+      //             isAutosync: null,
 
-    //             isUnderground: '0',
+      //             isUnderground: '0',
 
-    //             groupNumber: '',
-    //           },
-    //         ],
-    //         avginfo: {
-    //           warnFlag: {
-    //             value: 0,
-    //           },
-    //         },
-    //         typeName: '制氮机',
+      //             groupNumber: '',
+      //           },
+      //         ],
+      //         avginfo: {
+      //           warnFlag: {
+      //             value: 0,
+      //           },
+      //         },
+      //         typeName: '制氮机',
 
-    //         type: 'nitrogen_auto',
-    //       },
-    //       {
-    //         subtype: 'sys_nitrogen',
+      //         type: 'nitrogen_auto',
+      //       },
+      //       {
+      //         subtype: 'sys_nitrogen',
 
-    //         datalist: [
-    //           {
-    //             msgType: null,
+      //         datalist: [
+      //           {
+      //             msgType: null,
 
-    //             deviceID: '2014623636824182785',
+      //             deviceID: '2014623636824182785',
 
-    //             strname: '制氮系统',
+      //             strname: '制氮系统',
 
-    //             strinstallpos: '制氮系统',
+      //             strinstallpos: '制氮系统',
 
-    //             fsectarea: 'null',
+      //             fsectarea: 'null',
 
-    //             planedVa: null,
+      //             planedVa: null,
 
-    //             regulation: null,
+      //             regulation: null,
 
-    //             stationname: null,
+      //             stationname: null,
 
-    //             stationtype: null,
+      //             stationtype: null,
 
-    //             deviceType: 'sys_nitrogen',
+      //             deviceType: 'sys_nitrogen',
 
-    //             typeName: '注氮',
+      //             typeName: '注氮',
 
-    //             netStatus: 1,
+      //             netStatus: 1,
 
-    //             warnFlag: 0,
+      //             warnFlag: 0,
 
-    //             warnLevel: 0,
+      //             warnLevel: 0,
 
-    //             warnLevel_str: '正常',
+      //             warnLevel_str: '正常',
 
-    //             syswarnLevel: null,
+      //             syswarnLevel: null,
 
-    //             syswarnLevel_str: null,
+      //             syswarnLevel_str: null,
 
-    //             syswarnLevel_des: null,
+      //             syswarnLevel_des: null,
 
-    //             warnTime: null,
+      //             warnTime: null,
 
-    //             readTime: '2026-02-09 10:27:25',
+      //             readTime: '2026-02-09 10:27:25',
 
-    //             warnDes: null,
+      //             warnDes: null,
 
-    //             frontGateOpenCtrl: null,
+      //             frontGateOpenCtrl: null,
 
-    //             rearGateOpenCtrl: null,
+      //             rearGateOpenCtrl: null,
 
-    //             readData: {
-    //               sign: '0',
+      //             readData: {
+      //               sign: '0',
 
-    //               tTime: '2026-02-09 10:27:20',
+      //               tTime: '2026-02-09 10:27:20',
 
-    //               isRun: '-2',
-    //             },
+      //               isRun: '-2',
+      //             },
 
-    //             readDataDes: null,
+      //             readDataDes: null,
 
-    //             limits: null,
+      //             limits: null,
 
-    //             summaryHour: [],
+      //             summaryHour: [],
 
-    //             summaryDay: [],
+      //             summaryDay: [],
 
-    //             history: [],
+      //             history: [],
 
-    //             dayhistory: [],
+      //             dayhistory: [],
 
-    //             totalInfo: {
-    //               unitNum: 0,
-    //             },
+      //             totalInfo: {
+      //               unitNum: 0,
+      //             },
 
-    //             sign: null,
+      //             sign: null,
 
-    //             cameras: [],
+      //             cameras: [],
 
-    //             links: [],
+      //             links: [],
 
-    //             avgParam: {},
+      //             avgParam: {},
 
-    //             other1: null,
+      //             other1: null,
 
-    //             other2: null,
+      //             other2: null,
 
-    //             other3: null,
+      //             other3: null,
 
-    //             remarkInfo: null,
+      //             remarkInfo: null,
 
-    //             linkInfo: null,
+      //             linkInfo: null,
 
-    //             addrIndex: null,
+      //             addrIndex: null,
 
-    //             warnLogNotOkCount: 0,
+      //             warnLogNotOkCount: 0,
 
-    //             otherInfo: null,
+      //             otherInfo: null,
 
-    //             orderNum: null,
+      //             orderNum: null,
 
-    //             testFlag: null,
+      //             testFlag: null,
 
-    //             strRemark: null,
+      //             strRemark: null,
 
-    //             isAutosync: null,
+      //             isAutosync: null,
 
-    //             coalThickness: '',
+      //             coalThickness: '',
 
-    //             coalSeamThick: '',
+      //             coalSeamThick: '',
 
-    //             faceRetM3: '',
+      //             faceRetM3: '',
 
-    //             totalDrillingType: '',
+      //             totalDrillingType: '',
 
-    //             coalProduction: '',
+      //             coalProduction: '',
 
-    //             drillinFootage: '',
+      //             drillinFootage: '',
 
-    //             strikelength: '',
+      //             strikelength: '',
 
-    //             totalRetM3: '',
+      //             totalRetM3: '',
 
-    //             useM3Perent: '',
+      //             useM3Perent: '',
 
-    //             ventRationality: '',
+      //             ventRationality: '',
 
-    //             cuteyeLength: '',
+      //             cuteyeLength: '',
 
-    //             totalGasVolume: '',
+      //             totalGasVolume: '',
 
-    //             gasLevel: '',
+      //             gasLevel: '',
 
-    //             supportNum: '',
+      //             supportNum: '',
 
-    //             totalComplteQuantity: '',
+      //             totalComplteQuantity: '',
 
-    //             stepIn1: '',
+      //             stepIn1: '',
 
-    //             stepIn2: '',
+      //             stepIn2: '',
 
-    //             totalOutM3: '',
+      //             totalOutM3: '',
 
-    //             coalReserves: '',
+      //             coalReserves: '',
 
-    //             faceIntM3: '',
+      //             faceIntM3: '',
 
-    //             cumulativeScalar: '',
+      //             cumulativeScalar: '',
 
-    //             totalIntM3: '',
+      //             totalIntM3: '',
 
-    //             totalAverageRate: '',
+      //             totalAverageRate: '',
 
-    //             equalarea: '',
+      //             equalarea: '',
 
-    //             coalSpoCha: '',
+      //             coalSpoCha: '',
 
-    //             thickness: '',
+      //             thickness: '',
 
-    //             unitNum: '',
+      //             unitNum: '',
 
-    //             meterCount1: '',
+      //             meterCount1: '',
 
-    //             meterCount2: '',
+      //             meterCount2: '',
 
-    //             goafName: '',
+      //             goafName: '',
 
-    //             meterCount3: '',
+      //             meterCount3: '',
 
-    //             meterCount4: '',
+      //             meterCount4: '',
 
-    //             meterCount5: '',
+      //             meterCount5: '',
 
-    //             faceLen: '',
+      //             faceLen: '',
 
-    //             linkEmptyFlag: '',
+      //             linkEmptyFlag: '',
 
-    //             totalDate: '',
+      //             totalDate: '',
 
-    //             stepOut1: '',
+      //             stepOut1: '',
 
-    //             mainCoalseam: '',
+      //             mainCoalseam: '',
 
-    //             drillingType: '',
+      //             drillingType: '',
 
-    //             coalSeam: '',
+      //             coalSeam: '',
 
-    //             stepOut2: '',
+      //             stepOut2: '',
 
-    //             pressureRationality1: '',
+      //             pressureRationality1: '',
 
-    //             pressureRationality2: '',
+      //             pressureRationality2: '',
 
-    //             userM3: '',
+      //             userM3: '',
 
-    //             gasReserves: '',
+      //             gasReserves: '',
 
-    //             linkEmpty: '',
+      //             linkEmpty: '',
 
-    //             beginDrainageDate: '',
+      //             beginDrainageDate: '',
 
-    //             goafManage: '',
+      //             goafManage: '',
 
-    //             dischargeGasEmission: '',
+      //             dischargeGasEmission: '',
 
-    //             useM3: '',
+      //             useM3: '',
 
-    //             ventCapacity: '',
+      //             ventCapacity: '',
 
-    //             stepMid2: '',
+      //             stepMid2: '',
 
-    //             stepMid1: '',
+      //             stepMid1: '',
 
-    //             zoneRationality1: '',
+      //             zoneRationality1: '',
 
-    //             manageCoalMethod: '',
+      //             manageCoalMethod: '',
 
-    //             zoneRationality2: '',
+      //             zoneRationality2: '',
 
-    //             miningArea: '',
+      //             miningArea: '',
 
-    //             minFirePeriod: '',
+      //             minFirePeriod: '',
 
-    //             cumulativeFlow: '',
+      //             cumulativeFlow: '',
 
-    //             scalarRecognition: '',
+      //             scalarRecognition: '',
 
-    //             coalSeamAngle: '',
+      //             coalSeamAngle: '',
 
-    //             coalseam: '',
+      //             coalseam: '',
 
-    //             totalPlanM3: '',
+      //             totalPlanM3: '',
 
-    //             facePlanM3: '',
+      //             facePlanM3: '',
 
-    //             coalSeamThickness: '',
+      //             coalSeamThickness: '',
 
-    //             workingFaceLengeh: '',
+      //             workingFaceLengeh: '',
 
-    //             workingFaceHeight: '',
+      //             workingFaceHeight: '',
 
-    //             originalGasContent: '',
+      //             originalGasContent: '',
 
-    //             workingFaceQieyanLength: '',
+      //             workingFaceQieyanLength: '',
 
-    //             workingFaceZouxiangLength: '',
+      //             workingFaceZouxiangLength: '',
 
-    //             panel: '',
+      //             panel: '',
 
-    //             leakage: '',
+      //             leakage: '',
 
-    //             flength: '',
-    //           },
-    //         ],
+      //             flength: '',
+      //           },
+      //         ],
 
-    //         typeName: '综合监测系统',
+      //         typeName: '综合监测系统',
 
-    //         type: 'sys',
-    //       },
-    //     ],
-    //   };
-    // });
-  });
-}
-async function getDataSource() {
-  const res = await list({ devicetype: 'nitrogen', pagetype: 'normal' });
-  let dataSource: any = [];
-  dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
-  if (dataSource) {
-    readData.value = Object.assign(dataSource, dataSource.readData);
+      //         type: 'sys',
+      //       },
+      //     ],
+      //   };
+      // });
+    });
+  }
+  async function getDataSource() {
+    const res = await list({ devicetype: 'nitrogen', pagetype: 'normal' });
+    let dataSource: any = [];
+    dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
+    if (dataSource) {
+      readData.value = Object.assign(dataSource, dataSource.readData);
+    }
   }
-}
 
-function initInterval() {
-  setInterval(() => {
+  function initInterval() {
+    setInterval(() => {
+      refresh();
+    }, 60000);
+  }
+  onMounted(() => {
     refresh();
-  }, 60000);
-}
-onMounted(() => {
-  refresh();
-  initInterval();
-});
+    initInterval();
+  });
 </script>
 
 <style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-}
-
-#spray3D {
-  pointer-events: all;
-}
-
-.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(1)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(2)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-}
+  .spray-wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
+  #spray3D {
+    pointer-events: all;
+  }
+
+  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
+  }
 </style>