diff --git a/hx-ai-intelligent/src/main.ts b/hx-ai-intelligent/src/main.ts
index 40f0cc1..4603c03 100644
--- a/hx-ai-intelligent/src/main.ts
+++ b/hx-ai-intelligent/src/main.ts
@@ -5,6 +5,8 @@ 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({
@@ -12,4 +14,5 @@ saasInit({
   apiModule,
   appConfig,
 });
+app.use(ElementPlus)
 app.mount('#app');
diff --git a/hx-ai-intelligent/src/router/organizationManage.ts b/hx-ai-intelligent/src/router/organizationManage.ts
index 23c8f2d..5a911c5 100644
--- a/hx-ai-intelligent/src/router/organizationManage.ts
+++ b/hx-ai-intelligent/src/router/organizationManage.ts
@@ -62,6 +62,25 @@ const organizationManage = {
         },
       ],
     },
+    {
+      path: 'lightManage',
+      name: 'LightManage',
+      meta: { title: '智能照明', hideChildren: true, icon: 'dicizhishou' },
+      component: Base,
+      redirect: { name: 'lightManageIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'lightManageIndex',
+          component: () => import('/@/view/organizationManage/lightingManage/index.vue'),
+          meta: {
+            title: '部门/权限',
+            keepAlive: true,
+            // backApi: [],
+          },
+        },
+      ],
+    },
   ],
 };
 export default organizationManage;
diff --git a/hx-ai-intelligent/src/view/organizationManage/lightingManage/index.vue b/hx-ai-intelligent/src/view/organizationManage/lightingManage/index.vue
new file mode 100644
index 0000000..a0552bf
--- /dev/null
+++ b/hx-ai-intelligent/src/view/organizationManage/lightingManage/index.vue
@@ -0,0 +1,566 @@
+<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";
+import { Timer } from "@element-plus/icons-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/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/, ''),
   },
diff --git a/package.json b/package.json
index a3ffc4f..e5f1eea 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "dayjs": "^1.11.2",
     "echarts": "^5.3.2",
     "echarts-gl": "^2.0.9",
+    "element-plus": "^2.7.4",
     "element-resize-detector": "^1.2.4",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",