From a9e69984305b6aa8d3738a4b890cd5d9d1dd2b85 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Thu, 25 Jul 2024 14:14:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E7=94=B5=E6=A2=AF=E7=B3=BB=E7=BB=9F/?=
 =?UTF-8?q?=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/view/equipmentControl/liftSystem/index.vue |  68 +-
 .../view/equipmentControl/liftSystem/liftInfo.vue  | 171 ++--
 .../equipmentControl/lightingManage/indexs.vue     | 450 +++++------
 .../view/equipmentControl/lightingManage/light.vue | 239 +++---
 .../view/equipmentControl/lightingManage/tabs1.vue | 891 +++++++++++----------
 .../view/equipmentControl/lightingManage/tabs2.vue | 329 ++++----
 .../view/equipmentControl/lightingManage/tabs3.vue | 330 ++++----
 7 files changed, 1242 insertions(+), 1236 deletions(-)

diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
index b9b21c4..c6705cc 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
@@ -1,53 +1,47 @@
 <template>
   <div class="map-box">
     <div class="map">
-      <liftInfo></liftInfo>
+      <liftInfo />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-import liftInfo from './liftInfo.vue'
-// 请求
-import { message } from 'ant-design-vue';
+  import { ref, onMounted } from 'vue';
+  import liftInfo from './liftInfo.vue';
+  // 请求
 
-// 初始化 ===========================================================
+  // 初始化 ===========================================================
 
-onMounted(() => {
-
-})
-
-// tab页部分 ========================================================
-
-// 表格数据
-const dataSource = ref([]);
+  onMounted(() => {});
 
+  // tab页部分 ========================================================
 
+  // 表格数据
+  const dataSource = ref([]);
 </script>
 <style lang="less" scoped>
-.map-box {
-  // 颜色变量，用于区别颜色
-
-  // 正常 - 开启 - 上行 -下行 
-  --on: #0DFFA4;
-  // 关闭
-  --off: #BFCDE2;
-  // 暂停 - 维修
-  --pause: #FFBC46;
-  // 告警 - 急停
-  --stop: #F36163;
-  // 故障
-  --fault: #FF7636;
-  // 未知
-  --unknown: #A742FF; 
-  width: 100%;
-  height: 100%;
-  .map {
-    width: 1280px;
-    height: 720px;
-    background-image: url(../image/bg.jpg);
+  .map-box {
+    // 颜色变量，用于区别颜色
+
+    // 正常 - 开启 - 上行 -下行
+    --on: #0dffa4;
+    // 关闭
+    --off: #bfcde2;
+    // 暂停 - 维修
+    --pause: #ffbc46;
+    // 告警 - 急停
+    --stop: #f36163;
+    // 故障
+    --fault: #ff7636;
+    // 未知
+    --unknown: #a742ff;
+    width: 100%;
+    height: 100%;
+    .map {
+      width: 1280px;
+      height: 720px;
+      background-image: url(../image/bg.jpg);
+    }
   }
-}
-
 </style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
index 3b63442..d6e50fd 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
@@ -10,7 +10,7 @@
         <div class="item-box">
           <div class="icon">
             <div class="icon-item">
-              <img src="../image/liftState/lift-normal.svg" alt="">
+              <img src="../image/liftState/lift-normal.svg" alt="" />
             </div>
           </div>
         </div>
@@ -21,7 +21,7 @@
         <div class="item-box">
           <div class="icon">
             <div class="icon-item">
-              <img src="../image/liftState/lift-normal.svg" alt="">
+              <img src="../image/liftState/lift-normal.svg" alt="" />
             </div>
           </div>
         </div>
@@ -32,7 +32,7 @@
         <div class="item-box">
           <div class="icon">
             <div class="icon-item">
-              <img src="../image/liftState/lift-normal.svg" alt="">
+              <img src="../image/liftState/lift-normal.svg" alt="" />
             </div>
           </div>
         </div>
@@ -43,109 +43,104 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
 
-// 请求
+  // 请求
 
-// 初始化 ===========================================================
+  // 初始化 ===========================================================
 
-onMounted(() => {
-
-})
-
-// tab页部分 ========================================================
-
-// 运行状态
-const runState = ref('1');
-// 电梯状态
-const liftState = ref('2');
+  onMounted(() => {});
 
+  // tab页部分 ========================================================
 
+  // 运行状态
+  const runState = ref('1');
+  // 电梯状态
+  const liftState = ref('2');
 </script>
 <style lang="less" scoped>
-// 面板
-.info-box {
-  // 字体颜色变量
-  --text: rgb(20, 255, 255);
+  // 面板
+  .info-box {
+    // 字体颜色变量
+    --text: rgb(20, 255, 255);
 
-  width: 240px;
-  height: 130px;
-  display: flex;
-  gap: 5px;
-  flex-direction: column;
-  background: rgb(17, 44, 86, 0.9);
-  border-radius: 8px;
-  box-sizing: border-box;
-  padding: 8px;
-  border: 3px solid var(--text);
-  // 面板标题
-  .box-title {
-    height: auto;
-    color: var(--text);
-    // 标题前小方块
-    .dot {
-      display: inline-block;
-      width: 2px;
-      height: 16px;
-      vertical-align: middle;
-      background: var(--text);
-    }
-    // 标题
-    span {
-      padding-left: 8px;
-    }
-  }
-  // 下半部分
-  .box-inner {
-    flex: 1;
+    width: 240px;
+    height: 130px;
     display: flex;
-    padding: 0 10px;
-    // 单个盒子（3盒子）
-    .item {
+    gap: 5px;
+    flex-direction: column;
+    background: rgb(17, 44, 86, 0.9);
+    border-radius: 8px;
+    box-sizing: border-box;
+    padding: 8px;
+    border: 3px solid var(--text);
+    // 面板标题
+    .box-title {
+      height: auto;
+      color: var(--text);
+      // 标题前小方块
+      .dot {
+        display: inline-block;
+        width: 2px;
+        height: 16px;
+        vertical-align: middle;
+        background: var(--text);
+      }
+      // 标题
+      span {
+        padding-left: 8px;
+      }
+    }
+    // 下半部分
+    .box-inner {
       flex: 1;
       display: flex;
-      flex-direction: column;
-      // 盒子中放置图片的容器
-      .item-box {
+      padding: 0 10px;
+      // 单个盒子（3盒子）
+      .item {
         flex: 1;
         display: flex;
-        align-items: center;
-        justify-content: center;
-        // border: 1px solid red;
-        .icon {
-          width: 55px;
-          height: 55px;
-          background-image: url(../image/box.svg);
-          background-size: 130% 130%;
-          background-repeat: no-repeat;
-          background-position: left -8px top -8px;
+        flex-direction: column;
+        // 盒子中放置图片的容器
+        .item-box {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           // border: 1px solid red;
-          position: relative;
-          .icon-item {
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            top: 0;
-            margin: auto;
-            img {
-              width: 100%;
-              height: 100%;
+          .icon {
+            width: 55px;
+            height: 55px;
+            background-image: url(../image/box.svg);
+            background-size: 130% 130%;
+            background-repeat: no-repeat;
+            background-position: left -8px top -8px;
+            // border: 1px solid red;
+            position: relative;
+            .icon-item {
+              position: absolute;
+              width: 20px;
+              height: 20px;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              top: 0;
+              margin: auto;
+              img {
+                width: 100%;
+                height: 100%;
+              }
             }
           }
         }
-      }
-      .item-text {
-        height: 20px;
-        text-align: center;
-        font-size: 12px;
-        color: white;
-        user-select: none;
+        .item-text {
+          height: 20px;
+          text-align: center;
+          font-size: 12px;
+          color: white;
+          user-select: none;
+        }
       }
     }
   }
-}
-
 </style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index 1297d9d..e03748d 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -1,286 +1,276 @@
 <template>
-    <div class="lighting-box">
-        <div class="lighting-img-box">
-            <!-- 左上角，区域切换 -->
-            <div class="btn-box">
-                <button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
+  <div class="lighting-box">
+    <div class="lighting-img-box">
+      <!-- 左上角，区域切换 -->
+      <div class="btn-box">
+        <button v-for="item in floorData" class="btn-item" @click="changeFloor(item.childList)">{{
+          item.name
+        }}</button>
+      </div>
+      <!-- 楼层区域 -->
+      <div class="area">
+        <div
+          v-for="(item, index) in treeData"
+          :class="computedClass(item.id)"
+          @click="changeThisArea([item])"
+          :key="index">
+          <div v-for="(v, i) in item.childList" :key="i" class="light-group">
+            <div class="group-shadow" @click.stop="changeThisArea([item, v])">
+              <div :class="computedClass(v.id)" class="shadow-box"></div>
             </div>
-            <!-- 楼层区域 -->
-            <div class="area">
-                <div 
-                v-for="(item, index) in treeData" 
-                :class="computedClass(item.id)"
-                @click="changeThisArea([item])"
-                :key="index">
-                    <div v-for="(v, i) in item.childList" :key="i" class="light-group">
-                        <div class="group-shadow" @click.stop="changeThisArea([item, v])">
-                            <div :class="computedClass(v.id)" class="shadow-box"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- 照明设备 -->
-            <div class="lights">
-                <light v-for="(item, index) in bulbs" 
-                :key="index" 
-                :styleObject="item.styleText" 
-                :type="item.type" 
-                :visible="item.visible">
-                </light>
-            </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>
         </div>
-        <!-- 右侧抽屉 -->
-        <a-drawer
-        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"
-        id="drawer"
-        :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
-            <a-tabs v-model:activeKey="activeKey">
-                <a-tab-pane key="1" tab="控制面板">
-                    <tabs1 
-                    ref="tabs1Ref"
-                    @changeArea="changeArea" 
-                    @reset="reset" 
-                    :treeData="treeData" 
-                    ></tabs1>
-                </a-tab-pane>
-                <a-tab-pane key="2" tab="计划列表" force-render>
-                    <tabs2></tabs2>
-                </a-tab-pane>
-                <a-tab-pane key="3" tab="日志">
-                    <tabs3></tabs3>
-                </a-tab-pane>
-            </a-tabs>
-        </a-drawer>
+      </div>
+      <!-- 照明设备 -->
+      <div class="lights">
+        <light
+          v-for="(item, index) in bulbs"
+          :key="index"
+          :styleObject="item.styleText"
+          :type="item.type"
+          :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"
+      class="drawer-item"
+      width="496"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板">
+          <tabs1 ref="tabs1Ref" @changeArea="changeArea" @reset="reset" :treeData="treeData" />
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <tabs2 />
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志">
+          <tabs3 />
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
+  </div>
 </template>
-  
-<script setup lang="ts">
-
-import { ref, onMounted } from 'vue';
-// 组件
-import light from './light.vue';
-import tabs1 from './tabs1.vue'
-import tabs2 from './tabs2.vue'
-import tabs3 from './tabs3.vue'
-// 请求
-import { http } from '/nerv-lib/util/http';
-import { lightingManage } from '/@/api/IlluminationInfo';
-// ICON
-import {
-    DoubleLeftOutlined,
-    DoubleRightOutlined
-} from '@ant-design/icons-vue';
 
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  // 组件
+  import light from './light.vue';
+  import tabs1 from './tabs1.vue';
+  import tabs2 from './tabs2.vue';
+  import tabs3 from './tabs3.vue';
+  // 请求
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
+  // ICON
+  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
 
-// 初始化 =======================================================
+  // 初始化 =======================================================
 
-onMounted(() => {
+  onMounted(() => {
     // 获得分区与线路的结构
-    getAllArea()
-})
-
-// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
-const preload = ref(false)
+    getAllArea();
+  });
 
+  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+  const preload = ref(false);
 
-// 分层业务 =====================================================
+  // 分层业务 =====================================================
 
-// 所有楼层的数据
-const floorData = ref([])
-// 左上角分层切换
-const changeFloor = (area: any) => {
+  // 所有楼层的数据
+  const floorData = ref([]);
+  // 左上角分层切换
+  const changeFloor = (area: any) => {
     // 重置数据
-    reset()
+    reset();
     // 重置视图
-    changeArea(['1'])
+    changeArea(['1']);
     // 切换楼层数据
-    treeData.value = area
+    treeData.value = area;
     // 默认选择第一项
-    treeData.value[0].selected = true
-}
+    treeData.value[0].selected = true;
+  };
 
+  // 分区业务 =====================================================
 
-// 分区业务 =====================================================
-
-// 分区结构树
-const treeData = ref([])
-// 当前选中的分区序列 - 用于样式渲染
-const area = ref(['1'])
-// 线路内小灯泡 - 此处位置需前端写死
-const bulbs = ref([
+  // 分区结构树
+  const treeData = ref([]);
+  // 当前选中的分区序列 - 用于样式渲染
+  const area = ref(['1']);
+  // 线路内小灯泡 - 此处位置需前端写死
+  const bulbs = ref([
     {
-        styleText: { left: '180px', bottom: '200px' },
-        area: 1,
-        type: 1,
-        visible: true
+      styleText: { left: '180px', bottom: '200px' },
+      area: 1,
+      type: 1,
+      visible: true,
     },
     {
-        styleText: { left: '230px', bottom: '125px' },
-        area: 1,
-        type: 2,
-        visible: true
+      styleText: { left: '230px', bottom: '125px' },
+      area: 1,
+      type: 2,
+      visible: true,
     },
     {
-        styleText: { left: '320px', bottom: '140px' },
-        area: 1,
-        type: 3,
-        visible: true
+      styleText: { left: '320px', bottom: '140px' },
+      area: 1,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '245px', bottom: '230px' },
-        area: 1,
-        type: 3,
-        visible: true
+      styleText: { left: '245px', bottom: '230px' },
+      area: 1,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '405px', bottom: '230px' },
-        area: 2,
-        type: 3,
-        visible: true
+      styleText: { left: '405px', bottom: '230px' },
+      area: 2,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '460px', bottom: '180px' },
-        area: 2,
-        type: 3,
-        visible: true
+      styleText: { left: '460px', bottom: '180px' },
+      area: 2,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '360px', bottom: '275px' },
-        area: 2,
-        type: 3,
-        visible: true
+      styleText: { left: '360px', bottom: '275px' },
+      area: 2,
+      type: 3,
+      visible: true,
     },
     {
-        styleText: { left: '715px', bottom: '320px' },
-        area: 3,
-        type: 1,
-        visible: true
+      styleText: { left: '715px', bottom: '320px' },
+      area: 3,
+      type: 1,
+      visible: true,
     },
-])
-// 由子组件控制的分区与线路切换
-const changeArea = (result: any) => {
-    console.log(result,'changeArea')
+  ]);
+  // 由子组件控制的分区与线路切换
+  const changeArea = (result: any) => {
+    console.log(result, 'changeArea');
     // 数组
     if (Array.isArray(result)) {
-        area.value = result
-    // 不是数组
+      area.value = result;
+      // 不是数组
     } else {
-        area.value.length = 0
-        area.value[0] = String(result)
-    } 
-}
-// 由当前组件控制的分区切换
-const changeThisArea = (result: any) => {
-    console.log(result, 'changeThisArea')
+      area.value.length = 0;
+      area.value[0] = String(result);
+    }
+  };
+  // 由当前组件控制的分区切换
+  const changeThisArea = (result: any) => {
+    console.log(result, 'changeThisArea');
     // 修改前，将所有选项置空
-    reset()
+    reset();
     let level1 = result[0];
-    area.value.length = 0
+    area.value.length = 0;
     // 只选择了分区
     if (result.length === 1) {
-        result[0].selected = true
-        area.value.push(result[0].id)
-        // 控制子组件按钮区
-        tabs1Ref.value.changeArea(result[0])
-    // 选择了分区 + 线路
+      result[0].selected = true;
+      area.value.push(result[0].id);
+      // 控制子组件按钮区
+      tabs1Ref.value.changeArea(result[0]);
+      // 选择了分区 + 线路
     } else if (result.length === 2) {
-        // 如果没有分区，默认选择第一个
-        if (!level1) {
-            level1 = treeData.value[0]
-        }
-        // 选中状态都设为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])
+      // 如果没有分区，默认选择第一个
+      if (!level1) {
+        level1 = treeData.value[0];
+      }
+      // 选中状态都设为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]);
     }
-}
-// 重置分区树所有当前选项
-const reset = () => {
+  };
+  // 重置分区树所有当前选项
+  const reset = () => {
     treeData.value.forEach((item: any) => {
-        item.selected = false
-        item.childList.forEach((i: any) => {
-            i.selected = false
-        })
-    })
-}
-// 俯视图分区选中计算函数
-const computedClass = (string: string) => {
+      item.selected = false;
+      item.childList.forEach((i: any) => {
+        i.selected = false;
+      });
+    });
+  };
+  // 俯视图分区选中计算函数
+  const computedClass = (string: string) => {
     if (area.value.indexOf(string) != -1) {
-        return `isActive area-item area${string}`
+      return `isActive area-item area${string}`;
     } else {
-        return `area-item area${string}`
+      return `area-item area${string}`;
     }
-}
+  };
 
-// 获得所有分区
-const getAllArea = () => {
-    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
-        const data = res.data
-        floorData.value = data
-        /** 只在前端使用的变量
-         * @param id 用于判断样式和层级的前端属性
-         * @param selected 用于表示是否选中的前端属性
-         */
-        data.forEach((floor: any) => {
-            floor.childList.forEach((item: any, index: number) => {
-                if (index == 0) {
-                    item.selected = true
-                } else {
-                    item.selected = false
-                }
-                item.id = String(index + 1)
-                item.childList.forEach((v: any, i: number) => {
-                    v.selected = false
-                    v.id = (index + 1) + '-' + (i + 1)
-                })
-            })
-        })
-        // 默认展示 线路 1-1
-        treeData.value = data[0].childList
-        // 开始预加载
-        preload.value = true
-    })
-}
+  // 获得所有分区
+  const getAllArea = () => {
+    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then((res) => {
+      const data = res.data;
+      floorData.value = data;
+      /** 只在前端使用的变量
+       * @param id 用于判断样式和层级的前端属性
+       * @param selected 用于表示是否选中的前端属性
+       */
+      data.forEach((floor: any) => {
+        floor.childList.forEach((item: any, index: number) => {
+          if (index == 0) {
+            item.selected = true;
+          } else {
+            item.selected = false;
+          }
+          item.id = String(index + 1);
+          item.childList.forEach((v: any, i: number) => {
+            v.selected = false;
+            v.id = index + 1 + '-' + (i + 1);
+          });
+        });
+      });
+      // 默认展示 线路 1-1
+      treeData.value = data[0].childList;
+      // 开始预加载
+      preload.value = true;
+    });
+  };
 
-// 抽屉业务 =====================================================
+  // 抽屉业务 =====================================================
 
-// 抽屉 - 当前选择的tab
-let activeKey = ref('1');
-// 抽屉 - 打开状态
-let visible = ref(false);
-// 抽屉 - 开关事件
-const toggleDrawer = () => {
+  // 抽屉 - 当前选择的tab
+  let activeKey = ref('1');
+  // 抽屉 - 打开状态
+  let visible = ref(false);
+  // 抽屉 - 开关事件
+  const toggleDrawer = () => {
     visible.value = !visible.value;
-};
-// 抽屉tab1组件的引用
-const tabs1Ref = ref()
-
+  };
+  // 抽屉tab1组件的引用
+  const tabs1Ref = ref();
 </script>
 <style lang="less" scoped>
-@import "./index.less";
-// 当前选中分区的样式
-.isActive {
+  @import './index.less';
+
+  // 当前选中分区的样式
+  .isActive {
     border: 3px solid white !important;
-}
-// 抽屉顶部tab按钮样式
-:deep(.ant-tabs-tab-btn) {
+  }
+
+  // 抽屉顶部tab按钮样式
+  :deep(.ant-tabs-tab-btn) {
     color: white;
-}
+  }
 </style>
-  
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
index c9f361a..1f941b4 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
@@ -1,59 +1,59 @@
 <template>
-    <a-popover color="rgba(0, 0, 0, 0.8)">
-        <template #content>
-            <div class="light-tag">
-                <div class="light-tag-tit">
-                    <div>
-                        <img src="/asset/image//bulbLogo/21962.png" alt="" />
-                        <span class="tag-text">{{ result.name }}</span>
-                    </div>
-                    <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
-                </div>
-                <div class="light-tag-box">
-                    <div class="tag-box-item">
-                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-                        <span class="title">控制模式</span>
-                        <span class="result">自动</span>
-                    </div>
-                    <div class="tag-box-item">
-                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-                        <span class="title">亮度</span>
-                        <span class="result">{{ result.brightness }}</span>
-                    </div>
-                    <div class="tag-box-item">
-                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-                        <span class="title">控制场景</span>
-                        <span class="result">{{ result.automatic2 }}</span>
-                    </div>
-                    <div class="tag-box-item">
-                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-                        <span class="title">色温</span>
-                        <span class="result">{{ result.brightness3 }}</span>
-                    </div>
-                </div>
-            </div>
-        </template>
-        <div class="icon-box" :style="styleObject" v-show="visible">
-            <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
-            <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
-            <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
+  <a-popover color="rgba(0, 0, 0, 0.8)">
+    <template #content>
+      <div class="light-tag">
+        <div class="light-tag-tit">
+          <div>
+            <img src="/asset/image//bulbLogo/21962.png" alt="" />
+            <span class="tag-text">{{ result.name }}</span>
+          </div>
+          <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
         </div>
-    </a-popover>
+        <div class="light-tag-box">
+          <div class="tag-box-item">
+            <img src="/asset/image//bulbLogo/22496.png" alt="" />
+            <span class="title">控制模式</span>
+            <span class="result">自动</span>
+          </div>
+          <div class="tag-box-item">
+            <img src="/asset/image//bulbLogo/22496.png" alt="" />
+            <span class="title">亮度</span>
+            <span class="result">{{ result.brightness }}</span>
+          </div>
+          <div class="tag-box-item">
+            <img src="/asset/image//bulbLogo/22496.png" alt="" />
+            <span class="title">控制场景</span>
+            <span class="result">{{ result.automatic2 }}</span>
+          </div>
+          <div class="tag-box-item">
+            <img src="/asset/image//bulbLogo/22496.png" alt="" />
+            <span class="title">色温</span>
+            <span class="result">{{ result.brightness3 }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+    <div class="icon-box" :style="styleObject" v-show="visible">
+      <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="" />
+      <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="" />
+      <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="" />
+    </div>
+  </a-popover>
 </template>
-  
+
 <script setup lang="ts">
-import { ref } from 'vue';
+  import { ref } from 'vue';
 
-defineProps({
+  defineProps({
     styleObject: Object,
     type: Number,
     visible: {
-        type: Boolean,
-        default: false
-    }
-});
+      type: Boolean,
+      default: false,
+    },
+  });
 
-const result = ref({
+  const result = ref({
     id: '1',
     name: '站厅照明  1区',
     manual: '手动',
@@ -64,77 +64,86 @@ const result = ref({
     automatic2: '舒适',
     brightness3: '4000k',
     brightness4: '3800k',
-});
-
+  });
 </script>
 <style lang="less" scoped>
-    .icon-box {
-        width: 25px;
-        height: 25px;
-        position: absolute;
-        .icon-item {
-            width: 25px;
-            cursor: pointer;
-            transition: all ease 0.1s;
-        }
-        .icon-item:active {
-            transform: scale(1.2);
-        }
+  .icon-box {
+    width: 25px;
+    height: 25px;
+    position: absolute;
+
+    .icon-item {
+      width: 25px;
+      cursor: pointer;
+      transition: all ease 0.1s;
+    }
+
+    .icon-item:active {
+      transform: scale(1.2);
     }
-    // 悬浮窗外部
-    .light-tag {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        // 悬浮窗标题
-        .light-tag-tit {
-            display: flex;
-            justify-content: space-between;
-            vertical-align: middle;
-            height: 30px;
-            .tag-text {
-                font-size: 16px;
-                font-weight: 700;
-                color: white;
-                padding-left: 10px;
-            }
-            .right-button {
-                width: 50px;
-                height: 26px;
-                background: rgba(57, 215, 187, 0.1);
-                border: 1px solid rgba(57, 215, 187, 1);
-                font-size: 12px;
-                color: rgba(57, 215, 187, 1);
-            }
-        }
+  }
+
+  // 悬浮窗外部
+  .light-tag {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    // 悬浮窗标题
+    .light-tag-tit {
+      display: flex;
+      justify-content: space-between;
+      vertical-align: middle;
+      height: 30px;
+
+      .tag-text {
+        font-size: 16px;
+        font-weight: 700;
+        color: white;
+        padding-left: 10px;
+      }
+
+      .right-button {
+        width: 50px;
+        height: 26px;
+        background: rgba(57, 215, 187, 0.1);
+        border: 1px solid rgba(57, 215, 187, 1);
+        font-size: 12px;
+        color: rgba(57, 215, 187, 1);
+      }
     }
-    // 悬浮窗底部4格子
-    .light-tag-box {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-        grid-gap: 10px;
-        .tag-box-item {
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            img {
-                width: 120px;
-                vertical-align: middle;
-            }
-            .title {
-                position: absolute;
-                left: 60px;
-                top: 13px;
-                color: rgba(64, 255, 252, 1);
-            }
-            .result {
-                line-height: 50px;
-                font-size: 16px;
-                font-weight: 700;
-                color: white;
-            };
-        }
+  }
+
+  // 悬浮窗底部4格子
+  .light-tag-box {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    grid-gap: 10px;
+
+    .tag-box-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+
+      img {
+        width: 120px;
+        vertical-align: middle;
+      }
+
+      .title {
+        position: absolute;
+        left: 60px;
+        top: 13px;
+        color: rgba(64, 255, 252, 1);
+      }
+
+      .result {
+        line-height: 50px;
+        font-size: 16px;
+        font-weight: 700;
+        color: white;
+      }
     }
+  }
 </style>
-  
\ 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 0ae9d57..a370239 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -5,15 +5,21 @@
       <div class="light-area">
         <div class="light-area-tab"></div>
         <span class="light-area-text"> 照明区域 </span>
-        <button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
+        <button
+          class="plan"
+          :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
+          @click="togglePlan">
           {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
         </button>
       </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
+            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">
@@ -21,7 +27,10 @@
           </div>
         </template>
         <template v-else>
-          <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
+          <button
+            v-for="(button, index) in props.treeData"
+            :key="index"
+            :class="{ btn: true, selected: button.selected }"
             @click="changeArea(button)">
             {{ button.name }}
           </button>
@@ -37,13 +46,20 @@
         <div class="circuit-tab"></div>
         <span class="circuit-text">照明回路</span>
         <div class="btn2">
-          <button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
+          <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" />
+          <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 ? '多选' : '单选' }}
@@ -52,8 +68,12 @@
       </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)">
+          <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>
@@ -62,8 +82,12 @@
           </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)">
+          <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>
@@ -81,10 +105,13 @@
       </div>
       <!-- 控制模式按钮部分 -->
       <div class="control-mode-btn-area" v-show="thisButton2.code">
-        <button v-for="(button3, index) in controlMode" :key="index"
-        class="btn"
-        :disabled="button3.value!= 3"
-        :class="{ selected: thisButton2.mode.value == button3.value }" @click="selectButton3(button3)">
+        <button
+          v-for="(button3, index) in controlMode"
+          :key="index"
+          class="btn"
+          :disabled="button3.value != 3"
+          :class="{ selected: thisButton2.mode.value == button3.value }"
+          @click="selectButton3(button3)">
           {{ button3.label }}
         </button>
       </div>
@@ -97,8 +124,11 @@
       </div>
       <!-- 控制场景按钮部分 -->
       <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.scene.value == button4.value }" @click="selectButton4(button4)">
+        <button
+          v-for="(button4, index) in controlScene"
+          :key="index"
+          :class="{ btn: true, selected: thisButton2.scene.value == button4.value }"
+          @click="selectButton4(button4)">
           {{ button4.label }}
         </button>
       </div>
@@ -106,12 +136,11 @@
     <!-- 底部按钮区 -->
     <div class="bottom">
       <a-popconfirm
-      title="刷新将会取消已作出的修改"
-      ok-text="确定"
-      cancel-text="取消"
-      @confirm="changeConfirm"
-      @cancel="changeCancel"
-      >
+        title="刷新将会取消已作出的修改"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="changeConfirm"
+        @cancel="changeCancel">
         <button class="flushed">刷新</button>
       </a-popconfirm>
       <button class="execute" @click="showModal">执行</button>
@@ -129,7 +158,11 @@
             <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.name }}</span>
+                <span
+                  class="title-text"
+                  style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                  >{{ item.name }}</span
+                >
               </div>
               <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
             </div>
@@ -143,9 +176,7 @@
                 </div>
               </div>
               <div class="btn-item">
-                <div class="left">
-                  亮度
-                </div>
+                <div class="left"> 亮度 </div>
                 <div class="right">
                   <span>100lux</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -153,9 +184,7 @@
                 </div>
               </div>
               <div class="btn-item">
-                <div class="left">
-                  控制场景
-                </div>
+                <div class="left"> 控制场景 </div>
                 <div class="right">
                   <span>手动</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -163,9 +192,7 @@
                 </div>
               </div>
               <div class="btn-item">
-                <div class="left">
-                  色温
-                </div>
+                <div class="left"> 色温 </div>
                 <div class="right">
                   <span>4000k</span>
                   <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -176,7 +203,7 @@
           </div>
         </div>
       </div>
-      <div style="width: 100%; height: 60px;"></div>
+      <div style="width: 100%; height: 60px"></div>
       <div class="button-box">
         <button class="cancel" @click="executeVisible = false">取消</button>
         <button class="execute">执行</button>
@@ -186,415 +213,415 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-import {
-  DownOutlined,
-  UpOutlined,
-  StopOutlined,
-} from '@ant-design/icons-vue';
-import { message } from 'ant-design-vue';
-// 请求
-import { http } from '/nerv-lib/util/http';
-import { lightingManage } from '/@/api/IlluminationInfo';
-import { getAllEnum } from '/@/api/index'
-
-// 初始化  =========================================================================
-
-onMounted(() => {
-  // 默认选项
-  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
-  })
-}
-// 以 1-1 作为默认线路
-const setArea = () => {
-  const data = props.treeData[0]
-  buttons2.value = data.childList
-}
-
-// 与父组件的交互  ===================================================================
-
-const props = defineProps({
-  // 分区结构（照明区域 > 照明回路）
-  treeData: {
-    type: Array,
-    default: []
-  }
-});
-// 向上传递修改选择样式
-/** 
- * @method changeArea 用于控制俯视图的选中状态
- * @method reset 用于重置按钮区
- */
-const emit = defineEmits(['changeArea','reset']);
-
-// 照明区域业务 =======================================================================
-
-// 计划启用状态
-const isPlanEnabled = ref(false);
-// 计划启用切换事件
-const togglePlan = () => {
-  isPlanEnabled.value = !isPlanEnabled.value;
-};
-
-// 按钮区展开与收起状态
-const showAllButtonsArea = ref(false);
-// 被选中的分区  默认为1
-const selectedButton = ref<string | undefined>('1');
-
-// 分区切换
-const changeArea = (button: any) => {
-  // 当前选中按钮
-  selectedButton.value = button.id;
-  // 设置当前选中的线路
-  buttons2.value = button.childList
-  // 重置按钮状态
-  emit('reset')
-  // 设置选中按钮状态
-  button.selected = true
-  // 改变俯视图样式
-  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 togglePlan2 = () => {
-  // 如果未交互任何按钮
-  if (handleButton.value == '') {
-    return message.info('请选择照明回路');
-  }
-  // 获取最近交互过的按钮
-  const btn: any = buttons2.value.find((button) => button.id === handleButton.value)
-  let panel = +(!btn.ctrlStatus)
-  isLoading.value = true
-  http.get(lightingManage.setDisable, { deviceGroup: btn.code, panel }).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 })
-};
-
-// 是否单选，状态
-let singleSelection = ref(true);
-// 多选与单选切换事件
-const selectAll = () => {
-  selectAllCheckbox.value = false
-  buttons2.value.forEach((button) => {
-    button.selected = false;
+  import { ref, computed, onMounted } from 'vue';
+  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
+  import { message } from 'ant-design-vue';
+  // 请求
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
+  import { getAllEnum } from '/@/api/index';
+
+  // 初始化  =========================================================================
+
+  onMounted(() => {
+    // 默认选项
+    setArea();
+    // 获得枚举
+    getEnum(['IlluminationMode', 'IlluminationScene']);
   });
-  singleSelection.value = !singleSelection.value;
-  // 当前选中线路 - 置空
-  resetMode()
-  // 改变俯视图样式
-  emit('changeArea', [selectedButton.value])
-};
-
-// 全选状态
-const selectAllCheckbox = ref(false);
-// 全选切换事件（switch）
-const toggleAllSelection = () => {
-  let arr = [selectedButton.value]
-  // 全选
-  if (selectAllCheckbox.value) {
-    buttons2.value.forEach((item, index) => {
-      // 全选时，默认展示第一条线路的模式-场景按钮
-      if (index == 0) {
-        thisButton2.value = item
-      }
-      item.selected = true;
-      arr.push(item.id)
-    });
-  // 全不选
-  } else {
-    buttons2.value.forEach((item) => {
-      item.selected = false;
-    });
-    // 全不选时，隐藏模式-场景按钮
-    resetMode()
-  }
-  emit('changeArea', arr)
-};
-
-// 储存当前选中的线路
-const thisButton2 = ref({
-  code: '',
-  mode: {
-    value: -1
-  },
-  scene: {
-    value: -1
-  }
-})
-// 照明回路的按钮切换
-const changeLine = (button: any) => {
-  // 存储一次按钮ID，用于禁用/启用交互
-  handleButton.value = button.id
-  // 根据按钮状态，展示禁用/启用按钮文本
-  if (button.ctrlStatus) {
-    isPlanEnabled2.value = true
-  } else {
-    isPlanEnabled2.value = false
-  }
-
-  // 选择时反控俯视图
-  let level1 = selectedButton.value
-  let level2 = button.id
-  // 单选模式，需将所有其他按钮设为false
-  if (singleSelection.value) {
-    buttons2.value.forEach(item => {
-      item.selected = false;
-    });
-    button.selected = !button.selected;
-    emit('changeArea', [level1, level2])
-  } else {
-    // 多选模式传值
-    button.selected = !button.selected;
-    const arr = [level1]
-    buttons2.value.forEach(item => {
-      if (item.selected) {
-        arr.push(item.id)
-      }
+  // 获得枚举
+  const getEnum = (arr: any) => {
+    getAllEnum({ params: arr }).then((res) => {
+      const data = res.data;
+      // 控制模式
+      controlMode.value = data.IlluminationMode;
+      // 控制场景
+      controlScene.value = data.IlluminationScene;
     });
-    emit('changeArea', arr)
-  }
-  // 用于展示控制模式
-  if (button.selected) {
-    // 发生了选中事件
-    thisButton2.value = button
-  } else {
-    // 未发生选中 或 多选的其中一个按钮被取消
-    resetMode()
-  }
-  console.log(thisButton2,'button')
-};
-
-// 照明回路所有按钮
-const buttons2 = ref([]);
-// 按钮区展开与收起状态
-const showAllButtons = ref(false);
-// 默认最多展示8个按钮
-const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
-
-// 控制模式业务 ====================================================================
-
-// 控制模式 - 按钮切换
-const selectButton3 = (button3) => {
-  let checked = thisButton2.value.mode
-  console.log(button3.value,'---', checked.value)
-  // 如果点击了相同的按钮，则未作出修改
-  if (checked.value === button3.value) {
-    return
-  }
-  checked.value = button3.value
-};
-
-// 控制场景业务 =====================================================================
-
-// 控制模式枚举
-const controlMode = ref([])
-// 场景枚举
-const controlScene = ref([])
-// 控制场景 - 当前选择按钮
-const selectedButton4 = ref(null);
-// 控制场景 - 按钮切换
-const selectButton4 = (button4) => {
-  // 当前选中的线路数据
-  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
-      })
+  };
+  // 以 1-1 作为默认线路
+  const setArea = () => {
+    const data = props.treeData[0];
+    buttons2.value = data.childList;
+  };
+
+  // 与父组件的交互  ===================================================================
+
+  const props = defineProps({
+    // 分区结构（照明区域 > 照明回路）
+    treeData: {
+      type: Array,
+      default: [],
+    },
+  });
+  // 向上传递修改选择样式
+  /**
+   * @method changeArea 用于控制俯视图的选中状态
+   * @method reset 用于重置按钮区
+   */
+  const emit = defineEmits(['changeArea', 'reset']);
+
+  // 照明区域业务 =======================================================================
+
+  // 计划启用状态
+  const isPlanEnabled = ref(false);
+  // 计划启用切换事件
+  const togglePlan = () => {
+    isPlanEnabled.value = !isPlanEnabled.value;
+  };
+
+  // 按钮区展开与收起状态
+  const showAllButtonsArea = ref(false);
+  // 被选中的分区  默认为1
+  const selectedButton = ref<string | undefined>('1');
+
+  // 分区切换
+  const changeArea = (button: any) => {
+    // 当前选中按钮
+    selectedButton.value = button.id;
+    // 设置当前选中的线路
+    buttons2.value = button.childList;
+    // 重置按钮状态
+    emit('reset');
+    // 设置选中按钮状态
+    button.selected = true;
+    // 改变俯视图样式
+    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 togglePlan2 = () => {
+    // 如果未交互任何按钮
+    if (handleButton.value == '') {
+      return message.info('请选择照明回路');
     }
-    console.log(changeList.value, 'changeList')
-  }
-  
-  thisButton2.value.scene.value = after
-  console.log(thisButton2,'222222')
-  console.log(button4,'44444')
-};
-
-// 内侧弹窗 ========================================================================
-
-// 需要修改的内容
-const changeList: any = ref([])
-// 需要向后端提交的修改内容
-const submitList = ref([])
-const cxList = ref([
-  {
-    id: '1',
-    name: '站厅照明  1区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-  {
-    id: '2',
-    name: '站厅照明  2区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-  {
-    id: '3',
-    name: '站厅照明  3区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-]);
-//撤销
-const delBtn = () => {
-  cxList.value.pop();
-  console.log(cxList.value.length);
-
-  if (cxList.value.length === 0) {
-    executeVisible.value = false;
-  }
-};
-
-// 其他业务 ========================================================================
-
-const isLoading = ref(false)
-// 刷新
-const refresh = () => {
-  // 关闭执行弹窗
-  executeVisible.value = false
-  // 设置当前选中的序列
-  selectedButton.value = '1';
-  emit('changeArea', ['1']);
-  emit('reset')
-  let data = props.treeData[0]
-  // 默认选中
-  data.selected = true
-  buttons2.value = data.childList
-  selectedButton4.value = null;
-  resetMode()
-};
-// 执行确认
-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)
+    // 获取最近交互过的按钮
+    const btn: any = buttons2.value.find((button) => button.id === handleButton.value);
+    let panel = +!btn.ctrlStatus;
+    isLoading.value = true;
+    http
+      .get(lightingManage.setDisable, { deviceGroup: btn.code, panel })
+      .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;
+      });
+  };
+
+  // 是否单选，状态
+  let singleSelection = ref(true);
+  // 多选与单选切换事件
+  const selectAll = () => {
+    selectAllCheckbox.value = false;
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+    });
+    singleSelection.value = !singleSelection.value;
+    // 当前选中线路 - 置空
+    resetMode();
+    // 改变俯视图样式
+    emit('changeArea', [selectedButton.value]);
+  };
+
+  // 全选状态
+  const selectAllCheckbox = ref(false);
+  // 全选切换事件（switch）
+  const toggleAllSelection = () => {
+    let arr = [selectedButton.value];
+    // 全选
+    if (selectAllCheckbox.value) {
+      buttons2.value.forEach((item, index) => {
+        // 全选时，默认展示第一条线路的模式-场景按钮
+        if (index == 0) {
+          thisButton2.value = item;
+        }
+        item.selected = true;
+        arr.push(item.id);
+      });
+      // 全不选
     } else {
-      isLoading.value = false
+      buttons2.value.forEach((item) => {
+        item.selected = false;
+      });
+      // 全不选时，隐藏模式-场景按钮
+      resetMode();
     }
-  })
-  executeVisible.value = true;
+    emit('changeArea', arr);
+  };
 
-};
-
-// 确定
-const changeConfirm = () => {
-  refresh()
-}
-
-// 取消
-const changeCancel = () => {
-}
-
-// 将当前选择的线路置空
-const resetMode = () => {
-  thisButton2.value = {
+  // 储存当前选中的线路
+  const thisButton2 = ref({
     code: '',
     mode: {
-      value: -1
+      value: -1,
     },
     scene: {
-      value: -1
+      value: -1,
+    },
+  });
+  // 照明回路的按钮切换
+  const changeLine = (button: any) => {
+    // 存储一次按钮ID，用于禁用/启用交互
+    handleButton.value = button.id;
+    // 根据按钮状态，展示禁用/启用按钮文本
+    if (button.ctrlStatus) {
+      isPlanEnabled2.value = true;
+    } else {
+      isPlanEnabled2.value = false;
     }
-  }
-} 
 
-// 暴露
-defineExpose({
-  // 分区切换
-  changeArea,
-  // 线路切换
-  changeLine
-});
+    // 选择时反控俯视图
+    let level1 = selectedButton.value;
+    let level2 = button.id;
+    // 单选模式，需将所有其他按钮设为false
+    if (singleSelection.value) {
+      buttons2.value.forEach((item) => {
+        item.selected = false;
+      });
+      button.selected = !button.selected;
+      emit('changeArea', [level1, level2]);
+    } else {
+      // 多选模式传值
+      button.selected = !button.selected;
+      const arr = [level1];
+      buttons2.value.forEach((item) => {
+        if (item.selected) {
+          arr.push(item.id);
+        }
+      });
+      emit('changeArea', arr);
+    }
+    // 用于展示控制模式
+    if (button.selected) {
+      // 发生了选中事件
+      thisButton2.value = button;
+    } else {
+      // 未发生选中 或 多选的其中一个按钮被取消
+      resetMode();
+    }
+    console.log(thisButton2, 'button');
+  };
+
+  // 照明回路所有按钮
+  const buttons2 = ref([]);
+  // 按钮区展开与收起状态
+  const showAllButtons = ref(false);
+  // 默认最多展示8个按钮
+  const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
+
+  // 控制模式业务 ====================================================================
+
+  // 控制模式 - 按钮切换
+  const selectButton3 = (button3) => {
+    let checked = thisButton2.value.mode;
+    console.log(button3.value, '---', checked.value);
+    // 如果点击了相同的按钮，则未作出修改
+    if (checked.value === button3.value) {
+      return;
+    }
+    checked.value = button3.value;
+  };
+
+  // 控制场景业务 =====================================================================
+
+  // 控制模式枚举
+  const controlMode = ref([]);
+  // 场景枚举
+  const controlScene = ref([]);
+  // 控制场景 - 当前选择按钮
+  const selectedButton4 = ref(null);
+  // 控制场景 - 按钮切换
+  const selectButton4 = (button4) => {
+    // 当前选中的线路数据
+    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 submitList = ref([]);
+  const cxList = ref([
+    {
+      id: '1',
+      name: '站厅照明  1区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '2',
+      name: '站厅照明  2区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '3',
+      name: '站厅照明  3区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+  ]);
+  //撤销
+  const delBtn = () => {
+    cxList.value.pop();
+    console.log(cxList.value.length);
+
+    if (cxList.value.length === 0) {
+      executeVisible.value = false;
+    }
+  };
 
+  // 其他业务 ========================================================================
+
+  const isLoading = ref(false);
+  // 刷新
+  const refresh = () => {
+    // 关闭执行弹窗
+    executeVisible.value = false;
+    // 设置当前选中的序列
+    selectedButton.value = '1';
+    emit('changeArea', ['1']);
+    emit('reset');
+    let data = props.treeData[0];
+    // 默认选中
+    data.selected = true;
+    buttons2.value = data.childList;
+    selectedButton4.value = null;
+    resetMode();
+  };
+  // 执行确认
+  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;
+  };
+
+  // 确定
+  const changeConfirm = () => {
+    refresh();
+  };
+
+  // 取消
+  const changeCancel = () => {};
+
+  // 将当前选择的线路置空
+  const resetMode = () => {
+    thisButton2.value = {
+      code: '',
+      mode: {
+        value: -1,
+      },
+      scene: {
+        value: -1,
+      },
+    };
+  };
+
+  // 暴露
+  defineExpose({
+    // 分区切换
+    changeArea,
+    // 线路切换
+    changeLine,
+  });
 </script>
 <style lang="less" scoped>
-@import "./dialogStyle.less";
-@import "./tabs1.less";
+  @import './dialogStyle.less';
+  @import './tabs1.less';
 </style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
index 8f33ad3..05bb3c6 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
@@ -20,10 +20,10 @@
         <td v-if="row.planStatus == '2'">
           <button
             style="
-            font-size: 12px;
-            background: rgba(57, 215, 187, 0.1);
-            color: rgb(57, 215, 187);
-            border: 1px solid rgb(57, 215, 187);
+              font-size: 12px;
+              background: rgba(57, 215, 187, 0.1);
+              color: rgb(57, 215, 187);
+              border: 1px solid rgb(57, 215, 187);
             ">
             已执行
           </button>
@@ -31,10 +31,10 @@
         <td v-if="row.planStatus == '1'">
           <button
             style="
-            font-size: 12px;
-            background: rgba(243, 97, 99, 0.1);
-            border: 1px solid rgba(243, 97, 99);
-            color: rgba(243, 97, 99);
+              font-size: 12px;
+              background: rgba(243, 97, 99, 0.1);
+              border: 1px solid rgba(243, 97, 99);
+              color: rgba(243, 97, 99);
             ">
             待执行
           </button>
@@ -42,11 +42,10 @@
         <td>
           <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
           <a-popconfirm
-          title="此操作将永久删除该条数据"
-          ok-text="确定"
-          cancel-text="取消"
-          @confirm="deletePlan(row.id)"
-          >
+            title="此操作将永久删除该条数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="deletePlan(row.id)">
             <div class="tabDelete">删除</div>
           </a-popconfirm>
         </td>
@@ -70,7 +69,7 @@
         @search="handleSearch"
         :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
     </div>
-    <div style="width: 100%; height: 60px;"></div>
+    <div style="width: 100%; height: 60px"></div>
     <div class="button-box">
       <button class="cancel" @click="addVisible = false">取消</button>
       <button class="execute" @click="sendPlan">确定</button>
@@ -79,175 +78,171 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-// 请求
-import { http } from '/nerv-lib/util/http';
-import { lightingManage } from '/@/api/IlluminationInfo';
-import { message } from 'ant-design-vue';
+  import { ref, onMounted } from 'vue';
+  // 请求
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
+  import { message } from 'ant-design-vue';
 
-// 初始化 ===========================================================
+  // 初始化 ===========================================================
 
-onMounted(() => {
-  // 计划表格
-  getTable()
-  // 穿梭框原始数据
-  getLeftPlan()
-})
+  onMounted(() => {
+    // 计划表格
+    getTable();
+    // 穿梭框原始数据
+    getLeftPlan();
+  });
 
-// tab页部分 ========================================================
+  // tab页部分 ========================================================
 
-// 表格数据
-const dataSource = ref([]);
-// 获得表格数据
-const getTable = () => {
-  http.get(lightingManage.getPlanTable, {}).then(res => {
-    dataSource.value = res.data
-  })
-}
-// 删除表格中的计划
-const deletePlan = (id: String) => {
-  http.delete(lightingManage.deletePlan, [id]).then(() => {
-    message.success('操作成功')
-    getTable()
-  })
-}
-// 重启表格中的计划
-const restartPlan = (id: String) => {
-  http.post(lightingManage.restartPlan, { planId: id }).then(() => {
-    message.success('操作成功')
-    getTable()
-  })
-}
+  // 表格数据
+  const dataSource = ref([]);
+  // 获得表格数据
+  const getTable = () => {
+    http.get(lightingManage.getPlanTable, {}).then((res) => {
+      dataSource.value = res.data;
+    });
+  };
+  // 删除表格中的计划
+  const deletePlan = (id: String) => {
+    http.delete(lightingManage.deletePlan, [id]).then(() => {
+      message.success('操作成功');
+      getTable();
+    });
+  };
+  // 重启表格中的计划
+  const restartPlan = (id: String) => {
+    http.post(lightingManage.restartPlan, { planId: id }).then(() => {
+      message.success('操作成功');
+      getTable();
+    });
+  };
 
-// tab页弹窗部分 ====================================================
+  // tab页弹窗部分 ====================================================
 
-// 添加弹窗控制变量
-const addVisible = ref(false);
-// 打开弹窗
-const addModal = () => {
-  addVisible.value = true;
-};
+  // 添加弹窗控制变量
+  const addVisible = ref(false);
+  // 打开弹窗
+  const addModal = () => {
+    addVisible.value = true;
+  };
 
-// 穿梭框部分 =======================================================
+  // 穿梭框部分 =======================================================
 
-// 穿梭框数据
-const transferData = ref([]) as any;
-// 获得穿梭框原始数据
-const getLeftPlan = () => {
-  http.get(lightingManage.getLeftPlan, {}).then(res => {
-    let arr = []
-    res.data.forEach((item: any) => {
-      arr.push({
-        key: item.id,
-        title: item.planName
-      })
-    })
-    transferData.value = arr
-  })
-}
-
-const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
-  console.log(keys, direction, moveKeys);
-};
-const handleSearch = (dir: string, value: string) => {
-  console.log('search:', dir, value);
-};
-// 穿梭框选中数据
-const targetKeys = ref<string[]>([]);
-// 将穿梭框选中的计划提交
-const sendPlan = () => {
-  if (targetKeys.value.length < 1) {
-    return message.info('没有选择任何计划');
-  }
-  http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
-    message.success('添加成功')
-    // 如果发送成功，则刷新表格
-    getTable()
-    getLeftPlan()
-  })
-}
-
-const filterOption = (inputValue: string, option: any) => {
-  return option.description.indexOf(inputValue) > -1;
-};
+  // 穿梭框数据
+  const transferData = ref([]) as any;
+  // 获得穿梭框原始数据
+  const getLeftPlan = () => {
+    http.get(lightingManage.getLeftPlan, {}).then((res) => {
+      let arr = [];
+      res.data.forEach((item: any) => {
+        arr.push({
+          key: item.id,
+          title: item.planName,
+        });
+      });
+      transferData.value = arr;
+    });
+  };
 
+  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+    console.log(keys, direction, moveKeys);
+  };
+  const handleSearch = (dir: string, value: string) => {
+    console.log('search:', dir, value);
+  };
+  // 穿梭框选中数据
+  const targetKeys = ref<string[]>([]);
+  // 将穿梭框选中的计划提交
+  const sendPlan = () => {
+    if (targetKeys.value.length < 1) {
+      return message.info('没有选择任何计划');
+    }
+    http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
+      message.success('添加成功');
+      // 如果发送成功，则刷新表格
+      getTable();
+      getLeftPlan();
+    });
+  };
 
+  const filterOption = (inputValue: string, option: any) => {
+    return option.description.indexOf(inputValue) > -1;
+  };
 </script>
 <style lang="less" scoped>
-@import "./dialogStyle.less";
+  @import './dialogStyle.less';
 
-// 右下角添加按钮
-.div-add {
-  height: 64px;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  margin-right: 20px;
-  .add {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    background: rgba(67, 136, 251, 1);
-    border: rgba(67, 136, 251, 1);
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 1);
-    cursor: pointer;
+  // 右下角添加按钮
+  .div-add {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-right: 20px;
+    .add {
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      border-radius: 4px;
+      background: rgba(67, 136, 251, 1);
+      border: rgba(67, 136, 251, 1);
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      cursor: pointer;
+    }
   }
-}
-// 表格
-.custom-table {
-  border-collapse: collapse;
-  width: 416px;
-  height: 60px;
-  color: rgba(255, 255, 255, 1);
-}
-.custom-table th,
-.custom-table td {
-  border: 1px solid rgba(163, 192, 243, 1);
-  text-align: left;
-  padding: 8px;
-  text-align: center;
-}
-.table1 {
-  margin-top: 20px;
-  width: 100%;
-  border: 1px solid rgba(255, 255, 255);
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.1);
-  // 表格中的操作按钮
-  .tabReboot,
-  .tabDelete {
-    border: none;
-    display: inline-block;
-    background-color: rgba(0, 0, 0, 0);
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: 20px;
-    color: rgba(67, 136, 251, 1);
-    cursor: pointer;
-  }
-  .tabReboot {
-    margin-right: 8px;
+  // 表格
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 60px;
+    color: rgba(255, 255, 255, 1);
   }
-  .tabReboot::active {
-    color: white !important;
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
   }
-  .tabDelete::active {
-    color: white;
+  .table1 {
+    margin-top: 20px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+    // 表格中的操作按钮
+    .tabReboot,
+    .tabDelete {
+      border: none;
+      display: inline-block;
+      background-color: rgba(0, 0, 0, 0);
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0;
+      line-height: 20px;
+      color: rgba(67, 136, 251, 1);
+      cursor: pointer;
+    }
+    .tabReboot {
+      margin-right: 8px;
+    }
+    .tabReboot::active {
+      color: white !important;
+    }
+    .tabDelete::active {
+      color: white;
+    }
   }
-}
-::v-deep(.ant-transfer) {
-  // 屏蔽自带的hover效果
-  .ant-transfer-list-content-item:hover {
-    background: black;
+  ::v-deep(.ant-transfer) {
+    // 屏蔽自带的hover效果
+    .ant-transfer-list-content-item:hover {
+      background: black;
+    }
   }
-}
-  
-
 </style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
index ec1de0e..347920a 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
@@ -9,7 +9,10 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)"
+      <tr
+        v-for="(row, index) in dataSource1"
+        :key="index"
+        @click="handleRowClick(row.key)"
         :class="row.key === trIndex ? 'isTrIndex' : ''">
         <td>{{ row.key }}</td>
         <td>{{ row.data }}</td>
@@ -19,7 +22,7 @@
     </tbody>
   </table>
 
-  <div class="out-dialog" :class="{ 'showDialog' : logModalVisible }" v-if="logModalVisible">
+  <div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
     <div class="content" v-if="logModalVisible">
       <div>
         <div class="div-operation"></div>
@@ -30,7 +33,11 @@
           <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.name }}</span>
+              <span
+                class="title-text"
+                style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                >{{ item.name }}</span
+              >
             </div>
           </div>
           <div class="btn-box">
@@ -43,9 +50,7 @@
               </div>
             </div>
             <div class="btn-item">
-              <div class="left">
-                亮度
-              </div>
+              <div class="left"> 亮度 </div>
               <div class="right">
                 <span>100lux</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -53,9 +58,7 @@
               </div>
             </div>
             <div class="btn-item">
-              <div class="left">
-                控制场景
-              </div>
+              <div class="left"> 控制场景 </div>
               <div class="right">
                 <span>手动</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -63,9 +66,7 @@
               </div>
             </div>
             <div class="btn-item">
-              <div class="left">
-                色温
-              </div>
+              <div class="left"> 色温 </div>
               <div class="right">
                 <span>4000k</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
@@ -76,7 +77,7 @@
         </div>
       </div>
     </div>
-    <div style="height: 60px;"></div>
+    <div style="height: 60px"></div>
     <div class="button-box">
       <button class="cancel" @click="logModalVisible = false">取消</button>
     </div>
@@ -87,169 +88,164 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-// 初始化
-onMounted(() => {
-
-})
-
-// 与父组件的交互  ===================================================================
-const props = defineProps({
-  // 分区结构（照明区域 > 照明回路）
-  treeData: {
-    type: Array
-  },
-});
-const emit = defineEmits(['changeArea']);
-
-// 表格数据
-const dataSource1 = ref([
-  {
-    key: '1',
-    data: '2024-05-01',
-    planName: '计划再开',
-    status: '张三111',
-  },
-  {
-    key: '2',
-    data: '2024-05-01',
-    planName: '检修模式',
-    status: '李四12',
-  },
-  {
-    key: '3',
-    data: '2024-05-01',
-    planName: '设备变更',
-    status: '王五33',
-  },
-]);
-const cxList = ref([
-  {
-    id: '1',
-    name: '站厅照明  1区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-  {
-    id: '2',
-    name: '站厅照明  2区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-  {
-    id: '3',
-    name: '站厅照明  3区',
-    manual: '手动',
-    automatic: '自动',
-    brightness: '100lux',
-    brightness2: '30lux',
-    manual2: '手动',
-    automatic2: '自动',
-    brightness3: '4000k',
-    brightness4: '3800k',
-  },
-]);
-let trIndex = ref('-1');
-const logModalVisible = ref(false);
-const handleRowClick = (index: any) => {
-  trIndex.value = index;
-  if (index === trIndex.value) {
-    console.log('tri');
-  }
-  // 显示模态框
-  logModalVisible.value = true;
-};
-
-
+  import { ref, onMounted } from 'vue';
+
+  // 初始化
+  onMounted(() => {});
+
+  // 与父组件的交互  ===================================================================
+  const props = defineProps({
+    // 分区结构（照明区域 > 照明回路）
+    treeData: {
+      type: Array,
+    },
+  });
+  const emit = defineEmits(['changeArea']);
+
+  // 表格数据
+  const dataSource1 = ref([
+    {
+      key: '1',
+      data: '2024-05-01',
+      planName: '计划再开',
+      status: '张三111',
+    },
+    {
+      key: '2',
+      data: '2024-05-01',
+      planName: '检修模式',
+      status: '李四12',
+    },
+    {
+      key: '3',
+      data: '2024-05-01',
+      planName: '设备变更',
+      status: '王五33',
+    },
+  ]);
+  const cxList = ref([
+    {
+      id: '1',
+      name: '站厅照明  1区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '2',
+      name: '站厅照明  2区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+    {
+      id: '3',
+      name: '站厅照明  3区',
+      manual: '手动',
+      automatic: '自动',
+      brightness: '100lux',
+      brightness2: '30lux',
+      manual2: '手动',
+      automatic2: '自动',
+      brightness3: '4000k',
+      brightness4: '3800k',
+    },
+  ]);
+  let trIndex = ref('-1');
+  const logModalVisible = ref(false);
+  const handleRowClick = (index: any) => {
+    trIndex.value = index;
+    if (index === trIndex.value) {
+      console.log('tri');
+    }
+    // 显示模态框
+    logModalVisible.value = true;
+  };
 </script>
 <style lang="less" scoped>
-@import "./dialogStyle.less";
-
-// 右下角添加按钮
-.div-add {
-  height: 64px;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  margin-right: 20px;
-  .add {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    background: rgba(67, 136, 251, 1);
-    border: rgba(67, 136, 251, 1);
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 1);
-    cursor: pointer;
+  @import './dialogStyle.less';
+
+  // 右下角添加按钮
+  .div-add {
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-right: 20px;
+    .add {
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      border-radius: 4px;
+      background: rgba(67, 136, 251, 1);
+      border: rgba(67, 136, 251, 1);
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+      cursor: pointer;
+    }
   }
-}
-
-// 表格
-.custom-table {
-  border-collapse: collapse;
-  width: 416px;
-  height: 60px;
-  color: rgba(255, 255, 255, 1);
-}
 
-.custom-table th,
-.custom-table td {
-  border: 1px solid rgba(163, 192, 243, 1);
-  text-align: left;
-  padding: 8px;
-  text-align: center;
-}
-
-.table1 {
-  margin-top: 20px;
-  width: 100%;
-  border: 1px solid rgba(255, 255, 255);
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.1);
-
-  .tabReboot,
-  .tabDelete {
-    border: none;
-    background-color: rgba(0, 0, 0, 0);
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
-    line-height: 20px;
-    color: rgba(67, 136, 251, 1);
+  // 表格
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 60px;
+    color: rgba(255, 255, 255, 1);
   }
 
-  .tabReboot {
-    margin-right: 8px;
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
   }
 
-  .isTrIndex {
-    background: rgba(67, 136, 251, 1);
+  .table1 {
+    margin-top: 20px;
+    width: 100%;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+
+    .tabReboot,
+    .tabDelete {
+      border: none;
+      background-color: rgba(0, 0, 0, 0);
+      font-size: 14px;
+      font-weight: 400;
+      letter-spacing: 0;
+      line-height: 20px;
+      color: rgba(67, 136, 251, 1);
+    }
+
+    .tabReboot {
+      margin-right: 8px;
+    }
+
+    .isTrIndex {
+      background: rgba(67, 136, 251, 1);
+    }
   }
-}
-
-::v-deep(.ant-transfer) {
 
-  // 屏蔽自带的hover效果
-  .ant-transfer-list-content-item:hover {
-    background: black;
+  ::v-deep(.ant-transfer) {
+    // 屏蔽自带的hover效果
+    .ant-transfer-list-content-item:hover {
+      background: black;
+    }
   }
-}
 </style>