diff --git a/hx-ai-intelligent/src/api/IlluminationInfo.ts b/hx-ai-intelligent/src/api/IlluminationInfo.ts
new file mode 100644
index 0000000..f6de125
--- /dev/null
+++ b/hx-ai-intelligent/src/api/IlluminationInfo.ts
@@ -0,0 +1,20 @@
+
+// 照明系统及相关接口
+export enum lightingManage {
+
+  // 主页 ========================================================
+
+  // 获得分区与线路
+  getArea = '/carbon-smart/IlluminationInfo/region',
+  // 修改线路的可用/禁用状态
+  setDisable = '/carbon-smart/IlluminationInfo/revisePanel',
+
+  // 计划列表tab页 ================================================
+
+  // 获得计划列表tab页的表格数据
+  getPlanTable = '/carbon-smart/IlluminationPlan/selectPanelPlan',
+  // 获得计划列表tab页的穿梭框左侧数据
+  getLeftPlan = '/carbon-smart/IlluminationPlan/getPlan',
+  // 提交穿梭框被选择的数据
+  submitLeftPlan = '/carbon-smart/IlluminationPlan/joinPlan',
+}
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue
index 6f92f87..1b57ddd 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue
@@ -215,7 +215,7 @@
                     pageNum: 1,
                     pageSize: 99,
                   },
-                  placeholder: '请选择设备点位',
+                  placeholder: '请选择设备名称',
                   resultField: 'data.records',
                   labelField: 'deviceName',
                   valueField: 'id',
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
index f44bf69..f591179 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue
@@ -196,8 +196,8 @@
     });
   };
   //选择设备方法
-  const selectDevice = (value: string) => {
-    console.log(`selected ${value}`);
+  const selectDevice = () => {
+    getDevicePoint({ id: infoObject.value.deviceName });
   };
   //获取设备列表
   const getDevicePage = (value: any) => {
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
index 41ec61d..0f660ba 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue
@@ -296,7 +296,6 @@
         const expanded = dataList
           .map((item: TreeProps['treeData'][number]) => {
             if (item.title.indexOf(value) > -1) {
-              console.log(item.title.indexOf(value));
               return getParentKey(item.key, deptTreeData.value);
             }
             return null;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/energyAlarmConfig.ts b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/energyAlarmConfig.ts
index 5edbf31..75531f6 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/energyAlarmConfig.ts
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/energyAlarmConfig.ts
@@ -98,10 +98,11 @@ export const energyAlarmConfigs = (
           name: 'energyAlarmEdit',
           dynamicParams: ['uuid', 'appealType'],
           handle: (data: any) => {
-            data.monitorFrequency = data.monitorFrequency.value;
-            data.priority = data.priority.value;
-            data.repetitions = data.repetitions.value;
-            editeEnergyAlarm.value.toggle(data);
+            const obj = { ...data };
+            obj.monitorFrequency = data.monitorFrequency.value;
+            obj.priority = data.priority.value;
+            obj.repetitions = data.repetitions.value;
+            editeEnergyAlarm.value.toggle(obj);
           },
         },
         {
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts
index 3848142..18530e1 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts
@@ -99,10 +99,11 @@ export const equipmentAlarmTableConfig = (
           name: 'equipmentAlarmEdit',
           dynamicParams: ['uuid', 'appealType'],
           handle: (data: any) => {
-            data.priority = data.priority.value;
-            data.repetitions = data.repetitions.value;
-            data.monitorTimeUnit = data.monitorTimeUnit.value;
-            editEquipmentAlarm.value.toggle(data);
+            const obj = { ...data };
+            obj.priority = data.priority.value;
+            obj.repetitions = data.repetitions.value;
+            obj.monitorTimeUnit = data.monitorTimeUnit.value;
+            editEquipmentAlarm.value.toggle(obj);
           },
         },
         {
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
index baeb5df..8aea66b 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/look.vue
@@ -17,14 +17,14 @@
           display: flex;
           position: relative;
           font-size: 16px;
-          border-bottom: 1px solid rgb(255, 118, 2); /* 设置底部边框为1像素实线，并指定颜色 */
+          border-bottom: 1px solid #2778ff; /* 设置底部边框为1像素实线，并指定颜色 */
         ">
         <div class="card"></div>
         <div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
           告警编号：20230310001
         </div>
         <div style="right: 20px; position: absolute; height: 35px; line-height: 35px">
-          15点08分
+          2024-03-10 15:08:10
         </div>
       </div>
       <!-- center -->
@@ -38,7 +38,7 @@
           <a-descriptions-item label="状态">新告警</a-descriptions-item>
           <a-descriptions-item label="错误码">C003</a-descriptions-item>
           <a-descriptions-item label="告警描述"
-            ><div style="color: #ff7602">用电量超标</div> 当日用电量超出预设值</a-descriptions-item
+            ><div style="color: #2778ff">用电量超标</div> 当日用电量超出预设值</a-descriptions-item
           >
           <a-descriptions-item label="设备信息"> 1栋10层低压柜 </a-descriptions-item>
           <a-descriptions-item label="重复次数"> 0 </a-descriptions-item>
@@ -233,7 +233,7 @@
     top: 0px;
     width: 5px;
     height: 35px;
-    background-color: rgb(254, 118, 2);
+    background-color: #2778ff;
   }
   :deep(.ant-descriptions-item-label) {
     width: 25%;
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
index 9ec1b01..499db32 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/status.vue
@@ -1,7 +1,7 @@
 <template>
   <ns-drawer
     v-model:visible="visible"
-    width="520"
+    width="550"
     :title="' '"
     :footer-style="{ textAlign: 'right' }"
     :ok="btnClick"
@@ -9,53 +9,34 @@
     placement="right"
     @close="handleClose">
     <a-tabs>
-      <a-tab-pane key="1" tab="更新状态">Content of Tab Pane 1</a-tab-pane>
+      <a-tab-pane key="1" tab="更新状态">
+        <div style="width: 100%; padding: 24px">
+          <a-form ref="formRef" :model="infoObject" :rules="rules">
+            <a-form-item ref="status" label="当前状态" name="status">
+              <a-select
+                v-model:value="infoObject.status"
+                show-search
+                placeholder="请选择设备点位"
+                style="width: 85%"
+                :options="statusOptions"
+                :filter-option="filterDevicePoint" />
+            </a-form-item>
+            <a-form-item label="备注" name="desc">
+              <a-textarea
+                v-model:value="infoObject.desc"
+                placeholder="请输入异常描述"
+                style="width: 85%"
+                :autoSize="{ minRows: 4, maxRows: 4 }" />
+            </a-form-item>
+          </a-form>
+        </div>
+      </a-tab-pane>
       <a-tab-pane key="2" tab="状态流程">
-        <!-- <a-steps direction="vertical" :current="4">
-          <template v-for="index in 4">
-            <a-step>
-              <template #icon>
-                <img src="../../../../src/icon/status-off.svg" />
-              </template>
-              <template #description>
-                <div
-                  style="
-                    width: 400px;
-                    min-height: 40px;
-                    background-color: #f8fafc;
-                    margin-left: 20px;
-                    border-radius: 4px; /* 设置圆角半径 */
-                    padding: 12px;
-                  ">
-                  <div style="width: 100%; height: 40px; display: flex; position: relative">
-                    <a-tag style="width: 60px; height: 20px; text-align: center" color="#04d919"
-                      >已完成</a-tag
-                    >
-                    <div
-                      style="
-                        position: absolute;
-                        left: 30%;
-                        top: -2px;
-                        transform: translateX(-50%);
-                        color: #3a3a3a;
-                      "
-                      >李四</div
-                    >
-                    <div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
-                      >2024-03-11 11:30:06</div
-                    >
-                  </div>
-                  <div style="width: 100%; color: #3a3a3a"> 工单已完成并通过验收 </div>
-                </div>
-              </template>
-            </a-step>
-          </template>
-        </a-steps> -->
         <NsSteps v-bind="config" />
       </a-tab-pane>
     </a-tabs>
     <template #footer>
-      <a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button>
+      <!-- <a-button style="margin-right: 8px" type="primary" @click="createOrder">创建工单</a-button> -->
       <a-button type="primary" @click="btnClick">确定</a-button>
     </template>
   </ns-drawer>
@@ -72,6 +53,14 @@
 
     setup() {
       const visible = ref(false);
+      const infoObject = ref({});
+      const statusOptions = ref([
+        { value: '0', label: '待处理' },
+        { value: '1', label: '处理中' },
+        { value: '2', label: '已完成' },
+        { value: '3', label: '超时' },
+        { value: '4', label: '已关闭' },
+      ]);
       const logList = ref([
         { name: '李四', status: '2' },
         { name: '王五', status: '4' },
@@ -91,6 +80,8 @@
       };
       const toggle = (data) => {
         console.log(data, 'data');
+        infoObject.value = logList.value[0];
+        console.log(infoObject.value, 'infoObject.value');
         visible.value = true;
       };
       const createOrder = () => {
@@ -120,6 +111,8 @@
         });
       };
       return {
+        infoObject,
+        statusOptions,
         btnClick,
         createOrder,
         visible,
@@ -131,4 +124,10 @@
     },
   });
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less">
+  :deep(.ant-form-item-label) {
+    z-index: 20;
+    text-align: right;
+    width: 17%;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts
index 8d4092f..069127e 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts
+++ b/hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/ts/config.ts
@@ -145,7 +145,7 @@ export const notificationtableConfig = (look: any, status: any) => {
           fieldMap: ['manufactureBeginDate', 'manufactureEndDate'],
           componentProps: {
             valueFormat: 'YYYY-MM-DD',
-            placeholder: ['设备生产开始日期', '设备生产结束日期'],
+            placeholder: ['开始日期', '结束日期'],
           },
         },
       ],
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
index 9298666..d792f11 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/carbonEmissions/index.vue
@@ -83,7 +83,7 @@
     },
     {
       title: '计量单位',
-      dataIndex: 'unit',
+      dataIndex: 'unitName',
     },
     {
       title: '加权平均',
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
index 33312db..c4a1582 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
@@ -214,7 +214,9 @@
   const wrapperCol = { span: 19 };
   const switchLabelCol = { span: 10 };
   const switchWrapperCol = { span: 14 };
-  const formState = ref({})
+  const formState = ref({
+    orgId: orgId.value,
+  })
   // 定义form表单的必填
   const rules: Record<string, Rule[]> = {
     energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
@@ -289,8 +291,8 @@
       },
       {
         title: '计量单位',
-        className: 'unit',
-        dataIndex: 'unit',
+        className: 'unitName',
+        dataIndex: 'unitName',
       },
       {
         title: '全年',
@@ -361,9 +363,9 @@
             getDictList()
             visible.value = true
             fetch(energyConsumption.findById , {id : record.id }).then((res) => {
-              if(res.data.unit){
-                res.data.unit = res.data.unit.split(',')
-              }
+              // if(res.data.unit){
+              //   res.data.unit = res.data.unit.split(',')
+              // }
               formState.value = res.data
             });
           },
@@ -423,12 +425,14 @@
       .then(() => {
         console.log('values', formState, toRaw(formState));
         if(formState.value.unit){
-          formState.value.unit = formState.value.unit.join(',')
+          formState.value.unit = formState.value.unit.join(',').split(',')[1]
         }
         if(formState.value.id){
           fetch(energyConsumption.update , formState.value).then((res) => {
             visible.value = false
-            formState.value = {}
+            formState.value = {
+              orgId: orgId.value,
+            }
             message.success('操作成功！');
             mainRef.value?.nsTableRef.reload();
           });
@@ -439,7 +443,9 @@
               NsMessage.warning(res.data);
             }else{
               visible.value = false
-              formState.value = {}
+              formState.value = {
+                orgId: orgId.value,
+              }
               message.success('操作成功！');
               mainRef.value?.nsTableRef.reload();
             }
@@ -491,8 +497,8 @@
     getDictList()
     visible.value = true
     fetch(energyConsumption.findById , {id : record.id }).then((res) => {
-      if(res.data.unit){
-        res.data.unit = res.data.unit.split(',')
+      if(res.data.unitName){
+        res.data.unitName = res.data.unitName.split(',')
       }
       formState.value = res.data
     });
@@ -519,7 +525,9 @@
   // 关闭新增抽屉
   const onClose = () => {
     visible.value = false;
-    formState.value = {}
+    formState.value = {
+      orgId: orgId.value,
+    }
     formRef.value.resetFields();
   };
   // 点击上传凭证按钮
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue
index 6f1a5d3..602471f 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue
@@ -319,11 +319,11 @@
           label: '编辑',
           name: 'userEdit',
           handle: (record: any) => {
-            selectedRowKeys.value = [record.carbonId];
+            selectedRowKeys.value = [record.factorId];
             formState.value.id = record.id
             formState.value.emissionFactors = record.emissionFactors
             formState.value.dateRange = [record.startTime, record.endTime];
-            formState.value.carbonId = record.carbonId
+            formState.value.factorId = record.factorId
             visible.value = true
             getNewTable()
           },
@@ -375,7 +375,7 @@
   const onSelectionChange = (selectedKeys, selectedRows) => {
     selectedRowKeys.value = selectedKeys;
     formState.value.emissionFactors = selectedRows[0].emissionFactors
-    formState.value.carbonId = selectedRows[0].id
+    formState.value.factorId = selectedRows[0].id
   };
   const queryData = ref({
     orgId: orgId.value,
@@ -390,11 +390,11 @@
   };
   // 点击编辑按钮
   const editData = (record) =>{
-    selectedRowKeys.value = [record.carbonId];
+    selectedRowKeys.value = [record.factorId];
     formState.value.id = record.id
     formState.value.emissionFactors = record.emissionFactors
     formState.value.dateRange = [record.startTime, record.endTime];
-    formState.value.carbonId = record.carbonId
+    formState.value.factorId = record.factorId
     visible.value = true
     getNewTable()
   };
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
new file mode 100644
index 0000000..eb62cd7
--- /dev/null
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
@@ -0,0 +1,10 @@
+<template>
+  
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/index.vue b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/index.vue
index d1a1a77..89ff479 100644
--- a/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/index.vue
+++ b/hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/index.vue
@@ -1,8 +1,55 @@
 <template>
-  <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
+  <!-- 首页 -->
+  <div v-if="isMainPage">
+    <ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" />
+  </div>
+  <!-- 填报页 -->
+  <div v-if="fillInPage">
+
+  </div>
+  <!-- 新增报告弹窗 -->
+  <a-drawer
+    :width="500"
+    :visible="visible"
+    :body-style="{ paddingBottom: '80px' }"
+    :footer-style="{ textAlign: 'right' }"
+    destroyOnClose
+    @close="onClose">
+    <a-form
+      ref="formRef"
+      :model="formState"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-item ref="name" label="报告名称" name="energyType">
+        <a-input v-model:value="formState.energyType" placeholder="请输入报告名称" />
+      </a-form-item>
+      <a-form-item ref="name" label="报告年度" name="energyType">
+        <a-date-picker v-model:value="value5" picker="year" />
+      </a-form-item>
+      <a-form-item ref="name" label="适用标准" name="energyType">
+        <a-input v-model:value="formState.energyType" placeholder="请输入适用标准" />
+      </a-form-item>
+      <a-form-item label="报告周期" name="emissionType" :required="isRequired">
+        <a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
+          <a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
+            {{ item.cnValue }}
+          </a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item ref="name" label="适用标准" name="energyType">
+        <a-range-picker v-model:value="value4" picker="month" />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
+      <a-button type="primary" @click="onSubmit">确定</a-button>
+    </template>
+  </a-drawer>
 </template>
 
-<script  lang="ts" setup>
+<script lang="ts" setup>
   import { ref } from 'vue';
   import { http } from '/nerv-lib/util/http';
   import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
@@ -13,6 +60,27 @@
   const fetch = (api, params = { orgId }) => {
     return http.post(api, params);
   };
+  // 判断展示哪个页面
+  const isMainPage = ref(false);
+  const fillInPage = ref(true);
+  // 新增相关数据
+  const visible = ref(false);
+  const formState = ref({})
+  const formRef = ref();
+  const labelCol = { span: 5 };
+  const wrapperCol = { span: 19 };
+  // 定义form表单的必填
+  const rules: Record<string, Rule[]> = {
+    energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
+    isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }]
+  };
+  // 关闭新增抽屉
+  const onClose = () => {
+    visible.value = false;
+    formState.value = {}
+    formRef.value.resetFields();
+  };
+  // 表格相关数据
   const tableConfig = ref({
     title: '数据库',
     api: carbonEmissionFactorLibrary.getTableList,
@@ -25,6 +93,7 @@
         name: 'userAdd',
         type: 'primary',
         handle: () => {
+          visible.value = true
         },
       },
     ],
@@ -67,12 +136,15 @@
           label: '编辑',
           name: 'userEdit',
           handle: (record: any) => {
+            visible.value = true
           },
         },
         {
           label: '填报',
           name: 'fillIn',
           handle: (record: any) => {
+            isMainPage.value = false
+            fillInPage.value = true
           },
         },
         {
@@ -91,7 +163,6 @@
         },
       ],
     },
-
     formConfig: {
       schemas: [
         {
@@ -103,11 +174,22 @@
             maxLength: 30,
           },
         },
+        {
+          field: 'createTime1',
+          label: '采购日期',
+          component: 'NsRangePicker',
+          fieldMap: ['purchaseBeginDate', 'purchaseEndDate'],
+          componentProps: {
+            valueFormat: 'YYYY-MM-DD',
+            placeholder: ['报告年度', '报告年度'],
+          },
+        },
       ],
       params: {},
     },
     rowKey: 'id',
   });
+  // 填报页
 </script>
 
 <style lang="less" scoped>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
index 7dee3a5..b3bf2f3 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less
@@ -3,6 +3,7 @@
   right: 496px;
   width: 500px;
   height: 100%;
+  z-index: 99;
   top: 0;
   bottom: 0;
   margin: auto;
@@ -12,6 +13,7 @@
   display: flex;
   padding: 25px;
   flex-direction: column;
+  transition: all ease 0.5s;
   .content {
     overflow-y: scroll;
     .div-operation {
@@ -138,4 +140,11 @@
       color: black;
     }
   }
+}
+
+.fade-enter-active, .fade-leave-active {
+  transform: translateX(0px);
+}
+.fade-enter-from, .fade-leave-to {
+  transform: translateX(496px);
 }
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
index dd02f25..4b4cf21 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.less
@@ -1,7 +1,5 @@
 // 页面容器
 .lighting-box {
-    // width: 100%;
-    // height: 100%;
     position: relative;
     // background: linear-gradient(#badaff, #8cabeb, #7095de);
     // 照明设备功能总容器
@@ -47,32 +45,46 @@
             height: 240px;
             transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
             display: flex;
-            gap: 8px;  
+            gap: 5px;  
             .area1 {
-                width: 170px;
+                width: 70px;
                 background: rgba(0, 251, 91, 0.3);
                 border: 2px solid rgb(0, 251, 91);
                 display: flex;
             }   
             .area2 {
-                width: 240px;
+                width: 200px;
                 background: rgba(255, 165, 0, 0.3);
                 border: 2px solid rgb(255, 165, 0);
                 display: flex;
             } 
             .area3 {
-                width: 110px;
+                width: 120px;
                 background: rgba(255, 0, 0, 0.3);
                 border: 2px solid rgb(255, 0, 0);
+                display: flex;
             } 
             .area4 {
-                flex: 1;
+                width: 70px;
                 background: rgba(80, 236, 244, 0.3);
                 border: 2px solid rgb(80, 236, 244);
+                display: flex;
+            } 
+            .area5 {
+                flex: 1;
+                background: rgba(0, 251, 91, 0.3);
+                border: 2px solid rgb(0, 251, 91);
+                display: flex;
+            } 
+            .area6 {
+                flex: 1;
+                background: rgba(255, 165, 0, 0.3);
+                border: 2px solid rgb(255, 165, 0);
+                display: flex;
             } 
-            // .area-item:hover {
-            //     transform: scale(1.05);
-            // }
+            .area-item:hover {
+                transform: scale(1.05);
+            }
             .area-item {
                 cursor: pointer;
                 transition: all ease 0.2s;
@@ -82,37 +94,16 @@
                     display:flex;
                     justify-content: center;
                     align-items: center;
-                    .group-shadow1 {
-                        width: 35px;
-                        height: 150px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow2 {
-                        width: 35px;
-                        height: 180px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow3 {
-                        width: 40px;
-                        height: 180px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow4 {
-                        width: 40px;
-                        height: 160px;
+                    box-sizing: border-box;
+                    padding: 10px;
+                    // border: 2px solid red;
+                    .shadow-box {
+                        width: 30px;
+                        height: 200px;
                         border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
+                        background: rgba(0, 0, 0, 0.2);
                     }
                 }
-                // .group-shadow {
-                //     transition: all ease 0.2s;
-                // }
-                // .group-shadow:hover {
-                //     transform: scale(1.05);
-                // }
             }
         }
     }
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index a1c1006..dee6eb5 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -3,25 +3,31 @@
         <div class="lighting-img-box">
             <!-- 左上角，区域切换 -->
             <div class="btn-box">
-                <button class="btn-item" @click=changeArea(1)>1F</button>
-                <button class="btn-item" @click=changeArea(2)>2F</button>
-                <button class="btn-item" @click=changeArea(3)>站台</button>
+                <button class="btn-item" @click=changeFloor(1)>1F</button>
+                <button class="btn-item" @click=changeFloor(2)>2F</button>
             </div>
             <!-- 楼层区域 -->
             <div class="area">
                 <div 
                 v-for="(item, index) in treeData" 
-                :class="computedClass(String(item.id))"
-                @click="getArea(item)"
+                :class="computedClass(item.id)"
+                @click="changeThisArea([item])"
                 :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)"></div>
+                        <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>
+                <light v-for="(item, index) in bulbs" 
+                :key="index" 
+                :styleObject="item.styleText" 
+                :type="item.type" 
+                :visible="item.visible">
+                </light>
             </div>
         </div>
         <!-- 右侧抽屉的触发按钮 -->
@@ -44,7 +50,7 @@
         :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>
+                    <tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
                     <tabs2></tabs2>
@@ -59,94 +65,170 @@
   
 <script setup lang="ts">
 
-import { ref } from 'vue';
-import { treeData } from './treeData'
+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';
+} from '@ant-design/icons-vue';
 
-// 分区 - 当前选择的分区序号 - 默认选择一区
+// 类声明 =======================================================
+
+interface items {
+    id: string,
+
+}
+
+// 初始化 =======================================================
+
+onMounted(() => {
+    http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
+        const data = res.data
+        /** 由前端创建的，只在前端使用的变量
+         * @param id 用于判断样式和层级的前端属性
+         * @param selected 用于表示是否选中的前端属性
+         */
+        data.forEach((item, index) => {
+            if (index == 0) {
+                item.selected = true
+            } else {
+                item.selected = false
+            }
+            item.id = String(index + 1)
+            item.children = []
+            // deviceGroup后端返回了对象，此处转化为数组
+            let i = 1;
+            for (let obj in item.deviceGroup) {
+                item.deviceGroup[obj].selected = false
+                item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
+                item.children.push(item.deviceGroup[obj])
+            }
+        })
+        treeData.value = data
+    })
+})
+
+// 分层业务 =====================================================
+
+// 左上角分层切换
+const changeFloor = (area: number) => {
+    if (area == 1) {
+        console.log('1F')
+    } else if (area == 2) {
+        console.log('2F')
+    } 
+}
+
+// 分区业务 =====================================================
+
+// 分区结构树
+const treeData = ref([])
+// 当前选中的分区id
+const nowArea = ref('1')
+// 当前选中的分区序号 - 用于样式渲染
 const area = ref(['1'])
-// 分区 - 分区小灯泡 - 此处位置需前端写死
+// 线路内小灯泡 - 此处位置需前端写死
 const bulbs = ref([
     {
-        styleText: { left: '190px', bottom: '200px' },
+        styleText: { left: '180px', bottom: '200px' },
         area: 1,
         type: 1,
         visible: true
     },
     {
-        styleText: { left: '245px', bottom: '125px' },
+        styleText: { left: '230px', bottom: '125px' },
         area: 1,
         type: 2,
         visible: true
     },
     {
-        styleText: { left: '355px', bottom: '160px' },
+        styleText: { left: '320px', bottom: '140px' },
         area: 1,
         type: 3,
         visible: true
     },
     {
-        styleText: { left: '295px', bottom: '230px' },
+        styleText: { left: '245px', bottom: '230px' },
         area: 1,
         type: 3,
         visible: true
     },
     {
-        styleText: { left: '425px', bottom: '230px' },
+        styleText: { left: '405px', bottom: '230px' },
         area: 2,
         type: 3,
         visible: true
     },
     {
-        styleText: { left: '470px', bottom: '190px' },
+        styleText: { left: '460px', bottom: '180px' },
         area: 2,
         type: 3,
         visible: true
     },
     {
-        styleText: { left: '380px', bottom: '275px' },
+        styleText: { left: '360px', bottom: '275px' },
         area: 2,
         type: 3,
         visible: true
     },
     {
-        styleText: { left: '700px', bottom: '320px' },
+        styleText: { left: '715px', bottom: '320px' },
         area: 3,
         type: 1,
         visible: true
     },
 ])
-
-// 分区 - 左上角分区切换
-const changeArea = (area: number) => {
-    if (area == 1) {
-        console.log('1F')
-    } else if (area == 2) {
-        console.log('2F')
-    } else if (area == 3) {
-        console.log('站台')
-    }
-}
-// 分区 - 单个分区切换
-const getArea = (result: any) => {
-    // 如果传入的值是数组
+// 由子组件控制的分区与线路切换
+const changeArea = (result: any) => {
+    console.log(result,'changeArea')
+    // 数组
     if (Array.isArray(result)) {
         area.value = result
-    // 如果不是数组
+    // 不是数组
     } else {
         area.value.length = 0
         area.value[0] = String(result)
     } 
 }
-// 分区 - 样式函数
+// 由当前组件控制的分区切换
+const changeThisArea = (result: any) => {
+    console.log(result, 'changeThisArea')
+    // 修改前，将所有选项置空
+    reset()
+    let level1 = result[0];
+    area.value.length = 0
+    if (result.length === 1) {
+        result[0].selected = true
+        area.value.push(result[0].id)
+    } 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)
+    }
+    nowArea.value = level1.id
+}
+// 重置分区树所有当前选项
+const reset = () => {
+    treeData.value.forEach(item => {
+        item.selected = false
+        item.children.forEach(i => {
+            i.selected = false
+        })
+    })
+}
+// 俯视图分区选中计算函数
 const computedClass = (string: string) => {
     if (area.value.indexOf(string) != -1) {
         return `isActive area-item area${string}`
@@ -154,6 +236,9 @@ const computedClass = (string: string) => {
         return `area-item area${string}`
     }
 }
+
+// 抽屉业务 =====================================================
+
 // 抽屉 - 当前选择的tab
 let activeKey = ref('1');
 // 抽屉 - 打开状态
@@ -166,9 +251,11 @@ const toggleDrawer = () => {
 </script>
 <style lang="less" scoped>
 @import "./index.less";
+// 当前选中分区的样式
 .isActive {
     border: 3px solid white !important;
 }
+// 抽屉顶部tab按钮样式
 :deep(.ant-tabs-tab-btn) {
     color: white;
 }
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
new file mode 100644
index 0000000..1f4ae69
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.less
@@ -0,0 +1,439 @@
+// 抽屉
+.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;
+  }
+
+  .execute {
+    margin-right: 20px;
+    width: 74px;
+    height: 40px;
+    opacity: 1;
+    cursor: pointer;
+    border-radius: 4px;
+    background: rgba(67, 136, 251, 1);
+    font-size: 14px;
+    font-weight: 400;
+    color: white;
+    border: 0;
+    margin: 0 10px;
+  }
+
+  .flushed {
+    width: 74px;
+    height: 40px;
+    cursor: pointer;
+    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);
+    margin: 0 10px;
+  }
+
+  :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;
+  }
+}
\ 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 c6bcc9f..e918e2a 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue
@@ -1,288 +1,322 @@
 <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)">
-          {{ 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 }}
+  <a-spin :spinning="isLoading">
+    <!-- 照明区域 -->
+    <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 style="margin-top: 10px">
-          <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
+      </div>
+      <!-- 照明区域按钮部分 -->
+      <div class="area">
+        <template v-if="!showAllButtonsArea">
+          <button v-for="(button, index) in limitedButtons1" :key="index"
+            :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
+            {{ button.regionName }}
+          </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.regionName }}
+          </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>
-      </template>
+      </div>
+      <div class="btnArea" v-if="selectedButton">
+        <template v-if="!showAllButtons">
+          <button v-for="(button, index) in limitedButtons2" :key="index"
+            :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
+            <stop-outlined v-if="button.panel" />
+            {{ button.deviceName }}
+          </button>
+          <div style="margin-top: 10px">
+            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
+          </div>
+        </template>
+        <template v-else>
+          <button v-for="(button, index) in buttons2" :key="index" 
+          :class="{ btn: true, selected: button.selected }" class="zmhlbtn" @click="toggleSelection(button)">
+            <stop-outlined v-if="button.panel" />
+            {{ button.deviceName }}
+          </button>
+          <div style="margin-top: 10px">
+            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
+          </div>
+        </template>
+      </div>
     </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 ? '多选' : '单选' }}
+    <!-- 控制模式部分 -->
+    <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 == thisButton.type }" @click="selectButton3(button3)">
+          {{ button3.name }}
         </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 }}
+    <!-- 控制场景部分 -->
+    <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 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 == thisButton.type }" @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>
-    <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-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.temperature }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <div style="margin-bottom: 60px;"></div>
+      </div>
     </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.temperature }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <div style="margin-bottom: 60px;"></div>
+    <!-- 底部按钮区 -->
+    <div class="bottom">
+        <a-popconfirm
+        title="刷新将会取消已作出的修改"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="changeConfirm"
+        @cancel="changeCancel"
+      >
+        <button class="flushed">刷新</button>
+      </a-popconfirm>
+      <button class="execute" @click="showModal">执行</button>
     </div>
-  </div>
-  <div class="bottom">
-    <button class="flushed" @click="refresh">刷新</button>
-    <button class="execute" @click="showModal">执行</button>
-  </div>
-
-  <div class="out-dialog" v-if="executeVisible">
-    <div class="content" v-if="executeVisible">
-      <div>
-        <div class="div-operation"></div>
-        <span class="text-operation">变更内容 </span>
-      </div>
-      <div class="j-box" v-for="item in cxList" :key="item.id">
-        <div class="journal" style="margin-top: 20px">
-          <div class="imgText">
-            <div class="zjzm">
-              <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
-            </div>
-            <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
-          </div>
-          <div class="btn-box">
-            <div class="btn-item">
-              <div class="left">控制模式</div>
-              <div class="right">
-                <span>手动</span>
-                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>自动</span>
-              </div>
-            </div>
-            <div class="btn-item">
-              <div class="left">
-                亮度
-              </div>
-              <div class="right">
-                <span>100lux</span>
-                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>30lux</span>
+
+    <!-- 点击执行时的弹出框 -->
+    <div class="out-dialog" v-if="executeVisible">
+      <div class="content" v-if="executeVisible">
+        <div>
+          <div class="div-operation"></div>
+          <span class="text-operation">变更内容 </span>
+        </div>
+        <div class="j-box" v-for="item in cxList" :key="item.id">
+          <div class="journal" style="margin-top: 20px">
+            <div class="imgText">
+              <div class="zjzm">
+                <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+                <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
               </div>
+              <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
             </div>
-            <div class="btn-item">
-              <div class="left">
-                控制场景
+            <div class="btn-box">
+              <div class="btn-item">
+                <div class="left">控制模式</div>
+                <div class="right">
+                  <span>手动</span>
+                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                  <span>自动</span>
+                </div>
               </div>
-              <div class="right">
-                <span>手动</span>
-                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>自动</span>
+              <div class="btn-item">
+                <div class="left">
+                  亮度
+                </div>
+                <div class="right">
+                  <span>100lux</span>
+                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                  <span>30lux</span>
+                </div>
               </div>
-            </div>
-            <div class="btn-item">
-              <div class="left">
-                色温
+              <div class="btn-item">
+                <div class="left">
+                  控制场景
+                </div>
+                <div class="right">
+                  <span>手动</span>
+                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                  <span>自动</span>
+                </div>
               </div>
-              <div class="right">
-                <span>4000k</span>
-                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>3800k</span>
+              <div class="btn-item">
+                <div class="left">
+                  色温
+                </div>
+                <div class="right">
+                  <span>4000k</span>
+                  <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                  <span>3800k</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <div style="width: 100%; height: 60px;"></div>
+      <div class="button-box">
+        <button class="cancel" @click="executeVisible = false">取消</button>
+        <button class="execute">执行</button>
+      </div>
     </div>
-    <div style="width: 100%; height: 60px;"></div>
-    <div class="button-box">
-      <button class="cancel" @click="executeVisible = false">取消</button>
-      <button class="execute">执行</button>
-    </div>
-  </div>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { controlType } from './treeData'
 import {
   DownOutlined,
   UpOutlined,
   StopOutlined,
 } from '@ant-design/icons-vue';
+// 请求
+import { http } from '/nerv-lib/util/http';
+import { lightingManage } from '/@/api/IlluminationInfo';
+
+// 初始化  =========================================================================
 
-// 初始化
 onMounted(() => {
-  const data = props.treeData[0]
+  setArea()
+})
+// 父组件点击俯视图切换分区时，子组件切换线路
+const setArea = () => {
+  const data = props.treeData.find(item => {
+    return item.id == props.nowArea
+  })
   // 默认选中第一个分区
   data.selected = true
-  // 默认展示第一个分区的回路
+  // 修改当前选中的分区
+  selectedButton.value = props.nowArea
+  // 设置当前显示的回路
   buttons2.value = data.children
-})
+}
 
 // 与父组件的交互  ===================================================================
+
 const props = defineProps({
   // 分区结构（照明区域 > 照明回路）
   treeData: {
     type: Array,
     default: []
   },
-  line: {
-    type: Array
+  // 父组件选中的分区ID
+  nowArea: {
+    type: String,
   }
 });
+// 向上传递修改选择样式
 const emit = defineEmits(['changeArea']);
+// 监听父组件选中的分区，并实时修改分区
+watch(() => props.nowArea, () => {
+  setArea()
+})
 
 // 照明区域 ==========================================================================
 
-// 照明区域 - 计划启用状态
+// 计划启用状态
 const isPlanEnabled = ref(false);
-// 照明区域 - 计划启用切换事件
+// 计划启用切换事件
 const togglePlan = () => {
   isPlanEnabled.value = !isPlanEnabled.value;
 };
 
-// 照明区域 - 按钮区展开与收起状态
+// 按钮区展开与收起状态
 const showAllButtonsArea = ref(false);
-// 照明区域 - 分区 - 被选中的按钮  默认为1
+// 被选中的分区  默认为1
 const selectedButton = ref('1');
-// 照明区域 - 区域切换（按钮点击-单选）事件
+// 区域切换（按钮点击-单选）事件
 const selectButton = (button: any) => {
+  console.log(button,'button')
   // 当前选中按钮
-  selectedButton.value = button;
+  selectedButton.value = button.id;
   // 重置
   initMenu(1)
   button.selected = true
   buttons2.value = button.children
   // 反选area
-  emit('changeArea', []);
   emit('changeArea', button.id);
 };
-// 照明区域 - 默认最多展示8个按钮
+// 默认最多展示8个按钮
 const limitedButtons1 = computed(() => props.treeData.slice(0, 8));
 
 // 照明回路 ==========================================================================
 
-// 照明回路 - 最近交互过的按钮，用于禁用和启用
-const zmhlid = ref('');
-
-// 照明回路 - 全选状态
-const selectAllCheckbox = ref(false);
+// 最近交互过的按钮，用于禁用和启用
+const handleButton = ref('');
 
-// 照明回路 - 面板启用/禁用状态
+// 面板启用/禁用状态
 const isPlanEnabled2 = ref(true);
-// 照明回路 - 面板启用/禁用切换事件
+// 面板启用/禁用切换事件
 const togglePlan2 = () => {
   // 获取最近交互的按钮
-  const item = buttons2.value.find((button) => button.id === zmhlid.value)
-  isPlanEnabled2.value = !isPlanEnabled2.value;
-  // 禁用 - 则取消选中，增加禁止图标
-  if (isPlanEnabled2.value) {
-    item.stop = true
-    // 启用 - 去除禁止图标
-  } else {
-    item.stop = false
-  }
+  const btn = buttons2.value.find((button) => button.id === handleButton.value)
+  let panel = +(!btn.panel)
+  isLoading.value = true
+  http.get(lightingManage.setDisable, { deviceGroup: btn.deviceGroup, panel }).then(res => {
+    if (res.msg === 'success') {
+      isPlanEnabled2.value = !isPlanEnabled2.value;
+      btn.panel = panel
+      isLoading.value = false
+    } else {
+      isLoading.value = false
+    }
+  }).catch(() => { isLoading.value = false })
 };
 
-// 照明回路 - 多选与单选切换事件
+// 是否单选，状态
+let singleSelection = ref(true);
+// 多选与单选切换事件
 const selectAll = () => {
-  emit('changeArea', [String(selectedButton.value.id)])
+  emit('changeArea', [selectedButton.value])
   selectAllCheckbox.value = false
   buttons2.value.forEach((button) => {
     button.selected = false;
@@ -291,11 +325,11 @@ const selectAll = () => {
   showControlMode.value = false
 };
 
-// 照明回路 - 是否单选，状态
-let singleSelection = ref(true);
-// 照明回路 - 全选切换事件（switch）
+// 全选状态
+const selectAllCheckbox = ref(false);
+// 全选切换事件（switch）
 const toggleAllSelection = () => {
-  let arr = [String(selectedButton.value.id)]
+  let arr = [selectedButton.value]
   // 全选
   if (selectAllCheckbox.value) {
     buttons2.value.forEach((item) => {
@@ -312,19 +346,18 @@ const toggleAllSelection = () => {
   emit('changeArea', arr)
 };
 
-// 照明回路 - 按钮切换
+// 照明回路的按钮切换
 const toggleSelection = (button: any) => {
   // 存储一次按钮ID，用于禁用/启用交互
-  zmhlid.value = button.id
-  // 如果已被锁定，则展示禁用/启用状态跳出
-  if (button.stop) {
+  handleButton.value = button.id
+  // 根据按钮状态，展示禁用/启用按钮文本
+  if (button.panel) {
     isPlanEnabled2.value = true
   } else {
     isPlanEnabled2.value = false
   }
-
   // 选择时反控俯视图
-  let level1 = String(selectedButton.value.id)
+  let level1 = selectedButton.value
   let level2 = button.id
   // 单选模式，需将所有按钮设为false
   if (singleSelection.value) {
@@ -359,19 +392,20 @@ const toggleSelection = (button: any) => {
     showControlMode.value = false
     thisButton.value = { type: '0' }
   }
-
 };
-// 照明回路 - 按钮区展开与收起状态
+
+// 照明回路所有按钮
+const buttons2 = ref([]);
+// 按钮区展开与收起状态
 const showAllButtons = ref(false);
-// 照明回路 - 默认最多展示8个按钮
+// 默认最多展示8个按钮
 const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
-// 照明回路 - 所有按钮
-const buttons2 = ref([]);
 
 // 控制模式 =======================================================================
-// 控制模式 - 决定该区域是否显示
+
+// 决定该区域是否显示
 const showControlMode = ref(false);
-const thisButton = ref({ type: '0' })
+const thisButton = ref({ type: 0 })
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
   thisButton.value.type = button3.type
@@ -380,7 +414,8 @@ const selectButton3 = (button3) => {
 };
 
 // 控制场景 =======================================================================
-// 控制场景 - 决定该区域是否显示
+
+// 决定该区域是否显示
 const showControlScene = ref(false);
 // 控制场景 - 所有按钮
 const controlSceneButtons = ref([
@@ -397,6 +432,7 @@ const selectButton4 = (button4) => {
 };
 
 // 灯具参数 ========================================================================
+
 // 灯具参数 - 表格数据
 const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
 
@@ -409,6 +445,7 @@ const handleRowClick = (index: any) => {
 };
 
 // 内侧弹窗 ========================================================================
+
 const cxList = ref([
   {
     id: '1',
@@ -447,10 +484,8 @@ const cxList = ref([
     brightness4: '3800k',
   },
 ]);
-// const cxList = cxList.value.concat(cxList.value)
 //撤销
 const delBtn = (id: any) => {
-  console.log(id);
   cxList.value.pop(id);
   console.log(cxList.value.length);
 
@@ -460,6 +495,8 @@ const delBtn = (id: any) => {
 };
 // 其他业务 ========================================================================
 
+const isLoading = ref(false)
+
 // 用于初始化5级联动的菜单
 const initMenu = (tier: number) => {
   // 1 = 照明区域 - 切换时，重置以下所有菜单
@@ -489,8 +526,7 @@ const initMenu = (tier: number) => {
 const refresh = () => {
   executeVisible.value = false
   selectedButton.value = '1';
-  emit('changeArea', []);
-  emit('changeArea', [1]);
+  emit('changeArea', ['1']);
   showControlMode.value = false;
   showControlScene.value = false;
   selectedButton4.value = null;
@@ -500,446 +536,19 @@ const executeVisible = ref<boolean>(false);
 const showModal = () => {
   executeVisible.value = true;
 };
-</script>
-<style lang="less" scoped>
-@import "./dialogStyle.less";
 
-// 抽屉
-.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;
-  }
-
-  .execute {
-    margin-right: 20px;
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    cursor: pointer;
-    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;
-    cursor: pointer;
-    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);
-  }
-
-  :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;
-  }
+// 确定
+const changeConfirm = () => {
+  refresh()
+}
 
-  .zmhlbtn {
-    position: relative;
-  }
+// 取消
+const changeCancel = () => {
 
-  // 禁用图标
-  .anticon-stop {
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-  }
 }
+
+</script>
+<style lang="less" scoped>
+@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 d0db90a..d1a523d 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue
@@ -14,29 +14,29 @@
     </thead>
     <tbody>
       <tr v-for="(row, index) in dataSource" :key="index">
-        <td>{{ row.key }}</td>
-        <td>{{ row.data }}</td>
+        <td>{{ index + 1 }}</td>
+        <td>{{ row.startTime }}</td>
         <td>{{ row.planName }}</td>
-        <td v-if="row.status === '待执行'">
+        <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);
             ">
-            {{ row.status }}
+            已执行
           </button>
         </td>
-        <td v-if="row.status !== '待执行'">
+        <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);
             ">
-            {{ row.status }}
+            待执行
           </button>
         </td>
         <td>
@@ -73,41 +73,53 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+// 请求
+import { http } from '/nerv-lib/util/http';
+import { lightingManage } from '/@/api/IlluminationInfo';
+
+// 初始化 ===========================================================
 
-// 初始化
 onMounted(() => {
-  
+  getTable()
+  getLeftPlan()
 })
 
+// tab页部分 ========================================================
+
 // 表格数据
-const dataSource = ref([
-  {
-    key: '1',
-    data: '2024-05-01',
-    planName: '劳动节',
-    status: '暂停中',
-  },
-  {
-    key: '2',
-    data: '2024-05-01',
-    planName: '国庆节',
-    status: '待执行',
-  },
-  {
-    key: '3',
-    data: '2024-05-01',
-    planName: '元旦',
-    status: '待执行',
-  },
-]);
-const addVisible = ref<boolean>(false);
+const dataSource = ref([]);
+// 获得表格数据
+const getTable = () => {
+  http.get(lightingManage.getPlanTable, {}).then(res => {
+    dataSource.value = res.data
+  })
+}
+
+// tab页弹窗部分 ====================================================
+
+// 添加弹窗控制变量
+const addVisible = ref(false);
+// 打开弹窗
+const addModal = () => {
+  addVisible.value = true;
+};
+
+// 穿梭框部分 =======================================================
+
+// 穿梭框数据
+const transferData = ref([])
+// 获得穿梭框原始数据
+const getLeftPlan = () => {
+  http.get(lightingManage.getLeftPlan, {}).then(res => {
+    console.log(res)
+  })
+}
+
 // 操作日志
 const handleRefClick1 = () => {
   alert(111)
 };
-const addModal = () => {
-  addVisible.value = true;
-};
+
 const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
   console.log(keys, direction, moveKeys);
 };
@@ -138,8 +150,6 @@ const mockData = ref([
 ]);
 const targetKeys = ref<string[]>([]);
 const filterOption = (inputValue: string, option: MockData) => {
-  console.log(option.description);
-
   return option.description.indexOf(inputValue) > -1;
 };
 
@@ -200,6 +210,7 @@ const filterOption = (inputValue: string, option: MockData) => {
     letter-spacing: 0;
     line-height: 20px;
     color: rgba(67, 136, 251, 1);
+    cursor: pointer;
   }
   .tabReboot {
     margin-right: 8px;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
index 96b21d7..ec1de0e 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue
@@ -18,19 +18,19 @@
       </tr>
     </tbody>
   </table>
-  <div class="out-dialog" 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>
-        <span class="text-operation">变更内容 </span>
+        <span class="text-operation">操作日志 </span>
       </div>
-      <div class="jbox" v-for="item in cxList" :key="item.id">
+      <div class="j-box" v-for="item in cxList" :key="item.id">
         <div class="journal" style="margin-top: 20px">
           <div class="imgText">
             <div class="zjzm">
               <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
-        item.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">
@@ -180,7 +180,6 @@ const handleRowClick = (index: any) => {
 
 // 右下角添加按钮
 .div-add {
-
   height: 64px;
   display: flex;
   justify-content: flex-end;
@@ -199,6 +198,7 @@ const handleRowClick = (index: any) => {
     font-size: 14px;
     font-weight: 400;
     color: rgba(255, 255, 255, 1);
+    cursor: pointer;
   }
 }