[Feat 0000]预警管控系统优化

src/views/vent/home/configurable/components/ModuleDustNew.vue → src/views/vent/home/configurable/bule/components/ModuleDustNew.vue

@@ -34,8 +34,8 @@
 <script setup lang="ts">
 import ContentNew from './content-New.vue';
 import { defineProps, defineEmits, computed, watch } from 'vue';
-import { useInitModule } from '../hooks/useInit';
-import { getFormattedText } from '../hooks/helper';
+import { useInitModule } from '../../hooks/useInit';
+import { getFormattedText } from '../../hooks/helper';
 import { openWindow } from '/@/utils';
 // import { ModuleProps } from '../types';
 

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

@@ -69,15 +69,15 @@ let menuList = ref<any[]>([
   },
   {
     name: '火灾监控',
-    targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+    targatUrl: '/configurable/fireNew/fireS/home',
   },
   {
     name: '粉尘监控',
-    targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+    targatUrl: '/configurable/dustNew/dustS/home',
   },
   {
-    name: '瓦斯监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    name: '预警监测',
+    targatUrl: '/warnMonitor/configurable/home',
   },
   {
     name: '灾害预警',

src/views/vent/home/configurable/components/originalNew/NewNavFire.vue → src/views/vent/home/configurable/bule/components/NewNavFire.vue

@@ -69,19 +69,19 @@ let props = defineProps({
 let menuList = ref<any[]>([
   {
     name: '智能通风',
-    targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
+    targatUrl: '/micro-vent-3dModal/configurable/ventNew/ventS/home',
   },
   {
     name: '火灾监控',
-    targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+    targatUrl: '/micro-vent-3dModal/configurable/fireNew/fireS/home',
   },
   {
     name: '粉尘监控',
-    targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+    targatUrl: '/configurable/dustNew/dustS/home',
   },
   {
-    name: '瓦斯监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+    name: '预警监测',
+    targatUrl: '/warnMonitor/configurable/home',
   },
   {
     name: '灾害预警',

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

@@ -236,7 +236,7 @@ watch(
     position: absolute;
     left: 18px;
     top: 60px;
-    width: 220px;
+    width: 180px;
     height: 170px;
   }
 }

src/views/vent/home/configurable/bule/components/content-New.vue

@@ -0,0 +1,499 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 主体内容部分 -->
+  <div class="content">
+    <!-- 背景 -->
+    <img v-if="background.show && background.type === 'image'" class="content__background image__background" :src="background.link" />
+    <video
+      v-if="background.show && background.type === 'video'"
+      class="content__background content__background_video"
+      width="100%"
+      autoplay
+      loop
+      muted
+      disablepictureinpicture
+      playsinline
+    >
+      <source :src="background.link" />
+      Not Supportted Link Or Browser
+    </video>
+    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+        <!-- 告示板部分 -->
+        <template v-if="config.name === 'board'">
+          <div
+            v-if="config.pageType == 'vent_New'"
+            style="padding-top: 11%"
+            class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap"
+          >
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+          <div v-else-if="config.pageType === 'New_fire'" class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoardNew
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+          <div v-else class="content__module flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+        </template>
+        <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
+        <template v-if="config.name === 'chart'">
+          <CustomChart v-if="config.pageType === 'New_dust'" class="content__module_dust" :chart-config="config.config" :chart-data="config.data" />
+          <CustomChart v-else 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 === 'fireList'">
+          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
+        </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'">
+          <ComplexListNew v-if="config.pageType === 'New_dust'" class="content__module" :type="config.type" :list-config="config.items" />
+          <ComplexList v-else class="content__module" :type="config.type" :list-config="config.items" />
+        </template>
+        <!-- 表格部分，这部分通常是占一整个模块的 -->
+        <template v-if="config.name === 'table'">
+          <CustomTableNew
+            v-if="config.pageType === 'New_dust' || config.pageType === 'New_fire'"
+            class="content__module1 text-center overflow-auto"
+            :type="config.type"
+            :columns="config.columns"
+            :data="config.data"
+          />
+          <CustomTable v-else 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>
+        <template v-if="config.name === 'blast_delta'">
+          <BlastDelta
+            v-if="config.pageType === 'New_fire'"
+            class="content__moduleFire"
+            :pos-monitor="config.data"
+            :canvasSize="{ width: 250, height: 200 }"
+          />
+          <BlastDelta v-else class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+        </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>
+        <template v-if="config.name === 'ai_chat'">
+          <AIChat class="content__module" />
+        </template>
+        <template v-if="config.name === 'device_alarm'">
+          <DeviceAlarm class="content__module" :devicedata="config.data" />
+        </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>
+        <!-- <template v-if="config.key === 'fire_control'">
+        <FIreControl class="content__module" />
+      </template>
+      <template v-if="config.key === 'fire_warn'">
+        <FIreWarn class="content__module" />
+      </template> -->
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../../deviceManager/configurationTable/types';
+import MiniBoard from '../../components/detail/MiniBoard.vue';
+import TimelineList from '../../components/detail/TimelineList.vue';
+import TimelineListNew from '../../components/detail/TimelineListNew.vue';
+import CustomList from '../../components/detail/CustomList.vue';
+import CustomGallery from '../../components/detail/CustomGallery.vue';
+import ComplexList from '../../components/detail/ComplexList.vue';
+import ComplexListNew from '../../components/detail/ComplexList-New.vue';
+import GalleryList from '../../components/detail/GalleryList.vue';
+import CustomTable from '../../components/detail/CustomTable-New.vue';
+import CustomChart from '../../components/detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../../hooks/helper';
+import BlastDelta from '../../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from '../../components/preset/QHCurve.vue';
+import MeasureDetail from '../../components/preset/MeasureDetail.vue';
+import CustomTabs from '../../components/preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from '../../components/preset/DeviceAlarm.vue';
+import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
+import CustomTableNew from '../../components/detail/CustomTable-New.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
+
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+}>();
+
+const { background, layout } = props.moduleData;
+
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
+
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
+      return {
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
+      };
+    });
+  }
+  return getItems(raw, items);
+}
+
+/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        } else {
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        }
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: (data || []).map((d) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        } else {
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: cfg.items.map((i) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
+          });
+        }
+        break;
+      }
+      case 'chart': {
+        const cfg = chart.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          config: cfg,
+          data,
+        });
+        break;
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
+      }
+    }
+    return arr;
+  }, []);
+});
+</script>
+<style lang="less" scoped>
+@import '@/design/theme.less';
+
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  // z-index: -2;
+  display: flex;
+  flex-direction: column;
+}
+.content__background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+}
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  padding: 0 34px;
+}
+// .content__module:first-of-type {
+//   margin-top: 0;
+// }
+// .content__module:last-of-type {
+//   margin-bottom: 0;
+// }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  /* background-color: transparent; */
+  color: #fff;
+}
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
+
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
+</style>

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

@@ -180,7 +180,7 @@ watch(
     }
 
     .risk-pie {
-      left: -28px;
+      left: -48px;
       top: -17px;
       position: absolute;
       width: 276px;

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

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

src/views/vent/home/configurable/bule/homeBlue.vue

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

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

@@ -31,7 +31,7 @@ import CenterAreaWarn from './components/center-area-warn.vue';
 import { useRoute } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import { testConfigWarnMonitor } from '../configurable.data';
-import NewNav from '../components/originalNew/NewNavFire.vue';
+import NewNav from './components/NewNavFire.vue';
 import { getTotal, getDisasterProportion } from '../configurable.api';
 const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();

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

@@ -4101,7 +4101,7 @@ export const testConfigWarnMonitor: Config[] = [
     showStyle: {
       size: 'width:420px;height:420px;',
       version: '原版',
-      position: 'top:480px;left:15px',
+      position: 'top:490px;left:15px',
     },
   },
   {
@@ -4172,57 +4172,6 @@ export const testConfigWarnMonitor: Config[] = [
       position: 'top:70px;right:15px',
     },
   },
-  // {
-  //   deviceType: 'warnInfo',
-  //   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:180px;height:180px;',
-  //     version: '原版',
-  //     position: 'top:70px;left:450px',
-  //   },
-  // },
   {
     deviceType: 'deviceManageInfo',
     moduleName: '设备监测预警',
@@ -4266,7 +4215,7 @@ export const testConfigWarnMonitor: Config[] = [
           readFrom: 'deviceWarn',
           listOption: {
             fanmain: {
-              url: getThemifyImagesURL(),
+              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4276,7 +4225,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'fanmain_close',
             },
             fanlocal: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4286,7 +4235,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'fanlocal_close',
             },
             bundletube: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/shug.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4296,7 +4245,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'bundletube_close',
             },
             fanlocaldp: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/yafeng.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4306,7 +4255,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'fanlocaldp_close',
             },
             gate: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/fm.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4316,7 +4265,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'gate_close',
             },
             window: {
-              url: getThemifyImagesURL('fc'),
+              url: getThemifyImagesURL('vent/alarm-icons/fc.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4326,7 +4275,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'window_close',
             },
             windrect: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4336,7 +4285,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'windrect_close',
             },
             forcFan: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4346,7 +4295,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'forcFan_close',
             },
             spray: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/pw.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4356,7 +4305,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'spray_close',
             },
             dustdev: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4366,7 +4315,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'dustdev_close',
             },
             nitrogen: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4376,7 +4325,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'nitrogen_close',
             },
             pulping: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4386,7 +4335,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'pulping_close',
             },
             atomizing: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/penlin.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4396,7 +4345,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'atomizing_close',
             },
             dustsensor: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4406,7 +4355,7 @@ export const testConfigWarnMonitor: Config[] = [
               closeCount: 'dustsensor_close',
             },
             gas: {
-              url: getThemifyImagesURL(''),
+              url: getThemifyImagesURL('vent/alarm-icons/wasichoucaig.png'),
               text: '',
               allText: '总数',
               warnText: '报警数',
@@ -4539,7 +4488,7 @@ export const testConfigWarnMonitor: Config[] = [
     showStyle: {
       size: 'width:420px;height:420px;',
       version: '原版',
-      position: 'top:480px;right:15px',
+      position: 'top:490px;right:15px',
     },
   },
 ];

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

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

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

@@ -65,170 +65,170 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted } from 'vue';
-  import { useInitConfigs, useInitPage } from './hooks/useInit';
-  import ModuleMine from './components/ModuleMine.vue';
-  import ModuleBDDual from './components/ModuleBDDual.vue';
-  import NewNav from './components/originalNew/NewNavFire.vue';
-  import { getDisHome } from './configurable.api';
-  import { testConfigMineFire } from './configurable.data.mine';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleMine from './components/ModuleMine.vue';
+import ModuleBDDual from './components/ModuleBDDual.vue';
+import NewNav from './bule/components/NewNavFire.vue';
+import { getDisHome } from './configurable.api';
+import { testConfigMineFire } from './configurable.data.mine';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
 
-  const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
-  const cfgA = computed<any>(() => configs.value[6]);
-  const cfgB = computed<any>(() => configs.value[7]);
-  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
-  let interval: ReturnType<typeof setInterval> | undefined;
+const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
+const cfgA = computed<any>(() => configs.value[6]);
+const cfgB = computed<any>(() => configs.value[7]);
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
+let interval: ReturnType<typeof setInterval> | undefined;
 
-  onMounted(() => {
-    fetchConfigs('mine_fire').then(() => {
-      configs.value = testConfigMineFire;
-      getDisHome({
-        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-      }).then(updateData);
-    });
-    interval = setInterval(() => {
-      getDisHome({
-        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-      }).then(updateData);
-    }, 2000);
+onMounted(() => {
+  fetchConfigs('mine_fire').then(() => {
+    configs.value = testConfigMineFire;
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
   });
+  interval = setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
 
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
-  function redirectTo(url) {
-    window.open(url);
-  }
+onUnmounted(() => {
+  clearInterval(interval);
+});
+function redirectTo(url) {
+  window.open(url);
+}
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
-  .company-home {
-    --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
-    --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
-    --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
-    --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
+.company-home {
+  --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
+  --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
+  --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
+  --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: var(--image-bg) no-repeat center;
+
+  .top-bg {
     width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: var(--image-bg) no-repeat center;
+    height: 73px;
+    background: var(--image-fire-title) no-repeat top;
+    position: absolute;
+    z-index: 1;
+    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
+      margin-top: 0;
+    }
+    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
+      margin-top: 0;
+    }
+    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
+      margin-top: 0;
+    }
+    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
+      margin-top: 0;
+    }
+  }
+  // 顶部中间样式块
+  .center-info-bar {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 900px;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
+    padding: 0 20px;
+    gap: 15px;
 
-    .top-bg {
-      width: 100%;
-      height: 73px;
-      background: var(--image-fire-title) no-repeat top;
-      position: absolute;
-      z-index: 1;
-      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
-        margin-top: 0;
-      }
-      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
-        margin-top: 0;
-      }
-      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
-        margin-top: 0;
-      }
-      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
-        margin-top: 0;
+    .center-info-btn {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      color: #fff;
+      font-size: 10px;
+      font-family: 'douyuFont';
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+      width: 110px;
+      margin: 0 0 10px 0;
+      img {
+        width: 60px;
       }
     }
-    // 顶部中间样式块
-    .center-info-bar {
-      position: absolute;
-      top: 80px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 900px;
-      height: 90px;
+
+    .center-info-content {
       display: flex;
       align-items: center;
       justify-content: center;
-      z-index: 2;
-      background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
-      padding: 0 20px;
-      gap: 15px;
 
-      .center-info-btn {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        color: #fff;
-        font-size: 10px;
-        font-family: 'douyuFont';
-        font-weight: bold;
-        cursor: pointer;
-        user-select: none;
-        width: 110px;
-        margin: 0 0 10px 0;
+      .center-info-block {
+        color: #ffffff;
+        font-size: 18px;
         img {
-          width: 60px;
+          margin: 0 5px;
         }
       }
-
-      .center-info-content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .center-info-block {
-          color: #ffffff;
-          font-size: 18px;
-          img {
-            margin: 0 5px;
-          }
-        }
-        .center-info-risk {
-          color: #fff;
-          font-weight: bolder;
-          text-align: center;
-          .risk-level {
-            color: #4eabd9;
-            font-size: 24px;
-            font-weight: bold;
-            letter-spacing: 8px;
-            margin: 10px 0;
-          }
+      .center-info-risk {
+        color: #fff;
+        font-weight: bolder;
+        text-align: center;
+        .risk-level {
+          color: #4eabd9;
+          font-size: 24px;
+          font-weight: bold;
+          letter-spacing: 8px;
+          margin: 10px 0;
         }
+      }
 
-        .left {
-          margin-right: 45px;
-        }
-        .right {
-          margin-left: 45px;
-        }
+      .left {
+        margin-right: 45px;
+      }
+      .right {
+        margin-left: 45px;
       }
     }
+  }
 
-    ::v-deep .dane-bd {
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: 100% 100%;
-      &.dane-w {
-        background-image: var(--image-common-border3);
-      }
-      .dane-title {
-        justify-content: space-around;
-        padding: 0 50px 0 0;
+  ::v-deep .dane-bd {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    &.dane-w {
+      background-image: var(--image-common-border3);
+    }
+    .dane-title {
+      justify-content: space-around;
+      padding: 0 50px 0 0;
 
-        .common-navL {
-          font-size: 14px;
-          font-weight: bold;
-          font-family: 'douyuFont';
-        }
-      }
-      .dane-content {
-        border: none;
-        background: none;
-        padding: 5px 35px 10px 10px;
+      .common-navL {
+        font-size: 14px;
+        font-weight: bold;
+        font-family: 'douyuFont';
       }
     }
+    .dane-content {
+      border: none;
+      background: none;
+      padding: 5px 35px 10px 10px;
+    }
   }
+}
 </style>

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

@@ -1,9 +1,19 @@
 <template>
-  <div class="dz-list">
+  <div :class="deviceType == 'deviceManageInfo' ? 'dz-list1' : 'dz-list'">
     <div :class="deviceType == 'deviceManageInfo' ? 'icons-box1' : 'icons-box'" @mouseleave="resetScroll">
       <template v-for="(item, key) in listOption" :key="key">
-        <div class="icon-item">
-          <!-- <img :src="item.url" :alt="item.text" /> -->
+        <div
+          class="icon-item"
+          :style="
+            deviceType == 'deviceManageInfo'
+              ? {
+                  backgroundImage: 'url(' + item.url + ')',
+                  backgroundRepeat: 'no-repeat',
+                  backgroundSize: '100% 100%',
+                }
+              : {}
+          "
+        >
           <div class="level-text">
             <div class="all-count">
               <span>{{ `${item.allText}&nbsp:&nbsp` }}</span>
@@ -72,7 +82,10 @@ watch(
   width: 100%;
   height: 100%;
 }
-
+.dz-list1 {
+  width: 100%;
+  height: 100%;
+}
 .icons-box {
   height: 100%;
   overflow-y: hidden;
@@ -135,7 +148,7 @@ watch(
 }
 .icons-box1 {
   width: 100%;
-  height: 100%;
+  height: 90%;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -149,8 +162,6 @@ watch(
   .icon-item {
     flex: 0 0 calc(50% - 5px);
     height: 46px;
-    background: var(--image-model_icon-item) no-repeat;
-    background-size: 100% 100%;
     position: relative;
     display: flex;
     align-items: center;
@@ -161,7 +172,7 @@ watch(
       display: flex;
       justify-content: space-around;
       position: absolute;
-      top: 10px;
+      top: 18px;
       left: 76px;
       color: #ffffffe0;
       font-size: 14px;