Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/hooks/vent/useSvgAnimation.ts

@@ -1,4 +1,5 @@
 import { ref } from 'vue';
+import _ from 'lodash';
 
 /**
  * svg二维模型动画使用的钩子，需要配合指定的组件使用，即svg模型组件（README里有更详细的说明）
@@ -18,8 +19,10 @@ export function useSvgAnimation(elementInfo: Map<string, { key: string; transfor
    *
    * @param id 标识符号（可以在页面中使用元素选择器选择具体元素后查询其id），可以传数组
    * @param reverse 是否需要反向执行动画，如果id传了数组该参数可以传数组以一一匹配，默认为false
+   * @param duration 动画持续时长，越长动画执行的越慢
+   * @param progress 指定动画执行的进度，默认为1，即动画执行到100%，该数字范围为0-1
    */
-  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false, duration = 3000) {
+  function triggerAnimation(id: string | string[], reverse: boolean | boolean[] = false, duration = 3000, progress = 1) {
     const idArray = typeof id === 'string' ? [id] : id;
     const reverseArray = typeof reverse === 'boolean' ? idArray.map(() => reverse) : reverse;
 
@@ -33,34 +36,36 @@ export function useSvgAnimation(elementInfo: Map<string, { key: string; transfor
       // 不指定反向播放且group处于初始状态时播放正常动画
       if (!reverse && unchanged) {
         animationManager.value[id] = false;
-        animateByKey(id, true, duration);
+        animateByKey(id, true, duration, progress);
         return;
       }
       if (reverse && !unchanged) {
         animationManager.value[id] = true;
-        animateByKey(id, false, duration);
+        animateByKey(id, false, duration, progress);
         return;
       }
     });
   }
 
   // 直接控制动画的方法
-  const animateElement = (elementId: string, toEnd: boolean, duration: number = 3000) => {
+  const animateElement = (elementId: string, toEnd: boolean, duration = 3000, progress = 1) => {
     const el = animationElements.get(elementId);
     const info = elementInfo.get(elementId);
 
     if (el && info && info.transforms.length > 1) {
+      const endTransform = _.nth(info.transforms, Math.floor(info.transforms.length * progress));
+      const startTransform = _.nth(info.transforms, -Math.ceil(info.transforms.length * progress));
       el.style.transition = `transform ${duration}ms`;
-      el.setAttribute('transform', toEnd ? info.transforms[info.transforms.length - 1] : info.transforms[0]);
+      el.setAttribute('transform', toEnd ? endTransform : startTransform);
     }
   };
 
   // 批量控制同一key的所有元素
-  const animateByKey = (key: string, toEnd: boolean, duration: number = 3000) => {
+  const animateByKey = (key: string, toEnd: boolean, duration = 3000, progress = 1) => {
     animationElements.forEach((__, elementId) => {
       const info = elementInfo.get(elementId);
       if (info && info.key === key) {
-        animateElement(elementId, toEnd, duration);
+        animateElement(elementId, toEnd, duration, progress);
       }
     });
   };

src/layouts/default/sider/bottomSideder.vue

@@ -84,8 +84,9 @@
       const glob = useGlobSetting();
       const isShowMenu = ref(route.path.startsWith('/cad-viewer') ? 1 : 0);
       const userStore = useUserStoreWithOut();
-      const appStore = useAppStore();
-      const themeIcon = ref(appStore.getDarkMode);
+      // const appStore = useAppStore();
+      // const themeIcon = appStore.getDarkMode;
+        const themeIcon=ref('styleTwo')
 
       function selectMenu(e: Event, programMenu) {
         e.stopPropagation();

src/layouts/default/sider/bottomSideder1.vue

@@ -45,8 +45,9 @@ export default defineComponent({
   name: 'BottomSider',
   components: { FourBorderBg, SvgIcon },
   setup() {
-    const appStore = useAppStore();
-    const themeIcon = ref(appStore.getDarkMode)
+    // const appStore = useAppStore();
+    // const themeIcon = appStore.getDarkMode
+    const themeIcon=ref('styleTwo')
     const isShowMenu = ref(0);
     let menuModules = ref<Menu[]>([]);
     const go = useGo();

src/views/monitor/log/index.vue

@@ -22,7 +22,7 @@
   </BasicTable>
 </template>
 <script lang="ts" name="monitor-log" setup>
-import { ref } from 'vue';
+import { ref,reactive } from 'vue';
 import { BasicTable, useTable, TableAction } from '/@/components/Table';
 import { getLogList, getUserLoginStats } from './log.api';
 import { columns, searchFormSchema, searchFormSchema1, operationLogColumn, browserColumn, loginTjColumn } from './log.data';
@@ -33,7 +33,7 @@ const logColumns = ref<any>(columns);
 const logApi = ref<any>(getLogList)
 const logSchemas = ref<any[]>(searchFormSchema)
 const paramTime = ref<any[]>(['createTime_begin', 'createTime_end'])
-const searchInfo = { logType: '1' };
+let searchInfo =reactive( { logType: '1' });
 // 列表页面公共参数、方法
 const { prefixCls, tableContext } = useListPage({
   designScope: 'user-list',
@@ -81,6 +81,7 @@ function tabChange(key) {
       logSchemas.value = searchFormSchema1
       paramTime.value = [['fieldTime', ['dayStart', 'dayEnd'], 'YYYY-MM-DD']]
       logApi.value = getUserLoginStats
+      searchInfo={}
       break;
   }
   //update-end---author:wangshuai ---date:20220506  for：[VUEN-943]vue3日志管理列表翻译不对--------------

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

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

src/views/vent/home/configurable/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/ModuleCommonDual.vue

@@ -73,7 +73,7 @@
     const size = props.showStyle.size;
     const position = props.showStyle.position;
 
-    return size + position + ';position: absolute; pointer-events: auto;';
+    return size + position + ';position: absolute; pointer-events: auto; z-index: 1';
   });
 
   // 根据配置里的定位判断应该使用哪个class

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

@@ -16,7 +16,7 @@
   </component>
 </template>
 <script lang="ts" setup>
-import Header from './header-green.vue';
+import Header from './header.vue';
 import Content from './content-warn.vue';
 import ModuleLeft from './original/moduleLeft-warn.vue';
 import ModuleBottom from './original/moduleBottom-warn.vue';

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

@@ -35,13 +35,32 @@
 <script lang="ts" setup>
   import { computed } from 'vue';
   import { getFormattedText } from '../hooks/helper';
+  import { useGlobSetting } from '/@/hooks/setting';
 
   const props = defineProps<{
     isDataRealTime: boolean;
     data: any;
   }>();
 
+  const { sysOrgCode } = useGlobSetting();
+
   const config = computed(() => {
+    if (sysOrgCode === 'huainanzhangji') {
+      return [
+        {
+          label: '总回风量(m³/min)',
+          value: '${midinfo[0].sysdata.zonghuifeng}',
+        },
+        {
+          label: '总进风量(m³/min)',
+          value: '${midinfo[0].sysdata.zongjinfeng}',
+        },
+        {
+          label: '有效风量率(%)',
+          value: '${midinfo[0].sysinfo.useM3Perent}',
+        },
+      ];
+    }
     if (props.isDataRealTime) {
       return [
         {

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/center-area-warn.vue

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

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

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

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

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

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

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

src/views/vent/home/configurable/components/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/components/original/moduleBottom-warn.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

src/views/vent/home/configurable/configurable.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.tashan.ts

@@ -583,12 +583,11 @@ export const testConfigTSFire: Config[] = [
           columns: [
             { name: '监测点', prop: 'strinstallpos' },
             { name: '温度', prop: 'readData.temperature' },
-            { name: 'ch2', prop: 'readData.ch2val' },
-            { name: 'ch', prop: 'readData.chval' },
-            { name: 'co2', prop: 'readData.co2val' },
-            { name: 'co', prop: 'readData.coval' },
-            { name: 'gas', prop: 'readData.gasval' },
-            { name: 'o2', prop: 'readData.o2val' },
+            { name: '氮气', prop: 'readData.n2val' },
+            { name: '二氧化碳', prop: 'readData.co2val' },
+            { name: '一氧化碳', prop: 'readData.coval' },
+            { name: '瓦斯', prop: 'readData.gasval' },
+            { name: '氧气', prop: 'readData.o2val' },
             { name: '报警等级', prop: 'syswarnLevel_str' },
           ],
         },
@@ -646,12 +645,11 @@ export const testConfigTSFire: Config[] = [
           columns: [
             { name: '监测点', prop: 'strinstallpos' },
             { name: '温度', prop: 'readData.temperature' },
-            { name: 'ch2', prop: 'readData.ch2val' },
-            { name: 'ch', prop: 'readData.chval' },
-            { name: 'co2', prop: 'readData.co2val' },
-            { name: 'co', prop: 'readData.coval' },
-            { name: 'gas', prop: 'readData.gasval' },
-            { name: 'o2', prop: 'readData.o2val' },
+            { name: '氮气', prop: 'readData.n2val' },
+            { name: '二氧化碳', prop: 'readData.co2val' },
+            { name: '一氧化碳', prop: 'readData.coval' },
+            { name: '瓦斯', prop: 'readData.gasval' },
+            { name: '氧气', prop: 'readData.o2val' },
             { name: '报警等级', prop: 'syswarnLevel_str' },
           ],
         },

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

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

src/views/vent/home/configurable/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;

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

@@ -88,7 +88,7 @@
   import { list } from './configurable.api';
   import { useRoute, useRouter } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';
-  import { testConfigVent, testConfigVentRealtime } from './configurable.data';
+  // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
 
   const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
@@ -106,7 +106,7 @@
 
   function refresh() {
     fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-      configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
+      // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
       updateEnhancedConfigs(configs.value);
 
       list({}).then(updateData);

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <component :loading="loading" :manager="animationManager" :is="modelComponent" />
+  <component ref="modelRef" :loading="loading" :is="modelComponent" />
   <div class="scene-box">
     <div class="top-box">
       <div class="top-center" style="display: flex">
@@ -230,16 +230,15 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useGlobSetting } from '/@/hooks/setting';
   import { getModelComponent } from './window.data';
-  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
   const globalConfig = inject('globalConfig');
 
+  const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
   const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
 
-  const { animationManager, triggerAnimation } = useSvgAnimation();
   const { currentRoute } = useRouter();
 
   const MonitorDataTable = ref();
@@ -386,7 +385,7 @@
 
   // 判断前后窗的面积是否发生改变，如果改变则开启动画
   const playAnimation = (data, maxarea = 90, isFirst = false) => {
-    triggerAnimation('shanye_0_Layer0_0_FILL', isFirst);
+    modelRef.value?.animate?.(data);
     computePlay(data, maxarea, isFirst);
   };
 
@@ -623,12 +622,16 @@
   onMounted(() => {
     const { query } = unref(currentRoute);
     if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-    loading.value = true;
-    mountedThree().then(async () => {
+    if (globalConfig.is2DModel) {
       getMonitor(true);
-      loading.value = false;
-      addMonitorText(selectData.value);
-    });
+    } else {
+      loading.value = true;
+      mountedThree().then(async () => {
+        getMonitor(true);
+        loading.value = false;
+        addMonitorText(selectData.value);
+      });
+    }
   });
   onUnmounted(() => {
     destroy();

src/views/vent/monitorManager/windowMonitor/window.data.ts

@@ -311,8 +311,10 @@ export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: strin
     switch (sysOrgCode) {
       // case '000000':
       //   return import('./components/000000.vue');
+      // return import('./components/windowDualSVG.vue');
       default:
-        return import('./components/windowSVG.vue');
+        return import('./components/windowDualSVG.vue');
+      // return import('./components/windowSVG.vue');
     }
   });
 }

src/views/vent/monitorManager/windowMonitor/window.threejs.ts

@@ -97,6 +97,7 @@ const startAnimation = () => {
 
 // 鼠标点击、松开事件
 const mouseEvent = (event) => {
+  if (!model) return;
   if (event.button == 0) {
     mouseDownFn(model, group, event, (intersects) => {
       if (windowType === 'ddFc5' && ddFc5) {
@@ -140,6 +141,7 @@ const addMouseEvent = () => {
   // model.canvasContainer?.addEventListener('pointerup', mouseUp);
 };
 export const addMonitorText = (selectData) => {
+  if (!model) return;
   if (windowType === 'ddFc5' && ddFc5) {
     return ddFc5.addMonitorText.call(ddFc5, selectData);
   } else if (windowType === 'ddFc1' && ddFc1) {
@@ -174,6 +176,7 @@ export const addMonitorText = (selectData) => {
 };
 
 export function computePlay(data, maxarea, isFirst = false) {
+  if (!model) return;
   const isJz = data.windowModal == 'sdFc4';
   if (windowType === 'singleXkWindow') {
     const acosToAngle = (cosValue) => {
@@ -262,6 +265,7 @@ export function computePlay(data, maxarea, isFirst = false) {
 }
 
 export const play = (rotationParam, flag) => {
+  if (!model) return;
   if (windowType === 'ddFc5' && ddFc5) {
     return ddFc5.play.call(ddFc5, rotationParam, flag);
   } else if (windowType === 'ddFc1' && ddFc1) {
@@ -297,6 +301,7 @@ export const play = (rotationParam, flag) => {
 
 // 切换风窗类型
 export const setModelType = (type) => {
+  if (!model) return;
   // if (!model || !model.scene) return;
   windowType = type;
   const windowConfigurations = {