add:照明系统 抽屉功能tab2分页功能完善

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@@ -14,7 +14,7 @@
         <template v-if="!showAllButtonsArea">
           <button v-for="(button, index) in limitedButtons1" :key="index"
             :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
-            {{ button.regionName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
@@ -23,7 +23,7 @@
         <template v-else>
           <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
             @click="selectButton(button)">
-            {{ button.regionName }}
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
@@ -33,7 +33,7 @@
     </div>
     <!-- 照明回路部分 -->
     <div>
-      <div class="circuit-area" v-if="selectedButton">
+      <div class="circuit-area">
         <div class="circuit-tab"></div>
         <span class="circuit-text">照明回路</span>
         <div class="btn2">
@@ -50,12 +50,12 @@
           </button>
         </div>
       </div>
-      <div class="btnArea" v-if="selectedButton">
+      <div class="btnArea">
         <template v-if="!showAllButtons">
           <button v-for="(button, index) in limitedButtons2" :key="index"
             :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
-            <stop-outlined v-if="button.panel" />
-            {{ button.deviceName }}
+            <stop-outlined v-if="button.ctrlStatus" />
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
@@ -64,8 +64,8 @@
         <template v-else>
           <button v-for="(button, index) in buttons2" :key="index" 
           :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
-            <stop-outlined v-if="button.panel" />
-            {{ button.deviceName }}
+            <stop-outlined v-if="button.ctrlStatus" />
+            {{ button.name }}
           </button>
           <div style="margin-top: 10px">
             <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
@@ -218,6 +218,7 @@ import {
   UpOutlined,
   StopOutlined,
 } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
 // 请求
 import { http } from '/nerv-lib/util/http';
 import { lightingManage } from '/@/api/IlluminationInfo';
@@ -237,7 +238,7 @@ const setArea = () => {
   // 修改当前选中的分区
   selectedButton.value = props.nowArea
   // 设置当前显示的回路
-  buttons2.value = data.children
+  buttons2.value = data.childList
 }
 
 // 与父组件的交互  ===================================================================
@@ -254,13 +255,19 @@ const props = defineProps({
   }
 });
 // 向上传递修改选择样式
-const emit = defineEmits(['changeArea']);
+/** 
+ * @method changeArea 用于控制俯视图的选中状态
+ * @method reset 用于重置按钮区
+ */
+const emit = defineEmits(['changeArea','reset']);
 // 监听父组件选中的分区，并实时修改分区
 watch(() => props.nowArea, () => {
   setArea()
+  // 分区产生了切换， 线路的选中状态置空
+  handleButton.value = ''
 })
 
-// 照明区域 ==========================================================================
+// 照明区域业务 =======================================================================
 
 // 计划启用状态
 const isPlanEnabled = ref(false);
@@ -278,33 +285,36 @@ const selectButton = (button: any) => {
   console.log(button,'button')
   // 当前选中按钮
   selectedButton.value = button.id;
-  // 重置
   initMenu(1)
   button.selected = true
-  buttons2.value = button.children
-  // 反选area
+  buttons2.value = button.childList
   emit('changeArea', button.id);
+  handleButton.value = ''
 };
 // 默认最多展示8个按钮
 const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
 
-// 照明回路 ==========================================================================
+// 照明回路业务 ======================================================================
 
-// 最近交互过的按钮，用于禁用和启用
+// 最近交互过的按钮id，用于禁用和启用
 const handleButton = ref('');
 
 // 面板启用/禁用状态
 const isPlanEnabled2 = ref(true);
 // 面板启用/禁用切换事件
 const togglePlan2 = () => {
-  // 获取最近交互的按钮
+  // 如果未交互任何按钮
+  if (handleButton.value == '') {
+    return message.info('请选择照明回路');
+  }
+  // 获取最近交互过的按钮
   const btn = buttons2.value.find((button) => button.id === handleButton.value)
-  let panel = +(!btn.panel)
+  let panel = +(!btn.ctrlStatus)
   isLoading.value = true
-  http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => {
+  http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).then(res => {
     if (res.msg === 'success') {
       isPlanEnabled2.value = !isPlanEnabled2.value;
-      btn.panel = panel
+      btn.ctrlStatus = panel
       isLoading.value = false
     } else {
       isLoading.value = false
@@ -316,13 +326,14 @@ const togglePlan2 = () => {
 let singleSelection = ref(true);
 // 多选与单选切换事件
 const selectAll = () => {
-  emit('changeArea', [selectedButton.value])
   selectAllCheckbox.value = false
   buttons2.value.forEach((button) => {
     button.selected = false;
   });
   singleSelection.value = !singleSelection.value;
+  // 线路按钮被重置，
   showControlMode.value = false
+  emit('changeArea', [selectedButton.value])
 };
 
 // 全选状态
@@ -351,11 +362,12 @@ const toggleSelection = (button: any) => {
   // 存储一次按钮ID，用于禁用/启用交互
   handleButton.value = button.id
   // 根据按钮状态，展示禁用/启用按钮文本
-  if (button.panel) {
+  if (button.ctrlStatus) {
     isPlanEnabled2.value = true
   } else {
     isPlanEnabled2.value = false
   }
+
   // 选择时反控俯视图
   let level1 = selectedButton.value
   let level2 = button.id
@@ -401,7 +413,7 @@ const showAllButtons = ref(false);
 // 默认最多展示8个按钮
 const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
 
-// 控制模式 =======================================================================
+// 控制模式业务 ====================================================================
 
 // 决定该区域是否显示
 const showControlMode = ref(false);
@@ -413,7 +425,7 @@ const selectButton3 = (button3) => {
   selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
-// 控制场景 =======================================================================
+// 控制场景业务 =====================================================================
 
 // 决定该区域是否显示
 const showControlScene = ref(false);
@@ -431,7 +443,7 @@ const selectButton4 = (button4) => {
   selectedButton4.value = button4.label;
 };
 
-// 灯具参数 ========================================================================
+// 灯具参数表格 =====================================================================
 
 // 灯具参数 - 表格数据
 const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
@@ -493,6 +505,7 @@ const delBtn = (id: any) => {
     executeVisible.value = false;
   }
 };
+
 // 其他业务 ========================================================================
 
 const isLoading = ref(false)
@@ -502,13 +515,14 @@ const initMenu = (tier: number) => {
   // 1 = 照明区域 - 切换时，重置以下所有菜单
   if (tier == 1) {
     // 切换前，清除照明回路的选中状态
-    buttons2.value.forEach(item => {
-      item.selected = false
-    })
-    // 切换后，清空所有选中状态
-    props.treeData.forEach(item => {
-      item.selected = false
-    })
+    // buttons2.value.forEach(item => {
+    //   item.selected = false
+    // })
+    // // 切换后，清空所有选中状态
+    // props.treeData.forEach(item => {
+    //   item.selected = false
+    // })
+    emit('reset')
     // 控制模式 隐藏
     showControlMode.value = false;
     // 控制场景 隐藏
@@ -524,9 +538,17 @@ const initMenu = (tier: number) => {
 }
 // 刷新
 const refresh = () => {
+  // 关闭执行弹窗
   executeVisible.value = false
+  // 设置当前选中的序列
   selectedButton.value = '1';
   emit('changeArea', ['1']);
+  emit('reset')
+  let data = props.treeData[0]
+  // 默认选中
+  data.selected = true
+  buttons2.value = data.childList
+
   showControlMode.value = false;
   showControlScene.value = false;
   selectedButton4.value = null;