From cce83ee7001f30515579145c576ab7814ddf6768 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Fri, 9 Aug 2024 09:09:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=BE=A4=E6=8E=A7=E7=B3=BB=E7=BB=9F>?=
 =?UTF-8?q?=E6=8E=A7=E5=88=B6=E9=9D=A2=E6=9D=BF=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E9=80=BB=E8=BE=91=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../airConditionControlSystem/dialogStyle.less     |   1 -
 .../airConditionControlSystem/index.less           |  24 +-
 .../airConditionControlSystem/index.vue            |  14 +-
 .../airConditionControlSystem/tabs1.less           |  24 +-
 .../airConditionControlSystem/tabs1.vue            | 565 +++++++++++---------
 .../lightingManage/dialogStyle.less                |   1 -
 .../equipmentControl/lightingManage/index.less     |  24 +-
 .../equipmentControl/lightingManage/indexs.vue     |  24 +-
 .../lightingManage/lightPosition.ts                |   5 +-
 .../equipmentControl/lightingManage/tabs1.less     |  24 +-
 .../view/equipmentControl/lightingManage/tabs1.vue | 582 +++++++++++----------
 11 files changed, 713 insertions(+), 575 deletions(-)

diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/dialogStyle.less
index 3d550c5..40319ec 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/dialogStyle.less
+++ b/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;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less
index ae84fcd..396321e 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.less
+++ b/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;
-            left: 10px;
+            top: 15px;
+            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;
             }
         }
         // 大区分区
@@ -128,7 +132,10 @@
         justify-content: center;
         align-items: center;
         cursor: pointer;
-    }
+    }  
+}
+.drawer-item {
+    position: relative;
     // 抽屉关闭按钮
     .drawer-box-out {
         width: 30px;
@@ -145,5 +152,4 @@
         align-items: center;
         cursor: pointer;
     }
-    
 }
diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.vue
index 449e1d7..d7ddabc 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/index.vue
+++ b/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"
diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.less b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.less
index 7bec33a..4bab724 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.less
+++ b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.less
@@ -392,12 +392,22 @@
 
   .zmhlbtn {
     position: relative;
-  }
-
-  // 禁用图标
-  .anticon-stop {
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
+    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;
+        left: 3px;
+        top: 15px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.vue
index 1fbe132..477c65c 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/airConditionControlSystem/tabs1.vue
@@ -1,243 +1,266 @@
 <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
-            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 class="light-area">
+      <div class="light-area-tab"></div>
+      <span class="light-area-text">空调区域</span>
     </div>
-    <!-- 空调分组部分 -->
-    <div>
-      <div class="circuit-area">
-        <div class="circuit-tab"></div>
-        <span class="circuit-text">空调分组</span>
-        <div class="btn2">
+    <!-- 空调区域按钮部分 -->
+    <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">空调分组</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-switch
-            v-model:checked="selectAllCheckbox"
-            :disabled="singleSelection"
-            :class="{
-              'blue-background': selectAllCheckbox,
-              'grey-background': !selectAllCheckbox,
-            }"
-            @change="toggleAllSelection" />
-          <button class="allBtn">全选</button>
-          <button class="both" @click="selectAll">
-            {{ singleSelection ? '多选' : '单选' }}
-          </button>
-        </div>
-      </div>
-      <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="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.name }}
-          </button>
-          <div style="margin-top: 10px">
-            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
-          </div>
-        </template>
-        <template v-else>
-          <button
-            v-for="(button, index) in buttons2"
-            :key="index"
-            :class="{ btn: true, selected: button.selected }"
-            class="zmhlbtn"
-            @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.name }}
-          </button>
-          <div style="margin-top: 10px">
-            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
-          </div>
-        </template>
+        </a-badge>
+        <a-switch
+          v-model:checked="selectAllCheckbox"
+          :disabled="singleSelection"
+          :class="{
+            'blue-background': selectAllCheckbox,
+            'grey-background': !selectAllCheckbox,
+          }"
+          @change="toggleAllSelection" />
+        <button class="allBtn">全选</button>
+        <button class="both" @click="selectAll">
+          {{ singleSelection ? '多选' : '单选' }}
+        </button>
       </div>
     </div>
-    <!-- 控制模式部分 -->
-    <div v-show="thisButton2.dataCode">
-      <div class="control-area">
-        <div class="control-tab"></div>
-        <span class="control-text">控制模式</span>
-      </div>
-      <!-- 控制模式按钮部分 -->
-      <div class="control-mode-btn-area">
+    <div class="btnArea">
+      <template v-if="!showAllButtons">
         <button
-          v-for="(button3, index) in thisButton2.childList"
+          v-for="(button, index) in limitedButtons2"
           :key="index"
-          class="btn"
-          :class="{ selected: button3.selectAble }"
-          @click="selectButton3(button3)">
-          {{ button3.name }}
+          :class="{ btn: true, selected: button.selected }"
+          class="zmhlbtn"
+          @click="changeLine(button)">
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
+          {{ button.name }}
         </button>
-      </div>
-    </div>
-    <!-- 控制场景部分 -->
-    <div v-show="thisButton2.dataCode">
-      <div class="control-scene-area">
-        <div class="control-scene-tab"></div>
-        <span class="control-scene-text">启动模式</span>
-        <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
-          >多选模式下会修改当前选中的所有回路</div
-        >
-      </div>
-      <!-- 控制场景按钮部分 -->
-      <div class="control-scene-btn-area">
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
+        </div>
+      </template>
+      <template v-else>
         <button
-          v-for="(button4, index) in thisButton3.childList"
+          v-for="(button, index) in buttons2"
           :key="index"
-          :class="{ btn: true, selected: button4.executeStatus.value != 0 }"
-          @click="selectButton4(button4)">
-          {{ button4.name }}
+          :class="{ btn: true, selected: button.selected }"
+          class="zmhlbtn"
+          @click="changeLine(button)">
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
+          {{ button.name }}
         </button>
-      </div>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
+        </div>
+      </template>
     </div>
-    <!-- 底部按钮区 -->
-    <div class="bottom">
-      <a-badge :offset="[-10, 2]" :count="changeList.length">
-        <a-popconfirm
-          title="刷新将会取消已作出的修改"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="refresh(false)"
-          @cancel="changeCancel">
-          <button class="flushed">刷新</button>
-        </a-popconfirm>
-      </a-badge>
-
-      <a-spin :spinning="buttonLoading">
-        <button class="execute" @click="showModal">执行</button>
-      </a-spin>
+  </div>
+  <!-- 控制模式部分 -->
+  <div v-show="thisButton2.dataCode">
+    <div class="control-area">
+      <div class="control-tab"></div>
+      <span class="control-text">控制模式</span>
+    </div>
+    <!-- 控制模式按钮部分 -->
+    <div class="control-mode-btn-area">
+      <button
+        v-for="(button3, index) in thisButton2.childList"
+        :key="index"
+        class="btn"
+        :class="{ selected: button3.selectAble }"
+        @click="selectButton3(button3)">
+        {{ button3.name }}
+      </button>
+    </div>
+  </div>
+  <!-- 控制场景部分 -->
+  <div v-show="thisButton2.dataCode">
+    <div class="control-scene-area">
+      <div class="control-scene-tab"></div>
+      <span class="control-scene-text">启动模式</span>
+      <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
+        >多选模式下会修改当前选中的所有回路</div
+      >
     </div>
+    <!-- 控制场景按钮部分 -->
+    <div class="control-scene-btn-area">
+      <button
+        v-for="(button4, index) in thisButton3.childList"
+        :key="index"
+        :class="{ btn: true, selected: button4.executeStatus.value != 0 }"
+        @click="selectButton4(button4)">
+        {{ button4.name }}
+      </button>
+    </div>
+  </div>
+  <!-- 底部按钮区 -->
+  <div class="bottom">
+    <a-badge :offset="[-10, 2]" :count="changeList.length">
+      <a-popconfirm
+        title="刷新将会取消已作出的修改"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="refresh(false)"
+        @cancel="changeCancel">
+        <button class="flushed">刷新</button>
+      </a-popconfirm>
+    </a-badge>
+    <button class="execute" @click="showModal">执行</button>
+  </div>
 
-    <!-- 点击执行时的弹出框 -->
-    <div class="out-dialog" v-if="executeVisible">
-      <div class="content">
-        <div>
-          <div class="div-operation"></div>
-          <span class="text-operation">变更内容 </span>
-        </div>
-        <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)"
-                  >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
-                >
+  <!-- 点击执行时的弹出框 -->
+  <div class="out-dialog" v-if="executeVisible">
+    <div class="content">
+      <div>
+        <div class="div-operation"></div>
+        <span class="text-operation">变更内容 </span>
+      </div>
+      <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)"
+                >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
+              >
+            </div>
+            <a-popconfirm
+              title="此操作将会撤销修改"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="delBtn(item)"
+              @cancel="changeCancel">
+              <button class="cxbtn">撤销</button>
+            </a-popconfirm>
+          </div>
+          <div class="btn-box">
+            <div class="btn-item">
+              <div class="left">控制模式</div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span>
               </div>
-              <a-popconfirm
-                title="此操作将会撤销修改"
-                ok-text="确定"
-                cancel-text="取消"
-                @confirm="delBtn(item)"
-                @cancel="changeCancel">
-                <button class="cxbtn">撤销</button>
-              </a-popconfirm>
             </div>
-            <div class="btn-box">
-              <div class="btn-item">
-                <div class="left">控制模式</div>
-                <div class="right">
-                  <span>手动</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>自动</span>
-                </div>
+            <div class="btn-item">
+              <div class="left"> 亮度 </div>
+              <div class="right">
+                <!-- 数字0也会被判为false，故只判断undefined 和 null -->
+                <span>{{
+                  item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{
+                  item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
+                }}</span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 亮度 </div>
-                <div class="right">
-                  <!-- 数字0也会被判为false，故只判断undefined 和 null -->
-                  <span>{{
-                    item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>{{
-                    item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
-                  }}</span>
-                </div>
+            </div>
+            <div class="btn-item">
+              <div class="left"> 控制场景 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{
+                  item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
+                }}</span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 控制场景 </div>
-                <div class="right">
-                  <span>{{
-                    item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>{{
-                    item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
-                  }}</span>
-                </div>
+            </div>
+            <div class="btn-item">
+              <div class="left"> 色温 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>
+                  {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
+                </span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 色温 </div>
-                <div class="right">
-                  <span>{{
-                    item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>
-                    {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
-                  </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>
-      <div style="width: 100%; height: 60px"></div>
-      <div class="button-box">
-        <button class="cancel" @click="executeVisible = false">取消</button>
-        <a-popconfirm
-          title="此操作将提交以上修改内容"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="submitChangeList"
-          @cancel="changeCancel">
-          <button class="execute">执行</button>
-        </a-popconfirm>
-      </div>
     </div>
-  </a-spin>
+    <div style="width: 100%; height: 60px"></div>
+    <div class="button-box">
+      <button class="cancel" @click="executeVisible = false">取消</button>
+      <a-popconfirm
+        title="此操作将提交以上修改内容"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="submitChangeList"
+        @cancel="changeCancel">
+        <button class="execute">执行</button>
+      </a-popconfirm>
+    </div>
+  </div>
 </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 == '') {
-      return message.info('请选择空调分组');
-    }
-    // 获取最近交互过的按钮
-    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;
+    // 获取选中线路
+    let valid = buttons2.value.filter((item: any) => {
+      return item.selected;
+    });
+    // 未选中线路
+    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 {
-          isLoading.value = false;
+          lockList.value.push({
+            deviceGroup: item.dataCode,
+            deviceGroupName: item.name,
+            region: item.treePid,
+            regionName: '',
+            before: item.lockStatus,
+            lockStatus: after,
+          });
         }
-      })
-      .catch(() => {
-        isLoading.value = false;
+        // 修改
+        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(() => {
-        buttonLoading.value = false;
-      });
+      .catch(() => {});
   };
   // 通用取消
   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,
       })
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
index 3d550c5..40319ec 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
+++ b/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;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
index ae84fcd..396321e 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
+++ b/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;
-            left: 10px;
+            top: 15px;
+            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;
             }
         }
         // 大区分区
@@ -128,7 +132,10 @@
         justify-content: center;
         align-items: center;
         cursor: pointer;
-    }
+    }  
+}
+.drawer-item {
+    position: relative;
     // 抽屉关闭按钮
     .drawer-box-out {
         width: 30px;
@@ -145,5 +152,4 @@
         align-items: center;
         cursor: pointer;
     }
-    
 }
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index a82d117..ded560b 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/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;
       });
   };
 
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
index 1991f66..d94b570 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/lightPosition.ts
+++ b/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' },
+];
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
index 36cc39c..d71139d 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
@@ -413,12 +413,22 @@
 
   .zmhlbtn {
     position: relative;
-  }
-
-  // 禁用图标
-  .anticon-stop {
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
+    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;
+        left: 3px;
+        top: 15px;
+      }
+    }
   }
 }
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
index 108a086..3c1cbbc 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -1,243 +1,266 @@
 <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
-            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 class="light-area">
+      <div class="light-area-tab"></div>
+      <span class="light-area-text"> 照明区域 </span>
     </div>
-    <!-- 照明回路部分 -->
-    <div>
-      <div class="circuit-area">
-        <div class="circuit-tab"></div>
-        <span class="circuit-text">照明回路</span>
-        <div class="btn2">
+    <!-- 照明区域按钮部分 -->
+    <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">照明回路</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-switch
-            v-model:checked="selectAllCheckbox"
-            :disabled="singleSelection"
-            :class="{
-              'blue-background': selectAllCheckbox,
-              'grey-background': !selectAllCheckbox,
-            }"
-            @change="toggleAllSelection" />
-          <button class="allBtn">全选</button>
-          <button class="both" @click="selectAll">
-            {{ singleSelection ? '多选' : '单选' }}
-          </button>
-        </div>
-      </div>
-      <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="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.name }}
-          </button>
-          <div style="margin-top: 10px">
-            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
-          </div>
-        </template>
-        <template v-else>
-          <button
-            v-for="(button, index) in buttons2"
-            :key="index"
-            :class="{ btn: true, selected: button.selected }"
-            class="zmhlbtn"
-            @click="changeLine(button)">
-            <stop-outlined v-if="button.ctrlStatus" />
-            {{ button.name }}
-          </button>
-          <div style="margin-top: 10px">
-            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
-          </div>
-        </template>
+        </a-badge>
+        <a-switch
+          v-model:checked="selectAllCheckbox"
+          :disabled="singleSelection"
+          :class="{
+            'blue-background': selectAllCheckbox,
+            'grey-background': !selectAllCheckbox,
+          }"
+          @change="toggleAllSelection" />
+        <button class="allBtn">全选</button>
+        <button class="both" @click="selectAll">
+          {{ singleSelection ? '多选' : '单选' }}
+        </button>
       </div>
     </div>
-    <!-- 控制模式部分 -->
-    <div v-show="thisButton2.dataCode">
-      <div class="control-area">
-        <div class="control-tab"></div>
-        <span class="control-text"> 控制模式 </span>
-      </div>
-      <!-- 控制模式按钮部分 -->
-      <div class="control-mode-btn-area">
+    <div class="btnArea">
+      <template v-if="!showAllButtons">
         <button
-          v-for="(button3, index) in thisButton2.childList"
+          v-for="(button, index) in limitedButtons2"
           :key="index"
-          class="btn"
-          :class="{ selected: button3.selectAble }"
-          @click="selectButton3(button3)">
-          {{ button3.name }}
+          :class="{ btn: true, selected: button.selected }"
+          class="zmhlbtn"
+          @click="changeLine(button)">
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
+          {{ button.name }}
         </button>
-      </div>
-    </div>
-    <!-- 控制场景部分 -->
-    <div v-show="thisButton2.dataCode">
-      <div class="control-scene-area">
-        <div class="control-scene-tab"></div>
-        <span class="control-scene-text"> 控制场景 </span>
-        <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
-          >多选模式下会修改当前选中的所有回路</div
-        >
-      </div>
-      <!-- 控制场景按钮部分 -->
-      <div class="control-scene-btn-area">
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
+        </div>
+      </template>
+      <template v-else>
         <button
-          v-for="(button4, index) in thisButton3.childList"
+          v-for="(button, index) in buttons2"
           :key="index"
-          :class="{ btn: true, selected: button4.executeStatus.value != 0 }"
-          @click="selectButton4(button4)">
-          {{ button4.name }}
+          :class="{ btn: true, selected: button.selected }"
+          class="zmhlbtn"
+          @click="changeLine(button)">
+          <div v-if="button.lockStatus" class="btn-back">
+            <stop-outlined />
+          </div>
+          {{ button.name }}
         </button>
-      </div>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
+        </div>
+      </template>
     </div>
-    <!-- 底部按钮区 -->
-    <div class="bottom">
-      <a-badge :offset="[-10, 2]" :count="changeList.length">
-        <a-popconfirm
-          title="刷新将会取消已作出的修改"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="refresh(false)"
-          @cancel="changeCancel">
-          <button class="flushed">刷新</button>
-        </a-popconfirm>
-      </a-badge>
-
-      <a-spin :spinning="buttonLoading">
-        <button class="execute" @click="showModal">执行</button>
-      </a-spin>
+  </div>
+  <!-- 控制模式部分 -->
+  <div v-show="thisButton2.dataCode">
+    <div class="control-area">
+      <div class="control-tab"></div>
+      <span class="control-text"> 控制模式 </span>
     </div>
+    <!-- 控制模式按钮部分 -->
+    <div class="control-mode-btn-area">
+      <button
+        v-for="(button3, index) in thisButton2.childList"
+        :key="index"
+        class="btn"
+        :class="{ selected: button3.selectAble }"
+        @click="selectButton3(button3)">
+        {{ button3.name }}
+      </button>
+    </div>
+  </div>
+  <!-- 控制场景部分 -->
+  <div v-show="thisButton2.dataCode">
+    <div class="control-scene-area">
+      <div class="control-scene-tab"></div>
+      <span class="control-scene-text"> 控制场景 </span>
+      <div v-if="!singleSelection" style="flex: 1; color: red; text-align: right"
+        >多选模式下会修改当前选中的所有回路</div
+      >
+    </div>
+    <!-- 控制场景按钮部分 -->
+    <div class="control-scene-btn-area">
+      <button
+        v-for="(button4, index) in thisButton3.childList"
+        :key="index"
+        :class="{ btn: true, selected: button4.executeStatus.value != 0 }"
+        @click="selectButton4(button4)">
+        {{ button4.name }}
+      </button>
+    </div>
+  </div>
+  <!-- 底部按钮区 -->
+  <div class="bottom">
+    <a-badge :offset="[-10, 2]" :count="changeList.length">
+      <a-popconfirm
+        title="刷新将会取消已作出的修改"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="refresh(false)"
+        @cancel="changeCancel">
+        <button class="flushed">刷新</button>
+      </a-popconfirm>
+    </a-badge>
+    <button class="execute" @click="showModal">执行</button>
+  </div>
 
-    <!-- 点击执行时的弹出框 -->
-    <div class="out-dialog" v-if="executeVisible">
-      <div class="content">
-        <div>
-          <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="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)"
-                  >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
-                >
-              </div>
-              <a-popconfirm
-                title="此操作将会撤销修改"
-                ok-text="确定"
-                cancel-text="取消"
-                @confirm="delBtn(item)"
-                @cancel="changeCancel">
-                <button class="cxbtn">撤销</button>
-              </a-popconfirm>
+  <!-- 点击执行时的弹出框 -->
+  <div class="out-dialog" v-if="executeVisible">
+    <div class="content">
+      <div>
+        <div class="div-operation"></div>
+        <span class="text-operation">变更内容 </span>
+      </div>
+      <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: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
+              >
+            </div>
+            <a-popconfirm
+              title="此操作将会撤销修改"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="delBtn(item)"
+              @cancel="changeCancel">
+              <button class="cxbtn">撤销</button>
+            </a-popconfirm>
+          </div>
+          <div class="btn-box">
+            <div class="btn-item">
+              <div class="left">控制模式</div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span></div
+              >
             </div>
-            <div class="btn-box">
-              <div class="btn-item">
-                <div class="left">控制模式</div>
-                <div class="right">
-                  <span>手动</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>自动</span>
-                </div>
+            <div class="btn-item">
+              <div class="left"> 亮度 </div>
+              <div class="right">
+                <!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
+                <span>{{
+                  item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{
+                  item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
+                }}</span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 亮度 </div>
-                <div class="right">
-                  <!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
-                  <span>{{
-                    item?.stateBefore?.brightness != undefined ? item.stateBefore.brightness : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>{{
-                    item?.stateAfter?.brightness != undefined ? item.stateAfter.brightness : '--'
-                  }}</span>
-                </div>
+            </div>
+            <div class="btn-item">
+              <div class="left"> 控制场景 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>{{
+                  item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
+                }}</span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 控制场景 </div>
-                <div class="right">
-                  <span>{{
-                    item?.stateBefore?.scene?.label ? item.stateBefore.scene.label : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>{{
-                    item?.stateAfter?.scene?.label ? item.stateAfter.scene.label : '--'
-                  }}</span>
-                </div>
+            </div>
+            <div class="btn-item">
+              <div class="left"> 色温 </div>
+              <div class="right">
+                <span>{{
+                  item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
+                }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>
+                  {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
+                </span>
               </div>
-              <div class="btn-item">
-                <div class="left"> 色温 </div>
-                <div class="right">
-                  <span>{{
-                    item?.stateBefore?.color != undefined ? item.stateBefore.color : '--'
-                  }}</span>
-                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                  <span>
-                    {{ item?.stateAfter?.color != undefined ? item.stateAfter.color : '--' }}
-                  </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>
-      <div style="width: 100%; height: 60px"></div>
-      <div class="button-box">
-        <button class="cancel" @click="executeVisible = false">取消</button>
-        <a-popconfirm
-          title="此操作将提交以上修改内容"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="submitChangeList"
-          @cancel="changeCancel">
-          <button class="execute">执行</button>
-        </a-popconfirm>
-      </div>
     </div>
-  </a-spin>
+    <div style="width: 100%; height: 60px"></div>
+    <div class="button-box">
+      <button class="cancel" @click="executeVisible = false">取消</button>
+      <a-popconfirm
+        title="此操作将提交以上修改内容"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="submitChangeList"
+        @cancel="changeCancel">
+        <button class="execute">执行</button>
+      </a-popconfirm>
+    </div>
+  </div>
 </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 == '') {
-      return message.info('请选择照明回路');
-    }
-    // 获取最近交互过的按钮
-    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;
+    // 获取选中线路
+    let valid = buttons2.value.filter((item: any) => {
+      return item.selected;
+    });
+    // 未选中线路
+    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 {
-          isLoading.value = false;
+          lockList.value.push({
+            deviceGroup: item.dataCode,
+            deviceGroupName: item.name,
+            region: item.treePid,
+            regionName: '',
+            before: item.lockStatus,
+            lockStatus: after,
+          });
         }
-      })
-      .catch(() => {
-        isLoading.value = false;
+        // 修改
+        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(() => {
-        buttonLoading.value = false;
-      });
+      .catch(() => {});
   };
   // 通用取消
   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.before = obj.stateBefore.scene.value;
+    obj.scene = obj?.stateAfter?.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(() => {});
   };
 
   // 其他业务 ========================================================================