From 680855f31018d868fe1b983779b44b22939b2b4b Mon Sep 17 00:00:00 2001
From: xuziqiang <1344691446@qq.com>
Date: Wed, 12 Jun 2024 16:41:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=81=E4=B8=9A=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hx-ai-intelligent/src/api/origanizemanage.ts       |    2 +-
 .../equipmentControl/lightingManage/indexs.vue     | 3071 ++++++++++----------
 .../organizationManage/departmentManage/config.ts  |    3 +
 .../organizationManage/departmentManage/index.vue  |   59 +-
 .../view/organizationManage/usermanage/index.vue   |    2 +-
 hx-op/index.html                                   |    2 +-
 hx-op/src/api/origanizemanage.ts                   |    8 +-
 hx-op/src/util/generateRandomString.ts             |    9 +
 .../enterpriseManage/TreeAdd.vue                   |   38 +-
 .../organizationManage/enterpriseManage/config.ts  |  114 +-
 .../organizationManage/enterpriseManage/index.vue  |  214 +-
 lib/component/drawer/drawer.vue                    |    1 +
 12 files changed, 1859 insertions(+), 1664 deletions(-)
 create mode 100644 hx-op/src/util/generateRandomString.ts

diff --git a/hx-ai-intelligent/src/api/origanizemanage.ts b/hx-ai-intelligent/src/api/origanizemanage.ts
index aa3821c..110a18a 100644
--- a/hx-ai-intelligent/src/api/origanizemanage.ts
+++ b/hx-ai-intelligent/src/api/origanizemanage.ts
@@ -1,7 +1,7 @@
 const BASE_URL = '/carbon-smart';
 export enum permission {
   add = `${BASE_URL}/admin/permission/save`,
-  permissionTree = `${BASE_URL}/api/dept/permissionTree`,
+  permissionTree = `${BASE_URL}/api/dept/QueryOrgPermission`,
 }
 
 export enum origanizemanage {
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index 9f198dc..5f06d89 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -3,7 +3,11 @@
     <div class="lighting-img-box">
       <img src="../image/bg.jpg" />
       <div class="bulbBox">
-        <div v-for="(bulb, index) in bulbs" :key="index" :class="['wh100', bulb.className]" v-show="bulb.visible">
+        <div
+          v-for="(bulb, index) in bulbs"
+          :key="index"
+          :class="['wh100', bulb.className]"
+          v-show="bulb.visible">
           <img class="bulbImg" :src="bulb.imageUrl" alt="" />
         </div>
       </div>
@@ -14,8 +18,15 @@
       <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">
+  <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="控制面板">
@@ -24,7 +35,9 @@
             <div class="lightarea">
               <div class="lightareatab"></div>
               <span class="lightareatext"> 照明区域 </span>
-              <button class="plan" :class="{ 'enabled': isPlanEnabled, 'disabled': !isPlanEnabled }"
+              <button
+                class="plan"
+                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
                 @click="togglePlan">
                 {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
               </button>
@@ -32,25 +45,39 @@
             <!-- 照明区域按钮部分 -->
             <div class="area">
               <template v-if="!showAllButtonsarea">
-                <button v-for="(button, index) in buttons1" :key="index"
+                <button
+                  v-for="(button, index) in buttons1"
+                  :key="index"
                   :class="{ btn: true, selected: button === selectedButton }"
-                  :style="{ 'pointer-events': isPlanEnabled ? 'auto' : 'none', opacity: isPlanEnabled ? 1 : 0.5 }"
+                  :style="{
+                    'pointer-events': isPlanEnabled ? 'auto' : 'none',
+                    opacity: isPlanEnabled ? 1 : 0.5,
+                  }"
                   @click="selectButton(button)">
                   {{ button.label }}
                 </button>
-                <div style="margin-top: 10px;">
-                  <span @click="showAllButtonsarea = true" class="openzm"><down-outlined />展开</span>
+                <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 buttons" :key="index"
+                <button
+                  v-for="(button, index) in buttons"
+                  :key="index"
                   :class="{ btn: true, selected: button === selectedButton }"
-                  :style="{ 'pointer-events': isPlanEnabled ? 'auto' : 'none', opacity: isPlanEnabled ? 1 : 0.5 }"
+                  :style="{
+                    'pointer-events': isPlanEnabled ? 'auto' : 'none',
+                    opacity: isPlanEnabled ? 1 : 0.5,
+                  }"
                   @click="selectButton(button)">
                   {{ button.label }}
                 </button>
-                <div style="margin-top: 10px;">
-                  <span @click="showAllButtonsarea = false" class="openzm"><up-outlined />回缩</span>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtonsarea = false" class="openzm"
+                    ><up-outlined />回缩</span
+                  >
                 </div>
               </template>
             </div>
@@ -61,13 +88,19 @@
               <div class="circuittab"></div>
               <span class="circuittext">照明回路</span>
               <div class="btn2">
-                <button class="openplan" :class="{ 'enabled2': isPlanEnabled2, 'disabled2': !isPlanEnabled2 }"
+                <button
+                  class="openplan"
+                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
                   @click="togglePlan2">
                   {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
                 </button>
                 <!-- <button >启用面板</button> -->
-                <a-switch v-model:checked="selectAllCheckbox"
-                  :class="{ 'blue-background': selectAllCheckbox, 'grey-background': !selectAllCheckbox }"
+                <a-switch
+                  v-model:checked="selectAllCheckbox"
+                  :class="{
+                    'blue-background': selectAllCheckbox,
+                    'grey-background': !selectAllCheckbox,
+                  }"
                   @change="toggleAllSelection" />
                 <button class="both" @click="selectAll">多选</button>
               </div>
@@ -75,21 +108,30 @@
 
             <div class="btnarea" v-if="selectedButton">
               <template v-if="!showAllButtons">
-                <button v-for="(button2, index) in limitedButtons" :key="index"
-                  :style="{ 'pointer-events': isPlanEnabled2 ? 'auto' : 'none', opacity: isPlanEnabled2 ? 1 : 0.5 }"
-                  :class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)">
+                <button
+                  v-for="(button2, index) in limitedButtons"
+                  :key="index"
+                  :style="{
+                    'pointer-events': isPlanEnabled2 ? 'auto' : 'none',
+                    opacity: isPlanEnabled2 ? 1 : 0.5,
+                  }"
+                  :class="{ btn: true, selected: button2.selected }"
+                  @click="toggleSelection(button2)">
                   {{ button2.label }}
                 </button>
-                <div style="margin-top: 10px;">
+                <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)">
+                <button
+                  v-for="(button2, index) in buttons2"
+                  :key="index"
+                  :class="{ btn: true, selected: button2.selected }"
+                  @click="toggleSelection(button2)">
                   {{ button2.label }}
                 </button>
-                <div style="margin-top: 10px;">
+                <div style="margin-top: 10px">
                   <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
                 </div>
               </template>
@@ -103,8 +145,11 @@
             </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)">
+              <button
+                v-for="(button3, index) in controlbutton"
+                :key="index"
+                :class="{ btn: true, selected: button3.label === selectedButton3 }"
+                @click="selectButton3(button3)">
                 {{ button3.label }}
               </button>
             </div>
@@ -117,8 +162,11 @@
             </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)">
+              <button
+                v-for="(button4, index) in controlscenebuttons"
+                :key="index"
+                :class="{ btn: true, selected: button4.label === selectedButton4 }"
+                @click="selectButton4(button4)">
                 {{ button4.label }}
               </button>
             </div>
@@ -142,31 +190,37 @@
             <button class="flushed" @click="refresh">刷新</button>
             <button class="execute" @click="showModal">执行</button>
           </div>
-          <a-modal width="500px" height="792px" v-model:visible="executevisible" :closable="false"
-            :style="{ backgroundColor: '#000', overflow: 'hidden' }" :mask="false" :bodyStyle="{
+          <a-modal
+            width="500px"
+            height="792px"
+            v-model:visible="executevisible"
+            :closable="false"
+            :style="{ backgroundColor: '#000', overflow: 'hidden' }"
+            :mask="false"
+            :bodyStyle="{
               background: 'rgba(0, 0, 0, 0.9)',
               opacity: 0.8,
               height: '792px',
               maxHeight: '792px',
-              boxSizing: 'borderBox', display: 'flex',
+              boxSizing: 'borderBox',
+              display: 'flex',
               flexDirection: 'column',
             }">
             <div style="height: 792px">
-              <div style="width: 100%;text-align: center;">
+              <div style="width: 100%; text-align: center">
                 <span class="text-change">变更内容</span>
               </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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -183,20 +237,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -213,20 +264,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -243,20 +291,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -273,33 +318,28 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -316,20 +356,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -346,20 +383,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -376,20 +410,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -406,33 +437,28 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -449,20 +475,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -479,20 +502,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -509,20 +529,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -539,17 +556,13 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >3800k</span
+                    >
                   </div>
                 </div>
               </div>
@@ -557,7 +570,6 @@
                 <button @click="excuModal" class="excuno">取消</button>
                 <button @click="handleOk" class="excuok">执行</button>
               </div>
-
             </div>
           </a-modal>
         </a-tab-pane>
@@ -567,7 +579,7 @@
               <template v-if="column.dataIndex === 'name'">
                 <div class="editable-cell">
                   <span @click="showInfo(text)">
-                    {{ text || " " }}
+                    {{ text || ' ' }}
                   </span>
                 </div>
               </template>
@@ -581,21 +593,35 @@
           <div class="divadd">
             <button class="add" @click="addModal">添加</button>
           </div>
-          <a-modal v-model:visible="addvisible" width="500px" height="792px" :closable="false" :footer="null"
-            :style="{ backgroundColor: '#000' }" :mask="false" :bodyStyle="{
+          <a-modal
+            v-model:visible="addvisible"
+            width="500px"
+            height="792px"
+            :closable="false"
+            :footer="null"
+            :style="{ backgroundColor: '#000' }"
+            :mask="false"
+            :bodyStyle="{
               background: 'rgba(0, 0, 0, 0.9)',
               opacity: 0.8,
               height: '792px',
               maxHeight: '792px',
-              boxSizing: 'borderBox', display: 'flex',
+              boxSizing: 'borderBox',
+              display: 'flex',
               flexDirection: 'column',
             }">
-            <p style="font-size: 18px;font-weight: 700;">计划库</p>
-            <div style="width: 100%;border-top: 1px solid rgba(255,255,255,1);"></div>
-            <div style="margin-top: 20px;">
-              <a-transfer v-model:target-keys="targetKeys" :data-source="mockData" show-search
-                :filter-option="filterOption" :render="item => item.title" @change="handleChange"
-                :style="{ color: 'rgba(255,255,255,1)' }" @search="handleSearch" />
+            <p style="font-size: 18px; font-weight: 700">计划库</p>
+            <div style="width: 100%; border-top: 1px solid rgba(255, 255, 255, 1)"></div>
+            <div style="margin-top: 20px">
+              <a-transfer
+                v-model:target-keys="targetKeys"
+                :data-source="mockData"
+                show-search
+                :filter-option="filterOption"
+                :render="(item) => item.title"
+                @change="handleChange"
+                :style="{ color: 'rgba(255,255,255,1)' }"
+                @search="handleSearch" />
             </div>
             <button class="addok" @click="addhandleOk">确定</button>
           </a-modal>
@@ -611,7 +637,10 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.id, row.name, row.age)">
+              <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>
@@ -619,14 +648,22 @@
               </tr>
             </tbody>
           </table>
-          <a-modal width="500px" height="792px" v-model:visible="logModalVisible" :closable="false"
-            :style="{ backgroundColor: '#000', overflow: 'hidden' }" @cancel="closeLogModal" :footer="null"
-            :mask="false" :bodyStyle="{
+          <a-modal
+            width="500px"
+            height="792px"
+            v-model:visible="logModalVisible"
+            :closable="false"
+            :style="{ backgroundColor: '#000', overflow: 'hidden' }"
+            @cancel="closeLogModal"
+            :footer="null"
+            :mask="false"
+            :bodyStyle="{
               background: 'rgba(0, 0, 0, 0.9)',
               opacity: 0.8,
               height: '792px',
               maxHeight: '792px',
-              boxSizing: 'borderBox', display: 'flex',
+              boxSizing: 'borderBox',
+              display: 'flex',
               flexDirection: 'column',
             }">
             <div style="height: 792px">
@@ -636,16 +673,15 @@
               </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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -662,20 +698,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -692,20 +725,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -722,20 +752,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -752,33 +779,28 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -795,19 +817,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span> <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -824,20 +844,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -854,20 +871,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -884,33 +898,28 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <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>
+                  <img src="/asset/image//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="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -927,19 +936,17 @@
                       ">
                       控制模式
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span> <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -956,20 +963,17 @@
                       ">
                       亮度
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">100lux</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">30lux</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >30lux</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -986,20 +990,17 @@
                       ">
                       控制场景
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">手动</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <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
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >自动</span
+                    >
                   </div>
                   <div>
-                    <button style="
+                    <button
+                      style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -1016,17 +1017,13 @@
                       ">
                       色温
                     </button>
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">4000k</span>
-                    <img src="../../../../public/asset/image/bulbLogo/22406.png" alt="">
-                    <span style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">3800k</span>
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
+                      >3800k</span
+                    >
                   </div>
                 </div>
               </div>
@@ -1041,1191 +1038,1199 @@
   </a-drawer>
   <div class="drawer-title1" v-if="!visible">
     <a-button @click="toggleDrawer" class="arrowbtn">
-      <left-outlined style="color:rgba(255, 255, 255, 1)" />
+      <left-outlined style="color: rgba(255, 255, 255, 1)" />
     </a-button>
   </div>
   <div class="drawer-title2" v-if="visible">
     <a-button @click="toggleDrawer" class="arrowbtn">
-      <right-outlined style="color:rgba(255, 255, 255, 1)" />
+      <right-outlined style="color: rgba(255, 255, 255, 1)" />
     </a-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
-import { RightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
-const toggleDrawer = () => {
-  visible.value = !visible.value;
-}
-const bulbs = ref([
-  { className: 'bulbLogo1', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
-  { className: 'bulbLogo2', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
-  { className: 'bulbLogo3', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
-  { className: 'bulbLogo4', imageUrl: '../../../../public/asset/image/bulbLogo/22419@2x.png', visible: false },
-  { className: 'bulbLogo5', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
-  { className: 'bulbLogo6', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
-  { className: 'bulbLogo7', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
-  { className: 'bulbLogo8', imageUrl: '../../../../public/asset/image/bulbLogo/22394@2x.png', visible: false },
-  { className: 'bulbLogo9', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
-  { className: 'bulbLogo10', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
-  { className: 'bulbLogo11', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
-  { className: 'bulbLogo12', imageUrl: '../../../../public/asset/image/bulbLogo/22396@2x.png', visible: false },
-  { className: 'bulbLogo13', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
-  { className: 'bulbLogo14', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
-  { className: 'bulbLogo15', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
-  { className: 'bulbLogo16', imageUrl: '../../../../public/asset/image/bulbLogo/22400@2x.png', visible: false },
-]);
-
-// 照明区域按钮单选
-const isPlanEnabled = ref(true); // 初始状态是启用
-const togglePlan = () => {
-  isPlanEnabled.value = !isPlanEnabled.value;
-};
-const showAllButtonsarea = ref(false);
-
-const buttons1 = computed(() => buttons.value.slice(0, 8));
-const buttons = ref([
-  { label: "A区", selected: false,id: 1 },
-  { label: "B区", selected: false,id: 2 },
-  { label: "C区", selected: false,id: 3 },
-  { label: "D区", selected: false,id: 4 },
-  { label: "计划启用", selected: false,id: 5 },
-  { label: "A区", selected: false,id: 6 },
-  { label: "B区", selected: false,id: 7 },
-  { label: "C区", selected: false,id: 8 },
-  { label: "D区", selected: false,id: 4 },
-  { label: "计划启用", selected: false,id: 5 },
-  { label: "A区", selected: false,id: 6 },
-  { label: "B区", selected: false,id: 7 },
-  { label: "C区", selected: false,id: 8 },
-]);
-const selectedButton = ref(null);
-const selectButton = (button) => {
-  selectedButton.value = button;
-  const startIndex = (button.id - 1) * 4;  // 计算当前区域灯泡的起始索引
-  const endIndex = startIndex + 4;        // 计算当前区域灯泡的结束索引
-  bulbs.value.forEach((bulb, index) => {
-    bulb.visible = index >= startIndex && index < endIndex;
-  });
-};
-
-// 照明回路按钮
-let singleSelection = ref(true); // 默认为单选
-const selectAllCheckbox = ref(false);
-const showControlMode = ref(false);
-const showAllButtons = ref(false);
-// 默认展示八个
-const limitedButtons = computed(() => buttons2.value.slice(0, 8));
-const buttons2 = ref([
-  { label: "1区", selected: false},
-  { label: "2区", selected: false},
-  { label: "3区", selected: false},
-  { label: "4区", selected: false},
-  { label: "5区", selected: false},
-  { label: "6区", selected: false},
-  { label: "7区", selected: false},
-  { label: "1区", selected: false},
-  { label: "2区", selected: false},
-  { label: "3区", selected: false}
-]);
-const isPlanEnabled2 = ref(true);
-const togglePlan2 = () => {
-  isPlanEnabled2.value = !isPlanEnabled2.value;
-};
-const selectAll = () => {
-  singleSelection.value = !singleSelection;
-  if (singleSelection) {
-    // 单选
-    buttons2.value.forEach((button) => {
-      button.selected = false;
-    });
-  } else {
-    // 多选
-    buttons2.value.forEach((button) => {
-      button.selected = false;
+  import { ref, computed, onMounted } from 'vue';
+  import { RightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
+  const toggleDrawer = () => {
+    visible.value = !visible.value;
+  };
+  const bulbs = ref([
+    { className: 'bulbLogo1', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
+    { className: 'bulbLogo2', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
+    { className: 'bulbLogo3', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
+    { className: 'bulbLogo4', imageUrl: '/asset/image/bulbLogo/22419@2x.png', visible: false },
+    { className: 'bulbLogo5', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
+    { className: 'bulbLogo6', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
+    { className: 'bulbLogo7', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
+    { className: 'bulbLogo8', imageUrl: '/asset/image/bulbLogo/22394@2x.png', visible: false },
+    { className: 'bulbLogo9', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
+    { className: 'bulbLogo10', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
+    { className: 'bulbLogo11', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
+    { className: 'bulbLogo12', imageUrl: '/asset/image/bulbLogo/22396@2x.png', visible: false },
+    { className: 'bulbLogo13', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
+    { className: 'bulbLogo14', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
+    { className: 'bulbLogo15', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
+    { className: 'bulbLogo16', imageUrl: '/asset/image/bulbLogo/22400@2x.png', visible: false },
+  ]);
+
+  // 照明区域按钮单选
+  const isPlanEnabled = ref(true); // 初始状态是启用
+  const togglePlan = () => {
+    isPlanEnabled.value = !isPlanEnabled.value;
+  };
+  const showAllButtonsarea = ref(false);
+
+  const buttons1 = computed(() => buttons.value.slice(0, 8));
+  const buttons = ref([
+    { label: 'A区', selected: false, id: 1 },
+    { label: 'B区', selected: false, id: 2 },
+    { label: 'C区', selected: false, id: 3 },
+    { label: 'D区', selected: false, id: 4 },
+    { label: '计划启用', selected: false, id: 5 },
+    { label: 'A区', selected: false, id: 6 },
+    { label: 'B区', selected: false, id: 7 },
+    { label: 'C区', selected: false, id: 8 },
+    { label: 'D区', selected: false, id: 4 },
+    { label: '计划启用', selected: false, id: 5 },
+    { label: 'A区', selected: false, id: 6 },
+    { label: 'B区', selected: false, id: 7 },
+    { label: 'C区', selected: false, id: 8 },
+  ]);
+  const selectedButton = ref(null);
+  const selectButton = (button) => {
+    selectedButton.value = button;
+    const startIndex = (button.id - 1) * 4; // 计算当前区域灯泡的起始索引
+    const endIndex = startIndex + 4; // 计算当前区域灯泡的结束索引
+    bulbs.value.forEach((bulb, index) => {
+      bulb.visible = index >= startIndex && index < endIndex;
     });
+  };
+
+  // 照明回路按钮
+  let singleSelection = ref(true); // 默认为单选
+  const selectAllCheckbox = ref(false);
+  const showControlMode = ref(false);
+  const showAllButtons = ref(false);
+  // 默认展示八个
+  const limitedButtons = computed(() => buttons2.value.slice(0, 8));
+  const buttons2 = ref([
+    { label: '1区', selected: false },
+    { label: '2区', selected: false },
+    { label: '3区', selected: false },
+    { label: '4区', selected: false },
+    { label: '5区', selected: false },
+    { label: '6区', selected: false },
+    { label: '7区', selected: false },
+    { label: '1区', selected: false },
+    { label: '2区', selected: false },
+    { label: '3区', selected: false },
+  ]);
+  const isPlanEnabled2 = ref(true);
+  const togglePlan2 = () => {
+    isPlanEnabled2.value = !isPlanEnabled2.value;
+  };
+  const selectAll = () => {
+    singleSelection.value = !singleSelection.value;
+    if (singleSelection.value) {
+      // 单选
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+    } else {
+      // 多选
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+    }
+
+    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
+  };
+
+  const toggleAllSelection = () => {
+    if (selectAllCheckbox.value) {
+      // 如果全选开关被打开，实现多选模式
+      buttons2.value.forEach((button) => {
+        button.selected = true;
+      });
+      singleSelection.value = false;
+    } else {
+      // 如果全选开关被关闭，实现单选模式
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+      singleSelection.value = true;
+    }
+  };
+
+  const toggleSelection = (button) => {
+    if (singleSelection.value) {
+      // 单选模式
+      buttons2.value.forEach((b) => {
+        if (b !== button) {
+          b.selected = false;
+        }
+      });
+    }
+    button.selected = !button.selected;
+    // 如果当前处于多选模式，更新全选开关的状态
+    if (!singleSelection.value) {
+      selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
+    } else {
+      // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
+      selectAllCheckbox.value = false;
+    }
+    showControlMode.value = button;
+  };
+
+  // 控制模式按钮
+  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 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 refresh = () => {
+    selectedButton.value = null;
+    showControlMode.value = false;
+    showControlScene.value = false;
+    selectedButton3.value = null;
+    selectedButton4.value = null;
+  };
+  // 操作日志
+  const logModalVisible = ref(false);
+  const handleRowClick = (record: any, index: number) => {
+    // 处理行点击事件，例如选中行或者其他操作
+    console.log(record, '=================', index);
+    // 显示模态框
+    logModalVisible.value = true;
+  };
+  const closeLogModal = () => {
+    logModalVisible.value = false;
+  };
+  // 执行确认
+  const executevisible = ref<boolean>(false);
+  const showModal = () => {
+    executevisible.value = true;
+  };
+  const excuModal = () => {
+    console.log('取消111');
+    executevisible.value = false;
+  };
+  const handleOk = (e: MouseEvent) => {
+    console.log('ok1111');
+    executevisible.value = false;
+  };
+  // 添加模态框
+  const addvisible = ref<boolean>(false);
+  const addModal = () => {
+    addvisible.value = true;
+  };
+  // 穿梭框
+  interface MockData {
+    key: string;
+    title: string;
+    description: string;
+    chosen: boolean;
+  }
+  const mockData = ref([
+    {
+      key: '1',
+
+      title: '计划再开',
+    },
+    {
+      key: '2',
+
+      title: '检修模式',
+    },
+    {
+      key: '3',
+
+      title: '设备变更',
+    },
+  ]);
+  // const mockData = ref<MockData[]>([]);
+  const targetKeys = ref<string[]>([]);
+  const filterOption = (inputValue: string, option: MockData) => {
+    return option.description.indexOf(inputValue) > -1;
+  };
+  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+    console.log(keys, direction, moveKeys);
+  };
+  const handleSearch = (dir: string, value: string) => {
+    console.log('search:', dir, value);
+  };
+  const addhandleOk = (e: MouseEvent) => {
+    console.log(e);
+    addvisible.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .bulbLogo1 {
+    margin-top: 40%;
+    margin-left: 12%;
+  }
+  .bulbLogo2 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+  .bulbLogo3 {
+    margin-top: 23%;
+    margin-left: 10%;
+  }
+  .bulbLogo4 {
+    margin-top: 10%;
+    margin-left: 15%;
+  }
+  .bulbLogo5 {
+    margin-top: 8%;
+    margin-left: 13%;
+  }
+  .bulbLogo6 {
+    margin-top: 8%;
+    margin-left: 15%;
+  }
+  .bulbLogo7 {
+    margin-top: 0%;
+    margin-left: 12%;
+  }
+  .bulbLogo9 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+  .bulbLogo10 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+  .bulbLogo11 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+  .bulbLogo12 {
+    margin-top: 35%;
+    margin-left: 20%;
+  }
+  .custom-table {
+    border-collapse: collapse;
+    width: 416px;
+    height: 195px;
+    color: rgba(255, 255, 255, 1);
   }
 
-  selectAllCheckbox.value = !singleSelection; // 更新全选开关的状态
-};
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
+  }
 
-const toggleAllSelection = () => {
-  if (selectAllCheckbox.value) {
-    // 如果全选开关被打开，实现多选模式
-    buttons2.value.forEach((button) => {
-      button.selected = true;
-    });
-    singleSelection.value = false;
-  } else {
-    // 如果全选开关被关闭，实现单选模式
-    buttons2.value.forEach((button) => {
-      button.selected = false;
-    });
-    singleSelection.value = true;
+  .custom-table tr:hover {
+    background-color: rgba(67, 136, 251, 1);
+    cursor: pointer;
   }
-};
 
-const toggleSelection = (button) => {
-  if (singleSelection) {
-    // 单选模式
-    buttons2.value.forEach((b) => {
-      if (b !== button) {
-        b.selected = false;
-      }
-    });
+  .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);
   }
-  button.selected = !button.selected;
-  // 如果当前处于多选模式，更新全选开关的状态
-  if (!singleSelection) {
-    selectAllCheckbox.value = buttons2.value.some((button) => button.selected);
-  } else {
-    // 在单选模式下，全选开关应设为false，因为不可能所有按钮都被选中
-    selectAllCheckbox.value = false;
-  }
-  showControlMode.value = button
-};
-
-// 控制模式按钮
-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 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 refresh = () => {
-  selectedButton.value = null;
-  showControlMode.value = false;
-  showControlScene.value = false;
-  selectedButton3.value = null;
-  selectedButton4.value = null;
-};
-// 操作日志
-const logModalVisible = ref(false);
-const handleRowClick = (record: any, index: number) => {
-  // 处理行点击事件，例如选中行或者其他操作
-  console.log(record, "=================", index);
-  // 显示模态框
-  logModalVisible.value = true;
-};
-const closeLogModal = () => {
-  logModalVisible.value = false;
-};
-// 执行确认
-const executevisible = ref<boolean>(false);
-const showModal = () => {
-  executevisible.value = true;
-};
-const excuModal = () => {
-  console.log('取消111');
-  executevisible.value = false;
-};
-const handleOk = (e: MouseEvent) => {
-  console.log('ok1111');
-  executevisible.value = false;
-};
-// 添加模态框
-const addvisible = ref<boolean>(false);
-const addModal = () => {
-  addvisible.value = true;
-};
-// 穿梭框
-interface MockData {
-  key: string;
-  title: string;
-  description: string;
-  chosen: boolean;
-}
-const mockData = ref([
-  {
-    key: "1",
-
-    title: "计划再开",
-
-  },
-  {
-    key: "2",
-
-    title: "检修模式",
-
-  },
-  {
-    key: "3",
-
-    title: "设备变更",
-
-  },
-]);
-// const mockData = ref<MockData[]>([]);
-const targetKeys = ref<string[]>([]);
-const filterOption = (inputValue: string, option: MockData) => {
-  return option.description.indexOf(inputValue) > -1;
-};
-const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
-  console.log(keys, direction, moveKeys);
-};
-const handleSearch = (dir: string, value: string) => {
-  console.log('search:', dir, value);
-};
-const addhandleOk = (e: MouseEvent) => {
-  console.log(e);
-  addvisible.value = false;
-};
 
-</script>
+  .lightarea,
+  .circuitarea,
+  .controlarea,
+  .controlscenearea,
+  .lightparametersarea {
+    width: 100%;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+  }
+
+  .lightareatab,
+  .circuittab,
+  .controltab,
+  .controlscenetab,
+  .lightparameterstab {
+    width: 5px;
+    height: 23px;
+    opacity: 1;
+    background: rgba(26, 174, 251, 1);
+    margin-right: 4px;
+  }
+
+  .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%);
+  }
+
+  .lightareatab,
+  .lightareatext {
+    display: inline-block;
+    justify-content: center;
+  }
+
+  .plan.enabled {
+    border: none;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 5px;
+    color: rgba(255, 255, 255, 1);
+    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: rgba(255, 255, 255, 1);
+    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: rgba(255, 255, 255, 1);
+    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: rgba(255, 255, 255, 1);
+    vertical-align: top;
+    width: 88px;
+    height: 32px;
+    background-color: red;
+  }
+
+  .openplan:disabled {
+    cursor: not-allowed;
+  }
+
+  .btn2 {
+    display: flex;
+    align-items: center;
+    margin-left: 157px;
+  }
+
+  .openzm {
+    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: 5px;
+    margin-right: 15px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+    border: none;
+    border-radius: 5px;
+  }
+
+  .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: rgba(255, 255, 255, 1);
+  }
+
+  .area,
+  .btnarea,
+  .controlmodebtnarea,
+  .controlscenebtnarea {
+    margin-left: -17px;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .btn:hover {
+    background-color: rgba(207, 212, 219, 1);
+  }
+
+  .btn:active {
+    background-color: rgba(102, 102, 102, 1);
+    color: white;
+  }
+
+  .circuitarea,
+  .controlscenearea,
+  .lightparametersarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .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;
+  }
+
+  .controlarea {
+    left: 51px;
+    width: 100%;
+    margin-top: 20px;
+  }
+
+  .controltab,
+  .controltext {
+    display: inline-block;
+  }
+
+  :deep(.cell) {
+    text-align: center;
+  }
+
+  :deep(#pane-first) {
+    height: 100%;
+  }
+
+  .controlscenetab,
+  .controlscenetext {
+    display: inline-block;
+  }
+
+  .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;
+  }
+
+  .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: 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;
+    /* 使用 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;
+  }
 
-<style lang="less" scoped>
-.bulbLogo1{
-  margin-top:40%;
-  margin-left: 12%;
-}
-.bulbLogo2{
-  margin-top: 35%;
-  margin-left: 20%;
-}
-.bulbLogo3{
-  margin-top: 23%;
-  margin-left: 10%;
-}
-.bulbLogo4{
-  margin-top: 10%;
-  margin-left: 15%;
-}
-.bulbLogo5{
-  margin-top: 8%;
-  margin-left: 13%;
-}
-.bulbLogo6{
-  margin-top: 8%;
-  margin-left: 15%;
-}
-.bulbLogo7{
-  margin-top: 0%;
-  margin-left: 12%;
-}
-.bulbLogo9{
-  margin-top: 35%;
-  margin-left: 20%;
-}
-.bulbLogo10{
-  margin-top: 35%;
-  margin-left: 20%;
-}
-.bulbLogo11{
-  margin-top: 35%;
-  margin-left: 20%;
-}
-.bulbLogo12{
-  margin-top: 35%;
-  margin-left: 20%;
-}
-.custom-table {
-  border-collapse: collapse;
-  width: 416px;
-  height: 195px;
-  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;
-}
-
-.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;
-}
-
-.lightareatab,
-.circuittab,
-.controltab,
-.controlscenetab,
-.lightparameterstab {
-  width: 5px;
-  height: 23px;
-  opacity: 1;
-  background: rgba(26, 174, 251, 1);
-  margin-right: 4px;
-}
-
-.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%);
-}
-
-.lightareatab,
-.lightareatext {
-  display: inline-block;
-  justify-content: center;
-}
-
-.plan.enabled {
-  border: none;
-  font-size: 14px;
-  font-weight: 400;
-  border-radius: 5px;
-  color: rgba(255, 255, 255, 1);
-  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: rgba(255, 255, 255, 1);
-  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: rgba(255, 255, 255, 1);
-  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: rgba(255, 255, 255, 1);
-  vertical-align: top;
-  width: 88px;
-  height: 32px;
-  background-color: red;
-}
-
-.openplan:disabled {
-  cursor: not-allowed;
-}
-
-.btn2 {
-  display: flex;
-  align-items: center;
-  margin-left: 157px;
-}
-
-.openzm {
-  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: 5px;
-  margin-right: 15px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 1);
-  border: none;
-  border-radius: 5px;
-}
-
-.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: rgba(255, 255, 255, 1);
-}
-
-.area,
-.btnarea,
-.controlmodebtnarea,
-.controlscenebtnarea {
-  margin-left: -17px;
-}
-
-.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);
-}
-
-.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);
-}
-
-.btn:hover {
-  background-color: rgba(207, 212, 219, 1);
-}
-
-.btn:active {
-  background-color: rgba(102, 102, 102, 1);
-  color: white;
-}
-
-.circuitarea,
-.controlscenearea,
-.lightparametersarea {
-  left: 51px;
-  width: 100%;
-  margin-top: 20px;
-}
-
-.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;
-}
-
-.controlarea {
-  left: 51px;
-  width: 100%;
-  margin-top: 20px;
-}
-
-.controltab,
-.controltext {
-  display: inline-block;
-}
-
-:deep(.cell) {
-  text-align: center;
-}
-
-:deep(#pane-first) {
-  height: 100%;
-}
-
-.controlscenetab,
-.controlscenetext {
-  display: inline-block;
-}
-
-.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;
-}
-
-.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: 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;
-  /* 使用 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;
-}
-
-.lighting-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-@media screen and (min-width: 0px) and (max-width: 959px) {
-  .lighting-img {}
-}
-
-@media screen and (min-width: 960px) and (max-width: 1023px) {
-  .lighting-img {}
-}
-
-@media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .lighting-img {}
-}
-
-/*>=1280,<1440的设备屏幕*/
-@media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .lighting-img {}
-}
-
-@media screen and (min-width: 1440px) and (max-width: 1679px) {
-  .lighting-img {}
-}
-
-/*>=1680,<1920px的设备屏幕*/
-@media screen and (min-width: 1680px) and (max-width: 1919px) {
-  .lighting-img {}
-}
-
-/*>=1920的设备屏幕*/
-@media (min-width: 1920px) {
   .lighting-img {
-    height: 1191px;
-  }
-}
-
-.lighting-img-box {
-  width: 100%;
-  height: 100vh;
-  /* 设置图片容器的高度为视口高度 */
-  overflow: hidden;
-  /* 隐藏溢出部分 */
-  position: relative;
-  /* 使内部绝对定位元素基于此容器定位 */
-}
-
-.lighting-img-box img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-fit: cover;
-  position: relative;
-}
-
-.lighting-img-box img {
-  width: 100%;
-  height: auto;
-}
-
-.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:10%;
-  left: 10%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo2 {
-  position: absolute;
-  top:9%;
-  left: 15%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo3 {
-  position: absolute;
-  top:34%;
-  left: 25%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo4 {
-  position: absolute;
-  top:45%;
-  left: 30%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo5 {
-  position: absolute;
-  top:45%;
-  left: 30%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo6 {
-  position: absolute;
-  top:55%;
-  left: 30%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo7 {
-  position: absolute;
-  top:60%;
-  left: 40%;
-  display: flex;
-  align-items: center;
-}
-.lighting-img-box>.bulbBox>.bulbLogo8 {
-  position: absolute;
-  top:55%;
-  left: 70%;
-  display: flex;
-  align-items: center;
-}
-.lighting-img-box>.bulbBox>.bulbLogo9 {
-  position: absolute;
-  top:10%;
-  left: 60%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo10 {
-  position: absolute;
-  top:10%;
-  left: 40%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo11 {
-  position: absolute;
-  top:15%;
-  left: 50%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo12 {
-  position: absolute;
-  top:15%;
-  left: 60%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo13 {
-  position: absolute;
-  top:55%;
-  left: 70%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo14 {
-  position: absolute;
-  top:45%;
-  left: 60%;
-  display: flex;
-  align-items: center;
-}
-
-.lighting-img-box>.bulbBox>.bulbLogo15 {
-  position: absolute;
-  top:45%;
-  left: 80%;
-  display: flex;
-  align-items: center;
-}
-.lighting-img-box>.bulbBox>.bulbLogo16 {
-  position: absolute;
-  top:45%;
-  left: 90%;
-  display: flex;
-  align-items: center;
-}
-.editable-cell {
-  position: relative;
-
-  .editable-cell-input-wrapper,
-  .editable-cell-text-wrapper {
-    padding-right: 24px;
-  }
-
-  .editable-cell-text-wrapper {
-    padding: 5px 24px 5px 5px;
-  }
-
-  .editable-cell-icon,
-  .editable-cell-icon-check {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media screen and (min-width: 0px) and (max-width: 959px) {
+    .lighting-img {
+    }
+  }
+
+  @media screen and (min-width: 960px) and (max-width: 1023px) {
+    .lighting-img {
+    }
+  }
+
+  @media screen and (min-width: 1024px) and (max-width: 1279px) {
+    .lighting-img {
+    }
+  }
+
+  /*>=1280,<1440的设备屏幕*/
+  @media screen and (min-width: 1280px) and (max-width: 1439px) {
+    .lighting-img {
+    }
+  }
+
+  @media screen and (min-width: 1440px) and (max-width: 1679px) {
+    .lighting-img {
+    }
+  }
+
+  /*>=1680,<1920px的设备屏幕*/
+  @media screen and (min-width: 1680px) and (max-width: 1919px) {
+    .lighting-img {
+    }
+  }
+
+  /*>=1920的设备屏幕*/
+  @media (min-width: 1920px) {
+    .lighting-img {
+      height: 1191px;
+    }
+  }
+
+  .lighting-img-box {
+    width: 100%;
+    height: 100vh;
+    /* 设置图片容器的高度为视口高度 */
+    overflow: hidden;
+    /* 隐藏溢出部分 */
+    position: relative;
+    /* 使内部绝对定位元素基于此容器定位 */
+  }
+
+  .lighting-img-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-fit: cover;
+    position: relative;
+  }
+
+  .lighting-img-box img {
+    width: 100%;
+    height: auto;
+  }
+
+  .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;
-    right: 0;
-    width: 20px;
-    cursor: pointer;
+    top: 10%;
+    left: 10%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo2 {
+    position: absolute;
+    top: 9%;
+    left: 15%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo3 {
+    position: absolute;
+    top: 34%;
+    left: 25%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo4 {
+    position: absolute;
+    top: 45%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo5 {
+    position: absolute;
+    top: 45%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo6 {
+    position: absolute;
+    top: 55%;
+    left: 30%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo7 {
+    position: absolute;
+    top: 60%;
+    left: 40%;
+    display: flex;
+    align-items: center;
+  }
+  .lighting-img-box > .bulbBox > .bulbLogo8 {
+    position: absolute;
+    top: 55%;
+    left: 70%;
+    display: flex;
+    align-items: center;
+  }
+  .lighting-img-box > .bulbBox > .bulbLogo9 {
+    position: absolute;
+    top: 10%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo10 {
+    position: absolute;
+    top: 10%;
+    left: 40%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo11 {
+    position: absolute;
+    top: 15%;
+    left: 50%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo12 {
+    position: absolute;
+    top: 15%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo13 {
+    position: absolute;
+    top: 55%;
+    left: 70%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo14 {
+    position: absolute;
+    top: 45%;
+    left: 60%;
+    display: flex;
+    align-items: center;
+  }
+
+  .lighting-img-box > .bulbBox > .bulbLogo15 {
+    position: absolute;
+    top: 45%;
+    left: 80%;
+    display: flex;
+    align-items: center;
+  }
+  .lighting-img-box > .bulbBox > .bulbLogo16 {
+    position: absolute;
+    top: 45%;
+    left: 90%;
+    display: flex;
+    align-items: center;
+  }
+  .editable-cell {
+    position: relative;
+
+    .editable-cell-input-wrapper,
+    .editable-cell-text-wrapper {
+      padding-right: 24px;
+    }
+
+    .editable-cell-text-wrapper {
+      padding: 5px 24px 5px 5px;
+    }
+
+    .editable-cell-icon,
+    .editable-cell-icon-check {
+      position: absolute;
+      right: 0;
+      width: 20px;
+      cursor: pointer;
+    }
+
+    .editable-cell-icon {
+      margin-top: 4px;
+      display: none;
+    }
+
+    .editable-cell-icon-check {
+      line-height: 28px;
+    }
+
+    .editable-cell-icon:hover,
+    .editable-cell-icon-check:hover {
+      color: #108ee9;
+    }
+
+    .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('/asset/image/bulbLogo/bgsquare.png');
+    background-size: 450px 177px;
+    width: 450px;
+    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('/asset/t/image/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;
+  }
+
+  .text-change {
+    text-align: center;
+    color: rgba(255, 255, 255, 1);
+    font-size: 20px;
+  }
+
+  .excuno {
+    width: 150px;
+    height: 40px;
+    margin-top: 30px;
+  }
+
+  .excuok {
+    width: 150px;
+    height: 40px;
+    margin-top: 30px;
   }
 
-  .editable-cell-icon {
-    margin-top: 4px;
-    display: none;
-  }
-
-  .editable-cell-icon-check {
-    line-height: 28px;
-  }
-
-  .editable-cell-icon:hover,
-  .editable-cell-icon-check:hover {
-    color: #108ee9;
-  }
-
-  .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/asset/image/bulbLogo/bgsquare.png");
-  background-size: 450px 177px;
-  width: 450px;
-  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/asset/t/image/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;
-}
-
-.text-change {
-
-  text-align: center;
-  color: rgba(255, 255, 255, 1);
-  font-size: 20px;
-}
-
-.excuno {
-  width: 150px;
-  height: 40px;
-  margin-top: 30px;
-}
-
-.excuok {
-  width: 150px;
-  height: 40px;
-  margin-top: 30px;
-}
-
-.excubtn {
-  display: flex;
-  justify-content: space-between;
-}
-
-.addok {
-  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);
-  margin-top: 440px;
-  margin-left: 350px;
-}
+  .excubtn {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .addok {
+    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);
+    margin-top: 440px;
+    margin-left: 350px;
+  }
 </style>
diff --git a/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts b/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
index f2e5aff..dc07f58 100644
--- a/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
+++ b/hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
@@ -7,6 +7,7 @@ export const formConfig = (disabled: Boolean) => {
       component: 'NsChildForm',
       componentProps: {
         schemas: [
+          { label: '企业名称', field: 'orgName', show: false },
           {
             label: '部门名称',
             field: 'deptName',
@@ -90,6 +91,8 @@ export const formConfig2 = (disabled2: Boolean) => {
       component: 'NsChildForm',
       componentProps: {
         schemas: [
+          { label: '部门名称', field: 'deptName', show: false },
+
           {
             label: '角色名称',
             field: 'zhName',
diff --git a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
index 939c433..b9d2e5e 100644
--- a/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
@@ -7,19 +7,12 @@
       <a-row>
         <a-col :span="12" class="tree">
           <ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button>
-          <ns-button :disabled="disabled" type="primary" @click="addApartmentSon"
-            >新增子部门</ns-button
-          >
-          <ns-button
-            :disabled="disabled"
-            style="margin: 10px"
-            type="primary"
-            @click="deleteApartment"
-            >删除</ns-button
-          >
+          <ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button>
+          <ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button>
           <a-tree
             v-if="apartmentTreeData?.length"
             :tree-data="apartmentTreeData"
+            :checkedKeys="['0-0']"
             defaultExpandAll
             @select="SelectApartmentTree">
             <template #title="data">
@@ -52,7 +45,8 @@
           </a-tabs>
           <div v-show="activeKey === '1'">
             <ns-button style="margin: 16px" type="primary" @click="CancelApartment">取消</ns-button>
-            <ns-button type="primary" :disabled="disabled" @click="ApartmentSure">确定</ns-button>
+            <ns-button v-show="disabled" type="primary" @click="deptEdit">编辑</ns-button>
+            <ns-button v-show="!disabled" type="primary" @click="ApartmentSure">确定</ns-button>
           </div>
           <div v-show="activeKey === '2'">
             <ns-button style="margin-left: 16px" type="primary" @click="apartmentPermission"
@@ -104,7 +98,12 @@
           </a-tabs>
           <div v-show="activeKey2 === '1'">
             <ns-button style="margin: 16px" type="primary" @click="CancelUser">取消</ns-button>
-            <ns-button type="primary" :disabled="disabled2" @click="UserSure"> 确定</ns-button>
+            <ns-button v-show="disabled2" type="primary" :disabled="disabled2" @click="UserSure">
+              确定</ns-button
+            >
+            <ns-button v-show="!disabled2" type="primary" :disabled="disabled2" @click="UserSure">
+              确定</ns-button
+            >
           </div>
           <div v-show="activeKey2 === '2'">
             <ns-button style="margin: 16px" type="primary" @click="rolePermission"> 确定</ns-button>
@@ -143,12 +142,10 @@
       const selectRef2 = ref();
       const formSchema = formConfig(disabled as any);
       const formSchema2 = formConfig2(disabled2 as any);
-      const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
-      const projectId = JSON.parse(sessionStorage.getItem('userInfo')).projectId;
+      const { orgId, orgName, projectId } = JSON.parse(sessionStorage.getItem('userInfo'));
       const userAdminTreeData = ref([]);
       const apartmentTreeData = ref([]);
       const apartmentAdminTreeData = ref([]);
-
       const userTreeData = ref([]);
       const getPermissionTree = (params) => {
         return http.post(permission.permissionTree, params).then((res) => {
@@ -157,7 +154,7 @@
         });
       };
 
-      getPermissionTree({ projectId });
+      getPermissionTree({ projectId, orgId });
 
       watch(ApartcheckedKeys, () => {
         console.log('checkedKeys', ApartcheckedKeys.value);
@@ -215,6 +212,7 @@
             ...params,
             orgId,
             projectId,
+            orgName,
           });
         };
         return;
@@ -230,6 +228,7 @@
             orgId,
             projectId,
             pdeptId: selectRef.value.deptInfo.deptId,
+            deptName: selectRef.value.deptInfo.deptName,
           });
         };
       };
@@ -245,6 +244,7 @@
             orgId,
             projectId,
             deptId: selectRef.value.deptInfo.deptId,
+            deptName: selectRef.value.deptInfo.deptName,
           });
         };
       };
@@ -261,6 +261,7 @@
             projectId,
             proleId: selectRef2.value.roleId,
             deptId: selectRef.value.deptInfo.deptId,
+            deptName: selectRef.value.deptInfo.deptName,
           });
         };
       };
@@ -374,17 +375,27 @@
         };
       };
 
+      // 部门编辑
+      const deptEdit = () => {
+        disabled.value = false;
+        apartmentChoose();
+      };
+
       // 部门选择
       const SelectApartmentTree = (selectedKeys: any, info: any) => {
+        console.log(selectedKeys, info);
+
         const { selected } = info;
-        disabled.value = !selected;
-        console.log(info, 'info');
-        selectKey.value = selectedKeys[0];
+
+        // disabled.value = !selected;
+
+        if (!selectedKeys?.length) return;
+        selectKey.value = [info.node.key];
         selectRef.value = info.node.dataRef;
-        formData.value = cloneDeep(info.node.dataRef.deptInfo);
-        apartmentChoose();
         ApartcheckedKeys.value.splice(0);
         getDeptPermission();
+        formData.value = cloneDeep(info.node.dataRef.deptInfo);
+
         // getUserTree({ deptId: selectRef.value.deptInfo.deptId });
       };
 
@@ -434,10 +445,6 @@
       };
 
       const ApartmentSure = () => {
-        // formRef.value?.triggerSubmit().then(() => {});
-
-        // disabled.value = !disabled.value;
-        // console.log(formData.value.name, 'formData');
         console.log(opMap.type, 'ApartmentSure');
         const opArr = ['addDept', 'editDpet', 'addson'];
         if (opArr.includes(opMap.type)) {
@@ -445,6 +452,7 @@
           opMap.fuc &&
             opMap.fuc(formData.value).then(() => {
               getTree();
+              disabled.value = true;
             });
         } else if (opMap.type === 'deptDelete') {
           opMap.fuc && opMap.fuc({ ...formData.value, selectRef: selectRef.value });
@@ -504,6 +512,7 @@
         formRef,
         apartmentPermission,
         rolePermission,
+        deptEdit,
       };
     },
   });
diff --git a/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue b/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
index 4191c5d..f311b5f 100644
--- a/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
@@ -390,7 +390,7 @@
               confirm: true,
               handle: ({ userId }: any) => {
                 http
-                  .post(origanizemanage.resetPwd, { userId })
+                  .post(origanizemanage.resetPwd, { userId, password: 123456 })
                   .then(() => NsModal.success({ content: '密码重置成功,初始密码123456' }));
               },
             },
diff --git a/hx-op/index.html b/hx-op/index.html
index 420aa9c..764733a 100644
--- a/hx-op/index.html
+++ b/hx-op/index.html
@@ -10,7 +10,7 @@
         securityJsCode: '09e43004c09d39c0e61f8fd65d5e6a5a',
       };
     </script> -->
-    <title>AI智能BAS系统</title>
+    <title>op端</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/hx-op/src/api/origanizemanage.ts b/hx-op/src/api/origanizemanage.ts
index e24c073..a5b8364 100644
--- a/hx-op/src/api/origanizemanage.ts
+++ b/hx-op/src/api/origanizemanage.ts
@@ -9,6 +9,10 @@ export enum enterPrise {
   getArea = `${BASE_URL}/system/queryAddressTree`,
   freeze = `${BASE_URL}/admin/org/freeze`,
   getCode = `${BASE_URL}/admin/org/getCode`,
-  queryRootAc = `${BASE_URL}/admin/org/queryRootAc`,
-  permissionTree = `${BASE_URL}/api/dept/permissionTree`,
+  queryRootAc = `${BASE_URL}/api/user/queryRootAc`,
+  orgPermission = `${BASE_URL}/admin/org/OrgPermission`,
+  permissionTree = `${BASE_URL}/admin/permission/permissionTree`,
+  queryOrgPermission = `${BASE_URL}/admin/org/QueryOrgPermission`,
+  queryOrgTree = `${BASE_URL}/admin/org/QueryLinkOrgTree`,
+  resetPwd = `${BASE_URL}/api/user/resetPwd`,
 }
diff --git a/hx-op/src/util/generateRandomString.ts b/hx-op/src/util/generateRandomString.ts
new file mode 100644
index 0000000..34174c4
--- /dev/null
+++ b/hx-op/src/util/generateRandomString.ts
@@ -0,0 +1,9 @@
+export function generateRandomString(length: number) {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
diff --git a/hx-op/src/view/organizationManage/enterpriseManage/TreeAdd.vue b/hx-op/src/view/organizationManage/enterpriseManage/TreeAdd.vue
index b552187..9438895 100644
--- a/hx-op/src/view/organizationManage/enterpriseManage/TreeAdd.vue
+++ b/hx-op/src/view/organizationManage/enterpriseManage/TreeAdd.vue
@@ -1,14 +1,16 @@
 <template>
-  <a-modal title="企业信息" :width="600" v-model:visible="visible" @ok="handleOk">
+  <a-modal title="企业信息" :width="500" v-model:visible="visible" @ok="handleOk">
     <ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="vertical" />
   </a-modal>
 </template>
 
 <script lang="ts">
   import { defineComponent, reactive, ref } from 'vue';
+  import { enterPrise } from '/@/api/origanizemanage';
   export default defineComponent({
     name: 'AddBorderVisible',
-    setup() {
+    emits: ['ok'],
+    setup(props, { emit }) {
       let formData = ref({});
       const formRef = ref();
       const visible = ref(false);
@@ -17,30 +19,40 @@
       };
       const formSchema = reactive([
         {
-          field: 'name',
-          label: '企业名称',
-          component: 'NsInput',
+          field: 'orgId',
+          label: '组织名称',
+          component: 'NsSelectApi',
           componentProps: {
-            placeholder: '请输入企业名称',
-            maxLength: 20,
+            api: enterPrise.list,
+            params: {
+              pageNum: 0,
+              pageSize: 999,
+            },
+            getPopupContainer: (triggerNode: any) =>
+              triggerNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+                .parentNode,
+            resultField: 'data.records',
+            labelField: 'orgName',
+            valueField: 'orgId',
+            immediate: true,
+            placeholder: '请选择',
           },
           rules: [
             {
               required: true,
-              message: '请输入企业名称',
               trigger: 'blur',
             },
           ],
         },
         {
-          field: 'Isshare',
+          field: 'point',
           label: '点位数据',
           component: 'NsRadioGroup',
           componentProps: {
             radioType: 'radio',
             options: [
-              { label: '分享', value: 1 },
-              { label: '不分享', value: 2 },
+              { label: '分享', value: 0 },
+              { label: '不分享', value: 1 },
             ],
           },
           rules: [
@@ -54,8 +66,8 @@
         },
       ]);
       const handleOk = () => {
-        formRef.value?.triggerSubmit().then(() => {
-          toggle();
+        formRef.value?.triggerSubmit().then((res) => {
+          emit('ok', res);
         });
       };
       return { handleOk, formData, formSchema, visible, toggle, formRef };
diff --git a/hx-op/src/view/organizationManage/enterpriseManage/config.ts b/hx-op/src/view/organizationManage/enterpriseManage/config.ts
index b3363e2..8bc85d2 100644
--- a/hx-op/src/view/organizationManage/enterpriseManage/config.ts
+++ b/hx-op/src/view/organizationManage/enterpriseManage/config.ts
@@ -1,16 +1,18 @@
 import { mockData } from './mock';
 import { cloneDeep } from 'lodash-es';
 import { Modal, message } from 'ant-design-vue';
-import { createVNode, ref } from 'vue';
-import { NsMessage } from '/nerv-lib/component';
+import { createVNode, nextTick, ref } from 'vue';
+import { NsMessage, NsModal } from '/nerv-lib/component';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { enterPrise } from '/@/api/origanizemanage';
+import { http } from '/nerv-lib/util/http';
+import { generateRandomString } from '/@/util/generateRandomString';
 
 type status = 'NORMAL' | 'FREEZE';
 export const formConfig = [
   {
     field: 'orgId',
-    label: '企业ID',
+    label: '组织ID',
     component: 'NsInput',
     show: false,
   },
@@ -29,7 +31,7 @@ export const formConfig = [
   },
   {
     field: 'orgName',
-    label: '企业名称',
+    label: '组织名称',
     component: 'NsInput',
     componentProps: {
       placeholder: '请输入',
@@ -112,6 +114,55 @@ export const formConfig = [
   },
 ];
 
+const handle = async (record: any) => {
+  const { orgName, orgId } = record;
+  const res = await http.post(enterPrise.queryRootAc, {
+    orgId,
+  });
+  const { accountNo, userId } = res.data[0];
+
+  NsModal.confirm({
+    title: '重置密码',
+    icon: createVNode(ExclamationCircleOutlined),
+    okText: '重置',
+    content: createVNode('div', {}, [
+      createVNode('p', {}, `组织名称:   ${orgName}`),
+      createVNode('p', {}, `管理员账号:   ${accountNo}`),
+    ]),
+    onOk() {
+      NsModal.confirm({
+        title: '重置密码',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '是否确认重置该组织管理员密码',
+        onOk() {
+          const password = generateRandomString(6);
+          http.post(enterPrise.resetPwd, { userId, password }).then(() => {
+            NsModal.success({
+              okText: '确认',
+              content: createVNode('div', {}, [
+                createVNode('p', {}, '重置成功'),
+                createVNode('p', {}, '点击【确认】后自动复制密码并离开'),
+              ]),
+              onOk: () => {
+                try {
+                  navigator.clipboard.writeText(password);
+                  NsMessage.success('复制成功');
+                } catch (err) {
+                  console.error('复制失败', err);
+                }
+              },
+            });
+          });
+        },
+      });
+    },
+
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+};
+
 export const tableConfig = ({
   visible,
   formData,
@@ -119,10 +170,11 @@ export const tableConfig = ({
   getOrgRandomCode,
   borderVisible,
   serviceVisible,
-  server: { getTree },
+  server: { getTree, currentServerRecord, getPermissionData },
+  boundary: { getBoundaryTree, currentBoundaryRecord },
 }: any) => {
   return {
-    // title: '企业管理',
+    // title: '组织管理',
     api: enterPrise.list,
     headerActions: [
       {
@@ -216,16 +268,23 @@ export const tableConfig = ({
           label: '组织边界',
           handle: (record: any) => {
             console.log(record, 'record');
-            borderVisible.value = true;
+            const { orgId, orgName } = (currentBoundaryRecord.value = record);
+            getBoundaryTree({ orgId, orgName });
+            nextTick(() => {
+              borderVisible.value = true;
+            });
           },
         },
         {
           label: '服务',
           handle: (record: any) => {
-            console.log(record, 'record');
-            const { projectId } = record;
-            getTree({ projectId: 'beijingDQ' });
-            serviceVisible.value = true;
+            const { orgId } = (currentServerRecord.value = record);
+            opType.value = 'serverAdd';
+            // getTree({});
+            getPermissionData({ orgId });
+            nextTick(() => {
+              serviceVisible.value = true;
+            });
           },
         },
         {
@@ -255,38 +314,7 @@ export const tableConfig = ({
         {
           label: '重置密码',
           name: 'RoleTypeEdit',
-          handle: (record: any) => {
-            console.log(record, 'record');
-            Modal.confirm({
-              title: '重置密码',
-              icon: createVNode(ExclamationCircleOutlined),
-              okText: '重置',
-              content: h('div', {}, [
-                h('p', `企业名称:   ${record.jituanname}`),
-                h('p', '管理员账号:   hxdtadmin'),
-              ]),
-              onOk() {
-                Modal.confirm({
-                  icon: createVNode(ExclamationCircleOutlined),
-                  content: '是否确认重置该企业管理员密码',
-                  onOk() {
-                    Modal.success({
-                      okText: '确认',
-                      content: h('div', {}, [
-                        h('p', '重置成功'),
-                        h('p', '点击【确认】后自动复制密码并离开'),
-                      ]),
-                    });
-                  },
-                });
-              },
-
-              onCancel() {
-                console.log('Cancel');
-              },
-              class: 'test',
-            });
-          },
+          handle,
         },
         {
           label: '删除',
diff --git a/hx-op/src/view/organizationManage/enterpriseManage/index.vue b/hx-op/src/view/organizationManage/enterpriseManage/index.vue
index 16e8124..b131327 100644
--- a/hx-op/src/view/organizationManage/enterpriseManage/index.vue
+++ b/hx-op/src/view/organizationManage/enterpriseManage/index.vue
@@ -9,36 +9,33 @@
       <ns-button type="primary" @click="operateForm" :disabled="!formDisabled">确定</ns-button>
     </template>
   </ns-drawer>
-  <ns-drawer
-    :width="600"
-    :visible="borderVisible"
-    :body-style="{ paddingBottom: '80px' }"
-    :footer-style="{ textAlign: 'right' }"
-    destroyOnClose
-    @close="onClose">
+  <ns-drawer v-bind="boundaryDrawer">
     <ns-button type="primary" @click="borderAdd">新增</ns-button>
-    <ns-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAddSon"
+    <ns-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAdd"
       >新增子集</ns-button
     >
-    <a-directory-tree @select="handleSelect" multiple :tree-data="treeData">
-      <template #title="{ title, key }">
-        {{ title }}
-        <ns-button type="link" @click="editTree(title, key)">编辑</ns-button>
-        <ns-button type="link" danger @click="deleteTree(title, key)">删除</ns-button>
+    <a-tree v-if="linkTree?.length" v-bind="boundaryTree" class="boundaryTree">
+      <template #title="data">
+        <span>{{ data.orgInfo.orgName }}</span>
+        <!-- <ns-button type="link" danger >删除</ns-button> -->
+
+        <span v-if="data.orgInfo.orgId !== currentBoundaryRecord.orgId" class="nodeDelete">
+          <DeleteOutlined @click="deleteTree(data)"
+        /></span>
       </template>
-    </a-directory-tree>
+    </a-tree>
   </ns-drawer>
 
   <ns-drawer v-bind="serverDrawer">
-    <ns-input-search
+    <!-- <ns-input-search
       placeholder="请选择开通模块"
       v-model:value="searchValue"
       style="margin-bottom: 8px"
-      @search="onSearch" />
+      @search="onSearch" /> -->
     <a-tree v-if="treeData?.length" v-model:checkedKeys="checkedKeys" v-bind="serverTree" />
   </ns-drawer>
 
-  <TreeAdd ref="treeAdd" />
+  <TreeAdd ref="treeAdd" @ok="handleOk" />
 </template>
 <script lang="ts" setup>
   import { Modal } from 'ant-design-vue';
@@ -46,10 +43,10 @@
   import { http } from '/nerv-lib/util/http';
   import { cloneDeep } from 'lodash-es';
   import TreeAdd from './TreeAdd.vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { DeleteOutlined } from '@ant-design/icons-vue';
   import { h } from 'vue';
   import { formConfig } from './config';
-  import { NsMessage } from '/nerv-lib/component';
+  import { NsMessage, NsModal } from '/nerv-lib/component';
   import { mockData, treeData } from './mock';
   import { enterPrise } from '/@/api/origanizemanage';
   import { tableConfig as insertConfig } from './config';
@@ -69,14 +66,31 @@
   const serviceVisible = ref(false);
   const treeAddVisible = ref(false);
   const formSchema = formConfig;
+  const currentServerRecord = ref({});
+  const currentBoundaryRecord = ref({});
+  const currentSelectBoundaryNode = ref({});
+  const linkTree = ref([]);
+  const totalCheckedKeys = ref([]);
   const opType = ref<string>('add');
   const calMap = {
     add: enterPrise.save,
     edit: enterPrise.edit,
+    serverAdd: enterPrise.orgPermission,
   };
   const comApi = computed(() => {
     return calMap[opType.value as keyof typeof calMap];
   });
+
+  // 公共请求方法，包含tablereload，drawerclose
+  const fetch = (params, isReload = true) => {
+    http.post(comApi.value, params).then(() => {
+      NsMessage.success('操作成功');
+      onClose();
+      isReload && mainRef.value?.nsTableRef.reload();
+    });
+  };
+
+  // 表格配置
   const tableConfig = computed(() => {
     return insertConfig({
       visible,
@@ -87,21 +101,31 @@
       serviceVisible,
       server: {
         getTree,
+        currentServerRecord,
+        getPermissionData,
+      },
+      boundary: {
+        getBoundaryTree,
+        currentBoundaryRecord,
       },
     });
   });
 
+  // 随机组织id
   const getOrgRandomCode = () => {
     http.post(enterPrise.getCode).then((res) => {
       formData.value.orgCode = res.data;
     });
   };
-  getOrgRandomCode();
+  // getOrgRandomCode();
 
+  // 公共关闭及后续处理逻辑
   const onClose = () => {
     visible.value = false;
     borderVisible.value = false;
     serviceVisible.value = false;
+    checkedKeys.value = [];
+    linkTree.value = [];
   };
 
   // 企业表单drawer
@@ -113,6 +137,7 @@
     onClose: onClose,
   });
 
+  // 表单form配置
   const formDisabled = computed(() => {
     return formRef.value?.validateResult;
   });
@@ -121,62 +146,138 @@
   const operateForm = () => {
     formRef.value?.triggerSubmit().then((res) => {
       console.log(formData.value, 'formData.value');
-      http.post(comApi.value, res).then(() => {
-        NsMessage.success('操作成功');
-        visible.value = false;
-        mainRef.value?.nsTableRef.reload();
-      });
+      fetch(res);
     });
   };
 
   // 服务操作逻辑区域
   const serverOK = () => {
-    serviceVisible.value = false;
+    const params = {
+      orgId: currentServerRecord.value?.orgId,
+      orgName: currentServerRecord.value?.orgName,
+      permissionVoList: totalCheckedKeys.value,
+    };
+    fetch(params, false);
   };
   const ServiceSelect = (selectedKeys: any, info: any) => {
     console.log(selectedKeys, 'selectedKeys');
     console.log(info, 'info');
   };
 
+  // 服务树配置
   const serverTree = ref({
     checkable: true,
+    selectable: false,
     onSelect: ServiceSelect,
     defaultExpandAll: true,
     treeData: treeData,
     fieldNames: { children: 'menus', title: 'label', key: 'code' },
+    onCheck: (checked, { halfCheckedKeys }) => {
+      const result = checked.map((item) => {
+        return {
+          halfCheck: false,
+          permissionId: item,
+        };
+      });
+      const finalResult = halfCheckedKeys
+        .map((item) => {
+          return {
+            halfCheck: true,
+            permissionId: item,
+          };
+        })
+        .concat(result);
+      totalCheckedKeys.value = finalResult;
+    },
   });
 
+  // 获取服务权限树
   const getTree = (params) => {
-    http.post(enterPrise.permissionTree, params).then((res) => {
-      treeData.value = res.data.data;
+    return http.post(enterPrise.permissionTree, params).then((res) => {
+      treeData.value = res.data?.data;
+    });
+  };
+  getTree({});
+
+  // 获取当前企业拥有的权限数据
+  const getPermissionData = (params) => {
+    http.post(enterPrise.queryOrgPermission, params).then((res) => {
+      checkedKeys.value = res.data
+        ?.filter((item) => !item.halfCheck)
+        .map((item) => {
+          return item.permissionId;
+        });
     });
   };
 
   // 开通服务模块drawer
   const serverDrawer = ref({
-    width: '450',
+    width: 520,
     visible: serviceVisible,
     footerStyle: { textAlign: 'right' },
+    destroyOnClose: true,
     ok: serverOK,
+    onClose: onClose,
     cancel: onClose,
   });
 
-  // drawer form
-  const opMap: any = {
-    type: 'add',
-    fuc: () => {},
-    record: {},
-  };
-
-  watch(checkedKeys, () => {
-    console.log('checkedKeys', checkedKeys.value);
+  // 边界drawer配置
+  const boundaryDrawer = ref({
+    width: 520,
+    visible: borderVisible,
+    footerStyle: { textAlign: 'right' },
+    destroyOnClose: true,
+    ok: onClose,
+    onClose,
+    cancel: onClose,
   });
 
   const handleSelect = (selectedKeys: any, info: any) => {
-    console.log(selectedKeys, 'selectedKeys');
-    console.log(info, 'info');
+    currentSelectBoundaryNode.value = info;
   };
 
+  // 获取边界树
+  const getBoundaryTree = (params) => {
+    http.post(enterPrise.queryOrgTree, params).then((res) => {
+      const otherOrg = res.data[0].listOrg;
+      linkTree.value = res.data;
+      otherOrg?.map((item) => {
+        linkTree.value.push({ orgInfo: item } as never);
+      });
+    });
+  };
+
+  // 边界树配置
+  const boundaryTree = ref({
+    defaultExpandAll: true,
+    onSelect: handleSelect,
+    treeData: linkTree,
+    // blockNode: true,
+  });
+
+  // 新增边界
+  const handleOk = (res) => {
+    const params = {
+      ...res,
+      linkOrgVoList: [
+        {
+          linkOrgId: res.orgId,
+          point: res.point,
+          type: 1, //1子集 2 关联
+        },
+      ],
+
+      orgId: currentBoundaryRecord.value.orgId || '',
+    };
+    http.post(enterPrise.link, params).then(() => {
+      treeAdd.value?.toggle();
+      NsMessage.success('操作成功');
+      getBoundaryTree({
+        orgId: currentBoundaryRecord.value.orgId,
+        orgName: currentBoundaryRecord.value.orgName,
+      });
+    });
+  };
   const borderAdd = () => {
     treeAddVisible.value = true;
     treeAdd.value?.toggle();
@@ -191,14 +292,19 @@
     console.log(key, 'key');
   };
 
-  const deleteTree = (title: any, key: any) => {
-    console.log(title, 'title');
-    console.log(key, 'key');
-    Modal.confirm({
+  const deleteTree = (node: any) => {
+    console.log(node, 'node');
+
+    NsModal.confirm({
       title: '是否确定删除',
-      icon: createVNode(ExclamationCircleOutlined),
       content: createVNode('div', { style: 'color:red;' }, ''),
       onOk() {
+        const flag = !!node?.children?.length;
+
+        if (flag) {
+          NsMessage.error('请先删除子集');
+          return;
+        }
         // http
         //   .post('/api/parking_merchant/objs/gateInfo/delete', {
         //     uuid: record.uuid,
@@ -218,3 +324,21 @@
     console.log(searchValue.value);
   };
 </script>
+<style lang="less" scoped>
+  .nodeDelete {
+    // display: none;
+    margin-left: 40px;
+  }
+  .boundaryTree {
+    background-color: red !important;
+  }
+  :deep(.ant-tree) {
+    background-color: red !important;
+
+    // &:hover {
+    .nodeDelete {
+      display: block;
+    }
+    // }
+  }
+</style>
diff --git a/lib/component/drawer/drawer.vue b/lib/component/drawer/drawer.vue
index e902b32..a01a731 100644
--- a/lib/component/drawer/drawer.vue
+++ b/lib/component/drawer/drawer.vue
@@ -29,6 +29,7 @@
       console.log(props, getCurrentInstance());
 
       const getBindValue = computed(() => ({
+        getContainer: (triggerNode: any) => triggerNode.parentNode,
         ...attrs,
         ...props,
       }));