From 08972bfbfb6849eaf704dc9a1eebe13c02f03413 Mon Sep 17 00:00:00 2001
From: lushihan <2813036942@qq.com>
Date: Thu, 13 Jun 2024 17:22:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=85=A7=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lightingManage/indexs.vue                 | 3373 ++++++++---------
 1 file changed, 1496 insertions(+), 1877 deletions(-)

diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index 5f06d89..6333ddf 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -1,13 +1,9 @@
 <template>
-  <div class="lighting-img">
+  <div class="lighting-img" style="overflow: hidden">
     <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>
@@ -18,15 +14,8 @@
       <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"
+    :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }" :closable="false" id="Odrawer">
     <div>
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane key="1" tab="控制面板">
@@ -35,49 +24,28 @@
             <div class="lightarea">
               <div class="lightareatab"></div>
               <span class="lightareatext"> 照明区域 </span>
-              <button
-                class="plan"
-                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
-                @click="togglePlan">
-                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
+              <button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
+                {{ isPlanEnabled ? "计划启用" : "计划禁用" }}
               </button>
             </div>
             <!-- 照明区域按钮部分 -->
             <div class="area">
               <template v-if="!showAllButtonsarea">
-                <button
-                  v-for="(button, index) in buttons1"
-                  :key="index"
-                  :class="{ btn: true, selected: button === selectedButton }"
-                  :style="{
-                    'pointer-events': isPlanEnabled ? 'auto' : 'none',
-                    opacity: isPlanEnabled ? 1 : 0.5,
-                  }"
-                  @click="selectButton(button)">
+                <button v-for="(button, index) in buttons1" :key="index"
+                  :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
                   {{ button.label }}
                 </button>
                 <div style="margin-top: 10px">
-                  <span @click="showAllButtonsarea = true" class="openzm"
-                    ><down-outlined />展开</span
-                  >
+                  <span @click="showAllButtonsarea = true" class="openzm"><down-outlined />展开</span>
                 </div>
               </template>
               <template v-else>
-                <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,
-                  }"
-                  @click="selectButton(button)">
+                <button v-for="(button, index) in buttons" :key="index"
+                  :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
                   {{ button.label }}
                 </button>
                 <div style="margin-top: 10px">
-                  <span @click="showAllButtonsarea = false" class="openzm"
-                    ><up-outlined />回缩</span
-                  >
+                  <span @click="showAllButtonsarea = false" class="openzm"><up-outlined />回缩</span>
                 </div>
               </template>
             </div>
@@ -88,35 +56,27 @@
               <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 ? '启用面板' : '禁用面板' }}
+                  {{ isPlanEnabled2 ? "启用面板" : "禁用面板" }}
                 </button>
                 <!-- <button >启用面板</button> -->
-                <a-switch
-                  v-model:checked="selectAllCheckbox"
-                  :class="{
-                    'blue-background': selectAllCheckbox,
-                    'grey-background': !selectAllCheckbox,
-                  }"
-                  @change="toggleAllSelection" />
-                <button class="both" @click="selectAll">多选</button>
+                <a-switch v-model:checked="selectAllCheckbox" :class="{
+                  'blue-background': selectAllCheckbox,
+                  'grey-background': !selectAllCheckbox,
+                }" @change="toggleAllSelection" />
+                <button @click="allbtn1" class="allbtn">全选</button>
+                <!-- <button v-if="!allbtnB" class="allbtn"></button> -->
+                <button class="both" @click="selectAll">
+                  {{ isAllchoose ? "多选" : "单选" }}
+                </button>
               </div>
             </div>
 
             <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"
+                  :class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)">
                   {{ button2.label }}
                 </button>
                 <div style="margin-top: 10px">
@@ -124,11 +84,8 @@
                 </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">
@@ -145,11 +102,8 @@
             </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>
@@ -162,11 +116,8 @@
             </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>
@@ -190,16 +141,11 @@
             <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="{
-              background: 'rgba(0, 0, 0, 0.9)',
-              opacity: 0.8,
+          <a-modal width="500px" height="792px" v-model:visible="executevisible" :closable="false" okText="执行"
+            @ok="handleOk2" :mask="false" :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
+              boxShadow: '-2px 0px 10px  rgba(217, 217, 217, 0.5)',
               height: '792px',
               maxHeight: '792px',
               boxSizing: 'borderBox',
@@ -210,420 +156,228 @@
               <div style="width: 100%; text-align: center">
                 <span class="text-change">变更内容</span>
               </div>
-              <div class="journal" style="margin-top: 20px">
+              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id">
                 <div class="imgText">
-                  <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
+                  <div class="zjzm">
+                    <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
+                    <span style="
+                        font-size: 20px;
+                        font-weight: 500;
                         color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >自动</span
-                    >
+                      ">{{ item.name }}</span>
                   </div>
-                  <div>
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
-                    <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
-                    <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="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
-                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                    >站厅照明 1区</span
-                  >
+                  <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
                 </div>
 
                 <div class="gird22">
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
-                    <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
-                    <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="/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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       控制模式
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.manual }}</span>
                     <img src="/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;
+                        margin-left: 2px;
+                      ">{{ item.automatic }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       亮度
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.brightness }}</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
-                    >
+                    <span style="
+                        color: rgba(243, 97, 99, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                      ">{{ item.brightness2 }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       控制场景
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.manual2 }}</span>
                     <img src="/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;
+                        margin-left: 2px;
+                      ">{{ item.automatic2 }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       色温
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.brightness3 }}</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
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                      ">{{ item.brightness4 }}</span>
                   </div>
                 </div>
               </div>
-              <div class="excubtn">
-                <button @click="excuModal" class="excuno">取消</button>
-                <button @click="handleOk" class="excuok">执行</button>
-              </div>
+              <!-- <div class="excubtn">
+                <button class="flushed" @click="refresh">刷新</button>
+                <button class="execute" @click="showModal">执行</button>
+              </div> -->
             </div>
           </a-modal>
         </a-tab-pane>
         <a-tab-pane key="2" tab="计划列表" force-render>
-          <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
-            <template #bodyCell="{ column, text }">
-              <template v-if="column.dataIndex === 'name'">
-                <div class="editable-cell">
-                  <span @click="showInfo(text)">
-                    {{ text || ' ' }}
-                  </span>
-                </div>
-              </template>
-
-              <template v-else-if="column.dataIndex === 'operation'">
-                <a class="tabreboot">重启</a>
-                <a class="tabdelete">删除</a>
-              </template>
-            </template>
-          </a-table>
           <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="{
-              background: 'rgba(0, 0, 0, 0.9)',
-              opacity: 0.8,
+          <table class="custom-table table1" >
+            <thead >
+              <tr>
+                <th>序号</th>
+                <th>执行时间</th>
+                <th>计划名称</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in dataSource" :key="index" @click="handleRowClick(row.key, row.data)">
+                <td>{{ row.key }}</td>
+                <td>{{ row.data }}</td>
+                <td>{{ row.planname }}</td>
+
+                <td v-if="row.status === '待执行'">
+                  <button style="
+                      font-size: 12px;
+                      background: rgba(57, 215, 187, 0.1);
+                      color: rgba(57, 215, 187, 1);
+                      border: 1px solid rgba(57, 215, 187, 1);
+                    ">
+                    {{ row.status }}
+                  </button>
+                </td>
+                <td v-if="row.status !== '待执行'">
+                  <button style="
+                      font-size: 12px;
+                      background: rgba(243, 97, 99, 0.1);
+                      border: 1px solid rgba(243, 97, 99, 1);
+                      color: rgba(243, 97, 99, 1);
+                    ">
+                    {{ row.status }}
+                  </button>
+                </td>
+                <td>
+                  <span class="tabreboot">重启</span>
+                  <span class="tabdelete">删除</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal v-model:visible="addvisible" width="500px" height="792px" :closable="false" :footer="null"
+            :mask="false" :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
               height: '792px',
               maxHeight: '792px',
               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>
+                <div class="div-operation"></div>
+                <span class="text-operation">计划库</span>
+              </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"
+              <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" />
+                :style="{ color: 'rgba(255,255,255,1)' }" @search="handleSearch" />
             </div>
-            <button class="addok" @click="addhandleOk">确定</button>
+            <!-- <button class="addok" @click="addhandleOk">确定</button> -->
           </a-modal>
         </a-tab-pane>
         <a-tab-pane key="3" tab="日志">
@@ -637,10 +391,7 @@
               </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>
@@ -648,17 +399,10 @@
               </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="{
-              background: 'rgba(0, 0, 0, 0.9)',
+          <a-modal width="500px" height="792px" v-model:visible="logModalVisible" :closable="false"
+          @cancel="closeLogModal" :footer="null"
+            :mask="false" :bodyStyle="{
+              background: 'rgba(0, 0, 0, 1)',
               opacity: 0.8,
               height: '792px',
               maxHeight: '792px',
@@ -671,359 +415,150 @@
                 <div class="div-operation"></div>
                 <span class="text-operation">操作日志</span>
               </div>
-              <div class="journal" style="margin-top: 20px">
+              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" key="item.id">
                 <div class="imgText">
-                  <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
+                  <div class="zjzm">
+                    <img src="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
+                    <span style="
+                        font-size: 20px;
+                        font-weight: 500;
                         color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >自动</span
-                    >
+                      ">{{ item.name }}</span>
                   </div>
-                  <div>
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
-                    <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
-                    <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="/asset/image//bulbLogo/22549.png" alt="" />&nbsp;
-                  <span style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                    >站厅照明 1区</span
-                  >
+                  <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
                 </div>
 
                 <div class="gird22">
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制模式
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      亮度
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
-                    <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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      控制场景
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
-                    <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="
-                        width: 68px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                      ">
-                      色温
-                    </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
-                    <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="/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="
-                        width: 96px;
-                        height: 40px;
-                        opacity: 0.7;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
-                        );
-                        border: none;
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       控制模式
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.manual }}</span>
                     <img src="/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;
+                        margin-left: 2px;
+                      ">{{ item.automatic }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       亮度
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >100lux</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.brightness }}</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
-                    >
+                    <span style="
+                        color: rgba(243, 97, 99, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                      ">{{ item.brightness2 }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       控制场景
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >手动</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.manual2 }}</span>
                     <img src="/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;
+                        margin-left: 2px;
+                      ">{{ item.automatic2 }}</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
-                        opacity: 0.7;
                         border-radius: 4px;
                         background: linear-gradient(
                           180deg,
-                          rgba(86, 221, 253, 1) 0%,
-                          rgba(25, 176, 255, 1) 100%
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
                         );
-                        border: none;
+                        border: 1px solid rgba(95, 154, 251, 1);
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
                       ">
                       色温
                     </button>
-                    <span style="color: rgba(255, 255, 255, 1); font-size: 14px; font-weight: 400"
-                      >4000k</span
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                        margin-right: 2px;
+                      ">{{ item.brightness3 }}</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
-                    >
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 2px;
+                      ">{{ item.brightness4 }}</span>
                   </div>
                 </div>
               </div>
@@ -1049,1188 +584,1272 @@
 </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: '/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 },
-  ]);
+import { ref, computed, onMounted } from "vue";
+import { RightOutlined, DownOutlined, UpOutlined } from "@ant-design/icons-vue";
+const toggleDrawer = () => {
+  visible.value = !visible.value;
+};
+const handleOk2 = (e: MouseEvent) => {
+  console.log(e);
+  console.log('ok2');
+  executevisible.value = false;
+};
+const cxlist = ref([
+  {
+    id: "1",
+    name: "站厅照明  1区",
+    manual: "手动",
+    automatic: "自动",
+    brightness: "100lux",
+    brightness2: "30lux",
+    manual2: "手动",
+    automatic2: "自动",
+    brightness3: "4000k",
+    brightness4: "3800k",
+  },
+  {
+    id: "2",
+    name: "站厅照明  2区",
+    manual: "手动",
+    automatic: "自动",
+    brightness: "100lux",
+    brightness2: "30lux",
+    manual2: "手动",
+    automatic2: "自动",
+    brightness3: "4000k",
+    brightness4: "3800k",
+  },
+  {
+    id: "3",
+    name: "站厅照明  3区",
+    manual: "手动",
+    automatic: "自动",
+    brightness: "100lux",
+    brightness2: "30lux",
+    manual2: "手动",
+    automatic2: "自动",
+    brightness3: "4000k",
+    brightness4: "3800k",
+  },
+]);
 
-  // 照明区域按钮单选
-  const isPlanEnabled = ref(true); // 初始状态是启用
-  const togglePlan = () => {
-    isPlanEnabled.value = !isPlanEnabled.value;
-  };
-  const showAllButtonsarea = ref(false);
+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 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;
+// 照明区域按钮单选
+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;
+  });
+};
+
+// 照明回路按钮
+const isAllchoose = ref(true);
+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 allbtnB = ref(false);
+
+const selectAll = () => {
+  singleSelection.value = !singleSelection.value;
+  isAllchoose.value = !isAllchoose.value;
+  if (singleSelection.value) {
+    // 单选
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+      // allbtnB.value = false;
+    });
+  } else {
+    // 多选
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+      // allbtnB.value = true;
     });
-  };
-
-  // 照明回路按钮
-  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',
+  selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
+};
+const allbtn1 = () => {
+  buttons2.value.forEach((button) => {
+    button.selected = true;
+  });
+  selectAllCheckbox.value = true;
+};
+const toggleAllSelection = () => {
+  if (selectAllCheckbox.value) {
+    // 如果全选开关被打开，实现多选模式
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+    });
+    singleSelection.value = false;
+  } else {
+    // 如果全选开关被关闭，实现单选模式
+    buttons2.value.forEach((button) => {
+      button.selected = false;
+    });
+    singleSelection.value = true;
+  }
+};
 
-      title: '检修模式',
-    },
-    {
-      key: '3',
+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;
+};
 
-      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;
-  };
+// 控制模式按钮
+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 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 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 targetKeys = ref<string[]>([]);
+const filterOption = (inputValue: string, option: MockData) => {
+  console.log( option.description);
+  
+  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;
+// };
+
+//撤销
+const delbtn = (id: any) => {
+  console.log(id);
+  cxlist.value.pop(id);
+};
 </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);
+:global(.ant-drawer-content) {
+  background-color: rgba(0, 0, 0, 1);
+  opacity: 0.8;
+}
+
+:global(.ant-modal-content) {
+  background-color: rgba(0, 0, 0, 1);
+  opacity: 0.8;
+}
+:deep(.ant-transfer-list){
+  width: 230px;
+  height: 450px;
+}
+:deep(.ant-transfer-list-header){
+  background-color: rgba(0, 0, 0, 1);
+  color: rgba(255, 255, 255, 1);
+}
+
+.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;
+}
+
+.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: 83px;
+}
+
+.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;
+}
+
+.allbtn {
+  border: 0;
+  width: 40px;
+  color: rgba(255, 255, 255, 1);
+  background-color: transparent;
+}
+
+.blue-background.ant-switch-checked {
+  background-color: linear-gradient(180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%) !important;
+}
+
+.grey-background.ant-switch {
+  background-color: grey !important;
+}
+
+.blue-background.ant-switch-checked .ant-switch-handle {
+  background-color: linear-gradient(180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%) !important;
+}
+
+.grey-background.ant-switch .ant-switch-handle {
+  background-color: grey !important;
+}
+
+p {
+  color: 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-box {
+  width: 100%;
+  height: 100%;
+}
+
+.lighting-img-box img {
+  width: 100%;
+  height: calc(100% - 79px);
+  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;
   }
 
-  .custom-table th,
-  .custom-table td {
-    border: 1px solid rgba(163, 192, 243, 1);
-    text-align: left;
-    padding: 8px;
-    text-align: center;
+  .editable-cell-text-wrapper {
+    padding: 5px 24px 5px 5px;
   }
 
-  .custom-table tr:hover {
-    background-color: rgba(67, 136, 251, 1);
+  .editable-cell-icon,
+  .editable-cell-icon-check {
+    position: absolute;
+    right: 0;
+    width: 20px;
     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);
+  .editable-cell-icon {
+    margin-top: 4px;
+    display: none;
   }
 
-  .lightarea,
-  .circuitarea,
-  .controlarea,
-  .controlscenearea,
-  .lightparametersarea {
-    width: 100%;
-    margin-top: 20px;
+  .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;
+  background-color: rgba(0, 0, 0);
+  border-radius: 12px;
+  box-shadow: -2px 0px 10px rgba(217, 217, 217, 0.5);
+}
+
+.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;
+  justify-content: space-between;
+
+  .ztzm {
     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;
+  .cxbtn {
+    // width:80px;
     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 {
+    border-radius: 6px;
     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 {
-      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;
-  }
-
-  .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;
-  }
+    background: linear-gradient(180deg,
+        rgba(255, 187, 0, 1) 0%,
+        rgba(255, 112, 3, 1) 91.21%,
+        rgba(255, 129, 3, 1) 100%);
+  }
+}
+
+: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;
+}
 </style>