[Feat 0000]新版预警管控系统页面

src/assets/images/home-warn/5-4.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.286" height="12.701" viewBox="0 0 12.286 12.701">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#4eabd9"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57266" data-name="路径 57266" d="M89.8,32.62a.444.444,0,0,0-.28-.4l-5.175-2.065a.442.442,0,0,0-.329,0l-5.175,2.065a.445.445,0,0,0-.28.4c-.007.178-.133,4.351.759,6.068.921,1.769,4.558,3.059,4.713,3.113a.452.452,0,0,0,.293,0c.155-.053,3.792-1.343,4.711-3.113.895-1.716.768-5.89.761-6.068Zm-2.484,3.919H86.026l-.417-1.088-1.436,3.219-1.1-2.367L82.6,37.5H81.049v-.888H82l1.015-2.555,1.143,2.469,1.514-3.392.966,2.518h.682v.888Z" transform="translate(-78.041 -29.623)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/home-warn/5-5.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.114" height="10.497" viewBox="0 0 14.114 10.497">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#f0faff"/>
+      <stop offset="1" stop-color="#4eabd9"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57265" data-name="路径 57265" d="M27.611,32.769a4.279,4.279,0,0,1-4.338-4.209V24.12a.867.867,0,0,1,1.734,0V28.56a2.605,2.605,0,0,0,5.208,0v-.788a2.009,2.009,0,0,1,4.017,0V29.86a.867.867,0,0,1-1.734,0V27.772a.271.271,0,0,0-.278-.261.268.268,0,0,0-.272.261v.789a4.278,4.278,0,0,1-4.337,4.209ZM35.52,30.7a.857.857,0,0,1-.867-.847V27.769a2.6,2.6,0,0,0-5.2,0v.789a2.012,2.012,0,0,1-4.021,0V24.119a.867.867,0,0,1,1.734,0v4.438a.277.277,0,0,0,.554,0v-.789a4.338,4.338,0,0,1,8.671,0v2.087a.857.857,0,0,1-.867.847Z" transform="translate(-22.773 -22.773)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

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

@@ -0,0 +1,71 @@
+<template>
+  <!-- 原版模块 -->
+  <component
+    :is="getModuleComponent(showStyle)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
+    @close="$emit('close')"
+    @click="redirectTo"
+  >
+    <slot>
+      <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+      <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+    </slot>
+  </component>
+</template>
+<script lang="ts" setup>
+import Header from './header-green.vue';
+import Content from './content-warn.vue';
+import ModuleLeft from './original/moduleLeft-warn.vue';
+import ModuleBottom from './original/moduleBottom-warn.vue';
+import { computed, ref } from 'vue';
+import { openWindow } from '/@/utils';
+import { getFormattedText } from '../hooks/helper';
+// import { ModuleProps } from '../types';
+
+const props = defineProps<{
+  /** 配置的详细模块信息 */
+  moduleData: any;
+  /** 配置的详细样式信息 */
+  showStyle: any;
+  /** 该模块配置中的设备标识符 */
+  deviceType: string;
+  /** api返回的数据 */
+  data: any;
+  moduleName: string;
+  visible: boolean;
+}>();
+defineEmits(['close', 'click']);
+
+const { header } = props.moduleData;
+const selectedData = ref();
+
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
+
+// 根据配置里的定位判断应该使用哪个module组件
+function getModuleComponent({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
+    return ModuleBottom;
+  }
+  if (position.includes('left')) {
+    return ModuleLeft;
+  }
+  if (position.includes('right')) {
+    return ModuleLeft;
+  }
+  return ModuleBottom;
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
+</script>

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="center-area-green">
+    <div class="container">
+      <!-- <div class="risk-score">
+        <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 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="item-label">风险得分</div>
+          <div class="item-val">1.45</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: 50%;
+    height: 70%;
+    margin-top: 16%;
+    margin-left: 25%;
+    background: url(/src/assets/images/home-warn/6-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-warn/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-warn/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-warn/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-warn/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-warn/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-warn/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-warn/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-warn/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/content-warn.vue

@@ -0,0 +1,456 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 主体内容部分 -->
+  <div class="content">
+    <!-- 背景 -->
+    <img v-if="background.show && background.type === 'image'" class="content__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 ? 'hidden' : 'hidden' }">
+        <!-- 告示板部分 -->
+        <template v-if="config.name === 'board'">
+          <div 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"
+              :dw="item.dw"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </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>
+        <template v-if="config.name === 'blast_delta'">
+          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 178 }" />
+        </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>
+        <!-- lxh -->
+        <template v-if="config.name === 'dz_chart'">
+          <DzChart :echartOption="config.config.echartOption" :echartData="config.data"></DzChart>
+        </template>
+        <template v-if="config.name === 'dz_list'">
+          <DzList :listOption="config.config.listOption" :listData="config.data"></DzList>
+        </template>
+        <template v-if="config.name === 'dz_card'">
+          <DzCard></DzCard>
+        </template>
+        <template v-if="config.name === 'dz_onfire'">
+          <DzScrollList></DzScrollList>
+        </template>
+        <template v-if="config.name === 'dz_outfire'">
+          <DzUnScrollList></DzUnScrollList>
+        </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 './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 { 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 DzChart from './preset/dz-chart.vue';
+import DzList from './preset/dz-list.vue';
+import DzCard from './preset/dz-card.vue';
+import DzScrollList from './preset/dz-scroll-list.vue';
+import DzUnScrollList from './preset/dz-unscroll-list.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;
+}
+
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+// .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/components/detail/MiniBoard-Warn.vue

@@ -0,0 +1,364 @@
+<!-- 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 'normal_risk';
+    case '较大风险':
+      return 'high_risk';
+    case '重大风险':
+      return 'higher_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_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: 186px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 126px;
+    height: 74px;
+    left: 27px;
+    top: -15px;
+    background: url(@/assets/images/vent/small-bg1.png) no-repeat;
+    background-size: cover;
+  }
+}
+
+.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__value_K {
+  font-size: 18px;
+  font-family: 'douyuFont';
+  color: #3afde7;
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+.mini-board__label_K {
+  width: 185px;
+  height: 48px;
+  text-align: center;
+  background: url(@/assets/images/vent/plane.png) no-repeat;
+  background-size: contain;
+  background-position: bottom;
+}
+
+.mini-board_H_low_risk {
+  background-image: var(--image-board_bg_3);
+}
+
+.mini-board_H_risk {
+  background-image: var(--image-board_bg_2);
+}
+
+.mini-board_H_high_risk {
+  background-image: var(--image-board_bg_5);
+}
+
+.mini-board_H_warning {
+  background-image: var(--image-board_bg_4);
+}
+</style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div v-if="visible" class="module-content">
+    <div v-if="title" class="module-content__title__expand">
+      <span class="action-btn close-btn" @click="closeModel"></span>
+      <span @click="clickHandler">{{ title }}</span>
+    </div>
+    <div class="module-slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+function closeModel() {
+  emit('close');
+}
+function clickHandler() {
+  emit('click');
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .module-content {
+  }
+}
+
+.module-content {
+  --image-model_original_title_bg_expand: url('@/assets/images/home-green/green-title-bg.png');
+  --bg-height: 28px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: url('@/assets/images/home-warn/2-2.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 15px 15px 0px 15px;
+}
+
+.module-content__title__expand {
+  width: 100%;
+  height: var(--bg-height);
+  position: relative;
+  line-height: var(--bg-height);
+  padding-left: 36px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+// .module-content__title {
+//   width: 50%;
+//   height: var(--bg-height);
+//   background: url('../../../../../assets/images/home-container/configurable/model_bottom_title_bg.png') no-repeat;
+//   background-size: 100% 100%;
+//   position: relative;
+//   text-align: left;
+//   padding-left: 5%;
+// }
+
+// 固定在父容器右上角的按钮图标
+// .action-btn {
+//   width: 18px;
+//   height: 18px;
+//   background: url('../../../../../assets/images/home-container/configurable/expand.svg') no-repeat center;
+//   position: absolute;
+//   left: 0;
+//   top: 0;
+// }
+// .show-btn {
+//   transform: rotate(-90deg);
+// }
+
+.module-slot {
+  height: calc(100% - 33px);
+  width: calc(100% - 15px);
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  margin-top: 20px;
+}
+
+// Transition动画相关
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transform: translateY(-33px);
+}
+</style>

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

@@ -0,0 +1,96 @@
+<template>
+  <div v-if="visible" class="module-content">
+    <div v-if="title" class="module-content__title__expand">
+      <span class="action-btn close-btn" @click="closeModel"></span>
+      <span @click="clickHandler">{{ title }}</span>
+    </div>
+    <div class="module-slot">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+function closeModel() {
+  emit('close');
+}
+function clickHandler() {
+  emit('click');
+}
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .module-content {
+    --image-model_original_title_bg: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg.png');
+  }
+}
+
+.module-content {
+  --bg-height: 28px;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  background: url('@/assets/images/home-warn/2-1.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 15px 15px 0px 15px;
+}
+
+.module-content__title__expand {
+  width: 100%;
+  text-align: center;
+  line-height: 3px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+// .module-content__title {
+//   width: 50%;
+//   height: var(--bg-height);
+//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+//   background-size: 100% 100%;
+//   position: relative;
+//   text-align: right;
+//   padding: 4px 10% 0 0;
+// }
+
+// 固定在父容器右上角的按钮图标
+// .action-btn {
+//   width: 18px;
+//   height: 18px;
+//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+//   position: absolute;
+//   right: 0;
+//   top: 0;
+// }
+// .close-btn {
+//   transform: rotate(-90deg);
+// }
+
+.module-slot {
+  height: calc(100% - 46px);
+  width: 100%;
+  backdrop-filter: blur(5px);
+  margin-top: 26px;
+}
+
+// Transition动画相关
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  // opacity: 1;
+  transform: translateX(-100%);
+  // transform: scaleY(0);
+  // transform-origin: center top;
+}
+</style>

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

@@ -53,278 +53,267 @@
   </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: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  });
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+let props = defineProps({
+  Title: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
 
-  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);
-    },
-    {
-      immediate: true,
     }
-  );
-  onMounted(() => {
-    updateActiveState(route.path);
   });
+}
+watch(
+  () => route.path,
+  (newPath) => {
+    updateActiveState(newPath);
+  },
+  {
+    immediate: true,
+  }
+);
+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;
+    color: #fff;
   }
 
-  .New-nav {
-    position: relative;
-    width: 100%;
+  .nav-menu {
+    position: absolute;
+    top: 0;
+    left: 675px;
     height: 100%;
+    display: flex;
+    position: static; // 移除绝对定位
+    display: flex;
+    width: auto;
+    .nav-menu-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      float: left;
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
+        background-size: 100% 100%;
+      }
 
-    .main-title {
-      width: 518px;
-      height: 100%;
+      .nav-menu-unactive {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .nav-menu-right {
       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;
+      margin-left: 42%;
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .nav-menu-unactive {
+        position: relative;
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        margin-top: 10px;
+        margin-right: 40px;
+        line-height: 35px;
+        text-align: center;
+        font-size: 16px;
+        background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
+        background-size: 100% 100%;
+      }
     }
 
-    .nav-menu {
+    .nav-menu-item {
       position: absolute;
-      top: 0;
-      left: 675px;
-      height: 100%;
-      display: flex;
-      position: static; // 移除绝对定位
+      top: 23px;
+      width: 130px;
       display: flex;
-      width: auto;
-      .nav-menu-left {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        float: left;
-        .nav-menu-active {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
-          background-size: 100% 100%;
-        }
+      flex-direction: column;
+      align-items: center;
+      box-sizing: border-box;
 
-        .nav-menu-unactive {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
+      .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%;
         }
-      }
-      .nav-menu-right {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        float: left;
-        margin-left: 42%;
-        .nav-menu-active {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
-          height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
+        .menu-item-active {
+          color: #ddd;
+          z-index: 999;
+          width: 100%;
+          height: 36px;
+          line-height: 36px;
+          font-size: 14px;
+          background: url('@/assets/images/fireNew/2-2.png') no-repeat;
           background-size: 100% 100%;
         }
 
-        .nav-menu-unactive {
-          position: relative;
-          cursor: pointer;
-          width: 100px;
+        .menu-item-unactive {
+          color: #ddd;
+          width: 100%;
           height: 40px;
-          margin-top: 10px;
-          margin-right: 40px;
-          line-height: 35px;
-          text-align: center;
-          font-size: 16px;
-          background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
-          background-size: 100% 100%;
+          line-height: 40px;
+          font-size: 14px;
         }
       }
+    }
 
-      .nav-menu-item {
-        position: absolute;
-        top: 23px;
-        width: 130px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        box-sizing: border-box;
-
-        .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: 36px;
-            line-height: 36px;
-            font-size: 14px;
-            background: url('@/assets/images/fireNew/2-2.png') no-repeat;
-            background-size: 100% 100%;
-          }
-
-          .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/originalNew/NewNavWarn.vue

@@ -0,0 +1,295 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="New-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div class="nav-menu-left">
+        <div v-for="(item, index) in leftMenus" :key="index">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })">
+            <div style="color: #ddd">{{ item.name }}</div>
+
+            <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <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>
+      </div>
+      <div class="nav-menu-right">
+        <div v-for="(item, index) in rightMenus" :key="index + 4">
+          <div
+            :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'"
+            :key="index + 4"
+            @click="menuClick({ item, index: index + 4 })"
+          >
+            <div style="color: #ddd">{{ item.name }}</div>
+            <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <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>
+      </div>
+    </div>
+  </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: '',
+    },
+  });
+
+  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;
+          menuItemActive.value = itemIndex;
+          isShowMenuItem.value = true;
+        }
+      }
+    });
+  }
+  watch(
+    () => route.path,
+    (newPath) => {
+      updateActiveState(newPath);
+    }
+  );
+  onMounted(() => {
+    updateActiveState(route.path);
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+
+  .New-nav {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .main-title {
+      width: 518px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-family: 'douyuFont';
+      font-size: 25px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      padding: 0;
+    }
+
+    .nav-menu {
+      position: absolute;
+      top: 0;
+      left: 675px;
+      height: 100%;
+      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%;
+      }
+
+      .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-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: 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;
+          }
+        }
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+
+      /* 定义淡出动画 */
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+
+        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;
+      }
+    }
+  }
+</style>

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

@@ -2951,7 +2951,7 @@ export const testConfigFusionGreen: Config[] = [
               [{ 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 )' }],
             ],
-            fontColor: ['rgba(46,144,165, 1 )', 'rgba(254,254,53, 1 )', 'rgba(234,179,105, 1 )', 'rgba(254,111,0, 1 )', 'rgba(255,0,0, 1 )']
+            fontColor: ['rgba(46,144,165, 1 )', 'rgba(254,254,53, 1 )', 'rgba(234,179,105, 1 )', 'rgba(254,111,0, 1 )', 'rgba(255,0,0, 1 )'],
           },
         },
       ],
@@ -3021,7 +3021,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${fanlocal_all}',
+              allCount: '${fanlocal_all}',
               warnCount: '${fanlocal_warn}',
               closeCount: '${fanlocal_close}',
             },
@@ -3031,7 +3031,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${bundletube_all}',
+              allCount: '${bundletube_all}',
               warnCount: '${bundletube_warn}',
               closeCount: '${bundletube_close}',
             },
@@ -3041,7 +3041,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${fanlocaldp_all}',
+              allCount: '${fanlocaldp_all}',
               warnCount: '${fanlocaldp_warn}',
               closeCount: '${fanlocaldp_close}',
             },
@@ -3051,7 +3051,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${gate_all}',
+              allCount: '${gate_all}',
               warnCount: '${gate_warn}',
               closeCount: '${gate_close}',
             },
@@ -3061,7 +3061,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${window_all}',
+              allCount: '${window_all}',
               warnCount: '${window_warn}',
               closeCount: '${window_close}',
             },
@@ -3101,7 +3101,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${dustdev_all}',
+              allCount: '${dustdev_all}',
               warnCount: '${dustdev_warn}',
               closeCount: '${dustdev_close}',
             },
@@ -3111,7 +3111,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${nitrogen_all}',
+              allCount: '${nitrogen_all}',
               warnCount: '${nitrogen_warn}',
               closeCount: '${nitrogen_close}',
             },
@@ -3121,7 +3121,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${pulping_all}',
+              allCount: '${pulping_all}',
               warnCount: '${pulping_warn}',
               closeCount: '${pulping_close}',
             },
@@ -3131,7 +3131,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${atomizing_all}',
+              allCount: '${atomizing_all}',
               warnCount: '${atomizing_warn}',
               closeCount: '${atomizing_close}',
             },
@@ -3141,7 +3141,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-                allCount: '${dustsensor_all}',
+              allCount: '${dustsensor_all}',
               warnCount: '${dustsensor_warn}',
               closeCount: '${dustsensor_close}',
             },
@@ -3151,7 +3151,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${gas_all}',
+              allCount: '${gas_all}',
               warnCount: '${gas_warn}',
               closeCount: '${gas_close}',
             },
@@ -3161,7 +3161,7 @@ export const testConfigFusionGreen: Config[] = [
               allText: '总数',
               warnText: '报警数',
               closeText: '断开数',
-               allCount: '${pump_all}',
+              allCount: '${pump_all}',
               warnCount: '${pump_warn}',
               closeCount: '${pump_close}',
             },
@@ -3175,9 +3175,7 @@ export const testConfigFusionGreen: Config[] = [
               warnCount: '${modelsensor_warn}',
               closeCount: '${modelsensor_close}',
             },
-          }
-
-
+          },
         },
       ],
       // mock: BDfireMock,
@@ -3249,7 +3247,6 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_card',
-
         },
       ],
       // mock: BDfireMock,
@@ -3289,7 +3286,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'dz_chart',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3302,7 +3298,6 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_chart',
-
         },
       ],
       // mock: BDfireMock,
@@ -3346,7 +3341,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'dz_outfire',
             basis: '50%',
           },
-
         ],
       },
       board: [],
@@ -3359,11 +3353,9 @@ export const testConfigFusionGreen: Config[] = [
       preset: [
         {
           readFrom: 'dz_onfire',
-
         },
         {
           readFrom: 'dz_outfire',
-
         },
       ],
       // mock: BDfireMock,
@@ -3403,7 +3395,6 @@ export const testConfigFusionGreen: Config[] = [
             name: 'chart',
             basis: '100%',
           },
-
         ],
       },
       board: [],
@@ -3415,7 +3406,7 @@ export const testConfigFusionGreen: Config[] = [
           xAxis: [{ show: false }],
           yAxis: [{ show: false, name: '风量', position: 'left' }],
           series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
-        }
+        },
       ],
       gallery: [],
       gallery_list: [],
@@ -3982,3 +3973,586 @@ export const testConfigVentNew: Config[] = [
     },
   },
 ];
+
+export const testConfigWarnMonitor: Config[] = [
+  {
+    deviceType: 'ventWarn',
+    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: '20%',
+          },
+          {
+            name: 'dz_chart',
+            basis: '80%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'J',
+          readFrom: 'ventWarn',
+          layout: 'label-top',
+          items: [
+            {
+              label: '总进风量',
+              dw: '(m³/min)',
+              value: '${ventJf}',
+            },
+            {
+              label: '总回风量',
+              dw: '(m³/min)',
+              value: '${ventHf}',
+            },
+            {
+              label: '总需风量',
+              dw: '(m³/min)',
+              value: '${ventXf}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      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,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:70px;left:15px;',
+    },
+  },
+  {
+    deviceType: 'deviceWarn',
+    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: 'dz_onfire',
+            basis: '50%',
+          },
+          {
+            name: 'dz_outfire',
+            basis: '50%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_onfire',
+        },
+        {
+          readFrom: 'dz_outfire',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:614px;height:240px;',
+      version: '原版',
+      position: 'bottom:15px;left: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: 'dz_list',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'deviceWarn',
+          listOption: {
+            fanmain: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhushan.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanmain_all}',
+              warnCount: '${fanmain_warn}',
+              closeCount: '${fanmain_close}',
+            },
+            fanlocal: {
+              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanlocal_all}',
+              warnCount: '${fanlocal_warn}',
+              closeCount: '${fanlocal_close}',
+            },
+            bundletube: {
+              url: getThemifyImagesURL('vent/alarm-icons/shug.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${bundletube_all}',
+              warnCount: '${bundletube_warn}',
+              closeCount: '${bundletube_close}',
+            },
+            fanlocaldp: {
+              url: getThemifyImagesURL('vent/alarm-icons/js.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${fanlocaldp_all}',
+              warnCount: '${fanlocaldp_warn}',
+              closeCount: '${fanlocaldp_close}',
+            },
+            gate: {
+              url: getThemifyImagesURL('vent/alarm-icons/fm.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${gate_all}',
+              warnCount: '${gate_warn}',
+              closeCount: '${gate_close}',
+            },
+            window: {
+              url: getThemifyImagesURL('vent/alarm-icons/fc.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${window_all}',
+              warnCount: '${window_warn}',
+              closeCount: '${window_close}',
+            },
+            windrect: {
+              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${windrect_all}',
+              warnCount: '${windrect_warn}',
+              closeCount: '${windrect_close}',
+            },
+            forcFan: {
+              url: getThemifyImagesURL('vent/alarm-icons/yafeng.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${forcFan_all}',
+              warnCount: '${forcFan_warn}',
+              closeCount: '${forcFan_close}',
+            },
+            spray: {
+              url: getThemifyImagesURL('vent/alarm-icons/penlin.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${spray_all}',
+              warnCount: '${spray_warn}',
+              closeCount: '${spray_close}',
+            },
+            dustdev: {
+              url: getThemifyImagesURL('vent/alarm-icons/penfen.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${dustdev_all}',
+              warnCount: '${dustdev_warn}',
+              closeCount: '${dustdev_close}',
+            },
+            nitrogen: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhudan.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${nitrogen_all}',
+              warnCount: '${nitrogen_warn}',
+              closeCount: '${nitrogen_close}',
+            },
+            pulping: {
+              url: getThemifyImagesURL('vent/alarm-icons/zhujiang.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${pulping_all}',
+              warnCount: '${pulping_warn}',
+              closeCount: '${pulping_close}',
+            },
+            atomizing: {
+              url: getThemifyImagesURL('vent/alarm-icons/pw.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${atomizing_all}',
+              warnCount: '${atomizing_warn}',
+              closeCount: '${atomizing_close}',
+            },
+            dustsensor: {
+              url: getThemifyImagesURL('vent/alarm-icons/ccq.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${dustsensor_all}',
+              warnCount: '${dustsensor_warn}',
+              closeCount: '${dustsensor_close}',
+            },
+            gas: {
+              url: getThemifyImagesURL('vent/alarm-icons/wasichoucaig.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${gas_all}',
+              warnCount: '${gas_warn}',
+              closeCount: '${gas_close}',
+            },
+            pump: {
+              url: getThemifyImagesURL('vent/alarm-icons/wasibeng.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${pump_all}',
+              warnCount: '${pump_warn}',
+              closeCount: '${pump_close}',
+            },
+            modelsensor: {
+              url: getThemifyImagesURL('vent/alarm-icons/cf.png'),
+              text: '',
+              allText: '总数',
+              warnText: '报警数',
+              closeText: '断开数',
+              allCount: '${modelsensor_all}',
+              warnCount: '${modelsensor_warn}',
+              closeCount: '${modelsensor_close}',
+            },
+          },
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:480px;left:15px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '风险权重比例',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [
+        {
+          type: 'pie_halo',
+          readFrom: '',
+          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
+          xAxis: [{ show: false }],
+          yAxis: [{ show: false, name: '风量', position: 'left' }],
+          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
+        },
+      ],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:360px;height:240px;',
+      version: '原版',
+      position: 'bottom:15px;right:450px',
+    },
+  },
+  {
+    deviceType: 'fusionManageInfo',
+    moduleName: '设备监测预警',
+    pageType: 'fusion-warn-green',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: {
+        direction: 'column',
+        items: [
+          {
+            name: 'board',
+            basis: '35%',
+          },
+          {
+            name: 'dz_card',
+            basis: '65%',
+          },
+        ],
+      },
+      board: [
+        {
+          type: 'K',
+          readFrom: 'fireManageInfo',
+          layout: 'label-top',
+          items: [
+            {
+              label: '安全监测系统监测点',
+              value: '${nyWarnLevel}',
+            },
+            {
+              label: '瓦斯抽采系统监测点',
+              value: '${wyWarnLevel}',
+            },
+          ],
+        },
+      ],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_card',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:70px;right: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: 'dz_chart',
+            basis: '100%',
+          },
+        ],
+      },
+      board: [],
+      chart: [],
+      gallery: [],
+      gallery_list: [],
+      table: [],
+      list: [],
+      complex_list: [],
+      preset: [
+        {
+          readFrom: 'dz_chart',
+        },
+      ],
+      // mock: BDfireMock,
+    },
+    showStyle: {
+      size: 'width:420px;height:400px;',
+      version: '原版',
+      position: 'top:480px;right:15px',
+    },
+  },
+];

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

@@ -1,24 +1,31 @@
 <template>
-    <div class="fusion-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>
-        </template>
+  <div class="fusion-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>
+    </template>
 
-        <div class="center-area">
-            <CenterAreaGreen></CenterAreaGreen>
-        </div>
+    <div class="center-area">
+      <CenterAreaGreen></CenterAreaGreen>
     </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 CenterAreaGreen from './components/center-area-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';
@@ -32,98 +39,98 @@ const route = useRoute();
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
-    timer = setTimeout(
-        async () => {
-            getTotal({}).then(updateData);
-            if (timer) {
-                timer = null;
-            }
-            getMonitor();
-        },
-        flag ? 0 : 20000
-    );
+  timer = setTimeout(
+    async () => {
+      getTotal({}).then(updateData);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 20000
+  );
 }
 onMounted(() => {
-    fetchConfigs('fusion-warn-green').then(() => {
-        configs.value = testConfigFusionGreen;
-        // updateEnhancedConfigs(configs.value);
-        // Promise.resolve(BDFireMock).then(updateData);
-        getMonitor(true);
-    });
+  fetchConfigs('fusion-warn-green').then(() => {
+    configs.value = testConfigFusionGreen;
+    // updateEnhancedConfigs(configs.value);
+    // Promise.resolve(BDFireMock).then(updateData);
+    getMonitor(true);
+  });
 });
 
 onUnmounted(() => {
-    clearTimeout(timer);
-    timer = undefined;
+  clearTimeout(timer);
+  timer = undefined;
 });
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
 @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
 }
 
 .fusion-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .main-container {
     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;
-        }
+    .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;
+    }
 
-        .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;
-        }
+    .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;
     }
 
-    .center-area {
-        position: absolute;
-        left: 450px;
-        top: 0;
-        width: calc(100% - 900px);
-        height: calc(100% - 270px);
-        border: 1px solid #000;
+    .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;
     }
+  }
+
+  .center-area {
+    position: absolute;
+    left: 450px;
+    top: 0;
+    width: calc(100% - 900px);
+    height: calc(100% - 270px);
+    border: 1px solid #000;
+  }
 }
 
 :deep(.loading-box) {
-    position: unset;
+  position: unset;
 }
 </style>

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

@@ -0,0 +1,159 @@
+<template>
+  <div class="fusion-home">
+    <div class="top-bg">
+      <NewNav Title="预警监测管控系统" />
+    </div>
+    <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 class="center-area">
+      <CenterAreaWarn></CenterAreaWarn>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useInitConfigs, useInitPage } from './hooks/useInit';
+import ModuleOriginal from './components/ModuleWarnMonitor.vue';
+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 { getTotal } from './configurable.api';
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { configs, fetchConfigs } = useInitConfigs();
+const { data, updateData } = useInitPage(title);
+const route = useRoute();
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  timer = setTimeout(
+    async () => {
+      getTotal({}).then(updateData);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor();
+    },
+    flag ? 0 : 20000
+  );
+}
+onMounted(() => {
+  fetchConfigs('fusion-warn-green').then(() => {
+    configs.value = testConfigWarnMonitor;
+    // updateEnhancedConfigs(configs.value);
+    // Promise.resolve(BDFireMock).then(updateData);
+    getMonitor(true);
+  });
+});
+
+onUnmounted(() => {
+  clearTimeout(timer);
+  timer = undefined;
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+
+.fusion-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: url('../../../../assets/images/home-warn/1-1.png') no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
+      height: 56px;
+      color: #fff;
+      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;
+    }
+  }
+  .main-container {
+    width: 100%;
+    height: 100%;
+    background: url('../../../../assets/images/home-warn/bg.png') no-repeat;
+    background-size: 100% 100%;
+    .left-area {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 420px;
+      height: 100%;
+      padding: 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
+    .bottom-area {
+      position: absolute;
+      left: 435px;
+      bottom: 0;
+      width: calc(100% - 435px);
+      height: 290px;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+
+    .right-area {
+      position: absolute;
+      right: 0px;
+      top: 0px;
+      width: 420px;
+      height: calc(100% - 305px);
+      padding: 15px 15px 0px 15px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+  }
+
+  .center-area {
+    position: absolute;
+    left: 450px;
+    top: 0;
+    width: calc(100% - 900px);
+    height: calc(100% - 270px);
+    border: 1px solid #000;
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>
+