[Fix 0000]皮带三级防灭火页面优化

src/views/vent/deviceManager/comment/warningTabel/BaseModal1Leather.vue

@@ -10,8 +10,8 @@
             ref="warnFormRefs"
             :model="item"
             :schemas="deviceFormColumns"
-            layout="inline"
-            label-width="0"
+            layout="horizontal"
+            label-width="150px"
             :show-action-button-group="false"
           />
           <a-button type="link" normal @click="delWarnRow(idx)" :disabled="warnList.length <= 1">删除</a-button>
@@ -26,8 +26,8 @@
             ref="controlFormRefs"
             :model="item"
             :schemas="deviceControlColumns"
-            layout="inline"
-            label-width="0"
+            layout="horizontal"
+            label-width="120px"
             :show-action-button-group="false"
           />
           <a-button type="link" normal @click="delControlRow(idx, item)" :disabled="controlList.length <= 1">删除</a-button>

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -344,7 +344,7 @@ export const workFaceWarningFormSchemasLeather: FormSchema[] = [
 ];
 export const deviceFormColumns: FormSchema[] = [
   {
-    label: '设备类型',
+    label: '设备',
     field: 'deviceType',
     component: 'MTreeSelect',
     componentProps: {

src/views/vent/home/configurable/belt/belt-new.vue

@@ -1,7 +1,7 @@
 <!-- belt-new.vue -->
 <template>
   <div class="company-home">
-    <customHeader> 皮带巷智能管控 </customHeader>
+    <customHeader Type="deatil"> 皮带巷智能管控 </customHeader>
     <div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
       <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
       <div class="modal-css3d" id="css3dContainer"> </div>

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div class="border">
-      <customHeader>皮带巷三级防灭火系统</customHeader>
+      <customHeader Type="home">皮带巷三级防灭火系统</customHeader>
       <!-- <div class="test" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0"> -->
       <SubApp />
       <!-- </div> -->
@@ -24,7 +24,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltLaneFire } from './configurable.data';
@@ -76,9 +76,11 @@ function refresh() {
     updateEnhancedConfigs(configs.value);
   });
 }
+let timer = null;
 
 function initInterval() {
-  setInterval(() => {
+  if (timer) clearInterval(timer);
+  timer = setInterval(() => {
     refresh();
   }, 5000);
 }
@@ -86,6 +88,12 @@ onMounted(() => {
   refresh();
   initInterval();
 });
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+});
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/belt/components/Header.vue

@@ -41,47 +41,50 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch } from 'vue';
-  import { Config } from '../../../../deviceManager/configurationTable/types';
-  import { useInitModule } from '../../hooks/useInit';
-  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-  const props = defineProps<{
-    moduleData: Config['moduleData'];
-    deviceType: Config['deviceType'];
-    data: any;
-  }>();
+import { ref, watch } from 'vue';
+import { Config } from '../../../../deviceManager/configurationTable/types';
+import { useInitModule } from '../../hooks/useInit';
+import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+const props = defineProps<{
+  moduleData: Config['moduleData'];
+  deviceType: Config['deviceType'];
+  data: any;
+}>();
 
-  const emit = defineEmits(['select']);
+const emit = defineEmits(['select']);
 
-  const visible = ref(false);
-  const headerConfig = props.moduleData.header;
-  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-    props.deviceType,
-    props.moduleData
-  );
+const visible = ref(false);
+const headerConfig = props.moduleData.header;
+const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+  props.deviceType,
+  props.moduleData
+);
 
-  function selectHandler({ key }) {
-    selectedDeviceID.value = key;
+function selectHandler({ key }) {
+  selectedDeviceID.value = key;
+  emit('select', selectedDevice.value);
+}
+
+watch(
+  () => props.data,
+  (d) => {
+    console.log(options, '------');
+    init(d);
     emit('select', selectedDevice.value);
+  },
+  {
+    immediate: true,
   }
-
-  watch(
-    () => props.data,
-    (d) => {
-      init(d);
-      emit('select', selectedDevice.value);
-    },
-    {
-      immediate: true,
-    }
-  );
+);
 </script>
 <style scoped>
-  @import '/@/design/theme.less';
+@import '/@/design/theme.less';
 
 .costume-header {
   height: 30px;
+  width: 90%;
+  margin-left: 20px;
   background: url('@/assets/images/beltFire/yjkf/1-1.png') no-repeat;
   background-size: 100% 100%;
 }

src/views/vent/home/configurable/belt/components/customHeader-belt.vue

@@ -3,7 +3,7 @@
     <div class="vent-home-header">
       <div class="header-text"><slot></slot></div>
     </div>
-    <div class="container-title" v-if="fieldNames">
+    <div class="container-title" :class="[Type === 'home' ? 'title-home' : Type === 'detail' ? 'title-detail' : '']">
       <a-select
         class="title-select"
         ref="select"
@@ -22,135 +22,143 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import { Decoration5 } from '@kjgl77/datav-vue3';
-  export default defineComponent({
-    name: 'CustomHeader',
-    components: { Decoration5 },
-    props: {
-      optionValue: {
-        type: String,
-      },
-      fieldNames: {
-        type: Object,
-        default: () => {},
-      },
-      options: {
-        type: Array,
-        default: () => [],
-      },
+import { defineComponent, computed } from 'vue';
+import { Decoration5 } from '@kjgl77/datav-vue3';
+export default defineComponent({
+  name: 'CustomHeader',
+  components: { Decoration5 },
+  props: {
+    optionValue: {
+      type: String,
     },
-    emits: ['change'],
-    setup(props, { emit }) {
-      const currentTitleValue = computed(() => props.optionValue);
-      // 标题选择
-      function handleTitleChange(value) {
-        emit('change', value);
-      }
-      return {
-        currentTitleValue,
-        handleTitleChange,
-      };
+    fieldNames: {
+      type: Object,
+      default: () => {},
     },
-  });
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    Type: {
+      type: String,
+    },
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const currentTitleValue = computed(() => props.optionValue);
+    // 标题选择
+    function handleTitleChange(value) {
+      emit('change', value);
+    }
+    return {
+      currentTitleValue,
+      handleTitleChange,
+    };
+  },
+});
 </script>
 <style lang="less">
-  @import '/@/design/vent/modal.less';
+@import '/@/design/vent/modal.less';
 
-  .@{ventSpace}-select-dropdown.drop {
-    background-color: transparent !important;
+.@{ventSpace}-select-dropdown.drop {
+  background-color: transparent !important;
 
-    .@{ventSpace}-select-item-option-selected,
-    .@{ventSpace}-select-item-option-active {
+  .@{ventSpace}-select-item-option-selected,
+  .@{ventSpace}-select-item-option-active {
+    background-color: #ffffff33 !important;
+  }
+  .@{ventSpace}-select-item {
+    color: inherit;
+    &:hover {
       background-color: #ffffff33 !important;
     }
-    .@{ventSpace}-select-item {
+  }
+  .@{ventSpace}-select-tree {
+    .@{ventSpace}-select-tree-treenode {
       color: inherit;
-      &:hover {
-        background-color: #ffffff33 !important;
-      }
     }
-    .@{ventSpace}-select-tree {
-      .@{ventSpace}-select-tree-treenode {
-        color: inherit;
-      }
-      .@{ventSpace}-select-tree-switcher-icon {
-        color: inherit;
-      }
+    .@{ventSpace}-select-tree-switcher-icon {
+      color: inherit;
     }
   }
+}
 </style>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @ventSpace: zxm;
+@import '/@/design/theme.less';
+@ventSpace: zxm;
 
-  .vent-custom-header {
-    --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
-    --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
+.vent-custom-header {
+  --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
+  --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
+  width: 100%;
+  position: relative;
+  z-index: 9999;
+  pointer-events: none;
+  height: 60px;
+  .vent-home-header {
     width: 100%;
+    position: fixed;
+    top: 0;
+    background: var(--image-vent-header1) no-repeat;
+    height: 89px;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+    .header-icon {
+      margin-top: 45px;
+    }
+    .header-text {
+      position: fixed;
+      top: 5px;
+      color: #fff;
+      font-size: 32px;
+      font-family: 'ysbtFont';
+      background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
+      -webkit-background-clip: text;
+      color: transparent;
+    }
+  }
+  .container-title {
+    width: 380px;
+    height: 34px;
+    left: 20px;
+    // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+    background: var(--image-select-bg) no-repeat;
+    background-size: contain;
+    padding: 0 0 0 20px;
+    // padding: 0 0 0 180px;
+    font-size: 20px;
+    pointer-events: auto;
     position: relative;
     z-index: 9999;
-    pointer-events: none;
-    height: 60px;
-    .vent-home-header {
-      width: 100%;
-      position: fixed;
-      top: 0;
-      background: var(--image-vent-header1) no-repeat;
-      height: 89px;
-      background-size: contain;
-      display: flex;
-      justify-content: center;
-      .header-icon {
-        margin-top: 45px;
-      }
-      .header-text {
-        position: fixed;
-        top: 5px;
-        color: #fff;
-        font-size: 32px;
-        font-family: 'ysbtFont';
-        background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
-        -webkit-background-clip: text;
-        color: transparent;
-      }
+    .title-home {
+      top: -40px !important;
     }
-    .container-title {
-      width: 380px;
-      height: 34px;
-      top: 0px;
-      left: 20px;
-      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-      background: var(--image-select-bg) no-repeat;
-      background-size: contain;
-      padding: 0 0 0 20px;
-      // padding: 0 0 0 180px;
-      font-size: 20px;
-      pointer-events: auto;
-      position: relative;
-      z-index: 9999;
-      .title-select {
-        width: 340px;
-        position: absolute;
+    .title-detail {
+      top: 20px !important;
+    }
+    .title-select {
+      width: 340px;
+      position: absolute;
 
-        top: 0;
-        // left: 160px;
-      }
+      top: 0;
+      // left: 160px;
     }
   }
-  :deep(.zxm-select) {
-    width: 300px;
-    .@{ventSpace}-select-selector {
-      background: transparent !important;
-      border: none !important;
-      box-shadow: none !important;
-      .zxm-select-selection-item {
-        color: #fff !important;
-        font-size: 20px;
-      }
-    }
-    .@{ventSpace}-select-arrow {
+}
+:deep(.zxm-select) {
+  width: 300px;
+  .@{ventSpace}-select-selector {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    .zxm-select-selection-item {
       color: #fff !important;
+      font-size: 20px;
     }
   }
+  .@{ventSpace}-select-arrow {
+    color: #fff !important;
+  }
+}
 </style>

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

@@ -10,7 +10,7 @@ export const testBeltLaneFire: Config[] = [
         show: false,
         readFrom: '',
         selector: {
-          show: false,
+          show: true,
           value: '${beltName}',
         },
         slot: {

src/views/vent/home/configurable/components/belt/CustomTableBelt.vue

@@ -91,7 +91,7 @@ onMounted(() => {});
 
   .table__content_label {
     padding: 10px;
-    width: 400px;
+    width: 90%;
     height: 32px;
     display: flex;
     justify-content: space-around;
@@ -117,7 +117,7 @@ onMounted(() => {});
 
   .table__content_list {
     height: calc(100% - 32px);
-    width: 400px;
+    width: 90%;
     display: flex;
     flex-direction: column;
     padding: 5px 0;

src/views/vent/home/configurable/components/belt/VehicleCOAnalysis.vue

@@ -2,7 +2,7 @@
   <div class="monitor-container">
     <!-- 1. 车辆干扰排除 (Control Section) -->
 
-    <div class="section" v-for="item in filteredList('control')" :key="item.type">
+    <div class="section1" v-for="item in filteredList('control')" :key="item.type">
       <div class="control-row">
         <div class="tip">
           <div class="icon"></div>
@@ -159,36 +159,19 @@ onMounted(async () => {
 
 .monitor-container {
   width: 370px;
-  background: linear-gradient(180deg, #0d213f 0%, #0a162a 100%);
-  border: 1px solid #1a3b5d;
   color: #fafafa;
   font-family: 'Microsoft YaHei', sans-serif;
   padding: 10px 5px;
   position: relative;
 }
 
-.monitor-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(90deg, #00c6ff, #0072ff);
-}
-
 /* 通用区块样式 */
 .section {
-  margin-bottom: 15px;
+  margin-top: 10px;
   background: url('@/assets/images/beltFire/fireMonitor/2-1.png') no-repeat;
   background-size: 100% 100%;
 }
 
-.section:first-child {
-  margin: 0;
-  padding: 5px 0 5px 10px;
-}
-
 .section-title {
   background: url('@/assets/images/beltFire/fireMonitor/2-2.png') no-repeat;
   background-size: 35% 100%;
@@ -196,17 +179,14 @@ onMounted(async () => {
   color: #fafafa;
   font-weight: bold;
   font-style: italic;
-  margin-bottom: 8px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-  padding-top: 5px;
+  padding: 5px;
 }
 
 /* 1. 控制区样式 (开关) */
 .control-row {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   border-radius: 4px;
 }
 .tip {
@@ -360,7 +340,8 @@ onMounted(async () => {
 .analysis-list {
   font-size: 12px;
   line-height: 1.6;
-  padding: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 .item-style {
   border: 2px solid #1c75aa;