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

public/js/config.js

@@ -19,4 +19,5 @@ const VENT_PARAM = {
   safetyCrlPlatformUrl: '', // 神东要求安全监控跳转至安全监控管控平台,这里填写上生产管控地址后（例如填写："https://www.baidu.com/"），就可以跳转了
   gasControlMock : true, // 项目关于瓦斯自主调控，是否模拟演示， true: 真实调控； false 模拟调控
   historyIsMultiple: false, // 设备历史数据是否支持多选
+  isShowQy: true, // 是否显示气压
 }

src/layouts/default/header/index.vue

@@ -9,8 +9,9 @@
       ...getHeaderClass,
       {
         'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'),
-        'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-'),
+        'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-') && !currentRoute.path.startsWith('/shuizai'),
         'no-header': currentRoute.path.endsWith('home'),
+        'zaihai-header': currentRoute.path.startsWith('/shuizai'),
       },
     ]"
     style="z-index: 1"
@@ -57,7 +58,7 @@
   <div :class="`${prefixCls}-action`" style="position: fixed; top: 30px; right: 20px; z-index: 999999">
     <div class="right-position">
       <!-- 公司端不显示语音播报功能 weatherBroadcast.vue-->
-      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && hasPermission('btn:weatherBroadcast')" />
+      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy" />
       <VoiceBroadcast v-if="sysOrgCode != 'sdmtjtgsd'" />
       <VoiceBroadcastGsd v-if="sysOrgCode == 'sdmtjtgsd'" />
       <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
@@ -135,7 +136,7 @@
       const { currentRoute } = useRouter();
       console.log(currentRoute);
       const { hasPermission } = usePermission();
-
+      const isShowQy = VENT_PARAM['isShowQy'];
       const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
       const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
       const { title, sysOrgCode, homePath } = useGlobSetting();
@@ -265,6 +266,7 @@
         sysOrgCode,
         homePath,
         hasPermission,
+        isShowQy,
       };
     },
   });
@@ -327,6 +329,10 @@
     height: 0px !important;
     display: none !important;
   }
+  .zaihai-header {
+    position: absolute;
+    background: transparent !important;
+  }
 
   .header-nav-title {
     background-image: linear-gradient(#ffffff 50%, #60f4ff);

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

@@ -143,16 +143,16 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I';
+  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'New' | 'New1' | 'New2' | 'New3';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
-  layout: 'val-top' | 'label-top';
+  layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */
   items: CommonItem[];
 }
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'timelineNew';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */

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

@@ -21,6 +21,7 @@ import Header from './header.vue';
 import Content from './content.vue';
 import ModuleLeft from './originalNew/moduleLeft.vue';
 import ModuleBottom from './originalNew/moduleBottom.vue';
+import ModuleTop from './originalNew/moduleTop.vue';
 import { computed, ref } from 'vue';
 import { openWindow } from '/@/utils';
 import { getFormattedText } from '../hooks/helper';
@@ -52,7 +53,10 @@ const style = computed(() => {
 // 根据配置里的定位判断应该使用哪个module组件
 function getModuleComponent({ size, position }) {
   const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
+  if (position.includes('top') && parseInt(width) > 800) {
+    return ModuleTop;
+  }
+  if (position.includes('bottom')) {
     return ModuleBottom;
   }
   if (position.includes('left')) {
@@ -71,8 +75,4 @@ function redirectTo() {
 }
 </script>
 <style scoped>
-.component-module {
-  background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat;
-  background-size: 100% 100%;
-}
 </style>>

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

@@ -16,56 +16,56 @@
   </component>
 </template>
 <script lang="ts" setup>
-  import Header from './header.vue';
-  import Content from './content.vue';
-  import ModuleLeft from './original/moduleLeft.vue';
-  import ModuleBottom from './original/moduleBottom.vue';
-  import { computed, ref } from 'vue';
-  import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../hooks/helper';
-  // import { ModuleProps } from '../types';
+import Header from './header.vue';
+import Content from './content.vue';
+import ModuleLeft from './original/moduleLeft.vue';
+import ModuleBottom from './original/moduleBottom.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 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 { header } = props.moduleData;
+const selectedData = ref();
 
-  const style = computed(() => {
-    const size = props.showStyle.size;
-    const position = props.showStyle.position;
-    return size + position;
-  });
+const style = computed(() => {
+  const size = props.showStyle.size;
+  const position = props.showStyle.position;
+  return size + position;
+});
 
-  // 根据配置里的定位判断应该使用哪个module组件
-  function getModuleComponent({ size, position }) {
-    const [_, width] = size.match(/width:([0-9]+)px/) || [];
-    if (position.includes('bottom') || parseInt(width) > 800) {
-      return ModuleBottom;
-    }
-    if (position.includes('left')) {
-      return ModuleLeft;
-    }
-    if (position.includes('right')) {
-      return ModuleLeft;
-    }
+// 根据配置里的定位判断应该使用哪个module组件
+function getModuleComponent({ size, position }) {
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  if (position.includes('bottom') || parseInt(width) > 800) {
     return ModuleBottom;
   }
-
-  function redirectTo() {
-    const { to } = props.moduleData;
-    if (!to) return;
-    openWindow(getFormattedText(selectedData.value, to));
+  if (position.includes('left')) {
+    return ModuleLeft;
+  }
+  if (position.includes('right')) {
+    return ModuleLeft;
   }
+  return ModuleBottom;
+}
+
+function redirectTo() {
+  const { to } = props.moduleData;
+  if (!to) return;
+  openWindow(getFormattedText(selectedData.value, to));
+}
 </script>

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

@@ -3,7 +3,7 @@
   <!-- 主体内容部分 -->
   <div class="content">
     <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
+    <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"
@@ -21,7 +21,21 @@
       <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 class="content__module flex flex-justify-around flex-items-center flex-wrap">
+          <div v-if="config.basis !== '100%'" 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>
+          <div
+            v-else-if="config.basis == '100%'"
+            style="padding-top: 43%"
+            class="content__module flex flex-justify-around flex-items-center flex-wrap"
+          >
             <MiniBoard
               v-for="item in config.items"
               :key="item.prop"
@@ -99,331 +113,336 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import {
-    CommonItem,
-    Config,
-    // ModuleDataBoard,
-    // ModuleDataChart,
-    // ModuleDataList,
-    // ModuleDataPreset,
-    // ModuleDataTable,
-  } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
-  import { clone } from 'lodash-es';
-  import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  // import FIreWarn from './preset/FIreWarn.vue';
-  // import FIreControl from './preset/FIreControl.vue';
+import { computed } from 'vue';
+import {
+  CommonItem,
+  Config,
+  // ModuleDataBoard,
+  // ModuleDataChart,
+  // ModuleDataList,
+  // ModuleDataPreset,
+  // ModuleDataTable,
+} from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+// import FIreWarn from './preset/FIreWarn.vue';
+// import FIreControl from './preset/FIreControl.vue';
 
-  const props = defineProps<{
-    data: any;
-    moduleData: Config['moduleData'];
-  }>();
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+}>();
 
-  const { background, layout } = props.moduleData;
+const { background, layout } = props.moduleData;
 
-  // 获取当原始配置带 items 项时的最终 items 配置
-  function getItems(raw, items: CommonItem[]) {
-    return items.map((i) => {
+// 获取当原始配置带 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 {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...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);
 
-  // 获取当 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 {
+        arr.push({
+          overflow: true,
           ...item,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-  /** 根据配置里的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) || [];
+        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);
 
-    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 '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: getItems(data, cfg.items),
+            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),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            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': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        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: getItems(data, cfg.items),
+            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),
+                  };
+                }),
+              };
+            }),
           });
-          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);
-
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
+            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 '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);
+        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({
+          ...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({
+          ...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;
-        }
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
       }
-      return arr;
-    }, []);
-  });
+    }
+    return arr;
+  }, []);
+});
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
+@import '@/design/theme.less';
 
-  .content {
-    height: calc(100% - 30px);
-    position: relative;
-    // z-index: -2;
-    display: flex;
-    flex-direction: column;
-  }
-  .content__background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
-  .content__module {
-    // margin-top: 5px;
-    // margin-bottom: 5px;
-    width: 100%;
-    height: 100%;
-  }
-  // .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;
-  }
+.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: 40%;
+  height: 70%;
+  left: 30%;
+}
+.content__module {
+  // margin-top: 5px;
+  // margin-bottom: 5px;
+  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;
-  }
+: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;
-  }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 </style>

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

@@ -25,253 +25,393 @@
         </div>
       </slot>
     </template>
+    <template v-if="layout === 'new-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new1-top'">
+      <slot name="label">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="value">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new2-top'">
+      <slot name="value">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot>
+      <slot name="label">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot>
+    </template>
+    <template v-if="layout === 'new3-top'">
+      <div v-if="label === '进风(m³/min)'" class="mini-board_New3_jin">
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </div>
+      <div v-if="label === '回风(m³/min)'" class="mini-board_New3_hui">
+        <div class="mini-board__label" style="color: #afe6f2" :class="`mini-board__label_${type}`">{{ label }}</div>
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </div>
+      <!-- <slot name="value">
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">{{ label }}</div>
+      </slot> -->
+      <!-- <slot name="lable">
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">{{ value }}</div>
+      </slot> -->
+    </template>
   </div>
 </template>
 <script lang="ts" setup>
-  withDefaults(
-    defineProps<{
-      label: string;
-      value?: string;
-      // 告示牌布局，类型为：'val-top' | 'label-top'
-      layout: string;
-      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F'
-      type?: string;
-    }>(),
-    {
-      value: '/',
-      type: 'A',
-      layout: 'val-top',
-    }
-  );
+withDefaults(
+  defineProps<{
+    label: string;
+    value?: string;
+    // 告示牌布局，类型为：'val-top' | 'label-top'
+    layout: string;
+    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+    type?: string;
+  }>(),
+  {
+    value: '/',
+    type: 'A',
+    layout: 'val-top',
+  }
+);
 
-  // 获取某些 value 对应的特殊的 装饰用的类名
-  function getValueDecoClass(value) {
-    switch (value) {
-      case '低风险':
-        return 'low_risk';
-      case '一般风险':
-        return 'risk';
-      case '较大风险':
-        return 'high_risk';
-      case '报警':
-        return 'warning';
-      default:
-        return '';
-    }
+// 获取某些 value 对应的特殊的 装饰用的类名
+function getValueDecoClass(value) {
+  switch (value) {
+    case '低风险':
+      return 'low_risk';
+    case '一般风险':
+      return 'risk';
+    case '较大风险':
+      return 'high_risk';
+    case '报警':
+      return 'warning';
+    default:
+      return '';
   }
+}
 
-  defineEmits(['click']);
+defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .mini-board {
-      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-    }
+@{theme-deepblue} {
+  .mini-board {
+    --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+    --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+    --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+    --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+    --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
   }
+}
 
-  .mini-board {
-    --image-area3: url('/@/assets/images/company/area3.png');
-    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
-    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
-    --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+.mini-board {
+  --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+  --image-area3: url('/@/assets/images/company/area3.png');
+  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+  --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
 
-    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-    height: 50px;
-    line-height: 25px;
-    width: 130px;
-    padding: 0 5px 0 5px;
-    text-align: center;
-    background-size: 100% 100%;
-    position: relative;
-  }
+  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+  height: 50px;
+  line-height: 25px;
+  width: 130px;
+  padding: 0 5px 0 5px;
+  text-align: center;
+  background-size: 100% 100%;
+  position: relative;
+}
 
-  .mini-board_A {
-    width: 120px;
-    height: 60px;
-    background-image: var(--image-area3);
-    background-size: 100% 100%;
-  }
-  .mini-board_B {
-    width: 131px;
-    height: 64px;
-    background-image: var(--image-value-bg);
-    background-size: auto 40px;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_C {
-    width: 121px;
-    height: 69px;
-    background-image: var(--image-vent-param-bg);
-  }
-  .mini-board_D {
-    // width: 105px;
-    height: 58px;
-    background-image: var(--image-mini-board-1);
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_E {
-    width: 30%;
-    height: 180px;
-    padding: 20px 5px;
-    background-image: var(--image-board_bg_1);
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .mini-board_F {
-    width: 140px;
-    height: 70px;
-    background-image: var(--image-miehuo);
-    background-size: 100% 80%;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_G {
-    width: 98px;
-    height: 70px;
-    background-image: var(--image-value-bg-2);
-    background-size: 100% auto;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board_H {
-    width: 174px;
-    height: 104px;
-    background-image: var(--image-board_bg_3);
-    background-size: 100% auto;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    padding: 45px 0 0 0;
-  }
-  .mini-board_I {
-    width: 139px;
-    height: 67px;
-    background-image: var(--image-board_bg_6);
-    background-size: 100% 100%;
-  }
+.mini-board_New {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-areaNew);
+  background-size: 100% 100%;
+}
+.mini-board_New1 {
+  width: 119px;
+  height: 60px;
+  background-image: var(--image-areaNew1);
+  background-size: 100% 100%;
+}
+.mini-board_New2 {
+  width: 100px;
+  height: 60px;
+  background-image: var(--image-areaNew2);
+  background-size: 100% 100%;
+}
+.mini-board_New3 {
+  margin-bottom: 0;
+  width: 170px;
+  height: 50px;
+}
+.mini-board_New3_jin {
+  background-image: var(--image-areaNew3);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.mini-board_New3_hui {
+  background-image: var(--image-areaNew4);
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.mini-board_A {
+  width: 120px;
+  height: 60px;
+  background-image: var(--image-area3);
+  background-size: 100% 100%;
+}
+.mini-board_B {
+  width: 131px;
+  height: 64px;
+  background-image: var(--image-value-bg);
+  background-size: auto 40px;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board_C {
+  width: 121px;
+  height: 69px;
+  background-image: var(--image-vent-param-bg);
+}
+.mini-board_D {
+  // width: 105px;
+  height: 58px;
+  background-image: var(--image-mini-board-1);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board_E {
+  width: 30%;
+  height: 180px;
+  padding: 20px 5px;
+  background-image: var(--image-board_bg_1);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.mini-board_F {
+  width: 140px;
+  height: 70px;
+  background-image: var(--image-miehuo);
+  background-size: 100% 80%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board_G {
+  width: 98px;
+  height: 70px;
+  background-image: var(--image-value-bg-2);
+  background-size: 100% auto;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board_H {
+  width: 174px;
+  height: 104px;
+  background-image: var(--image-board_bg_3);
+  background-size: 100% auto;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  padding: 45px 0 0 0;
+}
+.mini-board_I {
+  width: 139px;
+  height: 67px;
+  background-image: var(--image-board_bg_6);
+  background-size: 100% 100%;
+}
 
-  .mini-board__value_A {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 30px;
-    line-height: 30px;
-  }
+.mini-board__value_New {
+  color: @vent-gas-primary-text;
+  font-size: 15px;
+  float: left;
+  margin: 0 0 0 13px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+.mini-board__lable_New {
+  line-height: 24px;
+  height: 24px;
+}
+.mini-board__value_New1 {
+  color: @vent-gas-primary-text;
+  font-size: 16px;
+  float: left;
+  margin: 0 0 0 45%;
+  height: 30px;
+  line-height: 30px;
+}
+.mini-board__lable_New1 {
+  line-height: 24px;
+  height: 24px;
+}
+.mini-board__value_New2 {
+  color: @vent-gas-primary-text;
+  font-size: 15px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
+.mini-board__lable_New2 {
+  line-height: 24px;
+  height: 24px;
+}
+.mini-board__value_New3 {
+  color: #afe6f2;
+  font-size: 15px;
+  font-weight: bold;
+  margin-left: 10px;
+}
+.mini-board__lable_New3 {
+  color: #afe6f2;
+  height: 30px;
+  font-size: 10px;
+}
+.mini-board__value_A {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 30px;
+  line-height: 30px;
+}
 
-  .mini-board__value_B {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 40px;
-    line-height: 40px;
-  }
-  .mini-board__label_B {
-    line-height: 24px;
-    height: 24px;
-  }
+.mini-board__value_B {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 40px;
+  line-height: 40px;
+}
+.mini-board__label_B {
+  line-height: 24px;
+  height: 24px;
+}
 
-  .mini-board__value_C {
-    color: @vent-gas-primary-text;
-    height: 40px;
-    line-height: 40px;
-    font-size: 20px;
-    font-weight: bold;
-  }
+.mini-board__value_C {
+  color: @vent-gas-primary-text;
+  height: 40px;
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: bold;
+}
 
-  .mini-board__value_D {
-    font-size: 20px;
-    font-weight: bold;
-    height: 40px;
-    line-height: 40px;
-  }
-  .mini-board__label_D {
-    line-height: 17px;
-    height: 17px;
-  }
-  .mini-board__value_E {
-    font-size: 20px;
-    font-weight: bold;
-  }
-  .mini-board__label_E {
-    line-height: 20px;
-    height: 90px;
-    padding-top: 30%;
-    background-repeat: no-repeat;
-    background-position: center top;
-  }
+.mini-board__value_D {
+  font-size: 20px;
+  font-weight: bold;
+  height: 40px;
+  line-height: 40px;
+}
+.mini-board__label_D {
+  line-height: 17px;
+  height: 17px;
+}
+.mini-board__value_E {
+  font-size: 20px;
+  font-weight: bold;
+}
+.mini-board__label_E {
+  line-height: 20px;
+  height: 90px;
+  padding-top: 30%;
+  background-repeat: no-repeat;
+  background-position: center top;
+}
 
-  .mini-board__value_F {
-    font-size: 20px;
-    font-weight: bold;
-    color: @vent-gas-primary-text;
-  }
-  .mini-board__label_F {
-    line-height: 50px;
-  }
+.mini-board__value_F {
+  font-size: 20px;
+  font-weight: bold;
+  color: @vent-gas-primary-text;
+}
+.mini-board__label_F {
+  line-height: 50px;
+}
 
-  .mini-board__value_G {
-    color: @vent-gas-primary-text;
-    font-size: 20px;
-    font-weight: bold;
-    height: 42px;
-    line-height: 42px;
-  }
-  .mini-board__label_G {
-    line-height: 20px;
-    height: 20px;
-  }
+.mini-board__value_G {
+  color: @vent-gas-primary-text;
+  font-size: 20px;
+  font-weight: bold;
+  height: 42px;
+  line-height: 42px;
+}
+.mini-board__label_G {
+  line-height: 20px;
+  height: 20px;
+}
 
-  .mini-board_E:nth-child(1) {
-    .mini-board__label_E {
-      background-image: var(--image-hycd);
-    }
+.mini-board_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
   }
-  .mini-board_E:nth-child(2) {
-    .mini-board__label_E {
-      background-image: var(--image-dyfl);
-    }
+}
+.mini-board_E:nth-child(2) {
+  .mini-board__label_E {
+    background-image: var(--image-dyfl);
   }
-  .mini-board_E:nth-child(3) {
-    .mini-board__label_E {
-      background-image: var(--image-jdjl);
-    }
+}
+.mini-board_E:nth-child(3) {
+  .mini-board__label_E {
+    background-image: var(--image-jdjl);
   }
+}
 
-  .mini-board_H_low_risk {
-    background-image: var(--image-board_bg_3);
-  }
-  .mini-board_H_risk {
-    background-image: var(--image-board_bg_2);
-  }
-  .mini-board_H_high_risk {
-    background-image: var(--image-board_bg_5);
-  }
-  .mini-board_H_warning {
-    background-image: var(--image-board_bg_4);
-  }
+.mini-board_H_low_risk {
+  background-image: var(--image-board_bg_3);
+}
+.mini-board_H_risk {
+  background-image: var(--image-board_bg_2);
+}
+.mini-board_H_high_risk {
+  background-image: var(--image-board_bg_5);
+}
+.mini-board_H_warning {
+  background-image: var(--image-board_bg_4);
+}
 </style>

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

@@ -1,14 +1,25 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="timeline">
-    <div v-for="item in listConfig" :key="item.prop" class="flex items-center timeline-item">
-      <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div> <div class="timeline-item__dot"></div>
-      <div class="timeline-item__label">{{ item.label }}</div>
-      <div :class="`timeline-item__value_${item.color}`">
-        {{ item.value }}
+  <div class="timelineNew">
+    <div class="left-section">
+      <div class="warnBg"></div>
+      <div class="warnInfo">
+        <div>{{ 0 }}</div>
+        <div>报警数</div>
       </div>
     </div>
-    <div class="timeline-item__dot"></div>
+    <div class="center-section"></div>
+    <div class="right-section">
+      <div v-for="item in listConfig" :key="item.prop" class="flex items-center timeline-item">
+        <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`" style="margin-bottom: 15px"></div>
+        <div class="timeline-item__label" style="margin-bottom: 15px">{{ item.label }}</div>
+        <div :class="`timeline-item__value_${item.color}`" style="margin-bottom: 15px">
+          {{ item.value }}
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="timeline-item__dot"></div> -->
   </div>
 </template>
 <script lang="ts" setup>
@@ -47,64 +58,103 @@ withDefaults(
   --image-warn_icon_1: url('/@/assets/images/vent/homeNew/warn_icon_4.png');
   height: 20%;
 }
-.timeline-item__icon_red {
-  background-image: var(--image-warn_icon_4);
-}
-.timeline-item__icon_orange {
-  background-image: var(--image-warn_icon_3);
-}
-.timeline-item__icon_yellow {
-  background-image: var(--image-warn_icon_2);
-}
-.timeline-item__icon_blue {
-  background-image: var(--image-warn_icon_1);
-}
-.timeline-item__icon {
-  width: 33px;
-  height: 35px;
-  margin-left: 50px;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.timeline-item__dot {
-  width: 10px;
-  height: 10px;
-  margin-left: 70px;
-  border-radius: 5px;
+
+.timelineNew {
+  display: flex;
+  height: 220px;
   position: relative;
+
+  width: 100%;
 }
-.timeline-item__label {
-  width: 100px;
-  margin-left: 70px;
-}
-.timeline-item__value_red {
-  color: red;
-}
-.timeline-item__value_orange {
-  color: orange;
-}
-.timeline-item__value_yellow {
-  color: yellow;
-}
-.timeline-item__value_green {
-  color: yellowgreen;
-}
-.timeline-item__value_blue {
-  color: lightblue;
+
+.left-section {
+  width: 24%;
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+  margin-left: 10px;
+  .warnBg {
+    flex: 1;
+    background: url('/@/assets/images/vent/homeNew/Alarm.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+  .warnInfo {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: url('/@/assets/images/vent/homeNew/databg/10.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    div:first-child {
+      font-size: 16px;
+      font-weight: bold;
+      color: red;
+    }
+    div:last-child {
+      font-size: 14px;
+      color: #fff;
+    }
+  }
 }
 
-.timeline {
-  height: 220px;
-  padding: 5px;
-  position: relative;
+.center-section {
+  width: 22%;
+  margin-top: 30px;
+  background: url('/@/assets/images/vent/homeNew/warn-dot.png') center/contain no-repeat;
 }
-.timeline-component {
-  position: absolute;
-  width: 2px;
-  height: 180px;
-  top: 20px;
-  left: 162px;
-  background-image: url('/@/assets/images/vent/homeNew/warn-dot.png') no-repeat;
-  background-size: 100% 100%;
+
+.right-section {
+  width: 71%;
+  height: 100%;
+  line-height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  .timeline-item {
+    display: flex;
+    background: url('/@/assets/images/vent/homeNew/databg/12.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    align-items: center;
+    padding: 0 10px;
+    &__icon {
+      width: 33px;
+      height: 35px;
+      background-position: center;
+      background-repeat: no-repeat;
+      &_red {
+        background-image: var(--image-warn_icon_4);
+      }
+      &_orange {
+        background-image: var(--image-warn_icon_3);
+      }
+      &_yellow {
+        background-image: var(--image-warn_icon_2);
+      }
+      &_blue {
+        background-image: var(--image-warn_icon_1);
+      }
+    }
+    &__label {
+      width: 100px;
+    }
+    &__value {
+      &_red {
+        color: red;
+      }
+      &_orange {
+        color: orange;
+      }
+      &_yellow {
+        color: yellow;
+      }
+      &_blue {
+        color: lightblue;
+      }
+    }
+  }
 }
 </style>

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

@@ -1,94 +1,134 @@
+
 <template>
   <div v-if="visible" class="module-content">
-    <div v-if="title" class="module-content__title__expand">
-      <span class="action-btn close-btn" @click="closeModel"></span>
-      <span @click="clickHandler">{{ title }}</span>
-    </div>
-    <div class="module-slot">
-      <slot></slot>
+    <div class="left-solt" @click="scrollLeft"></div>
+    <div class="center-solt">
+      <div v-for="(item, index) in visibleTabs" :key="index" class="tab-item" :class="{ active: activeIndex === index }" @click="selectTab(index)">
+        <span class="tab-name">{{ item }}</span>
+      </div>
     </div>
+    <div class="right-solt" @click="scrollRight"></div>
   </div>
 </template>
+
 <script lang="ts" setup>
-  defineProps<{ title: string; visible: boolean }>();
-  const emit = defineEmits(['close', 'click']);
+import { ref, computed } from 'vue';
+
+defineProps<{ title: string; visible: boolean }>();
+const emit = defineEmits(['close', 'click']);
+
+const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
+const activeIndex = ref(0);
+const currentStart = ref(0);
+const visibleCount = 4;
 
-  function closeModel() {
-    emit('close');
+const visibleTabs = computed(() => {
+  return tabList.slice(currentStart.value, currentStart.value + visibleCount);
+});
+
+function closeModel() {
+  emit('close');
+}
+
+function clickHandler() {
+  emit('click');
+}
+
+function selectTab(index: number) {
+  activeIndex.value = index;
+}
+
+function scrollLeft() {
+  if (currentStart.value > 0) {
+    currentStart.value--;
   }
-  function clickHandler() {
-    emit('click');
+}
+
+function scrollRight() {
+  if (currentStart.value + visibleCount < tabList.length) {
+    currentStart.value++;
   }
+}
 </script>
+
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .module-content {
-      --image-model_original_title_bg_expand: url('@/assets/images/themify/deepblue/home-container/configurable/model_original_title_bg_expand.png');
-    }
-  }
+.module-content {
+  color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
 
-  .module-content {
-    --image-model_original_title_bg_expand: url('@/assets/images/home-container/configurable/model_original_title_bg_expand.png');
-    --bg-height: 33px;
-    color: #fff;
-    box-sizing: border-box;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
+.left-solt,
+.right-solt {
+  width: 15%;
+  height: 60%;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
 
-  .module-content__title__expand {
-    width: 100%;
-    height: var(--bg-height);
-    background: var(--image-model_original_title_bg_expand) no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    text-align: center;
-    line-height: var(--bg-height);
-  }
+.left-solt {
+  background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
+  background-size: 100% 100%;
+}
 
-  // .module-content__title {
-  //   width: 50%;
-  //   height: var(--bg-height);
-  //   background: url('../../../../../assets/images/home-container/configurable/model_bottom_title_bg.png') no-repeat;
-  //   background-size: 100% 100%;
-  //   position: relative;
-  //   text-align: left;
-  //   padding-left: 5%;
-  // }
-
-  // 固定在父容器右上角的按钮图标
-  // .action-btn {
-  //   width: 18px;
-  //   height: 18px;
-  //   background: url('../../../../../assets/images/home-container/configurable/expand.svg') no-repeat center;
-  //   position: absolute;
-  //   left: 0;
-  //   top: 0;
-  // }
-  // .show-btn {
-  //   transform: rotate(-90deg);
-  // }
-
-  .module-slot {
-    height: calc(100% - 33px);
-    width: calc(100% - 15px);
-    backdrop-filter: blur(5px);
-    background-color: var(--vent-configurable-original-module-bg);
-    margin-left: 5px;
-  }
+.right-solt {
+  background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
+  background-size: 100% 100%;
+}
 
-  // Transition动画相关
-  .v-enter-active,
-  .v-leave-active {
-    transition: all 0.3s ease;
-  }
+.center-solt {
+  display: flex;
+  width: 70%;
+  height: 60%;
+  justify-content: space-between;
+}
 
-  .v-enter-from,
-  .v-leave-to {
-    opacity: 0;
-    transform: translateY(-33px);
-  }
+.tab-item {
+  flex: 1;
+  text-align: center;
+  line-height: 60px;
+  cursor: pointer;
+  background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
+  background-size: 100% 100%;
+  transition: all 0.3s;
+  margin: 0 5px;
+  color: #999;
+}
+.tab-name {
+  font-size: 14px;
+  display: inline-block;
+  float: right;
+  margin-right: 13px;
+}
+.tab-item.active {
+  background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
+  background-size: 100% 100%;
+  font-weight: bold;
+  color: #fff;
+  transform: translateY(-5px);
+}
+
+.module-slot {
+  height: calc(100% - 33px);
+  width: calc(100% - 15px);
+  margin-left: 10px;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transform: translateY(-33px);
+}
 </style>

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

@@ -76,8 +76,6 @@ function clickHandler() {
   height: calc(100% - 33px);
   width: calc(100% - 20px);
   backdrop-filter: blur(5px);
-  // #182d47
-  background-color: var(--vent-configurable-original-module-bg);
   margin-left: 10px;
 }
 

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

@@ -0,0 +1,125 @@
+
+<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;
+  z-index: 1;
+  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;
+  z-index: 1;
+  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>

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

@@ -1,3 +1,4 @@
+import { truncateSync } from 'fs-extra';
 import { Config } from '../../deviceManager/configurationTable/types';
 // import { BDdustMock, BDfireMock } from './configurable.data.bd';
 
@@ -2090,40 +2091,40 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: false,
-        type: 'image',
-        link: '',
+        show: true,
+        type: 'video',
+        link: '/video/mainFan.mp4',
       },
       layout: {
         direction: 'column',
         items: [
           {
-            name: 'qh_curve',
-            basis: '67%',
-          },
-          {
             name: 'board',
-            basis: '33%',
+            basis: '30%',
           },
         ],
       },
       board: [
         {
-          type: 'D',
-          readFrom: '',
-          layout: 'label-top',
+          type: 'New',
+          readFrom: 'readData',
+          layout: 'new-top',
           items: [
             {
               label: '风量(m³/min)',
-              value: '${flow_merge}',
+              value: '${m3}',
             },
             {
-              label: '负压(Pa)',
-              value: '${fy_merge}',
+              label: '风压(Pa)',
+              value: '${Fan1StartStatus}',
+              trans: {
+                '1': '${Fan1FreqHz}',
+                '0': '${Fan1FreqHz}',
+              },
             },
             {
               label: '漏风率(%)',
-              value: '${leakage}',
+              value: '${DataPa}',
             },
           ],
         },
@@ -2134,18 +2135,11 @@ export const testConfigVentNew: Config[] = [
       gallery: [],
       complex_list: [],
       gallery_list: [],
-      preset: [
-        {
-          readFrom: '',
-          fan1Prop: ['flow_merge', 'fy_merge'],
-          fan2Prop: ['flow_merge', 'fy_merge'],
-        },
-      ],
-      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
+      preset: [],
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
-      version: '新版',
+      size: 'width:380px;height:280px;',
+      version: '原版',
       position: 'top:60px;left:0;',
     },
   },
@@ -2168,7 +2162,7 @@ export const testConfigVentNew: Config[] = [
       },
       background: {
         // show: true,
-        show: false,
+        show: true,
         type: 'video',
         link: '/video/gate.mp4',
       },
@@ -2197,7 +2191,7 @@ export const testConfigVentNew: Config[] = [
     },
     showStyle: {
       size: 'width:377px;height:280px;',
-      version: '新版',
+      version: '原版',
       position: 'top:350px;left:0;',
     },
   },
@@ -2274,12 +2268,106 @@ export const testConfigVentNew: Config[] = [
       to: '/monitorChannel/monitor-alarm-home',
     },
     showStyle: {
-      size: 'width:377px;height:280px;',
+      size: 'width:387px;height:280px;',
       version: '新版',
       position: 'top:640px;left:0;',
     },
   },
   {
+    deviceType: 'sys_wind',
+    moduleName: '',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      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: '',
+    },
+    showStyle: {
+      size: 'width:1000px;height:120px;',
+      version: '新版',
+      position: 'top:85px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'sys_wind',
+    moduleName: '',
+    pageType: 'vent',
+    moduleData: {
+      header: {
+        show: false,
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+        slot: {
+          show: false,
+          value: '',
+        },
+      },
+      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: '',
+    },
+    showStyle: {
+      size: 'width:1000px;height:100px;',
+      version: '新版',
+      position: 'bottom:0;left:460px;',
+    },
+  },
+  {
     deviceType: 'fanlocal',
     moduleName: '局部通风机系统',
     pageType: 'vent',
@@ -2301,31 +2389,42 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: false,
-        type: 'image',
-        link: '',
+        show: true,
+        type: 'video',
+        link: '/video/fanLocal.mp4',
       },
       layout: {
         direction: 'column',
         items: [
           {
-            name: 'chart',
-            basis: '100%',
+            name: 'board',
+            basis: '40%',
           },
         ],
       },
-      board: [],
-      list: [],
-      chart: [
+      board: [
         {
-          type: 'bar_cylinder_wide',
-          readFrom: '',
-          legend: { show: false },
-          xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '(m³/min)', position: 'left' }],
-          series: [{ readFrom: 'chartData', xprop: 'x', yprop: 'y', label: '风量' }],
+          type: 'New1',
+          readFrom: 'readData',
+          layout: 'new1-top',
+          items: [
+            {
+              label: '风筒出口风量',
+              value: '${windQuantity1}',
+            },
+            {
+              label: '风机吸入风量',
+              value: '${windQuantity2}',
+            },
+            {
+              label: '百米漏风率(%)',
+              value: '${windQuantity1}',
+            },
+          ],
         },
       ],
+      list: [],
+      chart: [],
       table: [],
       gallery: [],
       complex_list: [],
@@ -2358,28 +2457,24 @@ export const testConfigVentNew: Config[] = [
         },
       },
       background: {
-        show: false,
-        type: 'video',
-        link: '',
+        show: true,
+        type: 'image',
+        link: '/src/assets/images/vent/homeNew/gjBG.png',
       },
       layout: {
         direction: 'column',
         items: [
           {
-            name: 'chart',
-            basis: '67%',
-          },
-          {
             name: 'board',
-            basis: '33%',
+            basis: '100%',
           },
         ],
       },
       board: [
         {
-          type: 'D',
+          type: 'New2',
           readFrom: 'readData',
-          layout: 'label-top',
+          layout: 'new2-top',
           items: [
             {
               label: '风量(m³/min)',
@@ -2400,16 +2495,7 @@ export const testConfigVentNew: Config[] = [
       gallery: [],
       list: [],
       table: [],
-      chart: [
-        {
-          type: 'pie_halo',
-          readFrom: '',
-          legend: { show: false, formatter: '{b}:{c}\n{d}%' },
-          xAxis: [{ show: false }],
-          yAxis: [{ show: false, name: '风量', position: 'left' }],
-          series: [{ readFrom: 'piechart', xprop: 'label', yprop: 'valMock', label: '' }],
-        },
-      ],
+      chart: [],
       gallery_list: [],
       preset: [],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath&deviceid=${deviceID}',
@@ -2447,19 +2533,19 @@ export const testConfigVentNew: Config[] = [
         items: [
           {
             name: 'chart',
-            basis: '65%',
+            basis: '75%',
           },
           {
             name: 'board',
-            basis: '35%',
+            basis: '25%',
           },
         ],
       },
       board: [
         {
-          type: 'B',
+          type: 'New3',
           readFrom: '',
-          layout: 'label-top',
+          layout: 'new3-top',
           items: [
             {
               label: '进风(m³/min)',
@@ -2469,10 +2555,6 @@ export const testConfigVentNew: Config[] = [
               label: '回风(m³/min)',
               value: '${faceRetM3}',
             },
-            {
-              label: '需风量(m³/min)',
-              value: '${facePlanM3}',
-            },
           ],
         },
       ],
@@ -2482,11 +2564,11 @@ export const testConfigVentNew: Config[] = [
       gallery: [],
       chart: [
         {
-          type: 'line',
+          type: 'line_area',
           readFrom: '',
-          legend: { show: true },
+          legend: { show: false },
           xAxis: [{ show: true }],
-          yAxis: [{ show: true, name: '风量(m³/min)', position: 'left' }],
+          yAxis: [{ show: true, name: '', position: 'left' }],
           series: [
             { readFrom: 'history_report', xprop: 'time', yprop: 'faceIntM3', label: '进风' },
             { readFrom: 'history_report', xprop: 'time', yprop: 'faceRetM3', label: '回风' },
@@ -2503,85 +2585,4 @@ export const testConfigVentNew: Config[] = [
       position: 'top:640px;right:0;',
     },
   },
-  {
-    deviceType: 'fanmain',
-    moduleName: '主通风机系统',
-    pageType: 'vent',
-    moduleData: {
-      header: {
-        show: true,
-        readFrom: '',
-        selector: {
-          show: true,
-          value: '${strinstallpos}',
-        },
-        slot: {
-          show: true,
-          value: '运行风机：${readData.Fan1StartStatus}',
-          trans: {
-            '1': '一号',
-            '0': '二号',
-          },
-        },
-      },
-      background: {
-        show: false,
-        type: 'image',
-        link: '',
-      },
-      layout: {
-        direction: 'column',
-        items: [
-          {
-            name: 'qh_curve',
-            basis: '67%',
-          },
-          {
-            name: 'board',
-            basis: '33%',
-          },
-        ],
-      },
-      board: [
-        {
-          type: 'D',
-          readFrom: '',
-          layout: 'label-top',
-          items: [
-            {
-              label: '风量(m³/min)',
-              value: '${flow_merge}',
-            },
-            {
-              label: '负压(Pa)',
-              value: '${fy_merge}',
-            },
-            {
-              label: '漏风率(%)',
-              value: '${leakage}',
-            },
-          ],
-        },
-      ],
-      list: [],
-      chart: [],
-      table: [],
-      gallery: [],
-      complex_list: [],
-      gallery_list: [],
-      preset: [
-        {
-          readFrom: '',
-          fan1Prop: ['flow_merge', 'fy_merge'],
-          fan2Prop: ['flow_merge', 'fy_merge'],
-        },
-      ],
-      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',
-    },
-    showStyle: {
-      size: 'width:377px;height:280px;',
-      version: '新版',
-      position: 'top:60px;left:0;',
-    },
-  },
 ];

src/views/vent/monitorManager/compressor/components/nitrogenHome_bd.vue

@@ -788,24 +788,26 @@
           });
           console.log(monitorData, 'monitorData.value---===');
           console.log(airCompressorState, 'airCompressorState--------');
-          const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) };
-          const dataArr = lodash.cloneDeep(echartData.value);
-          //图表数据
-          if (dataArr.length < 4) {
-            monitorData.value.forEach((el, index) => {
-              airCompressor['flow'] = el['flow'] || 0;
-            });
-            dataArr.push(airCompressor);
-          } else {
-            dataArr.shift();
-            // dataArr.push(airCompressor)
-            monitorData.value.forEach((el, index) => {
-              airCompressor['flow'] = el['flow'] || 0;
-            });
-            dataArr.push(airCompressor);
-            // console.log(dataArr,'dataArr---------')
+          if (monitorData.value.length > 0 && monitorData.value[0]['readTime']) {
+            const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) };
+            const dataArr = lodash.cloneDeep(echartData.value);
+            //图表数据
+            if (dataArr.length < 4) {
+              monitorData.value.forEach((el, index) => {
+                airCompressor['flow'] = el['flow'] || 0;
+              });
+              dataArr.push(airCompressor);
+            } else {
+              dataArr.shift();
+              // dataArr.push(airCompressor)
+              monitorData.value.forEach((el, index) => {
+                airCompressor['flow'] = el['flow'] || 0;
+              });
+              dataArr.push(airCompressor);
+              // console.log(dataArr,'dataArr---------')
+            }
+            echartData.value = dataArr;
           }
-          echartData.value = dataArr;
         }
       });
       // monitorDataGroupNum.value = monitorData.value.length;