浏览代码

[Fix 0000]保德煤矿需求修改

bobo04052021@163.com 4 天之前
父节点
当前提交
0c9f33b2c2

+ 0 - 0
src/assets/images/fireNew/CH.png → src/assets/images/fireNew/CH₄.png


+ 0 - 0
src/assets/images/fireNew/CO-1.png → src/assets/images/fireNew/CO₂.png


+ 0 - 0
src/assets/images/fireNew/C H-1.png → src/assets/images/fireNew/C₂H₂.png


+ 0 - 0
src/assets/images/fireNew/C H.png → src/assets/images/fireNew/C₂H₄.png


+ 0 - 0
src/assets/images/fireNew/H.png → src/assets/images/fireNew/H₂.png


+ 0 - 0
src/assets/images/fireNew/N.png → src/assets/images/fireNew/N₂.png


+ 0 - 0
src/assets/images/fireNew/O.png → src/assets/images/fireNew/O₂.png


+ 1 - 1
src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -1146,7 +1146,7 @@ async function getTableListById(params: any) {
 }
 }
 //获取所有文件列表
 //获取所有文件列表
 async function getAllFile() {
 async function getAllFile() {
-  let res = await getAllFileList({ type: 'bundle' });
+  let res = await getAllFileList({ type: 'bundle', pageNo: 1, pageSize: 1000 });
   selectList.value = res.records.map((item: any) => ({
   selectList.value = res.records.map((item: any) => ({
     id: item.id,
     id: item.id,
     fileName: item.fileName,
     fileName: item.fileName,

+ 1 - 1
src/views/vent/home/configurable/components/ModuleFireNewDual.vue

@@ -47,7 +47,7 @@
 </template>
 </template>
 
 
 <script setup lang="ts">
 <script setup lang="ts">
-import Content from './content.vue';
+import Content from './content-FireNew.vue';
 import { defineProps, defineEmits, computed, ref, watch } from 'vue';
 import { defineProps, defineEmits, computed, ref, watch } from 'vue';
 import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
 import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
 import { useInitModule } from '../hooks/useInit';
 import { useInitModule } from '../hooks/useInit';

+ 0 - 89
src/views/vent/home/configurable/components/ModuleFireNewTop.vue

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

+ 1 - 0
src/views/vent/home/configurable/components/content-FireNew.vue

@@ -123,6 +123,7 @@ import MiniBoard from './detail/MiniBoard-FireNew.vue';
 import TimelineList from './detail/TimelineList.vue';
 import TimelineList from './detail/TimelineList.vue';
 import TimelineListNew from './detail/TimelineListNew.vue';
 import TimelineListNew from './detail/TimelineListNew.vue';
 import CustomList from './detail/CustomList-fire.vue';
 import CustomList from './detail/CustomList-fire.vue';
+import ModuleTopFire from './originalNew/moduleTopFire.vue';
 import CustomGallery from './detail/CustomGallery.vue';
 import CustomGallery from './detail/CustomGallery.vue';
 import ComplexList from './detail/ComplexList-FireNew.vue';
 import ComplexList from './detail/ComplexList-FireNew.vue';
 import GalleryList from './detail/GalleryList.vue';
 import GalleryList from './detail/GalleryList.vue';

+ 77 - 35
src/views/vent/home/configurable/components/detail/CustomList-fire.vue

@@ -8,10 +8,12 @@
     <div class="flex-grow" :class="`list__wrapper_${type}`">
     <div class="flex-grow" :class="`list__wrapper_${type}`">
       <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
       <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="flex items-center" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <!-- 列表项前面的图标 -->
-        <div :class="`list-item__icon_${type}`"></div>
+        <div v-if="type === 'I'" :class="`list-item__icon list-item__icon_${type}`" :style="{ backgroundImage: `url(${getIconPath(item)})` }"> </div>
+        <div v-else-if="type === 'H'" :class="`list-item__icon list-item__icon_${type}`" :style="{ backgroundImage: `url(${getIconPath1(item)})` }">
+        </div>
         <!-- 列表项的具体内容填充剩余宽度 -->
         <!-- 列表项的具体内容填充剩余宽度 -->
         <div class="flex-grow" :class="`list-item__content_${type}`">
         <div class="flex-grow" :class="`list-item__content_${type}`">
-          <div class="list-item__label">{{ item.label }}</div>
+          <div class="list-item__label" v-if="type !== 'I'">{{ item.label }}</div>
           <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
           <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
           <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
           <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
         </div>
         </div>
@@ -36,7 +38,29 @@ withDefaults(
     type: 'A',
     type: 'A',
   }
   }
 );
 );
-
+// function getIconPath(item) {
+//   // 根据item.iconType返回对应图标路径
+//   return require(`@/assets/images/fireNew/${item.label}.svg`);
+// }
+function getIconPath(item) {
+  return new URL(`/src/assets/images/fireNew/${item.label}.png`, import.meta.url).href;
+}
+function getIconPath1(item) {
+  switch (item.label) {
+    case '光纤预警':
+      return new URL('/src/assets/images/fireNew/9-3.png', import.meta.url).href;
+    case '温度预警':
+      return new URL('/src/assets/images/fireNew/9-3.png', import.meta.url).href;
+    case '一氧化碳预警':
+      return new URL('/src/assets/images/fireNew/9-4.png', import.meta.url).href;
+    case '烟雾预警':
+      return new URL('/src/assets/images/fireNew/9-5.png', import.meta.url).href;
+    case '火焰预警':
+      return new URL('/src/assets/images/fireNew/9-6.png', import.meta.url).href;
+    default:
+      return new URL('', import.meta.url).href;
+  }
+}
 //   defineEmits(['click']);
 //   defineEmits(['click']);
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>
@@ -57,7 +81,8 @@ withDefaults(
     --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
     --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
     --image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
     --image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
     --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
     --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
-    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
+    --image-list_bg_i: url('/@/assets/images/fireNew/10-1.png');
+    --image-list_bg_i1: url('/@/assets/images/fireNew/10-2.png');
   }
   }
 }
 }
 
 
@@ -73,7 +98,8 @@ withDefaults(
   --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
   --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
   --image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
   --image-list_bg_h: url('/@/assets/images/fireNew/9-1.png');
   --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
   --image-list_bg_h1: url('/@/assets/images/fireNew/9-2.png');
-  --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+  --image-list_bg_i: url('/@/assets/images/fireNew/10-1.png');
+  --image-list_bg_i1: url('/@/assets/images/fireNew/10-2.png');
   --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
   --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
   --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
   --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
   padding: 5px 20px;
   padding: 5px 20px;
@@ -263,8 +289,14 @@ withDefaults(
   color: aliceblue;
   color: aliceblue;
 }
 }
 .list_H {
 .list_H {
-  margin-bottom: 20px;
   background: none;
   background: none;
+  padding-bottom: 60px;
+}
+.list-item__icon_H {
+  width: 15px;
+  height: 15px;
+  margin-left: 12px;
+  background-size: 100% 100%;
 }
 }
 .list-item_H {
 .list-item_H {
   align-items: center;
   align-items: center;
@@ -273,12 +305,12 @@ withDefaults(
   &:nth-child(2n) {
   &:nth-child(2n) {
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-size: 100% 100%;
-    background-image: var(--image-list_bg_h1);
+    background-image: var(--image-list_bg_h);
   }
   }
   &:nth-child(2n + 1) {
   &:nth-child(2n + 1) {
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-size: 100% 100%;
-    background-image: var(--image-list_bg_h);
+    background-image: var(--image-list_bg_h1);
   }
   }
 }
 }
 .list-item__content_H {
 .list-item__content_H {
@@ -293,7 +325,6 @@ withDefaults(
 }
 }
 .list-item__content_H > .list-item__label {
 .list-item__content_H > .list-item__label {
   flex-basis: 33%;
   flex-basis: 33%;
-  margin-left: 20px;
 }
 }
 .list-item__content_H > .list-item__info {
 .list-item__content_H > .list-item__info {
   flex-basis: 22%;
   flex-basis: 22%;
@@ -357,43 +388,54 @@ withDefaults(
 .list__wrapper_I {
 .list__wrapper_I {
   display: flex;
   display: flex;
   flex-wrap: wrap;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: space-between;
+}
+.list-item__icon_I {
+  background-repeat: no-repeat;
+  width: 50px;
+  height: 20px;
+  margin-left: 6px;
 }
 }
 .list-item_I {
 .list-item_I {
-  width: 160px;
-  height: 63px;
+  width: 230px;
+  height: 35px;
   align-items: center;
   align-items: center;
   text-align: center;
   text-align: center;
-  background-image: var(--image-list_bg_i);
-  background-repeat: no-repeat;
-  background-size: auto 100%;
-  margin: 5px 10px;
+  margin: 15px 20px;
+  /* 背景组合A(1,4,5,8) */
+  &:nth-child(1),
+  &:nth-child(4),
+  &:nth-child(5),
+  &:nth-child(8) {
+    background-image: var(--image-list_bg_i1);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  /* 背景组合B(2,3,6,7) */
+  &:nth-child(2),
+  &:nth-child(3),
+  &:nth-child(6),
+  &:nth-child(7) {
+    background-image: var(--image-list_bg_i);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
 }
 }
 .list-item__content_I {
 .list-item__content_I {
-  position: relative;
   width: 100%;
   width: 100%;
-  height: 100%;
-}
-.list-item__content_I > .list-item__label {
-  width: 60px;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  font-size: 20px;
-  line-height: 63px;
-  color: #009bff;
+  display: flex;
 }
 }
 .list-item__content_I > .list-item__info {
 .list-item__content_I > .list-item__info {
-  height: 50%;
-  left: 70px;
-  position: absolute;
+  font-size: 15px;
+  font-weight: bold;
+  color: #ddd;
+  flex-basis: 60%;
 }
 }
 .list-item__content_I > .list-item__value {
 .list-item__content_I > .list-item__value {
-  top: 50%;
-  height: 50%;
-  left: 70px;
-  position: absolute;
-  font-size: 18px;
+  font-size: 15px;
+  font-weight: bold;
+  flex-basis: 30%;
 }
 }
 .list_J {
 .list_J {
   background: unset;
   background: unset;

+ 311 - 0
src/views/vent/home/configurable/components/originalNew/NewNavFire.vue

@@ -0,0 +1,311 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="New-nav">
+    <div class="main-title">{{ Title }}</div>
+    <!-- menu区域 -->
+    <div class="nav-menu">
+      <div class="nav-menu-left">
+        <div v-for="(item, index) in leftMenus" :key="index">
+          <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })">
+            <div style="color: #ddd">{{ item.name }}</div>
+
+            <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <div
+                    :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+                    v-for="(ite, ind) in item.MenuItemList"
+                    :key="ind"
+                    @click.stop="menuItemClick(ind)"
+                    >{{ ite.name }}</div
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="nav-menu-right">
+        <div v-for="(item, index) in rightMenus" :key="index + 4">
+          <div
+            :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'"
+            :key="index + 4"
+            @click="menuClick({ item, index: index + 4 })"
+          >
+            <div style="color: #ddd">{{ item.name }}</div>
+            <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
+              <div class="nav-menu-content">
+                <div class="nav-menu-List">
+                  <div
+                    :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
+                    v-for="(ite, ind) in item.MenuItemList"
+                    :key="ind"
+                    @click.stop="menuItemClick(ind)"
+                    >{{ ite.name }}</div
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+let props = defineProps({
+  Title: {
+    type: String,
+    default: '',
+  },
+});
+
+let menuList = ref<any[]>([
+  {
+    name: '智能通风',
+    targatUrl: '/configurable/ventNew/home',
+  },
+  {
+    name: '火灾监控',
+    targatUrl: '/configurable/fireNew/home',
+  },
+  {
+    name: '粉尘监控',
+    targatUrl: '/configurable/dustNew/home',
+  },
+  {
+    name: '瓦斯监控',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+  {
+    name: '灾害预警',
+    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
+  },
+]); //一级菜单列表
+let activeIndex = ref(0); //当前激活menu索引
+const router = useRouter();
+const route = useRoute();
+let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+let menuItemActive = ref(0); //menuItem当前激活选项
+const leftMenus = computed(() => menuList.value.slice(0, 4));
+const rightMenus = computed(() => menuList.value.slice(4));
+function menuClick(data) {
+  activeIndex.value = data.index;
+  isShowMenuItem.value = !isShowMenuItem.value;
+  router.push({ path: data.item.targatUrl });
+}
+function menuItemClick(index) {
+  menuItemActive.value = index;
+  isShowMenuItem.value = false;
+}
+function updateActiveState(path: string) {
+  menuList.value.forEach((menu, index) => {
+    // 处理有直接链接的菜单项
+    if (menu.targatUrl === path) {
+      activeIndex.value = index;
+      isShowMenuItem.value = false;
+      return;
+    }
+    // 处理有子菜单的菜单项
+    if (menu.MenuItemList) {
+      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+      if (itemIndex !== -1) {
+        activeIndex.value = index;
+        menuItemActive.value = itemIndex;
+        isShowMenuItem.value = true;
+      }
+    }
+  });
+}
+watch(
+  () => route.path,
+  (newPath) => {
+    updateActiveState(newPath);
+  }
+);
+onMounted(() => {
+  updateActiveState(route.path);
+});
+</script>
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+
+.New-nav {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .main-title {
+    width: 518px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    font-family: 'douyuFont';
+    font-size: 25px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: auto;
+    padding: 0;
+  }
+
+  .nav-menu {
+    position: absolute;
+    top: 0;
+    left: 675px;
+    height: 100%;
+    display: flex;
+    position: static; // 移除绝对定位
+    display: flex;
+    width: auto;
+    .nav-menu-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      float: left;
+      .nav-menu-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>

+ 123 - 0
src/views/vent/home/configurable/components/originalNew/moduleTopFire.vue

@@ -0,0 +1,123 @@
+
+<template>
+  <div v-if="visible" class="module-content">
+    <div class="left-solt"></div>
+    <div class="center-solt">
+      <div class="data-item">
+        <img class="data-icon" src="@/assets/images/vent/homeNew/zonghui.png" />
+        <div class="data-content">
+          <div class="title">总回风量(m³/min)</div>
+          <div class="air-num air-num1">25870</div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="data-item">
+        <img class="data-icon" src="@/assets/images/vent/homeNew/zongjin.png" />
+        <div class="data-content">
+          <div class="title">总进风量(m³/min)</div>
+          <div class="air-num air-num2">24989</div>
+        </div>
+      </div>
+      <div class="divider"></div>
+      <div class="data-item">
+        <img class="data-icon" src="@/assets/images/vent/homeNew/jihua.png" />
+        <div class="data-content">
+          <div class="title">计划风量(m³/min)</div>
+          <div class="air-num air-num3">348</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-solt"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+.module-content {
+  background: url('@/assets/images/vent/homeNew/content.png') no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.left-solt {
+  left: 8%;
+  top: 13%;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  position: absolute;
+  background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-solt {
+  right: 8%;
+  top: 13%;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  position: absolute;
+  background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+.center-solt {
+  display: flex;
+  position: absolute;
+  left: 15%;
+  bottom: 50%;
+  width: 70%;
+  height: 60%;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.data-item {
+  left: 10%;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  .data-icon {
+    width: 60px;
+    height: 100%;
+  }
+  .data-content {
+    display: flex;
+    flex-direction: column;
+    .title {
+      font-size: 16px;
+      font-weight: bold;
+      color: #999999;
+    }
+    .air-num {
+      font-size: 25px;
+    }
+  }
+}
+.air-num1 {
+  color: #4ca8d5;
+}
+.air-num2 {
+  color: #b9f3fc;
+}
+.air-num3 {
+  color: #4ad1cc;
+}
+.divider {
+  width: 1px;
+  height: 40px;
+  background: url('@/assets/images/vent/homeNew/Top-divider.png') no-repeat;
+}
+</style>

+ 17 - 15
src/views/vent/home/configurable/configurable.data.New.ts

@@ -654,7 +654,7 @@ export const testConfigNewFire: Config[] = [
         link: '',
         link: '',
       },
       },
       layout: {
       layout: {
-        direction: 'row',
+        direction: 'column',
         items: [
         items: [
           {
           {
             name: 'chart',
             name: 'chart',
@@ -726,6 +726,7 @@ export const testConfigNewFire: Config[] = [
           {
           {
             name: 'list',
             name: 'list',
             basis: '60%',
             basis: '60%',
+            pageType: 'New_fire',
           },
           },
         ],
         ],
       },
       },
@@ -743,51 +744,52 @@ export const testConfigNewFire: Config[] = [
               label: 'CO',
               label: 'CO',
               value: '${coVal}',
               value: '${coVal}',
               color: 'blue',
               color: 'blue',
-              info: '一氧化碳',
+              info: '一氧化碳(ppm)',
             },
             },
             {
             {
               label: 'CO₂',
               label: 'CO₂',
               value: '${co2Val}',
               value: '${co2Val}',
               color: 'blue',
               color: 'blue',
-              info: '二氧化碳',
+              info: '二氧化碳(%)',
             },
             },
             {
             {
               label: 'CH₄',
               label: 'CH₄',
               value: '${ch4Val}',
               value: '${ch4Val}',
               color: 'blue',
               color: 'blue',
-              info: '甲烷',
+              info: '甲烷(%)',
             },
             },
             {
             {
               label: 'C₂H₂',
               label: 'C₂H₂',
               value: '${c2h2Val}',
               value: '${c2h2Val}',
               color: 'blue',
               color: 'blue',
-              info: '乙炔',
+              info: '乙炔(ppm)',
             },
             },
             {
             {
               // label: 'C₂H₄',
               // label: 'C₂H₄',
               label: 'O₂',
               label: 'O₂',
               value: '${o2Val}',
               value: '${o2Val}',
               color: 'blue',
               color: 'blue',
-              info: '氧气',
+              info: '氧气(%)',
             },
             },
             {
             {
               // label: 'O₂',
               // label: 'O₂',
               label: 'C₂H₄',
               label: 'C₂H₄',
               value: '${c2h4Val}',
               value: '${c2h4Val}',
               color: 'blue',
               color: 'blue',
-              info: '乙烯',
+              info: '乙烯(ppm)',
             },
             },
             {
             {
-              label: '温度',
-              value: '--',
+              // label: 'O₂',
+              label: 'N₂',
+              value: '${N2Val}',
               color: 'blue',
               color: 'blue',
-              info: '',
+              info: '二氧化氮(%)',
             },
             },
             {
             {
-              label: '风险',
-              value: '${warnLevel}',
+              label: 'H₂',
+              value: '${H2Val}',
               color: 'blue',
               color: 'blue',
-              info: '',
+              info: '氢气(%)',
             },
             },
           ],
           ],
         },
         },
@@ -940,11 +942,11 @@ export const testConfigNewFire: Config[] = [
         link: '',
         link: '',
       },
       },
       layout: {
       layout: {
-        direction: 'row',
+        direction: 'column',
         items: [
         items: [
           {
           {
             name: 'list',
             name: 'list',
-            basis: '100%',
+            basis: '90%',
           },
           },
         ],
         ],
       },
       },

+ 2 - 13
src/views/vent/home/configurable/fireNew.vue

@@ -9,7 +9,7 @@
         style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
         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')"
         @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
       >
       >
-        <EyeFilled />
+        <!-- <EyeFilled /> -->
       </a-button>
       </a-button>
     </div>
     </div>
     <div class="top-bg">
     <div class="top-bg">
@@ -27,16 +27,6 @@
       :data="data"
       :data="data"
       :visible="true"
       :visible="true"
     />
     />
-    <!-- <ModuleFireNewTop
-      v-for="cfg in cfgTop"
-      :key="cfg.deviceType"
-      :show-style="cfg.showStyle"
-      :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName"
-      :device-type="cfg.deviceType"
-      :data="data"
-      :visible="true"
-    /> -->
     <ModuleFireNewDual
     <ModuleFireNewDual
       v-if="cfgA && cfgB"
       v-if="cfgA && cfgB"
       :show-style="cfgA.showStyle"
       :show-style="cfgA.showStyle"
@@ -54,9 +44,8 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted } from 'vue';
 import { computed, onMounted, onUnmounted } from 'vue';
 // import { CaretDownOutlined } from '@ant-design/icons-vue';
 // import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/originalNew/NewNav.vue';
+import NewNav from './components/originalNew/NewNavFire.vue';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
 import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleFireNewTop from './components/ModuleFireNewTop.vue';
 import ModuleFireNew from './components/ModuleFireNew.vue';
 import ModuleFireNew from './components/ModuleFireNew.vue';
 import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
 import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';
 import VentModal from '/@/components/vent/micro/ventModal.vue';

文件差异内容过多而无法显示
+ 567 - 659
src/views/vent/monitorManager/mainFanMonitor/index.vue


部分文件因为文件数量过多而无法显示