src/views/vent/deviceManager/configurationTable/types.ts

@@ -176,7 +176,8 @@ export interface ModuleDataBoard extends ReadFrom {
     | 'Q'
     | 'R'
     | 'S'
-    | 'T';
+    | 'T'
+    | 'U';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */

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

@@ -1,51 +1,61 @@
 <template>
   <div class="center-area-green">
     <div class="container">
-      <!-- <div class="risk-score">
-        <div class="ite-content">
+      <div class="risk-score">
+        <div class="vent-icon"></div>
+        <div class="item-content">
           <div class="ite-label">瓦斯监测预警</div>
           <div class="ite-val">低风险</div>
         </div>
-        <div class="ite-content">
+        <div class="item-content">
           <div class="ite-label">矿井瓦斯等级鉴定</div>
           <div class="ite-val">低瓦斯</div>
         </div>
       </div>
       <div class="dust-warn">
-        <div class="dust-icon"></div>
-        <div class="item-content">
+        <div class="ite-content">
           <div class="ite-label">粉尘监测预警</div>
           <div class="ite-val">低风险</div>
         </div>
       </div>
-      <div class="vent-warn">
-        <div class="vent-icon"></div>
-        <div class="item-content">
-          <div class="ite-label">通风监测预警</div>
+      <div class="water-warn">
+        <div class="ite-content">
+          <div class="ite-label">水灾</div>
           <div class="ite-val">低风险</div>
         </div>
       </div>
-      <div class="gas-warn">
-        <div class="gas-icon"></div>
-        <div class="item-content1">
-          <div class="item-label">风险得分</div>
-          <div class="item-val">1.45</div>
+      <div class="vent-warn">
+        <div class="ite-content">
+          <div class="ite-label">通风监测预警</div>
+          <div class="ite-val">低风险</div>
         </div>
       </div>
       <div class="device-warn">
         <div class="device-icon"></div>
-        <div class="item-content">
+        <div class="ite-content">
           <div class="ite-label">设备监测预警</div>
           <div class="ite-val">低风险</div>
         </div>
       </div>
       <div class="fire-warn">
         <div class="fire-icon"></div>
-        <div class="item-content">
+        <div class="ite-content">
           <div class="ite-label">火灾监测预警</div>
           <div class="ite-val">低风险</div>
         </div>
-      </div> -->
+      </div>
+      <div class="db-warn">
+        <div class="ite-content">
+          <div class="ite-label">顶板</div>
+          <div class="ite-val">低风险</div>
+        </div>
+      </div>
+      <div class="gas-warn">
+        <div class="ite-content1">
+          <div class="item-label">风险得分</div>
+          <div class="item-val">1.45</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -60,118 +70,141 @@ import { ref } from 'vue';
 
   .container {
     position: relative;
-    width: 50%;
+    width: 60%;
     height: 70%;
     margin-top: 16%;
-    margin-left: 25%;
+    margin-left: 20%;
     background: url(/src/assets/images/home-warn/6-1.png) no-repeat center;
-    background-size: 95% 100%;
+    background-size: 100% 100%;
   }
 
   .risk-score {
+    display: flex;
     position: absolute;
-    left: 50%;
+    flex-direction: row;
+    justify-content: space-around;
+    left: 45%;
     top: -46px;
     transform: translate(-44%, 0);
-    width: 206px;
+    width: 299px;
     height: 60px;
-    font-size: 18px;
+    font-size: 13px;
     color: #fff;
-    background: url(/src/assets/images/home-warn/1-2.png) no-repeat;
+    background: url(/src/assets/images/home-warn/6-2.png) no-repeat;
     background-size: 100% 100%;
-
-    .item-label {
-      text-align: center;
-      margin-bottom: 5px;
-    }
-
-    .item-val {
-      text-align: center;
-      font-family: 'douyuFont';
+    .item-content {
+      margin-left: 30px;
     }
   }
 
   .dust-warn {
     position: absolute;
-    left: 220px;
-    top: 52px;
-    width: 120px;
-    height: 106px;
-    background: url(/src/assets/images/home-warn/1-7.png) no-repeat;
+    right: -26%;
+    top: 197px;
+    width: 217px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-3.png) no-repeat;
     background-size: 100% 100%;
   }
-
-  .vent-warn {
+  .water-warn {
     position: absolute;
-    left: 134px;
-    top: 232px;
-    width: 120px;
-    height: 106px;
-    background: url(/src/assets/images/home-warn/1-5.png) no-repeat;
+    right: -19%;
+    bottom: 70px;
+    width: 217px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-7.png) no-repeat;
     background-size: 100% 100%;
   }
-
-  .gas-warn {
+  .db-warn {
     position: absolute;
-    left: 434px;
-    top: 368px;
-    width: 120px;
-    height: 106px;
-    background: url(/src/assets/images/home-warn/1-3.png) no-repeat;
+    left: -20%;
+    bottom: 70px;
+    width: 217px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-8.png) no-repeat;
+    background-size: 100% 100%;
+  }
+  .vent-warn {
+    position: absolute;
+    left: -20%;
+    top: 64px;
+    width: 207px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-5.png) no-repeat;
     background-size: 100% 100%;
   }
-
   .device-warn {
     position: absolute;
-    right: 130px;
-    top: 222px;
-    width: 120px;
-    height: 106px;
-    background: url(/src/assets/images/home-warn/1-6.png) no-repeat;
+    right: -21%;
+    top: 64px;
+    width: 217px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-6.png) no-repeat;
     background-size: 100% 100%;
   }
-
   .fire-warn {
     position: absolute;
-    right: 121px;
-    top: 52px;
-    width: 120px;
-    height: 106px;
-    background: url(/src/assets/images/home-warn/1-4.png) no-repeat;
+    left: -7%;
+    top: 197px;
+    transform: translate(-50%, 0);
+    width: 217px;
+    height: 64px;
+    color: #fff;
+    background: url(/src/assets/images/home-warn/6-4.png) no-repeat;
     background-size: 100% 100%;
   }
-
-  .item-content {
+  .gas-warn {
     position: absolute;
-    left: -4px;
-    top: -54px;
-    width: 127px;
-    height: 56px;
-    background: url(/src/assets/images/home-warn/1-8.png) no-repeat;
-    background-size: 100% 100%;
+    left: 51%;
+    top: 65%;
+    transform: translate(-50%, 0);
+    width: 182px;
+    height: 80px;
+    text-align: center;
+    line-height: 80px;
   }
-  .item-content1 {
+  .item-content {
+    position: relative;
     display: flex;
-    position: absolute;
-    left: -60px;
-    top: -54px;
-    width: 258px;
-    height: 56px;
-    background: url(/src/assets/images/home-warn/1-9.png) no-repeat;
-    background-size: 100% 100%;
+    flex-direction: column;
+    margin-left: 58px;
+    line-height: 32px;
   }
-  .ite-label {
-    text-align: center;
-    margin-bottom: 8px;
-    padding-top: 4px;
+  .ite-content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    margin-left: 100px;
+    line-height: 33px;
   }
   .ite-val {
-    text-align: center;
+    font-size: 12px;
     font-family: 'douyuFont';
+    color: #bcf6fc !important;
   }
-  .ite-content {
-    width: 50%;
-    height: 100%;
+  .ite-content1 {
+    width: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .item-val {
+    font-size: 22px;
+    font-family: 'douyuFont';
+    color: #b9f3ff !important;
+    font-weight: bold;
+    line-height: 88px;
+  }
+  .item-label {
+    font-weight: bold;
+    font-size: 22px;
+    color: #fafafb;
   }
 }
 </style>

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

@@ -33,62 +33,23 @@
             />
           </div>
         </template>
-
-        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
-        <template v-if="config.name === 'chart'">
-          <CustomChart class="content__module" :chart-config="config.config" :chart-data="config.data" />
-        </template>
-        <!-- 通常列表部分 -->
-        <template v-if="config.name === 'list'">
-          <template v-if="config.type === 'timeline'">
-            <TimelineList class="content__module" :list-config="config.items" />
-          </template>
-          <template v-else-if="config.type === 'timelineNew'">
-            <TimelineListNew class="content__module" :list-config="config.items" />
-          </template>
-          <template v-else>
-            <CustomList class="content__module" :type="config.type" :list-config="config.items" />
-          </template>
-        </template>
-        <!-- 画廊部分 -->
-        <template v-if="config.name === 'gallery'">
-          <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
-        </template>
-        <!-- 复杂列表部分 -->
-        <template v-if="config.name === 'gallery_list'">
-          <GalleryList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
-        </template>
-        <!-- 复杂列表部分 -->
-        <template v-if="config.name === 'complex_list'">
-          <ComplexList class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <!-- 表格部分，这部分通常是占一整个模块的 -->
-        <template v-if="config.name === 'table'">
-          <CustomTable class="content__module text-center overflow-auto" :type="config.type" :columns="config.columns" :data="config.data" />
-        </template>
-        <template v-if="config.name === 'tabs'">
-          <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
+        <template v-if="config.name === 'dz_list'">
+          <DzList :listOption="config.config.listOption" :listData="config.data"></DzList>
         </template>
-        <template v-if="config.name === 'blast_delta'">
-          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 178 }" />
+        <template v-if="config.name === 'dz_card'">
+          <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data"></DzCard>
         </template>
-        <template v-if="config.name === 'qh_curve'">
-          <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
+        <template v-if="config.name === 'yj_risk'">
+          <yjRisk :riskData="config.data"></yjRisk>
         </template>
-        <template v-if="config.name === 'ai_chat'">
-          <AIChat class="content__module" />
+        <template v-if="config.name === 'yj_chart'">
+          <yjChart :paramData="config.data"></yjChart>
         </template>
-        <template v-if="config.name === 'device_alarm'">
-          <DeviceAlarm class="content__module" :devicedata="config.data" />
+        <template v-if="config.name === 'yj_gas'">
+          <yjGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data"></yjGas>
         </template>
-        <template v-if="config.name === 'measure_detail'">
-          <MeasureDetail
-            class="content__module"
-            :show-title="false"
-            :composite-data="config.data"
-            :topconfig="config.config.topconfig"
-            :btnconfig="config.config.btnconfig"
-          />
+        <template v-if="config.name === 'yj_ventWarn'">
+          <yjVentWarn :ventData="config.data"></yjVentWarn>
         </template>
       </div>
     </div>
@@ -99,31 +60,21 @@ import { computed } from 'vue';
 import {
   CommonItem,
   Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
+  ModuleDataBoard,
+  ModuleDataChart,
+  ModuleDataList,
+  ModuleDataPreset,
+  ModuleDataTable,
 } from '../../../deviceManager/configurationTable/types';
+import DzList from '../green/components/dz-list.vue';
+import DzCard from '../green/components/dz-card.vue';
+import yjRisk from './yj_risk.vue';
+import yjChart from './yj_chart.vue';
+import yjGas from './yj_gasWarn.vue';
 import MiniBoard from './detail/MiniBoard-Warn.vue';
-import TimelineList from './detail/TimelineList.vue';
-import TimelineListNew from './detail/TimelineListNew.vue';
-import CustomList from './detail/CustomList.vue';
-import CustomGallery from './detail/CustomGallery.vue';
-import ComplexList from './detail/ComplexList.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable.vue';
-import CustomChart from './detail/CustomChart.vue';
+import yjVentWarn from './yj_ventWarn.vue';
 import { clone } from 'lodash-es';
 import { getData, getFormattedText } from '../hooks/helper';
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from './preset/QHCurve.vue';
-import MeasureDetail from './preset/MeasureDetail.vue';
-import CustomTabs from './preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
 
 const props = defineProps<{
   data: any;

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

@@ -328,7 +328,53 @@ defineEmits(['click']);
   background: url('@/assets/images/home-green/100.png') no-repeat;
   background-size: 100% 100%;
 }
-
+.mini-board_U {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 121px;
+  height: 100%;
+  background: url('@/assets/images/home-warn/3-1.png') no-repeat;
+  background-size: 100% 100%;
+}
+.mini-board__label_U {
+  width: 100%;
+  margin-bottom: 15px;
+}
+.mini-board__value_U {
+  position: relative;
+  width: 102px;
+  height: 45px;
+  font-family: 'douyuFont';
+  font-size: 12px;
+  color: #bbf5ff;
+}
+.mini-board__label_T {
+  position: relative;
+  width: 102px;
+  height: 45px;
+  font-size: 14px;
+  color: #fff;
+  z-index: 1;
+}
+.mini-board_T:nth-child(1) {
+  .mini-board__value_T {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    background: url('@/assets/images/home-warn/7-2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.mini-board_T:nth-child(2) {
+  .mini-board__value_T {
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    background: url('@/assets/images/home-warn/7-1.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
 .mini-board__value_K {
   font-size: 18px;
   font-family: 'douyuFont';

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

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

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

@@ -46,8 +46,8 @@ function clickHandler() {
   width: 100%;
   height: var(--bg-height);
   position: relative;
-  line-height: var(--bg-height);
-  padding-left: 36px;
+  text-align: center;
+  line-height: 0px;
   font-weight: bold;
   font-size: 16px;
 }
@@ -80,7 +80,6 @@ function clickHandler() {
   width: calc(100% - 15px);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
-  margin-top: 20px;
 }
 
 // Transition动画相关

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

@@ -45,9 +45,9 @@ function clickHandler() {
 .module-content__title__expand {
   width: 100%;
   text-align: center;
-  line-height: 3px;
   font-weight: bold;
   font-size: 16px;
+  line-height: 0px;
 }
 
 // .module-content__title {

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

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

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

@@ -0,0 +1,157 @@
+<template>
+  <div class="dz-dust">
+    <div ref="chartDust" class="chartDust"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, nextTick } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  echartOption: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  paramData: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+//获取dom元素节点
+let chartDust = ref<any>();
+let xData = ref<any[]>([]);
+let yData = ref<any[]>([]);
+
+function getOption() {
+  nextTick(() => {
+    let myChart = echarts.init(chartDust.value);
+
+    const colorList = [
+      ['rgba(78, 8, 10, 1)', 'rgba(255, 0, 0, 1)'],
+      ['rgba(78, 44, 10, 1)', 'rgba(255, 119, 0, 1)'],
+      ['rgba(72, 62, 41, 1)', 'rgba(234, 179, 105, 1)'],
+      ['rgba(78, 73, 10, 1)', 'rgba(255, 214, 0, 1)'],
+      ['rgba(24, 60, 76, 1)', 'rgba(78, 171, 217, 1)'],
+    ];
+    const totalBlocks = 25;
+    let option = {
+      tooltip: {},
+      grid: {
+        top: '8%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        data: xData.value,
+        // X
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          fontSize: 14,
+          interval: 0,
+          textStyle: {
+            color: '#FFF', //更改坐标轴文字颜色
+            fontSize: 12, //更改坐标轴文字大小
+          },
+        },
+      },
+
+      yAxis: {
+        name: '',
+        type: 'value',
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        max: totalBlocks,
+      },
+      series: [
+        {
+          type: 'pictorialBar',
+          symbol: 'rect',
+          symbolRepeat: true,
+          symbolSize: [20, 10], // 小块宽度和高度
+          symbolMargin: 2, // 小块间距
+          data: yData.value.map((value, index) => ({
+            value: totalBlocks,
+            itemStyle: {
+              color: colorList[index % colorList.length][0],
+              borderColor: colorList[index % colorList.length][1],
+            },
+          })),
+          tooltip: {
+            show: false,
+          },
+        },
+        {
+          type: 'pictorialBar',
+          symbol: 'rect',
+          symbolRepeat: true,
+          symbolSize: [20, 10], // 小块宽度和高度
+          symbolMargin: 2, // 小块间距
+          data: yData.value.map((value, index) => ({
+            value: value,
+            itemStyle: {
+              color: colorList[index % colorList.length][1],
+              borderColor: colorList[index % colorList.length][0],
+            },
+          })),
+          label: {
+            show: false,
+            position: 'inside',
+            formatter: '{c}',
+          },
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+watch(
+  () => props.paramData,
+  (newV, oldV) => {
+    console.log(newV, '粉尘---');
+    xData.value = newV.map((el: any) => el.name);
+    yData.value = newV.map((el: any) => el.value);
+    getOption();
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="less" scoped>
+.dz-dust {
+  position: relative;
+  height: 100%;
+
+  .chartDust {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,164 @@
+<template>
+  <div class="dz-fire">
+    <div class="fire-container" :class="`fire-container_${type}`">
+      <div class="title-box" :class="`title-box_${type}`">
+        <div :class="`title-box-label_icon_${type}`"></div>
+        <div :class="`title-box-label_${type}`">{{ titleData?.label }}</div>
+        <div :class="`title-box-val_${type}`">{{ gasData[titleData?.value] }}</div>
+      </div>
+      <div class="content-box" :class="`content-box_${type}`" :scroll="10">
+        <div class="content-box-item" v-for="(item, index) in gasData.monitorData" :key="index">
+          <div class="box-item-label">{{ item.label }}</div>
+          <div v-if="type == 'A'" class="box-item-value">{{ item.value }}</div>
+          <div v-if="type == 'B'" class="box-item-value">{{ item.value1 }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { scrollIntoParentView } from 'ant-design-vue/lib/vc-cascader/utils/commonUtil';
+import { ref, watch } from 'vue';
+
+let props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+  titleData: {
+    type: Object,
+    defualt: () => {
+      return {};
+    },
+  },
+  gasData: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.dz-fire {
+  --image-model_fire-container_A: url('@/assets/images/home-warn/5-1.png');
+  --image-model_fire-container_B: url('@/assets/images/home-warn/5-2.png');
+  height: 100%;
+  padding: 10px 25px 0px 25px;
+  box-sizing: border-box;
+
+  .fire-container_A {
+    position: relative;
+    width: 100%;
+    height: 50%;
+  }
+
+  .fire-container_B {
+    position: relative;
+    width: 100%;
+    height: 50%;
+  }
+  .title-box-label_icon_A {
+    width: 20px;
+    height: 20px;
+    margin-left: 16px;
+    background: url('@/assets/images/home-warn/5-4.svg') no-repeat;
+    background-size: 100% 100%;
+  }
+  .title-box-label_icon_B {
+    width: 20px;
+    height: 20px;
+    margin-left: 16px;
+    background: url('@/assets/images/home-warn/5-5.svg') no-repeat;
+    background-size: 100% 100%;
+  }
+  .title-box {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: absolute;
+    height: 50px;
+    top: 0;
+    background: var(--image-model_fire-container_A) no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .content-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    top: 46px;
+    background: url('@/assets/images/home-warn/5-2.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .content-box-item {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    margin-top: 10px;
+    justify-content: space-around;
+    align-items: center;
+    background: url('@/assets/images/home-warn/5-3.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .box-item-value {
+    font-family: 'douyuFont';
+    font-size: 12px;
+  }
+
+  .title-box_A {
+    width: 100%;
+    height: 40px;
+  }
+
+  .title-box_B {
+    width: 100%;
+    height: 40px;
+  }
+
+  .title-box-label_A {
+    margin: 20px;
+    color: #fff;
+  }
+
+  .title-box-label_B {
+    margin: 20px;
+    color: #fff;
+  }
+
+  .title-box-val_A {
+    font-family: 'douyuFont';
+    color: #baf5fe;
+    margin-left: 86px;
+  }
+
+  .title-box-val_B {
+    font-family: 'douyuFont';
+    color: #baf5fe;
+    margin-left: 86px;
+  }
+
+  .content-box_A {
+    width: 295px;
+    height: 100%;
+    margin-left: 46px;
+  }
+
+  .content-box_B {
+    width: 295px;
+    height: 100%;
+    margin-left: 46px;
+  }
+}
+</style>

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

@@ -0,0 +1,200 @@
+<template>
+  <div class="dz-risk">
+    <div class="risk-container">
+      <div class="risk-center"></div>
+      <div ref="riskPie" class="risk-pie"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+  riskData: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+let riskPie = ref(null);
+let echartData = ref<any[]>([]);
+
+function getOption() {
+  nextTick(() => {
+    const colorList = [
+      {
+        type: 'radial',
+        r: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: 'rgba(182, 242, 255,1)', // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(95, 228, 255,1)', // 100% 处的颜色
+          },
+        ],
+      },
+      {
+        type: 'radial',
+        r: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: 'rgba(176, 255, 236,1)', // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(86, 255, 171,1)', // 100% 处的颜色
+          },
+        ],
+      },
+      {
+        type: 'radial',
+        r: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: 'rgba(255, 253, 176,1)', // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(255, 255, 86,1)', // 100% 处的颜色
+          },
+        ],
+      },
+      {
+        type: 'radial',
+        r: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: 'rgba(215, 179, 255,1)', // 0% 处的颜色
+          },
+          {
+            offset: 1,
+            color: 'rgba(134, 88, 255,1)', // 100% 处的颜色
+          },
+        ],
+      },
+    ];
+    let myChart = echarts.init(riskPie.value);
+    let option = {
+      color: colorList,
+      // tooltip: {
+      //     trigger: 'item'
+      // },
+      series: [
+        {
+          type: 'pie',
+          center: ['50%', '50%'],
+          radius: ['48%', '70%'],
+          // clockwise: false,
+          // avoidLabelOverlap: true,
+          emphasis: {
+            label: {
+              show: true,
+            },
+            itemStyle: {
+              color: function (params) {
+                return colorList[params.dataIndex];
+              },
+            },
+          },
+          // hoverOffset: 0,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colorList[params.dataIndex];
+              },
+            },
+          },
+          label: {
+            show: true,
+            position: 'outside',
+            textStyle: {
+              color: '#fff',
+              fontSize: 12,
+            },
+            formatter: '{a|{b}：{d}%}\n{hr|}',
+            rich: {
+              hr: {
+                backgroundColor: 't',
+                borderRadius: 3,
+                width: 3,
+                height: 3,
+                padding: [3, 3, 0, -12],
+              },
+              a: {
+                padding: [-10, 5, -15, 5],
+              },
+            },
+          },
+
+          labelLine: {
+            normal: {
+              length: 20,
+              length2: 20,
+              lineStyle: {
+                width: 1,
+              },
+            },
+          },
+          data: echartData.value,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+watch(
+  () => props.riskData,
+  (newV, oldV) => {
+    echartData.value = newV;
+    getOption();
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+.dz-risk {
+  --image-model_risk-container: url('@/assets/images/home-warn/2.png');
+  --image-model_risk-center: url('@/assets/images/home-warn/1.png');
+  height: 100%;
+  .risk-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    height: 100%;
+    background: var(--image-model_risk-container) no-repeat center;
+    background-size: auto 100%;
+
+    .risk-center {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 80px;
+      background: var(--image-model_risk-center) no-repeat center;
+      background-size: auto 100%;
+    }
+
+    .risk-pie {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="vent_warn">
+    <div v-for="(item, index) in ventData" :key="index" class="vent_warn_item">
+      <div class="risk-label">{{ item.name }}</div>
+      <div class="risk_progress_container">
+        <div class="risk_progress" :style="getProgressStyle(item)"></div>
+      </div>
+      <div class="risk-value">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, nextTick } from 'vue';
+
+let props = defineProps({
+  ventData: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+const colorMap = {
+  报警: ['#62465d', '#f50405'],
+  重大风险: ['#60685e', '#f37606'],
+  较大风险: ['#53777d', '#dfae6a'],
+  一般风险: ['#588063', '#efce09'],
+  低风险: ['#2a7296', '#47a0cc'],
+};
+
+const getProgressStyle = (item) => {
+  const maxValue = 5;
+  const [startColor, endColor] = colorMap[item.name];
+
+  return {
+    width: `${item.value > 0 ? (item.value / maxValue) * 100 : 0}%`,
+    background: `linear-gradient(90deg, ${startColor} 0%, ${endColor} 100%)`,
+  };
+};
+watch(
+  () => props.ventData,
+  (newV, oldV) => {
+    console.log(props.ventData, '99900');
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="less" scoped>
+.vent_warn {
+  position: relative;
+  padding-top: 10px;
+  height: 100%;
+  .vent_warn_item {
+    margin-left: 5px;
+    margin-top: 10px;
+    padding: 10px 0 10px 20px;
+    width: 94%;
+    height: 39px;
+    background: url('@/assets/images/home-warn/3-2.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .risk-label {
+      flex: 1;
+      font-size: 14px;
+      color: #ffffff;
+    }
+    .risk-value {
+      flex: 1;
+      margin-right: 10px;
+      color: #ffffff;
+    }
+
+    .risk_progress_container {
+      margin-left: 20px;
+      flex: 3;
+      height: 8px;
+      margin: 0 10px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      overflow: hidden;
+      min-width: 0; /* 关键：允许容器收缩 */
+    }
+    .risk_progress {
+      height: 100%;
+      border-radius: 4px;
+      transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,6 @@
 // import { truncateSync } from 'fs-extra';
 import { Config } from '../../deviceManager/configurationTable/types';
+import { fanControlState1 } from '../../monitorManager/fanLocalMonitor1/fanLocal.data';
 // import { BDdustMock, BDfireMock } from './configurable.data.bd';
 import { getThemifyImagesURL } from '/@/utils/ui';
 
@@ -2911,7 +2912,7 @@ export const testConfigFusionGreen: Config[] = [
           readFrom: 'ventData',
           echartOption: {
             colorList: ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5'],
-          }
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3215,7 +3216,7 @@ export const testConfigFusionGreen: Config[] = [
             temp: '温度',
             smokeing: '烟雾',
             fire: '火焰',
-            comax: 'CO最大值(ppm)'
+            comax: 'CO最大值(ppm)',
           },
         },
       ],
@@ -3277,10 +3278,10 @@ export const testConfigFusionGreen: Config[] = [
               ['rgba(158, 13, 13, 1)', 'rgba(239, 2, 2, 1)'],
             ],
             grid: {
-              top: "8%",
-              left: "5%",
-              right: "5%",
-              bottom: "5%",
+              top: '8%',
+              left: '5%',
+              right: '5%',
+              bottom: '5%',
               containLabel: true,
             },
             axisLineX: {
@@ -3288,15 +3289,15 @@ export const testConfigFusionGreen: Config[] = [
               lineStyle: {
                 // width: 1,
                 color: 'rgba(34, 55, 81,.7)',
-              }
+              },
             },
             axisLabelX: {
               fontSize: 14,
               interval: 0,
               textStyle: {
-                color: '#FFF',  //更改坐标轴文字颜色
-                fontSize: 12     //更改坐标轴文字大小
-              }
+                color: '#FFF', //更改坐标轴文字颜色
+                fontSize: 12, //更改坐标轴文字大小
+              },
             },
             splitLineY: {
               show: true,
@@ -3308,11 +3309,11 @@ export const testConfigFusionGreen: Config[] = [
             axisLabelY: {
               fontSize: 14,
               textStyle: {
-                color: '#FFF',  //更改坐标轴文字颜色
-                fontSize: 12     //更改坐标轴文字大小
-              }
+                color: '#FFF', //更改坐标轴文字颜色
+                fontSize: 12, //更改坐标轴文字大小
+              },
             },
-          }
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3372,16 +3373,15 @@ export const testConfigFusionGreen: Config[] = [
           titleData: {
             label: '安全监测系统监测点',
             value: 'safety_sum',
-          }
+          },
         },
         {
           readFrom: 'gasData',
           type: 'B',
           titleData: {
             label: '瓦斯抽采系统监测点',
-            value: 'gas_sum'
-          }
-
+            value: 'gas_sum',
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3421,7 +3421,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'dz_risk',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3444,7 +3443,6 @@ export const testConfigFusionGreen: Config[] = [
       position: 'bottom:15px;right:450px',
     },
   },
-
 ];
 
 export const testConfigVentNew: Config[] = [
@@ -4027,14 +4025,14 @@ export const testConfigWarnMonitor: Config[] = [
             basis: '20%',
           },
           {
-            name: 'dz_chart',
+            name: 'yj_ventWarn',
             basis: '80%',
           },
         ],
       },
       board: [
         {
-          type: 'J',
+          type: 'U',
           readFrom: 'ventWarn',
           layout: 'label-top',
           items: [
@@ -4065,49 +4063,6 @@ export const testConfigWarnMonitor: Config[] = [
       preset: [
         {
           readFrom: 'ventData',
-          echartOption: {
-            xAxisData: [
-              { key: '低风险', valueKey: 'blue' },
-              { key: '一般风险', valueKey: 'yellow' },
-              { key: '较大风险', valueKey: 'orange' },
-              { key: '重大风险', valueKey: 'red' },
-              { key: '报警', valueKey: 'alarm' },
-            ],
-            chartsColumns: [
-              {
-                legend: '低风险',
-                seriesName: '(Pa)',
-                ymax: 50,
-                ymin: 0,
-                yname: '个',
-                linetype: 'bar',
-                yaxispos: 'left',
-                color: '#cd5fff',
-                sort: 1,
-                dataIndex: '',
-                xRotate: 0,
-              },
-            ],
-            option: {
-              grid: {
-                top: '20px',
-                bottom: 15,
-                right: 20,
-                left: 10,
-                containLabel: true,
-              },
-              yAxis: {
-                show: false,
-              },
-            },
-            colors: [
-              [{ color: 'rgba(46,144,165, 1 )' }, { color: 'rgba(46,144,165, 0.8 )' }, { color: 'rgba(46, 144, 165, 0.08 )' }],
-              [{ color: 'rgba(254,254,53, 1 )' }, { color: 'rgba(254,254,53, 0.8 )' }, { color: 'rgba(254,254,53, 0.08 )' }],
-              [{ color: 'rgba(234,179,105, 1 )' }, { color: 'rgba(234,179,105, 0.8 )' }, { color: 'rgba(234,179,105, 0.08 )' }],
-              [{ color: 'rgba(254,111,0, 1 )' }, { color: 'rgba(254,111,0, 0.8 )' }, { color: 'rgba(254,111,0, 0.08 )' }],
-              [{ color: 'rgba(255,0,0, 1 )' }, { color: 'rgba(255,0,0, 0.8 )' }, { color: 'rgba(255,0,0, 0.08 )' }],
-            ],
-          },
         },
       ],
       // mock: BDfireMock,
@@ -4115,11 +4070,11 @@ export const testConfigWarnMonitor: Config[] = [
     showStyle: {
       size: 'width:420px;height:400px;',
       version: '原版',
-      position: 'top:70px;left:15px;',
+      position: 'top:70px;left:15px',
     },
   },
   {
-    deviceType: 'deviceWarn',
+    deviceType: 'fusionManageInfo',
     moduleName: '火灾监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
@@ -4144,11 +4099,93 @@ export const testConfigWarnMonitor: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_onfire',
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'dz_card',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'T',
+          readFrom: 'fireInfos',
+          layout: 'label-top',
+          items: [
+            {
+              label: '内因火灾',
+              value: '',
+            },
+            {
+              label: '外因火灾',
+              value: '',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'fireInfos',
+          leftTitle: {
+            address: '监测位置',
+            gradewarn: '预警等级',
+            smoke: '煤自燃阶段',
+          },
+          rightTitle: {
+            temp: '温度',
+            smokeing: '烟雾',
+            fire: '火焰',
+            comax: 'CO最大值(ppm)',
+          },
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:420px;',
+      version: '原版',
+      position: 'top:480px;left:15px',
+    },
+  },
+  {
+    deviceType: 'deviceWarn',
+    moduleName: '瓦斯监测预警',
+    pageType: 'gasData',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'yj_gas',
             basis: '50%',
           },
           {
-            name: 'dz_outfire',
+            name: 'yj_gas',
             basis: '50%',
           },
         ],
@@ -4162,23 +4199,84 @@ export const testConfigWarnMonitor: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_onfire',
+          readFrom: 'gasData',
+          type: 'A',
+          titleData: {
+            label: '安全监测系统监测点',
+            value: 'safety_sum',
+          },
         },
         {
-          readFrom: 'dz_outfire',
+          readFrom: 'gasData',
+          type: 'B',
+          titleData: {
+            label: '瓦斯抽采系统监测点',
+            value: 'gas_sum',
+          },
         },
       ],
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:614px;height:240px;',
+      size: 'width:420px;height:400px;',
       version: '原版',
-      position: 'bottom:15px;left:450px',
+      position: 'top:70px;right:15px',
     },
   },
   {
     deviceType: 'fusionManageInfo',
-    moduleName: '瓦斯监测预警',
+    moduleName: '风险权重比例',
+    pageType: '',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'yj_risk',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'riskData',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:360px;height:240px;',
+      version: '原版',
+      position: 'top:50px;left:450px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '设备监测预警',
     pageType: 'fusion-warn-green',
     moduleData: {
       header: {
@@ -4219,154 +4317,154 @@ export const testConfigWarnMonitor: Config[] = [
           readFrom: 'deviceWarn',
           listOption: {
             fanmain: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
+              url: getThemifyImagesURL(),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${fanmain_all}',
-              warnCount: '${fanmain_warn}',
-              closeCount: '${fanmain_close}',
+              allCount: 'fanmain_all',
+              warnCount: 'fanmain_warn',
+              closeCount: 'fanmain_close',
             },
             fanlocal: {
-              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${fanlocal_all}',
-              warnCount: '${fanlocal_warn}',
-              closeCount: '${fanlocal_close}',
+              allCount: 'fanlocal_all',
+              warnCount: 'fanlocal_warn',
+              closeCount: 'fanlocal_close',
             },
             bundletube: {
-              url: getThemifyImagesURL('vent/alarm-icons/shug.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${bundletube_all}',
-              warnCount: '${bundletube_warn}',
-              closeCount: '${bundletube_close}',
+              allCount: 'bundletube_all',
+              warnCount: 'bundletube_warn',
+              closeCount: 'bundletube_close',
             },
             fanlocaldp: {
-              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${fanlocaldp_all}',
-              warnCount: '${fanlocaldp_warn}',
-              closeCount: '${fanlocaldp_close}',
+              allCount: 'fanlocaldp_all',
+              warnCount: 'fanlocaldp_warn',
+              closeCount: 'fanlocaldp_close',
             },
             gate: {
-              url: getThemifyImagesURL('vent/alarm-icons/fm.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${gate_all}',
-              warnCount: '${gate_warn}',
-              closeCount: '${gate_close}',
+              allCount: 'gate_all',
+              warnCount: 'gate_warn',
+              closeCount: 'gate_close',
             },
             window: {
-              url: getThemifyImagesURL('vent/alarm-icons/fc.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${window_all}',
-              warnCount: '${window_warn}',
-              closeCount: '${window_close}',
+              allCount: 'window_all',
+              warnCount: 'window_warn',
+              closeCount: 'window_close',
             },
             windrect: {
-              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${windrect_all}',
-              warnCount: '${windrect_warn}',
-              closeCount: '${windrect_close}',
+              allCount: 'windrect_all',
+              warnCount: 'windrect_warn',
+              closeCount: 'windrect_close',
             },
             forcFan: {
-              url: getThemifyImagesURL('vent/alarm-icons/yafeng.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${forcFan_all}',
-              warnCount: '${forcFan_warn}',
-              closeCount: '${forcFan_close}',
+              allCount: 'forcFan_all',
+              warnCount: 'forcFan_warn',
+              closeCount: 'forcFan_close',
             },
             spray: {
-              url: getThemifyImagesURL('vent/alarm-icons/penlin.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${spray_all}',
-              warnCount: '${spray_warn}',
-              closeCount: '${spray_close}',
+              allCount: 'spray_all',
+              warnCount: 'spray_warn',
+              closeCount: 'spray_close',
             },
             dustdev: {
-              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${dustdev_all}',
-              warnCount: '${dustdev_warn}',
-              closeCount: '${dustdev_close}',
+              allCount: 'dustdev_all',
+              warnCount: 'dustdev_warn',
+              closeCount: 'dustdev_close',
             },
             nitrogen: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhudan.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${nitrogen_all}',
-              warnCount: '${nitrogen_warn}',
-              closeCount: '${nitrogen_close}',
+              allCount: 'nitrogen_all',
+              warnCount: 'nitrogen_warn',
+              closeCount: 'nitrogen_close',
             },
             pulping: {
-              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${pulping_all}',
-              warnCount: '${pulping_warn}',
-              closeCount: '${pulping_close}',
+              allCount: 'pulping_all',
+              warnCount: 'pulping_warn',
+              closeCount: 'pulping_close',
             },
             atomizing: {
-              url: getThemifyImagesURL('vent/alarm-icons/pw.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${atomizing_all}',
-              warnCount: '${atomizing_warn}',
-              closeCount: '${atomizing_close}',
+              allCount: 'atomizing_all',
+              warnCount: 'atomizing_warn',
+              closeCount: 'atomizing_close',
             },
             dustsensor: {
-              url: getThemifyImagesURL('vent/alarm-icons/ccq.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${dustsensor_all}',
-              warnCount: '${dustsensor_warn}',
-              closeCount: '${dustsensor_close}',
+              allCount: 'dustsensor_all',
+              warnCount: 'dustsensor_warn',
+              closeCount: 'dustsensor_close',
             },
             gas: {
-              url: getThemifyImagesURL('vent/alarm-icons/wasichoucaig.png'),
+              url: getThemifyImagesURL(''),
               text: '',
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${gas_all}',
-              warnCount: '${gas_warn}',
-              closeCount: '${gas_close}',
+              allCount: 'gas_all',
+              warnCount: 'gas_warn',
+              closeCount: 'gas_close',
             },
             pump: {
               url: getThemifyImagesURL('vent/alarm-icons/wasibeng.png'),
@@ -4374,9 +4472,9 @@ export const testConfigWarnMonitor: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${pump_all}',
-              warnCount: '${pump_warn}',
-              closeCount: '${pump_close}',
+              allCount: 'pump_all',
+              warnCount: 'pump_warn',
+              closeCount: 'pump_close',
             },
             modelsensor: {
               url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
@@ -4384,9 +4482,9 @@ export const testConfigWarnMonitor: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-              allCount: '${modelsensor_all}',
-              warnCount: '${modelsensor_warn}',
-              closeCount: '${modelsensor_close}',
+              allCount: 'modelsensor_all',
+              warnCount: 'modelsensor_warn',
+              closeCount: 'modelsensor_close',
             },
           },
         },
@@ -4394,136 +4492,9 @@ export const testConfigWarnMonitor: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:420px;height:400px;',
-      version: '原版',
-      position: 'top:480px;left:15px',
-    },
-  },
-  {
-    deviceType: 'fusionManageInfo',
-    moduleName: '风险权重比例',
-    pageType: 'fusion-warn-green',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'chart',
-            basis: '100%',
-          },
-        ],
-      },
-      board: [],
-      chart: [
-        {
-          type: 'pie_halo',
-          readFrom: '',
-          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
-          xAxis: [{ show: false }],
-          yAxis: [{ show: false, name: '风量', position: 'left' }],
-          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
-        },
-      ],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:360px;height:240px;',
-      version: '原版',
-      position: 'bottom:15px;right:450px',
-    },
-  },
-  {
-    deviceType: 'fusionManageInfo',
-    moduleName: '设备监测预警',
-    pageType: 'fusion-warn-green',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'board',
-            basis: '35%',
-          },
-          {
-            name: 'dz_card',
-            basis: '65%',
-          },
-        ],
-      },
-      board: [
-        {
-          type: 'K',
-          readFrom: 'fireManageInfo',
-          layout: 'label-top',
-          items: [
-            {
-              label: '安全监测系统监测点',
-              value: '${nyWarnLevel}',
-            },
-            {
-              label: '瓦斯抽采系统监测点',
-              value: '${wyWarnLevel}',
-            },
-          ],
-        },
-      ],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [],
-      list: [],
-      complex_list: [],
-      preset: [
-        {
-          readFrom: 'dz_card',
-        },
-      ],
-      // mock: BDfireMock,
-    },
-    showStyle: {
-      size: 'width:420px;height:400px;',
+      size: 'width:1020px;height:240px;',
       version: '原版',
-      position: 'top:70px;right:15px',
+      position: 'bottom:15px;left:450px',
     },
   },
   {
@@ -4552,7 +4523,7 @@ export const testConfigWarnMonitor: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_chart',
+            name: 'yj_chart',
             basis: '100%',
           },
         ],
@@ -4566,13 +4537,58 @@ export const testConfigWarnMonitor: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_chart',
+          readFrom: 'dustInfo',
+          echartOption: {
+            colorList: [
+              ['rgba(78, 8, 10, 1)', 'rgba(255, 0, 0, 1)'],
+              ['rgba(78, 44, 10, 1)', 'rgba(255, 119, 0, 1)'],
+              ['rgba(72, 62, 41, 1)', 'rgba(234, 179, 105, 1)'],
+              ['rgba(78, 73, 10, 1)', 'rgba(255, 214, 0, 1)'],
+              ['rgba(24, 60, 76, 1)', 'rgba(78, 171, 217, 1)'],
+            ],
+            grid: {
+              top: '8%',
+              left: '5%',
+              right: '5%',
+              bottom: '5%',
+              containLabel: true,
+            },
+            axisLineX: {
+              show: true,
+              lineStyle: {
+                // width: 1,
+                color: 'rgba(34, 55, 81,.7)',
+              },
+            },
+            axisLabelX: {
+              fontSize: 14,
+              interval: 0,
+              textStyle: {
+                color: '#FFF', //更改坐标轴文字颜色
+                fontSize: 12, //更改坐标轴文字大小
+              },
+            },
+            splitLineY: {
+              show: true,
+              lineStyle: {
+                // type: 'dashed',
+                color: 'rgba(34, 55, 81,.7)',
+              },
+            },
+            axisLabelY: {
+              fontSize: 14,
+              textStyle: {
+                color: '#FFF', //更改坐标轴文字颜色
+                fontSize: 12, //更改坐标轴文字大小
+              },
+            },
+          },
         },
       ],
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:420px;height:400px;',
+      size: 'width:420px;height:420px;',
       version: '原版',
       position: 'top:480px;right:15px',
     },

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

@@ -148,7 +148,6 @@ onUnmounted(() => {
     top: 0;
     width: calc(100% - 900px);
     height: calc(100% - 270px);
-    border: 1px solid #000;
   }
 }