[Fix 0000]蓝色火灾首页优化

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

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

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

@@ -81,7 +81,7 @@ let menuList = ref<any[]>([
   },
   {
     name: '预警监测',
-    targatUrl: '/warnMonitor/configurable/home',
+    targatUrl: '/micro-vent-3dModal/configurable/warnMonitor/home',
   },
 ]); //一级菜单列表
 let activeIndex = ref(0); //当前激活menu索引

src/views/vent/home/configurable/blue/components/originalNew/moduleTopFire.vue

@@ -52,18 +52,18 @@ const emit = defineEmits(['close', 'click']);
   display: flex;
   flex-direction: column;
   .left-img {
-    left: 4%;
+    left: 5%;
     top: 2%;
-    width: 75px;
-    height: 75px;
+    width: 55px;
+    height: 55px;
     cursor: pointer;
     position: absolute;
     background: url('@/assets/images/fireNew/3-4.png') no-repeat;
     background-size: 100% 100%;
   }
   .left-title {
-    left: 3%;
-    top: 85px;
+    left: 2%;
+    top: 65px;
     font-size: 13px;
     font-family: 'douyuFont';
     font-weight: bold;
@@ -78,18 +78,18 @@ const emit = defineEmits(['close', 'click']);
   display: flex;
   flex-direction: column;
   .right-img {
-    right: 4%;
+    right: 5%;
     top: 2%;
-    width: 75px;
-    height: 75px;
+    width: 55px;
+    height: 55px;
     cursor: pointer;
     position: absolute;
     background: url('@/assets/images/fireNew/3-5.png') no-repeat;
     background-size: 100% 100%;
   }
   .right-title {
-    right: 3%;
-    top: 85px;
+    right: 2%;
+    top: 65px;
     font-size: 13px;
     font-family: 'douyuFont';
     font-weight: bold;
@@ -109,8 +109,8 @@ const emit = defineEmits(['close', 'click']);
   align-items: center; /* 垂直居中对齐 */
 }
 .img-left {
-  width: 50px; /* 图片尺寸 */
-  height: 50px;
+  width: 30px; /* 图片尺寸 */
+  height: 30px;
   margin-right: 8px; /* 图片文字间距 */
   background: url('@/assets/images/fireNew/3-3.png') no-repeat center; /* 替换为实际图片路径 */
   background-size: contain;
@@ -122,8 +122,8 @@ const emit = defineEmits(['close', 'click']);
   align-items: center;
 }
 .img-right {
-  width: 50px;
-  height: 50px;
+  width: 30px;
+  height: 30px;
   margin-left: -10px;
   background: url('@/assets/images/fireNew/3-2.png') no-repeat center; /* 替换为实际图片路径 */
   background-size: contain;
@@ -135,20 +135,20 @@ const emit = defineEmits(['close', 'click']);
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 330px;
+  width: 250px;
 }
 /* 文字样式 */
 .title-left {
   width: 100px;
-  font-size: 20px;
+  font-size: 16px;
 }
 .title-right {
   width: 100px;
-  font-size: 20px;
+  font-size: 16px;
 }
 .center-top {
-  margin-bottom: 14px;
-  font-size: 20px;
+  margin-bottom: 10px;
+  font-size: 16px;
   margin-left: -18px;
 }
 .center-bottom {

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

@@ -51,173 +51,173 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted } from 'vue';
-  // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  import NewNav from './components/NewNavFire.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import ModuleNew from './components/ModuleNew.vue';
-  import ModuleFireNew from './components/ModuleFireNew.vue';
-  import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  // import { BDFireMock } from './mock';
-  import { getDisHome } from '../configurable.api';
-  // import { EyeFilled } from '@ant-design/icons-vue';
-  import { testConfigNewFire } from '../configurable.data.New';
-  const cfgs = computed(() =>
-    configs.value.filter((_, index) => {
-      return index !== 4 && index !== 3 && index !== 5;
-    })
-  );
-  const cfgA = computed<any>(() =>
-    configs.value.find((_, index) => {
-      return index === 3;
-    })
-  );
-  const cfgB = computed<any>(() =>
-    configs.value.find((_, index) => {
-      return index === 4;
-    })
-  );
-  const cfgTop = computed<any>(() =>
-    configs.value.find((_, index) => {
-      return index === 5;
-    })
-  );
-  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
-  let interval: number | undefined;
-  onMounted(() => {
-    // fetchConfigs('New_fire').then(() => {
-    //   configs.value = testConfigNewFire;
-    //   Promise.resolve(BDFireMock).then(updateData);
-    // });
-    // setInterval(() => {
-    //   Promise.resolve(BDFireMock).then(updateData);
-    // }, 2000);
-    fetchConfigs('New_fire').then(() => {
-      configs.value = testConfigNewFire;
-      getDisHome({
-        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-      }).then(updateData);
-    });
-    setInterval(() => {
-      getDisHome({
-        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-      }).then(updateData);
-    }, 2000);
+import { computed, onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+import NewNav from './components/NewNavFire.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleNew from './components/ModuleNew.vue';
+import ModuleFireNew from './components/ModuleFireNew.vue';
+import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
+import VentModal from '/@/components/vent/micro/ventModal.vue';
+// import { BDFireMock } from './mock';
+import { getDisHome } from '../configurable.api';
+// import { EyeFilled } from '@ant-design/icons-vue';
+import { testConfigNewFire } from '../configurable.data.New';
+const cfgs = computed(() =>
+  configs.value.filter((_, index) => {
+    return index !== 4 && index !== 3 && index !== 5;
+  })
+);
+const cfgA = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 3;
+  })
+);
+const cfgB = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 4;
+  })
+);
+const cfgTop = computed<any>(() =>
+  configs.value.find((_, index) => {
+    return index === 5;
+  })
+);
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
+let interval: number | undefined;
+onMounted(() => {
+  // fetchConfigs('New_fire').then(() => {
+  //   configs.value = testConfigNewFire;
+  //   Promise.resolve(BDFireMock).then(updateData);
+  // });
+  // setInterval(() => {
+  //   Promise.resolve(BDFireMock).then(updateData);
+  // }, 2000);
+  fetchConfigs('New_fire').then(() => {
+    configs.value = testConfigNewFire;
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
   });
+  setInterval(() => {
+    getDisHome({
+      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    }).then(updateData);
+  }, 2000);
+});
 
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+onUnmounted(() => {
+  clearInterval(interval);
+});
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+function redirectTo(url) {
+  window.open(url);
+}
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
-
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/fireNew/1.png');
-    }
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
+@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/fireNew/1.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
+  }
+}
+
+.company-home {
+  --image-modal-top: url('@/assets/images/fireNew/1.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
 
-    .top-bg {
-      width: 100%;
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    background: var(--image-modal-top) no-repeat center;
+    position: absolute;
+    z-index: 1;
+    .main-title {
       height: 56px;
-      background: var(--image-modal-top) no-repeat center;
-      position: absolute;
-      z-index: 1;
-      .main-title {
-        height: 56px;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-    .left-t {
-      position: absolute;
-      width: 28%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-      z-index: 0;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-    .right-t {
+    .top-nav {
       position: absolute;
-      width: 172%;
+      top: 0;
+      width: 880px;
       height: 100%;
-      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-      z-index: 0;
-    }
-    // .module-left {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   left: 0;
-    // }
-    // .module-right {
-    //   position: absolute;
-    //   width: 450px;
-    //   height: 280px;
-    //   right: 0;
-    // }
-    // .module-bottom {
-    //   position: absolute;
-    //   width: 1000px;
-    //   height: 280px;
-    // }
-    .module-dropdown {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-dropdown-original {
-      padding: 10px;
-      background-image: @vent-configurable-dropdown;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-      color: @vent-font-color;
-      position: absolute;
-      top: 70px;
-      right: 460px;
-    }
-    .module-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
+      display: flex;
+      justify-content: flex-start;
     }
   }
-  :deep(.loading-box) {
-    position: unset;
+  .left-t {
+    position: absolute;
+    width: 28%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+    z-index: 0;
+  }
+  .right-t {
+    position: absolute;
+    width: 172%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
+  // .module-left {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   left: 0;
+  // }
+  // .module-right {
+  //   position: absolute;
+  //   width: 450px;
+  //   height: 280px;
+  //   right: 0;
+  // }
+  // .module-bottom {
+  //   position: absolute;
+  //   width: 1000px;
+  //   height: 280px;
+  // }
+  .module-dropdown {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+  .module-dropdown-original {
+    padding: 10px;
+    background-image: @vent-configurable-dropdown;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
+    color: @vent-font-color;
+    position: absolute;
+    top: 70px;
+    right: 460px;
+  }
+  .module-trigger-button {
+    color: @vent-font-color;
+    background-image: @vent-configurable-dropdown;
+    border: none;
+    border-bottom: 2px solid @vent-configurable-home-light-border;
   }
+}
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

src/views/vent/home/configurable/components/detail/ComplexList-FireNew.vue

@@ -4,11 +4,13 @@
   <div class="list flex items-center" :class="`list_${type}`">
     <!-- 部分类型的列表需要加一张图片 -->
     <div :class="`list__image_${type}`"></div>
+
     <!-- 剩下的部分填充剩余宽度 -->
     <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
       <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__title_${type}`">{{ item.title }}</div>
+
         <!-- 列表项的具体内容填充剩余宽度 -->
         <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
           <div class="list-item__label">{{ ctx.label }}</div>
@@ -19,6 +21,7 @@
     </div>
   </div>
 </template>
+
 <script lang="ts" setup>
 withDefaults(
   defineProps<{
@@ -31,7 +34,7 @@ withDefaults(
         info: string;
       }[];
     }[];
-    /** A B */
+    /** 列表样式类型：A/B/C/D/E/F/G */
     type: string;
   }>(),
   {
@@ -40,14 +43,14 @@ withDefaults(
   }
 );
 
-//   defineEmits(['click']);
+// defineEmits(['click']);
 </script>
+
 <style lang="less" scoped>
-    @import '@/design/theme.less';
-    @import '@/design/theme.less';
-    /* Timeline 相关的样式 */
+@import '@/design/theme.less';
 
-    @{theme-deepblue} {
+// 图片变量定义
+@{theme-deepblue} {
   .list {
     --image-title: url('/@/assets/images/fireNew/7-1.png');
     --image-ListArea: url('/@/assets/images/fireNew/7-2.png');
@@ -55,6 +58,7 @@ withDefaults(
   }
 }
 
+// 基础样式
 .list {
   --image-title: url('/@/assets/images/fireNew/7-1.png');
   --image-ListArea: url('/@/assets/images/fireNew/7-2.png');
@@ -64,434 +68,445 @@ withDefaults(
   width: 100%;
   height: 100%;
 }
-    .list-item_A {
-      position: relative;
-      height: 140px;
-      background-repeat: no-repeat;
-      background-image: var(--image-img-3);
-      background-size: auto 100%;
-      background-position: center;
-    }
-    .list-item__title_A {
-      position: absolute;
-      left: 41%;
-      // font-size: 14px;
-      top: 15px;
-    }
-    // .list-item__content_A {
-    //   position: absolute;
-    //   left: 35%;
-    //   top: 55px;
-    //   display: flex;
-    //   justify-content: space-evenly;
-    // }
-    .list-item__content_A:nth-of-type(2) {
-      position: absolute;
-      top: 15px;
-      left: 14%;
-      width: 22%;
-      text-align: center;
-      display: block;
-
-      .list-item__label {
-        font-size: 18px;
-        margin-bottom: 25px;
-      }
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 24px;
-      }
-    }
-    .list-item__content_A:nth-of-type(3) {
-      position: absolute;
-      left: 41%;
-      top: 55px;
-
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 20px;
-      }
-    }
-    .list-item__content_A:nth-of-type(4) {
-      position: absolute;
-      left: 66%;
-      top: 55px;
-
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 20px;
-      }
-    }
-    .list-item__content_A:nth-of-type(5) {
-      position: absolute;
-      left: 35%;
-      bottom: 10px;
-      display: flex;
-      align-items: center;
-
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 20px;
-        margin-left: 5px;
-      }
-    }
 
-    .list-item_B {
-      // height: 155px;
-      background-repeat: no-repeat;
-      // background-size: 100% 100%;
-      // background-size: auto 100%;
-      background-size: 87% auto;
-      background-position: center;
-      background-image: var(--image-img-7);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      text-align: center;
-      padding: 0 10%;
-      margin-top: 5px;
-      height: 33px;
-
-      .list-item__label {
-        font-size: 11px;
-      }
-      .list-item__value {
-        font-size: 18px;
-        margin-left: 5px;
-      }
-      .list-item__content_B {
-        height: 100%;
-        display: flex;
-        align-items: center;
-        flex-basis: 100px;
-        flex-grow: 1;
-      }
-      .list-item__title_B {
-        width: 40px;
-        text-align: center;
-        margin-right: 50px
-        // height: 30px;
-        // background-size: auto 80%;
-        // background-position: center;
-        // background-repeat: no-repeat;
-      }
-      .list-item__info {
-        display: none;
-      }
-    }
+// 颜色样式
+.list-item__value_red {
+  color: red;
+}
+.list-item__value_orange {
+  color: orange;
+}
+.list-item__value_yellow {
+  color: yellow;
+}
+.list-item__value_green {
+  color: yellowgreen;
+}
+.list-item__value_blue {
+  color: @vent-table-action-link;
+}
+.list-item__value_white {
+  color: white;
+}
+.gallery-item__value_lightblue {
+  color: @vent-configurable-home-light-border;
+}
 
-    .list_C {
-      padding: 5px 10px;
-    }
+// 类型A样式
+.list-item_A {
+  position: relative;
+  height: 140px;
+  background-repeat: no-repeat;
+  background-image: var(--image-img-3);
+  background-size: auto 100%;
+  background-position: center;
+}
 
-    .list__wrapper_C {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
+.list-item__title_A {
+  position: absolute;
+  left: 41%;
+  top: 15px;
+}
 
-    .list-item_C {
-      position: relative;
-      height: 140px;
-      width: 200px;
-      background-repeat: no-repeat;
-      background-image: var(--image-img-8);
-      background-size: 100% 100%;
-      background-position: left center;
-    }
-    .list-item__title_C {
-      position: absolute;
-      left: 99px;
-      // font-size: 14px;
-      top: 15px;
-    }
-    .list-item__content_C:nth-of-type(2) {
-      position: absolute;
-      top: 15px;
-      left: 19px;
-      width: 30%;
-      text-align: center;
-      display: block;
-
-      .list-item__label {
-        // font-size: 18px;
-        margin-bottom: 25px;
-      }
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 18px;
-      }
-    }
-    .list-item__content_C:nth-of-type(3) {
-      position: absolute;
-      left: 99px;
-      top: 55px;
-
-      .list-item__info {
-        display: none;
-      }
-      .list-item__value {
-        font-size: 18px;
-      }
-    }
+.list-item__content_A:nth-of-type(2) {
+  position: absolute;
+  top: 15px;
+  left: 14%;
+  width: 22%;
+  text-align: center;
+  display: block;
 
+  .list-item__label {
+    font-size: 18px;
+    margin-bottom: 25px;
+  }
 
-    .list_D {
-      padding: 5px 10px;
-    }
+  .list-item__info {
+    display: none;
+  }
 
-    .list__wrapper_D {
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    }
+  .list-item__value {
+    font-size: 24px;
+  }
+}
 
-    .list-item_D {
-      background-image: var(--image-ListArea);
-      background-size: 100% auto;
-      background-position: center;
-      background-repeat: no-repeat;
-      position: relative;
-       height: 130px;
-      width: 179px;
-       text-align: center;
-       margin-left: 15px;
-       margin-right: 12px;
-       margin-top: 13px;
-    }
-    .list-item__title_D {
-      background-image: var(--image-title);
-      background-size: 100% auto;
-      background-position: center;
-      background-repeat: no-repeat;
-      width: 100%;
-      bottom: 0;
-      font-size: 16px;
-    }
-    .list-item__content_D:nth-of-type(2) {
-              background-image: var(--image-ValueBg);
-      background-size: 100% auto;
-      background-position: center;
-      background-repeat: no-repeat;
-    display: flex;
-    justify-content: space-between;
-    top: 30%;
-    left: 10%;
-    width: 88%;
-    position: absolute;
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      margin-right: 10px;
-      font-size: 13px;   
-      color: #a9e0eb;
-    }
+.list-item__content_A:nth-of-type(3) {
+  position: absolute;
+  left: 41%;
+  top: 55px;
+
+  .list-item__info {
+    display: none;
   }
-  .list-item__content_D:nth-of-type(3) {
-        background-image: var(--image-ValueBg);
-      background-size: 100% auto;
-      background-position: center;
-      background-repeat: no-repeat;
-    display: flex;
-    justify-content: space-between;
-    top: 62%;
-    left: 10%;
-    width: 77%;
-    position: absolute;
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 13px;
-      margin-right: 10px;
-      color: #a9e0eb;
-    }
+
+  .list-item__value {
+    font-size: 20px;
+  }
+}
+
+.list-item__content_A:nth-of-type(4) {
+  position: absolute;
+  left: 66%;
+  top: 55px;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 20px;
+  }
+}
+
+.list-item__content_A:nth-of-type(5) {
+  position: absolute;
+  left: 35%;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 20px;
+    margin-left: 5px;
+  }
+}
+
+// 类型B样式
+.list-item_B {
+  background-repeat: no-repeat;
+  background-size: 87% auto;
+  background-position: center;
+  background-image: var(--image-img-7);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+  padding: 0 10%;
+  margin-top: 5px;
+  height: 33px;
+
+  .list-item__label {
+    font-size: 11px;
   }
-  .list_E {
-    padding: 5px 10px;
+
+  .list-item__value {
+    font-size: 18px;
+    margin-left: 5px;
   }
 
-  .list__wrapper_E {
+  .list-item__content_B {
+    height: 100%;
     display: flex;
-    flex-wrap: wrap;
-    padding: 0 10px;
+    align-items: center;
+    flex-basis: 100px;
+    flex-grow: 1;
   }
 
-  .list-item_E {
-    position: relative;
-    height: 100px;
-    width: 170px;
-    background-repeat: no-repeat;
-    background-image: var(--image-list_bg_1);
-    background-size: 100% auto;
-    background-position: center top;
+  .list-item__title_B {
+    width: 40px;
     text-align: center;
-    margin-bottom: 20px;
-    margin-left: 5px;
+    margin-right: 50px;
   }
-  .list-item__title_E {
-    // position: absolute;
-    width: 100%;
-    // top: 0;
+
+  .list-item__info {
+    display: none;
+  }
+}
+
+// 类型C样式
+.list_C {
+  padding: 5px 10px;
+}
+
+.list__wrapper_C {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.list-item_C {
+  position: relative;
+  height: 140px;
+  width: 200px;
+  background-repeat: no-repeat;
+  background-image: var(--image-img-8);
+  background-size: 100% 100%;
+  background-position: left center;
+}
+
+.list-item__title_C {
+  position: absolute;
+  left: 99px;
+  top: 15px;
+}
+
+.list-item__content_C:nth-of-type(2) {
+  position: absolute;
+  top: 15px;
+  left: 19px;
+  width: 30%;
+  text-align: center;
+  display: block;
+
+  .list-item__label {
+    margin-bottom: 25px;
+  }
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 18px;
+  }
+}
+
+.list-item__content_C:nth-of-type(3) {
+  position: absolute;
+  left: 99px;
+  top: 55px;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 18px;
+  }
+}
+
+// 类型D样式
+.list_D {
+  padding: 5px 10px;
+}
+
+.list__wrapper_D {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.list__wrapper_D::-webkit-scrollbar {
+  display: flex;
+  width: 0;
+  height: 0;
+}
+
+.list-item_D {
+  background-image: var(--image-ListArea);
+  background-size: 100% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  height: 130px;
+  width: 175px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.list-item_D:nth-child(odd) {
+  margin-left: 25px;
+  margin-right: 5px;
+}
+
+.list-item_D:nth-child(even) {
+  margin-right: 25px;
+  margin-left: 5px;
+}
+
+.list-item__title_D {
+  background-image: var(--image-title);
+  background-size: 100% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100%;
+  bottom: 0;
+  font-size: 16px;
+}
+
+.list-item__content_D:nth-of-type(2) {
+  background-image: var(--image-ValueBg);
+  background-size: 100% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: space-between;
+  top: 30%;
+  left: 10%;
+  width: 88%;
+  position: absolute;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    margin-right: 10px;
+    font-size: 13px;
+    color: #a9e0eb;
+  }
+}
+
+.list-item__content_D:nth-of-type(3) {
+  background-image: var(--image-ValueBg);
+  background-size: 100% auto;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  justify-content: space-between;
+  top: 62%;
+  left: 10%;
+  width: 77%;
+  position: absolute;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 13px;
+    margin-right: 10px;
+    color: #a9e0eb;
+  }
+}
+
+// 类型E样式
+.list_E {
+  padding: 5px 10px;
+}
+
+.list__wrapper_E {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 10px;
+}
+
+.list-item_E {
+  position: relative;
+  height: 100px;
+  width: 170px;
+  background-repeat: no-repeat;
+  background-image: var(--image-list_bg_1);
+  background-size: 100% auto;
+  background-position: center top;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-left: 5px;
+}
+
+.list-item__title_E {
+  width: 100%;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+}
+
+.list-item__content_E:nth-of-type(2) {
+  position: absolute;
+  top: 40%;
+  left: 5%;
+  text-align: left;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
+    font-size: 16px;
+  }
+}
+
+.list-item__content_E:nth-of-type(3) {
+  position: absolute;
+  top: 40%;
+  right: 5%;
+  text-align: right;
+
+  .list-item__info {
+    display: none;
+  }
+
+  .list-item__value {
     font-size: 16px;
+  }
+}
+
+// 类型F样式
+.list-item_F {
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
+  background-image: @vent-gas-list-item-bg-img;
+  display: flex;
+  align-items: center;
+  padding: 0 5%;
+  margin-top: 5px;
+  height: 50px;
+
+  .list-item__title_F {
+    flex-basis: 25%;
+  }
+
+  .list-item__content_F {
+    flex-basis: 25%;
+    display: flex;
+    align-items: center;
+  }
+
+  .list-item__label::after {
+    content: '：';
+  }
+
+  .list-item__value {
+    font-size: 18px;
+    margin-left: 5px;
     font-weight: bold;
-    margin-top: 10px;
   }
-  .list-item__content_E:nth-of-type(2) {
-    position: absolute;
-    top: 40%;
-    left: 5%;
-    text-align: left;
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 16px;
-    }
+  .list-item__info {
+    display: none;
   }
-  .list-item__content_E:nth-of-type(3) {
-    position: absolute;
-    top: 40%;
-    right: 5%;
-    text-align: right;
+}
 
-    .list-item__info {
-      display: none;
-    }
-    .list-item__value {
-      font-size: 16px;
+// 类型G样式
+.list-item_G {
+  margin-top: 5px;
+
+  .list-item__title_G {
+    position: relative;
+    width: 100%;
+    height: 16px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    padding-left: 8px;
+    top: -2px;
+    background-image: var(--image-linear-gradient-1);
+
+    &::before {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 100%;
+      top: 4px;
+      left: 0;
+      background-image: var(--image-linear-gradient-2);
     }
   }
 
-  .list-item_F {
-      // height: 155px;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      // background-size: auto 100%;
-      background-position: center;
-      background-image: @vent-gas-list-item-bg-img;
-      display: flex;
-      align-items: center;
-      // justify-content: space-between;
-      // text-align: center;
-      padding: 0 5%;
-      margin-top: 5px;
-      height: 50px;
-
-      .list-item__title_F {
-        flex-basis: 25%;
-      }
-      .list-item__content_F {
-        flex-basis: 25%;
-      }
-      .list-item__label::after {
-        content: '：';
-      }
-      .list-item__value {
-        font-size: 18px;
-        margin-left: 5px;
-        font-weight: bold;
-      }
-      .list-item__content_F {
-        display: flex;
-        align-items: center;
-      }
-      .list-item__info {
-        display: none;
-      }
-  }
-
-  .list-item_G {
-      // height: 155px;
-      // background-repeat: no-repeat;
-      // background-size: 100% 100%;
-      // background-position: center;
-      // justify-content: space-between;
-      // text-align: center;
-      margin-top: 5px;
-
-      .list-item__title_G {
-        position: relative;
-        width: 100%;
-        height: 16px;
-        margin-top: 10px;
-        margin-bottom: 5px;
-        padding-left: 8px;
-        top: -2px;
-        background-image: var(--image-linear-gradient-1);
-        &::before{
-          position: absolute;
-          content: '';
-          width: 100%;
-          height: 100%;
-          top: 4px;
-          left: 0;
-          background-image: var(--image-linear-gradient-2);
-        }
-      }
-      .list-item__content_G {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 4px;
-        margin: 8px 0;
-        background-image: var(--image-linear-gradient-3);
-      }
-  }
-
-    // .list-item__title_B_O2 {
-    //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
-    // }
-    // .list-item__title_B_CH4 {
-    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
-    // }
-    // .list-item__title_B_CO {
-    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
-    // }
-    // .list-item__title_B_CO2 {
-    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
-    // }
-
-    // .list-item__label {
-    //   flex-basis: 55%;
-    // }
-    // .list-item__info {
-    //   flex-grow: 1;
-    // }
-    // .list-item__value {
-    //   flex-basis: 30%;
-    // }
-    .list-item__value_red {
-      color: red;
-    }
-    .list-item__value_orange {
-      color: orange;
-    }
-    .list-item__value_yellow {
-      color: yellow;
-    }
-    .list-item__value_green {
-      color: yellowgreen;
-    }
-    .list-item__value_blue {
-      color: @vent-table-action-link;
-    }
-    .list-item__value_white {
-      color: white;
-    }
-    .gallery-item__value_lightblue {
-      color: @vent-configurable-home-light-border;
-    }
-</style>
+  .list-item__content_G {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px;
+    margin: 8px 0;
+    background-image: var(--image-linear-gradient-3);
+  }
+}
+</style>

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

@@ -301,13 +301,15 @@ function getIconPath1(item) {
 .list-item_H {
   align-items: center;
   text-align: center;
-  margin: 5px 10px;
+  margin: 10px;
   &:nth-child(2n) {
+    height: 34px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-image: var(--image-list_bg_h);
   }
   &:nth-child(2n + 1) {
+    height: 34px;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-image: var(--image-list_bg_h1);
@@ -401,7 +403,7 @@ function getIconPath1(item) {
   height: 35px;
   align-items: center;
   text-align: center;
-  margin: 15px 20px;
+  margin: 10px;
   /* 背景组合A（1,4,5,8） */
   &:nth-child(1),
   &:nth-child(4),

src/views/vent/home/configurable/components/detail/CustomTable-fire.vue

@@ -68,7 +68,7 @@ function get(o, p) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 5px 0;
+  padding: 13px;
 
   .table__content_label {
     width: 400px;

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

@@ -36,133 +36,140 @@
   </div>
 </template>
 <script lang="ts" setup>
-  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',
-    }
-  );
+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';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
-  @{theme-deepblue} {
-    .mini-board {
-      --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
-      --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
-      --image-areaNew2: url('/@/assets/images/fireNew/8.png');
-    }
-  }
-
-  .mini-board__label {
-    white-space: nowrap;
-  }
-  .mini-board__value {
-    white-space: nowrap;
-  }
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
+@font-face {
+  font-family: 'douyuFont';
+  src: url('/@/assets/font/douyuFont.otf');
+}
+@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
     --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
     --image-areaNew2: url('/@/assets/images/fireNew/8.png');
-    height: 50px;
-    line-height: 25px;
-    width: 130px;
-    padding: 0 5px 0 5px;
-    text-align: center;
-    background-size: 100% 100%;
-    position: relative;
-  }
-  .mini-board_H {
-    width: 174px;
-    height: 104px;
-    background-image: var(--image-areaNew);
-    background-size: 100% auto;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-    padding: 33px 0 0 82px;
   }
+}
 
-  .mini-board__value_H {
-    font-size: 16px;
-    font-weight: bold;
-    height: 23px;
-    line-height: 50px;
-    margin-top: 2px;
-    font-family: 'douyuFont';
-  }
-  .mini-board__label_H {
-    line-height: 20px;
-    height: 20px;
-  }
-  .mini-board_E:nth-child(1) {
-    .mini-board__label_E {
-      background-image: var(--image-hycd);
-    }
-  }
-  .mini-board_E:nth-child(2) {
-    .mini-board__label_E {
-      background-image: var(--image-dyfl);
-    }
-  }
-  .mini-board_E:nth-child(3) {
-    .mini-board__label_E {
-      background-image: var(--image-jdjl);
-    }
-  }
+.mini-board__label {
+  white-space: nowrap;
+}
+.mini-board__value {
+  white-space: nowrap;
+}
 
-  .mini-board_H_low_risk:nth-child(1) {
-    background-image: var(--image-areaNew);
-  }
-  .mini-board_H_low_risk:nth-child(2) {
-    background-image: var(--image-areaNew1);
-  }
+.mini-board {
+  --image-areaNew: url('/@/assets/images/fireNew/6-1.png');
+  --image-areaNew1: url('/@/assets/images/fireNew/6-2.png');
+  --image-areaNew2: url('/@/assets/images/fireNew/8.png');
+  height: 50px;
+  line-height: 25px;
+  width: 130px;
+  padding: 0 5px 0 5px;
+  text-align: center;
+  background-size: 100% 100%;
+  position: relative;
+}
+.mini-board_H {
+  width: 150px;
+  height: 62px;
+  background-image: var(--image-areaNew);
+  background-size: 100% 100%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  padding: 5px 0 0 80px;
+}
+.mini-board_H:nth-child(odd) {
+  margin-left: 20px;
+}
+.mini-board_H:nth-child(even) {
+  margin-right: 20px;
+}
+.mini-board__value_H {
+  font-size: 12px;
+  font-weight: bold;
+  height: 23px;
+  line-height: 36px;
+  margin-right: 14px;
+  font-family: 'douyuFont';
+}
+.mini-board__label_H {
+  line-height: 10px;
+  height: 20px;
+  margin-right: 3px;
+  font-size: 11px;
+}
+.mini-board_E:nth-child(1) {
+  .mini-board__label_E {
+    background-image: var(--image-hycd);
+  }
+}
+.mini-board_E:nth-child(2) {
+  .mini-board__label_E {
+    background-image: var(--image-dyfl);
+  }
+}
+.mini-board_E:nth-child(3) {
+  .mini-board__label_E {
+    background-image: var(--image-jdjl);
+  }
+}
 
-  .mini-board_F {
-    width: 100px;
-    height: 60px;
-    background-image: var(--image-areaNew2);
-    background-size: 100% 100%;
-    background-position: center bottom;
-    background-repeat: no-repeat;
-  }
-  .mini-board__value_F {
-    font-size: 15px;
-    color: @vent-gas-primary-text;
-  }
-  .mini-board__label_F {
-    line-height: 17px;
-  }
+.mini-board_H_low_risk:nth-child(1) {
+  background-image: var(--image-areaNew);
+}
+.mini-board_H_low_risk:nth-child(2) {
+  background-image: var(--image-areaNew1);
+}
+
+.mini-board_F {
+  width: 100px;
+  height: 60px;
+  background-image: var(--image-areaNew2);
+  background-size: 100% 100%;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+}
+.mini-board__value_F {
+  font-size: 15px;
+  color: @vent-gas-primary-text;
+}
+.mini-board__label_F {
+  line-height: 17px;
+}
 </style>

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

@@ -10,7 +10,7 @@ enum Api {
   getHomeData = '/safety/ventanalyDevice/homedata',
   getDisHome = '/monitor/disaster/getDisHome',
   getBDDustData = '/monitor/disaster/getDisDustHome',
-  getBDFireData = '/monitor/disaster/getDisFireHome',
+  // getBDFireData = '/monitor/disaster/getDisFireHome',
   getDeviceSys = '/ventanaly-device/monitor/getSysFireHomeInfo',
   getAlarmRecord = '/ventanaly-device/safety/ventanalyAlarmLog/sysLinkDevAlarmLog',
   getTotal = '/safety/ventanalyAlarmLog/total',
@@ -216,35 +216,6 @@ export const getBDDustData = (params) => {
   return cache.get(key) as Promise<any>;
 };
 
-export const getBDFireData = (params) => {
-  const key = `${Api.getBDFireData}?${JSON.stringify(params)}`;
-  if (!cache.has(key)) {
-    cache.set(
-      key,
-      defHttp.post({ url: Api.getBDFireData, params }).finally(() => {
-        cache.delete(key);
-      })
-    );
-  }
-  return (cache.get(key) as Promise<any>).then((res) => {
-    res.pdArray.forEach((e) => {
-      e.arrayFiber.forEach((j) => {
-        j.fibreTemperatureArr = JSON.parse(j.fibreTemperature);
-      });
-    });
-    res.sgGxObj.devGxcw.forEach((e) => {
-      e.fibreTemperatureArr = JSON.parse(e.fibreTemperature);
-    });
-    res.sgGxObj.devSgjc.forEach((e) => {
-      e.o2val = e.o2Val || 0;
-      e.coval = e.coVal || 0;
-      e.gasval = e.gasVal || 0;
-      e.ch2val = e.ch2Val || 0;
-      e.chval = e.chVal || 0;
-    });
-    return res;
-  });
-};
 // 塔山火灾预警页面获取数据接口
 export const getDeviceSys = (params) => {
   const key = `${Api.getDeviceSys}?${JSON.stringify(params)}`;
@@ -277,115 +248,106 @@ export const getAlarmRecord = (params) => {
 };
 
 export const getDisHome = (params) => {
+  // 生成缓存key，基于接口地址和参数
   const key = `${Api.getDisHome}?${JSON.stringify(params)}`;
+
+  // 缓存不存在时发起请求
   if (!cache.has(key)) {
     cache.set(
       key,
       defHttp.post({ url: Api.getDisHome, params }).finally(() => {
+        // 请求完成后删除缓存，保证下次请求能获取最新数据
         cache.delete(key);
       })
     );
   }
+
+  // 返回缓存中的Promise并处理响应数据
   return (cache.get(key) as Promise<any>).then((res) => {
-    if (res.pdArray) {
+    // 1. 处理 pdArray 中的光纤温度数据（解析JSON字符串）
+    if (res.pdArray && Array.isArray(res.pdArray)) {
       res.pdArray.forEach((e) => {
-        e.arrayFiber.forEach((j) => {
-          j.fibreTemperatureArr = JSON.parse(j.fibreTemperature);
-        });
+        // 先校验 arrayFiber 是数组，避免forEach报错
+        if (e.arrayFiber && Array.isArray(e.arrayFiber)) {
+          e.arrayFiber.forEach((j) => {
+            // 安全解析 JSON，避免 undefined/无效JSON 导致报错
+            j.fibreTemperatureArr = safeJsonParse(j.fibreTemperature, []);
+          });
+        }
       });
     }
+
+    // 2. 处理 sgGxObj 下的设备数据
     if (res.sgGxObj) {
-      res.sgGxObj.devGxcw.forEach((e) => {
-        e.fibreTemperatureArr = JSON.parse(e.fibreTemperature);
-      });
-      res.sgGxObj.devSgjc.forEach((e) => {
-        e.o2val = e.o2Val || 0;
-        e.coval = e.coVal || 0;
-        e.gasval = e.gasVal || 0;
-        e.ch2val = e.ch2Val || 0;
-        e.chval = e.chVal || 0;
-      });
+      // 2.1 解析 devGxcw 中的光纤温度
+      if (res.sgGxObj.devGxcw && Array.isArray(res.sgGxObj.devGxcw)) {
+        res.sgGxObj.devGxcw.forEach((e) => {
+          e.fibreTemperatureArr = safeJsonParse(e.fibreTemperature, []);
+        });
+      }
+
+      // 2.2 为 devSgjc 中的气体字段设置默认值
+      if (res.sgGxObj.devSgjc && Array.isArray(res.sgGxObj.devSgjc)) {
+        res.sgGxObj.devSgjc.forEach((e) => {
+          e.o2val = e.o2Val || 0;
+          e.coval = e.coVal || 0;
+          e.gasval = e.gasVal || 0;
+          e.ch2val = e.ch2Val || 0;
+          e.chval = e.chVal || 0;
+        });
+      }
     }
-    if (res.obfObj) {
-      res.obfObj.obfObjModded = [
-        {
-          objType: '氧气',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.o2Val || 0,
-            };
-          }),
-        },
-        {
-          objType: '甲烷',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.ch4Val || 0,
-            };
-          }),
-        },
-        {
-          objType: '一氧化碳',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.coVal || 0,
-            };
-          }),
-        },
-        {
-          objType: '乙炔',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.c2h2Val || 0,
-            };
-          }),
-        },
-        {
-          objType: '二氧化碳',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.co2Val || 0,
-            };
-          }),
-        },
 
-        {
-          objType: '乙烯',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.c2h4Val || 0,
-            };
-          }),
-        },
-        {
-          objType: '压差',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.dpVal || 0,
-            };
-          }),
-        },
-        {
-          objType: '温度',
-          arrayDev: res.obfObj.arrayDev.map((e) => {
-            return {
-              strinstallpos: e.strinstallpos,
-              val: e.tempVal || 0,
-            };
-          }),
-        },
+    // 3. 重组 obfObj 为按气体类型分类的结构
+    if (res.obfObj && Array.isArray(res.obfObj.arrayDev)) {
+      res.obfObj.obfObjModded = [
+        { objType: '氧气', arrayDev: mapObfDev(res.obfObj.arrayDev, 'o2Val') },
+        { objType: '甲烷', arrayDev: mapObfDev(res.obfObj.arrayDev, 'ch4Val') },
+        { objType: '一氧化碳', arrayDev: mapObfDev(res.obfObj.arrayDev, 'coVal') },
+        { objType: '乙炔', arrayDev: mapObfDev(res.obfObj.arrayDev, 'c2h2Val') },
+        { objType: '二氧化碳', arrayDev: mapObfDev(res.obfObj.arrayDev, 'co2Val') },
+        { objType: '乙烯', arrayDev: mapObfDev(res.obfObj.arrayDev, 'c2h4Val') },
+        { objType: '压差', arrayDev: mapObfDev(res.obfObj.arrayDev, 'dpVal') },
+        { objType: '温度', arrayDev: mapObfDev(res.obfObj.arrayDev, 'tempVal') },
       ];
     }
+
     return res;
   });
 };
+
+/**
+ * 安全解析 JSON 字符串的工具函数
+ * @param {string} jsonStr - 要解析的JSON字符串
+ * @param {any} defaultValue - 解析失败/值无效时的默认值
+ * @returns {any} 解析结果或默认值
+ */
+function safeJsonParse(jsonStr, defaultValue = null) {
+  // 先校验值是否为有效字符串
+  if (!jsonStr || typeof jsonStr !== 'string') {
+    return defaultValue;
+  }
+  // 捕获解析异常
+  try {
+    return JSON.parse(jsonStr);
+  } catch (err) {
+    console.warn('JSON解析失败', jsonStr, err);
+    return defaultValue;
+  }
+}
+
+/**
+ * 映射 obfObj.arrayDev 数据的工具函数，减少重复代码
+ * @param {Array} devArray - 设备数组
+ * @param {string} valKey - 要取值的字段名
+ * @returns {Array} 映射后的数组
+ */
+function mapObfDev(devArray, valKey) {
+  return devArray.map((e) => ({
+    strinstallpos: e.strinstallpos,
+    val: e[valKey] || 0,
+  }));
+}
 //获取通风监测预警图表数据
 export const sysTypeWarnList = (params) => {
   const key = `${Api.sysTypeWarnList}?${JSON.stringify(params)}`;

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

@@ -475,11 +475,11 @@ export const testConfigNewFire: Config[] = [
         items: [
           {
             name: 'board',
-            basis: '40%',
+            basis: '35%',
           },
           {
             name: 'complex_list',
-            basis: '60%',
+            basis: '65%',
           },
         ],
       },
@@ -534,7 +534,7 @@ export const testConfigNewFire: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height:300px;',
+      size: 'width:440px;height:280px;',
       version: '保德',
       position: 'top:60px;left:0;',
     },
@@ -570,7 +570,7 @@ export const testConfigNewFire: Config[] = [
           },
           {
             name: 'chart',
-            basis: '65%',
+            basis: '60%',
           },
         ],
       },
@@ -622,7 +622,7 @@ export const testConfigNewFire: Config[] = [
     showStyle: {
       size: 'width:440px;height:280px;',
       version: '保德',
-      position: 'top:360px;left:0;',
+      position: 'top:350px;left:0;',
     },
   },
   {
@@ -795,7 +795,7 @@ export const testConfigNewFire: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:980px;height:300px;',
+      size: 'width:980px;height:280px;',
       version: '保德',
       position: 'bottom:8px;left:470px',
       headerPosition: 'centerBottom',
@@ -906,9 +906,9 @@ export const testConfigNewFire: Config[] = [
       to: '',
     },
     showStyle: {
-      size: 'width:980px;height:120px;',
+      size: 'width:800px;height:100px;',
       version: '保德',
-      position: 'top:85px;left:460px;',
+      position: 'top:60px;left:560px;',
       headerPosition: 'centerTop',
     },
   },
@@ -978,7 +978,7 @@ export const testConfigNewFire: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:440px;height: 290px;',
+      size: 'width:440px;height: 280px;',
       version: '保德',
       position: 'top:60px;right:0;',
     },