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

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

@@ -124,7 +124,7 @@ export interface ShowStyle {
   /** 模块的宽高，特殊情况下可以自定义宽高 */
   size: string;
   /** 模块的版本，除了新版，只要有一个模块指定为旧版或其他版本，那么整个页面风格将变更为对应版本，优先级 旧版 > 普通版 > 新版 */
-  version: '原版' | '新版' | '普通版' | '保德';
+  version: '原版' | '新版' | '普通版' | '保德' | '淡蓝色' | '翠绿色';
   /** 模块的位置，即定位，特殊情况下可以自定义定位 */
   position: string;
   // 模块位置  根据这个配置决定使用hearder的方式

src/views/vent/home/configurable/blue/components/ModuleDustNew.vue

@@ -0,0 +1,70 @@
+<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.vue';
+  import Content from '../components/content.vue';
+  import ModuleLeft from './moduleLeft-warn.vue';
+  import ModuleBottom from './moduleBottom-warn.vue';
+  import { computed, ref } from 'vue';
+  import { openWindow } from '/@/utils';
+  import { getFormattedText } from '../../hooks/helper';
+  import ModuleMiniWarn from './moduleMini-warn.vue';
+  // 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/) || [];
+    const [___, height] = size.match(/height:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return ModuleBottom;
+    }
+    if (parseInt(height) > 400) {
+      return ModuleLeft;
+    }
+    return ModuleMiniWarn;
+  }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(selectedData.value, to));
+  }
+</script>

src/views/vent/home/configurable/blue/components/ModuleFireNew.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="dane-bd" :style="style" :class="daneClass">
+    <div v-if="moduleName" class="dane-title">
+      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
+        ><span class="title">{{ moduleName }}</span></div
+      >
+    </div>
+    <div class="dane-content">
+      <div class="common-navR">
+        <!-- 下拉框 -->
+        <div class="flex-grow-1" v-if="header.show && header.selector.show">
+          <a-select
+            style="width: 350px; font-size: 16px"
+            size="small"
+            placeholder="请选择"
+            v-model:value="selectedDeviceID"
+            allowClear
+            :options="options"
+            @change="selectHandler"
+          />
+        </div>
+        <div class="flex-basis-100px flex-grow-1" v-if="header.show && header.slot.show">
+          {{ getFormattedText(selectedDevice, header.slot.value) }}
+        </div>
+      </div>
+      <slot>
+        <ContentFireNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import ContentFireNew from './content-FireNew.vue';
+  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { useInitModule } from '../../hooks/useInit';
+  import { getFormattedText } from '../../hooks/helper';
+  import { openWindow } from '/@/utils';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  const { header } = props.moduleData;
+
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  const daneClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'dane-w';
+    }
+    if (position.includes('left')) {
+      return 'dane-m';
+    }
+    if (position.includes('right')) {
+      return 'dane-m';
+    }
+    // return 'dane-m';
+    return 'dane-m'; // 默认返回顶部模块
+  });
+  //切换时间选项
+  // function onChange(value, dateString) {
+  //   console.log('Selected Time: ', value);
+  //   console.log('Formatted Selected Time: ', dateString);
+  // }
+  // function onOk(val) {
+  //   console.log('onOk: ', val);
+  // }
+
+  //下拉框选项切换
+  function selectHandler(id) {
+    selectedDeviceID.value = id;
+    emit('select', selectedDevice);
+  }
+
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
+  }
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      selectedDeviceID.value = options.value[0]?.value;
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  @import '/@/design/theme.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
+  @{theme-deepblue} {
+    .dane-bd {
+      --image-Content: url('@/assets/images/fireNew/4-3.png');
+      --image-Select: url('@/assets/images/fireNew/5.png');
+    }
+  }
+
+  .dane-bd {
+    --image-Select: url('@/assets/images/fireNew/5.png');
+    --image-Content: url('@/assets/images/fireNew/4-3.png');
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+
+    .dane-title {
+      width: 94%;
+      height: 40px;
+      text-align: center;
+      padding-top: 9px;
+
+      .common-navL {
+        position: relative;
+        align-items: center;
+        color: #fff;
+        font-size: 13px;
+        font-weight: bold;
+        font-family: 'douyuFont';
+      }
+    }
+
+    .dane-content {
+      height: calc(100% - 38px);
+      box-sizing: border-box;
+      border-top: none;
+      .common-navR {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--image-Select) no-repeat;
+        background-size: 100% 100%;
+        width: 87%;
+        margin-left: 30px;
+      }
+    }
+  }
+  .dane-m {
+    background: var(--image-Content) no-repeat;
+    background-size: 100% 100%;
+  }
+  :deep(.zxm-select-selector) {
+    height: 22px !important;
+    border: none !important;
+    // background-color: rgb(15 64 88) !important;
+    background-color: transparent !important;
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-selection-placeholder) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-select-arrow) {
+    color: #8087a1 !important;
+  }
+
+  :deep(.zxm-picker) {
+    border: none !important;
+    background-color: rgb(15 64 88) !important;
+    box-shadow: none;
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-input > input) {
+    color: #a1dff8 !important;
+    text-align: center !important;
+  }
+
+  :deep(.zxm-picker-separator) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-picker-active-bar) {
+    display: none !important;
+  }
+
+  :deep(.zxm-picker-suffix) {
+    color: #a1dff8 !important;
+  }
+
+  :deep(.zxm-switch) {
+    min-width: 48px !important;
+  }
+
+  :deep(.zxm-switch-checked) {
+    background-color: rgb(15 64 89) !important;
+  }
+
+  :deep(.zxm-switch-handle::before) {
+    background-color: rgb(33 179 247) !important;
+  }
+
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+</style>

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

@@ -69,20 +69,16 @@ let menuList = ref<any[]>([
   },
   {
     name: '火灾监控',
-    targatUrl: '/configurable/fireNew/fireS/home',
+    targatUrl: '/micro-vent-3dModal/configurable/fireNew/fireS/home',
   },
   {
     name: '粉尘监控',
-    targatUrl: '/configurable/dustNew/dustS/home',
+    targatUrl: '/micro-vent-3dModal/configurable/dustNew/dustS/home',
   },
   {
     name: '预警监测',
     targatUrl: '/warnMonitor/configurable/home',
   },
-  {
-    name: '灾害预警',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
 ]); //一级菜单列表
 let activeIndex = ref(0); //当前激活menu索引
 const router = useRouter();

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

@@ -0,0 +1,316 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="New-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div v-if="!disabled" 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 v-if="!disabled" 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 && !disabled" 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: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
+
+  let menuList = ref<any[]>([
+    {
+      name: '智能通风',
+      targatUrl: '/micro-vent-3dModal/configurable/ventNew/ventS/home',
+    },
+    {
+      name: '火灾监控',
+      targatUrl: '/micro-vent-3dModal/configurable/fireNew/fireS/home',
+    },
+    {
+      name: '粉尘监控',
+      targatUrl: '/micro-vent-3dModal/configurable/dustNew/dustS/home',
+    },
+    {
+      name: '预警监测',
+      targatUrl: '/warnMonitor/configurable/home',
+    },
+  ]); //一级菜单列表
+  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) {
+    const currentPath = route.path;
+    menuList.value.forEach((menu, index) => {
+      // 处理有直接链接的菜单项
+      if (menu.targatUrl === currentPath) {
+        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);
+    },
+    {
+      immediate: true,
+    }
+  );
+  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;
+      color: #fff;
+    }
+
+    .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%;
+        }
+
+        .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;
+        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-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;
+        }
+
+        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/blue/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/blue/components/content.vue

@@ -0,0 +1,537 @@
+<!-- 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'">
+          <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
+            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" :config="config.config" />
+        </template>
+        <!-- lxh -->
+        <template v-if="config.name === 'select_cs'">
+          <SelectCs :devicedata="config.data" :setLabelData="config.config.setLabelConfig" />
+        </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.name === 'partition'">
+          <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
+        </template>
+        <template v-if="config.name === 'selector_dual_chart'">
+          <SelectorDualChart :data="config.data" :moduleData="props.moduleData" :config="config" />
+        </template>
+        <template v-if="config.name === 'radio_label'">
+          <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
+        </template>
+        <template v-if="config.name === 'button_list'">
+          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
+        </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 GalleryList from '../../components/detail/GalleryList.vue';
+  import CustomTable from '../../components/detail/CustomTable.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 SelectCs from '../../components/preset/SelectCs.vue';
+  import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
+  import Partition from '../../components/preset/partition.vue';
+  import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
+  import RadioLabel from '../../components/preset/radioLabel.vue';
+  import ButtonList from '../../components/preset/buttonList.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) || [];
+    const partition = clone(props.moduleData.partition) || [];
+
+    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;
+        }
+        case 'partition': {
+          const cfg = partition.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            overflow: true,
+            ...item,
+            data,
+            ...cfg,
+          });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
+      }
+      // console.log(arr,'arr---')
+      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;
+    overflow-y: auto; // 这里会导致样式无故添加滚动条
+  }
+
+  .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%;
+  }
+
+  // .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/blue/components/header.vue

@@ -0,0 +1,115 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- Header部分 -->
+  <div v-if="headerConfig.show" class="w-100% flex costume-header">
+    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
+    <Dropdown
+      v-if="headerConfig.selector.show"
+      class="flex-grow-1 costume-header_left"
+      :trigger="['click']"
+      :bordered="false"
+      @open-change="visible = $event"
+    >
+      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
+        <SwapOutlined class="w-30px" />
+        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
+          {{ selectedDeviceLabel }}
+        </div>
+        <CaretUpOutlined class="w-30px" v-if="visible" />
+        <CaretDownOutlined class="w-30px" v-else />
+      </div>
+      <template #overlay>
+        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
+          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
+            {{ item.label }}
+          </MenuItem>
+        </Menu>
+      </template>
+    </Dropdown>
+    <template v-if="headerConfig.slot.show">
+      <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
+        <SwapOutlined class="w-30px" />
+        <div class="flex-grow-1">
+          {{ selectedDeviceSlot }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from 'vue';
+  import { Config } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps<{
+    moduleData: Config['moduleData'];
+    deviceType: Config['deviceType'];
+    data: any;
+  }>();
+
+  const emit = defineEmits(['select']);
+
+  const visible = ref(false);
+  const headerConfig = props.moduleData.header;
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+    props.deviceType,
+    props.moduleData
+  );
+
+  function selectHandler({ key }) {
+    selectedDeviceID.value = key;
+    emit('select', selectedDevice.value);
+  }
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      emit('select', selectedDevice.value);
+    },
+    {
+      immediate: true,
+    }
+  );
+</script>
+<style scoped>
+  @import '/@/design/theme.less';
+
+  .costume-header {
+    --image-Select: url('@/assets/images/fireNew/5.png');
+    height: 30px;
+    /* background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity)); */
+    background-image: var(--image-Select);
+    background-repeat: no-repeat;
+    background-size: 96% 100%;
+    background-position: center;
+    padding: 0 2%;
+  }
+  .costume-header_left {
+    /* border-left: 3px solid; */
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  }
+  /* .costume-header_right {
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  } */
+
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    /* background-color: transparent; */
+    color: #fff;
+  }
+  ::v-deep .zxm-select-arrow {
+    color: #fff;
+  }
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+  }
+</style>

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

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="visible" :class="deviceType === 'warnInfo' ? 'module-content1' : '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>
+  const props = defineProps<{
+    deviceType: string;
+    title: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'click']);
+  const deviceType = props.deviceType;
+
+  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-content1 {
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    padding: 15px 15px 0px 15px;
+  }
+  .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;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 0px;
+  }
+
+  // .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/blue/components/moduleMini-warn.vue

@@ -0,0 +1,111 @@
+<template>
+  <div v-if="visible" :class="deviceType === 'warnInfo' ? 'module-content1' : '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>
+  const props = defineProps<{
+    deviceType: string;
+    title: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'click']);
+  const deviceType = props.deviceType;
+
+  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-content1 {
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    padding: 15px 15px 0px 15px;
+  }
+  .module-content {
+    --image-Content: url('/src/assets/images/fireNew/4-3.png');
+    --bg-height: 28px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background: var(--image-Content) no-repeat;
+    background-size: 100% 100%;
+    padding: 15px 15px 0px 15px;
+  }
+
+  .module-content__title__expand {
+    width: 100%;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 0px;
+  }
+
+  // .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/blue/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>
+    <!-- <ModuleDustNew -->
+    <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 ModuleDustNew from './components/ModuleDustNew.vue';
+  import NewNav from './components/NewNavFire.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/blue/fireNew.vue

@@ -0,0 +1,223 @@
+<!-- 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>
+    <ModuleFireNew
+      v-for="cfg in cfgs"
+      :key="cfg.deviceType"
+      :show-style="cfg.showStyle"
+      :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName"
+      :device-type="cfg.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <ModuleNew
+      v-if="cfgTop"
+      :show-style="cfgTop.showStyle"
+      :module-data="cfgTop.moduleData"
+      :module-name="cfgTop.moduleName"
+      :device-type="cfgTop.deviceType"
+      :data="data"
+      :visible="true"
+    />
+    <ModuleFireNewDual
+      v-if="cfgA && cfgB"
+      :show-style="cfgA.showStyle"
+      :module-data-a="cfgA.moduleData"
+      :module-name-a="cfgA.moduleName"
+      :device-type-a="cfgA.deviceType"
+      :module-data-b="cfgB.moduleData"
+      :module-name-b="cfgB.moduleName"
+      :device-type-b="cfgB.deviceType"
+      :data="data"
+      :visible="true"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import NewNav from './components/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleNew from './components/ModuleNew.vue';
+  import ModuleFireNew from './components/ModuleFireNew.vue';
+  import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  // import { BDFireMock } from './mock';
+  import { getDisHome } from '../configurable.api';
+  // import { EyeFilled } from '@ant-design/icons-vue';
+  import { testConfigNewFire } from '../configurable.data.New';
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
+      return index !== 4 && index !== 3 && index !== 5;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const cfgTop = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 5;
+    })
+  );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
+  let interval: number | undefined;
+  onMounted(() => {
+    // fetchConfigs('New_fire').then(() => {
+    //   configs.value = testConfigNewFire;
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // });
+    // setInterval(() => {
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // }, 2000);
+    fetchConfigs('New_fire').then(() => {
+      configs.value = testConfigNewFire;
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').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/fireNew/1.png');
+    }
+  }
+
+  .company-home {
+    --image-modal-top: url('@/assets/images/fireNew/1.png');
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/fireNew/FireBj.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 → src/views/vent/home/configurable/blue/homeBlue.vue

@@ -29,7 +29,7 @@
 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 NewNav from './components/originalNew/NewNavFire.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleNew from './components/ModuleNew.vue';
 // import { useRoute } from 'vue-router';

src/views/vent/home/configurable/blue/ventNew.vue

@@ -0,0 +1,162 @@
+<!-- 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>
+    <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 MonitorCenter from './components/MonitorCenter.vue';
+  import NewNav from './components/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.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, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
+  // const route = useRoute();
+  let interval: number | undefined;
+
+  onMounted(() => {
+    // fetchConfigs('vent_new').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/blue/warnMonitor.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="fusion-home">
+    <div class="top-bg">
+      <NewNav Title="预警监测管控系统" />
+    </div>
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <ModuleDustNew
+          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 :echartData="paramData"></CenterAreaWarn>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, reactive, ref } from 'vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.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/NewNavFire.vue';
+  import { getTotal, getDisasterProportion } from '../configurable.api';
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { data, updateData } = useInitPage(title);
+  const route = useRoute();
+  const paramData = reactive<any>({});
+  // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag = false) {
+    timer = setTimeout(
+      async () => {
+        getTotal({}).then(updateData);
+        getCenterList();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 20000
+    );
+  }
+  async function getCenterList() {
+    let res = await getTotal({});
+    paramData.fire = res.info.sysInfo.fireS.maxLevel;
+    paramData.tf = res.info.sysInfo.ventS.maxLevel;
+    paramData.ws = res.info.sysInfo.gasS.maxLevel;
+    paramData.sb = res.info.deviceWarnInfo.maxLevel;
+    paramData.fc = res.info.sysInfo.dustS.maxLevel;
+    paramData.riskLevel = res.info.riskLevel;
+    let Levels = Object.assign({}, await getDisasterProportion({}));
+    paramData.levels =
+      Levels.level > 0 && Levels.level <= 1
+        ? 101
+        : Levels.level > 1 && Levels.level <= 2
+        ? 102
+        : Levels.level > 2 && Levels.level <= 3
+        ? 103
+        : Levels.level > 3 && Levels.level <= 4
+        ? 104
+        : 0;
+    paramData.riskData = [
+      { name: '通风', value: Levels.vent },
+      { name: '火灾', value: Levels.fire },
+      { name: '瓦斯', value: Levels.gas },
+      { name: '粉尘', value: Levels.dust },
+    ];
+  }
+  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);
+    }
+  }
+
+  :deep(.loading-box) {
+    position: unset;
+  }
+</style>

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

@@ -1,281 +0,0 @@
-<template>
-  <div class="dane-bd" :style="style">
-    <div v-if="moduleName" class="dane-title" :class="daneClass">
-      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
-        ><span class="title">{{ moduleName }}</span></div
-      >
-
-      <div class="common-navR">
-        <!-- 下拉框 -->
-        <div class="common-navR-select" v-if="header.show && header.selector.show">
-          <a-select
-            style="width: 140px"
-            size="small"
-            placeholder="请选择"
-            v-model:value="selectedDeviceID"
-            allowClear
-            :options="options"
-            @change="selectHandler"
-          />
-        </div>
-        <div v-if="header.show && header.slot.show">
-          {{ getFormattedText(selectedDevice, header.slot.value) }}
-        </div>
-      </div>
-    </div>
-    <div class="dane-content">
-      <slot>
-        <ContentNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<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 { openWindow } from '/@/utils';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-const { header } = props.moduleData;
-
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const headerPosition = props.showStyle.headerPosition;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  // if (position.includes('bottom') || parseInt(width) > 800) {
-  //   return 'dane-w';
-  // }
-  // if (position.includes('left')) {
-  //   return 'dane-m';
-  // }
-  // if (position.includes('right')) {
-  //   return 'dane-m';
-  // }
-  // return 'dane-m';
-  if (headerPosition === 'leftTop') {
-    return 'left-1';
-  }
-  if (headerPosition === 'leftCenter') {
-    return 'left-2';
-  }
-  if (headerPosition === 'leftBottom') {
-    return 'left-3';
-  }
-  if (headerPosition === 'rightTop') {
-    return 'right-1';
-  }
-  if (headerPosition === 'rightCenter') {
-    return 'right-2';
-  }
-  if (headerPosition === 'rightBottom') {
-    return 'right-3';
-  }
-  if (headerPosition === 'centerBottom') {
-    return 'center-Bottom';
-  }
-  return 'dane-m'; // 默认返回顶部模块
-});
-
-//切换时间选项
-// function onChange(value, dateString) {
-//   console.log('Selected Time: ', value);
-//   console.log('Formatted Selected Time: ', dateString);
-// }
-// function onOk(val) {
-//   console.log('onOk: ', val);
-// }
-
-//下拉框选项切换
-function selectHandler(id) {
-  selectedDeviceID.value = id;
-  emit('select', selectedDevice);
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(to);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    selectedDeviceID.value = options.value[0]?.value;
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-
-<style scoped lang="less">
-@import '/@/design/theme.less';
-
-@{theme-deepblue} {
-  .dane-bd {
-    --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
-    --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
-    --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
-    --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
-    --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
-    --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
-    --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
-  }
-}
-
-.dane-bd {
-  --image-Left1: url('@/assets/images/vent/homeNew/left1.png');
-  --image-Left2: url('@/assets/images/vent/homeNew/left2.png');
-  --image-Left3: url('@/assets/images/vent/homeNew/left3.png');
-  --image-Right1: url('@/assets/images/vent/homeNew/right1.png');
-  --image-Right2: url('@/assets/images/vent/homeNew/right2.png');
-  --image-Right3: url('@/assets/images/vent/homeNew/right3.png');
-  --image-CenterBottom: url('@/assets/images/vent/homeNew/center-Bottom.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-
-  .dane-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 40px;
-    padding: 0 40px 15px 20px;
-
-    .common-navL {
-      display: flex;
-      position: relative;
-      align-items: center;
-      color: #fff;
-      font-size: 14px;
-    }
-
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
-  }
-
-  .dane-content {
-    height: calc(100% - 38px);
-    box-sizing: border-box;
-    border-top: none;
-  }
-}
-.left-1 {
-  background: var(--image-Left1) no-repeat;
-  background-size: 100% 100%;
-  margin-left: 35px;
-}
-.left-2 {
-  background: var(--image-Left2) no-repeat;
-  background-size: 100% 100%;
-}
-.left-3 {
-  background: var(--image-Left3) no-repeat;
-  background-size: 100% 100%;
-}
-.right-1 {
-  background: var(--image-Right1) no-repeat;
-  background-size: 100% 100%;
-  margin-left: -32px;
-}
-.right-2 {
-  background: var(--image-Right2) no-repeat;
-  background-size: 100% 100%;
-}
-.right-3 {
-  background: var(--image-Right3) no-repeat;
-  background-size: 100% 100%;
-}
-
-.center-Bottom {
-  background: var(--image-CenterBottom) no-repeat;
-  background-size: 100% 100%;
-}
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
-
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
-
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
-
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
-
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-</style>

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

@@ -1,226 +0,0 @@
-<template>
-  <div class="dane-bd" :style="style" :class="daneClass">
-    <div v-if="moduleName" class="dane-title">
-      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo"
-        ><span class="title">{{ moduleName }}</span></div
-      >
-    </div>
-    <div class="dane-content">
-      <div class="common-navR">
-        <!-- 下拉框 -->
-        <div class="common-navR-select" v-if="header.show && header.selector.show">
-          <a-select
-            style="width: 350px; font-size: 16px"
-            size="small"
-            placeholder="请选择"
-            v-model:value="selectedDeviceID"
-            allowClear
-            :options="options"
-            @change="selectHandler"
-          />
-        </div>
-        <div v-if="header.show && header.slot.show">
-          {{ getFormattedText(selectedDevice, header.slot.value) }}
-        </div>
-      </div>
-      <slot>
-        <ContentFireNew style="height: 100%" :moduleData="moduleData" :data="selectedDevice" />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import ContentFireNew from './content-FireNew.vue';
-import { defineProps, defineEmits, computed, watch } from 'vue';
-import { useInitModule } from '../../hooks/useInit';
-import { getFormattedText } from '../../hooks/helper';
-import { openWindow } from '/@/utils';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-const { header } = props.moduleData;
-
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 根据配置里的定位判断应该使用哪个module组件
-const daneClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'dane-w';
-  }
-  if (position.includes('left')) {
-    return 'dane-m';
-  }
-  if (position.includes('right')) {
-    return 'dane-m';
-  }
-  // return 'dane-m';
-  return 'dane-m'; // 默认返回顶部模块
-});
-//切换时间选项
-// function onChange(value, dateString) {
-//   console.log('Selected Time: ', value);
-//   console.log('Formatted Selected Time: ', dateString);
-// }
-// function onOk(val) {
-//   console.log('onOk: ', val);
-// }
-
-//下拉框选项切换
-function selectHandler(id) {
-  selectedDeviceID.value = id;
-  emit('select', selectedDevice);
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(to);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    selectedDeviceID.value = options.value[0]?.value;
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-
-<style scoped lang="less">
-@import '/@/design/theme.less';
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-@{theme-deepblue} {
-  .dane-bd {
-    --image-Content: url('@/assets/images/fireNew/4-3.png');
-    --image-Select: url('@/assets/images/fireNew/5.png');
-  }
-}
-
-.dane-bd {
-  --image-Select: url('@/assets/images/fireNew/5.png');
-  --image-Content: url('@/assets/images/fireNew/4-3.png');
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-
-  .dane-title {
-    width: 94%;
-    height: 40px;
-    text-align: center;
-    padding-top: 9px;
-
-    .common-navL {
-      position: relative;
-      align-items: center;
-      color: #fff;
-      font-size: 13px;
-      font-weight: bold;
-      font-family: 'douyuFont';
-    }
-  }
-
-  .dane-content {
-    height: calc(100% - 38px);
-    box-sizing: border-box;
-    border-top: none;
-    .common-navR {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--image-Select) no-repeat;
-      background-size: 100% 100%;
-      width: 87%;
-      margin-left: 30px;
-    }
-  }
-}
-.dane-m {
-  background: var(--image-Content) no-repeat;
-  background-size: 100% 100%;
-}
-:deep(.zxm-select-selector) {
-  height: 22px !important;
-  border: none !important;
-  // background-color: rgb(15 64 88) !important;
-  background-color: transparent !important;
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-select-arrow) {
-  color: #8087a1 !important;
-}
-
-:deep(.zxm-picker) {
-  border: none !important;
-  background-color: rgb(15 64 88) !important;
-  box-shadow: none;
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-input > input) {
-  color: #a1dff8 !important;
-  text-align: center !important;
-}
-
-:deep(.zxm-picker-separator) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-picker-active-bar) {
-  display: none !important;
-}
-
-:deep(.zxm-picker-suffix) {
-  color: #a1dff8 !important;
-}
-
-:deep(.zxm-switch) {
-  min-width: 48px !important;
-}
-
-:deep(.zxm-switch-checked) {
-  background-color: rgb(15 64 89) !important;
-}
-
-:deep(.zxm-switch-handle::before) {
-  background-color: rgb(33 179 247) !important;
-}
-
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-</style>

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

@@ -1,319 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="New-nav">
-    <div class="main-title">{{ Title }}</div>
-    <!-- menu区域 -->
-    <div class="nav-menu">
-      <div v-if="!disabled" 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 v-if="!disabled" 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 && !disabled" 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: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-let menuList = ref<any[]>([
-  {
-    name: '智能通风',
-    targatUrl: '/micro-vent-3dModal/configurable/ventNew/ventS/home',
-  },
-  {
-    name: '火灾监控',
-    targatUrl: '/micro-vent-3dModal/configurable/fireNew/fireS/home',
-  },
-  {
-    name: '粉尘监控',
-    targatUrl: '/configurable/dustNew/dustS/home',
-  },
-  {
-    name: '预警监测',
-    targatUrl: '/warnMonitor/configurable/home',
-  },
-  {
-    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);
-  },
-  {
-    immediate: true,
-  }
-);
-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;
-    color: #fff;
-  }
-
-  .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%;
-      }
-
-      .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;
-      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-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;
-      }
-
-      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/bule/components/content-New.vue

@@ -1,499 +0,0 @@
-<!-- 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/content.vue

@@ -1,537 +0,0 @@
-<!-- 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'">
-          <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
-            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>
-        <!-- lxh -->
-        <template v-if="config.name === 'select_cs'">
-          <SelectCs :devicedata="config.data" :setLabelData="config.config.setLabelConfig" />
-        </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.name === 'partition'">
-          <Partition class="content__module" :type="config.type" :label="config.label" :icon="config.icon" />
-        </template>
-        <template v-if="config.name === 'selector_dual_chart'">
-          <SelectorDualChart :data="config.data" :moduleData="props.moduleData" :config="config" />
-        </template>
-        <template v-if="config.name === 'radio_label'">
-          <RadioLabel class="content__module" :type="config.config.type" :config="config.config" />
-        </template>
-        <template v-if="config.name === 'button_list'">
-          <ButtonList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
-        </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 GalleryList from '../../components/detail/GalleryList.vue';
-import CustomTable from '../../components/detail/CustomTable.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 SelectCs from '../../components/preset/SelectCs.vue';
-import MiniBoardNew from '../../components/detail/MiniBoard-New.vue';
-import Partition from '../../components/preset/partition.vue';
-import SelectorDualChart from '../../components/preset/selectorDualChart.vue';
-import RadioLabel from '../../components/preset/radioLabel.vue';
-import ButtonList from '../../components/preset/buttonList.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) || [];
-  const partition = clone(props.moduleData.partition) || [];
-
-  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;
-      }
-      case 'partition': {
-        const cfg = partition.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          data,
-          ...cfg,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
-      }
-    }
-    // console.log(arr,'arr---')
-    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;
-  overflow-y: auto; // 这里会导致样式无故添加滚动条
-}
-
-.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%;
-}
-
-// .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/header.vue

@@ -1,109 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <!-- Header部分 -->
-  <div v-if="headerConfig.show" class="w-100% flex costume-header">
-    <!-- 选择下拉框，自动填充剩余空间，这种实现是因为 Select 不支持 suffix -->
-    <Dropdown
-      v-if="headerConfig.selector.show"
-      class="flex-grow-1 costume-header_left"
-      :trigger="['click']"
-      :bordered="false"
-      @open-change="visible = $event"
-    >
-      <div class="flex-basis-100% flex flex-items-center" @click.prevent>
-        <SwapOutlined class="w-30px" />
-        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
-          {{ selectedDeviceLabel }}
-        </div>
-        <CaretUpOutlined class="w-30px" v-if="visible" />
-        <CaretDownOutlined class="w-30px" v-else />
-      </div>
-      <template #overlay>
-        <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
-          <MenuItem v-for="item in options" :key="item.value" :title="item.label">
-            {{ item.label }}
-          </MenuItem>
-        </Menu>
-      </template>
-    </Dropdown>
-    <template v-if="headerConfig.slot.show">
-      <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
-        <SwapOutlined class="w-30px" />
-        <div class="flex-grow-1">
-          {{ selectedDeviceSlot }}
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { Config } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
-import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-
-const props = defineProps<{
-  moduleData: Config['moduleData'];
-  deviceType: Config['deviceType'];
-  data: any;
-}>();
-
-const emit = defineEmits(['select']);
-
-const visible = ref(false);
-const headerConfig = props.moduleData.header;
-const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-  props.deviceType,
-  props.moduleData
-);
-
-function selectHandler({ key }) {
-  selectedDeviceID.value = key;
-  emit('select', selectedDevice.value);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    emit('select', selectedDevice.value);
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-<style scoped>
-@import '/@/design/theme.less';
-
-.costume-header {
-  height: 30px;
-  background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
-}
-.costume-header_left {
-  border-left: 3px solid;
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-.costume-header_right {
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-  /* background-color: transparent; */
-  color: #fff;
-}
-::v-deep .zxm-select-arrow {
-  color: #fff;
-}
-::v-deep .zxm-select-selection-item {
-  color: #fff !important;
-}
-::v-deep .zxm-select-selection-placeholder {
-  color: #fff !important;
-}
-</style>

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

@@ -1,110 +0,0 @@
-<template>
-  <div v-if="visible" :class="deviceType === 'warnInfo' ? 'module-content1' : '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>
-const props = defineProps<{
-  deviceType: string;
-  title: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'click']);
-const deviceType = props.deviceType;
-
-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-content1 {
-  --bg-height: 28px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-  padding: 15px 15px 0px 15px;
-}
-.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;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 0px;
-}
-
-// .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/bule/dustNew.vue

@@ -1,188 +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" /> -->
-      <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/fireNew.vue

@@ -1,223 +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>
-    <ModuleFireNew
-      v-for="cfg in cfgs"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :data="data"
-      :visible="true"
-    />
-    <ModuleNew
-      v-if="cfgTop"
-      :show-style="cfgTop.showStyle"
-      :module-data="cfgTop.moduleData"
-      :module-name="cfgTop.moduleName"
-      :device-type="cfgTop.deviceType"
-      :data="data"
-      :visible="true"
-    />
-    <ModuleFireNewDual
-      v-if="cfgA && cfgB"
-      :show-style="cfgA.showStyle"
-      :module-data-a="cfgA.moduleData"
-      :module-name-a="cfgA.moduleName"
-      :device-type-a="cfgA.deviceType"
-      :module-data-b="cfgB.moduleData"
-      :module-name-b="cfgB.moduleName"
-      :device-type-b="cfgB.deviceType"
-      :data="data"
-      :visible="true"
-    />
-  </div>
-</template>
-<script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/originalNew/NewNavFire.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import ModuleNew from './components/ModuleNew.vue';
-import ModuleFireNew from './components/ModuleFireNew.vue';
-import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-// import { BDFireMock } from './mock';
-import { getDisHome } from '../configurable.api';
-// import { EyeFilled } from '@ant-design/icons-vue';
-import { testConfigNewFire } from '../configurable.data.New';
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => {
-    return index !== 4 && index !== 3 && index !== 5;
-  })
-);
-const cfgA = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 3;
-  })
-);
-const cfgB = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 4;
-  })
-);
-const cfgTop = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 5;
-  })
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
-let interval: number | undefined;
-onMounted(() => {
-  // fetchConfigs('New_fire').then(() => {
-  //   configs.value = testConfigNewFire;
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // });
-  // setInterval(() => {
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // }, 2000);
-  fetchConfigs('New_fire').then(() => {
-    configs.value = testConfigNewFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').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/fireNew/1.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('@/assets/images/fireNew/1.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/fireNew/FireBj.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/ventNew.vue

@@ -1,166 +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 /> -->
-    </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

@@ -1,185 +0,0 @@
-<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 :echartData="paramData"></CenterAreaWarn>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } 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/NewNavFire.vue';
-import { getTotal, getDisasterProportion } from '../configurable.api';
-const { title = '智能通风管控系统' } = useGlobSetting();
-const { configs, fetchConfigs } = useInitConfigs();
-const { data, updateData } = useInitPage(title);
-const route = useRoute();
-const paramData = reactive<any>({});
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  timer = setTimeout(
-    async () => {
-      getTotal({}).then(updateData);
-      getCenterList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    },
-    flag ? 0 : 20000
-  );
-}
-async function getCenterList() {
-  let res = await getTotal({});
-  paramData.fire = res.info.sysInfo.fireS.maxLevel;
-  paramData.tf = res.info.sysInfo.ventS.maxLevel;
-  paramData.ws = res.info.sysInfo.gasS.maxLevel;
-  paramData.sb = res.info.deviceWarnInfo.maxLevel;
-  paramData.fc = res.info.sysInfo.dustS.maxLevel;
-  paramData.riskLevel = res.info.riskLevel;
-  let Levels = Object.assign({}, await getDisasterProportion({}));
-  paramData.levels =
-    Levels.level > 0 && Levels.level <= 1
-      ? 101
-      : Levels.level > 1 && Levels.level <= 2
-      ? 102
-      : Levels.level > 2 && Levels.level <= 3
-      ? 103
-      : Levels.level > 3 && Levels.level <= 4
-      ? 104
-      : 0;
-  paramData.riskData = [
-    { name: '通风', value: Levels.vent },
-    { name: '火灾', value: Levels.fire },
-    { name: '瓦斯', value: Levels.gas },
-    { name: '粉尘', value: Levels.dust },
-  ];
-}
-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);
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
-</style>
-

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

@@ -450,9 +450,9 @@
     margin-left: -24% !important;
   }
   .content__module_dust {
-    background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
+    // background: url('@/assets/images/vent/homeNew/bottomBg.png');
+    // background-repeat: no-repeat;
+    // background-size: 100% 100%;
     width: 100%;
     height: 100%;
     padding: 0 34px;

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -368,7 +368,7 @@
         textStyle,
         grid: {
           top: 50,
-          bottom: dataZoom.length ? 70 : 50,
+          bottom: dataZoom.length ? 70 : 30,
         },
         legend: {
           textStyle,
@@ -605,7 +605,7 @@
           left: 50,
           top: 50,
           right: 50,
-          bottom: dataZoom.length ? 70 : 50,
+          bottom: dataZoom.length ? 70 : 30,
         },
         dataZoom: baseDataZoom,
         xAxis: xAxis.map((e) => {
@@ -613,6 +613,10 @@
             ...e,
             type: 'category',
             boundaryGap: false,
+            axisLabel: {
+              width: 100,
+              overflow: 'break',
+            },
           };
         }),
         yAxis: yAxis.map((e, i) => {
@@ -666,7 +670,7 @@
           left: 40,
           top: 50,
           right: 40,
-          bottom: dataZoom.length ? 70 : 10,
+          bottom: dataZoom.length ? 70 : 30,
           show: false,
         },
         dataZoom: baseDataZoom,
@@ -757,7 +761,7 @@
         textStyle,
         grid: {
           top: 40,
-          bottom: 50,
+          bottom: 30,
         },
         legend: {
           textStyle,
@@ -859,7 +863,7 @@
         textStyle,
         grid: {
           top: 40,
-          bottom: 50,
+          bottom: 30,
         },
         legend: {
           textStyle,

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

@@ -520,6 +520,7 @@
     padding-top: 30%;
     background-repeat: no-repeat;
     background-position: center top;
+    white-space: normal;
   }
 
   .mini-board__value_F {

src/views/vent/home/configurable/components/preset/DeviceAlarm.vue

@@ -237,8 +237,9 @@
   watch(
     () => props.devicedata,
     (val) => {
+      const { ignoreKeywords = [], ignoreWarning = false, ignoreClosed = false, ignoreCount = false } = props.config;
       Object.keys(iconsMonitor).forEach((el) => {
-        if (val && val[el] && !props.config.ignoreKeywords.includes(el)) {
+        if (val && val[el] && !ignoreKeywords.includes(el)) {
           iconsMonitor[el].level = val[el].maxLevel;
           iconsMonitor[el]['text'] = val[el].name;
           // iconsMonitor[el]['count'] = val[el].count;
@@ -246,13 +247,13 @@
           iconsMonitor[el].warnCount = val[el].count;
           iconsMonitor[el].closeCount = val[el].netstatus;
 
-          if (props.config.ignoreWarning) {
+          if (ignoreWarning) {
             iconsMonitor[el].warnCount = 0;
           }
-          if (props.config.ignoreClosed) {
+          if (ignoreClosed) {
             iconsMonitor[el].closeCount = 0;
           }
-          if (props.config.ignoreCount) {
+          if (ignoreCount) {
             iconsMonitor[el].allCount = 0;
           }
         }
@@ -260,6 +261,7 @@
     },
     {
       deep: true,
+      immediate: true,
     }
   );
 </script>

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

@@ -103,10 +103,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:410px;height:493px;',
-      version: '保德',
-      position: 'top:65px;left:10px;',
-      headerPosition: 'leftTop',
+      size: 'width:450px;height:550px;',
+      version: '淡蓝色',
+      position: 'top:60px;left:0;',
     },
   },
   {
@@ -173,10 +172,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:370px;height:360px;',
-      version: '保德',
-      position: 'bottom:40px;left:10px;',
-      headerPosition: 'leftBottom',
+      size: 'width:450px;height:280px;',
+      version: '淡蓝色',
+      position: 'top:620px;left:0;',
     },
   },
   {
@@ -237,10 +235,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:1000px;height:280px;',
-      version: '保德',
-      position: 'bottom:8px;left:455px',
-      headerPosition: 'centerBottom',
+      size: 'width:980px;height:300px;',
+      version: '淡蓝色',
+      position: 'bottom:8px;left:470px',
     },
   },
   {
@@ -312,10 +309,9 @@ export const testConfigNewDust: Config[] = [
       to: 'http://10.248.210.154:8801',
     },
     showStyle: {
-      size: 'width:415px;height:300px;',
-      version: '保德',
-      position: 'top:60px;right:10px;',
-      headerPosition: 'rightTop',
+      size: 'width:450px;height: 280px;',
+      version: '淡蓝色',
+      position: 'top:60px;right:0;',
     },
   },
   {
@@ -379,10 +375,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:378px;height:260px;',
-      version: '保德',
-      position: 'top:370px;right:10px;',
-      headerPosition: 'rightCenter',
+      size: 'width:450px;height:280px;',
+      version: '淡蓝色',
+      position: 'top:350px;right:0;',
     },
   },
   {
@@ -445,10 +440,9 @@ export const testConfigNewDust: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:385px;height:280px;',
-      version: '保德',
-      position: 'bottom:20px;right:10px;',
-      headerPosition: 'rightBottom',
+      size: 'width:440px;height:280px;',
+      version: '淡蓝色',
+      position: 'top:640px;right:0;',
     },
   },
 ];

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

@@ -282,7 +282,6 @@ export const testConfigVent: Config[] = [
       position: 'top:555px;left:15px;',
     },
   },
-
   {
     deviceType: 'sys_wind',
     moduleName: '风量监测',
@@ -3311,7 +3310,7 @@ export const testConfigVentNew: Config[] = [
   {
     deviceType: 'fanmain',
     moduleName: '主通风机系统',
-    pageType: 'vent',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: true,
@@ -3322,7 +3321,7 @@ export const testConfigVentNew: Config[] = [
         },
         slot: {
           show: true,
-          value: '运行风机：${readData.Fan1StartStatus}',
+          value: '风机：${readData.Fan1StartStatus}',
           trans: {
             '1': '1#风机',
             '0': '2#风机',
@@ -3343,7 +3342,7 @@ export const testConfigVentNew: Config[] = [
           },
           {
             name: 'board',
-            basis: '30%',
+            basis: '33%',
           },
         ],
       },
@@ -3387,16 +3386,15 @@ export const testConfigVentNew: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:380px;height:280px;',
+      size: 'width:440px;height:280px;',
       version: '原版',
       position: 'top:60px;left:0;',
-      headerPosition: 'leftTop',
     },
   },
   {
     deviceType: '',
     moduleName: '通风设施远程控制',
-    pageType: 'vent',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: false,
@@ -3411,7 +3409,7 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: true,
+        show: false,
         type: 'video',
         link: '/video/fanLocal.webm',
       },
@@ -3436,19 +3434,50 @@ export const testConfigVentNew: Config[] = [
           readFrom: 'device',
         },
       ],
+      mock: {
+        device: {
+          fanmain: {
+            maxLevel: 0,
+            name: '主扇',
+            totalCount: 0,
+            count: 0,
+            netstatus: 0,
+          },
+          fanlocal: {
+            maxLevel: 0,
+            name: '局扇',
+            totalCount: 0,
+            count: 0,
+            netstatus: 0,
+          },
+          gate: {
+            maxLevel: 0,
+            name: '风门',
+            totalCount: 0,
+            count: 0,
+            netstatus: 0,
+          },
+          window: {
+            maxLevel: 0,
+            name: '风窗',
+            totalCount: 0,
+            count: 0,
+            netstatus: 0,
+          },
+        },
+      },
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
+      size: 'width:440px;height:280px;',
       version: '原版',
       position: 'top:350px;left:0;',
-      headerPosition: 'leftCenter',
     },
   },
   {
     deviceType: 'warn',
     moduleName: '预警监测',
-    pageType: 'vent_realtime',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: true,
@@ -3518,16 +3547,15 @@ export const testConfigVentNew: Config[] = [
       to: '/monitorChannel/monitor-alarm-home',
     },
     showStyle: {
-      size: 'width:387px;height:280px;',
+      size: 'width:440px;height:280px;',
       version: '新版',
       position: 'top:640px;left:0;',
-      headerPosition: 'leftBottom',
     },
   },
   {
     deviceType: 'sys_wind',
-    moduleName: '',
-    pageType: 'vent',
+    moduleName: '风量监测',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: false,
@@ -3550,8 +3578,8 @@ export const testConfigVentNew: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'tabs',
-            basis: '65%',
+            name: 'chart',
+            basis: '100%',
           },
         ],
       },
@@ -3562,68 +3590,40 @@ export const testConfigVentNew: Config[] = [
       gallery: [],
       complex_list: [],
       gallery_list: [],
-      chart: [],
-      to: '',
-    },
-    showStyle: {
-      size: 'width:1000px;height:120px;',
-      version: '新版',
-      position: 'top:85px;left:460px;',
-      headerPosition: 'centerTop',
-    },
-  },
-  {
-    deviceType: 'sys_wind',
-    moduleName: '',
-    pageType: 'vent',
-    moduleData: {
-      header: {
-        show: false,
-        readFrom: '',
-        selector: {
-          show: false,
-          value: '',
-        },
-        slot: {
-          show: false,
-          value: '',
+      chart: [
+        {
+          type: 'bar',
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [
+            { show: true, name: '风量(m³/min)', position: 'left' },
+            { show: true, name: '风速(m/s)', position: 'right' },
+          ],
+          dataZoom: [
+            {
+              show: true,
+              end: 20,
+            },
+          ],
+          series: [
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.m3', label: '风量' },
+            { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
+          ],
         },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: {
-        direction: 'row',
-        items: [
-          {
-            name: 'tabs',
-            basis: '65%',
-          },
-        ],
-      },
-      board: [],
-      list: [],
-      table: [],
-      preset: [],
-      gallery: [],
-      complex_list: [],
-      gallery_list: [],
-      chart: [],
-      to: '',
+      ],
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=windrect',
     },
     showStyle: {
-      size: 'width:1000px;height:100px;',
-      version: '新版',
-      position: 'bottom:0;left:460px;',
-      headerPosition: 'centerBottom',
+      size: 'width:1000px;height:260px;',
+      version: '原版',
+      position: 'bottom:8px;left:460px;',
     },
   },
   {
     deviceType: 'fanlocal',
     moduleName: '局部通风机系统',
-    pageType: 'vent',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: true,
@@ -3634,7 +3634,7 @@ export const testConfigVentNew: Config[] = [
         },
         slot: {
           show: true,
-          value: '运行风机：${readData.Fan1StartStatus}',
+          value: '风机：${readData.Fan1StartStatus}',
           trans: {
             '1': '1#风机',
             '0': '2#风机',
@@ -3649,13 +3649,13 @@ export const testConfigVentNew: Config[] = [
       layout: {
         direction: 'column',
         items: [
-          {
-            name: 'board',
-            basis: '25%',
-          },
+          // {
+          //   name: 'board',
+          //   basis: '25%',
+          // },
           {
             name: 'chart',
-            basis: '75%',
+            basis: '100%',
           },
         ],
       },
@@ -3699,16 +3699,15 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanlocal',
     },
     showStyle: {
-      size: 'width:390px;height:324px;',
+      size: 'width:440px;height:265px;',
       version: '原版',
       position: 'top:60px;right:0;',
-      headerPosition: 'rightTop',
     },
   },
   {
     deviceType: 'sys_majorpath',
     moduleName: '关键通风路线',
-    pageType: 'vent',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: true,
@@ -3768,16 +3767,15 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
+      size: 'width:440px;height:310px;',
       version: '新版',
-      position: 'top:350px;right:0;',
-      headerPosition: 'rightCenter',
+      position: 'top:335px;right:0;',
     },
   },
   {
     deviceType: 'sys_surface_caimei',
     moduleName: '工作面智能监控',
-    pageType: 'vent',
+    pageType: 'vent_new',
     moduleData: {
       header: {
         show: true,
@@ -3801,12 +3799,12 @@ export const testConfigVentNew: Config[] = [
         items: [
           {
             name: 'chart',
-            basis: '75%',
-          },
-          {
-            name: 'board',
-            basis: '25%',
+            basis: '100%',
           },
+          // {
+          //   name: 'board',
+          //   basis: '25%',
+          // },
         ],
       },
       board: [
@@ -3848,10 +3846,9 @@ export const testConfigVentNew: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_surface_caimei&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
+      size: 'width:440px;height:270px;',
       version: '新版',
-      position: 'top:640px;right:0;',
-      headerPosition: 'rightBottom',
+      position: 'top:650px;right:0;',
     },
   },
 ];
@@ -4405,3 +4402,10 @@ export const testConfigWarnMonitor: Config[] = [
     },
   },
 ];
+
+export let menuList: any[] = [
+  { name: '灾害预警', MenuItemList: [] },
+  { name: '通风预警', MenuItemList: [] },
+  { name: '火灾预警', MenuItemList: [] },
+  { name: '粉尘预警', MenuItemList: [] },
+]

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

@@ -4,7 +4,7 @@
     <!-- 顶部标题样式块 -->
     <div class="top-bg">
       <!-- <div class="main-title">{{ mainTitle }}</div> -->
-      <NewNav disabled :Title="mainTitle" />
+      <NewNav :Title="mainTitle" />
     </div>
     <!-- 中间样式块 -->
     <div class="center-info-bar">
@@ -69,7 +69,7 @@ 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 NewNav from './blue/components/NewNavFire.vue';
 import { getDisHome } from './configurable.api';
 import { testConfigMineFire } from './configurable.data.mine';
 import VentModal from '/@/components/vent/micro/ventModal.vue';

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

@@ -1,7 +1,10 @@
 <template>
-  <div class="common-green">
+  <div class="vent-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+      <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex" />
+      </div>
       <div class="main-container">
         <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
         <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
@@ -13,7 +16,7 @@
       </div>
     </template>
 
-    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 468px); height: 530px; position: absolute; left: 436px; top: 110px">
       <VentModal />
     </div>
   </div>
@@ -21,12 +24,13 @@
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import greenNav from './components/green-nav.vue';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 // import greenRightTag from './components/green-right-tag.vue';
 import { list } from '../configurable.api';
 import { useRoute, useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigVent, testConfigVentRealtime } from '../configurable.data';
+import { testConfigVent, } from '../configurable.data';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
 
 const { title = '智能通风管控系统' } = useGlobSetting();
@@ -34,41 +38,13 @@ const { title = '智能通风管控系统' } = useGlobSetting();
 const { isOriginal, fetchConfigs } = useInitConfigs();
 const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
 const route = useRoute();
-
+let activeIndex = ref(1)
 let interval: number | undefined;
 let configs = ref<any[]>([]);
 function refresh() {
   fetchConfigs('vent').then(() => {
     configs.value = testConfigVent;
     updateEnhancedConfigs(configs.value);
-
-    // 测风装置	windrect
-    // 自动风窗	window
-    // 自动风门	gate
-    // 传感器	modelsensor
-    // 局部通风机	fanlocal
-    // 主通风机	fanmain
-    // 密闭	obfurage
-    // 安全监控	safetymonitor
-    // 光纤测温	fiber
-    // 束管监测	bundletube
-    // 制氮	nitrogen
-    // 制浆	pulping
-    // 喷淋	spray
-    // 喷粉	dustdev
-    // 喷雾设备	atomizing
-    // 除尘风机	dedustefan
-    // 粉尘传感器	dustsensor
-    // 转载点	transferpoint
-    // 瓦斯抽采泵	pump
-    // 粉尘	dusting
-    // 瓦斯监测	gasmonitor
-    // 球阀	ballvalve
-    // 压风机	forcFan
-    // 瓦斯巡检	gaspatrol
-    // 防火门	firedoor
-    // 隔爆设施	explosionProof
-    // 瓦斯管道阀门	gasvalve
     list({
       types: configs.value
         .filter((e) => e.deviceType)
@@ -121,24 +97,32 @@ onUnmounted(() => {
 }
 
 @{theme-deepblue} {
-  .common-green {
+  .vent-green {
     --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
   }
 }
 
-.common-green {
+.vent-green {
   --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
   width: 100%;
   height: 100%;
   position: relative;
 
-  .main-container {
+  .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .main-container {
+    position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

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

@@ -28,7 +28,7 @@
             </div>
             <div class="vent-warn">
                 <div class="vent-icon"></div>
-                <div class="item-content"  @click="showModal('vent')">
+                <div class="item-content" @click="showModal('vent')">
                     <div class="ite-label">通风监测预警</div>
                     <div class="ite-val">{{ paramDatas.tf == 0
                         ? '低风险'
@@ -91,7 +91,7 @@
             </div>
             <div class="fire-warn">
                 <div class="fire-icon"></div>
-                <div class="item-content" @click="showModal('fire')" >
+                <div class="item-content" @click="showModal('fire')">
                     <div class="ite-label">火灾监测预警</div>
                     <div class="ite-val">{{ paramDatas.fire == 0
                         ? '低风险'
@@ -131,7 +131,7 @@
 
 <script lang="ts" setup>
 import { reactive, watch } from 'vue'
- import { useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
 import RiskWarnLevel from './dz-risk.vue'
 let props = defineProps({
@@ -148,32 +148,32 @@ let paramDatas = reactive<any>({})
 const { sysOrgCode, sysDataType } = useGlobSetting();
 
 //跳转详情
-  function showModal(data) {
+function showModal(data) {
     switch (data) {
-      case 'vent':
-        router.push('/ventilate/warn/home');
-        break;
-      case 'fire':
-        router.push('/fire/warn/home');
-        break;
-      case 'dust':
-        router.push('/dust/warn/home');
-        break;
-      case 'waterLevel':
-        console.log('waterLevel');
-        router.push('/warn/waterLevel/home');
-        break;
-      case 'gas':
-        router.push('/gas/warn/home');
-        break;
-      case 'sbyj':
-        router.push('/device/warn/home');
-        break;
-      case 'Minepressure':
-        router.push('/monitorChannel/monitor-Minepressure');
-        break;
+        case 'vent':
+            router.push('/ventilate/warn/home');
+            break;
+        case 'fire':
+            router.push('/fire/warn/home');
+            break;
+        case 'dust':
+            router.push('/dust/warn/home');
+            break;
+        case 'waterLevel':
+            console.log('waterLevel');
+            router.push('/warn/waterLevel/home');
+            break;
+        case 'gas':
+            router.push('/gas/warn/home');
+            break;
+        case 'sbyj':
+            router.push('/device/warn/home');
+            break;
+        case 'Minepressure':
+            router.push('/monitorChannel/monitor-Minepressure');
+            break;
     }
-  }
+}
 
 watch(() => props.paramData, (newV, oldV) => {
     paramDatas = newV
@@ -276,8 +276,8 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .gas-warn {
         position: absolute;
-      left: 420px;
-    top: 436px;
+        left: 420px;
+        top: 436px;
         width: 132px;
         height: 108px;
         background: var(--image-model_gas_warn) no-repeat;
@@ -296,7 +296,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .fire-warn {
         position: absolute;
-           right: 178px;
+        right: 178px;
         top: 58px;
         width: 132px;
         height: 108px;
@@ -316,7 +316,7 @@ watch(() => props.paramData, (newV, oldV) => {
 
     .sz-warn {
         position: absolute;
-        right:34px;
+        right: 34px;
         top: 136px;
         width: 132px;
         height: 108px;
@@ -332,6 +332,7 @@ watch(() => props.paramData, (newV, oldV) => {
         height: 56px;
         background: var(--image-model_item_content) no-repeat;
         background-size: 100% 100%;
+        color: #fff;
     }
 
     .item-content1 {
@@ -362,6 +363,7 @@ watch(() => props.paramData, (newV, oldV) => {
     .ite-content {
         width: 50%;
         height: 100%;
+        color: #fff;
     }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="green-nav">
-    <div class="main-title">{{ Title }}</div>
+    <div class="main-title">{{ mainTitle }}</div>
     <!-- menu区域 -->
     <div class="nav-menu">
       <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
@@ -20,47 +20,44 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: ''
-  },
-  activeIndex: {
-    type: Number,
-    default: 0
+import { menuList } from '../../configurable.data'
+import { useGlobSetting } from '/@/hooks/setting';
+import { useInitPage } from '../../hooks/useInit';
+import { useRouter } from 'vue-router';
+
+let props=defineProps({
+  activeIndex:{
+    type:Number,
   }
 })
 
-let menuList = ref<any[]>([
-  {
-    name: '灾害预警', MenuItemList: [
-      // { name: '光纤测温监测' },
-      // { name: '束管监测' },
-      // { name: '智能注氮系统' },
-      // { name: '智能注浆系统' },
-      // { name: '火灾监测预警' },
-      // { name: '色谱仪报表分析' },
-    ]
-  },
-  { name: '火灾监控', MenuItemList: [] },
-  { name: '粉尘监控', MenuItemList: [] },
-  { name: '多灾融合预警', MenuItemList: [] },
-  // { name: '智能通风', MenuItemList: [] },
-  // { name: '瓦斯监控', MenuItemList: [] },
-  // { name: '综合管控', MenuItemList: [] },
-])//一级菜单列表
-
-
+const { title = '智能通风管控系统' } = useGlobSetting();
+const { mainTitle } = useInitPage(title);
 let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
 let menuItemActive = ref(0)//menuItem当前激活选项
-let $emit = defineEmits(['menuToggle'])
+let router = useRouter()
+
 
 
 //menu选项切换
 function menuClick(index, item) {
   isShowMenuItem.value = !isShowMenuItem.value
   //menu切换，界面跳转
-  $emit('menuToggle', item, index)
+  switch (item.name) {
+    case '灾害预警':
+      router.push('/configurable/green/home')
+      break;
+    case '通风预警':
+      router.push('/micro-vent-3dModal/configurable/green/ventS/home')
+      break;
+    case '火灾预警':
+      router.push('/micro-vent-3dModal/configurable/green/fireS/home')
+      break;
+    case '粉尘预警':
+      router.push('/micro-vent-3dModal/configurable/green/dustS/home')
+      break;
+
+  }
 }
 
 //menuItem选项切换
@@ -102,6 +99,7 @@ function menuItemClick(ind) {
     font-family: 'douyuFont';
     font-size: 20px;
     letter-spacing: 2px;
+    color: #fff;
   }
 
   .nav-menu {
@@ -112,6 +110,7 @@ function menuItemClick(ind) {
     height: 100%;
     display: flex;
     justify-content: flex-start;
+    color: #fff;
 
     .nav-menu-active {
       position: relative;
@@ -173,27 +172,6 @@ function menuItemClick(ind) {
         }
       }
     }
-
-    // @keyframes fadeIn {
-    //   from {
-    //     opacity: 0;
-    //   }
-
-    //   to {
-    //     opacity: 1;
-    //   }
-    // }
-
-    // /* 定义淡出动画 */
-    // @keyframes fadeOut {
-    //   from {
-    //     opacity: 1;
-    //   }
-
-    //   to {
-    //     opacity: 0;
-    //   }
-    // }
   }
 }
 </style>

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

@@ -2,19 +2,23 @@
   <div class="dust-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+       <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <div class="main-container">
         <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
           :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
           :visible="true" />
       </div>
     </template>
-    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted,ref } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
@@ -29,7 +33,7 @@ const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData, updateEnhancedConfigs } = useInitPage(title);
 const route = useRoute();
 let interval: number | undefined;
-
+let activeIndex=ref(3)
 onMounted(() => {
   fetchConfigs('dust-green').then(() => {
     configs.value = testConfigDustGreen;
@@ -70,9 +74,22 @@ onUnmounted(() => {
   height: 100%;
   position: relative;
 
-  .main-container {
+   .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    // background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+  }
+
+
+  .main-container {
+     position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

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

@@ -2,6 +2,9 @@
   <div class="fire-green">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+        <div v-if="!route.query.embed" class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <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"
@@ -9,13 +12,14 @@
       </div>
     </template>
 
-    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+    <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
       <VentModal />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { onMounted, onUnmounted,ref } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
@@ -27,8 +31,8 @@ const { title = '智能通风管控系统' } = useGlobSetting();
 const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
+let activeIndex=ref(2)
 let interval: number | undefined;
-
 onMounted(() => {
   fetchConfigs('fire-green').then(() => {
     configs.value = testConfigFireGreen;
@@ -62,10 +66,20 @@ onUnmounted(() => {
    width: 100%;
   height: 100%;
   position: relative;
+  .top-bg {
+    width: 100%;
+    height: 96px;
+    position: absolute;
+    z-index: 1;
+  }
 
   .main-container {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 }
 

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

@@ -2,6 +2,9 @@
   <div class="fusion-home">
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
+       <div  class="top-bg">
+        <greenNav :activeIndex="activeIndex"/>
+      </div>
       <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"
@@ -16,6 +19,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import greenNav from './components/green-nav.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleOriginal from './components/ModuleOriginal-green.vue';
 import CenterAreaGreen from './components/center-area-green.vue';
@@ -28,6 +32,7 @@ const { configs, fetchConfigs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
 const paramData = reactive<any>({})
+let activeIndex=ref(0)
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
 function getMonitor(flag = false) {
@@ -99,15 +104,27 @@ onUnmounted(() => {
   height: 100%;
   position: relative;
 
-  .main-container {
+   .top-bg {
     width: 100%;
-    height: 100%;
+    height: 96px;
+    // background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .main-container {
+     position: absolute;
+    top: 96px;
+    width: calc(100% - 30px);
+    height: calc(100% - 96px);
+    margin: 0px 15px;
+    box-sizing: border-box;
   }
 
   .center-area {
     position: absolute;
     left: 450px;
-    top: 0;
+    top: 96px;
     width: calc(100% - 900px);
     height: calc(100% - 200px);
   }

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

@@ -1,106 +0,0 @@
-<template>
-  <div class="company-home">
-    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-    <template v-if="!route.query.deviceType">
-      <div v-if="!route.query.embed" class="top-bg">
-        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle" />
-      </div>
-
-      <div class="main-container">
-        <component :is="currentComponent" />
-      </div>
-    </template>
-  </div>
-</template>
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useInitPage } from '../hooks/useInit';
-import fireGreen from './fire-green.vue';
-import dustGreen from './dust-green.vue';
-import fusionWarnGreen from './fusion-warn-green.vue'
-import commonGreen from './common-green.vue';
-import greenNav from './components/green-nav.vue';
-import { useRoute } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-
-//当前激活menu索引
-let activeIndex = ref(0);
-//当前加载menu组件
-let currentComponent = ref<any>(commonGreen);
-const { title = '智能通风管控系统' } = useGlobSetting();
-const route = useRoute();
-
-const { mainTitle } = useInitPage(title);
-
-//menu切换，界面跳转
-function menuToggle(item, index) {
-  activeIndex.value = index;
-  switch (item.name) {
-    case '灾害预警':
-      currentComponent.value = commonGreen;
-      break;
-    case '火灾监控':
-      currentComponent.value = fireGreen;
-      break;
-    case '粉尘监控':
-      currentComponent.value = dustGreen;
-      break;
-    case '多灾融合预警':
-      currentComponent.value = fusionWarnGreen;
-      break;
-  }
-}
-
-onMounted(() => { });
-
-onUnmounted(() => { });
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
-
-  width: 100%;
-  // height: calc(100% - 52px);
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
-
-  .top-bg {
-    width: 100%;
-    height: 96px;
-    // background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
-</style>