多灾融合预警更新，5.5首页风量监测修改-提交

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="windMonitor">
-    <div class="title-top" @click="getDetail">风量监测</div>
+    <div class="title-top" @click="getDetail">风量监测111</div>
     <div class="wind-contents">
       <div class="wind-bar" ref="windBar"></div>
     </div>
@@ -10,7 +10,7 @@
 <script lang="ts" setup>
 import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
 import * as echarts from 'echarts';
-import {getMaxY,getMinY} from '../clique.data'
+import { getMaxY, getMinY } from '../clique.data'
 const emit = defineEmits(['goDetail']);
 
 let props = defineProps({
@@ -21,7 +21,7 @@ let props = defineProps({
 let windBar = ref<any>();
 //坐标轴最大值
 let maxY = ref<any>(0);
-let minY=ref<any>(0)
+let minY = ref<any>(0)
 //echart数据
 let echartData = reactive<any>({ ydata: [], xdata: [] });
 //跳转详情
@@ -258,28 +258,13 @@ watch(
       if (el.readData.m3) {
         echartData.xdata.push(el.strinstallpos);
         echartData.ydata.push(el.readData.m3);
+      } else {
+        echartData.xdata.push('0');
+        echartData.ydata.push('0');
       }
     });
-    maxY.value = getMaxY( echartData.ydata)
-    minY.value = getMinY( echartData.ydata)
-    // maxY.value = echartData.ydata.reduce((acr, cur) => {
-    //   return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
-    // });
-    // maxY.value =
-    //   maxY.value.toString().indexOf('.') == -1 ? maxY.value.toString() : maxY.value.toString().substring(0, maxY.value.toString().indexOf('.'));
-    // if (maxY.value.length < 2 && Number(maxY.value) < 1) {
-    //   maxY.value = 1
-    // } else if (maxY.value.length < 2 && Number(maxY.value) >= 1) {
-    //   maxY.value = 10
-    // } else if (maxY.value.length < 3) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 10
-    // } else if (maxY.value.length < 4) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 100
-    // } else if (maxY.value.length < 5) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 1000
-    // } else if (maxY.value.length < 6) {
-    //   maxY.value = (Number(maxY.value[0]) + 1) * 10000
-    // }
+    maxY.value = getMaxY(echartData.ydata)
+    minY.value = getMinY(echartData.ydata)
     getOption();
   },
   {

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

@@ -518,14 +518,7 @@ export const getTotal = (params) => {
         value1: el.pumpNumber
       }
     })
-    //风险权重比例数据
-    let risk = await getDisasterProportion({})
-    res.riskData = [
-      { name: '通风', value: risk.vent },
-      { name: '火灾', value: risk.fire },
-      { name: '瓦斯', value: risk.gas },
-      { name: '粉尘', value: risk.dust },
-    ]
+   
     //火灾监测预警数据
     res.fireInfos = reactive({})
     res.fireInfos.dataOn = []
@@ -567,7 +560,6 @@ export const getTotal = (params) => {
         ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
         : '-'
       : '';
-      console.log( res.fireInfos,'000-')
     //粉尘监测预警数据
      res.dustInfo = [
           {
@@ -591,7 +583,7 @@ export const getTotal = (params) => {
             value: dataVent.dust ? dataVent.dust : res.info.sysInfo.dustS.levels.blue
           },
         ];
-    console.log(res.dustInfo,'dustdev')
+   
 
     return res;
   });

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

@@ -3346,7 +3346,7 @@ export const testConfigFusionGreen: Config[] = [
         link: '',
       },
       layout: {
-        direction: 'column',
+        direction: 'row',
         items: [
           {
             name: 'dz_gas',
@@ -3387,63 +3387,12 @@ export const testConfigFusionGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:614px;height:240px;',
+      size: 'width:990px;height:170px;',
       version: '原版',
       position: 'bottom:15px;left:450px',
     },
   },
-  {
-    deviceType: 'fusionManageInfo',
-    moduleName: '风险权重比例',
-    pageType: 'riskData',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'dz_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: 'bottom:15px;right:450px',
-    },
-  },
 
 ];
 

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

@@ -3,46 +3,46 @@
         <div class="container">
             <div class="risk-score">
                 <div class="item-label">风险得分</div>
-                <div class="item-val">{{ paramData.riskLevel !== undefined && paramData.riskLevel !== null ?
-                    paramData.riskLevel
+                <div class="item-val">{{ paramDatas.riskLevel !== undefined && paramDatas.riskLevel !== null ?
+                    paramDatas.riskLevel
                     : '-' }}</div>
             </div>
             <div class="dust-warn">
                 <div class="dust-icon"></div>
                 <div class="item-content">
                     <div class="ite-label">粉尘监测预警</div>
-                    <div class="ite-val">{{ paramData.fc == 0
+                    <div class="ite-val">{{ paramDatas.fc == 0
                         ? '低风险'
-                        : paramData.fc == 101
+                        : paramDatas.fc == 101
                             ? '低风险'
-                            : paramData.fc == 102
+                            : paramDatas.fc == 102
                                 ? '一般风险'
-                                : paramData.fc == 103
+                                : paramDatas.fc == 103
                                     ? '较大风险'
-                                    : paramData.fc == 104
+                                    : paramDatas.fc == 104
                                         ? '重大风险'
-                                        : paramData.fc == 201
+                                        : paramDatas.fc == 201
                                             ? '报警'
-                                            : paramData.fc }}</div>
+                                            : paramDatas.fc }}</div>
                 </div>
             </div>
             <div class="vent-warn">
                 <div class="vent-icon"></div>
                 <div class="item-content">
                     <div class="ite-label">通风监测预警</div>
-                    <div class="ite-val">{{ paramData.tf == 0
+                    <div class="ite-val">{{ paramDatas.tf == 0
                         ? '低风险'
-                        : paramData.tf == 101
+                        : paramDatas.tf == 101
                             ? '低风险'
-                            : paramData.tf == 102
+                            : paramDatas.tf == 102
                                 ? '一般风险'
-                                : paramData.tf == 103
+                                : paramDatas.tf == 103
                                     ? '较大风险'
-                                    : paramData.tf == 104
+                                    : paramDatas.tf == 104
                                         ? '重大风险'
-                                        : paramData.tf == 201
+                                        : paramDatas.tf == 201
                                             ? '报警'
-                                            : paramData.tf }}</div>
+                                            : paramDatas.tf }}</div>
                 </div>
             </div>
             <div class="gas-warn">
@@ -50,19 +50,19 @@
                 <div class="item-content1">
                     <div class="ite-content">
                         <div class="ite-label">瓦斯监测预警</div>
-                        <div class="ite-val">{{ paramData.ws == 0
+                        <div class="ite-val">{{ paramDatas.ws == 0
                             ? '低风险'
-                            : paramData.ws == 101
+                            : paramDatas.ws == 101
                                 ? '低风险'
-                                : paramData.ws == 102
+                                : paramDatas.ws == 102
                                     ? '一般风险'
-                                    : paramData.ws == 103
+                                    : paramDatas.ws == 103
                                         ? '较大风险'
-                                        : paramData.ws == 104
+                                        : paramDatas.ws == 104
                                             ? '重大风险'
-                                            : paramData.ws == 201
+                                            : paramDatas.ws == 201
                                                 ? '报警'
-                                                : paramData.ws }}</div>
+                                                : paramDatas.ws }}</div>
                     </div>
                     <div class="ite-content">
                         <div class="ite-label">矿井瓦斯等级鉴定</div>
@@ -74,46 +74,65 @@
                 <div class="device-icon"></div>
                 <div class="item-content">
                     <div class="ite-label">设备监测预警</div>
-                    <div class="ite-val">{{ paramData.sb == 0
+                    <div class="ite-val">{{ paramDatas.sb == 0
                         ? '低风险'
-                        : paramData.sb == 101
+                        : paramDatas.sb == 101
                             ? '低风险'
-                            : paramData.sb == 102
+                            : paramDatas.sb == 102
                                 ? '一般风险'
-                                : paramData.sb == 103
+                                : paramDatas.sb == 103
                                     ? '较大风险'
-                                    : paramData.sb == 104
+                                    : paramDatas.sb == 104
                                         ? '重大风险'
-                                        : paramData.sb == 201
+                                        : paramDatas.sb == 201
                                             ? '报警'
-                                            : paramData.sb }}</div>
+                                            : paramDatas.sb }}</div>
                 </div>
             </div>
             <div class="fire-warn">
                 <div class="fire-icon"></div>
                 <div class="item-content">
                     <div class="ite-label">火灾监测预警</div>
-                    <div class="ite-val">{{ paramData.fire == 0
+                    <div class="ite-val">{{ paramDatas.fire == 0
                         ? '低风险'
-                        : paramData.fire == 101
+                        : paramDatas.fire == 101
                             ? '低风险'
-                            : paramData.fire == 102
+                            : paramDatas.fire == 102
                                 ? '一般风险'
-                                : paramData.fire == 103
+                                : paramDatas.fire == 103
                                     ? '较大风险'
-                                    : paramData.fire == 104
+                                    : paramDatas.fire == 104
                                         ? '重大风险'
-                                        : paramData.fire == 201
+                                        : paramDatas.fire == 201
                                             ? '报警'
-                                            : paramData.fire }}</div>
+                                            : paramDatas.fire }}</div>
                 </div>
             </div>
+            <div class="db-warn">
+                <div class="db-icon"></div>
+                <div class="item-content">
+                    <div class="ite-label">顶板</div>
+                    <div class="ite-val">低风险</div>
+                </div>
+            </div>
+            <div class="sz-warn">
+                <div class="sz-icon"></div>
+                <div class="item-content">
+                    <div class="ite-label">水灾</div>
+                    <div class="ite-val">低风险</div>
+                </div>
+            </div>
+            <div class="risk-echartbox">
+                <RiskWarnLevel :echartData="paramDatas.riskData"></RiskWarnLevel>
+            </div>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
+import { reactive, watch } from 'vue'
 import { useGlobSetting } from '/@/hooks/setting';
+import RiskWarnLevel from './dz-risk.vue'
 let props = defineProps({
     paramData: {
         type: Object,
@@ -122,8 +141,12 @@ let props = defineProps({
         }
     }
 })
+let paramDatas = reactive<any>({})
 const { sysOrgCode, sysDataType } = useGlobSetting();
 
+watch(() => props.paramData, (newV, oldV) => {
+    paramDatas =newV
+}, { immediate: true,deep:true })
 </script>
 
 <style lang="less" scoped>
@@ -138,6 +161,8 @@ const { sysOrgCode, sysDataType } = useGlobSetting();
         --image-model_gas_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-3.png');
         --image-model_device_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-6.png');
         --image-model_fire_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-4.png');
+        --image-model_db_warn: url('@/assets/images/themify/deepblue/home-container/configurable/db-green.png');
+        --image-model_sz_warn: url('@/assets/images/themify/deepblue/home-container/configurable/sz-green.png');
         --image-model_item_content: url('@/assets/images/themify/deepblue/home-container/configurable/1-8.png');
         --image-model_item_content1: url('@/assets/images/themify/deepblue/home-container/configurable/1-9.png');
     }
@@ -151,6 +176,8 @@ const { sysOrgCode, sysDataType } = useGlobSetting();
     --image-model_gas_warn: url('@/assets/images/home-green/1-3.png');
     --image-model_device_warn: url('@/assets/images/home-green/1-6.png');
     --image-model_fire_warn: url('@/assets/images/home-green/1-4.png');
+    --image-model_db_warn: url('@/assets/images/home-green/db-green.png');
+    --image-model_sz_warn: url('@/assets/images/home-green/sz-green.png');
     --image-model_item_content: url('@/assets/images/home-green/1-8.png');
     --image-model_item_content1: url('@/assets/images/home-green/1-9.png');
     height: 100%;
@@ -161,9 +188,15 @@ const { sysOrgCode, sysDataType } = useGlobSetting();
         height: calc(100% - 25px);
         margin-top: 25px;
         background: var(--image-model_container_img) no-repeat center;
-        background-size: 95% 100%;
+        background-size: 100% 100%;
     }
-
+.risk-echartbox{
+       position: absolute;
+    left: 18px;
+    top: -52px;
+    width: 220px;
+    height: 170px;
+}
     .risk-score {
         position: absolute;
         left: 50%;
@@ -190,54 +223,74 @@ const { sysOrgCode, sysDataType } = useGlobSetting();
 
     .dust-warn {
         position: absolute;
-        left: 220px;
+        left: 242px;
         top: 52px;
-        width: 120px;
-        height: 106px;
+        width: 132px;
+        height: 108px;
         background: var(--image-model_dust_warn) no-repeat;
         background-size: 100% 100%;
     }
 
     .vent-warn {
         position: absolute;
-        left: 134px;
-        top: 232px;
-        width: 120px;
-        height: 106px;
+        left: 200px;
+        top: 334px;
+        width: 132px;
+        height: 108px;
         background: var(--image-model_vent_warn) no-repeat;
         background-size: 100% 100%;
     }
 
     .gas-warn {
         position: absolute;
-        left: 434px;
-        top: 368px;
-        width: 120px;
-        height: 106px;
+        left: 414px;
+        top: 416px;
+        width: 132px;
+        height: 108px;
         background: var(--image-model_gas_warn) no-repeat;
         background-size: 100% 100%;
     }
 
     .device-warn {
         position: absolute;
-        right: 130px;
-        top: 222px;
-        width: 120px;
-        height: 106px;
+        right: 196px;
+        top: 340px;
+        width: 132px;
+        height: 108px;
         background: var(--image-model_device_warn) no-repeat;
         background-size: 100% 100%;
     }
 
     .fire-warn {
         position: absolute;
-        right: 121px;
-        top: 52px;
-        width: 120px;
-        height: 106px;
+        right: 142px;
+        top: 58px;
+        width: 132px;
+        height: 108px;
         background: var(--image-model_fire_warn) no-repeat;
         background-size: 100% 100%;
     }
 
+    .db-warn {
+        position: absolute;
+        left: 42px;
+        top: 182px;
+        width: 132px;
+        height: 108px;
+        background: var(--image-model_db_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .sz-warn {
+        position: absolute;
+        right: -2px;
+        top: 136px;
+        width: 132px;
+        height: 108px;
+        background: var(--image-model_sz_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
     .item-content {
         position: absolute;
         left: -4px;

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

@@ -88,9 +88,6 @@
         <template v-if="config.name === 'dz_dust'">
           <DzDust :echartOption="config.config" :paramData="config.data"></DzDust>
         </template>
-        <template v-if="config.name === 'dz_risk'">
-          <DzRisk :riskData="config.data"></DzRisk>
-        </template>
         <template v-if="config.name === 'dz_gas'">
           <DzGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data"></DzGas>
         </template>

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

@@ -76,7 +76,6 @@ let props = defineProps({
 let infoData = reactive({})
 
 watch(() => props.paramData, (newV, oldV) => {
-    console.log(newV, '火灾---')
     infoData = Object.assign({}, newV)
 }, { immediate: true })
 </script>

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

@@ -190,17 +190,17 @@ function getOption() {
                         formatter: (params) => {
                             let text;
                             if (params.dataIndex == 0) {
-                                text = '{a| ' + params.data + '}';
+                                text = '{a| ' + params.data + '个}';
                             } else if (params.dataIndex == 1) {
-                                text = '{b| ' + params.data + '}';
+                                text = '{b| ' + params.data + '个}';
                             } else if (params.dataIndex == 2) {
-                                text = '{c| ' + params.data + '}';
+                                text = '{c| ' + params.data + '个}';
                             } else if (params.dataIndex == 3) {
-                                text = '{d| ' + params.data + '}';
+                                text = '{d| ' + params.data + '个}';
                             } else if (params.dataIndex == 4) {
-                                text = '{e| ' + params.data + '}';
+                                text = '{e| ' + params.data + '个}';
                             } else {
-                                text = '{f| ' + params.data + '}';
+                                text = '{f| ' + params.data + '个}';
                             }
 
                             return text;
@@ -225,7 +225,7 @@ function getOption() {
                                 color: "#fff"
                             },
                         },
-                        position: [330, -12],
+                        position: [350, -12],
                         show: true
                     }
                 },
@@ -277,18 +277,10 @@ function getOption() {
 
 }
 
-
-
-
-
-
-
 watch(() => props.echartData, (newV, oldV) => {
-  console.log(newV,'99900')
   if(newV.length){
     category.value=newV
     echartY.value=newV.map((el:any)=>el.value)
-    console.log(echartY.value,'900')
     getOption()
   }
 }, { immediate: true,  })

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

@@ -94,7 +94,7 @@ function getOption() {
                 trigger: 'item',
             },
             grid: {
-                top: "8%",
+                top: "12%",
                 left: "5%",
                 right: "5%",
                 bottom: "5%",
@@ -236,6 +236,26 @@ function getOption() {
                     },
                     data: yData.value,
                 },
+                {
+                    type: "bar",
+                    label: {
+                        normal: {
+                            show: true,
+                            position: "top",
+                            formatter: (e) => {
+                                return e.value + "次";
+                            },
+                            fontSize: 12,
+                           color:'#fff',
+                            offset: [0, -6],
+                        },
+                    },
+                    itemStyle: {
+                        color: "transparent",
+                    },
+                    tooltip: {},
+                    data: yData.value,
+                },
             ],
         };
         myChart.setOption(option);
@@ -246,7 +266,6 @@ function getOption() {
 }
 
 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()

src/views/vent/home/configurable/green/components/dz-gas.vue

@@ -53,21 +53,22 @@ let props = defineProps({
     --image-model_fire-container_A: url('@/assets/images/home-green/1300.png');
     --image-model_fire-container_B: url('@/assets/images/home-green/1200.png');
     height: 100%;
-    padding: 10px 25px 0px 25px;
+    padding-top: 20px;
+    margin: 0px 10px;
     box-sizing: border-box;
 
-    .fire-container_A {
+    .fire-container {
         position: relative;
         width: 100%;
-        height: 85px;
+        height: 96px;
+    }
+
+    .fire-container_A {
         background: var(--image-model_fire-container_A) no-repeat;
         background-size: 100% 100%;
     }
 
     .fire-container_B {
-        position: relative;
-        width: 100%;
-        height: 85px;
         background: var(--image-model_fire-container_B) no-repeat;
         background-size: 100% 100%;
     }
@@ -77,7 +78,7 @@ let props = defineProps({
         justify-content: space-between;
         align-items: center;
         position: absolute;
-        left: 122px;
+        left: 102px;
         top: 0;
     }
 
@@ -86,8 +87,8 @@ let props = defineProps({
         justify-content: space-between;
         align-items: center;
         position: absolute;
-        left: 122px;
-        top: 32px;
+        left: 102px;
+        top: 36px;
     }
 
     .content-box-item {
@@ -106,13 +107,13 @@ let props = defineProps({
 
 
     .title-box_A {
-        width: 398px;
-        height: 32px;
+        width: 342px;
+        height: 36px;
     }
 
     .title-box_B {
-        width: 398px;
-        height: 32px;
+        width: 342px;
+        height: 36px;
     }
 
     .title-box-label_A {
@@ -135,14 +136,14 @@ let props = defineProps({
 
     .content-box_A {
         display: flex;
-        width: 398px;
-        height: 42px;
+        width: 342px;
+        height: calc(100% - 36px);
     }
 
     .content-box_B {
         display: flex;
-        width: 398px;
-        height: 42px;
+        width: 342px;
+        height: calc(100% - 36px);
     }
 
 

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

@@ -12,7 +12,7 @@ import { ref, nextTick, onMounted, watch } from 'vue'
 import * as echarts from 'echarts';
 
 let props = defineProps({
-    riskData: {
+    echartData: {
         type: Array,
         default: () => {
             return []
@@ -21,7 +21,7 @@ let props = defineProps({
 })
 
 let riskPie = ref(null)
-let echartData = ref<any[]>([])
+let echartDatas = ref<any[]>([])
 
 function getOption() {
     nextTick(() => {
@@ -76,20 +76,16 @@ function getOption() {
             series: [{
                 type: 'pie',
                 center: ['50%', '50%'],
-                radius: ['48%', '70%'],
-                // clockwise: false,
-                // avoidLabelOverlap: true,
+                radius: ['30%', '50%'],
                 emphasis: {
                     label: {
                         show: true
                     },
-                    itemStyle: {
-                        color: function (params) {
-                            return colorList[params.dataIndex]
-                        }
+                    opacity:1,
+                    color: function (params) {
+                        return colorList[params.dataIndex]
                     }
                 },
-                // hoverOffset: 0,
                 itemStyle: {
                     normal: {
                         color: function (params) {
@@ -102,17 +98,17 @@ function getOption() {
                     position: 'outside',
                     textStyle: {
                         color: "#fff",
-                        fontSize: 12
+                        fontSize: 10
                     },
-                    formatter: '{a|{b}：{d}%}\n{hr|}',
+                    formatter: '{b}：{c}',
                     rich: {
-                        hr: {
-                            backgroundColor: 't',
-                            borderRadius: 3,
-                            width: 3,
-                            height: 3,
-                            padding: [3, 3, 0, -12]
-                        },
+                        // hr: {
+                        //     backgroundColor: 't',
+                        //     borderRadius: 3,
+                        //     width: 3,
+                        //     height: 3,
+                        //     padding: [3, 3, 0, -12]
+                        // },
                         a: {
                             padding: [-10, 5, -15, 5]
                         }
@@ -122,14 +118,14 @@ function getOption() {
 
                 labelLine: {
                     normal: {
-                        length: 20,
-                        length2: 20,
+                        length: 10,
+                        length2: 5,
                         lineStyle: {
                             width: 1
                         }
                     }
                 },
-                data: echartData.value,
+                data: echartDatas.value,
             }]
         };
         myChart.setOption(option);
@@ -139,8 +135,8 @@ function getOption() {
     });
 }
 
-watch(() => props.riskData, (newV, oldV) => {
-    echartData.value = newV
+watch(() => props.echartData, (newV, oldV) => {
+    echartDatas.value = newV
     getOption()
 }, { immediate: true })
 
@@ -148,6 +144,7 @@ watch(() => props.riskData, (newV, oldV) => {
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
+
 @{theme-deepblue} {
     .dz-risk {
         --image-model_risk-container: url('@/assets/images/themify/deepblue/home-container/configurable/1400.png');
@@ -159,13 +156,13 @@ watch(() => props.riskData, (newV, oldV) => {
     --image-model_risk-container: url('@/assets/images/home-green/1400.png');
     --image-model_risk-center: url('@/assets/images/home-green/1500.png');
     height: 100%;
+
     .risk-container {
         position: relative;
         height: 100%;
         width: 100%;
-        height: 210px;
         background: var(--image-model_risk-container) no-repeat center;
-        background-size: auto 100%;
+        background-size: 55% 72%;
 
         .risk-center {
             position: absolute;
@@ -173,8 +170,8 @@ watch(() => props.riskData, (newV, oldV) => {
             top: 50%;
             transform: translate(-50%, -50%);
             width: 100%;
-            height: 80px;
-            background: var( --image-model_risk-center) no-repeat center;
+            height: 40px;
+            background: var(--image-model_risk-center) no-repeat center;
             background-size: auto 100%;
         }
 

src/views/vent/home/configurable/green/dust-green.vue

@@ -3,19 +3,9 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <ModuleOriginal
-          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="left-area"></div>
-        <div class="right-area"></div>
-        <div class="bottom-area"></div>
+        <ModuleOriginal 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>
     <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
@@ -24,240 +14,69 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import ModuleOriginal from './components/ModuleOriginal-green.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  // import { list } from './configurable.api';
-  import { useRoute } from 'vue-router';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { BDDustMock } from '../mock';
-  import { testConfigDustGreen } from '../configurable.data';
-
-  const { title = '智能通风管控系统' } = useGlobSetting();
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { data, updateData, updateEnhancedConfigs } = useInitPage(title);
-  const route = useRoute();
-  let interval: number | undefined;
-  // let configs = ref<any[]>([]);
-
-  // let configsLeft = computed(() => {
-  //   return configs.value.filter((v) => v.showStyle.position.includes('top') && v.showStyle.position.includes('left'));
-  // });
-  // let configsBottom = computed(() => {
-  //   return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
-  // });
-  // let configsRight = computed(() => {
-  //   return configs.value.filter((v) => v.showStyle.position.includes('right'));
-  // });
-  // function refresh() {
-  //   fetchConfigs('dust-green').then(() => {
-  //     console.log('debug r.', configs.value, configsBottom.value, isOriginal)
-  //     // configs.value = testConfigDustGreen
-  //     // updateEnhancedConfigs(configs.value);
-
-  //     // 测风装置	windrect
-  //     // 自动风窗	window
-  //     // 自动风门	gate
-  //     // 传感器	modelsensor
-  //     // 局部通风机	fanlocal
-  //     // 主通风机	fanmain
-  //     // 密闭	obfurage
-  //     // 安全监控	safetymonitor
-  //     // 光纤测温	fiber
-  //     // 束管监测	bundletube
-  //     // 制氮	nitrogen
-  //     // 制浆	pulping
-  //     // 喷淋	spray
-  //     // 喷粉	dustdev
-  //     // 喷雾设备	atomizing
-  //     // 除尘风机	dedustefan
-  //     // 粉尘传感器	dustsensor
-  //     // 转载点	transferpoint
-  //     // 瓦斯抽采泵	pump
-  //     // 粉尘	dusting
-  //     // 瓦斯监测	gasmonitor
-  //     // 球阀	ballvalve
-  //     // 压风机	forcFan
-  //     // 瓦斯巡检	gaspatrol
-  //     // 防火门	firedoor
-  //     // 隔爆设施	explosionProof
-  //     // 瓦斯管道阀门	gasvalve
-  //     list({
-  //       types: configs.value
-  //         .filter((e) => e.deviceType)
-  //         .map((e) => e.deviceType)
-  //         .join(','),
-  //     }).then(updateData);
-  //   });
-  // }
-
-  // function initInterval() {
-  //   setInterval(() => {
-  //     list({
-  //       types: configs.value
-  //         .filter((e) => e.deviceType)
-  //         .map((e) => e.deviceType)
-  //         .join(','),
-  //     }).then(updateData);
-  //   }, 60000);
-  // }
-
-  // watch(
-  //   () => route.query,
-  //   () => {
-  //     if (route.query.deviceType) {
-  //       // 仅需要展示子应用，模拟 unmounted
-  //       clearInterval(interval);
-  //     } else {
-  //       // 模拟 mounted
-  //       refresh();
-  //       initInterval();
-  //     }
-  //   }
-  // );
-
-  onMounted(() => {
-    fetchConfigs('dust-green').then(() => {
-      configs.value = testConfigDustGreen;
-      updateEnhancedConfigs(configs.value);
-      Promise.resolve(BDDustMock).then(updateData);
-      // getHomeData({}).then(updateData);
-    });
-    // setInterval(() => {
-    //   getHomeData({}).then(updateData);
-    // }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
+import { onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleOriginal from './components/ModuleOriginal-green.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+// import { list } from './configurable.api';
+import { useRoute } from 'vue-router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { BDDustMock } from '../mock';
+import { testConfigDustGreen } from '../configurable.data';
+
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData, updateEnhancedConfigs } = useInitPage(title);
+const route = useRoute();
+let interval: number | undefined;
+
+onMounted(() => {
+  fetchConfigs('dust-green').then(() => {
+    configs.value = testConfigDustGreen;
+    updateEnhancedConfigs(configs.value);
+    Promise.resolve(BDDustMock).then(updateData);
+    // getHomeData({}).then(updateData);
   });
+  // setInterval(() => {
+  //   getHomeData({}).then(updateData);
+  // }, 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} {
-    .dust-green{
-      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-    }
+@{theme-deepblue} {
+  .dust-green {
+    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
   }
+}
 
-  .dust-green {
-    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
+.dust-green {
+  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
-     width: 100%;
+  width: 100%;
   height: 100%;
   position: relative;
 
-    .main-container {
-      width: 100%;
-      height: 100%;
-   
-      .left-area {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 420px;
-        height: 100%;
-        padding: 15px;
-        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-        overflow-y: auto;
-      }
-
-      .bottom-area {
-        position: absolute;
-        left: 435px;
-        bottom: 0;
-        width: calc(100% - 435px);
-        height: 290px;
-        padding: 15px;
-        background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-      }
-
-      .right-area {
-        position: absolute;
-        right: 0px;
-        top: 0px;
-        width: 420px;
-        height: calc(100% - 305px);
-        padding: 15px 15px 0px 15px;
-        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-        overflow-y: auto;
-      }
-    }
-
-    // .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: 5px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 60px;
-      right: 480px;
-    }
-
-    .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;
-    }
-
-    .realtime-mode {
-      background-image: var(--image-monitor-realtime);
-    }
-
-    .module-monitor-bar {
-      position: absolute;
-      top: 100px;
-      width: 1000px;
-      height: 200px;
-      left: calc(50% - 500px);
-    }
+  .main-container {
+    width: 100%;
+    height: 100%;
   }
+}
 
-  :deep(.loading-box) {
-    position: unset;
-  }
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

src/views/vent/home/configurable/green/fire-green.vue

@@ -66,82 +66,6 @@ onUnmounted(() => {
   .main-container {
     width: 100%;
     height: 100%;
-
-
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
-      height: 100%;
-      padding: 15px;
-      background: var(--image-model_left-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-
-    .bottom-area {
-      position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: var(--image-model_bottom-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-    }
-
-    .right-area {
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      background: var(--image-model_left-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-  }
-
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
-
-  .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;
-  }
-
-
-
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
   }
 }
 

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

@@ -15,7 +15,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { reactive, onMounted, onUnmounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import CenterAreaGreen from './components/center-area-green.vue';
@@ -45,7 +45,6 @@ function getMonitor(flag = false) {
 }
 async function getCenterList() {
   let res = await getTotal({})
-  console.log(res, '中间')
   paramData.fire = res.info.sysInfo.fireS.maxLevel;
   paramData.tf = res.info.sysInfo.ventS.maxLevel;
   paramData.ws = res.info.sysInfo.gasS.maxLevel;
@@ -63,6 +62,12 @@ async function getCenterList() {
           : Levels.level > 3 && Levels.level <= 4
             ? 104
             : 0;
+  paramData.riskData = [
+    { name: '通风', value: Levels.vent },
+    { name: '火灾', value: Levels.fire },
+    { name: '瓦斯', value: Levels.gas },
+    { name: '粉尘', value: Levels.dust },
+  ]
 }
 onMounted(() => {
   fetchConfigs('fusion-warn-green').then(() => {
@@ -81,15 +86,15 @@ onUnmounted(() => {
 @import '/@/design/theme.less';
 
 @{theme-deepblue} {
-   .fusion-home {
-        --image-model_left-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-left.png');
-        --image-model_bottom-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-bottom.png');
-    }
+  .fusion-home {
+    --image-model_left-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-left.png');
+    --image-model_bottom-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-bottom.png');
+  }
 }
 
 .fusion-home {
-     --image-model_left-area: url('@/assets/images/home-green/green-bd-left.png');
-     --image-model_bottom-area: url('@/assets/images/home-green/green-bd-bottom.png');
+  --image-model_left-area: url('@/assets/images/home-green/green-bd-left.png');
+  --image-model_bottom-area: url('@/assets/images/home-green/green-bd-bottom.png');
   width: 100%;
   height: 100%;
   position: relative;
@@ -97,44 +102,6 @@ onUnmounted(() => {
   .main-container {
     width: 100%;
     height: 100%;
-
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
-      height: 100%;
-      padding: 15px;
-      background: var( --image-model_left-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-
-    .bottom-area {
-      position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: var(--image-model_bottom-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-    }
-
-    .right-area {
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      background: var( --image-model_left-area) no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
   }
 
   .center-area {
@@ -142,8 +109,7 @@ onUnmounted(() => {
     left: 450px;
     top: 0;
     width: calc(100% - 900px);
-    height: calc(100% - 270px);
-    border: 1px solid #000;
+    height: calc(100% - 200px);
   }
 }
 

src/views/vent/home/configurable/green/vent-Green.vue

@@ -97,43 +97,6 @@ onUnmounted(() => { });
     margin: 0px 15px;
     box-sizing: border-box;
   }
-
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
-
-  .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;
-  }
-
-  
-
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
-  }
 }
 
 :deep(.loading-box) {