fix:群控系统>控制面板的样式和逻辑修改

hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/dialogStyle.less

@@ -39,7 +39,6 @@
       .journal {
         padding: 1% 3%;
         width: 100%;
-        height: 150px;
         background-color: rgba(0, 0, 0);
         border-radius: 12px;
         border: 2px solid transparent;

hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less

@@ -16,26 +16,30 @@
         perspective-origin: 850px -160px;
         // 左上角区域切换功能
         .btn-box {
-            width: 120px;
+            width: 100px;
             position: sticky;
-            top: 10px;
+            top: 15px;
-            left: 10px;
+            margin-left: 10px;
             display: flex;
             flex-direction: column;
             gap: 8px;
             .btn-item {
                 cursor: pointer;
                 width: 100%;
-                height: 40px;
+                height: 35px;
                 border-radius: 4px;
-                background: rgba(39, 120, 255, 1);
+                // background: rgba(39, 120, 255, 1);
+                background: rgb(7, 72, 116);
                 border: 1px solid rgba(51, 199, 255, 1);
                 box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
-                font-size: 18px;
+                font-size: 16px;
                 color: white;
             }
+            .btnActive {
+                background: rgba(39, 120, 255, 1);
+            }
             .btn-item:hover {
-                color: black;
+                color: white;
             }
         }
         // 大区分区
@@ -129,6 +133,9 @@
         align-items: center;
         cursor: pointer;
     }  
+}
+.drawer-item {
+    position: relative;
     // 抽屉关闭按钮
     .drawer-box-out {
         width: 30px;
@@ -145,5 +152,4 @@
         align-items: center;
         cursor: pointer;
     }
-    
 }

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

@@ -7,7 +7,7 @@
           v-for="(item, index) in floorData"
           :key="index"
           class="btn-item"
-          :style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }"
+          :class="{ btnActive: item.dataCode == thisFloor }"
           @click="changeFloor(item.childList, item.dataCode)"
           >{{ item.name }}</button
         >
@@ -36,14 +36,6 @@
           :visible="item.visible" />
       </div>
     </div>
-    <!-- 右侧抽屉的触发按钮 -->
-    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
-      <double-left-outlined class="drawer-icon" style="color: white" />
-    </div>
-    <!-- 左侧抽屉的关闭按钮 -->
-    <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
-      <double-right-outlined class="drawer-icon" style="color: white" />
-    </div>
     <!-- 右侧抽屉 -->
     <a-drawer
       v-model:visible="visible"
@@ -56,6 +48,10 @@
       id="drawer"
       :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
       <a-tabs v-model:activeKey="activeKey">
+        <div class="drawer-box-out" @click="toggleDrawer">
+          <double-left-outlined v-if="!visible" class="drawer-icon" style="color: white" />
+          <double-right-outlined v-else class="drawer-icon" style="color: white" />
+        </div>
         <a-tab-pane key="1" tab="控制面板">
           <tabs1
             ref="tabs1Ref"

hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.less

@@ -392,12 +392,22 @@
 
   .zmhlbtn {
     position: relative;
-  }
+    overflow: hidden;
-
+    .btn-back {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      right: -25px;
+      bottom: -30px;
+      transform: rotate(45deg);
+      background: orange;
       // 禁用图标
       .anticon-stop {
+        transform: rotate(-45deg) scale(0.9);
         position: absolute;
-    right: 3px;
+        left: 3px;
-    bottom: 3px;
+        top: 15px;
+      }
+    }
   }
 }

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

@@ -1,12 +1,11 @@
 <template>
-  <a-spin :spinning="isLoading">
+  <!-- 空调区域 -->
-    <!-- 照明区域 -->
   <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
@@ -40,12 +39,14 @@
       <div class="circuit-tab"></div>
       <span class="circuit-text">空调分组</span>
       <div class="btn2">
+        <a-badge :offset="[-10, 2]" :count="lockList.length">
           <button
             class="openPlan"
             :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
             @click="togglePlan2">
             {{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
           </button>
+        </a-badge>
         <a-switch
           v-model:checked="selectAllCheckbox"
           :disabled="singleSelection"
@@ -68,7 +69,9 @@
           :class="{ btn: true, selected: button.selected }"
           class="zmhlbtn"
           @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
           {{ button.name }}
         </button>
         <div style="margin-top: 10px">
@@ -82,7 +85,9 @@
           :class="{ btn: true, selected: button.selected }"
           class="zmhlbtn"
           @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
           {{ button.name }}
         </button>
         <div style="margin-top: 10px">
@@ -141,10 +146,7 @@
         <button class="flushed">刷新</button>
       </a-popconfirm>
     </a-badge>
-
-      <a-spin :spinning="buttonLoading">
     <button class="execute" @click="showModal">执行</button>
-      </a-spin>
   </div>
 
   <!-- 点击执行时的弹出框 -->
@@ -220,6 +222,28 @@
                 </span>
               </div>
             </div>
+            <div class="btn-item">
+              <div class="left"> 启用状态 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.lockStatus != undefined
+                    ? item.stateBefore.lockStatus
+                      ? '禁用'
+                      : '启用'
+                    : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>
+                  {{
+                    item?.stateAfter?.lockStatus != undefined
+                      ? item.stateAfter.lockStatus
+                        ? '禁用'
+                        : '启用'
+                      : '--'
+                  }}
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -237,7 +261,6 @@
       </a-popconfirm>
     </div>
   </div>
-  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -304,48 +327,67 @@
     emit('changeArea', button.id);
     // 当前选中回路 - 置空
     resetMode();
-    // 最近交互过的按钮 - 置空
-    handleButton.value = '';
   };
   // 默认最多展示8个按钮
   const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
 
   // 照明回路业务 ======================================================================
 
-  // 最近交互过的按钮id，用于禁用和启用
-  const handleButton = ref('');
   // 开关启用/禁用状态
-  const isPlanEnabled2 = ref(true);
+  const isPlanEnabled2 = ref(false);
+  // 开关修改保存数组
+  const lockList = ref<any>([]);
   // 开关启用/禁用切换事件
   const togglePlan2 = () => {
-    // 如果未交互任何按钮
+    // 获取选中线路
-    if (handleButton.value == '') {
+    let valid = buttons2.value.filter((item: any) => {
-      return message.info('请选择空调分组');
+      return item.selected;
-    }
-    // 获取最近交互过的按钮
-    const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
-    let panel = +!btn.ctrlStatus;
-    isLoading.value = true;
-    http
-      .get(lightingManage.setDisable, {
-        deviceGroup: btn.dataCode,
-        panel,
-        projectId: state.projectId,
-        siteId: state.siteId,
-      })
-      .then((res) => {
-        if (res.msg === 'success') {
-          // 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
-          isPlanEnabled2.value = !isPlanEnabled2.value;
-          btn.ctrlStatus = panel;
-          isLoading.value = false;
-        } else {
-          isLoading.value = false;
-        }
-      })
-      .catch(() => {
-        isLoading.value = false;
     });
+    // 未选中线路
+    if (valid.length == 0) {
+      return message.info('请先选择线路');
+      // 选中线路
+    } else {
+      // 按钮切换
+      isPlanEnabled2.value = !isPlanEnabled2.value;
+      // 禁用状态原值
+      let after = +isPlanEnabled2.value;
+      // 当前修改线路
+      valid.forEach((item: any) => {
+        // 按钮与需修改的值一致，无效
+        if (item.lockStatus == after) {
+          return;
+        }
+        // 查看是否已经产生过修改
+        const same = lockList.value.find((v: any) => {
+          return v.deviceGroup == item.dataCode;
+        });
+        // 如果发生过修改
+        if (same) {
+          // 改回原值，则移除
+          if (same.before == after) {
+            lockList.value.forEach((v1: any, index: number) => {
+              if (same.deviceGroup == v1.deviceGroup) {
+                lockList.value.splice(index, 1);
+              }
+            });
+            // 只有true 和 false 的切换，无需继续判断
+          }
+          // 初次修改
+        } else {
+          lockList.value.push({
+            deviceGroup: item.dataCode,
+            deviceGroupName: item.name,
+            region: item.treePid,
+            regionName: '',
+            before: item.lockStatus,
+            lockStatus: after,
+          });
+        }
+        // 修改
+        item.lockStatus = after;
+      });
+    }
   };
 
   // 是否单选，状态
@@ -399,8 +441,6 @@
   });
   // 照明回路的按钮切换
   const changeLine = (button: any) => {
-    // 存储一次按钮ID，用于禁用/启用交互
-    handleButton.value = button.id;
     // 根据按钮状态，展示禁用/启用按钮文本
     if (button.ctrlStatus) {
       isPlanEnabled2.value = true;
@@ -449,7 +489,7 @@
     console.log(thisButton2, 'button');
   };
 
-  // 照明回路所有按钮
+  // 空调分组所有按钮
   const buttons2 = ref([]);
   // 按钮区展开与收起状态
   const showAllButtons = ref(false);
@@ -612,9 +652,6 @@
 
   // 底部按钮区 ======================================================================
 
-  const isLoading = ref(false);
-  // 执行按钮loading
-  const buttonLoading = ref(false);
   // 刷新
   const refresh = (reload = false) => {
     // 关闭执行弹窗
@@ -631,6 +668,12 @@
       });
     }
     changeList.value = [];
+    if (!reload) {
+      lockList.value.forEach((item: any) => {
+        resetLockList(item);
+      });
+    }
+    lockList.value = [];
     // 默认选择第一个楼层
     let data = props.treeData[0];
     // 默认选中
@@ -640,6 +683,18 @@
     // 将选中线路重置
     resetMode();
   };
+  // 将已修改的禁用/启用状态改回
+  const resetLockList = (item: any) => {
+    props.treeData.find((v: any) => {
+      if (item.region == v.dataCode) {
+        v.childList.find((v1: any) => {
+          if (item.deviceGroup == v1.dataCode) {
+            v1.lockStatus = item.before;
+          }
+        });
+      }
+    });
+  };
   // 刷新时，将已修改的值改回
   const resetChangeList = (item: any) => {
     props.treeData.find((v: any) => {
@@ -675,11 +730,10 @@
     if (!changeList.value.length) {
       return message.info('未产生任何修改');
     }
-    buttonLoading.value = true;
     http
       .post(airConditionControl.getChangeList, {
         sceneList: changeList.value,
-        lockList: [],
+        lockList: lockList.value,
         projectId: state.projectId,
         siteId: state.siteId,
       })
@@ -690,11 +744,8 @@
         } else {
           message.warning('获取修改内容失败');
         }
-        buttonLoading.value = false;
       })
-      .catch(() => {
+      .catch(() => {});
-        buttonLoading.value = false;
-      });
   };
   // 通用取消
   const changeCancel = () => {};
@@ -714,17 +765,19 @@
     obj.scene = obj.stateAfter.scene.value;
     obj.before = obj.stateBefore.scene.value;
     resetChangeList(obj);
+    resetLockList(obj);
     // 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
     changeList.value = changeList.value.filter((item: any) => {
       return item.deviceGroup !== obj.deviceGroup;
     });
+    lockList.value = lockList.value.filter((item: any) => {
+      return item.deviceGroup !== obj.deviceGroup;
+    });
     diffList.value = diffList.value.filter((item: any) => {
       return item.deviceGroup !== obj.deviceGroup;
     });
-    console.log(changeList, 'changeList');
-    console.log(diffList, 'diffList');
     // 如果移除后不再有修改内容，则隐藏弹出框
-    if (changeList.value.length == 0) {
+    if (changeList.value.length == 0 && lockList.value.length == 0) {
       executeVisible.value = false;
     }
   };
@@ -733,7 +786,7 @@
     http
       .post(airConditionControl.submitChangeList, {
         sceneList: changeList.value,
-        lockList: [],
+        lockList: lockList.value,
         projectId: state.projectId,
         siteId: state.siteId,
       })

hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less

@@ -39,7 +39,6 @@
       .journal {
         padding: 1% 3%;
         width: 100%;
-        height: 150px;
         background-color: rgba(0, 0, 0);
         border-radius: 12px;
         border: 2px solid transparent;

hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less

@@ -16,26 +16,30 @@
         perspective-origin: 850px -160px;
         // 左上角区域切换功能
         .btn-box {
-            width: 120px;
+            width: 100px;
             position: sticky;
-            top: 10px;
+            top: 15px;
-            left: 10px;
+            margin-left: 10px;
             display: flex;
             flex-direction: column;
             gap: 8px;
             .btn-item {
                 cursor: pointer;
                 width: 100%;
-                height: 40px;
+                height: 35px;
                 border-radius: 4px;
-                background: rgba(39, 120, 255, 1);
+                // background: rgba(39, 120, 255, 1);
+                background: rgb(7, 72, 116);
                 border: 1px solid rgba(51, 199, 255, 1);
                 box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
-                font-size: 18px;
+                font-size: 16px;
                 color: white;
             }
+            .btnActive {
+                background: rgba(39, 120, 255, 1);
+            }
             .btn-item:hover {
-                color: black;
+                color: white;
             }
         }
         // 大区分区
@@ -129,6 +133,9 @@
         align-items: center;
         cursor: pointer;
     }  
+}
+.drawer-item {
+    position: relative;
     // 抽屉关闭按钮
     .drawer-box-out {
         width: 30px;
@@ -145,5 +152,4 @@
         align-items: center;
         cursor: pointer;
     }
-    
 }

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

@@ -7,7 +7,7 @@
           v-for="(item, index) in floorData"
           :key="index"
           class="btn-item"
-          :style="{ color: item.dataCode == thisFloor ? 'black' : 'white' }"
+          :class="{ btnActive: item.dataCode == thisFloor }"
           @click="changeFloor(item.childList, item.dataCode)"
           >{{ item.name }}</button
         >
@@ -36,14 +36,6 @@
           :visible="item.visible" />
       </div>
     </div>
-    <!-- 右侧抽屉的触发按钮 -->
-    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
-      <double-left-outlined class="drawer-icon" style="color: white" />
-    </div>
-    <!-- 左侧抽屉的关闭按钮 -->
-    <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
-      <double-right-outlined class="drawer-icon" style="color: white" />
-    </div>
     <!-- 右侧抽屉 -->
     <a-drawer
       v-model:visible="visible"
@@ -55,13 +47,17 @@
       :closable="false"
       id="drawer"
       :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <div class="drawer-box-out" @click="toggleDrawer">
+        <double-left-outlined v-if="!visible" class="drawer-icon" style="color: white" />
+        <double-right-outlined v-else class="drawer-icon" style="color: white" />
+      </div>
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane key="1" tab="控制面板">
           <tabs1
             ref="tabs1Ref"
-            @changeArea="changeArea"
             @reset="reset"
             @reload="reload"
+            @changeArea="changeArea"
             :treeData="treeData" />
         </a-tab-pane>
         <a-tab-pane key="2" tab="计划列表" force-render>
@@ -77,6 +73,7 @@
 
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
+  import { lightPosition } from './lightPosition';
   // 组件
   import light from './light.vue';
   import tabs1 from './tabs1.vue';
@@ -289,7 +286,12 @@
         siteId: state.siteId,
       })
       .then((res) => {
-        console.log(res);
+        const data = res.data;
+        data.forEach((item: any, index: number) => {
+          item.styleText = lightPosition[index];
+        });
+        console.log(res.data);
+        // bulbs.value = data;
       });
   };
 

hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts

@@ -1,3 +1,6 @@
 // 此文件只定义light（即俯视图小灯泡）的位置信息
 // 与显示状态和分组信息无关
-export const lightPosition = [];
+export const lightPosition = [
+  { left: '180px', bottom: '200px' },
+  { left: '180px', bottom: '230px' },
+];

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

@@ -413,12 +413,22 @@
 
   .zmhlbtn {
     position: relative;
-  }
+    overflow: hidden;
-
+    .btn-back {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      right: -25px;
+      bottom: -30px;
+      transform: rotate(45deg);
+      background: orange;
       // 禁用图标
       .anticon-stop {
+        transform: rotate(-45deg) scale(0.9);
         position: absolute;
-    right: 3px;
+        left: 3px;
-    bottom: 3px;
+        top: 15px;
+      }
+    }
   }
 }

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

@@ -1,5 +1,4 @@
 <template>
-  <a-spin :spinning="isLoading">
   <!-- 照明区域 -->
   <div>
     <div class="light-area">
@@ -40,12 +39,14 @@
       <div class="circuit-tab"></div>
       <span class="circuit-text">照明回路</span>
       <div class="btn2">
+        <a-badge :offset="[-10, 2]" :count="lockList.length">
           <button
             class="openPlan"
             :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
             @click="togglePlan2">
             {{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
           </button>
+        </a-badge>
         <a-switch
           v-model:checked="selectAllCheckbox"
           :disabled="singleSelection"
@@ -68,7 +69,9 @@
           :class="{ btn: true, selected: button.selected }"
           class="zmhlbtn"
           @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
           {{ button.name }}
         </button>
         <div style="margin-top: 10px">
@@ -82,7 +85,9 @@
           :class="{ btn: true, selected: button.selected }"
           class="zmhlbtn"
           @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
           {{ button.name }}
         </button>
         <div style="margin-top: 10px">
@@ -141,10 +146,7 @@
         <button class="flushed">刷新</button>
       </a-popconfirm>
     </a-badge>
-
-      <a-spin :spinning="buttonLoading">
     <button class="execute" @click="showModal">执行</button>
-      </a-spin>
   </div>
 
   <!-- 点击执行时的弹出框 -->
@@ -154,14 +156,14 @@
         <div class="div-operation"></div>
         <span class="text-operation">变更内容 </span>
       </div>
-        <div class="j-box" v-for="(item, index) in diffList" :key="item.id">
+      <div class="j-box" v-for="item in diffList" :key="item.id">
         <div class="journal" style="margin-top: 20px">
           <div class="imgText">
             <div class="zjzm">
               <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
               <span
                 class="title-text"
-                  style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
                 >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
               >
             </div>
@@ -180,8 +182,8 @@
               <div class="right">
                 <span>手动</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>自动</span>
+                <span>自动</span></div
-                </div>
+              >
             </div>
             <div class="btn-item">
               <div class="left"> 亮度 </div>
@@ -220,6 +222,28 @@
                 </span>
               </div>
             </div>
+            <div class="btn-item">
+              <div class="left"> 启用状态 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.lockStatus != undefined
+                    ? item.stateBefore.lockStatus
+                      ? '禁用'
+                      : '启用'
+                    : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>
+                  {{
+                    item?.stateAfter?.lockStatus != undefined
+                      ? item.stateAfter.lockStatus
+                        ? '禁用'
+                        : '启用'
+                      : '--'
+                  }}
+                </span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -237,7 +261,6 @@
       </a-popconfirm>
     </div>
   </div>
-  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -303,48 +326,67 @@
     emit('changeArea', button.id);
     // 当前选中回路 - 置空
     resetMode();
-    // 最近交互过的按钮 - 置空
-    handleButton.value = '';
   };
   // 默认最多展示8个按钮
   const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
 
   // 照明回路业务 ======================================================================
 
-  // 最近交互过的按钮id，用于禁用和启用
-  const handleButton = ref('');
   // 开关启用/禁用状态
-  const isPlanEnabled2 = ref(true);
+  const isPlanEnabled2 = ref(false);
+  // 开关修改保存数组
+  const lockList = ref<any>([]);
   // 开关启用/禁用切换事件
   const togglePlan2 = () => {
-    // 如果未交互任何按钮
+    // 获取选中线路
-    if (handleButton.value == '') {
+    let valid = buttons2.value.filter((item: any) => {
-      return message.info('请选择照明回路');
+      return item.selected;
-    }
-    // 获取最近交互过的按钮
-    const btn: any = buttons2.value.find((button: any) => button.id === handleButton.value);
-    let panel = +!btn.ctrlStatus;
-    isLoading.value = true;
-    http
-      .get(lightingManage.setDisable, {
-        deviceGroup: btn.dataCode,
-        panel,
-        projectId: state.projectId,
-        siteId: state.siteId,
-      })
-      .then((res) => {
-        if (res.msg === 'success') {
-          // 确认成功后 - 按钮文本取反 - 按钮布尔值修改 - 关闭loading
-          isPlanEnabled2.value = !isPlanEnabled2.value;
-          btn.ctrlStatus = panel;
-          isLoading.value = false;
-        } else {
-          isLoading.value = false;
-        }
-      })
-      .catch(() => {
-        isLoading.value = false;
     });
+    // 未选中线路
+    if (valid.length == 0) {
+      return message.info('请先选择线路');
+      // 选中线路
+    } else {
+      // 按钮切换
+      isPlanEnabled2.value = !isPlanEnabled2.value;
+      // 禁用状态原值
+      let after = +isPlanEnabled2.value;
+      // 当前修改线路
+      valid.forEach((item: any) => {
+        // 按钮与需修改的值一致，无效
+        if (item.lockStatus == after) {
+          return;
+        }
+        // 查看是否已经产生过修改
+        const same = lockList.value.find((v: any) => {
+          return v.deviceGroup == item.dataCode;
+        });
+        // 如果发生过修改
+        if (same) {
+          // 改回原值，则移除
+          if (same.before == after) {
+            lockList.value.forEach((v1: any, index: number) => {
+              if (same.deviceGroup == v1.deviceGroup) {
+                lockList.value.splice(index, 1);
+              }
+            });
+            // 只有true 和 false 的切换，无需继续判断
+          }
+          // 初次修改
+        } else {
+          lockList.value.push({
+            deviceGroup: item.dataCode,
+            deviceGroupName: item.name,
+            region: item.treePid,
+            regionName: '',
+            before: item.lockStatus,
+            lockStatus: after,
+          });
+        }
+        // 修改
+        item.lockStatus = after;
+      });
+    }
   };
 
   // 是否单选，状态
@@ -398,8 +440,6 @@
   });
   // 照明回路的按钮切换
   const changeLine = (button: any) => {
-    // 存储一次按钮ID，用于禁用/启用交互
-    handleButton.value = button.id;
     // 根据按钮状态，展示禁用/启用按钮文本
     if (button.ctrlStatus) {
       isPlanEnabled2.value = true;
@@ -611,9 +651,6 @@
 
   // 底部按钮区 ======================================================================
 
-  const isLoading = ref(false);
-  // 执行按钮loading
-  const buttonLoading = ref(false);
   // 刷新
   const refresh = (reload = false) => {
     // 关闭执行弹窗
@@ -630,6 +667,12 @@
       });
     }
     changeList.value = [];
+    if (!reload) {
+      lockList.value.forEach((item: any) => {
+        resetLockList(item);
+      });
+    }
+    lockList.value = [];
     // 默认选择第一个楼层
     let data = props.treeData[0];
     // 默认选中
@@ -638,7 +681,19 @@
     buttons2.value = data.childList;
     resetMode();
   };
-  // 刷新时，将已修改的值改回
+  // 将已修改的禁用/启用状态改回
+  const resetLockList = (item: any) => {
+    props.treeData.find((v: any) => {
+      if (item.region == v.dataCode) {
+        v.childList.find((v1: any) => {
+          if (item.deviceGroup == v1.dataCode) {
+            v1.lockStatus = item.before;
+          }
+        });
+      }
+    });
+  };
+  // 将已修改的线路场景改回
   const resetChangeList = (item: any) => {
     props.treeData.find((v: any) => {
       if (item.region == v.dataCode) {
@@ -653,7 +708,7 @@
                     v3.executeStatus.value = 0;
                   }
                   if (!item.before) {
-                    console.log(item, '没有这个选项');
+                    console.log(item, '没有这个选项---');
                     v3.executeStatus.value = 0;
                   }
                   // 旧值选中
@@ -670,14 +725,13 @@
   };
   // 右下角的执行事件
   const showModal = () => {
-    if (!changeList.value.length) {
+    if (!changeList.value.length && !lockList.value.length) {
       return message.info('未产生任何修改');
     }
-    buttonLoading.value = true;
     http
       .post(lightingManage.getChangeList, {
         sceneList: changeList.value,
-        lockList: [],
+        lockList: lockList.value,
         projectId: state.projectId,
         siteId: state.siteId,
       })
@@ -688,11 +742,8 @@
         } else {
           message.warning('获取修改内容失败');
         }
-        buttonLoading.value = false;
       })
-      .catch(() => {
+      .catch(() => {});
-        buttonLoading.value = false;
-      });
   };
   // 通用取消
   const changeCancel = () => {};
@@ -705,24 +756,26 @@
   const changeList: any = ref([]);
   // 展示修改前后差异的内容
   const diffList = ref([]);
-  //撤销
+  // 撤销
   const delBtn = (obj: any) => {
     console.log(obj, '当前选择的修改内容');
     // 将treeData对应回路的数据改回，数据以后端为准
-    obj.scene = obj.stateAfter.scene.value;
+    obj.scene = obj?.stateAfter?.scene?.value;
-    obj.before = obj.stateBefore.scene.value;
+    obj.before = obj?.stateBefore?.scene?.value;
     resetChangeList(obj);
-    // 将 changeList 与 diffList 中记录的修改移除 (排除极端情况)
+    resetLockList(obj);
+    // 将 changeList lockList 与 diffList 中记录的修改移除 (排除极端情况)
     changeList.value = changeList.value.filter((item: any) => {
       return item.deviceGroup !== obj.deviceGroup;
     });
+    lockList.value = lockList.value.filter((item: any) => {
+      return item.deviceGroup !== obj.deviceGroup;
+    });
     diffList.value = diffList.value.filter((item: any) => {
       return item.deviceGroup !== obj.deviceGroup;
     });
-    console.log(changeList, 'changeList');
-    console.log(diffList, 'diffList');
     // 如果移除后不再有修改内容，则隐藏弹出框
-    if (changeList.value.length == 0) {
+    if (changeList.value.length == 0 && lockList.value.length == 0) {
       executeVisible.value = false;
     }
   };
@@ -731,14 +784,15 @@
     http
       .post(lightingManage.submitChangeList, {
         sceneList: changeList.value,
-        lockList: [],
+        lockList: lockList.value,
         projectId: state.projectId,
         siteId: state.siteId,
       })
       .then(() => {
         emit('reload');
         refresh(true);
-      });
+      })
+      .catch(() => {});
   };
 
   // 其他业务 ========================================================================