diff --git a/hx-ai-intelligent/public/bulbLogo/bgsquare.png b/hx-ai-intelligent/public/bulbLogo/bgsquare.png
new file mode 100644
index 0000000..3f9caec
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/bgsquare.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22394.png b/hx-ai-intelligent/public/bulbLogo/组 22394.png
new file mode 100644
index 0000000..5b38e7b
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22394.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22394@2x.png b/hx-ai-intelligent/public/bulbLogo/组 22394@2x.png
new file mode 100644
index 0000000..1a49b5b
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22394@2x.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22396.png b/hx-ai-intelligent/public/bulbLogo/组 22396.png
new file mode 100644
index 0000000..4da0f4c
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22396.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22396@2x.png b/hx-ai-intelligent/public/bulbLogo/组 22396@2x.png
new file mode 100644
index 0000000..4faeaf3
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22396@2x.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22400.png b/hx-ai-intelligent/public/bulbLogo/组 22400.png
new file mode 100644
index 0000000..37a6bcf
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22400.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22400@2x.png b/hx-ai-intelligent/public/bulbLogo/组 22400@2x.png
new file mode 100644
index 0000000..6d77bb7
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22400@2x.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22419.png b/hx-ai-intelligent/public/bulbLogo/组 22419.png
new file mode 100644
index 0000000..0dce490
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22419.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22419@2x.png b/hx-ai-intelligent/public/bulbLogo/组 22419@2x.png
new file mode 100644
index 0000000..a428eca
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22419@2x.png differ
diff --git a/hx-ai-intelligent/public/bulbLogo/组 22549.png b/hx-ai-intelligent/public/bulbLogo/组 22549.png
new file mode 100644
index 0000000..22a7c32
Binary files /dev/null and b/hx-ai-intelligent/public/bulbLogo/组 22549.png differ
diff --git a/hx-ai-intelligent/src/main.ts b/hx-ai-intelligent/src/main.ts
index 5eea1a2..40f0cc1 100644
--- a/hx-ai-intelligent/src/main.ts
+++ b/hx-ai-intelligent/src/main.ts
@@ -5,8 +5,6 @@ import { apiModule } from '/@/api';
 import { appConfig } from '/@/config';
 import './theme/global.less';
 import { LeftOutlined } from '@ant-design/icons-vue';
-// import ElementPlus from 'element-plus'
-// import 'element-plus/dist/index.css'
 const app = createApp(App);
 app.component('LeftOutlined', LeftOutlined);
 saasInit({
@@ -14,5 +12,4 @@ saasInit({
   apiModule,
   appConfig,
 });
-// app.use(ElementPlus)
 app.mount('#app');
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/bg.jpg b/hx-ai-intelligent/src/view/equipmentControl/image/bg.jpg
new file mode 100644
index 0000000..92247b0
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/bg.jpg differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue
deleted file mode 100644
index 89fc361..0000000
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/index.vue
+++ /dev/null
@@ -1,584 +0,0 @@
-<template>
-  <div class="main">
-    <el-button type="primary" style="margin-left: 16px" @click="drawer = true"> open </el-button>
-
-    <el-drawer v-model="drawer" :with-header="false">
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="控制面板" name="first">
-          <!-- 照明区域 -->
-          <div class="lightarea">
-            <div class="lightareatab"></div>
-            <span class="lightareatext"> 照明区域 </span>
-            <button class="plan">计划启用</button>
-          </div>
-          <!-- button部分 -->
-          <div class="area">
-            <button
-              v-for="(button, index) in buttons"
-              :key="index"
-              :class="{ btn: true, selected: button === selectedButton }"
-              @click="selectButton(button)">
-              {{ button.label }}
-            </button>
-          </div>
-          <!-- 照明回路 -->
-          <div class="circuitarea">
-            <div class="circuittab"></div>
-            <span class="circuittext">照明回路</span>
-            <button class="plan">计划启用</button>
-            <button class="batch" @click="toggleSelectionMode">
-              {{ selectionModeText }}
-            </button>
-            <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
-          </div>
-          <!-- button部分 -->
-          <div class="btnarea">
-            <button
-              v-for="(button2, index) in buttons2"
-              :key="index"
-              :class="{ btn: true, selected: button2.selected }"
-              @click="toggleSelection(button2)">
-              {{ button2.label }}
-            </button>
-          </div>
-          <!-- 控制模式 -->
-          <div class="controlarea">
-            <div class="controltab"></div>
-            <span class="controltext"> 控制模式 </span>
-          </div>
-          <!-- 控制模式按钮部分 -->
-          <div class="controlmodebtnarea">
-            <button
-              v-for="(button3, index) in controlbutton"
-              :key="index"
-              :class="{ btn: true, selected: button3 === selectedButton3 }"
-              @click="selectButton3(button3)">
-              {{ button3.label }}
-            </button>
-          </div>
-          <!-- 控制场景 -->
-          <div class="controlscenearea">
-            <div class="controlscenetab"></div>
-            <span class="controlscenetext"> 控制场景 </span>
-          </div>
-          <!-- 控制场景按钮部分 -->
-          <div class="controlscenebtnarea">
-            <button
-              v-for="(button4, index) in controlscenebuttons"
-              :key="index"
-              :class="{ btn: true, selected: button4 === selectedButton4 }"
-              @click="selectButton4(button4)">
-              {{ button4.label }}
-            </button>
-          </div>
-          <!-- 灯具参数 -->
-          <div class="lightparametersarea">
-            <div class="lightparameterstab"></div>
-            <span class="lightparameterstext"> 灯具参数 </span>
-          </div>
-          <div class="lightparameterstextarea">
-            <p>开启数量</p>
-            <p>亮度</p>
-            <p>色温</p>
-            <p>8/10</p>
-            <p>100lux</p>
-            <p>4200k</p>
-          </div>
-          <div class="bottom">
-            <button class="flushed">刷新</button>
-            <button class="execute">执行</button>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="计划列表" name="second">
-          <el-table
-            :data="tableData"
-            style="width: 100%; margin-bottom: 20px"
-            row-key="id"
-            border
-            default-expand-all>
-            <el-table-column prop="id" label="序号" width="60" />
-            <el-table-column prop="date" label="执行时间" width="100" />
-            <el-table-column prop="planname" label="计划名称" width="90" />
-            <el-table-column prop="status" label="状态" width="70" />
-            <el-table-column label="操作">
-              <span class="tabreboot">重启</span>
-              <span class="tabdelete">删除</span>
-            </el-table-column>
-          </el-table>
-          <div class="divadd">
-            <button class="add">添加</button>
-          </div>
-        </el-tab-pane>
-        <el-tab-pane label="日志" name="third">
-          <el-table
-            :data="tableData2"
-            style="width: 100%; margin-bottom: 20px"
-            row-key="id"
-            border
-            default-expand-all>
-            <el-table-column prop="id" label="序号" />
-            <el-table-column prop="date" label="执行时间" />
-            <el-table-column prop="planname" label="操作内容" />
-            <el-table-column prop="status" label="操作人" />
-          </el-table>
-          <div class="divadd">
-            <button class="add">刷新</button>
-          </div>
-        </el-tab-pane>
-      </el-tabs>
-    </el-drawer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  // 照明区域按钮单选
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const buttons = ref<Button[]>([
-    { label: 'A区', selected: false },
-    { label: 'B区', selected: false },
-    { label: 'C区', selected: false },
-    { label: 'D区', selected: false },
-    { label: '计划启用', selected: false },
-  ]);
-  const selectedButton = ref<Button | null>(null);
-  const selectButton = (button: Button) => {
-    selectedButton.value = button;
-  };
-  // 照明回路按钮
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const buttons2 = ref<Button[]>([
-    { label: '1区', selected: false },
-    { label: '2区', selected: false },
-    { label: '3区', selected: false },
-    { label: '4区', selected: false },
-  ]);
-  const showSelectAll = ref(false);
-  const bt = ref(false);
-  const selectionModeText = ref('批量');
-  const toggleSelection = (button2: Button) => {
-    if (!showSelectAll.value) {
-      // 单选模式
-      for (const button of buttons2.value) {
-        button.selected = false;
-      }
-      button2.selected = true;
-    } else {
-      // 批量选择模式
-      button2.selected = !button2.selected;
-      bt.value = false;
-    }
-  };
-  const toggleSelectionMode = () => {
-    showSelectAll.value = !showSelectAll.value;
-    selectionModeText.value = showSelectAll.value ? '单选' : '批量';
-  };
-  const selectAll = () => {
-    if (bt.value == false) {
-      for (const button of buttons2.value) {
-        button.selected = true;
-        bt.value = true;
-      }
-    } else {
-      for (const button of buttons2.value) {
-        button.selected = false;
-        bt.value = false;
-      }
-    }
-  };
-  // 控制模式按钮
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const controlbutton = ref<Button[]>([
-    { label: 'A区', selected: false },
-    { label: 'B区', selected: false },
-    { label: 'C区', selected: false },
-  ]);
-  const selectedButton3 = ref<Button | null>(null);
-  const selectButton3 = (button3: Button) => {
-    selectedButton3.value = button3;
-  };
-  // 控制场景按钮
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const controlscenebuttons = ref<Button[]>([
-    { label: '检修', selected: false },
-    { label: '午休', selected: false },
-    { label: '疏散', selected: false },
-    { label: '客流高峰', selected: false },
-  ]);
-  const selectedButton4 = ref<Button | null>(null);
-  const selectButton4 = (button4: Button) => {
-    selectedButton4.value = button4;
-  };
-  const drawer = ref(true);
-  import type { TabsPaneContext } from 'element-plus';
-  const activeName = ref('first');
-  const handleClick = (tab: TabsPaneContext, event: Event) => {
-    console.log(tab, event);
-  };
-
-  //计划列表
-  interface User {
-    id: number;
-    date: string;
-    planname: string;
-    status: string;
-  }
-
-  const tableData: User[] = [
-    {
-      id: 1,
-      date: '2016-05-03',
-      planname: '劳动节',
-      status: '暂停中',
-    },
-    {
-      id: 2,
-      date: '2016-05-02',
-      planname: '国庆节',
-      status: '待执行',
-    },
-    {
-      id: 3,
-      date: '2016-05-04',
-      planname: '元旦',
-      status: '待执行',
-    },
-  ];
-  const tableData2: User[] = [
-    {
-      id: 1,
-      date: '2016-05-03',
-      planname: '计划再开',
-      status: '张三',
-    },
-    {
-      id: 2,
-      date: '2016-05-02',
-      planname: '检修模式',
-      status: '李四',
-    },
-    {
-      id: 3,
-      date: '2016-05-04',
-      planname: '设备变更',
-      status: '王五',
-    },
-  ];
-</script>
-
-<style scoped>
-  .main {
-    left: 0px;
-    top: 0px;
-    height: 100%;
-    opacity: 0.5;
-    background: rgba(0, 0, 0, 1);
-    border: 1px solid rgba(112, 112, 112, 1);
-  }
-
-  .drawer-content {
-    width: 5%;
-    background-color: paleturquoise;
-    display: flex;
-    /*justify-content: center;  水平居中 */
-    align-items: center;
-    /* 垂直居中 */
-  }
-
-  el-tabs {
-    width: 95%;
-    background-color: blueviolet;
-  }
-
-  .demo-tabs > .el-tabs__content {
-    padding: 32px;
-    color: #6b778c;
-    font-size: 32px;
-    font-weight: 600;
-  }
-
-  .lightarea {
-    left: 51px;
-    width: 100%;
-  }
-
-  .lightareatab,
-  .lightareatext {
-    display: inline-block;
-  }
-
-  .lightareatab,
-  .circuittab,
-  .controltab,
-  .controlscenetab,
-  .lightparameterstab {
-    left: 0px;
-    top: 5px;
-    width: 3px;
-    height: 13px;
-    opacity: 1;
-    border-radius: 1px;
-    background: rgba(67, 136, 251, 1);
-  }
-
-  .lightareatext,
-  .circuittext,
-  .controltext,
-  .controlscenetext,
-  .lightparameterstext {
-    margin-left: 11px;
-    font-size: 16px;
-  }
-
-  .plan {
-    width: 88px;
-    height: 32px;
-    opacity: 1;
-    border: 1px solid rgba(67, 136, 251, 1);
-    color: rgba(67, 136, 251, 1);
-    border-radius: 5px;
-    background-color: rgba(255, 255, 255, 1);
-    margin-left: 11px;
-  }
-
-  .area,
-  .btnarea,
-  .controlmodebtnarea,
-  .controlscenearea,
-  .lightparametersarea {
-    margin-top: 20px;
-  }
-
-  .area {
-    margin-left: -17px;
-  }
-
-  .btn {
-    padding: 12px 28px;
-    margin-top: 10px;
-    margin-left: 17px;
-    /* width: 80px; */
-    /* height: 40px; */
-    font-size: 14px;
-    font-weight: 400;
-    opacity: 1;
-    border: 1px solid rgba(207, 212, 219, 1);
-    line-height: 20.27px;
-    color: rgba(102, 102, 102, 1);
-    text-align: center;
-    vertical-align: top;
-    border-radius: 4px;
-    background-color: rgba(255, 255, 255, 1);
-  }
-
-  .selected {
-    background-color: rgba(39, 120, 255, 1);
-    color: rgba(255, 255, 255, 1);
-  }
-
-  .btn:hover {
-    background-color: rgba(207, 212, 219, 1);
-  }
-
-  .btn:active {
-    background-color: rgba(102, 102, 102, 1);
-    color: white;
-  }
-
-  .circuitarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  .circuittab,
-  .controltab {
-    left: 0px;
-    top: 5px;
-    width: 3px;
-    height: 13px;
-    opacity: 1;
-    border-radius: 1px;
-    background: rgba(67, 136, 251, 1);
-  }
-
-  .circuittab,
-  .circuittext {
-    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: rgba(255, 255, 255, 1);
-    margin-left: 11px;
-  }
-
-  .both {
-    width: 60px;
-    height: 32px;
-    opacity: 1;
-    border: 1px solid rgba(255, 118, 2, 1);
-    color: rgba(255, 255, 255, 1);
-    border-radius: 5px;
-    background-color: rgba(255, 118, 2, 1);
-    margin-left: 11px;
-  }
-
-  .controlarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
-
-  .controltab,
-  .controltext {
-    display: inline-block;
-  }
-
-  .controlscenetab,
-  .controlscenetext {
-    display: inline-block;
-  }
-
-  :deep(.el-drawer__body) {
-    padding-top: 75px;
-    height: 100%;
-  }
-
-  :deep(.el-tabs__content) {
-    height: 100%;
-  }
-
-  :deep(.cell) {
-    text-align: center;
-  }
-
-  :deep(#pane-first) {
-    height: 100%;
-  }
-
-  .controlscenetab,
-  .controlscenetext {
-    display: inline-block;
-  }
-
-  .controlmodebtnarea {
-    margin-top: 20px;
-    height: 100%;
-  }
-
-  .lightparameterstab,
-  .lightparameterstext {
-    display: inline-block;
-  }
-
-  .lightparameterstextarea {
-    border: 1px solid rgba(236, 239, 245, 1);
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    /* grid-column-gap: 10px; */
-    /* grid-row-gap: 10px; */
-  }
-
-  .lightparameterstextarea > 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: rgba(255, 255, 255, 1);
-    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: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(193, 197, 204, 1);
-  }
-
-  .tabreboot,
-  .tabdelete {
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0px;
-    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: rgba(255, 255, 255, 1);
-  }
-  .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;
-  }
-</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index a6a1648..5bae907 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -1,590 +1,1507 @@
 <template>
-  <a-button type="primary" @click="showDrawer">Open</a-button>
-  <a-drawer
-    v-model:visible="visible"
-    class="custom-class"
-    width="500"
-    style="color: red"
-    placement="right"
-    :closable="false"
-    @after-visible-change="afterVisibleChange">
-    <a-tabs v-model:activeKey="activeKey">
-      <a-tab-pane key="1" tab="控制面板">
-        <!-- 照明区域 -->
-        <div class="lightarea">
-          <div class="lightareatab"></div>
-          <span class="lightareatext"> 照明区域 </span>
-          <button class="plan">计划启用</button>
-        </div>
-        <!-- button部分 -->
-        <div class="area">
-          <button
-            v-for="(button, index) in buttons"
-            :key="index"
-            :class="{ btn: true, selected: button === selectedButton }"
-            @click="selectButton(button)">
-            {{ button.label }}
-          </button>
-        </div>
-        <!-- 照明回路 -->
-        <div class="circuitarea">
-          <div class="circuittab"></div>
-          <span class="circuittext">照明回路</span>
-          <button class="plan">计划启用</button>
-          <button class="batch" @click="toggleSelectionMode">
-            {{ selectionModeText }}
-          </button>
-          <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
+  <div class="lighting-img">
+    <div class="lighting-img-box">
+      <img src="../image/bg.jpg" />
+      <div class="bulbBox">
+        <div class="wh100 bulbLogo1">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22419@2x.png" alt="" />
         </div>
-        <!-- button部分 -->
-        <div class="btnarea">
-          <button
-            v-for="(button2, index) in buttons2"
-            :key="index"
-            :class="{ btn: true, selected: button2.selected }"
-            @click="toggleSelection(button2)">
-            {{ button2.label }}
-          </button>
+        <div class="wh100 bulbLogo2">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22419.png" alt="" />
         </div>
-        <!-- 控制模式 -->
-        <div class="controlarea">
-          <div class="controltab"></div>
-          <span class="controltext"> 控制模式 </span>
+        <div class="wh100 bulbLogo3">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22394@2x.png" alt="" />
         </div>
-        <!-- 控制模式按钮部分 -->
-        <div class="controlmodebtnarea">
-          <button
-            v-for="(button3, index) in controlbutton"
-            :key="index"
-            :class="{ btn: true, selected: button3 === selectedButton3 }"
-            @click="selectButton3(button3)">
-            {{ button3.label }}
-          </button>
+        <div class="wh100 bulbLogo4">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22396.png" alt="" />
         </div>
-        <!-- 控制场景 -->
-        <div class="controlscenearea">
-          <div class="controlscenetab"></div>
-          <span class="controlscenetext"> 控制场景 </span>
+        <div class="wh100 bulbLogo5">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22396@2x.png" alt="" />
         </div>
-        <!-- 控制场景按钮部分 -->
-        <div class="controlscenebtnarea">
-          <button
-            v-for="(button4, index) in controlscenebuttons"
-            :key="index"
-            :class="{ btn: true, selected: button4 === selectedButton4 }"
-            @click="selectButton4(button4)">
-            {{ button4.label }}
-          </button>
+        <div class="wh100 bulbLogo6">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22400.png" alt="" />
         </div>
-        <!-- 灯具参数 -->
-        <div class="lightparametersarea">
-          <div class="lightparameterstab"></div>
-          <span class="lightparameterstext"> 灯具参数 </span>
+        <div class="wh100 bulbLogo7">
+          <img class="bulbImg" src="../../../../public/bulbLogo/组 22400@2x.png" alt="" />
         </div>
-        <div class="lightparameterstextarea">
-          <p>开启数量</p>
-          <p>亮度</p>
-          <p>色温</p>
-          <p>8/10</p>
-          <p>100lux</p>
-          <p>4200k</p>
-        </div>
-        <div class="bottom">
-          <button class="flushed">刷新</button>
-          <button class="execute">执行</button>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="计划列表" force-render>
-        <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
-          <template #bodyCell="{ column, text }">
-            <template v-if="column.dataIndex === 'name'">
-              <div class="editable-cell">
-                {{ text || ' ' }}
-              </div>
-            </template>
-            <template v-else-if="column.dataIndex === 'operation'">
-              <a class="tabreboot">重启</a>
-              <a class="tabdelete">删除</a>
+      </div>
+    </div>
+    <div class="btn-box">
+      <button class="F1">1F</button><br />
+      <button class="F2">2F</button><br />
+      <button class="platform">站台</button>
+    </div>
+  </div>
+  <a-drawer
+    v-model:visible="visible"
+    class="custom-class"
+    width="496"
+    height="1080"
+    placement="right"
+    :drawerStyle="{ background: 'rgba(0, 0, 0, 1)', opacity: 0.8 }"
+    :closable="false"
+    id="Odrawer"
+  >
+    <div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板">
+          <!-- 照明区域 -->
+          <div class="lightarea">
+            <div class="lightareatab"></div>
+            <span class="lightareatext"> 照明区域 </span>
+            <button class="plan">计划启用</button>
+          </div>
+          <!-- 照明区域按钮部分 -->
+          <div class="area">
+            <button
+              v-for="(button, index) in buttons"
+              :key="index"
+              :class="{ btn: true, selected: button === selectedButton }"
+              @click="selectButton(button)"
+            >
+              {{ button.label }}
+            </button>
+          </div>
+          <!-- 照明回路部分 -->
+          <div class="circuitarea" v-if="selectedButton">
+            <div class="circuittab"></div>
+            <span class="circuittext">照明回路</span>
+            <div class="btn2">
+              <input
+                type="checkbox"
+                class="custom-checkbox"
+                v-model="selectAllCheckbox"
+                @change="toggleAllSelection"
+              />
+              <span class="both" @click="selectAll">全选</span>
+              <button class="openplan">启用面板</button>
+            </div>
+          </div>
+          <!-- 照明回路按钮部分 -->
+          <div class="btnarea" v-if="selectedButton">
+            <button
+              v-for="(button2, index) in buttons2"
+              :key="index"
+              :class="{ btn: true, selected: button2.selected }"
+              @click="toggleSelection(button2)"
+            >
+              {{ button2.label }}
+            </button>
+          </div>
+          <!-- 控制模式 -->
+          <div class="controlarea" v-show="showControlMode">
+            <div class="controltab"></div>
+            <span class="controltext"> 控制模式 </span>
+          </div>
+
+          <!-- 控制模式按钮部分 -->
+          <div class="controlmodebtnarea" v-show="showControlMode">
+            <button
+              v-for="(button3, index) in controlbutton"
+              :key="index"
+              :class="{ btn: true, selected: button3.label === selectedButton3 }"
+              @click="selectButton3(button3)"
+            >
+              {{ button3.label }}
+            </button>
+          </div>
+
+          <!-- 控制场景 -->
+          <div class="controlscenearea" v-show="showControlScene">
+            <div class="controlscenetab"></div>
+            <span class="controlscenetext"> 控制场景 </span>
+          </div>
+
+          <!-- 控制场景按钮部分 -->
+          <div class="controlscenebtnarea" 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 class="lightparametersarea">
+            <div class="lightparameterstab"></div>
+            <span class="lightparameterstext"> 灯具参数 </span>
+          </div>
+          <div class="lightparameterstextarea">
+            <p>开启数量</p>
+            <p>亮度(lux)</p>
+            <p>色温(k)</p>
+            <p>8/10</p>
+            <p>100</p>
+            <p>4200</p>
+          </div>
+          <div class="bottom">
+            <button class="flushed">刷新</button>
+            <button class="execute">执行</button>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
+            <template #bodyCell="{ column, text }">
+              <template v-if="column.dataIndex === 'name'">
+                <div class="editable-cell">
+                  <span @click="showInfo(text)">
+                    {{ text || " " }}
+                  </span>
+                </div>
+              </template>
+
+              <template v-else-if="column.dataIndex === 'operation'">
+                <a class="tabreboot">重启</a>
+                <a class="tabdelete">删除</a>
+              </template>
             </template>
-          </template>
-        </a-table>
-        <div class="divadd">
-          <button class="add">添加</button>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="3" tab="日志">
-        <a-table bordered :data-source="dataSource1" :columns="columns1" class="atable">
-          <template #bodyCell="{ column, text }">
-            <template v-if="column.dataIndex === 'name'">
-              <div class="editable-cell">
-                {{ text || ' ' }}
+          </a-table>
+          <div class="divadd">
+            <button class="add">添加</button>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志">
+          <table class="custom-table table1">
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th>执行时间</th>
+                <th>操作内容</th>
+                <th>操作人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(row, index) in dataSource1"
+                :key="index"
+                @click="handleRowClick(row.id, row.name, row.age)"
+              >
+                <td>{{ row.key }}</td>
+                <td>{{ row.data }}</td>
+                <td>{{ row.planname }}</td>
+                <td>{{ row.status }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal
+            width="562px"
+            height="792px"
+            v-model:visible="logModalVisible"
+            :style="{ backgroundColor: '#000' }"
+            @cancel="closeLogModal"
+            :footer="null"
+            :mask="false"
+            :bodyStyle="{
+              background: 'rgba(0, 0, 0, 0.9)',
+              opacity: 0.8,
+              height: '792px',
+              maxHeight: '792px',
+              boxSizing: 'borderBox',
+            }"
+          >
+            <div style="height: 792px">
+              <div>
+                <div class="div-operation"></div>
+                <span class="text-operation">操作日志</span>
               </div>
-            </template>
-          </template>
-        </a-table>
-        <div class="divadd">
-          <button class="add">刷新</button>
-        </div>
-      </a-tab-pane>
-    </a-tabs>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span
+                    style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    "
+                    >站厅照明 1区</span
+                  >
+                </div>
+
+                <div class="gird22">
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >100lux</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >30lux</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >4000k</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >3800k</span
+                    >
+                  </div>
+                </div>
+              </div>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span
+                    style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    "
+                    >站厅照明 1区</span
+                  >
+                </div>
+
+                <div class="gird22">
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >100lux</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >30lux</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >4000k</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >3800k</span
+                    >
+                  </div>
+                </div>
+              </div>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span
+                    style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    "
+                    >站厅照明 1区</span
+                  >
+                </div>
+
+                <div class="gird22">
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >100lux</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >30lux</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >手动</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div>
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        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;
+                      "
+                      >4000k</span
+                    >
+
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      "
+                      >3800k</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-modal>
+          <div class="divadd">
+            <button class="add">刷新</button>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <div class="arrow-indicator" v-show="visible">
+      <a-icon type="menu-fold" />
+    </div>
   </a-drawer>
+  <div class="drawer-title1" v-if="!visible">
+    <a-button @click="toggleDrawer">
+      <left-outlined />
+    </a-button>
+  </div>
+  <div class="drawer-title2" v-if="visible">
+    <a-button @click="toggleDrawer">
+      <right-outlined />
+    </a-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
-  import type { Ref, TableColumnType } from 'vue';
-
-  // 照明区域按钮单选
-  interface Button {
-    label: string;
-    selected: boolean;
+import { ref } from "vue";
+const toggleDrawer = () => {
+  visible.value = !visible.value;
+};
+// 照明区域按钮单选
+const buttons = ref([
+  { label: "A区", selected: false },
+  { label: "B区", selected: false },
+  { label: "C区", selected: false },
+  { label: "D区", selected: false },
+  { label: "计划启用", selected: false },
+]);
+const selectedButton = ref<Button | null>(null);
+const selectButton = (button: Button) => {
+  selectedButton.value = button;
+};
+// 照明回路按钮
+let singleSelection = true; // 默认为单选
+const selectAllCheckbox = ref(false);
+const showControlMode = ref(false);
+const buttons2 = ref([
+  { label: "1区", selected: false },
+  { label: "2区", selected: false },
+  { label: "3区", selected: false },
+  { label: "4区", selected: false },
+]);
+const selectAll = () => {
+  singleSelection = !singleSelection;
+  if (singleSelection) {
+    // 单选
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+    });
+  } else {
+    // 多选
+    buttons2.value.forEach((button) => {
+      button.selected = true;
+    });
   }
-  const buttons = ref<Button[]>([
-    { label: 'A区', selected: false },
-    { label: 'B区', selected: false },
-    { label: 'C区', selected: false },
-    { label: 'D区', selected: false },
-    { label: '计划启用', selected: false },
-  ]);
-  const selectedButton = ref<Button | null>(null);
-  const selectButton = (button: Button) => {
-    selectedButton.value = button;
-  };
-  // 照明回路按钮
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const buttons2 = ref<Button[]>([
-    { label: '1区', selected: false },
-    { label: '2区', selected: false },
-    { label: '3区', selected: false },
-    { label: '4区', selected: false },
-  ]);
-  const showSelectAll = ref(false);
-  const bt = ref(false);
-  const selectionModeText = ref('批量');
-  const toggleSelection = (button2: Button) => {
-    if (!showSelectAll.value) {
-      // 单选模式
-      for (const button of buttons2.value) {
-        button.selected = false;
-      }
-      button2.selected = true;
-    } else {
-      // 批量选择模式
-      button2.selected = !button2.selected;
-      bt.value = false;
-    }
-  };
-  const toggleSelectionMode = () => {
-    showSelectAll.value = !showSelectAll.value;
-    selectionModeText.value = showSelectAll.value ? '单选' : '批量';
-  };
-  const selectAll = () => {
-    if (bt.value == false) {
-      for (const button of buttons2.value) {
-        button.selected = true;
-        bt.value = true;
+  selectAllCheckbox.value = !singleSelection; // 更新全选 input 输入框的状态
+};
+const toggleAllSelection = () => {
+  buttons2.value.forEach((button) => {
+    button.selected = selectAllCheckbox.value;
+  });
+  singleSelection = !selectAllCheckbox.value; // 如果全选，切换为多选模式
+};
+const toggleSelection = (button) => {
+  showControlMode.value = button.label;
+  if (singleSelection) {
+    // 单选模式
+    buttons2.value.forEach((b) => {
+      if (b !== button) {
+        b.selected = false;
       }
-    } else {
-      for (const button of buttons2.value) {
-        button.selected = false;
-        bt.value = false;
-      }
-    }
-  };
-  // 控制模式按钮
-  interface Button {
-    label: string;
-    selected: boolean;
-  }
-  const controlbutton = ref<Button[]>([
-    { label: 'A区', selected: false },
-    { label: 'B区', selected: false },
-    { label: 'C区', selected: false },
-  ]);
-  const selectedButton3 = ref<Button | null>(null);
-  const selectButton3 = (button3: Button) => {
-    selectedButton3.value = button3;
-  };
-  // 控制场景按钮
-  interface Button {
-    label: string;
-    selected: boolean;
+    });
   }
-  const controlscenebuttons = ref<Button[]>([
-    { label: '检修', selected: false },
-    { label: '午休', selected: false },
-    { label: '疏散', selected: false },
-    { label: '客流高峰', selected: false },
-  ]);
-  const selectedButton4 = ref<Button | null>(null);
-  const selectButton4 = (button4: Button) => {
-    selectedButton4.value = button4;
-  };
-  interface DataItem {
-    key: string;
-    name: string;
-    age: number;
-    address: string;
-  }
-  const columns = [
-    {
-      title: '序号',
-      dataIndex: 'key',
-    },
-    {
-      title: '执行时间',
-      dataIndex: 'data',
-    },
-    {
-      title: '计划名称',
-      dataIndex: 'planname',
-    },
-    {
-      title: '状态',
-      dataIndex: 'status',
-    },
-    {
-      title: '状态',
-      dataIndex: 'operation',
-    },
-  ];
-
-  const dataSource: Ref<DataItem[]> = 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 columns1 = [
-    {
-      title: '序号',
-      dataIndex: 'key',
-    },
-    {
-      title: '执行时间',
-      dataIndex: 'data',
-    },
-    {
-      title: '操作内容',
-      dataIndex: 'planname',
-    },
-    {
-      title: '操作人',
-      dataIndex: 'status',
-    },
-  ];
-  const dataSource1: Ref<DataItem[]> = 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 visible = ref(true);
-  const activeKey = ref('1');
-  const afterVisibleChange = (bool: boolean) => {
-    console.log('visible', bool);
-  };
-
-  const showDrawer = () => {
-    visible.value = true;
-  };
+  button.selected = !button.selected;
+  selectAllCheckbox.value = buttons2.value.every((button) => button.selected);
+};
+
+// 控制模式按钮
+const selectedButton3 = ref("");
+const showControlScene = ref(false);
+const controlbutton = ref([
+  { label: "托管", selected: false },
+  { label: "AI", selected: false },
+  { label: "手动", selected: false },
+]);
+// 控制场景按钮
+const selectedButton4 = ref("");
+const controlscenebuttons = ref([
+  { label: "检修", selected: false },
+  { label: "午休", selected: false },
+  { label: "疏散", selected: false },
+  { label: "客流高峰", selected: false },
+]);
+const selectButton3 = (button3) => {
+  selectedButton3.value = button3.label;
+  showControlScene.value = button3.label === "手动";
+  selectedButton4.value = ""; // 清空选中的控制场景按钮
+};
+const selectButton4 = (button4) => {
+  selectedButton4.value = button4.label;
+};
+const columns = [
+  {
+    title: "序号",
+    dataIndex: "key",
+  },
+  {
+    title: "执行时间",
+    dataIndex: "data",
+  },
+  {
+    title: "计划名称",
+    dataIndex: "planname",
+  },
+  {
+    title: "状态",
+    dataIndex: "status",
+  },
+  {
+    title: "状态",
+    dataIndex: "operation",
+  },
+];
+
+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 columns1 = [
+  {
+    title: "序号",
+    dataIndex: "key",
+  },
+  {
+    title: "执行时间",
+    dataIndex: "data",
+  },
+  {
+    title: "操作内容",
+    dataIndex: "planname",
+  },
+  {
+    title: "操作人",
+    dataIndex: "status",
+  },
+];
+const dataSource1 = ref([
+  {
+    key: "1",
+    data: "2024-05-01",
+    planname: "计划再开",
+    status: "张三111",
+  },
+  {
+    key: "2",
+    data: "2024-05-01",
+    planname: "检修模式",
+    status: "李四12",
+  },
+  {
+    key: "3",
+    data: "2024-05-01",
+    planname: "设备变更",
+    status: "王五33",
+  },
+]);
+// 抽屉默认显示
+const visible = ref(true);
+const activeKey = ref("1");
+
+const showDrawer = () => {
+  visible.value = true;
+};
+// 操作日志
+
+const logModalVisible = ref(false);
+
+const handleRowClick = (record: any, index: number) => {
+  // 处理行点击事件，例如选中行或者其他操作
+  console.log(record, "=================", index);
+  // 显示模态框
+  logModalVisible.value = true;
+};
+
+const closeLogModal = () => {
+  logModalVisible.value = false;
+};
 </script>
 
-<style scoped>
-  .lightarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
+<style lang="less" scoped>
+.custom-table {
+  border-collapse: collapse;
+  width: 416px;
+  height: 195px;
+  color: rgba(255, 255, 255, 1);
+}
 
-  .lightareatab,
-  .lightareatext {
-    display: inline-block;
-  }
+.custom-table th,
+.custom-table td {
+  border: 1px solid rgba(163, 192, 243, 1);
+  text-align: left;
+  padding: 8px;
+  text-align: center;
+}
 
-  .lightareatab,
-  .circuittab,
-  .controltab,
-  .controlscenetab,
-  .lightparameterstab {
-    left: 0px;
-    top: 5px;
-    width: 3px;
-    height: 13px;
-    opacity: 1;
-    border-radius: 1px;
-    background: rgba(67, 136, 251, 1);
-  }
+.custom-table tr:hover {
+  background-color: rgba(67, 136, 251, 1);
+  cursor: pointer;
+}
+.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);
+}
+.lightarea,
+.circuitarea,
+.controlarea,
+.controlscenearea,
+.lightparametersarea {
+  width: 100%;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
 
-  .lightareatext,
-  .circuittext,
-  .controltext,
-  .controlscenetext,
-  .lightparameterstext {
-    margin-left: 11px;
-    font-size: 16px;
-  }
+.lightareatab,
+.circuittab,
+.controltab,
+.controlscenetab,
+.lightparameterstab {
+  width: 5px;
+  height: 23px;
+  opacity: 1;
+  background: rgba(26, 174, 251, 1);
+  margin-right: 4px;
+}
 
-  .plan {
-    width: 88px;
-    height: 32px;
-    opacity: 1;
-    border: 1px solid rgba(67, 136, 251, 1);
-    color: rgba(67, 136, 251, 1);
-    border-radius: 5px;
-    background-color: rgba(255, 255, 255, 1);
-    margin-left: 11px;
-  }
+.lightareatext,
+.circuittext,
+.controltext,
+.controlscenetext,
+.lightparameterstext {
+  font-size: 14px;
+  color: rgba(255, 255, 255, 1);
+  line-height: 19px;
+  width: 110px;
+  height: 23px;
+  opacity: 1;
+  background: linear-gradient(
+    270deg,
+    rgba(86, 221, 253, 0) 0%,
+    rgba(25, 176, 255, 1) 100%
+  );
+}
 
-  .area {
-    margin-left: -17px;
-  }
+.lightareatab,
+.lightareatext {
+  display: inline-block;
+  justify-content: center;
+}
 
-  .btn {
-    padding: 12px 28px;
-    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: rgba(102, 102, 102, 1);
-    text-align: center;
-    vertical-align: top;
-    border-radius: 4px;
-    background-color: rgba(255, 255, 255, 1);
-  }
+.plan {
+  width: 88px;
+  height: 32px;
+  opacity: 1;
+  background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+  border: none;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 5px;
+  color: rgba(255, 255, 255, 1);
+  vertical-align: top;
+  margin-left: 235px;
+}
 
-  .selected {
-    background-color: rgba(39, 120, 255, 1);
-    color: rgba(255, 255, 255, 1);
-  }
+.openplan {
+  width: 88px;
+  height: 32px;
+  opacity: 1;
+  background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
+  border: none;
+  font-size: 14px;
+  font-weight: 400;
+  border-radius: 5px;
+  color: rgba(255, 255, 255, 1);
+  vertical-align: top;
+}
 
-  .btn:hover {
-    background-color: rgba(207, 212, 219, 1);
-  }
+.btn2 {
+  display: flex;
+  align-items: center;
+  margin-left: 177px;
+}
 
-  .btn:active {
-    background-color: rgba(102, 102, 102, 1);
-    color: white;
-  }
+.custom-checkbox {
+  width: 13px;
+  height: 13px;
+}
 
-  .circuitarea,
-  .controlscenearea,
-  .lightparametersarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
+.both {
+  margin-left: 5px;
+  margin-right: 15px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 1);
+}
 
-  .circuittab,
-  .controltab {
-    left: 0px;
-    top: 5px;
-    width: 3px;
-    height: 13px;
-    opacity: 1;
-    border-radius: 1px;
-    background: rgba(67, 136, 251, 1);
-  }
+p {
+  color: rgba(255, 255, 255, 1);
+}
 
-  .circuittab,
-  .circuittext {
-    display: inline-block;
-  }
+.area,
+.btnarea,
+.controlmodebtnarea,
+.controlscenebtnarea {
+  margin-left: -17px;
+}
 
-  .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: rgba(255, 255, 255, 1);
-    margin-left: 11px;
-  }
+.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: rgba(255, 255, 255, 1);
+  text-align: center;
+  vertical-align: top;
+  background-color: rgba(255, 255, 255, 0.1);
+}
 
-  .both {
-    width: 60px;
-    height: 32px;
-    opacity: 1;
-    border: 1px solid rgba(255, 118, 2, 1);
-    color: rgba(255, 255, 255, 1);
-    border-radius: 5px;
-    background-color: rgba(255, 118, 2, 1);
-    margin-left: 11px;
-  }
+.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 rgba(255, 255, 255, 1);
+}
 
-  .controlarea {
-    left: 51px;
-    width: 100%;
-    margin-top: 20px;
-  }
+.btn:hover {
+  background-color: rgba(207, 212, 219, 1);
+}
 
-  .controltab,
-  .controltext {
-    display: inline-block;
-  }
+.btn:active {
+  background-color: rgba(102, 102, 102, 1);
+  color: white;
+}
 
-  :deep(.el-drawer__body) {
-    padding-top: 75px;
-    height: 100%;
-  }
+.circuitarea,
+.controlscenearea,
+.lightparametersarea {
+  left: 51px;
+  width: 100%;
+  margin-top: 20px;
+}
 
-  :deep(.el-tabs__content) {
-    height: 100%;
-  }
+.circuittab,
+.circuittext {
+  display: inline-block;
+}
 
-  :deep(.cell) {
-    text-align: center;
-  }
+.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: rgba(255, 255, 255, 1);
+  margin-left: 11px;
+}
 
-  :deep(#pane-first) {
-    height: 100%;
-  }
+.controlarea {
+  left: 51px;
+  width: 100%;
+  margin-top: 20px;
+}
 
-  .controlscenetab,
-  .controlscenetext {
-    display: inline-block;
-  }
+.controltab,
+.controltext {
+  display: inline-block;
+}
 
-  .lightparameterstab,
-  .lightparameterstext {
-    display: inline-block;
-  }
+:deep(.cell) {
+  text-align: center;
+}
 
-  .lightparameterstextarea {
-    border: 1px solid rgba(236, 239, 245, 1);
-    margin-top: 10px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    /* grid-column-gap: 10px; */
-    /* grid-row-gap: 10px; */
-  }
+:deep(#pane-first) {
+  height: 100%;
+}
 
-  .lightparameterstextarea > p {
-    height: 100%;
-    display: flex;
-    border: 1px solid rgba(236, 239, 245, 1);
-    justify-content: center;
-    align-items: center;
-  }
+.controlscenetab,
+.controlscenetext {
+  display: inline-block;
+}
 
-  .bottom {
-    width: 100%;
-    height: 64px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    margin-bottom: 10px;
-  }
+.lightparameterstab,
+.lightparameterstext {
+  display: inline-block;
+}
 
-  .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: rgba(255, 255, 255, 1);
-    border: 0;
-    margin-left: 10px;
-  }
+.lightparameterstextarea {
+  border: 1px solid rgba(236, 239, 245, 1);
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
 
-  .flushed {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(102, 102, 102, 1);
-    background: rgba(255, 255, 255, 1);
-    border: 1px solid rgba(193, 197, 204, 1);
+.lightparameterstextarea > 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: rgba(255, 255, 255, 1);
+  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: rgba(255, 255, 255, 1);
+  border: 1px solid rgba(193, 197, 204, 1);
+}
+
+.tabreboot,
+.tabdelete {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  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: rgba(255, 255, 255, 1);
+}
+
+.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: 30px;
+  background-color: red;
+  margin: auto;
+  z-index: 99999;
+}
+
+.drawer-title2 {
+  position: fixed;
+  width: 33px;
+  height: 33px;
+  top: 0;
+  bottom: 0;
+  right: 500px;
+  background-color: red;
+  margin: auto;
+  z-index: 99999;
+}
+
+/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;
+}
+
+.lighting-img {
+  width: 100%;
+  height:934px;
+  object-fit: cover;
+}
+
+.lighting-img-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.lighting-img-box img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-fit: cover;
+  position: relative;
+}
+
+.lighting-img-box {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.lighting-img-box img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.F1 {
+  width: 120px;
+  height: 50.72px;
+  border-radius: 4px;
+  background: rgba(39, 120, 255, 1);
+  border: 1px solid rgba(51, 199, 255, 1);
+  box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+  font-size: 24px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+}
+.F2,
+.platform {
+  width: 120px;
+  height: 50.72px;
+  border-radius: 4px;
+  background: rgba(7, 72, 116, 1);
+  box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3);
+  font-size: 24px;
+  font-weight: 400;
+  color: rgba(146, 187, 255, 1);
+  border: 1px solid rgba(39, 120, 255, 1);
+  margin-top: 20px;
+}
+.btn-box {
+  position: fixed;
+  top: 100px;
+  left: 250px;
+}
+.lighting-img-box > .bulbBox > .wh100 {
+  width: 38px;
+  height: calc(38px + 19px);
+}
+.lighting-img-box > .bulbBox > .bulbLogo1 {
+  position: absolute;
+  top: 111px;
+  left: 111px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo2 {
+  position: absolute;
+  top: 222px;
+  left: 222px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo3 {
+  position: absolute;
+  top: 333px;
+  left: 333px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo4 {
+  position: absolute;
+  top: 444px;
+  left: 444px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo5 {
+  position: absolute;
+  top: 555px;
+  left: 555px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo6 {
+  position: absolute;
+  top: 666px;
+  left: 666px;
+  display: flex;
+  align-items: center;
+}
+.lighting-img-box > .bulbBox > .bulbLogo7 {
+  position: absolute;
+  top: 777px;
+  left: 777px;
+  display: flex;
+  align-items: center;
+}
+
+.editable-cell {
+  position: relative;
+  .editable-cell-input-wrapper,
+  .editable-cell-text-wrapper {
+    padding-right: 24px;
   }
 
-  .tabreboot,
-  .tabdelete {
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0px;
-    line-height: 20px;
-    color: rgba(67, 136, 251, 1);
+  .editable-cell-text-wrapper {
+    padding: 5px 24px 5px 5px;
   }
 
-  .tabreboot {
-    margin-right: 8px;
+  .editable-cell-icon,
+  .editable-cell-icon-check {
+    position: absolute;
+    right: 0;
+    width: 20px;
+    cursor: pointer;
   }
 
-  .add {
-    width: 74px;
-    height: 40px;
-    opacity: 1;
-    border-radius: 4px;
-    background: rgba(67, 136, 251, 1);
-    border: rgba(67, 136, 251, 1);
-    font-size: 14px;
-    font-weight: 400;
-    color: rgba(255, 255, 255, 1);
+  .editable-cell-icon {
+    margin-top: 4px;
+    display: none;
   }
 
-  .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;
+  .editable-cell-icon-check {
+    line-height: 28px;
   }
 
-  .atable {
-    margin-top: 20px;
+  .editable-cell-icon:hover,
+  .editable-cell-icon-check:hover {
+    color: #108ee9;
   }
 
-  :deep(.ant-table-pagination) {
-    visibility: hidden;
+  .editable-add-btn {
+    margin-bottom: 8px;
   }
+}
+.editable-cell:hover .editable-cell-icon {
+  display: inline-block;
+}
+.div-operation {
+  width: 3px;
+  height: 13px;
+  opacity: 1;
+  border-radius: 1px;
+  background: rgba(67, 136, 251, 1);
+}
+.text-operation {
+  color: rgba(255, 255, 255, 1);
+  font-size: 16px;
+  font-weight: 700;
+  margin-left: 5px;
+}
+.div-operation,
+.text-operation {
+  display: inline-block;
+}
+.journal {
+  padding: 3% 10%;
+  background-image: url("../../../../public/bulbLogo/bgsquare.png");
+  background-size: 482px 177px;
+  width: 482px;
+  height: 177px;
+}
+.gird22 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-column-gap: 5px;
+  grid-row-gap: 20px;
+  margin-top: 10px;
+}
+.bulbLogo1 {
+  background-image: url("../../../../public/bulbLogo/bulbLogo1.png");
+}
+.imgText {
+  display: flex;
+  align-items: center;
+}
+:deep(.ant-modal-content) {
+  width: 555px;
+  height: 792px;
+}
+:deep(.ant-modal-body) {
+  width: 555px;
+  max-height: 792px !important;
+  box-sizing: border-box;
+}
 </style>
diff --git a/hx-ai-intelligent/vite.config.ts b/hx-ai-intelligent/vite.config.ts
index 7372520..2494632 100644
--- a/hx-ai-intelligent/vite.config.ts
+++ b/hx-ai-intelligent/vite.config.ts
@@ -12,7 +12,7 @@ const proxy = {
     changeOrigin: true,
   },
   '/carbon-smart': {
-    target: 'http://192.168.112.144:8224',
+    target: 'http://123.60.103.97:8224',
     changeOrigin: true,
     rewrite: (path) => path.replace(/^\/carbon-smart/, ''),
   },