From 33eb153885f45bc016283e3ab41fd91c679b3922 Mon Sep 17 00:00:00 2001
From: chenpingsen <chenpingsen>
Date: Mon, 8 Jul 2024 10:34:43 +0800
Subject: [PATCH] =?UTF-8?q?add:=E7=85=A7=E6=98=8E=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9/=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../equipmentControl/lightingManage/indexs.vue     | 2236 +-------------------
 .../equipmentControl/lightingManage/indexs1.vue    | 2197 +++++++++++++++++++
 .../view/equipmentControl/lightingManage/light.vue |  135 ++
 3 files changed, 2392 insertions(+), 2176 deletions(-)
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
 create mode 100644 hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue

diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index e1840d1..d4442e8 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -1,2197 +1,81 @@
 <template>
-  <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">
-          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
-        </div>
-      </div>
-    </div>
-    <div class="btn-box">
-      <button class="F1">1F</button><br />
-      <button class="F2">2F</button><br />
-      <button class="platform">站台</button>
-    </div>
-    <div class="light-tag">
-      <div class="light-tag-tit">
-        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
-        <span
-          class="tagtext"
-          :style="{
-            fontSize: '16px',
-            fontWeight: 700,
-            color: 'rgba(255, 255, 255, 1)',
-          }"
-          >站厅照明 1区</span
-        >
-        <button
-          :style="{
-            width: ' 50px',
-            height: '24px',
-            opacity: 1,
-            background: 'rgba(57, 215, 187, 0.1)',
-            border: '1px solid rgba(57, 215, 187, 1)',
-            fontSize: '12px',
-            fontWeight: 400,
-            lineHeight: ' 17.38px',
-            color: 'rgba(57, 215, 187, 1)',
-            marginLeft: '180px',
-          }"
-          >正常</button
-        >
-      </div>
-      <div class="light-tag-box">
-        <img src="/asset/image//bulbLogo/22496.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
-          >控制模式</span
-        >
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginRight: '20px',
-          }"
-          >自动</span
-        >
-        <img src="/asset/image//bulbLogo/22546.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginLeft: '20px',
-          }"
-          >1000lux</span
-        >
-        <img src="/asset/image//bulbLogo/22554.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
-          >控制场景</span
-        >
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginRight: '20px',
-          }"
-          >舒适</span
-        >
-        <img src="/asset/image//bulbLogo/22553.png" alt="" />
-        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
-        <span
-          :style="{
-            color: 'rgba(255, 255, 255, 1)',
-            fontSize: '16px',
-            fontWeight: '700',
-            marginLeft: '20px',
-          }"
-          >4200k</span
-        >
-      </div>
-    </div>
-  </div>
-  <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"
-    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
-    <div>
-      <a-tabs v-model:activeKey="activeKey">
-        <a-tab-pane key="1" tab="控制面板">
-          <!-- 照明区域 -->
-          <div>
-            <div class="lightarea">
-              <div class="lightareatab"></div>
-              <span class="lightareatext"> 照明区域 </span>
-              <button
-                class="plan"
-                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
-                @click="togglePlan">
-                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
-              </button>
+    <div class="lighting-box">
+        <div class="lighting-img-box">
+            <!-- 左上角，区域切换 -->
+            <div class="btn-box">
+                <button class="btn-item">1F</button>
+                <button class="btn-item">2F</button>
+                <button class="btn-item">站台</button>
             </div>
-            <!-- 照明区域按钮部分 -->
+            <!-- 楼层区域 -->
             <div class="area">
-              <template v-if="!showAllButtonsarea">
-                <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
-                  >
-                </div>
-              </template>
-              <template v-else>
-                <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
-                  >
+                <div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
+                    </div>
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
+                    </div>
                 </div>
-              </template>
-            </div>
-          </div>
-          <!-- 照明回路部分 -->
-          <div>
-            <div class="circuitarea" v-if="selectedButton">
-              <div class="circuittab"></div>
-              <span class="circuittext">照明回路</span>
-              <div class="btn2">
-                <button
-                  class="openplan"
-                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
-                  @click="togglePlan2">
-                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
-                </button>
-                <a-switch
-                  v-model:checked="selectAllCheckbox"
-                  :class="{
-                    'blue-background': selectAllCheckbox,
-                    'grey-background': !selectAllCheckbox,
-                  }"
-                  @change="toggleAllSelection" />
-                <button @click="allbtn1" 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"
-                  :class="{ btn: true, selected: button2.selected }"
-                  class="zmhlbtn"
-                  @click="toggleSelection(button2)">
-                  <stop-outlined v-if="button2.zmhld" />
-                  {{ button2.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
+                <div class="area-item area2" @click="getArea(2)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
+                    </div>
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
+                    </div>
                 </div>
-              </template>
-              <template v-else>
-                <button
-                  v-for="(button2, index) in buttons2"
-                  :key="index"
-                  :class="{ btn: true, selected: button2.selected }"
-                  @click="toggleSelection(button2)">
-                  {{ button2.label }}
-                </button>
-                <div style="margin-top: 10px">
-                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
+                <div class="area-item area3" @click="getArea(3)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
+                    </div>
                 </div>
-              </template>
-            </div>
-          </div>
-          <!-- 控制模式 -->
-          <div>
-            <div class="controlarea" v-show="showControlMode">
-              <div class="controltab"></div>
-              <span class="controltext"> 控制模式 </span>
-            </div>
-            <!-- 控制模式按钮部分 -->
-            <div class="controlmodebtnarea" v-show="showControlMode">
-              <button
-                v-for="(button3, index) in controlbutton"
-                :key="index"
-                :class="{ btn: true, selected: button3.label === selectedButton3 }"
-                @click="selectButton3(button3)">
-                {{ button3.label }}
-              </button>
-            </div>
-          </div>
-          <!-- 控制场景 -->
-          <div>
-            <div class="controlscenearea" v-show="showControlScene">
-              <div class="controlscenetab"></div>
-              <span class="controlscenetext"> 控制场景 </span>
-            </div>
-            <!-- 控制场景按钮部分 -->
-            <div class="controlscenebtnarea" v-show="showControlScene">
-              <button
-                v-for="(button4, index) in controlscenebuttons"
-                :key="index"
-                :class="{ btn: true, selected: button4.label === selectedButton4 }"
-                @click="selectButton4(button4)">
-                {{ button4.label }}
-              </button>
-            </div>
-          </div>
-          <!-- 灯具参数 -->
-          <div>
-            <div class="lightparametersarea" v-if="selectedButton4">
-              <div class="lightparameterstab"></div>
-              <span class="lightparameterstext"> 灯具参数 </span>
-            </div>
-            <div class="lightparameterstextarea" v-if="selectedButton4">
-              <table class="custom-table table1">
-                <thead>
-                  <tr :style="{ background: 'rgba(35,45,69)' }">
-                    <th>开启数量</th>
-                    <th>亮度(lux)</th>
-                    <th>色温</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="(row, index) in lightSource"
-                    :key="index"
-                    @click="handleRowClick(row.num)"
-                    :style="{ height: '50px' }">
-                    <td>{{ row.num }}</td>
-                    <td>{{ row.light }}</td>
-                    <td>{{ row.tempruter }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div class="bottom">
-            <button class="flushed" @click="refresh">刷新</button>
-            <button class="execute" @click="showModal">执行</button>
-          </div>
-          <a-modal
-            :v-if="cxlist.length === 0"
-            v-model:visible="executevisible"
-            width="500px"
-            height="792px"
-            okText="执行"
-            :closable="false"
-            @ok="handleOk2"
-            :mask="false"
-            :bodyStyle="{
-              opacity: 1,
-              background: ' rgba(0,0,0)',
-              color: 'rgba(255,83,0)',
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div :v-if="cxlist.length === 0" style="height: 792px">
-              <div>
-                <div class="div-operation"></div>
-                <span class="text-operation">变更内容 </span>
-              </div>
-              <div class="jbox" v-for="item in cxlist" :key="item.id">
-                <div class="journal" style="margin-top: 20px">
-                  <div class="imgText">
-                    <div class="zjzm">
-                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-                      <span
-                        class="titletext"
-                        style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                        >{{ item.name }}</span
-                      >
+                <div class="area-item area4" @click="getArea(4)">
+                    <div class="light-group">
+                        <div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
                     </div>
-                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
-                  </div>
-                  <div class="control-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >自动</span
-                    >
-                  </div>
-                  <div class="light-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >100lux</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(243, 97, 99, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >30lux</span
-                    >
-                  </div>
-                  <div class="controlarea-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >手动</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >自动</span
-                    >
-                  </div>
-                  <div class="temp-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >4000k</span
-                    >
-                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                    <span
-                      style="
-                        color: rgba(255, 255, 255, 1);
-                        font-size: 14px;
-                        font-weight: 400;
-                        margin-left: 8px;
-                      "
-                      >3800k</span
-                    >
-                  </div>
                 </div>
-              </div>
             </div>
-          </a-modal>
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="计划列表" force-render>
-          <div class="divadd">
-            <button class="add" @click="addModal">添加</button>
-          </div>
-          <table class="custom-table table1">
-            <thead>
-              <tr :style="{ background: 'rgba(35,45,69)' }">
-                <th>序号</th>
-                <th>执行时间</th>
-                <th>计划名称</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(row, index) in dataSource" :key="index">
-                <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>
-                  <button class="tabreboot" @click="handlerefClick1">重启</button>
-                  <button class="tabdelete">删除</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <a-modal
-            v-model:visible="addvisible"
-            width="500px"
-            height="792px"
-            :closable="false"
-            :mask="false"
-            :bodyStyle="{
-              opacity: 1,
-              background: ' rgba(0,0,0)',
-              color: 'rgba(255,83,0)',
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100vh',
-              maxHeight: '100vh',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div>
-              <div class="div-operation"></div>
-              <span class="text-operation">计划库</span>
+            <!-- 照明设备 -->
+            <div class="lights">
+                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
+                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
+                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
+                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
+                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
+                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
+                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
             </div>
-            <div style="margin-top: 20px">
-              <a-transfer
-                v-model:target-keys="targetKeys"
-                :data-source="mockData"
-                show-search
-                :filter-option="filterOption"
-                :render="(item) => item.title"
-                @change="handleChange"
-                :style="{ color: 'rgba(255,255,255,1)' }"
-                @search="handleSearch"
-                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
-            </div>
-          </a-modal>
-        </a-tab-pane>
-        <a-tab-pane key="3" tab="日志">
-          <table class="custom-table table1">
-            <thead>
-              <tr :style="{ background: 'rgba(35,45,69)' }">
-                <th>序号</th>
-                <th>执行时间</th>
-                <th>操作内容</th>
-                <th>操作人</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="(row, index) in dataSource1"
-                :key="index"
-                @click="handleRowClick(row.key)"
-                :class="row.key === trindex ? 'istrindex' : ''">
-                <td>{{ row.key }}</td>
-                <td>{{ row.data }}</td>
-                <td>{{ row.planname }}</td>
-                <td>{{ row.status }}</td>
-              </tr>
-            </tbody>
-          </table>
-          <a-modal
-            width="500px"
-            v-model:visible="logModalVisible"
-            :closable="false"
-            @cancel="closeLogModal"
-            :footer="null"
-            :mask="false"
-            :bodyStyle="{
-              marginLeft: 200,
-              background: 'rgba(0, 0, 0, 1)',
-              opacity: 0.8,
-              boxSizing: 'borderBox',
-              display: 'flex',
-              flexDirection: 'column',
-              position: 'fixed',
-              right: '496px',
-              top: '0',
-            }">
-            <div style="height: calc(100vh - 96px)">
-              <div>
-                <div class="div-operation"></div>
-                <span class="text-operation">操作日志</span>
-              </div>
-              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" :key="item.id">
-                <div class="imgText">
-                  <div class="zjzm">
-                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-                    <span
-                      style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                      >{{ item.name }}</span
-                    >
-                  </div>
-                </div>
-
-                <div class="gird22">
-                  <div class="control-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ 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;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >{{ item.automatic }}</span
-                    >
-                  </div>
-                  <div class="light-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ 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;
-                        margin-left: 8px;
-                      "
-                      >{{ item.brightness2 }}</span
-                    >
-                  </div>
-                  <div class="controlarea-btn">
-                    <button
-                      style="
-                        width: 96px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ 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;
-                        margin-left: 8px;
-                        margin-right: 40px;
-                      "
-                      >{{ item.automatic2 }}</span
-                    >
-                  </div>
-                  <div class="temp-btn">
-                    <button
-                      style="
-                        width: 68px;
-                        height: 40px;
-                        border-radius: 4px;
-                        background: linear-gradient(
-                          180deg,
-                          rgba(1, 206, 255, 1) 0%,
-                          rgba(0, 150, 229, 1) 100%
-                        );
-                        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;
-                        margin-left: 12px;
-                        margin-right: 8px;
-                      "
-                      >{{ 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;
-                        margin-left: 8px;
-                      "
-                      >{{ item.brightness4 }}</span
-                    >
-                  </div>
-                </div>
-              </div>
-            </div>
-          </a-modal>
-          <!-- <div class="divadd">
-            <button class="add">刷新</button>
-          </div> -->
-        </a-tab-pane>
-      </a-tabs>
+        </div>
+        <!-- 右侧抽屉的触发按钮 -->
+        <div class="drawer-box" v-if="!visible">
+            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
+        </div>
     </div>
-  </a-drawer>
-  <div class="drawer-title1" v-if="!visible">
-    <a-button @click="toggleDrawer" class="arrowbtn">
-      <double-left-outlined style="color: rgba(255, 255, 255, 1)" />
-    </a-button>
-  </div>
-  <div class="drawer-title2" v-if="visible">
-    <a-button @click="toggleDrawer" class="arrowbtn">
-      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
-    </a-button>
-  </div>
+    
 </template>
-
+  
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
-  import {
-    DownOutlined,
-    UpOutlined,
+
+import { ref } from 'vue';
+import light from './light.vue';
+import {
     DoubleLeftOutlined,
-    DoubleRightOutlined,
-    StopOutlined,
+    DoubleRightOutlined
   } from '@ant-design/icons-vue';
 
-  const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
-  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 bulbs = ref([
-    {
-      className: 'bulbLogo1',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo2',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo3',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo4',
-      imageUrl: '/asset/image/bulbLogo/22419.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo5',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo6',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo7',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo8',
-      imageUrl: '/asset/image/bulbLogo/22394.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo9',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo10',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo11',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo12',
-      imageUrl: '/asset/image/bulbLogo/22396.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo13',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo14',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo15',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-    {
-      className: 'bulbLogo16',
-      imageUrl: '/asset/image/bulbLogo/22400.png',
-      visible: true,
-    },
-  ]);
-
-  // 照明区域按钮单选
-  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([
-    { id: 1, label: '1区', selected: false, zmhld: true },
-    { id: 2, label: '2区', selected: false, zmhld: false },
-    { id: 3, label: '3区', selected: false, zmhld: false },
-    { id: 4, label: '4区', selected: false, zmhld: false },
-    { id: 5, label: '5区', selected: false, zmhld: false },
-    { id: 6, label: '6区', selected: false, zmhld: false },
-    { id: 7, label: '7区', selected: false, zmhld: false },
-    { id: 8, label: '1区', selected: false, zmhld: false },
-    { id: 9, label: '2区', selected: false, zmhld: false },
-    { id: 10, label: '3区', selected: false, zmhld: false },
-  ]);
-  const zmhlid = ref();
-  const isPlanEnabled2 = ref(true);
-  const togglePlan2 = () => {
-    isPlanEnabled2.value = !isPlanEnabled2.value;
-    if (selectAllCheckbox.value) {
-      buttons2.value.forEach((button) => {
-        button.zmhld = true;
-        button.selected = false;
-      });
-    } else {
-      const item = buttons2.value.find((button) => button.id === zmhlid.value);
-      if (item) {
-        item.zmhld = !item.zmhld;
-        item.selected = false;
-      }
-    }
-  };
-  const selectAll = () => {
-    if (isAllchoose.value === false) {
-      isPlanEnabled2.value = limitedButtons.value[0].zmhld;
-    }
-    singleSelection.value = !singleSelection.value;
-    isAllchoose.value = !isAllchoose.value;
-    if (singleSelection.value) {
-      // 单选
-      buttons2.value.forEach((button) => {
-        button.selected = false;
-      });
-    } else {
-      // 多选
-      buttons2.value.forEach((button) => {
-        button.selected = true;
-      });
-    }
-    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
-  };
-  const allbtn1 = () => {
-    buttons2.value.forEach((button) => {
-      if (!button.zmhld) {
-        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;
-    }
-  };
-
-  const toggleSelection = (button) => {
-    console.log(button);
-    zmhlid.value = button.id;
-    console.log(zmhlid.value);
-    isPlanEnabled2.value = button.zmhld;
-    if (button.zmhld) {
-      return;
-    } else {
-      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;
-    }
-  };
-
-  // 控制模式按钮 vv
-  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 handlerefClick1 = () => {
-    console.log(1111);
-    executevisible.value = true;
-  };
-
-  let trindex = ref('-1');
-  const handleRowClick = (index: any) => {
-    trindex.value = index;
-    if (index === trindex.value) {
-      console.log('tri');
-    }
-    // 显示模态框
-    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);
-  };
+let area = ref(1)
+let visible = ref(false)
 
-  //撤销
-  const delbtn = (id: any) => {
-    console.log(id);
-    cxlist.value.pop(id);
-    console.log(cxlist.value.length);
 
-    if (cxlist.value.length === 0) {
-      executevisible.value = false;
-    }
-  };
+const getArea = (number: any) => {
+    alert(number)
+};
 </script>
 <style lang="less" scoped>
-  :deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
-    background-color: rgba(20, 41, 76, 1);
-    color: rgb(29, 83, 172);
-  }
-  :deep(.ant-transfer-list-header-selected) {
-    color: rgba(255, 83, 0);
-  }
-
-  :deep(.ant-transfer-list-header > *:not(:last-child)) {
-    color: rgba(255, 83, 0);
-  }
-
-  .tagtext {
-    margin-left: 8px;
-  }
-
-  .light-tag {
-    position: fixed;
-    bottom: 135px;
-    left: 450px;
-    width: 396px;
-    height: 200px;
-    opacity: 0.8;
-    border-radius: 8px;
-    background: rgba(0, 0, 0, 1);
-  }
-
-  .light-tag-tit {
-    display: flex;
-    margin-top: 18px;
-    margin-left: 18px;
-  }
-
-  .light-tag-box {
-    padding: 15px 15px;
-  }
-
-  .light-tag-box > img {
-    width: 120px;
-    height: 51px;
-    margin-bottom: 10px;
-  }
-
-  .light-tag-box > span {
-    color: #fff;
-  }
-
-  .titleimg,
-  .titletext {
-    display: inline-block;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .control-btn,
-  .light-btn {
-    display: inline-block;
-    margin-top: 10px;
-  }
-
-  .controlarea-btn,
-  .temp-btn {
-    display: inline-block;
-    margin-top: 16px;
-  }
-
-  :deep(.ant-drawer-content) {
-    background-color: rgba(0, 0, 0, 1);
-    opacity: 0.8;
-  }
-
-  :deep(.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: 60px;
-    color: rgba(255, 255, 255, 1);
-  }
-
-  .custom-table th,
-  .custom-table td {
-    border: 1px solid rgba(163, 192, 243, 1);
-    text-align: left;
-    padding: 8px;
-    text-align: center;
-  }
-
-  .table1 {
-    margin-top: 20px;
-    width: 100%;
-    cellspacing: 0;
-    cellpadding: 0;
-    border: 1px solid rgba(255, 255, 255);
-    border-radius: 5px;
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .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: 80px;
-  }
-
-  .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: 8px;
-    font-size: 12px;
-    color: rgba(255, 255, 255, 1);
-    border: none;
-    border-radius: 5px;
-  }
-
-  .btn2 {
-    button {
-      margin: 0 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;
-
-    button {
-      width: 21%;
-      padding: 0 2%;
-    }
-  }
-
-  .btn {
-    width: 92px;
-    height: 40px;
-    border-radius: 4px;
-    opacity: 1;
-    margin-top: 10px;
-    margin-left: 17px;
-    font-size: 14px;
-    font-weight: 400;
-    opacity: 1;
-    border: 1px solid rgba(207, 212, 219, 1);
-    line-height: 20.27px;
-    color: 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 > 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 {
-    border: none;
-    background-color: rgba(0, 0, 0, 0);
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
-    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;
-    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%;
-    max-height: calc(100% - 79px);
-  }
-  .lighting-img-box > img {
-    width: 100%;
-    height: calc(100vh - 96px);
-    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;
-  }
-
-  .jbox {
-    background-color: #000;
-    opacity: 1;
-    z-index: 99999;
-  }
-
-  .journal {
-    padding: 3% 5%;
-    background-size: 450px 177px;
-    width: 482px;
-    height: 177px;
-    background-color: rgba(0, 0, 0);
-    border-radius: 12px;
-    border: 2px solid transparent;
-    border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
-  }
-
-  .imgText {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .ztzm {
-      display: flex;
-      align-items: center;
-    }
-
-    .cxbtn {
-      color: rgba(255, 255, 255, 1);
-      border: none;
-      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%
-      );
-    }
-  }
-
-  :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;
-  }
-
-  .zmhlbtn {
-    position: relative;
-  }
-
-  .anticon-stop {
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-  }
-
-  .istrindex {
-    background: rgba(67, 136, 251, 1);
-  }
-
-  :deep(.ant-modal-mask.ant-modal-content) {
-    height: 100vh;
-    position: fixed;
-    right: 496px;
-    top: 0%;
-  }
-  :deep(.ant-modal-content) {
-    position: fixed;
-    bottom: 20px;
-    right: 500px;
-  }
+@import "./indexs.less";
+.isActive {
+    border: 2px solid white !important;
+}
 </style>
+  
\ No newline at end of file
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
new file mode 100644
index 0000000..30dea40
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue
@@ -0,0 +1,2197 @@
+<template>
+  <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">
+          <img class="bulbImg" :src="bulb.imageUrl" alt="" />
+        </div>
+      </div>
+    </div>
+    <div class="btn-box">
+      <button class="F1">1F</button><br />
+      <button class="F2">2F</button><br />
+      <button class="platform">站台</button>
+    </div>
+    <div class="light-tag" style="border: 1px solid red">
+      <div class="light-tag-tit">
+        <img class="tagimg" src="/asset/image//bulbLogo/21962.png" alt="" />
+        <span
+          class="tagtext"
+          :style="{
+            fontSize: '16px',
+            fontWeight: 700,
+            color: 'rgba(255, 255, 255, 1)',
+          }"
+          >站厅照明 1区</span
+        >
+        <button
+          :style="{
+            width: ' 50px',
+            height: '24px',
+            opacity: 1,
+            background: 'rgba(57, 215, 187, 0.1)',
+            border: '1px solid rgba(57, 215, 187, 1)',
+            fontSize: '12px',
+            fontWeight: 400,
+            lineHeight: ' 17.38px',
+            color: 'rgba(57, 215, 187, 1)',
+            marginLeft: '180px',
+          }"
+          >正常</button
+        >
+      </div>
+      <div class="light-tag-box">
+        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
+          >控制模式</span
+        >
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginRight: '20px',
+          }"
+          >自动</span
+        >
+        <img src="/asset/image//bulbLogo/22546.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">亮度</span>
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginLeft: '20px',
+          }"
+          >1000lux</span
+        >
+        <img src="/asset/image//bulbLogo/22554.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px', marginRight: '20px' }"
+          >控制场景</span
+        >
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginRight: '20px',
+          }"
+          >舒适</span
+        >
+        <img src="/asset/image//bulbLogo/22553.png" alt="" />
+        <span :style="{ color: 'rgba(64, 255, 252, 1)', marginLeft: '-60px' }">色温</span>
+        <span
+          :style="{
+            color: 'rgba(255, 255, 255, 1)',
+            fontSize: '16px',
+            fontWeight: '700',
+            marginLeft: '20px',
+          }"
+          >4200k</span
+        >
+      </div>
+    </div>
+  </div>
+  <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"
+    :maskStyle="{ 'background-color': 'rgba(0,0,0,0)' }">
+    <div>
+      <a-tabs v-model:activeKey="activeKey">
+        <a-tab-pane key="1" tab="控制面板">
+          <!-- 照明区域 -->
+          <div>
+            <div class="lightarea">
+              <div class="lightareatab"></div>
+              <span class="lightareatext"> 照明区域 </span>
+              <button
+                class="plan"
+                :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }"
+                @click="togglePlan">
+                {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
+              </button>
+            </div>
+            <!-- 照明区域按钮部分 -->
+            <div class="area">
+              <template v-if="!showAllButtonsarea">
+                <button
+                  v-for="(button, index) in 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
+                  >
+                </div>
+              </template>
+              <template v-else>
+                <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
+                  >
+                </div>
+              </template>
+            </div>
+          </div>
+          <!-- 照明回路部分 -->
+          <div>
+            <div class="circuitarea" v-if="selectedButton">
+              <div class="circuittab"></div>
+              <span class="circuittext">照明回路</span>
+              <div class="btn2">
+                <button
+                  class="openplan"
+                  :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
+                  @click="togglePlan2">
+                  {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
+                </button>
+                <a-switch
+                  v-model:checked="selectAllCheckbox"
+                  :class="{
+                    'blue-background': selectAllCheckbox,
+                    'grey-background': !selectAllCheckbox,
+                  }"
+                  @change="toggleAllSelection" />
+                <button @click="allbtn1" 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"
+                  :class="{ btn: true, selected: button2.selected }"
+                  class="zmhlbtn"
+                  @click="toggleSelection(button2)">
+                  <stop-outlined v-if="button2.zmhld" />
+                  {{ button2.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
+                </div>
+              </template>
+              <template v-else>
+                <button
+                  v-for="(button2, index) in buttons2"
+                  :key="index"
+                  :class="{ btn: true, selected: button2.selected }"
+                  @click="toggleSelection(button2)">
+                  {{ button2.label }}
+                </button>
+                <div style="margin-top: 10px">
+                  <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
+                </div>
+              </template>
+            </div>
+          </div>
+          <!-- 控制模式 -->
+          <div>
+            <div class="controlarea" v-show="showControlMode">
+              <div class="controltab"></div>
+              <span class="controltext"> 控制模式 </span>
+            </div>
+            <!-- 控制模式按钮部分 -->
+            <div class="controlmodebtnarea" v-show="showControlMode">
+              <button
+                v-for="(button3, index) in controlbutton"
+                :key="index"
+                :class="{ btn: true, selected: button3.label === selectedButton3 }"
+                @click="selectButton3(button3)">
+                {{ button3.label }}
+              </button>
+            </div>
+          </div>
+          <!-- 控制场景 -->
+          <div>
+            <div class="controlscenearea" v-show="showControlScene">
+              <div class="controlscenetab"></div>
+              <span class="controlscenetext"> 控制场景 </span>
+            </div>
+            <!-- 控制场景按钮部分 -->
+            <div class="controlscenebtnarea" v-show="showControlScene">
+              <button
+                v-for="(button4, index) in controlscenebuttons"
+                :key="index"
+                :class="{ btn: true, selected: button4.label === selectedButton4 }"
+                @click="selectButton4(button4)">
+                {{ button4.label }}
+              </button>
+            </div>
+          </div>
+          <!-- 灯具参数 -->
+          <div>
+            <div class="lightparametersarea" v-if="selectedButton4">
+              <div class="lightparameterstab"></div>
+              <span class="lightparameterstext"> 灯具参数 </span>
+            </div>
+            <div class="lightparameterstextarea" v-if="selectedButton4">
+              <table class="custom-table table1">
+                <thead>
+                  <tr :style="{ background: 'rgba(35,45,69)' }">
+                    <th>开启数量</th>
+                    <th>亮度(lux)</th>
+                    <th>色温</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(row, index) in lightSource"
+                    :key="index"
+                    @click="handleRowClick(row.num)"
+                    :style="{ height: '50px' }">
+                    <td>{{ row.num }}</td>
+                    <td>{{ row.light }}</td>
+                    <td>{{ row.tempruter }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="bottom">
+            <button class="flushed" @click="refresh">刷新</button>
+            <button class="execute" @click="showModal">执行</button>
+          </div>
+          <a-modal
+            :v-if="cxlist.length === 0"
+            v-model:visible="executevisible"
+            width="500px"
+            height="792px"
+            okText="执行"
+            :closable="false"
+            @ok="handleOk2"
+            :mask="false"
+            :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
+              color: 'rgba(255,83,0)',
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <div :v-if="cxlist.length === 0" style="height: 792px">
+              <div>
+                <div class="div-operation"></div>
+                <span class="text-operation">变更内容 </span>
+              </div>
+              <div class="jbox" v-for="item in cxlist" :key="item.id">
+                <div class="journal" style="margin-top: 20px">
+                  <div class="imgText">
+                    <div class="zjzm">
+                      <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+                      <span
+                        class="titletext"
+                        style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                        >{{ item.name }}</span
+                      >
+                    </div>
+                    <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
+                  </div>
+                  <div class="control-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >手动</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div class="light-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >100lux</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(243, 97, 99, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >30lux</span
+                    >
+                  </div>
+                  <div class="controlarea-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >手动</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >自动</span
+                    >
+                  </div>
+                  <div class="temp-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >4000k</span
+                    >
+                    <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                    <span
+                      style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                        margin-left: 8px;
+                      "
+                      >3800k</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-modal>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="计划列表" force-render>
+          <div class="divadd">
+            <button class="add" @click="addModal">添加</button>
+          </div>
+          <table class="custom-table table1">
+            <thead>
+              <tr :style="{ background: 'rgba(35,45,69)' }">
+                <th>序号</th>
+                <th>执行时间</th>
+                <th>计划名称</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, index) in dataSource" :key="index">
+                <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>
+                  <button class="tabreboot" @click="handlerefClick1">重启</button>
+                  <button class="tabdelete">删除</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal
+            v-model:visible="addvisible"
+            width="500px"
+            height="792px"
+            :closable="false"
+            :mask="false"
+            :bodyStyle="{
+              opacity: 1,
+              background: ' rgba(0,0,0)',
+              color: 'rgba(255,83,0)',
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100vh',
+              maxHeight: '100vh',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <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"
+                @change="handleChange"
+                :style="{ color: 'rgba(255,255,255,1)' }"
+                @search="handleSearch"
+                :listStyle="{ border: '2px solid rgba(25,74,125,1)' }" />
+            </div>
+          </a-modal>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="日志">
+          <table class="custom-table table1">
+            <thead>
+              <tr :style="{ background: 'rgba(35,45,69)' }">
+                <th>序号</th>
+                <th>执行时间</th>
+                <th>操作内容</th>
+                <th>操作人</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr
+                v-for="(row, index) in dataSource1"
+                :key="index"
+                @click="handleRowClick(row.key)"
+                :class="row.key === trindex ? 'istrindex' : ''">
+                <td>{{ row.key }}</td>
+                <td>{{ row.data }}</td>
+                <td>{{ row.planname }}</td>
+                <td>{{ row.status }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <a-modal
+            width="500px"
+            v-model:visible="logModalVisible"
+            :closable="false"
+            @cancel="closeLogModal"
+            :footer="null"
+            :mask="false"
+            :bodyStyle="{
+              marginLeft: 200,
+              background: 'rgba(0, 0, 0, 1)',
+              opacity: 0.8,
+              boxSizing: 'borderBox',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'fixed',
+              right: '496px',
+              top: '0',
+            }">
+            <div style="height: calc(100vh - 96px)">
+              <div>
+                <div class="div-operation"></div>
+                <span class="text-operation">操作日志</span>
+              </div>
+              <div class="journal" style="margin-top: 20px" v-for="item in cxlist" :key="item.id">
+                <div class="imgText">
+                  <div class="zjzm">
+                    <img class="titleimg" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+                    <span
+                      style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                      >{{ item.name }}</span
+                    >
+                  </div>
+                </div>
+
+                <div class="gird22">
+                  <div class="control-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ 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;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >{{ item.automatic }}</span
+                    >
+                  </div>
+                  <div class="light-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ 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;
+                        margin-left: 8px;
+                      "
+                      >{{ item.brightness2 }}</span
+                    >
+                  </div>
+                  <div class="controlarea-btn">
+                    <button
+                      style="
+                        width: 96px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ 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;
+                        margin-left: 8px;
+                        margin-right: 40px;
+                      "
+                      >{{ item.automatic2 }}</span
+                    >
+                  </div>
+                  <div class="temp-btn">
+                    <button
+                      style="
+                        width: 68px;
+                        height: 40px;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(1, 206, 255, 1) 0%,
+                          rgba(0, 150, 229, 1) 100%
+                        );
+                        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;
+                        margin-left: 12px;
+                        margin-right: 8px;
+                      "
+                      >{{ 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;
+                        margin-left: 8px;
+                      "
+                      >{{ item.brightness4 }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-modal>
+          <!-- <div class="divadd">
+            <button class="add">刷新</button>
+          </div> -->
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-drawer>
+  <div class="drawer-title1" v-if="!visible">
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <double-left-outlined style="color: rgba(255, 255, 255, 1)" />
+    </a-button>
+  </div>
+  <div class="drawer-title2" v-if="visible">
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <double-right-outlined style="color: rgba(255, 255, 255, 1)" />
+    </a-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import {
+    DownOutlined,
+    UpOutlined,
+    DoubleLeftOutlined,
+    DoubleRightOutlined,
+    StopOutlined,
+  } from '@ant-design/icons-vue';
+
+  const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
+  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 bulbs = ref([
+    {
+      className: 'bulbLogo1',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo2',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo3',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo4',
+      imageUrl: '/asset/image/bulbLogo/22419.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo5',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo6',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo7',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo8',
+      imageUrl: '/asset/image/bulbLogo/22394.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo9',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo10',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo11',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo12',
+      imageUrl: '/asset/image/bulbLogo/22396.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo13',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo14',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo15',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+    {
+      className: 'bulbLogo16',
+      imageUrl: '/asset/image/bulbLogo/22400.png',
+      visible: true,
+    },
+  ]);
+
+  // 照明区域按钮单选
+  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([
+    { id: 1, label: '1区', selected: false, zmhld: true },
+    { id: 2, label: '2区', selected: false, zmhld: false },
+    { id: 3, label: '3区', selected: false, zmhld: false },
+    { id: 4, label: '4区', selected: false, zmhld: false },
+    { id: 5, label: '5区', selected: false, zmhld: false },
+    { id: 6, label: '6区', selected: false, zmhld: false },
+    { id: 7, label: '7区', selected: false, zmhld: false },
+    { id: 8, label: '1区', selected: false, zmhld: false },
+    { id: 9, label: '2区', selected: false, zmhld: false },
+    { id: 10, label: '3区', selected: false, zmhld: false },
+  ]);
+  const zmhlid = ref();
+  const isPlanEnabled2 = ref(true);
+  const togglePlan2 = () => {
+    isPlanEnabled2.value = !isPlanEnabled2.value;
+    if (selectAllCheckbox.value) {
+      buttons2.value.forEach((button) => {
+        button.zmhld = true;
+        button.selected = false;
+      });
+    } else {
+      const item = buttons2.value.find((button) => button.id === zmhlid.value);
+      if (item) {
+        item.zmhld = !item.zmhld;
+        item.selected = false;
+      }
+    }
+  };
+  const selectAll = () => {
+    if (isAllchoose.value === false) {
+      isPlanEnabled2.value = limitedButtons.value[0].zmhld;
+    }
+    singleSelection.value = !singleSelection.value;
+    isAllchoose.value = !isAllchoose.value;
+    if (singleSelection.value) {
+      // 单选
+      buttons2.value.forEach((button) => {
+        button.selected = false;
+      });
+    } else {
+      // 多选
+      buttons2.value.forEach((button) => {
+        button.selected = true;
+      });
+    }
+    selectAllCheckbox.value = !singleSelection.value; // 更新全选开关的状态
+  };
+  const allbtn1 = () => {
+    buttons2.value.forEach((button) => {
+      if (!button.zmhld) {
+        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;
+    }
+  };
+
+  const toggleSelection = (button) => {
+    console.log(button);
+    zmhlid.value = button.id;
+    console.log(zmhlid.value);
+    isPlanEnabled2.value = button.zmhld;
+    if (button.zmhld) {
+      return;
+    } else {
+      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;
+    }
+  };
+
+  // 控制模式按钮 vv
+  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 handlerefClick1 = () => {
+    console.log(1111);
+    executevisible.value = true;
+  };
+
+  let trindex = ref('-1');
+  const handleRowClick = (index: any) => {
+    trindex.value = index;
+    if (index === trindex.value) {
+      console.log('tri');
+    }
+    // 显示模态框
+    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 delbtn = (id: any) => {
+    console.log(id);
+    cxlist.value.pop(id);
+    console.log(cxlist.value.length);
+
+    if (cxlist.value.length === 0) {
+      executevisible.value = false;
+    }
+  };
+</script>
+<style lang="less" scoped>
+  :deep(.ant-transfer-list-content-item:not(.ant-transfer-list-content-item-disabled):hover) {
+    background-color: rgba(20, 41, 76, 1);
+    color: rgb(29, 83, 172);
+  }
+  :deep(.ant-transfer-list-header-selected) {
+    color: rgba(255, 83, 0);
+  }
+
+  :deep(.ant-transfer-list-header > *:not(:last-child)) {
+    color: rgba(255, 83, 0);
+  }
+
+  .tagtext {
+    margin-left: 8px;
+  }
+
+  .light-tag {
+    position: fixed;
+    bottom: 135px;
+    left: 450px;
+    width: 396px;
+    height: 200px;
+    opacity: 0.8;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 1);
+  }
+
+  .light-tag-tit {
+    display: flex;
+    margin-top: 18px;
+    margin-left: 18px;
+  }
+
+  .light-tag-box {
+    padding: 15px 15px;
+  }
+
+  .light-tag-box > img {
+    width: 120px;
+    height: 51px;
+    margin-bottom: 10px;
+  }
+
+  .light-tag-box > span {
+    color: #fff;
+  }
+
+  .titleimg,
+  .titletext {
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .control-btn,
+  .light-btn {
+    display: inline-block;
+    margin-top: 10px;
+  }
+
+  .controlarea-btn,
+  .temp-btn {
+    display: inline-block;
+    margin-top: 16px;
+  }
+
+  :deep(.ant-drawer-content) {
+    background-color: rgba(0, 0, 0, 1);
+    opacity: 0.8;
+  }
+
+  :deep(.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: 60px;
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .custom-table th,
+  .custom-table td {
+    border: 1px solid rgba(163, 192, 243, 1);
+    text-align: left;
+    padding: 8px;
+    text-align: center;
+  }
+
+  .table1 {
+    margin-top: 20px;
+    width: 100%;
+    cellspacing: 0;
+    cellpadding: 0;
+    border: 1px solid rgba(255, 255, 255);
+    border-radius: 5px;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .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: 80px;
+  }
+
+  .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: 8px;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 1);
+    border: none;
+    border-radius: 5px;
+  }
+
+  .btn2 {
+    button {
+      margin: 0 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;
+
+    button {
+      width: 21%;
+      padding: 0 2%;
+    }
+  }
+
+  .btn {
+    width: 92px;
+    height: 40px;
+    border-radius: 4px;
+    opacity: 1;
+    margin-top: 10px;
+    margin-left: 17px;
+    font-size: 14px;
+    font-weight: 400;
+    opacity: 1;
+    border: 1px solid rgba(207, 212, 219, 1);
+    line-height: 20.27px;
+    color: 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 > 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 {
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 14px;
+    font-weight: 400;
+    letter-spacing: 0;
+    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;
+    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%;
+    max-height: calc(100% - 79px);
+  }
+  .lighting-img-box > img {
+    width: 100%;
+    height: calc(100vh - 96px);
+    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;
+  }
+
+  .jbox {
+    background-color: #000;
+    opacity: 1;
+    z-index: 99999;
+  }
+
+  .journal {
+    padding: 3% 5%;
+    background-size: 450px 177px;
+    width: 482px;
+    height: 177px;
+    background-color: rgba(0, 0, 0);
+    border-radius: 12px;
+    border: 2px solid transparent;
+    border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1;
+  }
+
+  .imgText {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .ztzm {
+      display: flex;
+      align-items: center;
+    }
+
+    .cxbtn {
+      color: rgba(255, 255, 255, 1);
+      border: none;
+      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%
+      );
+    }
+  }
+
+  :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;
+  }
+
+  .zmhlbtn {
+    position: relative;
+  }
+
+  .anticon-stop {
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+  }
+
+  .istrindex {
+    background: rgba(67, 136, 251, 1);
+  }
+
+  :deep(.ant-modal-mask.ant-modal-content) {
+    height: 100vh;
+    position: fixed;
+    right: 496px;
+    top: 0%;
+  }
+  :deep(.ant-modal-content) {
+    position: fixed;
+    bottom: 20px;
+    right: 500px;
+  }
+</style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
new file mode 100644
index 0000000..d26c745
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/light.vue
@@ -0,0 +1,135 @@
+<template>
+    <a-popover color="rgba(0, 0, 0, 0.8)">
+        <template #content>
+            <div class="light-tag">
+                <div class="light-tag-tit">
+                    <div>
+                        <img src="/asset/image//bulbLogo/21962.png" alt="" />
+                        <span class="tag-text">{{ result.name }}</span>
+                    </div>
+                    <button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button>
+                </div>
+                <div class="light-tag-box">
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制模式</span>
+                        <span class="result">自动</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">亮度</span>
+                        <span class="result">{{ result.brightness }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">控制场景</span>
+                        <span class="result">{{ result.automatic2 }}</span>
+                    </div>
+                    <div class="tag-box-item">
+                        <img src="/asset/image//bulbLogo/22496.png" alt="" />
+                        <span class="title">色温</span>
+                        <span class="result">{{ result.brightness3 }}</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <div class="icon-box" :style="styleObject">
+            <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
+            <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
+            <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
+        </div>
+    </a-popover>
+</template>
+  
+<script setup lang="ts">
+import { ref } from 'vue';
+defineProps({
+  styleObject: Object,
+  type: Number
+});
+
+const result = ref({
+    id: '1',
+    name: '站厅照明  1区',
+    manual: '手动',
+    automatic: '自动',
+    brightness: '100lux',
+    brightness2: '30lux',
+    manual2: '手动',
+    automatic2: '舒适',
+    brightness3: '4000k',
+    brightness4: '3800k',
+});
+
+</script>
+<style lang="less" scoped>
+    .icon-box {
+        width: 25px;
+        height: 25px;
+        position: absolute;
+        .icon-item {
+            width: 25px;
+            cursor: pointer;
+            transition: all ease 0.1s;
+        }
+        .icon-item:active {
+            transform: scale(1.2);
+        }
+    }
+    // 悬浮窗外部
+    .light-tag {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        // 悬浮窗标题
+        .light-tag-tit {
+            display: flex;
+            justify-content: space-between;
+            vertical-align: middle;
+            height: 30px;
+            .tag-text {
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+                padding-left: 10px;
+            }
+            .right-button {
+                width: 50px;
+                height: 26px;
+                background: rgba(57, 215, 187, 0.1);
+                border: 1px solid rgba(57, 215, 187, 1);
+                font-size: 12px;
+                color: rgba(57, 215, 187, 1);
+            }
+        }
+    }
+    // 悬浮窗底部4格子
+    .light-tag-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-gap: 10px;
+        .tag-box-item {
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            img {
+                width: 120px;
+                vertical-align: middle;
+            }
+            .title {
+                position: absolute;
+                left: 60px;
+                top: 13px;
+                color: rgba(64, 255, 252, 1);
+            }
+            .result {
+                line-height: 50px;
+                font-size: 16px;
+                font-weight: 700;
+                color: white;
+            };
+        }
+    }
+</style>
+  
\ No newline at end of file