多灾融合预警首页绿色版本-提交

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

@@ -1,252 +0,0 @@
-<template>
-  <div class="company-home">
-    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-    <template v-if="!route.query.deviceType">
-      <div class="main-container">
-        <div class="left-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <ModuleOriginal
-            v-for="cfg in configsLeft"
-            :key="cfg.deviceType"
-            :show-style="cfg.showStyle"
-            :module-data="cfg.moduleData"
-            :module-name="cfg.moduleName"
-            :device-type="cfg.deviceType"
-            :data="data"
-            :visible="true"
-          />
-        </div>
-        <div class="bottom-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <ModuleOriginal
-            v-for="cfg in configsBottom"
-            :key="cfg.deviceType"
-            :show-style="cfg.showStyle"
-            :module-data="cfg.moduleData"
-            :module-name="cfg.moduleName"
-            :device-type="cfg.deviceType"
-            :data="data"
-            :visible="true"
-          />
-        </div>
-        <div class="right-area">
-          <greenRightTag />
-        </div>
-      </div>
-    </template>
-
-    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
-      <VentModal />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleOriginal from './components/ModuleOriginal-green.vue';
-  import greenRightTag from './components/green-right-tag.vue';
-  import { list } from './configurable.api';
-  import { useRoute, useRouter } from 'vue-router';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { testConfigVent, testConfigVentRealtime } from './configurable.data';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-
-  const { title = '智能通风管控系统' } = useGlobSetting();
-  //   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const { isOriginal, fetchConfigs } = useInitConfigs();
-  const { mainTitle, 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'));
-  });
-  let configsBottom = computed(() => {
-    return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
-  });
-
-  function refresh() {
-    fetchConfigs('vent').then(() => {
-      configs.value = testConfigVent;
-      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(() => {
-    refresh();
-    initInterval();
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
-</script>
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
-
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-    }
-  }
-
-  .company-home {
-    --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%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: #181b24;
-
-    .main-container {
-      width: 100%;
-      height: 100%;
-      margin: 0px 15px;
-      .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: 120px;
-        height: calc(100% - 305px);
-      }
-    }
-
-    .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);
-    }
-  }
-
-  :deep(.loading-box) {
-    position: unset;
-  }
-</style>

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

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

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

@@ -1,199 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="green-nav">
-    <div class="main-title">{{ Title }}</div>
-    <!-- menu区域 -->
-    <div class="nav-menu">
-      <div
-        :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'"
-        v-for="(item, index) in menuList"
-        :key="index"
-        @click="menuClick(index, item)"
-      >
-        <div>{{ item.name }}</div>
-        <!-- menu-item -->
-        <div v-if="activeIndex == index && isShowMenuItem && item.MenuItemList.length != 0" class="nav-menu-item">
-          <div class="nav-menu-content">
-            <div
-              :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
-              v-for="(ite, ind) in item.MenuItemList"
-              :key="ind"
-              @click.stop="menuItemClick(ind)"
-              >{{ ite.name }}</div
-            >
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: ''
-  },
-  activeIndex: {
-    type: Number,
-    default: 0
-  }
-})
-
-let menuList = ref<any[]>([
-  {
-    name: '灾害预警', MenuItemList: [
-      // { name: '光纤测温监测' },
-      // { name: '束管监测' },
-      // { name: '智能注氮系统' },
-      // { name: '智能注浆系统' },
-      // { name: '火灾监测预警' },
-      // { name: '色谱仪报表分析' },
-    ]
-  },
-  { name: '火灾监控', MenuItemList: [] },
-  { name: '粉尘监控', MenuItemList: [] },
-  { name: '多灾融合预警', MenuItemList: [] },
-  // { name: '智能通风', MenuItemList: [] },
-  // { name: '瓦斯监控', MenuItemList: [] },
-  // { name: '综合管控', MenuItemList: [] },
-])//一级菜单列表
-
-
-let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
-let menuItemActive = ref(0)//menuItem当前激活选项
-let $emit = defineEmits(['menuToggle'])
-
-
-//menu选项切换
-function menuClick(index, item) {
-  isShowMenuItem.value = !isShowMenuItem.value
-  //menu切换，界面跳转
-  $emit('menuToggle', item, index)
-}
-
-//menuItem选项切换
-function menuItemClick(ind) {
-  menuItemActive.value = ind
-  isShowMenuItem.value = false
-}
-</script>
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
-
-  .green-nav {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: url('../../../../../assets/images/home-green/green-nav-bg.png') no-repeat;
-    background-size: 100% 100%;
-
-    .main-title {
-      width: 518px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding-left: 70px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-    }
-
-    .nav-menu {
-      position: absolute;
-      top: 0;
-      left: 675px;
-      width: 880px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
-
-      .nav-menu-active {
-        position: relative;
-        width: 120px;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        margin: 0px 20px;
-        font-size: 18px;
-        letter-spacing: 2px;
-        background: url('../../../../../assets/images/home-green/green-menu-bg.png') no-repeat;
-        background-size: 100% 100%;
-      }
-
-      .nav-menu-unactive {
-        position: relative;
-        width: 120px;
-        height: 60px;
-        line-height: 60px;
-        text-align: center;
-        margin: 0px 10px;
-        font-size: 16px;
-        letter-spacing: 2px;
-        background-size: 100% 100%;
-        cursor: pointer;
-      }
-
-      .nav-menu-item {
-        position: absolute;
-        left: -34px;
-        top: 56px;
-        width: 186px;
-        height: 273px;
-        padding: 28px 12px 12px 12px;
-        background: url(/src/assets/images/home-green/green-menu-item.png) no-repeat;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-
-        .nav-menu-content {
-          width: 100%;
-          height: 100%;
-          overflow-y: auto;
-
-          .menu-item-active {
-            width: 100%;
-            height: 36px;
-            line-height: 36px;
-            font-size: 14px;
-            background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
-          }
-
-          .menu-item-unactive {
-            width: 100%;
-            height: 40px;
-            line-height: 40px;
-            font-size: 14px;
-          }
-        }
-      }
-
-      // @keyframes fadeIn {
-      //   from {
-      //     opacity: 0;
-      //   }
-
-      //   to {
-      //     opacity: 1;
-      //   }
-      // }
-
-      // /* 定义淡出动画 */
-      // @keyframes fadeOut {
-      //   from {
-      //     opacity: 1;
-      //   }
-
-      //   to {
-      //     opacity: 0;
-      //   }
-      // }
-    }
-  }
-</style>

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

@@ -14,6 +14,7 @@ enum Api {
   getAlarmRecord = '/ventanaly-device/safety/ventanalyAlarmLog/sysLinkDevAlarmLog',
   getTotal = '/safety/ventanalyAlarmLog/total',
   sysTypeWarnList = '/safety/ventanalyAlarmLog/sysTypeWarn',
+  getDisasterProportion = '/safety/ventanalyAlarmLog/getDisasterProportion'
 }
 
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
@@ -361,7 +362,7 @@ export const getDisHome = (params) => {
     return res;
   });
 };
-
+//获取通风监测预警图表数据
 export const sysTypeWarnList = (params) => {
   const key = `${Api.sysTypeWarnList}?${JSON.stringify(params)}`;
   if (!cache.has(key)) {
@@ -376,6 +377,22 @@ export const sysTypeWarnList = (params) => {
     return res;
   });
 };
+//获取多灾融合预警-风险权重比例数据
+export const getDisasterProportion = (params) => {
+  const key = `${Api.getDisasterProportion}?${JSON.stringify(params)}`;
+  if (!cache.has(key)) {
+    cache.set(
+      key,
+      defHttp.post({ url: Api.getDisasterProportion, params }).finally(() => {
+        cache.delete(key);
+      })
+    );
+  }
+  return (cache.get(key) as Promise<any>).then((res) => {
+    return res;
+  });
+};
+
 //多灾融合预警
 function getLevelNum() {
   return new Promise(async (resolve) => {
@@ -399,11 +416,6 @@ function getLevelNum() {
 }
 export const getTotal = (params) => {
   const { sysOrgCode, sysDataType } = useGlobSetting();
-  let data = ref<any>({})
-  getLevelNum().then(res => {
-    data.value = res
-  })
-  console.log(data, '888')
 
   const key = `${Api.getTotal}?${JSON.stringify(params)}`;
   if (!cache.has(key)) {
@@ -414,9 +426,10 @@ export const getTotal = (params) => {
       })
     );
   }
-  return (cache.get(key) as Promise<any>).then((res) => {
+  return (cache.get(key) as Promise<any>).then(async (res) => {
     console.log(res, '多灾融合预警数据')
-     
+
+  let dataVent=await getLevelNum()
     const levelsList = [
       {
         name: "报警",
@@ -436,7 +449,7 @@ export const getTotal = (params) => {
       },
       {
         name: "低风险",
-        value: data.value ? data.value.vent : 0
+        value:  dataVent.vent || 0
       },
     ];
     //通风监测预警数据
@@ -447,7 +460,6 @@ export const getTotal = (params) => {
           ventXf: res.ventInfo.xufengliang,
           ventHf: res.ventInfo.zonghuifeng,
         }
-        console.log(data.value,'999')
         res.ventData = [
           {
             name: "报警",
@@ -467,7 +479,7 @@ export const getTotal = (params) => {
           },
           {
             name: "低风险",
-            value: data.value.vent ? data.value.vent : res.info.sysInfo.ventS.levels.blue
+            value: dataVent.vent ? dataVent.vent : res.info.sysInfo.ventS.levels.blue
           },
         ];
 
@@ -495,6 +507,91 @@ export const getTotal = (params) => {
       res.deviceWarn[`${el}_warn`] = res.info.devicekindInfo[el].count;
       res.deviceWarn[`${el}_close`] = res.info.devicekindInfo[el].netstatus;
     })
+    //瓦斯监测预警数据
+    res.gasData = reactive({})
+    res.gasData.safety_sum = res.info.sysInfo.gasS.devices.reduce((a, b) => a + b.gasNumber, 0)
+    res.gasData.gas_sum = res.info.sysInfo.gasS.devices.reduce((a, b) => a + b.pumpNumber, 0)
+    res.gasData.monitorData = res.info.sysInfo.gasS.devices.map(el => {
+      return {
+        label: el.systemname,
+        value: el.gasNumber,
+        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 = []
+   
+    if (res.bundletubeInfo && res.bundletubeInfo.msgTxt.length != 0 && res.bundletubeInfo.msgTxt[0].datalist.length != 0) {
+      res.bundletubeInfo.msgTxt[0].datalist.forEach((el, ind) => {
+        res.fireInfos.dataOn.push({
+          warnLevel: el.syswarnLevel_str,
+          smokeJd: el.syswarnLevel_des,
+          value1: el.strinstallpos,
+        });
+      });
+    } else {
+      res.fireInfos.dataOn = []
+    }
+    res.fireInfos.tempVal = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
+        ? '低风险'
+        : '低风险'
+      : '';
+    res.fireInfos.smokeVal = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
+        ? '低风险'
+        : '低风险'
+      : '';
+
+    res.fireInfos.fireVal = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.fireval &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
+        res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
+        ? '低风险'
+        : '低风险'
+      : '';
+
+    res.fireInfos.coVal = res.info.sysInfo.fireS.summaryInfo
+      ? res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
+        : '-'
+      : '';
+      console.log( res.fireInfos,'000-')
+    //粉尘监测预警数据
+     res.dustInfo = [
+          {
+            name: "报警",
+            value: res.info.sysInfo.dustS.levels.alarm
+          },
+          {
+            name: "重大风险",
+            value: res.info.sysInfo.dustS.levels.red
+          },
+          {
+            name: "较大风险",
+            value: res.info.sysInfo.dustS.levels.orange
+          },
+          {
+            name: "一般风险",
+            value: res.info.sysInfo.dustS.levels.yellow
+          },
+          {
+            name: "低风险",
+            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

@@ -347,7 +347,7 @@ export const testConfigVent: Config[] = [
     showStyle: {
       size: 'width:460px;height:260px;',
       version: '原版',
-      position: 'bottom:15px;left:15px;',
+      position: 'bottom:0px;left:15px;',
     },
   },
   {
@@ -427,7 +427,7 @@ export const testConfigVent: Config[] = [
     showStyle: {
       size: 'width:460px;height:260px;',
       version: '原版',
-      position: 'bottom:15px;left:495px;',
+      position: 'bottom:0px;left:495px;',
     },
   },
   {
@@ -510,7 +510,7 @@ export const testConfigVent: Config[] = [
     showStyle: {
       size: 'width:460px;height:260px;',
       version: '原版',
-      position: 'bottom:15px;left:975px;',
+      position: 'bottom:0px;left:975px;',
     },
   },
   //  {
@@ -1087,9 +1087,9 @@ export const testConfigDustGreen: Config[] = [
       // mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:390px;height:800px;',
+      size: 'width:420px;height:780px;',
       version: '新版',
-      position: 'top:15px;left:15px',
+      position: 'top:0px;left:15px',
     },
   },
   {
@@ -1150,9 +1150,9 @@ export const testConfigDustGreen: Config[] = [
       // mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:625px;height:260px;',
+      size: 'width:580px;height:260px;',
       version: '新版',
-      position: 'bottom:15px;left:450px;',
+      position: 'bottom:0px;left:450px;',
     },
   },
   {
@@ -1227,7 +1227,7 @@ export const testConfigDustGreen: Config[] = [
     showStyle: {
       size: 'width:390px;height:260px;',
       version: '新版',
-      position: 'bottom:15px;right:420px;',
+      position: 'bottom:0px;right:450px;',
     },
   },
   {
@@ -1291,9 +1291,9 @@ export const testConfigDustGreen: Config[] = [
       // mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:390px;height:530px;',
+      size: 'width:420px;height:530px;',
       version: '新版',
-      position: 'top:15px;right:15px;',
+      position: 'top:0px;right:15px;',
     },
   },
   {
@@ -1358,9 +1358,9 @@ export const testConfigDustGreen: Config[] = [
       // mock: BDdustMock,
     },
     showStyle: {
-      size: 'width:390px;height:260px;',
+      size: 'width:420px;height:260px;',
       version: '新版',
-      position: 'bottom:15px;right:15px;',
+      position: 'bottom:0px;right:15px;',
     },
   },
 ];
@@ -1960,9 +1960,9 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:390px;height:400px;',
+      size: 'width:420px;height:400px;',
       version: '原版',
-      position: 'top:15px;left:15px',
+      position: 'top:0px;left:15px',
     },
   },
   {
@@ -2047,9 +2047,9 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:390px;height:400px;',
+      size: 'width:420px;height:350px;',
       version: '原版',
-      position: 'top:430px;left:15px;',
+      position: 'top:415px;left:15px;',
     },
   },
   {
@@ -2110,7 +2110,7 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:945px;height:260px;',
+      size: 'width:990px;height:260px;',
       version: '原版',
       position: 'bottom:15px;left:450px;',
     },
@@ -2247,9 +2247,9 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:390px;height:510px;',
+      size: 'width:420px;height:510px;',
       version: '原版',
-      position: 'top:15px;right:15px',
+      position: 'top:0px;right:15px',
     },
   },
   {
@@ -2313,7 +2313,7 @@ export const testConfigFireGreen: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:460px;height:260px;',
+      size: 'width:420px;height:260px;',
       version: '原版',
       position: 'bottom:15px;right:15px',
     },
@@ -2910,7 +2910,7 @@ export const testConfigFusionGreen: Config[] = [
         {
           readFrom: 'ventData',
           echartOption: {
-              colorList:['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5'],
+            colorList: ['#ff0000', '#ff7700', '#d8b66f', '#dbbf2e', '#61b4c5'],
           }
         },
       ],
@@ -3148,7 +3148,7 @@ export const testConfigFusionGreen: Config[] = [
   {
     deviceType: 'fusionManageInfo',
     moduleName: '火灾监测预警',
-    pageType: 'fusion-warn-green',
+    pageType: 'fireInfos',
     moduleData: {
       header: {
         show: false,
@@ -3183,7 +3183,7 @@ export const testConfigFusionGreen: Config[] = [
       board: [
         {
           type: 'K',
-          readFrom: 'ventWarn',
+          readFrom: 'fireInfos',
           layout: 'label-top',
           items: [
             {
@@ -3205,7 +3205,18 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_card',
+          readFrom: 'fireInfos',
+          leftTitle: {
+            address: '监测位置',
+            gradewarn: '预警等级',
+            smoke: '煤自燃阶段',
+          },
+          rightTitle: {
+            temp: '温度',
+            smokeing: '烟雾',
+            fire: '火焰',
+            comax: 'CO最大值(ppm)'
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3219,7 +3230,7 @@ export const testConfigFusionGreen: Config[] = [
   {
     deviceType: 'fusionManageInfo',
     moduleName: '粉尘监测预警',
-    pageType: 'fusion-warn-green',
+    pageType: 'dustInfo',
     moduleData: {
       header: {
         show: false,
@@ -3256,7 +3267,52 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_dust',
+          readFrom: 'dustInfo',
+          echartOption: {
+            colorList: [
+              ['rgba(63, 124, 136, 1)', 'rgba(77, 193, 211, 1)'],
+              ['rgba(145, 129, 47, 1)', 'rgba(211, 184, 46, 1)'],
+              ['rgba(159, 121, 69, 1)', 'rgba(226, 173, 101, 1)'],
+              ['rgba(163, 90, 25, 1)', 'rgba(240, 114, 4, 1)'],
+              ['rgba(158, 13, 13, 1)', 'rgba(239, 2, 2, 1)'],
+            ],
+            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,
@@ -3270,7 +3326,7 @@ export const testConfigFusionGreen: Config[] = [
   {
     deviceType: 'fusionManageInfo',
     moduleName: '瓦斯监测预警',
-    pageType: 'fusion-warn-green',
+    pageType: 'gasData',
     moduleData: {
       header: {
         show: false,
@@ -3293,11 +3349,11 @@ export const testConfigFusionGreen: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'dz_fire',
+            name: 'dz_gas',
             basis: '50%',
           },
           {
-            name: 'dz_fire',
+            name: 'dz_gas',
             basis: '50%',
           },
         ],
@@ -3311,20 +3367,21 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_fire',
+          readFrom: 'gasData',
           type: 'A',
           titleData: {
             label: '安全监测系统监测点',
-            value: '25',
-          },
+            value: 'safety_sum',
+          }
         },
         {
-          readFrom: 'dz_fire',
+          readFrom: 'gasData',
           type: 'B',
           titleData: {
             label: '瓦斯抽采系统监测点',
-            value: '25',
-          },
+            value: 'gas_sum'
+          }
+
         },
       ],
       // mock: BDfireMock,
@@ -3338,7 +3395,7 @@ export const testConfigFusionGreen: Config[] = [
   {
     deviceType: 'fusionManageInfo',
     moduleName: '风险权重比例',
-    pageType: 'fusion-warn-green',
+    pageType: 'riskData',
     moduleData: {
       header: {
         show: false,
@@ -3376,9 +3433,8 @@ export const testConfigFusionGreen: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'dz_risk',
+          readFrom: 'riskData',
         },
-
       ],
       // mock: BDfireMock,
     },

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

@@ -1,188 +0,0 @@
-<template>
-  <div class="company-home">
-    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-    <template v-if="!route.query.deviceType">
-      <div class="main-container">
-        <ModuleOriginal
-          v-for="(cfg, index) in configs"
-          :key="cfg.deviceType + index"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-        />
-        <div class="left-area"></div>
-        <div class="right-area"></div>
-        <div class="bottom-area"></div>
-      </div>
-    </template>
-
-    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
-      <VentModal />
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleOriginal from './components/ModuleOriginal-green.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { useRoute } from 'vue-router';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { testConfigFireGreen } from './configurable.data';
-  import { BDFireMock } from './mock';
-  const { title = '智能通风管控系统' } = useGlobSetting();
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { data, updateData } = useInitPage(title);
-  const route = useRoute();
-  let interval: number | undefined;
-
-  onMounted(() => {
-    fetchConfigs('fire-green').then(() => {
-      configs.value = testConfigFireGreen;
-      // updateEnhancedConfigs(configs.value);
-
-      Promise.resolve(BDFireMock).then(updateData);
-      // getHomeData({}).then(updateData);
-    });
-    // setInterval(() => {
-    //   getHomeData({}).then(updateData);
-    // }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
-</script>
-<style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
-
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-    }
-  }
-
-  .company-home {
-    --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%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: #181b24;
-
-    .main-container {
-      width: 100%;
-      height: 100%;
-      margin: 0px 15px;
-      .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);
-    }
-  }
-
-  :deep(.loading-box) {
-    position: unset;
-  }
-</style>

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="common-green">
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <div class="left-area">
+          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+          <ModuleOriginal v-for="cfg in configsLeft" :key="cfg.deviceType" :show-style="cfg.showStyle"
+            :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+            :visible="true" />
+        </div>
+        <div class="bottom-area">
+          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+          <ModuleOriginal v-for="cfg in configsBottom" :key="cfg.deviceType" :show-style="cfg.showStyle"
+            :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+            :visible="true" />
+        </div>
+        <div class="right-area">
+          <greenRightTag />
+        </div>
+      </div>
+    </template>
+
+    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
+      <VentModal />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleOriginal from './components/ModuleOriginal-green.vue';
+// import greenRightTag from './components/green-right-tag.vue';
+import { list } from '../configurable.api';
+import { useRoute, useRouter } from 'vue-router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { testConfigVent, testConfigVentRealtime } from '../configurable.data';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+const { title = '智能通风管控系统' } = useGlobSetting();
+//   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+const { isOriginal, fetchConfigs } = useInitConfigs();
+const { mainTitle, 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'));
+});
+let configsBottom = computed(() => {
+  return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
+});
+
+function refresh() {
+  fetchConfigs('vent').then(() => {
+    configs.value = testConfigVent;
+    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(() => {
+  refresh();
+  initInterval();
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+
+@{theme-deepblue} {
+  .common-green {
+    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  }
+}
+
+.common-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%;
+  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: 120px;
+      height: calc(100% - 305px);
+    }
+  }
+
+  .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);
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

src/views/vent/home/configurable/components/ModuleOriginal-green.vue → src/views/vent/home/configurable/green/components/ModuleOriginal-green.vue

@@ -18,11 +18,11 @@
 <script lang="ts" setup>
   import Header from './header-green.vue';
   import Content from './content-green.vue';
-  import ModuleLeft from './original/moduleLeft-green.vue';
-  import ModuleBottom from './original/moduleBottom-green.vue';
+  import ModuleLeft from './moduleLeft-green.vue';
+  import ModuleBottom from './moduleBottom-green.vue';
   import { computed, ref } from 'vue';
   import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../hooks/helper';
+  import { getFormattedText } from '../../hooks/helper';
   // import { ModuleProps } from '../types';
 
   const props = defineProps<{

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

@@ -0,0 +1,283 @@
+<template>
+    <div class="center-area-green">
+        <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>
+            </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
+                        ? '低风险'
+                        : paramData.fc == 101
+                            ? '低风险'
+                            : paramData.fc == 102
+                                ? '一般风险'
+                                : paramData.fc == 103
+                                    ? '较大风险'
+                                    : paramData.fc == 104
+                                        ? '重大风险'
+                                        : paramData.fc == 201
+                                            ? '报警'
+                                            : paramData.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
+                        ? '低风险'
+                        : paramData.tf == 101
+                            ? '低风险'
+                            : paramData.tf == 102
+                                ? '一般风险'
+                                : paramData.tf == 103
+                                    ? '较大风险'
+                                    : paramData.tf == 104
+                                        ? '重大风险'
+                                        : paramData.tf == 201
+                                            ? '报警'
+                                            : paramData.tf }}</div>
+                </div>
+            </div>
+            <div class="gas-warn">
+                <div class="gas-icon"></div>
+                <div class="item-content1">
+                    <div class="ite-content">
+                        <div class="ite-label">瓦斯监测预警</div>
+                        <div class="ite-val">{{ paramData.ws == 0
+                            ? '低风险'
+                            : paramData.ws == 101
+                                ? '低风险'
+                                : paramData.ws == 102
+                                    ? '一般风险'
+                                    : paramData.ws == 103
+                                        ? '较大风险'
+                                        : paramData.ws == 104
+                                            ? '重大风险'
+                                            : paramData.ws == 201
+                                                ? '报警'
+                                                : paramData.ws }}</div>
+                    </div>
+                    <div class="ite-content">
+                        <div class="ite-label">矿井瓦斯等级鉴定</div>
+                        <div class="ite-val">{{ sysOrgCode == 'sdmtjtbdmk' ? '高瓦斯' : '低瓦斯' }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="device-warn">
+                <div class="device-icon"></div>
+                <div class="item-content">
+                    <div class="ite-label">设备监测预警</div>
+                    <div class="ite-val">{{ paramData.sb == 0
+                        ? '低风险'
+                        : paramData.sb == 101
+                            ? '低风险'
+                            : paramData.sb == 102
+                                ? '一般风险'
+                                : paramData.sb == 103
+                                    ? '较大风险'
+                                    : paramData.sb == 104
+                                        ? '重大风险'
+                                        : paramData.sb == 201
+                                            ? '报警'
+                                            : paramData.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
+                        ? '低风险'
+                        : paramData.fire == 101
+                            ? '低风险'
+                            : paramData.fire == 102
+                                ? '一般风险'
+                                : paramData.fire == 103
+                                    ? '较大风险'
+                                    : paramData.fire == 104
+                                        ? '重大风险'
+                                        : paramData.fire == 201
+                                            ? '报警'
+                                            : paramData.fire }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useGlobSetting } from '/@/hooks/setting';
+let props = defineProps({
+    paramData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+const { sysOrgCode, sysDataType } = useGlobSetting();
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .center-area-green {
+        --image-model_container_img: url('@/assets/images/themify/deepblue/home-container/configurable/1-1.png');
+        --image-model_risk_score: url('@/assets/images/themify/deepblue/home-container/configurable/1-2.png');
+        --image-model_dust_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-7.png');
+        --image-model_vent_warn: url('@/assets/images/themify/deepblue/home-container/configurable/1-5.png');
+        --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_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');
+    }
+}
+
+.center-area-green {
+    --image-model_container_img: url('@/assets/images/home-green/1-1.png');
+    --image-model_risk_score: url('@/assets/images/home-green/1-2.png');
+    --image-model_dust_warn: url('@/assets/images/home-green/1-7.png');
+    --image-model_vent_warn: url('@/assets/images/home-green/1-5.png');
+    --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_item_content: url('@/assets/images/home-green/1-8.png');
+    --image-model_item_content1: url('@/assets/images/home-green/1-9.png');
+    height: 100%;
+
+    .container {
+        position: relative;
+        width: 100%;
+        height: calc(100% - 25px);
+        margin-top: 25px;
+        background: var(--image-model_container_img) no-repeat center;
+        background-size: 95% 100%;
+    }
+
+    .risk-score {
+        position: absolute;
+        left: 50%;
+        top: -46px;
+        transform: translate(-44%, 0);
+        width: 206px;
+        height: 60px;
+        font-size: 18px;
+        color: #fff;
+        background: var(--image-model_risk_score) no-repeat;
+        background-size: 100% 100%;
+
+        .item-label {
+            text-align: center;
+            margin-bottom: 5px;
+
+        }
+
+        .item-val {
+            text-align: center;
+            font-family: 'douyuFont';
+        }
+    }
+
+    .dust-warn {
+        position: absolute;
+        left: 220px;
+        top: 52px;
+        width: 120px;
+        height: 106px;
+        background: var(--image-model_dust_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .vent-warn {
+        position: absolute;
+        left: 134px;
+        top: 232px;
+        width: 120px;
+        height: 106px;
+        background: var(--image-model_vent_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .gas-warn {
+        position: absolute;
+        left: 434px;
+        top: 368px;
+        width: 120px;
+        height: 106px;
+        background: var(--image-model_gas_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .device-warn {
+        position: absolute;
+        right: 130px;
+        top: 222px;
+        width: 120px;
+        height: 106px;
+        background: var(--image-model_device_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .fire-warn {
+        position: absolute;
+        right: 121px;
+        top: 52px;
+        width: 120px;
+        height: 106px;
+        background: var(--image-model_fire_warn) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .item-content {
+        position: absolute;
+        left: -4px;
+        top: -54px;
+        width: 127px;
+        height: 56px;
+        background: var(--image-model_item_content) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .item-content1 {
+        display: flex;
+        position: absolute;
+        left: -60px;
+        top: -54px;
+        width: 258px;
+        height: 56px;
+        background: var(--image-model_item_content1) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .ite-label {
+        text-align: center;
+        margin-bottom: 8px;
+        padding-top: 4px;
+        font-size: 12px;
+    }
+
+    .ite-val {
+        width: 100%;
+        position: absolute;
+        text-align: center;
+        font-family: 'douyuFont';
+        font-size: 12px;
+        bottom: 2px;
+    }
+
+    .ite-content {
+        width: 50%;
+        height: 100%;
+    }
+}
+</style>

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

@@ -83,16 +83,16 @@
           <DzList :listOption="config.config.listOption" :listData="config.data"></DzList>
         </template>
         <template v-if="config.name === 'dz_card'">
-          <DzCard></DzCard>
+          <DzCard :titleLeft="config.config.leftTitle" :titleRight="config.config.rightTitle" :paramData="config.data"></DzCard>
         </template>
         <template v-if="config.name === 'dz_dust'">
-          <DzDust></DzDust>
+          <DzDust :echartOption="config.config" :paramData="config.data"></DzDust>
         </template>
         <template v-if="config.name === 'dz_risk'">
-          <DzRisk></DzRisk>
+          <DzRisk :riskData="config.data"></DzRisk>
         </template>
-        <template v-if="config.name === 'dz_fire'">
-          <DzFire :type="config.config.type" :titleData="config.config.titleData"></DzFire>
+        <template v-if="config.name === 'dz_gas'">
+          <DzGas :type="config.config.type" :titleData="config.config.titleData" :gasData="config.data"></DzGas>
         </template>
       
 
@@ -105,37 +105,33 @@ import { computed } from 'vue';
 import {
   CommonItem,
   Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import MiniBoard from './detail/MiniBoard-green.vue';
-import TimelineList from './detail/TimelineList.vue';
-import TimelineListNew from './detail/TimelineListNew.vue';
-import CustomList from './detail/CustomList.vue';
-import CustomGallery from './detail/CustomGallery.vue';
-import ComplexList from './detail/ComplexList-green.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable-green.vue';
-import CustomChart from './detail/CustomChart.vue';
+} from '../../../../deviceManager/configurationTable/types';
+import MiniBoard from './MiniBoard-green.vue';
+import ComplexList from './ComplexList-green.vue';
+import CustomTable from './CustomTable-green.vue';
+import DzChart from './dz-chart.vue'
+import DzList from './dz-list.vue'
+import DzCard from './dz-card.vue'
+import DzDust from './dz-dust.vue'
+import DzGas from './dz-gas.vue'
+import DzRisk from './dz-risk.vue'
+
+import TimelineList from '../../components/detail/TimelineList.vue';
+import TimelineListNew from '../../components/detail/TimelineListNew.vue';
+import CustomList from '../../components/detail/CustomList.vue';
+import CustomGallery from '../../components/detail/CustomGallery.vue';
+import GalleryList from '../../components/detail/GalleryList.vue';
+import CustomChart from '../../components/detail/CustomChart.vue';
 import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from './preset/QHCurve.vue';
-import MeasureDetail from './preset/MeasureDetail.vue';
-import CustomTabs from './preset/CustomTabs.vue';
+import { getData, getFormattedText } from '../../hooks/helper';
+import BlastDelta from '../../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from '../../components/preset/QHCurve.vue';
+import MeasureDetail from '../../components/preset/MeasureDetail.vue';
+import CustomTabs from '../../components/preset/CustomTabs.vue';
 import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-import DzChart from './preset/dz-chart.vue'
-import DzList from './preset/dz-list.vue'
-import DzCard from './preset/dz-card.vue'
-import DzDust from './preset/dz-dust.vue'
-import DzFire from './preset/dz-fire.vue'
-import DzRisk from './preset/dz-risk.vue'
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
+import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
+import { config } from 'dotenv';
+
 
 const props = defineProps<{
   data: any;

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

@@ -4,18 +4,18 @@
             <div class="gas-item">
                 <div class="detail-box">
                     <div class="detail-container">
-                        <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
+                        <div class="detail-item" v-for="(item, index) in infoData.dataOn" :key="index">
                             <div class="item-box">
-                                <div class="item-box-label">监测位置</div>
-                                <div class="item-box-val">竖管1嘻嘻嘻嘻嘻嘻</div>
+                                <div class="item-box-label">{{ titleLeft.address }}</div>
+                                <div class="item-box-val">{{ item.value1 || '-' }}</div>
                             </div>
                             <div class="item-box">
-                                <div class="item-box-label">预警等级</div>
-                                <div class="item-box-val">橙色预警</div>
+                                <div class="item-box-label">{{ titleLeft.gradewarn }}</div>
+                                <div class="item-box-val">{{ item.warnLevel || '-' }}</div>
                             </div>
                             <div class="item-box">
-                                <div class="item-box-label">煤自燃阶段</div>
-                                <div class="item-box-val">加速氧化阶段</div>
+                                <div class="item-box-label">{{ titleLeft.smoke }}</div>
+                                <div class="item-box-val">{{ item.smokeJd || '-' }}</div>
                             </div>
                         </div>
                     </div>
@@ -26,20 +26,20 @@
                     <div class="detail-container">
                         <div class="detail-item">
                             <div class="item-box1">
-                                <div class="item-box-label">温度</div>
-                                <div class="item-box-val1">低风险</div>
+                                <div class="item-box-label">{{ titleRight.temp }}</div>
+                                <div class="item-box-val1">{{ infoData.tempVal }}</div>
                             </div>
                             <div class="item-box1">
-                                <div class="item-box-label">烟雾</div>
-                                <div class="item-box-val1">束管1</div>
+                                <div class="item-box-label">{{ titleRight.smokeing }}</div>
+                                <div class="item-box-val1">{{ infoData.smokeVal }}</div>
                             </div>
                             <div class="item-box1">
-                                <div class="item-box-label">火焰</div>
-                                <div class="item-box-val1">束管1</div>
+                                <div class="item-box-label">{{ titleRight.fire }}</div>
+                                <div class="item-box-val1">{{ infoData.fireVal }}</div>
                             </div>
                             <div class="item-box1">
-                                <div class="item-box-label">CO最大值(ppm)</div>
-                                <div class="item-box-val1">182.39</div>
+                                <div class="item-box-label">{{ titleRight.comax }}</div>
+                                <div class="item-box-val1">{{ infoData.coVal }}</div>
                             </div>
                         </div>
                     </div>
@@ -50,16 +50,50 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, reactive, watch } from 'vue'
 
-let gasMonitor = ref([
-    { label: '测试', value: 1, value1: 0 },
-    { label: '测试1', value: 0, value1: 1 },
-])
+let props = defineProps({
+    titleLeft: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    titleRight: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    paramData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+let infoData = reactive({})
+
+watch(() => props.paramData, (newV, oldV) => {
+    console.log(newV, '火灾---')
+    infoData = Object.assign({}, newV)
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .dzCard {
+        --image-model_gas_item: url('@/assets/images/themify/deepblue/home-container/configurable/900.png');
+        --image-model_gas_item1: url('@/assets/images/themify/deepblue/home-container/configurable/1100.png');
+    }
+}
+
 .dzCard {
+    --image-model_gas_item: url('@/assets/images/home-green/900.png');
+    --image-model_gas_item1: url('@/assets/images/home-green/1100.png');
     width: 100%;
     height: 72%;
     position: absolute;
@@ -78,12 +112,12 @@ let gasMonitor = ref([
             margin: 0px 5px;
 
             &:nth-child(1) {
-                background: url('@/assets/images/home-green/900.png') no-repeat;
+                background: var(--image-model_gas_item) no-repeat;
                 background-size: 100% 100%;
             }
 
             &:nth-child(2) {
-                background: url('@/assets/images/home-green/1100.png') no-repeat;
+                background: var(--image-model_gas_item1) no-repeat;
                 background-size: 100% 100%;
             }
 
@@ -122,7 +156,8 @@ let gasMonitor = ref([
 
                         .item-box-label {
                             flex-shrink: 0;
-                            width: 70px;
+                            width: 60px;
+                            font-size: 12px;
                             text-align: left;
                             margin-right: 10px;
                         }
@@ -133,12 +168,13 @@ let gasMonitor = ref([
                             font-family: 'douyuFont';
                             font-size: 12px;
                         }
-                          .item-box-val1 {
+
+                        .item-box-val1 {
                             text-align: right;
                             color: #b9f1ff;
                             font-family: 'douyuFont';
                             font-size: 12px;
-                            
+
                         }
                     }
                 }

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

@@ -8,191 +8,39 @@
 import { ref, reactive, watch, onMounted, nextTick } from 'vue'
 import * as echarts from 'echarts';
 
-//获取dom元素节点
-let chartDust = ref<any>();
-const colors = [{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#8331D9"
-    },
-    {
-        offset: 0.5,
-        color: "#720DFF"
-    },
-    {
-        offset: 0.5,
-        color: "#B635FC"
-    },
-    {
-        offset: 1,
-        color: "#7F2CF1"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#F27921"
-    },
-    {
-        offset: 0.5,
-        color: "#EE3E70"
-    },
-    {
-        offset: 0.5,
-        color: "#F48D35"
-    },
-    {
-        offset: 1,
-        color: "#C82957"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#F17620"
-    },
-    {
-        offset: 0.5,
-        color: "#F5D01C"
-    },
-    {
-        offset: 0.5,
-        color: "#EF8E08"
-    },
-    {
-        offset: 1,
-        color: "#FEDC44"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#4D34FF"
-    },
-    {
-        offset: 0.5,
-        color: "#244EFB"
-    },
-    {
-        offset: 0.5,
-        color: "#5034D9"
-    },
-    {
-        offset: 1,
-        color: "#316CE8"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#20AAF8"
-    },
-    {
-        offset: 0.5,
-        color: "#2C74FF"
-    },
-    {
-        offset: 0.5,
-        color: "#27AEFA"
-    },
-    {
-        offset: 1,
-        color: "#4D8AFF"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#289DF5"
-    },
-    {
-        offset: 0.5,
-        color: "#0DE8FF"
-    },
-    {
-        offset: 0.5,
-        color: "#49B1FB"
-    },
-    {
-        offset: 1,
-        color: "#17E9FD"
-    }
-    ]
-},
-{
-    type: "linear",
-    x: 1,
-    y: 0,
-    x2: 0,
-    y2: 0,
-    colorStops: [{
-        offset: 0,
-        color: "#4FC3B2"
-    },
-    {
-        offset: 0.5,
-        color: "#49B5A3"
+let props = defineProps({
+    echartOption: {
+        type: Object,
+        default: () => {
+            return {}
+        }
     },
-    {
-        offset: 0.5,
-        color: "#57D1BF"
-    },
-    {
-        offset: 1,
-        color: "#5AD1BD"
+    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 offsetX = 8;
         const offsetY = 4;
-        const colorList=[
-            ['rgba(63, 124, 136, 1)','rgba(77, 193, 211, 1)'],
-              ['rgba(145, 129, 47, 1)','rgba(211, 184, 46, 1)'],
-                ['rgba(159, 121, 69, 1)','rgba(226, 173, 101, 1)'],
-                  ['rgba(163, 90, 25, 1)','rgba(240, 114, 4, 1)'],
-                    ['rgba(158, 13, 13, 1)','rgba(239, 2, 2, 1)'],
-        ];
+
+        const colorList = [
+            ['rgba(63, 124, 136, 1)', 'rgba(77, 193, 211, 1)'],
+            ['rgba(145, 129, 47, 1)', 'rgba(211, 184, 46, 1)'],
+            ['rgba(159, 121, 69, 1)', 'rgba(226, 173, 101, 1)'],
+            ['rgba(163, 90, 25, 1)', 'rgba(240, 114, 4, 1)'],
+            ['rgba(158, 13, 13, 1)', 'rgba(239, 2, 2, 1)'],
+        ]
         // 绘制左侧面
         const CubeLeft = echarts.graphic.extendShape({
             shape: {
@@ -254,14 +102,14 @@ function getOption() {
             },
             xAxis: {
                 type: 'category',
-                data: ['低风险', '一般风险', '较大风险', '重大风险', '报警'],
+                data: xData.value,
                 // X
                 axisLine: {
                     show: true,
                     lineStyle: {
                         // width: 1,
-                        color: '#2B7BD6',
-                    },
+                        color: 'rgba(34, 55, 81,.7)',
+                    }
                 },
                 axisTick: {
                     show: false,
@@ -269,20 +117,14 @@ function getOption() {
                 axisLabel: {
                     fontSize: 14,
                     interval: 0,
-                },
-                axisLine: {
-                    show: true,
-                    lineStyle: {
-                        color: 'rgba(34, 55, 81,.7)',
-                    },
-                },
-                axisLabel: {
                     textStyle: {
                         color: '#FFF',  //更改坐标轴文字颜色
                         fontSize: 12     //更改坐标轴文字大小
                     }
-                }
+                },
             },
+
+
             yAxis: {
                 name: '',
                 type: 'value',
@@ -293,7 +135,7 @@ function getOption() {
                     show: true,
                     lineStyle: {
                         // type: 'dashed',
-                      color: 'rgba(34, 55, 81,.7)',
+                        color: 'rgba(34, 55, 81,.7)',
                     },
                 },
                 axisTick: {
@@ -301,13 +143,12 @@ function getOption() {
                 },
                 axisLabel: {
                     fontSize: 14,
-                },
-                axisLabel: {
                     textStyle: {
                         color: '#FFF',  //更改坐标轴文字颜色
                         fontSize: 12     //更改坐标轴文字大小
                     }
-                }
+                },
+
             },
             series: [
                 // 柱体
@@ -316,7 +157,6 @@ function getOption() {
                     type: 'custom',
                     stack: "Ad",
                     renderItem: (params, api) => {
-                        console.log(params,'111---')
                         const location = api.coord([api.value(0), api.value(1)]);
                         return {
                             type: 'group',
@@ -394,7 +234,7 @@ function getOption() {
                             ],
                         };
                     },
-                    data: [21, 35, 44, 61, 74,],
+                    data: yData.value,
                 },
             ],
         };
@@ -405,9 +245,13 @@ function getOption() {
     });
 }
 
-onMounted(() => {
+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>
 

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

@@ -2,13 +2,14 @@
     <div class="dz-fire">
         <div class="fire-container" :class="`fire-container_${type}`">
             <div class="title-box" :class="`title-box_${type}`">
-                <div :class="`title-box-label_${type}`">{{ titleData.label }}</div>
-                <div :class="`title-box-val_${type}`">{{ titleData.value }}</div>
+                <div :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}`">
-                <div class="content-box-item" v-for="(item, index) in List" :key="index">
+                <div class="content-box-item" v-for="(item, index) in gasData.monitorData" :key="index">
                     <div class="box-item-label">{{ item.label }}</div>
-                    <div class="box-item-value">{{ item.value }}</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>
@@ -16,34 +17,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref, } from 'vue'
+import { ref, watch } from 'vue'
 
 let props = defineProps({
     type: {
         type: String,
-        defualt: '',
+        default: ''
     },
     titleData: {
+        type: Object,
+        defualt: () => {
+            return {}
+        },
+    },
+    gasData: {
         type: Object,
         default: () => {
             return {}
         }
     }
 })
-
-let List = ref<any[]>([
-    { label: '22煤', value: '20' },
-    { label: '32煤', value: '21' },
-    { label: '42煤', value: '22' },
-    { label: '52煤', value: '23' },
-
-])
-
-
 </script>
 
 <style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .dz-fire {
+        --image-model_fire-container_A: url('@/assets/images/themify/deepblue/home-container/configurable/1300.png');
+        --image-model_fire-container_B: url('@/assets/images/themify/deepblue/home-container/configurable/1200.png');
+    }
+}
+
 .dz-fire {
+    --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;
     box-sizing: border-box;
@@ -52,7 +60,7 @@ let List = ref<any[]>([
         position: relative;
         width: 100%;
         height: 85px;
-        background: url('@/assets/images/home-green/1300.png') no-repeat;
+        background: var(--image-model_fire-container_A) no-repeat;
         background-size: 100% 100%;
     }
 
@@ -60,7 +68,7 @@ let List = ref<any[]>([
         position: relative;
         width: 100%;
         height: 85px;
-        background: url('@/assets/images/home-green/1200.png') no-repeat;
+        background: var(--image-model_fire-container_B) no-repeat;
         background-size: 100% 100%;
     }
 
@@ -81,7 +89,8 @@ let List = ref<any[]>([
         left: 122px;
         top: 32px;
     }
-    .content-box-item{
+
+    .content-box-item {
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -89,9 +98,10 @@ let List = ref<any[]>([
         justify-content: center;
         align-items: center;
     }
-    .box-item-value{
-         font-family: 'douyuFont';
-                    font-size: 12px;
+
+    .box-item-value {
+        font-family: 'douyuFont';
+        font-size: 12px;
     }
 
 
@@ -128,6 +138,7 @@ let List = ref<any[]>([
         width: 398px;
         height: 42px;
     }
+
     .content-box_B {
         display: flex;
         width: 398px;

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

@@ -12,13 +12,13 @@
                         <div class="warn-count">
                             <span>{{ `${item.warnText}&nbsp:&nbsp` }}</span>
                             <span :class="item.warnCount ? 'num-count1' : 'num-count'">{{ listData[item.warnCount] || 0
-                                }}</span>
+                            }}</span>
                         </div>
                         <div class="close-count">
                             <span> {{ `${item.closeText}&nbsp:&nbsp` }}</span>
                             <span :class="item.closeCount ? 'num-count1' : 'num-count'">{{ listData[item.closeCount] ||
                                 0
-                                }}</span>
+                            }}</span>
                         </div>
                     </div>
                 </div>
@@ -56,7 +56,17 @@ watch(() => props.listData, (newV, oldV) => {
 </script>
 
 <style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .dz-list {
+        --image-model_icon-item: url('@/assets/images/themify/deepblue/home-container/configurable/1600.png');
+    }
+}
+
 .dz-list {
+    --image-model_icon-item: url('@/assets/images/home-green/1600.png');
+
     width: 100%;
     height: 100%;
 
@@ -73,7 +83,7 @@ watch(() => props.listData, (newV, oldV) => {
             position: relative;
             width: 100%;
             height: 46px;
-            background: url('@/assets/images/home-green/1600.png') no-repeat;
+            background: var(--image-model_icon-item) no-repeat;
             background-size: 100% 100%;
             display: flex;
             align-items: center;

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

@@ -8,10 +8,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+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(() => {
@@ -24,7 +34,7 @@ function getOption() {
                 }, {
                     offset: 1, color: 'rgba(95, 228, 255,1)' // 100% 处的颜色
                 }],
-                // global: false // 缺省为 false
+
             },
             {
                 type: 'radial',
@@ -34,7 +44,7 @@ function getOption() {
                 }, {
                     offset: 1, color: 'rgba(86, 255, 171,1)' // 100% 处的颜色
                 }],
-                // global: false // 缺省为 false
+
             },
             {
                 type: 'radial',
@@ -44,7 +54,7 @@ function getOption() {
                 }, {
                     offset: 1, color: 'rgba(255, 255, 86,1)' // 100% 处的颜色
                 }],
-                // global: false // 缺省为 false
+
             },
             {
                 type: 'radial',
@@ -54,36 +64,32 @@ function getOption() {
                 }, {
                     offset: 1, color: 'rgba(134, 88, 255,1)' // 100% 处的颜色
                 }],
-                // global: false // 缺省为 false
-            },
-        ]
-        const arr = [
-            { value: 123, name: '通风' },
-            { value: 102, name: '火灾' },
-            { value: 122, name: '瓦斯' },
-            { value: 137, name: '粉尘' },
 
+            },
         ]
         let myChart = echarts.init(riskPie.value);
         let option = {
             color: colorList,
-            tooltip: {
-                trigger: 'item'
-            },
+            // tooltip: {
+            //     trigger: 'item'
+            // },
             series: [{
                 type: 'pie',
                 center: ['50%', '50%'],
                 radius: ['48%', '70%'],
                 // clockwise: false,
-                avoidLabelOverlap: false,
+                // avoidLabelOverlap: true,
                 emphasis: {
                     label: {
                         show: true
+                    },
+                    itemStyle: {
+                        color: function (params) {
+                            return colorList[params.dataIndex]
+                        }
                     }
                 },
-                
                 // hoverOffset: 0,
-                 highlight: true,
                 itemStyle: {
                     normal: {
                         color: function (params) {
@@ -94,32 +100,36 @@ function getOption() {
                 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: [-30, 15, -20, 15]
-                }
-            }
+                    rich: {
+                        hr: {
+                            backgroundColor: 't',
+                            borderRadius: 3,
+                            width: 3,
+                            height: 3,
+                            padding: [3, 3, 0, -12]
+                        },
+                        a: {
+                            padding: [-10, 5, -15, 5]
+                        }
+                    }
                 },
 
 
                 labelLine: {
                     normal: {
-                        length: 10,
+                        length: 20,
                         length2: 20,
                         lineStyle: {
                             width: 1
                         }
                     }
                 },
-                data: arr,
+                data: echartData.value,
             }]
         };
         myChart.setOption(option);
@@ -129,22 +139,32 @@ function getOption() {
     });
 }
 
-onMounted(() => {
+watch(() => props.riskData, (newV, oldV) => {
+    echartData.value = newV
     getOption()
+}, { immediate: true })
 
-})
 </script>
 
 <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');
+        --image-model_risk-center: url('@/assets/images/themify/deepblue/home-container/configurable/1500.png');
+    }
+}
+
 .dz-risk {
+    --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: url('@/assets/images/home-green/1400.png') no-repeat center;
+        background: var(--image-model_risk-container) no-repeat center;
         background-size: auto 100%;
 
         .risk-center {
@@ -154,7 +174,7 @@ onMounted(() => {
             transform: translate(-50%, -50%);
             width: 100%;
             height: 80px;
-            background: url('@/assets/images/home-green/1500.png') no-repeat center;
+            background: var( --image-model_risk-center) no-repeat center;
             background-size: auto 100%;
         }
 

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

@@ -0,0 +1,199 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="green-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
+        :key="index" @click="menuClick(index, item)">
+        <div>{{ item.name }}</div>
+        <!-- menu-item -->
+        <div v-if="activeIndex == index && isShowMenuItem && item.MenuItemList.length != 0" class="nav-menu-item">
+          <div class="nav-menu-content">
+            <div :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+              v-for="(ite, ind) in item.MenuItemList" :key="ind" @click.stop="menuItemClick(ind)">{{ ite.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+let props = defineProps({
+  Title: {
+    type: String,
+    default: ''
+  },
+  activeIndex: {
+    type: Number,
+    default: 0
+  }
+})
+
+let menuList = ref<any[]>([
+  {
+    name: '灾害预警', MenuItemList: [
+      // { name: '光纤测温监测' },
+      // { name: '束管监测' },
+      // { name: '智能注氮系统' },
+      // { name: '智能注浆系统' },
+      // { name: '火灾监测预警' },
+      // { name: '色谱仪报表分析' },
+    ]
+  },
+  { name: '火灾监控', MenuItemList: [] },
+  { name: '粉尘监控', MenuItemList: [] },
+  { name: '多灾融合预警', MenuItemList: [] },
+  // { name: '智能通风', MenuItemList: [] },
+  // { name: '瓦斯监控', MenuItemList: [] },
+  // { name: '综合管控', MenuItemList: [] },
+])//一级菜单列表
+
+
+let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
+let menuItemActive = ref(0)//menuItem当前激活选项
+let $emit = defineEmits(['menuToggle'])
+
+
+//menu选项切换
+function menuClick(index, item) {
+  isShowMenuItem.value = !isShowMenuItem.value
+  //menu切换，界面跳转
+  $emit('menuToggle', item, index)
+}
+
+//menuItem选项切换
+function menuItemClick(ind) {
+  menuItemActive.value = ind
+  isShowMenuItem.value = false
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .green-nav {
+    --image-model_green-nav: url('@/assets/images/themify/deepblue/home-container/configurable/green-nav-bg.png');
+    --image-model_nav-menu-active: url('@/assets/images/themify/deepblue/home-container/configurable/green-menu-bg.png');
+    --image-model_nav-menu-item: url('@/assets/images/themify/deepblue/home-container/configurable/green-menu-item.png');
+  }
+}
+
+.green-nav {
+  --image-model_green-nav: url('@/assets/images/home-green/green-nav-bg.png');
+  --image-model_nav-menu-active: url('@/assets/images/home-green/green-menu-bg.png');
+  --image-model_nav-menu-item: url('@/assets/images/home-green/green-menu-item.png');
+
+  position: relative;
+  position: relative;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--image-model_green-nav) no-repeat;
+  background-size: 100% 100%;
+
+  .main-title {
+    width: 518px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: 70px;
+    font-family: 'douyuFont';
+    font-size: 20px;
+    letter-spacing: 2px;
+  }
+
+  .nav-menu {
+    position: absolute;
+    top: 0;
+    left: 675px;
+    width: 880px;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+
+    .nav-menu-active {
+      position: relative;
+      width: 120px;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin: 0px 20px;
+      font-size: 18px;
+      letter-spacing: 2px;
+      background: var(--image-model_nav-menu-active) no-repeat;
+      background-size: 100% 100%;
+    }
+
+    .nav-menu-unactive {
+      position: relative;
+      width: 120px;
+      height: 60px;
+      line-height: 60px;
+      text-align: center;
+      margin: 0px 10px;
+      font-size: 16px;
+      letter-spacing: 2px;
+      background-size: 100% 100%;
+      cursor: pointer;
+    }
+
+    .nav-menu-item {
+      position: absolute;
+      left: -34px;
+      top: 56px;
+      width: 186px;
+      height: 273px;
+      padding: 28px 12px 12px 12px;
+      background: var(--image-model_nav-menu-item) no-repeat;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box;
+
+      .nav-menu-content {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+
+        .menu-item-active {
+          width: 100%;
+          height: 36px;
+          line-height: 36px;
+          font-size: 14px;
+          background: linear-gradient(to right, transparent, rgba(47, 132, 111), transparent);
+        }
+
+        .menu-item-unactive {
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+        }
+      }
+    }
+
+    // @keyframes fadeIn {
+    //   from {
+    //     opacity: 0;
+    //   }
+
+    //   to {
+    //     opacity: 1;
+    //   }
+    // }
+
+    // /* 定义淡出动画 */
+    // @keyframes fadeOut {
+    //   from {
+    //     opacity: 1;
+    //   }
+
+    //   to {
+    //     opacity: 0;
+    //   }
+    // }
+  }
+}
+</style>

src/views/vent/home/configurable/components/header-green.vue → src/views/vent/home/configurable/green/components/header-green.vue

@@ -39,8 +39,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, watch } from 'vue';
-  import { Config } from '../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../hooks/useInit';
+  import { Config } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="company-home">
+  <div class="dust-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
@@ -25,14 +25,14 @@
 </template>
 <script lang="ts" setup>
   import { onMounted, onUnmounted } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  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';
+  import { BDDustMock } from '../mock';
+  import { testConfigDustGreen } from '../configurable.data';
 
   const { title = '智能通风管控系统' } = useGlobSetting();
   const { configs, fetchConfigs } = useInitConfigs();
@@ -142,28 +142,25 @@
   }
 
   @{theme-deepblue} {
-    .company-home {
+    .dust-green{
       --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
     }
   }
 
-  .company-home {
+  .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%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: #181b24;
+     width: 100%;
+  height: 100%;
+  position: relative;
 
     .main-container {
       width: 100%;
       height: 100%;
-      margin: 0px 15px;
-
+   
       .left-area {
         position: absolute;
         left: 0;

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

@@ -0,0 +1,151 @@
+<template>
+  <div class="fire-green">
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" />
+      </div>
+    </template>
+
+    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+      <VentModal />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleOriginal from './components/ModuleOriginal-green.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { useRoute } from 'vue-router';
+import { useGlobSetting } from '/@/hooks/setting';
+import { testConfigFireGreen } from '../configurable.data';
+import { BDFireMock } from '../mock';
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData } = useInitPage(title);
+const route = useRoute();
+let interval: number | undefined;
+
+onMounted(() => {
+  fetchConfigs('fire-green').then(() => {
+    configs.value = testConfigFireGreen;
+    // updateEnhancedConfigs(configs.value);
+
+    Promise.resolve(BDFireMock).then(updateData);
+    // getHomeData({}).then(updateData);
+  });
+  // setInterval(() => {
+  //   getHomeData({}).then(updateData);
+  // }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .fire-green {
+    --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');
+  }
+}
+
+.fire-green {
+  --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;
+
+  .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);
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -3,45 +3,38 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <ModuleOriginal
-          v-for="(cfg, index) in configs"
-          :key="cfg.deviceType + index"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :data="data"
-          :visible="true"
-        />
+        <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+          :visible="true" />
       </div>
     </template>
 
     <div class="center-area">
-      <CenterAreaGreen></CenterAreaGreen>
+      <CenterAreaGreen :paramData="paramData"></CenterAreaGreen>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
+import { 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';
 import { useRoute } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigFusionGreen } from './configurable.data';
-import { BDFireMock } from './mock';
-import { getTotal } from './configurable.api';
+import { testConfigFusionGreen } from '../configurable.data';
+import { getTotal, getDisasterProportion } from '../configurable.api';
 const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
-
+const paramData = reactive<any>({})
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
   timer = setTimeout(
     async () => {
       getTotal({}).then(updateData);
+      getCenterList()
       if (timer) {
         timer = null;
       }
@@ -50,11 +43,31 @@ function getMonitor(flag = false) {
     flag ? 0 : 20000
   );
 }
+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;
+  paramData.sb = res.info.deviceWarnInfo.maxLevel;
+  paramData.fc = res.info.sysInfo.dustS.maxLevel;
+  paramData.riskLevel = res.info.riskLevel;
+  let Levels = Object.assign({}, await getDisasterProportion({}));
+  paramData.levels =
+    Levels.level > 0 && Levels.level <= 1
+      ? 101
+      : Levels.level > 1 && Levels.level <= 2
+        ? 102
+        : Levels.level > 2 && Levels.level <= 3
+          ? 103
+          : Levels.level > 3 && Levels.level <= 4
+            ? 104
+            : 0;
+}
 onMounted(() => {
   fetchConfigs('fusion-warn-green').then(() => {
     configs.value = testConfigFusionGreen;
     // updateEnhancedConfigs(configs.value);
-    // Promise.resolve(BDFireMock).then(updateData);
     getMonitor(true);
   });
 });
@@ -67,12 +80,16 @@ onUnmounted(() => {
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
+@{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/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;
@@ -88,7 +105,7 @@ onUnmounted(() => {
       width: 420px;
       height: 100%;
       padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+      background: var( --image-model_left-area) no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
       overflow-y: auto;
@@ -101,7 +118,7 @@ onUnmounted(() => {
       width: calc(100% - 435px);
       height: 290px;
       padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
+      background: var(--image-model_bottom-area) no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
     }
@@ -113,7 +130,7 @@ onUnmounted(() => {
       width: 420px;
       height: calc(100% - 305px);
       padding: 15px 15px 0px 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+      background: var( --image-model_left-area) no-repeat;
       background-size: 100% 100%;
       box-sizing: border-box;
       overflow-y: auto;

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

@@ -14,7 +14,7 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
-import { useInitPage } from './hooks/useInit';
+import { useInitPage } from '../hooks/useInit';
 import fireGreen from './fire-green.vue';
 import dustGreen from './dust-green.vue';
 import fusionWarnGreen from './fusion-warn-green.vue'
@@ -125,9 +125,7 @@ onUnmounted(() => { });
     border-bottom: 2px solid @vent-configurable-home-light-border;
   }
 
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
-  }
+  
 
   .module-monitor-bar {
     position: absolute;