diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
index b9dad0f..dd02f25 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less
@@ -4,24 +4,6 @@
     // height: 100%;
     position: relative;
     // background: linear-gradient(#badaff, #8cabeb, #7095de);
-    .drawer-box {
-        width: 30px;
-        height: 40px;
-        border-radius: 2px;
-        position: fixed;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        background: rgba(0, 0 ,0 ,0.5);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        .drawer-icon {
-                
-        }
-    }
     // 照明设备功能总容器
     .lighting-img-box {
         position: relative;
@@ -88,9 +70,9 @@
                 background: rgba(80, 236, 244, 0.3);
                 border: 2px solid rgb(80, 236, 244);
             } 
-            .area-item:hover {
-                border:2px solid white;
-            }
+            // .area-item:hover {
+            //     transform: scale(1.05);
+            // }
             .area-item {
                 cursor: pointer;
                 transition: all ease 0.2s;
@@ -125,20 +107,21 @@
                         background: rgba(0, 0, 0, 0.1);
                     }
                 }
-                .group-shadow {
-                    transition: all ease 0.2s;
-                }
-                .group-shadow:hover {
-                    border: 2px solid white;
-                }
+                // .group-shadow {
+                //     transition: all ease 0.2s;
+                // }
+                // .group-shadow:hover {
+                //     transform: scale(1.05);
+                // }
             }
         }
     }
 }
+// 总容器与抽屉按钮
 .ns-content-main {
     position: relative;
-    // 抽屉伸缩按钮
-    .drawer-box {
+    // 抽屉打开按钮
+    .drawer-box-in {
         width: 30px;
         height: 40px;
         border-radius: 2px;
@@ -152,8 +135,22 @@
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        .drawer-icon {
-                
-        }
     }
+    // 抽屉关闭按钮
+    .drawer-box-out {
+        width: 30px;
+        height: 40px;
+        border-radius: 2px;
+        position: fixed;
+        right: 496px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        background: rgba(0, 0 ,0 ,0.5);
+        display: flex;
+        justify-content: center;
+        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 d4442e8..7557a9c 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -9,73 +9,156 @@
             </div>
             <!-- 楼层区域 -->
             <div class="area">
-                <div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
-                    </div>
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
-                    </div>
-                </div>
-                <div class="area-item area2" @click="getArea(2)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
-                    </div>
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
-                    </div>
-                </div>
-                <div class="area-item area3" @click="getArea(3)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
-                    </div>
-                </div>
-                <div class="area-item area4" @click="getArea(4)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
+                <div 
+                v-for="(item, index) in treeData" 
+                :class="computedClass(item.id)"
+                @click="getArea(item.id)"
+                :key="index">
+                    <div v-for="(v, i) in item.children" :key="i" class="light-group">
+                        <div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
                     </div>
                 </div>
             </div>
             <!-- 照明设备 -->
             <div class="lights">
-                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
-                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
-                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
-                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
-                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
+                <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" v-if="!visible">
-            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
+        <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"
+        placement="right"
+        :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+        :closable="false"
+        id="Odrawer"
+        :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
+            <a-tabs v-model:activeKey="activeKey">
+                <a-tab-pane key="1" tab="控制面板">
+                    <tabs1 @changeArea="getArea" :treeData="treeData"></tabs1>
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="计划列表" force-render>
+
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="日志"></a-tab-pane>
+            </a-tabs>
+        </a-drawer>
     </div>
-    
 </template>
   
 <script setup lang="ts">
 
 import { ref } from 'vue';
+import { treeData } from './treeData'
 import light from './light.vue';
+import tabs1 from './tabs1.vue'
+// ICON
 import {
     DoubleLeftOutlined,
     DoubleRightOutlined
   } from '@ant-design/icons-vue';
 
-let area = ref(1)
-let visible = ref(false)
+// 分区 - 当前选择的分区 - 默认选择一区
+let area = ref(['1'])
+// 分区 - 分区小灯泡
+const bulbs = ref([
+    {
+        styleText: { left: '190px', bottom: '200px' },
+        area: 1,
+        type: 1,
+        visible: true
+    },
+    {
+        styleText: { left: '245px', bottom: '125px' },
+        area: 1,
+        type: 2,
+        visible: true
+    },
+    {
+        styleText: { left: '355px', bottom: '160px' },
+        area: 1,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '295px', bottom: '230px' },
+        area: 1,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '425px', bottom: '230px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '470px', bottom: '190px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '380px', bottom: '275px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '700px', bottom: '320px' },
+        area: 3,
+        type: 1,
+        visible: true
+    },
+])
 
+// 分区 - 单个分区切换
+const getArea = (result: any) => {
+    // 如果传入的值是数组
+    if (Array.isArray(result)) {
+        area.value = result
+    // 如果不是数组
+    } else {
+        area.value.length = 0
+        area.value[0] = String(result)
+    } 
+}
+// 分区 - 多个分区切换，只有照明回路能够触发多个分区
+// 分区 - 样式函数
+const computedClass = (number: number) => {
+    if (area.value.indexOf(number) != -1) {
+        return `isActive area-item area${number}`
+    } else {
+        return `area-item area${number}`
+    }
+}
 
-const getArea = (number: any) => {
-    alert(number)
+// 抽屉 - 当前选择的tab
+let activeKey = ref('1');
+// 抽屉 - 打开状态
+let visible = ref(false);
+// 抽屉 - 开关事件
+const toggleDrawer = () => {
+    visible.value = !visible.value;
 };
+
 </script>
 <style lang="less" scoped>
 @import "./indexs.less";
 .isActive {
-    border: 2px solid white !important;
+    border: 3px solid white !important;
+}
+: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 d26c745..c9f361a 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
@@ -33,7 +33,7 @@
                 </div>
             </div>
         </template>
-        <div class="icon-box" :style="styleObject">
+        <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="">
@@ -43,9 +43,14 @@
   
 <script setup lang="ts">
 import { ref } from 'vue';
+
 defineProps({
-  styleObject: Object,
-  type: Number
+    styleObject: Object,
+    type: Number,
+    visible: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const result = ref({
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
new file mode 100644
index 0000000..0b46acf
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -0,0 +1,1018 @@
+<template>
+  <!-- 照明区域 -->
+  <div>
+    <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">
+        {{ 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="selectButton(button, index)">
+          {{ button.label }}
+        </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="selectButton(button)">
+          {{ button.label }}
+        </button>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- 照明回路部分 -->
+  <div>
+    <div class="circuit-area" v-if="selectedButton">
+      <div class="circuit-tab"></div>
+      <span class="circuit-text">照明回路</span>
+      <div class="btn2">
+        <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" v-if="selectedButton">
+      <template v-if="!showAllButtons">
+        <button v-for="(button2, index) in limitedButtons2" :key="index"
+          :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
+          <stop-outlined v-if="button2.stop" />
+          {{ button2.label }}
+        </button>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
+        </div>
+      </template>
+      <template v-else>
+        <button v-for="(button2, index) in buttons2" :key="index" :class="{ btn: true, selected: button2.selected }"
+          @click="toggleSelection(button2)">
+          {{ button2.label }}
+        </button>
+        <div style="margin-top: 10px">
+          <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
+        </div>
+      </template>
+    </div>
+  </div>
+  <!-- 控制模式 -->
+  <div>
+    <div class="control-area" v-show="showControlMode">
+      <div class="control-tab"></div>
+      <span class="control-text"> 控制模式 </span>
+    </div>
+    <!-- 控制模式按钮部分 -->
+    <div class="control-mode-btn-area" v-show="showControlMode">
+      <button v-for="(button3, index) in controlType" :key="index"
+        :class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
+        {{ button3.name }}
+      </button>
+    </div>
+  </div>
+  <!-- 控制场景 -->
+  <div>
+    <div class="control-scene-area" v-show="showControlScene">
+      <div class="control-scene-tab"></div>
+      <span class="control-scene-text"> 控制场景 </span>
+    </div>
+    <!-- 控制场景按钮部分 -->
+    <div class="control-scene-btn-area" v-show="showControlScene">
+      <button v-for="(button4, index) in controlSceneButtons" :key="index"
+        :class="{ btn: true, selected: button4.label === selectedButton4 }" @click="selectButton4(button4)">
+        {{ button4.label }}
+      </button>
+    </div>
+  </div>
+  <!-- 灯具参数 -->
+  <div>
+    <div class="light-parameters-area" v-if="selectedButton4">
+      <div class="light-parameters-tab"></div>
+      <span class="light-parameters-text"> 灯具参数 </span>
+    </div>
+    <div class="light-parameters-textarea" v-if="selectedButton4">
+      <table class="custom-table table1">
+        <thead>
+          <tr :style="{ background: 'rgba(35,45,69)' }">
+            <th>开启数量</th>
+            <th>亮度(lux)</th>
+            <th>色温</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)"
+            :style="{ height: '50px' }">
+            <td>{{ row.num }}</td>
+            <td>{{ row.light }}</td>
+            <td>{{ row.tempruter }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div style="margin-bottom: 60px;"></div>
+    </div>
+  </div>
+  <div class="bottom">
+    <button class="flushed" @click="refresh">刷新</button>
+    <button class="execute" @click="showModal">执行</button>
+  </div>
+  <!-- <a-modal :v-if="cxlist.length === 0" v-model:visible="executevisible" width="500px" height="792px" okText="执行"
+    :closable="false" @ok="handleOk2" :mask="false" :bodyStyle="{
+        opacity: 1,
+        background: ' rgba(0,0,0)',
+        color: 'rgba(255,83,0)',
+        boxSizing: 'borderBox',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'fixed',
+        right: '496px',
+        top: '0',
+      }">
+    <div :v-if="cxlist.length === 0" style="height: 792px">
+      <div>
+        <div class="div-operation"></div>
+        <span class="text-operation">变更内容 </span>
+      </div>
+      <div class="jbox" v-for="item in cxlist" :key="item.id">
+        <div class="journal" style="margin-top: 20px">
+          <div class="imgText">
+            <div class="zjzm">
+              <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+              <span class="titletext" 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>
+          <div class="control-btn">
+            <button style="
+                width: 96px;
+                height: 40px;
+                border-radius: 4px;
+                background: linear-gradient(
+                  180deg,
+                  rgba(1, 206, 255, 1) 0%,
+                  rgba(0, 150, 229, 1) 100%
+                );
+
+                border: 1px solid rgba(95, 154, 251, 1);
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+              ">
+              控制模式
+            </button>
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 12px;
+                margin-right: 8px;
+              ">手动</span>
+            <img src="/asset/image/bulbLogo/22406.png" alt="" />
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 8px;
+                margin-right: 40px;
+              ">自动</span>
+          </div>
+          <div class="light-btn">
+            <button style="
+                width: 68px;
+                height: 40px;
+                border-radius: 4px;
+                background: linear-gradient(
+                  180deg,
+                  rgba(1, 206, 255, 1) 0%,
+                  rgba(0, 150, 229, 1) 100%
+                );
+
+                border: 1px solid rgba(95, 154, 251, 1);
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+              ">
+              亮度
+            </button>
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 12px;
+                margin-right: 8px;
+              ">100lux</span>
+            <img src="/asset/image/bulbLogo/22406.png" alt="" />
+            <span style="
+                color: rgba(243, 97, 99, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 8px;
+              ">30lux</span>
+          </div>
+          <div class="control-area-btn">
+            <button style="
+                width: 96px;
+                height: 40px;
+                border-radius: 4px;
+                background: linear-gradient(
+                  180deg,
+                  rgba(1, 206, 255, 1) 0%,
+                  rgba(0, 150, 229, 1) 100%
+                );
+
+                border: 1px solid rgba(95, 154, 251, 1);
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+              ">
+              控制场景
+            </button>
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 12px;
+                margin-right: 8px;
+              ">手动</span>
+            <img src="/asset/image/bulbLogo/22406.png" alt="" />
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 8px;
+                margin-right: 40px;
+              ">自动</span>
+          </div>
+          <div class="temp-btn">
+            <button style="
+                width: 68px;
+                height: 40px;
+                border-radius: 4px;
+                background: linear-gradient(
+                  180deg,
+                  rgba(1, 206, 255, 1) 0%,
+                  rgba(0, 150, 229, 1) 100%
+                );
+                border: 1px solid rgba(95, 154, 251, 1);
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+              ">
+              色温
+            </button>
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 12px;
+                margin-right: 8px;
+              ">4000k</span>
+            <img src="/asset/image/bulbLogo/22406.png" alt="" />
+            <span style="
+                color: rgba(255, 255, 255, 1);
+                font-size: 14px;
+                font-weight: 400;
+                margin-left: 8px;
+              ">3800k</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal> -->
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { controlType } from './treeData'
+import {
+  DownOutlined,
+  UpOutlined,
+  StopOutlined,
+} from '@ant-design/icons-vue';
+
+// 初始化
+onMounted(() => {
+  const tree = props.treeData
+  // 默认选中第一个分区
+  tree[0].selected = true
+  // 默认展示第一个分区的回路
+  buttons2.value = tree[0].children
+})
+
+// 与父组件的交互  ===================================================================
+const props = defineProps({
+  // 分区结构（照明区域 > 照明回路）
+  treeData: {
+    type: Array
+  },
+});
+const emit = defineEmits(['changeArea']);
+
+// 照明区域 ==========================================================================
+
+// 照明区域 - 计划启用状态
+const isPlanEnabled = ref(false);
+// 照明区域 - 计划启用切换事件
+const togglePlan = () => {
+  isPlanEnabled.value = !isPlanEnabled.value;
+};
+
+// 照明区域 - 按钮区展开与收起状态
+const showAllButtonsArea = ref(false);
+// 照明区域 - 分区 - 被选中的按钮  默认为1
+const selectedButton = ref('1');
+// 照明区域 - 区域切换（按钮点击）事件
+const selectButton = (button: any, index: number) => {
+  // 当前选中按钮
+  selectedButton.value = button;
+  // 分区只能单选
+  props.treeData.forEach(item => {
+    item.selected = false
+  })
+  button.selected = true
+  // 切换1级分区时，重置二级分区
+  buttons2.value.forEach(item => {
+    item.selected = false
+  })
+  showControlMode.value = false
+  buttons2.value = button.children
+  // 反选area
+  emit('changeArea', []);
+  emit('changeArea', button.id);
+};
+// 照明区域 - 默认最多展示8个按钮
+const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
+
+// 照明回路 ==========================================================================
+
+// 照明回路 - 最近交互过的按钮，用于禁用和启用
+const zmhlid = ref('');
+
+// 照明回路 - 全选状态
+const selectAllCheckbox = ref(false);
+
+// 照明回路 - 面板启用/禁用状态
+const isPlanEnabled2 = ref(true);
+// 照明回路 - 面板启用/禁用切换事件
+const togglePlan2 = () => {
+  // 获取最近交互的按钮
+  const item = buttons2.value.find((button) => button.id === zmhlid.value)
+  isPlanEnabled2.value = !isPlanEnabled2.value;
+  // 禁用 - 则取消选中，增加禁止图标
+  if (isPlanEnabled2.value) {
+    item.selected = false;
+    item.stop = true
+    let level1 = String(selectedButton.value.id)
+    let arr = [level1]
+    buttons2.value.forEach(item => {
+      if (item.selected) {
+        arr.push(item.id)
+      }
+    })
+    emit('changeArea', arr)
+  // 启用 - 去除禁止图标
+  } else {
+    item.stop = false
+  }
+};
+
+// 照明回路 - 多选与单选切换事件
+const selectAll = () => {
+  emit('changeArea', [String(selectedButton.value.id)])
+  selectAllCheckbox.value = false
+  buttons2.value.forEach((button) => {
+    button.selected = false;
+  });
+  singleSelection.value = !singleSelection.value;
+  showControlMode.value = false
+};
+
+// 照明回路 - 是否单选，状态
+let singleSelection = ref(true);
+// 照明回路 - 全选切换事件（switch）
+const toggleAllSelection = () => {
+  let arr = [String(selectedButton.value.id)]
+  // 全选
+  if (selectAllCheckbox.value) {
+    buttons2.value.forEach((item) => {
+      if (!item.stop) {
+        item.selected = true;
+        arr.push(item.id)
+      } 
+    });
+  // 全不选
+  } else {
+    buttons2.value.forEach((item) => {
+      item.selected = false;
+    });
+    showControlMode.value = false
+  }
+  emit('changeArea', arr)
+};
+
+// 照明回路 - 按钮切换
+const toggleSelection = (button: any) => {
+  // 存储一次按钮ID，用于禁用/启用交互
+  zmhlid.value = button.id
+  // 如果已被锁定，则展示禁用/启用状态跳出
+  if (button.stop) {
+    return isPlanEnabled2.value = true
+  } else {
+    isPlanEnabled2.value = false
+  }
+
+  // 选择时反控俯视图
+  let level1 = String(selectedButton.value.id)
+  let level2 = button.id
+  // 单选模式，需将所有按钮设为false
+  if (singleSelection.value) {
+    buttons2.value.forEach(item => {
+      item.selected = false;
+    });
+    emit('changeArea', [level1, level2])
+    button.selected = !button.selected;
+  } else {
+    // 多选模式传值
+    button.selected = !button.selected;
+    const arr = [level1]
+    buttons2.value.forEach(item => {
+      if (item.selected) {
+        arr.push(item.id)
+      }
+    });
+    console.log(arr)
+    emit('changeArea', arr)
+  }
+  // 用于展示控制模式
+  if (button.selected) {
+    showControlMode.value = true
+    thisButtonType.value = button.type
+    thisButton.value = button
+  } else {
+    showControlMode.value = false
+    thisButton.value = null
+  }
+  
+};
+// 照明回路 - 按钮区展开与收起状态
+const showAllButtons = ref(false);
+// 照明回路 - 默认最多展示8个按钮
+const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
+// 照明回路 - 所有按钮
+const buttons2 = ref([]);
+
+// 控制模式 =======================================================================
+// 控制模式 - 决定该区域是否显示
+const showControlMode = ref(false);
+const thisButtonType = ref(null)
+const thisButton = ref(null)
+// 控制模式 - 当前选择按钮
+const selectedButton3 = ref('');
+// 控制模式 - 按钮切换
+const selectButton3 = (button3) => {
+  thisButton.value.type = button3.type
+  thisButtonType.value = button3.type
+  showControlScene.value = button3.name === '手动';
+  selectedButton4.value = ''; // 清空选中的控制场景按钮
+};
+
+// 控制场景 =======================================================================
+// 控制场景 - 决定该区域是否显示
+const showControlScene = ref(false);
+// 控制场景 - 所有按钮
+const controlSceneButtons = ref([
+  { label: '检修', selected: false },
+  { label: '午休', selected: false },
+  { label: '疏散', selected: false },
+  { label: '客流高峰', selected: false },
+]);
+// 控制场景 - 当前选择按钮
+const selectedButton4 = ref('');
+// 控制场景 - 按钮切换
+const selectButton4 = (button4) => {
+  selectedButton4.value = button4.label;
+};
+
+// 灯具参数 ========================================================================
+// 灯具参数 - 表格数据
+const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
+
+const handleRowClick = (index: any) => {
+    trindex.value = index;
+    if (index === trindex.value) {
+      console.log('tri');
+    }
+    // 显示模态框
+    logModalVisible.value = true;
+  };
+
+// 底部表格 ========================================================================
+
+const refresh = () => {
+    selectedButton.value = {};
+    showControlMode.value = false;
+    showControlScene.value = false;
+    selectedButton3.value = null;
+    selectedButton4.value = null;
+};
+// 执行确认
+const executevisible = ref<boolean>(false);
+  const showModal = () => {
+    executevisible.value = true;
+  };
+</script>
+<style lang="less" scoped>
+// 抽屉
+.drawer-item {
+
+  .light-area,
+  .circuit-area,
+  .control-area,
+  .control-scene-area,
+  .light-parameters-area {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .light-area-tab,
+  .circuit-tab,
+  .control-tab,
+  .control-scene-tab,
+  .light-parameters-tab {
+    width: 5px;
+    height: 23px;
+    opacity: 1;
+    background: rgba(26, 174, 251, 1);
+    margin-right: 4px;
+  }
+
+  .light-area-text,
+  .circuit-text,
+  .control-text,
+  .control-scene-text,
+  .light-parameters-text {
+    font-size: 14px;
+    color: white;
+    padding-left: 5px;
+    line-height: 23px;
+    width: 110px;
+    height: 23px;
+    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
+    user-select: none;
+  }
+
+  .light-area-tab,
+  .light-area-text {
+    display: inline-block;
+    justify-content: center;
+  }
+
+  .plan.enabled {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    vertical-align: top;
+    margin-left: 235px;
+    width: 88px;
+    height: 32px;
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+    color: white;
+  }
+
+  .plan.disabled {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: white;
+    vertical-align: top;
+    margin-left: 235px;
+    width: 88px;
+    height: 32px;
+    background-color: red;
+  }
+
+  .plan:disabled {
+    cursor: not-allowed;
+  }
+
+  .openplan.enabled2 {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: white;
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+    color: white;
+  }
+
+  .openplan.disabled2 {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: white;
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+    background-color: red;
+  }
+
+  .openplan:disabled {
+    cursor: not-allowed;
+  }
+
+  .btn2 {
+    display: flex;
+    align-items: center;
+    margin-left: 80px;
+  }
+
+  .openzm {
+    cursor: pointer;
+    color: rgba(34, 183, 255, 1);
+    margin-left: 20px;
+    font-size: 14px;
+  }
+
+  .custom-checkbox {
+    width: 13px;
+    height: 13px;
+  }
+
+  .both {
+    width: 59.79px;
+    height: 32px;
+    opacity: 1;
+    background: linear-gradient(180deg,
+        rgba(255, 187, 0, 1) 0%,
+        rgba(255, 112, 3, 1) 91.21%,
+        rgba(255, 129, 3, 1) 100%);
+    margin-left: 8px;
+    font-size: 12px;
+    color: white;
+    border: none;
+    border-radius: 5px;
+  }
+
+  .btn2 {
+    button {
+      margin: 0 5px;
+    }
+  }
+
+  .allBtn {
+    border: 0;
+    width: 40px;
+    color: white;
+    background-color: transparent;
+  }
+
+  .blue-background.ant-switch-checked {
+    background-color: linear-gradient(180deg,
+        rgba(1, 206, 255, 1) 0%,
+        rgba(0, 150, 229, 1) 100%) !important;
+  }
+
+  .grey-background.ant-switch {
+    background-color: grey !important;
+  }
+
+  .blue-background.ant-switch-checked .ant-switch-handle {
+    background-color: linear-gradient(180deg,
+        rgba(1, 206, 255, 1) 0%,
+        rgba(0, 150, 229, 1) 100%) !important;
+  }
+
+  .grey-background.ant-switch .ant-switch-handle {
+    background-color: grey !important;
+  }
+
+  p {
+    color: white;
+  }
+
+  .area,
+  .btnarea,
+  .control-mode-btn-area,
+  .control-scene-btn-area {
+    margin-left: -17px;
+
+    button {
+      width: 21%;
+      padding: 0 2%;
+    }
+  }
+
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 17px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: white;
+    text-align: center;
+    vertical-align: top;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .selected {
+    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
+    color: rgba(0, 61, 90, 1);
+    border: 1px solid white;
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+
+  .circuit-area,
+  .control-scene-area,
+  .light-parameters-area {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .circuit-tab,
+  .circuit-text {
+    display: inline-block;
+  }
+
+  .batch {
+    width: 60px;
+    height: 32px;
+    opacity: 1;
+    border: 1px solid rgba(67, 136, 251, 1);
+    color: rgba(67, 136, 251, 1);
+    border-radius: 5px;
+    background-color: white;
+    margin-left: 11px;
+  }
+
+  .control-area {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .control-tab,
+  .control-text {
+    display: inline-block;
+  }
+
+  :deep(.cell) {
+    text-align: center;
+  }
+
+  :deep(#pane-first) {
+    height: 100%;
+  }
+
+  .control-scene-tab,
+  .control-scene-text {
+    display: inline-block;
+  }
+
+  .light-parameters-tab,
+  .light-parameters-text {
+    display: inline-block;
+  }
+
+  .light-parameters-textarea>p {
+    height: 100%;
+    display: flex;
+    border: 1px solid rgba(236, 239, 245, 1);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .bottom {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-bottom: 10px;
+  }
+
+  .execute {
+    margin-right: 20px;
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    border-radius: 4px;
+    background: rgba(67, 136, 251, 1);
+    font-size: 14px;
+    font-weight: 400;
+    color: white;
+    border: 0;
+    margin-left: 10px;
+  }
+
+  .flushed {
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(102, 102, 102, 1);
+    background: white;
+    border: 1px solid rgba(193, 197, 204, 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;
+  }
+
+  .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: white;
+  }
+
+  .divadd {
+    width: 100%;
+    height: 64px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    margin-bottom: 10px;
+    margin-right: 20px;
+  }
+
+  .atable {
+    margin-top: 20px;
+  }
+
+  :deep(.ant-table-pagination) {
+    visibility: hidden;
+  }
+
+  .drawer-content {
+    margin-left: 20px;
+  }
+
+  .arrow-indicator {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+
+  .drawer-title1 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 20px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .drawer-title2 {
+    position: fixed;
+    width: 33px;
+    height: 33px;
+    top: 0;
+    bottom: 0;
+    right: 495px;
+    margin: auto;
+    z-index: 99999;
+  }
+
+  .arrowbtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    background: rgba(0, 0, 0, 1);
+    opacity: 0.5;
+    border: none;
+  }
+
+  :deep(.ant-tabs-tab-btn) {
+    color: white;
+  }
+
+  :deep(.ant-table) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-bordered) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-thead) {
+    background-color: transparent;
+  }
+
+  :deep(.ant-table-cell) {
+    background-color: transparent;
+    color: #fff;
+  }
+
+  .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%;
+    cellspacing: 0;
+    cellpadding: 0;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .light-area,
+  .circuit-area,
+  .control-area,
+  .control-scene-area,
+  .light-parameters-area {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .zmhlbtn {
+    position: relative;
+  }
+  .anticon-stop {
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+  }
+}
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/treeData.ts b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/treeData.ts
new file mode 100644
index 0000000..b764b47
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/treeData.ts
@@ -0,0 +1,88 @@
+import { ref } from 'vue';
+export const treeData = ref([
+  {
+    label: '站厅',
+    id: '1',
+    // 前端遍历后添加，属前端属性
+    selected: false,
+    children: [{
+      label: '站厅1区',
+      id: '1-1',
+      // 前端属性
+      selected: false,
+      // 后端属性（表示禁用了一个设备）
+      stop: false,
+      // 当前的控制模式
+      type: 3
+    },{
+      label: '站厅2区',
+      id: '1-2',
+      selected: false,
+      stop: false,
+      type: 1
+    }]
+  },
+  {
+    label: '站台',
+    id: '2',
+    selected: false,
+    children: [{
+      label: '站台1区',
+      id: '2-1',
+      selected: false,
+      stop: false,
+      type: 1
+    },{
+      label: '站台2区',
+      id: '2-2',
+      selected: false,
+      stop: false,
+      type: 2
+    },{
+      label: '站台3区',
+      id: '2-3',
+      selected: false,
+      stop: false,
+      type: 3
+    },{
+      label: '站台4区',
+      id: '2-4',
+      selected: false,
+      stop: false,
+      type: 1
+    }]
+  },{
+    label: '办公室',
+    id: '3',
+    selected: false,
+    children: [{
+      label: '办公室1区',
+      id: '3-1',
+      selected: false,
+      stop: false,
+      type: 2
+    }]
+  },{
+    label: '楼道',
+    id: '4',
+    selected: false,
+    children: [{
+      label: '楼道1区',
+      id: '4-1',
+      selected: false,
+      stop: false,
+      type: 3
+    }]
+  },
+]);
+
+export const controlType = ref([{
+  name: '托管',
+  type: 1,
+},{
+  name: 'AI',
+  type: 2,
+},{
+  name: '手动',
+  type: 3,
+}])
\ No newline at end of file