[Fix 0000]蓝色版本首页样式优化

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

@@ -31,202 +31,202 @@
 </template>
 
 <script setup lang="ts">
-  import ContentFireNew from './content-FireNew.vue';
-  import { 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 { 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;
-  }
-
-  :deep(.zxm-switch-handle::before) {
-    background-color: rgb(33 179 247) !important;
+    --image-Select: url('@/assets/images/fireNew/5.png');
   }
-
-  :deep(.zxm-select-selection-item) {
-    color: #fff !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';
+    }
   }
 
-  .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;
+  .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/ModuleFireNewDual.vue

@@ -47,232 +47,232 @@
 </template>
 
 <script setup lang="ts">
-  import Content from './content-FireNew.vue';
-  import { defineEmits, computed, ref, watch } from 'vue';
-  import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../../hooks/useInit';
+import Content from './content-FireNew.vue';
+import { defineEmits, computed, ref, watch } from 'vue';
+import { ModuleData, ShowStyle } from '../../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../../hooks/useInit';
 
-  const props = defineProps<{
-    moduleDataA: ModuleData;
-    moduleNameA: string;
-    deviceTypeA: string;
-    moduleDataB: ModuleData;
-    moduleNameB: string;
-    deviceTypeB: string;
-    showStyle: ShowStyle;
-    visible: boolean;
-    data: any;
-  }>();
-  const emit = defineEmits(['close', 'select']);
+const props = defineProps<{
+  moduleDataA: ModuleData;
+  moduleNameA: string;
+  deviceTypeA: string;
+  moduleDataB: ModuleData;
+  moduleNameB: string;
+  deviceTypeB: string;
+  showStyle: ShowStyle;
+  visible: boolean;
+  data: any;
+}>();
+const emit = defineEmits(['close', 'select']);
 
-  const index = ref(0);
+const index = ref(0);
 
-  const headerA = props.moduleDataA.header;
-  const headerB = props.moduleDataB.header;
+const headerA = props.moduleDataA.header;
+const headerB = props.moduleDataB.header;
 
-  const {
-    selectedDeviceID: selectedDeviceIDA,
-    selectedDevice: selectedDeviceA,
-    options: optionsA,
-    init: initA,
-  } = useInitModule(props.deviceTypeA, props.moduleDataA);
-  const {
-    selectedDeviceID: selectedDeviceIDB,
-    selectedDevice: selectedDeviceB,
-    options: optionsB,
-    init: initB,
-  } = useInitModule(props.deviceTypeB, props.moduleDataB);
+const {
+  selectedDeviceID: selectedDeviceIDA,
+  selectedDevice: selectedDeviceA,
+  options: optionsA,
+  init: initA,
+} = useInitModule(props.deviceTypeA, props.moduleDataA);
+const {
+  selectedDeviceID: selectedDeviceIDB,
+  selectedDevice: selectedDeviceB,
+  options: optionsB,
+  init: initB,
+} = useInitModule(props.deviceTypeB, props.moduleDataB);
 
-  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组件
-  const daneClass = computed(() => {
-    const headerPosition = props.showStyle.headerPosition;
-    const size = props.showStyle.size;
-    const [_, width] = size.match(/width:([0-9]+)px/) || [];
-    // if (position.includes('bottom') || parseInt(width) > 800) {
-    //   return 'dane-w';
-    // }
-    // if (position.includes('left')) {
-    //   return 'dane-m';
-    // }
-    // if (position.includes('right')) {
-    //   return 'dane-m';
-    // }
-    if (headerPosition === 'centerBottom') {
-      return 'center-Bottom';
-    }
-    if (headerPosition === 'centerTop') {
-      return 'center-Top';
-    }
-    return 'dane-m'; // 默认返回顶部模块
-  });
-
-  //切换时间选项
-  // function onChange(value, dateString) {
-  //   console.log('Selected Time: ', value);
-  //   console.log('Formatted Selected Time: ', dateString);
+// 根据配置里的定位判断应该使用哪个module组件
+const daneClass = computed(() => {
+  const headerPosition = props.showStyle.headerPosition;
+  const size = props.showStyle.size;
+  const [_, width] = size.match(/width:([0-9]+)px/) || [];
+  // if (position.includes('bottom') || parseInt(width) > 800) {
+  //   return 'dane-w';
   // }
-  // function onOk(val) {
-  //   console.log('onOk: ', val);
+  // if (position.includes('left')) {
+  //   return 'dane-m';
   // }
-
-  //下拉框选项切换
-  function selectHandlerA(id) {
-    selectedDeviceIDA.value = id;
-    emit('select', selectedDeviceA);
+  // if (position.includes('right')) {
+  //   return 'dane-m';
+  // }
+  if (headerPosition === 'centerBottom') {
+    return 'center-Bottom';
   }
-  function selectHandlerB(id) {
-    selectedDeviceIDB.value = id;
-    emit('select', selectedDeviceB);
+  if (headerPosition === 'centerTop') {
+    return 'center-Top';
   }
+  return 'dane-m'; // 默认返回顶部模块
+});
 
-  watch(
-    () => props.data,
-    (d) => {
-      initA(d);
-      initB(d);
-      selectedDeviceIDA.value = optionsA.value[0]?.value;
-      selectedDeviceIDB.value = optionsB.value[0]?.value;
-    },
-    {
-      immediate: true,
-    }
-  );
-</script>
+//切换时间选项
+// function onChange(value, dateString) {
+//   console.log('Selected Time: ', value);
+//   console.log('Formatted Selected Time: ', dateString);
+// }
+// function onOk(val) {
+//   console.log('onOk: ', val);
+// }
 
-<style scoped lang="less">
-  @import '/@/design/theme.less';
+//下拉框选项切换
+function selectHandlerA(id) {
+  selectedDeviceIDA.value = id;
+  emit('select', selectedDeviceA);
+}
+function selectHandlerB(id) {
+  selectedDeviceIDB.value = id;
+  emit('select', selectedDeviceB);
+}
 
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('/@/assets/font/douyuFont.otf');
-  }
-  @{theme-deepblue} {
-    .dane-bd {
-      --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
-      --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
-    }
+watch(
+  () => props.data,
+  (d) => {
+    initA(d);
+    initB(d);
+    selectedDeviceIDA.value = optionsA.value[0]?.value;
+    selectedDeviceIDB.value = optionsB.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-CenterBottom: url('@/assets/images/fireNew/4-2.png');
     --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
-    position: absolute;
+  }
+}
+
+.dane-bd {
+  --image-CenterBottom: url('@/assets/images/fireNew/4-2.png');
+  --image-CenterTop: url('@/assets/images/fireNew/3-1.png');
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% auto;
+  z-index: 2;
+  .dane-title {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: space-between;
     width: 100%;
-    height: 100%;
-    background-repeat: no-repeat;
-    background-position: center top;
-    background-size: 100% auto;
-    z-index: 2;
-    .dane-title {
+    height: 34px;
+    padding: 20px 173px 15px 133px;
+    .common-navL {
       display: flex;
-      box-sizing: border-box;
+      position: relative;
       align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 34px;
-      padding: 20px 173px 15px 133px;
-      .common-navL {
+      color: #fff;
+      font-size: 15px;
+      font-family: 'douyuFont';
+
+      .common-navR {
         display: flex;
-        position: relative;
         align-items: center;
-        color: #fff;
-        font-size: 15px;
-        font-family: 'douyuFont';
-
-        .common-navR {
-          display: flex;
-          align-items: center;
-          justify-content: flex-end;
-          .common-navR-select {
-            background: url('@/assets/images/fireNew/4-1.png') no-repeat;
-            background-size: 100% 100%;
-          }
+        justify-content: flex-end;
+        .common-navR-select {
+          background: url('@/assets/images/fireNew/4-1.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
     }
-    .dane-content {
-      height: calc(100% - 34px);
-      box-sizing: border-box;
-      border-top: none;
-    }
-  }
-  .center-Top {
-    background: var(--image-CenterTop) no-repeat;
-    background-size: 100% 100%;
   }
-  .center-Bottom {
-    background: var(--image-CenterBottom) no-repeat;
-    background-size: 100% 100%;
-  }
-  .dane-m {
-    background-image: var(--image-MidBottom);
-    background-size: 100% 100%;
+  .dane-content {
+    height: calc(100% - 34px);
+    box-sizing: border-box;
+    border-top: none;
   }
+}
+.center-Top {
+  background: var(--image-CenterTop) no-repeat;
+  background-size: 100% 100%;
+}
+.center-Bottom {
+  background: var(--image-CenterBottom) no-repeat;
+  background-size: 100% 100%;
+}
+.dane-m {
+  background-image: var(--image-MidBottom);
+  background-size: 100% 100%;
+}
 
-  .deactived {
-    cursor: pointer;
-    color: #8087a1;
-  }
+.deactived {
+  cursor: pointer;
+  color: #ddd;
+}
 
-  :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-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-selection-placeholder) {
+  color: #8087a1 !important;
+}
 
-  :deep(.zxm-select-arrow) {
-    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) {
+  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-input > input) {
+  color: #a1dff8 !important;
+  text-align: center !important;
+}
 
-  :deep(.zxm-picker-separator) {
-    color: #a1dff8 !important;
-  }
+:deep(.zxm-picker-separator) {
+  color: #a1dff8 !important;
+}
 
-  :deep(.zxm-picker-active-bar) {
-    display: none !important;
-  }
+:deep(.zxm-picker-active-bar) {
+  display: none !important;
+}
 
-  :deep(.zxm-picker-suffix) {
-    color: #a1dff8 !important;
-  }
+:deep(.zxm-picker-suffix) {
+  color: #a1dff8 !important;
+}
 
-  :deep(.zxm-switch) {
-    min-width: 48px !important;
-  }
+:deep(.zxm-switch) {
+  min-width: 48px !important;
+}
 
-  :deep(.zxm-switch-checked) {
-    background-color: rgb(15 64 89) !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-switch-handle::before) {
+  background-color: rgb(33 179 247) !important;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 </style>

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

@@ -100,11 +100,15 @@ function menuItemClick(index) {
   menuItemActive.value = index;
   isShowMenuItem.value = false;
 }
+// 2D/3D 微前端前缀会被路由守卫互相替换，匹配时统一只比较前缀之后的路径
+function normalizeMenuPath(path?: string) {
+  return (path || '').replace(/^\/micro-vent-[23]dModal/, '').replace(/\/+$/, '');
+}
 function updateActiveState(path: string) {
-  const currentPath = route.path;
+  const currentPath = normalizeMenuPath(path);
   menuList.value.forEach((menu, index) => {
     // 处理有直接链接的菜单项
-    if (menu.targatUrl === currentPath) {
+    if (menu.targatUrl && normalizeMenuPath(menu.targatUrl) === currentPath) {
       activeIndex.value = index;
       isShowMenuItem.value = false;
       return;

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

@@ -358,8 +358,8 @@ defineEmits(['click']);
 }
 .mini-board_T:nth-child(1) {
   .mini-board__value_T {
-    width: 50px;
-    height: 50px;
+    width: 60px;
+    height: 60px;
     margin: auto;
     background: url('@/assets/images/home-warn/7-2.png') no-repeat;
     background-size: 100% 100%;
@@ -367,8 +367,8 @@ defineEmits(['click']);
 }
 .mini-board_T:nth-child(2) {
   .mini-board__value_T {
-    width: 50px;
-    height: 50px;
+    width: 60px;
+    height: 60px;
     margin: auto;
     background: url('@/assets/images/home-warn/7-1.png') no-repeat;
     background-size: 100% 100%;

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

@@ -48,7 +48,7 @@ let props = defineProps({
   --image-model_fire-container_A: url('@/assets/images/home-warn/5-1.png');
   --image-model_fire-container_B: url('@/assets/images/home-warn/5-2.png');
   height: 100%;
-  padding-left: 10px;
+  padding-left: 20px;
   padding-top: 10px;
   box-sizing: border-box;
 

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

@@ -84,7 +84,7 @@ watch(
     }
 
     .risk-value {
-      flex: 1;
+      flex: 0;
       margin-right: 10px;
       color: #ffffff;
       text-align: right;
@@ -95,7 +95,7 @@ watch(
       margin-left: 20px;
       flex: 3;
       height: 8px;
-      margin: 0 10px;
+      margin: 0 6px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 4px;
       min-width: 80px;

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

@@ -9,7 +9,7 @@
         style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
         @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
       >
-        <!-- <EyeFilled /> -->
+        <EyeFilled />
       </a-button>
     </div>
     <div class="top-bg">
@@ -21,8 +21,8 @@
     </div>
     <!-- <ModuleDustNew -->
     <ModuleDustNew
-      v-for="cfg in configs"
-      :key="cfg.deviceType"
+      v-for="(cfg, index) in configs"
+      :key="cfg.deviceType + index"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
@@ -33,177 +33,162 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  import ModuleDustNew from './components/ModuleDustNew.vue';
-  import NewNav from './components/NewNavFire.vue';
-  import NavCard from './components/NavCard.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import SubApp from '/@/components/vent/micro/createSubApp.vue';
-  import { getDisHome } from '../configurable.api';
-  // import { EyeFilled } from '@ant-design/icons-vue';
-  import { testConfigNewDust } from '../configurable.data.New';
-  // const cfgs = computed(() =>
-  //   configs.value.filter((_, index) => {
-  //     return index !== 4 && index !== 3;
-  //   })
-  // );
-  // const cfgA = computed<any>(() =>
-  //   configs.value.find((_, index) => {
-  //     return index === 3;
-  //   })
-  // );
-  // const cfgB = computed<any>(() =>
-  //   configs.value.find((_, index) => {
-  //     return index === 4;
-  //   })
-  // );
-  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
-  let interval: number | undefined;
-  onMounted(() => {
-    fetchConfigs('New_dust').then(() => {
-      configs.value = testConfigNewDust;
-      getDisHome({
-        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-      }).then(updateData);
-    });
-    // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
-    interval = setInterval(() => {
-      getDisHome({
-        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-      }).then(updateData);
-    }, 2000);
-  });
+import { onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+import ModuleDustNew from './components/ModuleDustNew.vue';
+import NewNav from './components/NewNavFire.vue';
+import NavCard from './components/NavCard.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import SubApp from '/@/components/vent/micro/createSubApp.vue';
+import { getDisHome } from '../configurable.api';
+import { EyeFilled } from '@ant-design/icons-vue';
+import { testConfigNewDust } from '../configurable.data.New';
+// const cfgs = computed(() =>
+//   configs.value.filter((_, index) => {
+//     return index !== 4 && index !== 3;
+//   })
+// );
+// const cfgA = computed<any>(() =>
+//   configs.value.find((_, index) => {
+//     return index === 3;
+//   })
+// );
+// const cfgB = computed<any>(() =>
+//   configs.value.find((_, index) => {
+//     return index === 4;
+//   })
+// );
+const { configs, devicesTypes } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
+let interval: number | undefined;
 
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+function fetchData() {
+  getDisHome({
+    dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+  })
+    .then(updateData)
+    .catch((e) => console.error('粉尘首页数据获取失败：', e));
+}
 
-  function redirectTo(url) {
-    window.open(url);
-  }
+onMounted(() => {
+  // 首页结构与数据渲染使用本地配置，不再等待配置接口，避免接口异常导致首页空白
+  configs.value = testConfigNewDust;
+  fetchData();
+  // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
+  interval = setInterval(fetchData, 2000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+
+function redirectTo(url) {
+  window.open(url);
+}
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
-    }
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
+@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-    .top-bg {
-      width: 100%;
-      height: 56px;
-      background: var(--image-modal-top) no-repeat center;
-      position: absolute;
-      z-index: 1;
-
-      .main-title {
-        height: 56px;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+  }
+}
 
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
 
-    .left-t {
-      position: absolute;
-      width: 28%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-      z-index: 0;
-    }
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    // 横幅原图 790×74，按顶栏高度等比缩放，避免上下各被裁掉 9px
+    background: var(--image-modal-top) no-repeat center;
+    background-size: auto 100%;
+    position: absolute;
+    z-index: 1;
+  }
 
-    .right-t {
-      position: absolute;
-      width: 172%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-      z-index: 0;
-    }
+  .left-t {
+    position: absolute;
+    width: 28%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.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;
-    }
+  .right-t {
+    position: absolute;
+    width: 172%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
 
-    .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-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-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-    }
+  .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;
+  }
 
-    .nav-cards {
-      position: absolute;
-      left: 50%;
-      top: 60px;
-      transform: translate(-50%, 0);
-      width: 523px;
-      height: 89px;
-    }
+  .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;
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, 0);
+    width: 523px;
+    height: 89px;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

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

@@ -9,7 +9,7 @@
         style="width: 34px; height: 34px; position: absolute; right: 5px; bottom: 5px; z-index: 5"
         @click="redirectTo('/micro-vent-3dModal/dashboard/analysis?type=model3D&deviceType=model3D')"
       >
-        <!-- <EyeFilled /> -->
+        <EyeFilled />
       </a-button>
     </div>
     <div class="top-bg">
@@ -18,8 +18,8 @@
       <NewNav :Title="mainTitle" />
     </div>
     <ModuleFireNew
-      v-for="cfg in cfgs"
-      :key="cfg.deviceType"
+      v-for="(cfg, index) in cfgs"
+      :key="cfg.deviceType + index"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
@@ -61,7 +61,7 @@ import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
 // import { BDFireMock } from './mock';
 import { getDisHome } from '../configurable.api';
-// import { EyeFilled } from '@ant-design/icons-vue';
+import { EyeFilled } from '@ant-design/icons-vue';
 import { testConfigNewFire } from '../configurable.data.New';
 const cfgs = computed(() =>
   configs.value.filter((_, index) => {
@@ -83,9 +83,18 @@ const cfgTop = computed<any>(() =>
     return index === 5;
   })
 );
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+const { configs, devicesTypes } = useInitConfigs();
 const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
 let interval: number | undefined;
+
+function fetchData() {
+  getDisHome({
+    dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+  })
+    .then(updateData)
+    .catch((e) => console.error('火灾首页数据获取失败：', e));
+}
+
 onMounted(() => {
   // fetchConfigs('New_fire').then(() => {
   //   configs.value = testConfigNewFire;
@@ -94,18 +103,11 @@ onMounted(() => {
   // setInterval(() => {
   //   Promise.resolve(BDFireMock).then(updateData);
   // }, 2000);
-  fetchConfigs('New_fire').then(() => {
-    configs.value = testConfigNewFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  });
+  // 首页结构与数据渲染使用本地配置，不再等待配置接口，避免接口异常导致首页空白
+  configs.value = testConfigNewFire;
+  fetchData();
   // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
-  interval = setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
+  interval = setInterval(fetchData, 2000);
 });
 
 onUnmounted(() => {
@@ -141,26 +143,11 @@ function redirectTo(url) {
   .top-bg {
     width: 100%;
     height: 56px;
+    // 横幅原图 790×74，按顶栏高度等比缩放，避免上下各被裁掉 9px
     background: var(--image-modal-top) no-repeat center;
+    background-size: auto 100%;
     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;

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

@@ -13,8 +13,8 @@
     <div class="right-t"> </div>
     <template v-if="isNew">
       <ModuleNew
-        v-for="cfg in configs"
-        :key="cfg.deviceType"
+        v-for="(cfg, index) in configs"
+        :key="cfg.deviceType + index"
         :show-style="cfg.showStyle"
         :module-data="cfg.moduleData"
         :module-name="cfg.moduleName"
@@ -33,26 +33,28 @@ import NewNav from './components/originalNew/NewNavFire.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleNew from './components/ModuleNew.vue';
 // import { useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
 import { getHomeData } from '../configurable.api';
 // import { useRoute } from 'vue-router';
 import { testConfigVentNew } from '../configurable.data';
-const { configs, isNew, fetchConfigs } = useInitConfigs();
+const { configs, isNew } = useInitConfigs();
 const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('一通三防智能管控平台');
 // const route = useRoute();
 let interval: number | undefined;
 
+function fetchData() {
+  getHomeData({})
+    .then(updateData)
+    .catch((e) => console.error('首页数据获取失败：', e));
+}
+
 onMounted(() => {
-  fetchConfigs('vent').then(() => {
-    configs.value = testConfigVentNew;
-    updateEnhancedConfigs(configs.value);
+  // 首页结构与数据渲染使用本地配置，不再等待配置接口，避免接口异常导致首页空白
+  configs.value = testConfigVentNew;
+  updateEnhancedConfigs(configs.value);
 
-    getHomeData({}).then(updateData);
-  });
+  fetchData();
   // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
-  interval = setInterval(() => {
-    getHomeData({}).then(updateData);
-  }, 60000);
+  interval = setInterval(fetchData, 60000);
 });
 
 onUnmounted(() => {

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

@@ -13,8 +13,8 @@
       <NavVentCard />
     </div>
     <ModuleDustNew
-      v-for="cfg in configs"
-      :key="cfg.deviceType"
+      v-for="(cfg, index) in configs"
+      :key="cfg.deviceType + index"
       :show-style="cfg.showStyle"
       :module-data="cfg.moduleData"
       :module-name="cfg.moduleName"
@@ -25,160 +25,145 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, onUnmounted } from 'vue';
-  // import { CaretDownOutlined } from '@ant-design/icons-vue';
-  // import MonitorCenter from './components/MonitorCenter.vue';
-  import NewNav from './components/NewNavFire.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import ModuleDustNew from './components/ModuleDustNew.vue';
-  import NavVentCard from './components/NavVentCard.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { getHomeData } from '../configurable.api';
-  // import { useRoute } from 'vue-router';
-  import { testConfigVentNew } from '../configurable.data';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
-  // const route = useRoute();
-  let interval: number | undefined;
-
-  onMounted(() => {
-    // fetchConfigs('vent_new').then(() => {
-    configs.value = testConfigVentNew;
-    // updateEnhancedConfigs(configs.value);
-
-    getHomeData({}).then(updateData);
-    // });
-    // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
-    interval = setInterval(() => {
-      getHomeData({}).then(updateData);
-    }, 60000);
-  });
-
-  onUnmounted(() => {
-    clearInterval(interval);
-  });
+import { onMounted, onUnmounted } from 'vue';
+// import { CaretDownOutlined } from '@ant-design/icons-vue';
+// import MonitorCenter from './components/MonitorCenter.vue';
+import NewNav from './components/NewNavFire.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import ModuleDustNew from './components/ModuleDustNew.vue';
+import NavVentCard from './components/NavVentCard.vue';
+// import { useRoute } from 'vue-router';
+import SubApp from '/@/components/vent/micro/createSubApp.vue';
+import { getHomeData } from '../configurable.api';
+// import { useRoute } from 'vue-router';
+import { testConfigVentNew } from '../configurable.data';
+const { configs } = useInitConfigs();
+const { mainTitle, data, updateData } = useInitPage('一通三防智能管控平台');
+// const route = useRoute();
+let interval: number | undefined;
+
+function fetchData() {
+  getHomeData({})
+    .then(updateData)
+    .catch((e) => console.error('首页数据获取失败：', e));
+}
+
+onMounted(() => {
+  configs.value = testConfigVentNew;
+  // updateEnhancedConfigs(configs.value);
+
+  fetchData();
+  // [perf-base-v1] 定时器句柄赋值给 interval，修复卸载时清理无效的泄漏
+  interval = setInterval(fetchData, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-
-  @font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-  }
+@import '/@/design/theme.less';
 
-  @{theme-deepblue} {
-    .company-home {
-      --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
-    }
-  }
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
 
+@{theme-deepblue} {
   .company-home {
     --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
-
-    .top-bg {
-      width: 100%;
-      height: 56px;
-      background: var(--image-modal-top) no-repeat center;
-      position: absolute;
-      z-index: 1;
-
-      .main-title {
-        height: 56px;
-        font-family: 'douyuFont';
-        font-size: 20px;
-        letter-spacing: 2px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
+  }
+}
 
-      .top-nav {
-        position: absolute;
-        top: 0;
-        width: 880px;
-        height: 100%;
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
+.company-home {
+  --image-modal-top: url('@/assets/images/vent/homeNew/home-new-bg.png');
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
 
-    .left-t {
-      position: absolute;
-      width: 28%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-      z-index: 0;
-    }
+  .top-bg {
+    width: 100%;
+    height: 56px;
+    // 横幅原图 790×74，按顶栏高度等比缩放，避免上下各被裁掉 9px
+    background: var(--image-modal-top) no-repeat center;
+    background-size: auto 100%;
+    position: absolute;
+    z-index: 1;
+  }
 
-    .right-t {
-      position: absolute;
-      width: 172%;
-      height: 100%;
-      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-      z-index: 0;
-    }
+  .left-t {
+    position: absolute;
+    width: 28%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/leftContent.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;
-    }
+  .right-t {
+    position: absolute;
+    width: 172%;
+    height: 100%;
+    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+    z-index: 0;
+  }
 
-    .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-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-trigger-button {
-      color: @vent-font-color;
-      background-image: @vent-configurable-dropdown;
-      border: none;
-      border-bottom: 2px solid @vent-configurable-home-light-border;
-    }
+  .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;
+  }
 
-    .nav-cards {
-      position: absolute;
-      left: 50%;
-      top: 60px;
-      transform: translate(-50%, 0);
-      width: 661px;
-      height: 89px;
-    }
+  .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;
+  .nav-cards {
+    position: absolute;
+    left: 50%;
+    top: 60px;
+    transform: translate(-50%, 0);
+    width: 661px;
+    height: 89px;
   }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
 </style>

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

@@ -16,12 +16,12 @@
       />
     </template>
     <div class="center-area">
-      <CenterAreaWarn :echartData="paramData"></CenterAreaWarn>
+      <CenterAreaWarn :echartData="paramData" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import ModuleDustNew from './components/ModuleWarnMonitor.vue';
 import CenterAreaWarn from './components/center-area-warn.vue';
@@ -31,27 +31,32 @@ import { testConfigWarnMonitor } from '../configurable.data';
 import NewNav from './components/NewNavFire.vue';
 import { getTotal, getDisasterProportion } from '../configurable.api';
 const { title = '智能通风管控系统' } = useGlobSetting();
-const { configs, fetchConfigs } = useInitConfigs();
+const { configs } = useInitConfigs();
 const { data, updateData } = useInitPage(title);
 const route = useRoute();
 const paramData = reactive<any>({});
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
+let unmounted = false;
 function getMonitor(flag = false) {
   timer = setTimeout(
     async () => {
-      getTotal({}).then(updateData);
-      getCenterList();
-      if (timer) {
-        timer = null;
+      try {
+        // 一个周期只请求一次 getTotal，返回的数据同时提供给各模块与中间区域
+        const res = await getTotal({});
+        updateData(res);
+        await getCenterList(res);
+      } catch (e) {
+        console.error('预警监测数据获取失败：', e);
       }
+      if (unmounted) return;
       getMonitor();
     },
     flag ? 0 : 20000
   );
 }
-async function getCenterList() {
-  let res = await getTotal({});
+async function getCenterList(res) {
+  if (!res || !res.info || !res.info.sysInfo) return;
   paramData.fire = res.info.sysInfo.fireS.maxLevel;
   paramData.tf = res.info.sysInfo.ventS.maxLevel;
   paramData.ws = res.info.sysInfo.gasS.maxLevel;
@@ -77,17 +82,16 @@ async function getCenterList() {
   ];
 }
 onMounted(() => {
-  fetchConfigs('fusion-warn-green').then(() => {
-    configs.value = testConfigWarnMonitor;
-    // updateEnhancedConfigs(configs.value);
-    // Promise.resolve(BDFireMock).then(updateData);
-    getMonitor(true);
-  });
+  // 页面结构与数据渲染使用本地配置，不再等待配置接口，避免接口异常导致首页空白
+  configs.value = testConfigWarnMonitor;
+  // updateEnhancedConfigs(configs.value);
+  getMonitor(true);
 });
 
 onUnmounted(() => {
+  unmounted = true;
   clearTimeout(timer);
-  timer = undefined;
+  timer = null;
 });
 </script>
 <style lang="less" scoped>
@@ -98,7 +102,14 @@ onUnmounted(() => {
   src: url('/@/assets/font/douyuFont.otf');
 }
 
+@{theme-deepblue} {
+  .company-home {
+    --image-modal-top: url('@/assets/images/home-warn/1-1.png');
+  }
+}
+
 .company-home {
+  --image-modal-top: url('@/assets/images/home-warn/1-1.png');
   width: 100%;
   height: 100%;
   color: @white;
@@ -107,62 +118,11 @@ onUnmounted(() => {
   .top-bg {
     width: 100%;
     height: 56px;
-    background: url('@/assets/images/home-warn/1-1.png') no-repeat center;
+    // 横幅原图 790×74，按顶栏高度等比缩放，避免上下各被裁掉 9px
+    background: var(--image-modal-top) no-repeat center;
+    background-size: auto 100%;
     position: absolute;
     z-index: 1;
-    .main-title {
-      height: 56px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    .top-nav {
-      position: absolute;
-      top: 0;
-      width: 880px;
-      height: 100%;
-      display: flex;
-      justify-content: flex-start;
-    }
-  }
-  .main-container {
-    width: 100%;
-    height: 100%;
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
-      height: 100%;
-      padding: 15px;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
-
-    .bottom-area {
-      position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      box-sizing: border-box;
-    }
-
-    .right-area {
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      box-sizing: border-box;
-      overflow-y: auto;
-    }
   }
 
   .center-area {

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

@@ -298,10 +298,13 @@ function getIconPath1(item) {
   margin-left: 12px;
   background-size: 100% 100%;
 }
+.list__wrapper_H {
+  margin-top: 30px;
+}
 .list-item_H {
   align-items: center;
   text-align: center;
-  margin: 10px;
+  margin: 20px 14px;
   &:nth-child(2n) {
     height: 34px;
     background-repeat: no-repeat;

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

@@ -34,21 +34,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch } from 'vue';
 
 let props = defineProps({
   warnData: {
-    type: Object
-  }
-})
-
-
+    type: Object,
+  },
+});
 </script>
 
 <style lang="less" scoped>
 @import '/@/design/theme.less';
 
-@{theme-deepblue} {}
+@{theme-deepblue} {
+}
 
 .early-warn-monitor {
   --image-warn-title: url('@/assets/images/fireNew/warn-title.png');
@@ -67,7 +66,7 @@ let props = defineProps({
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 48px;
+    height: 28px;
     background: var(--image-warn-title) no-repeat;
     background-size: 100% 100%;
     margin-bottom: 10px;
@@ -86,7 +85,7 @@ let props = defineProps({
     justify-content: flex-start;
     flex-wrap: wrap;
     width: 100%;
-    height: calc(100% - 58px);
+    height: calc(100% - 36px);
     background: var(--image-warn-bg) no-repeat;
     background-size: 100% 100%;
   }
@@ -101,8 +100,8 @@ let props = defineProps({
 
   .item-bg {
     position: relative;
-    width: 160px;
-    height: 62px;
+    width: 114px;
+    height: 60px;
     text-align: center;
   }
 
@@ -158,7 +157,5 @@ let props = defineProps({
   .text-red {
     color: #ff3823;
   }
-
-
 }
 </style>