fix:通风系统抽屉控制面板改进

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue

@@ -1,18 +1,52 @@
 <template>
+  <!-- 分区部分 -->
+  <div>
+    <div class="light-area">
+      <div class="light-area-tab"></div>
+      <span class="light-area-text"> 设备分区 </span>
+    </div>
+    <!-- 照明区域按钮部分 -->
+    <div class="area">
+      <template v-if="!showAllButtonsArea">
+        <button
+          v-for="(button, index) in limitedButtons1"
+          :key="index"
+          :class="{ btn: true, selected: button.selected }"
+          @click="changeArea(button)">
+          {{ button.name }}
+        </button>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
+        </div>
+      </template>
+      <template v-else>
+        <button
+          v-for="(button, index) in props.treeData"
+          :key="index"
+          :class="{ btn: true, selected: button.selected }"
+          @click="changeArea(button)">
+          {{ button.name }}
+        </button>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
+        </div>
+      </template>
+    </div>
+  </div>
   <!-- 设备部分 -->
   <div>
     <div class="circuit-area">
       <div class="circuit-tab"></div>
       <span class="circuit-text">{{ props.type }}</span>
       <div class="btn2">
-        <a-badge :offset="[-10, 2]" :count="lockList.length">
+        <!-- <a-badge :offset="[-10, 2]" :count="lockList.length">
           <button
             class="openPlan"
             :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
             @click="togglePlan2">
             {{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
           </button>
-        </a-badge>
+        </a-badge> -->
         <a-switch
           v-model:checked="selectAllCheckbox"
           :disabled="singleSelection"
@@ -35,9 +69,9 @@
           :class="{ btn: true, selected: button.selected }"
           class="zmhlbtn"
           @click="changeLine(button)">
-          <div v-if="button.lockStatus" class="btn-back">
+          <!-- <div v-if="button.lockStatus" class="btn-back">
             <stop-outlined />
-          </div>
+          </div> -->
           {{ button.name }}
         </button>
         <div style="margin-top: 10px">
@@ -147,9 +181,13 @@
             <div class="btn-item">
               <div class="left">控制模式</div>
               <div class="right">
-                <span>{{ item.stateBefore.autoStatus.label.replace('模式', '') }}</span>
+                <span>{{
+                  item.stateBefore.autoStatus.label ? item.stateBefore.autoStatus.label : '--'
+                }}</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>{{ item.stateAfter.autoStatus.label.replace('模式', '') }}</span></div
+                <span>{{
+                  item.stateAfter.autoStatus.label ? item.stateAfter.autoStatus.label : '--'
+                }}</span></div
               >
             </div>
             <div class="btn-item">
@@ -297,6 +335,29 @@
    */
   const emit = defineEmits(['reset', 'reload', 'resetAll']);
 
+  // 设备分区业务 =====================================================================
+
+  // 按钮区展开与收起状态
+  const showAllButtonsArea = ref(false);
+  // 被选中的分区  默认为1 用于选中样式渲染
+  const selectedButton = ref<string | undefined>('1');
+
+  // 分区切换
+  const changeArea = (button: any) => {
+    // 当前选中按钮
+    selectedButton.value = button.id;
+    // 设置当前选中的回路
+    buttons2.value = button.childList;
+    // 重置按钮状态
+    emit('reset');
+    // 设置选中按钮状态
+    button.selected = true;
+    // 当前选中回路 - 置空
+    resetMode();
+  };
+  // 默认最多展示8个按钮
+  const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
+
   // 照明回路业务 ======================================================================
 
   // 开关启用/禁用状态
@@ -374,7 +435,6 @@
   const selectAllCheckbox = ref(false);
   // 全选切换事件（switch）
   const toggleAllSelection = () => {
-    let arr = [];
     // 全选
     if (selectAllCheckbox.value) {
       buttons2.value.forEach((item: any, index: number) => {
@@ -383,7 +443,6 @@
           thisButton2.value = item;
         }
         item.selected = true;
-        arr.push(item.id);
       });
       // 全不选
     } else {
@@ -618,6 +677,8 @@
   const refresh = (reload = false) => {
     // 关闭执行弹窗
     executeVisible.value = false;
+    // 设置当前选中的序列
+    selectedButton.value = '1';
     // 重置选中样式 和 按钮选中状态
     emit('reset');
     // 如果是中途刷新，需要将所有修改改回

hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/index.vue

@@ -139,6 +139,7 @@
         <a-tab-pane key="1" tab="控制面板">
           <fanControl
             ref="tabs1Ref"
+            @reset="reset"
             @reset-all="resetDrawer"
             :treeData="treeData"
             :type="`排风扇`" />
@@ -200,6 +201,7 @@
         <a-tab-pane key="1" tab="控制面板">
           <fanControl
             ref="tabs1Ref"
+            @reset="reset"
             @reset-all="resetDrawer"
             :treeData="treeData"
             :type="`风幕机`" />
@@ -260,6 +262,7 @@
         <a-tab-pane key="1" tab="控制面板">
           <fanControl
             ref="tabs1Ref"
+            @reset="reset"
             @reset-all="resetDrawer"
             :treeData="treeData"
             :type="`电动窗`" />
@@ -374,8 +377,18 @@
   // 刷新当前的树形结构数据
   const reload = () => {
     http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
-      const data = res.data;
+      const data = res.data[0].childList;
-      treeData.value = data[0].childList;
+      // 默认选中第一个分区
+      data.forEach((item: any, index: number) => {
+        if (index === 0) {
+          item.selected = true;
+        } else {
+          item.selected = false;
+        }
+      });
+      treeData.value = data;
+      // 楼层信息
+      // selectIndex.value = index;
       // 反向刷新
       try {
         tabs1Ref.value.setButtons2(treeData.value[0].childList);
@@ -398,8 +411,16 @@
       url = ventilating.getTree3;
     }
     http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
-      const data = res.data;
+      const data = res.data[0].childList;
-      treeData.value = data[0].childList;
+      // 默认选中第一个分区
+      data.forEach((item: any, index: number) => {
+        if (index === 0) {
+          item.selected = true;
+        } else {
+          item.selected = false;
+        }
+      });
+      treeData.value = data;
       selectIndex.value = index;
     });
   };
@@ -442,6 +463,15 @@
       }
     });
   };
+  // 重置分区树所有当前选项
+  const reset = () => {
+    treeData.value.forEach((item: any) => {
+      item.selected = false;
+      item.childList.forEach((i: any) => {
+        i.selected = false;
+      });
+    });
+  };
   // 温度数组
   const sensorData = ref<any>([]);
   // 湿度数组