From ab29f9152de2df439ce323a3517978ef69de93d5 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Thu, 25 Jul 2024 11:54:47 +0800
Subject: [PATCH] =?UTF-8?q?add:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F=20?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E6=95=B0=E6=8D=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/api/IlluminationInfo.ts      |   7 +
 .../equipmentControl/lightingManage/indexs.vue     |  25 ++-
 .../view/equipmentControl/lightingManage/tabs1.vue | 227 ++++++++++++---------
 3 files changed, 157 insertions(+), 102 deletions(-)

diff --git a/hx-ai-intelligent/src/api/IlluminationInfo.ts b/hx-ai-intelligent/src/api/IlluminationInfo.ts
index 3b1d32c..0a8015e 100644
--- a/hx-ai-intelligent/src/api/IlluminationInfo.ts
+++ b/hx-ai-intelligent/src/api/IlluminationInfo.ts
@@ -9,6 +9,13 @@ export enum lightingManage {
   // 修改线路的可用/禁用状态
   setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
 
+  // 控制面板tab页 ================================================
+
+  // 获取当前修改的内容对比数据
+  getChangeList = '/carbon-smart/IlluminationInfo/getLightSceneChangeInfo',
+  // 提交当前修改
+  submitChangeList = '/carbon-smart/IlluminationInfo/changeLightScene',
+
   // 计划列表tab页 ================================================
 
   // 获得计划列表tab页的表格数据
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index adb4b68..1297d9d 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -42,6 +42,7 @@
         v-model:visible="visible"
         class="drawer-item"
         width="496"
+        :forceRender="preload"
         placement="right"
         :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
         :closable="false"
@@ -54,7 +55,6 @@
                     @changeArea="changeArea" 
                     @reset="reset" 
                     :treeData="treeData" 
-                    :nowArea="nowArea"
                     ></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
@@ -93,6 +93,10 @@ onMounted(() => {
     getAllArea()
 })
 
+// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+const preload = ref(false)
+
+
 // 分层业务 =====================================================
 
 // 所有楼层的数据
@@ -109,13 +113,12 @@ const changeFloor = (area: any) => {
     treeData.value[0].selected = true
 }
 
+
 // 分区业务 =====================================================
 
 // 分区结构树
 const treeData = ref([])
-// 当前选中的分区id
-const nowArea = ref('1')
-// 当前选中的分区序号 - 用于样式渲染
+// 当前选中的分区序列 - 用于样式渲染
 const area = ref(['1'])
 // 线路内小灯泡 - 此处位置需前端写死
 const bulbs = ref([
@@ -182,15 +185,18 @@ const changeArea = (result: any) => {
 }
 // 由当前组件控制的分区切换
 const changeThisArea = (result: any) => {
-    tabs1Ref.value.changeCancel()
     console.log(result, 'changeThisArea')
     // 修改前，将所有选项置空
     reset()
     let level1 = result[0];
     area.value.length = 0
+    // 只选择了分区
     if (result.length === 1) {
         result[0].selected = true
         area.value.push(result[0].id)
+        // 控制子组件按钮区
+        tabs1Ref.value.changeArea(result[0])
+    // 选择了分区 + 线路
     } else if (result.length === 2) {
         // 如果没有分区，默认选择第一个
         if (!level1) {
@@ -199,8 +205,10 @@ const changeThisArea = (result: any) => {
         // 选中状态都设为true
         level1.selected = result[1].selected  = true
         area.value.splice(0, 0, level1.id, result[1].id)
+        // 控制子组件按钮区
+        tabs1Ref.value.changeArea(result[0])
+        tabs1Ref.value.changeLine(result[1])
     }
-    nowArea.value = level1.id
 }
 // 重置分区树所有当前选项
 const reset = () => {
@@ -220,6 +228,7 @@ const computedClass = (string: string) => {
     }
 }
 
+// 获得所有分区
 const getAllArea = () => {
     http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
         const data = res.data
@@ -242,7 +251,10 @@ const getAllArea = () => {
                 })
             })
         })
+        // 默认展示 线路 1-1
         treeData.value = data[0].childList
+        // 开始预加载
+        preload.value = true
     })
 }
 
@@ -256,6 +268,7 @@ let visible = ref(false);
 const toggleDrawer = () => {
     visible.value = !visible.value;
 };
+// 抽屉tab1组件的引用
 const tabs1Ref = ref()
 
 </script>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
index 9cd93e4..0ae9d57 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -13,7 +13,7 @@
       <div class="area">
         <template v-if="!showAllButtonsArea">
           <button v-for="(button, index) in limitedButtons1" :key="index"
-            :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
+            :class="{ btn: true, selected: button.selected }" @click="changeArea(button)">
             {{ button.name }}
           </button>
           <div style="margin-top: 10px">
@@ -22,7 +22,7 @@
         </template>
         <template v-else>
           <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
-            @click="selectButton(button)">
+            @click="changeArea(button)">
             {{ button.name }}
           </button>
           <div style="margin-top: 10px">
@@ -53,7 +53,7 @@
       <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)">
+            :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
             <stop-outlined v-if="button.ctrlStatus" />
             {{ button.name }}
           </button>
@@ -63,7 +63,7 @@
         </template>
         <template v-else>
           <button v-for="(button, index) in buttons2" :key="index" 
-          :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
+          :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="changeLine(button)">
             <stop-outlined v-if="button.ctrlStatus" />
             {{ button.name }}
           </button>
@@ -91,26 +91,26 @@
     </div>
     <!-- 控制场景部分 -->
     <div>
-      <div class="control-scene-area" v-show="thisButton2.mode.value == '3'">
+      <div class="control-scene-area" v-show="thisButton2.mode.value == 3">
         <div class="control-scene-tab"></div>
         <span class="control-scene-text"> 控制场景 </span>
       </div>
       <!-- 控制场景按钮部分 -->
-      <div class="control-scene-btn-area" v-show="thisButton2.mode.value == '3'">
+      <div class="control-scene-btn-area" v-show="thisButton2.mode.value == 3">
         <button v-for="(button4, index) in controlScene" :key="index"
-          :class="{ btn: true, selected: thisButton2.mode.value == button4.value }" @click="selectButton4(button4)">
+          :class="{ btn: true, selected: thisButton2.scene.value == button4.value }" @click="selectButton4(button4)">
           {{ button4.label }}
         </button>
       </div>
     </div>
     <!-- 底部按钮区 -->
     <div class="bottom">
-        <a-popconfirm
-        title="刷新将会取消已作出的修改"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="changeConfirm"
-        @cancel="changeCancel"
+      <a-popconfirm
+      title="刷新将会取消已作出的修改"
+      ok-text="确定"
+      cancel-text="取消"
+      @confirm="changeConfirm"
+      @cancel="changeCancel"
       >
         <button class="flushed">刷新</button>
       </a-popconfirm>
@@ -186,7 +186,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import {
   DownOutlined,
   UpOutlined,
@@ -201,47 +201,25 @@ import { getAllEnum } from '/@/api/index'
 // 初始化  =========================================================================
 
 onMounted(() => {
-  // 设置分区
-  setArea(0)
+  // 默认选项
+  setArea()
   // 获得枚举
   getEnum(['IlluminationMode', 'IlluminationScene'])
 })
-
-// 获得枚举，初始化
+// 获得枚举
 const getEnum = (arr: any) => {
   getAllEnum({ params: arr }).then(res => {
-      const data = res.data
-      controlMode.value = data.IlluminationMode
-      controlScene.value = data.IlluminationScene
+    const data = res.data
+    // 控制模式
+    controlMode.value = data.IlluminationMode
+    // 控制场景
+    controlScene.value = data.IlluminationScene
   })
 }
-// 父组件点击俯视图切换分区时，子组件切换线路
-const setArea = (isHandle: number) => {
-  const data = props.treeData.find((item: any) => {
-    return item.id == props.nowArea
-  })
-  // 默认选中第一个分区
-  data.selected = true
-  // 修改当前选中的分区
-  selectedButton.value = props.nowArea
-  // 设置当前显示的回路
+// 以 1-1 作为默认线路
+const setArea = () => {
+  const data = props.treeData[0]
   buttons2.value = data.childList
-
-  // 如果非初始化触发（点击俯视图）
-  if (isHandle) {
-    // 如果选中了线路则children中的某个selected为true
-    const button2 = data.childList.find((item: any) => {
-      return item.selected == true
-    })
-    // 如果选中了线路
-    if (button2) {
-      thisButton2.value = button2;
-      console.log(button2,'2222222222')
-
-    } else {
-      resetMode()
-    }
-  }
 }
 
 // 与父组件的交互  ===================================================================
@@ -251,10 +229,6 @@ const props = defineProps({
   treeData: {
     type: Array,
     default: []
-  },
-  // 父组件选中的分区ID
-  nowArea: {
-    type: String,
   }
 });
 // 向上传递修改选择样式
@@ -263,12 +237,6 @@ const props = defineProps({
  * @method reset 用于重置按钮区
  */
 const emit = defineEmits(['changeArea','reset']);
-// 监听父组件选中的分区，并实时修改分区
-watch(() => props.nowArea, () => {
-  setArea(1)
-  // 分区产生了切换， 线路的选中状态置空
-  handleButton.value = ''
-})
 
 // 照明区域业务 =======================================================================
 
@@ -283,15 +251,22 @@ const togglePlan = () => {
 const showAllButtonsArea = ref(false);
 // 被选中的分区  默认为1
 const selectedButton = ref<string | undefined>('1');
-// 区域切换（按钮点击-单选）事件
-const selectButton = (button: any) => {
+
+// 分区切换
+const changeArea = (button: any) => {
   // 当前选中按钮
   selectedButton.value = button.id;
-  initMenu(1)
-  button.selected = true
+  // 设置当前选中的线路
   buttons2.value = button.childList
+  // 重置按钮状态
+  emit('reset')
+  // 设置选中按钮状态
+  button.selected = true
+  // 改变俯视图样式
   emit('changeArea', button.id);
+  // 当前选中线路 - 置空
   resetMode()
+  // 最近交互过的按钮 - 置空
   handleButton.value = ''
 };
 // 默认最多展示8个按钮
@@ -335,7 +310,9 @@ const selectAll = () => {
     button.selected = false;
   });
   singleSelection.value = !singleSelection.value;
+  // 当前选中线路 - 置空
   resetMode()
+  // 改变俯视图样式
   emit('changeArea', [selectedButton.value])
 };
 
@@ -346,7 +323,11 @@ const toggleAllSelection = () => {
   let arr = [selectedButton.value]
   // 全选
   if (selectAllCheckbox.value) {
-    buttons2.value.forEach((item) => {
+    buttons2.value.forEach((item, index) => {
+      // 全选时，默认展示第一条线路的模式-场景按钮
+      if (index == 0) {
+        thisButton2.value = item
+      }
       item.selected = true;
       arr.push(item.id)
     });
@@ -355,12 +336,24 @@ const toggleAllSelection = () => {
     buttons2.value.forEach((item) => {
       item.selected = false;
     });
+    // 全不选时，隐藏模式-场景按钮
+    resetMode()
   }
   emit('changeArea', arr)
 };
 
+// 储存当前选中的线路
+const thisButton2 = ref({
+  code: '',
+  mode: {
+    value: -1
+  },
+  scene: {
+    value: -1
+  }
+})
 // 照明回路的按钮切换
-const toggleSelection = (button: any) => {
+const changeLine = (button: any) => {
   // 存储一次按钮ID，用于禁用/启用交互
   handleButton.value = button.id
   // 根据按钮状态，展示禁用/启用按钮文本
@@ -373,13 +366,13 @@ const toggleSelection = (button: any) => {
   // 选择时反控俯视图
   let level1 = selectedButton.value
   let level2 = button.id
-  // 单选模式，需将所有按钮设为false
+  // 单选模式，需将所有其他按钮设为false
   if (singleSelection.value) {
     buttons2.value.forEach(item => {
       item.selected = false;
     });
-    emit('changeArea', [level1, level2])
     button.selected = !button.selected;
+    emit('changeArea', [level1, level2])
   } else {
     // 多选模式传值
     button.selected = !button.selected;
@@ -396,7 +389,7 @@ const toggleSelection = (button: any) => {
     // 发生了选中事件
     thisButton2.value = button
   } else {
-    // 未发生选中 或 多选被取消
+    // 未发生选中 或 多选的其中一个按钮被取消
     resetMode()
   }
   console.log(thisButton2,'button')
@@ -411,28 +404,17 @@ const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
 
 // 控制模式业务 ====================================================================
 
-const thisButton2 = ref({
-  code: '',
-  mode: {
-    value: '0'
-  }
-})
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
   let checked = thisButton2.value.mode
   console.log(button3.value,'---', checked.value)
-  // 如果点击了相同的按钮，未作出修改
+  // 如果点击了相同的按钮，则未作出修改
   if (checked.value === button3.value) {
     return
   }
   checked.value = button3.value
-  selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
-const diff = () => {
-  console.log(thisButton2)
-} 
-
 // 控制场景业务 =====================================================================
 
 // 控制模式枚举
@@ -443,13 +425,63 @@ const controlScene = ref([])
 const selectedButton4 = ref(null);
 // 控制场景 - 按钮切换
 const selectButton4 = (button4) => {
-  selectedButton4.value = button4.label;
+  // 当前选中的线路数据
+  const data = thisButton2.value
+  // 修改前的数据
+  let before = data.scene.value
+  // 修改后的数据
+  let after = button4.value
+  // 如果没有产生实质性的修改（修改前后相同，则跳出）
+  if (before === after) {
+    return
+  // 产生了修改
+  } else {
+    thisButton2.value.scene.value = after
+    // 查询之前是否修改过
+    const result = changeList.value.find((item, index) => {
+      item.index = index
+      return item.deviceGroup == data.code
+    })
+    // 如果已产生过修改
+    if (result) {
+      // 改回了原有的值，则从数组中移除
+      if (after == result.before) {
+        changeList.value.splice(result.index, 1)
+      // 修改为新值，则只修改after
+      } else {
+        result.scene = after
+        // 临时flag，用后移除
+        delete result.index
+      }
+    // 如果未产生过修改
+    } else {
+      changeList.value.push({
+        // 线路
+        deviceGroup: data.code,
+        deviceGroupName: data.name,
+        // 分区
+        region: data.pcode,
+        regionName: '',
+        // 修改前
+        before: before,
+        // 修改后
+        scene: after
+      })
+    }
+    console.log(changeList.value, 'changeList')
+  }
+  
+  thisButton2.value.scene.value = after
+  console.log(thisButton2,'222222')
+  console.log(button4,'44444')
 };
 
 // 内侧弹窗 ========================================================================
 
+// 需要修改的内容
+const changeList: any = ref([])
 // 需要向后端提交的修改内容
-const submitArray = ref([])
+const submitList = ref([])
 const cxList = ref([
   {
     id: '1',
@@ -489,7 +521,7 @@ const cxList = ref([
   },
 ]);
 //撤销
-const delBtn = (id: any) => {
+const delBtn = () => {
   cxList.value.pop();
   console.log(cxList.value.length);
 
@@ -501,19 +533,6 @@ const delBtn = (id: any) => {
 // 其他业务 ========================================================================
 
 const isLoading = ref(false)
-
-// 用于初始化5级联动的菜单
-const initMenu = (tier: number) => {
-  // 1 = 照明区域 - 切换时，重置以下所有菜单
-  if (tier == 1) {
-    emit('reset')
-    // 灯具参数 隐藏
-    selectedButton4.value = null;
-  } else if (tier == 2) {
-    // 灯具参数 隐藏
-    selectedButton4.value = null;
-  }
-}
 // 刷新
 const refresh = () => {
   // 关闭执行弹窗
@@ -532,7 +551,16 @@ const refresh = () => {
 // 执行确认
 const executeVisible = ref<boolean>(false);
 const showModal = () => {
+  http.post(lightingManage.getChangeList, { infoList: changeList.value, projectId: 'HLlmTZp8' }).then(res => {
+    if (res.msg === 'success') {
+      isLoading.value = true
+      console.log(res)
+    } else {
+      isLoading.value = false
+    }
+  })
   executeVisible.value = true;
+
 };
 
 // 确定
@@ -549,13 +577,20 @@ const resetMode = () => {
   thisButton2.value = {
     code: '',
     mode: {
-      value: '0'
+      value: -1
+    },
+    scene: {
+      value: -1
     }
   }
 } 
 
+// 暴露
 defineExpose({
-  changeCancel
+  // 分区切换
+  changeArea,
+  // 线路切换
+  changeLine
 });
 
 </script>