From c4132d41cd38760667d19d9054b9bfd1de2ad0a4 Mon Sep 17 00:00:00 2001
From: lushihan <2813036942@qq.com>
Date: Tue, 11 Jun 2024 15:44:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../equipmentControl/lightingManage/indexs.vue     | 1092 ++++++++++++++------
 1 file changed, 787 insertions(+), 305 deletions(-)

diff --git a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
index 5bae907..2ea2c1d 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
@@ -32,16 +32,8 @@
       <button class="platform">站台</button>
     </div>
   </div>
-  <a-drawer
-    v-model:visible="visible"
-    class="custom-class"
-    width="496"
-    height="1080"
-    placement="right"
-    :drawerStyle="{ background: 'rgba(0, 0, 0, 1)', opacity: 0.8 }"
-    :closable="false"
-    id="Odrawer"
-  >
+  <a-drawer v-model:visible="visible" class="custom-class" width="496" height="1080" placement="right"
+    :drawerStyle="{ background: 'rgba(0, 0, 0, 1)', opacity: 0.8 }" :closable="false" id="Odrawer">
     <div>
       <a-tabs v-model:activeKey="activeKey">
         <a-tab-pane key="1" tab="控制面板">
@@ -53,12 +45,8 @@
           </div>
           <!-- 照明区域按钮部分 -->
           <div class="area">
-            <button
-              v-for="(button, index) in buttons"
-              :key="index"
-              :class="{ btn: true, selected: button === selectedButton }"
-              @click="selectButton(button)"
-            >
+            <button v-for="(button, index) in buttons" :key="index"
+              :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
               {{ button.label }}
             </button>
           </div>
@@ -67,11 +55,9 @@
             <div class="circuittab"></div>
             <span class="circuittext">照明回路</span>
             <div class="btn2">
-              <input
-                type="checkbox"
-                class="custom-checkbox"
-                v-model="selectAllCheckbox"
-                @change="toggleAllSelection"
+              <!-- <input type="checkbox" class="custom-checkbox" v-model="selectAllCheckbox" @change="toggleAllSelection" /> -->
+              <a-switch class="custom-checkbox" v-model="selectAllCheckbox" @change="toggleAllSelection"
+              :style="{Background:'rgba(255,255,255)'}"
               />
               <span class="both" @click="selectAll">全选</span>
               <button class="openplan">启用面板</button>
@@ -79,14 +65,20 @@
           </div>
           <!-- 照明回路按钮部分 -->
           <div class="btnarea" v-if="selectedButton">
-            <button
-              v-for="(button2, index) in buttons2"
-              :key="index"
-              :class="{ btn: true, selected: button2.selected }"
-              @click="toggleSelection(button2)"
-            >
-              {{ button2.label }}
-            </button>
+            <template v-if="!showAllButtons">
+              <button v-for="(button2, index) in limitedButtons" :key="index"
+                :class="{ btn: true, selected: button2.selected }" @click="toggleSelection(button2)">
+                {{ button2.label }}
+              </button><br>
+              <span @click="showAllButtons = true" class="openzm"><down-outlined />展开</span>
+            </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><br>
+              <span @click="showAllButtons = false" class="openzm"><up-outlined />回缩</span>
+            </template>
           </div>
           <!-- 控制模式 -->
           <div class="controlarea" v-show="showControlMode">
@@ -96,12 +88,8 @@
 
           <!-- 控制模式按钮部分 -->
           <div class="controlmodebtnarea" v-show="showControlMode">
-            <button
-              v-for="(button3, index) in controlbutton"
-              :key="index"
-              :class="{ btn: true, selected: button3.label === selectedButton3 }"
-              @click="selectButton3(button3)"
-            >
+            <button v-for="(button3, index) in controlbutton" :key="index"
+              :class="{ btn: true, selected: button3.label === selectedButton3 }" @click="selectButton3(button3)">
               {{ button3.label }}
             </button>
           </div>
@@ -114,21 +102,17 @@
 
           <!-- 控制场景按钮部分 -->
           <div class="controlscenebtnarea" v-show="showControlScene">
-            <button
-              v-for="(button4, index) in controlscenebuttons"
-              :key="index"
-              :class="{ btn: true, selected: button4.label === selectedButton4 }"
-              @click="selectButton4(button4)"
-            >
+            <button v-for="(button4, index) in controlscenebuttons" :key="index"
+              :class="{ btn: true, selected: button4.label === selectedButton4 }" @click="selectButton4(button4)">
               {{ button4.label }}
             </button>
           </div>
           <!-- 灯具参数 -->
-          <div class="lightparametersarea">
+          <div class="lightparametersarea" v-if="selectedButton4">
             <div class="lightparameterstab"></div>
             <span class="lightparameterstext"> 灯具参数 </span>
           </div>
-          <div class="lightparameterstextarea">
+          <div class="lightparameterstextarea" v-if="selectedButton4">
             <p>开启数量</p>
             <p>亮度(lux)</p>
             <p>色温(k)</p>
@@ -137,9 +121,424 @@
             <p>4200</p>
           </div>
           <div class="bottom">
-            <button class="flushed">刷新</button>
-            <button class="execute">执行</button>
+            <button class="flushed" @click="refresh">刷新</button>
+            <button class="execute" @click="showModal">执行</button>
           </div>
+          <a-modal width="500px" height="792px" v-model:visible="executevisible" :closable="false"
+            :style="{ backgroundColor: '#000', overflow: 'hidden' }" :mask="false" :bodyStyle="{
+              background: 'rgba(0, 0, 0, 0.9)',
+              opacity: 0.8,
+              height: '792px',
+              maxHeight: '792px',
+              boxSizing: 'borderBox', display: 'flex',
+              flexDirection: 'column',
+            }">
+            <div style="height: 792px">
+              <div style="width: 100%;text-align: center;">
+                <span class="text-change">变更内容</span>
+              </div>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    ">站厅照明 1区</span>
+                </div>
+                <div class="gird22">
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制模式
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      亮度
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">100lux</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">30lux</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制场景
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      色温
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">4000k</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">3800k</span>
+                  </div>
+                </div>
+              </div>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    ">站厅照明 1区</span>
+                </div>
+
+                <div class="gird22">
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制模式
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      亮度
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">100lux</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">30lux</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制场景
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      色温
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">4000k</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">3800k</span>
+                  </div>
+                </div>
+              </div>
+              <div class="journal" style="margin-top: 20px">
+                <div class="imgText">
+                  <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
+                  <span style="
+                      font-size: 20px;
+                      font-weight: 500;
+                      color: rgba(255, 255, 255, 1);
+                    ">站厅照明 1区</span>
+                </div>
+
+                <div class="gird22">
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制模式
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      亮度
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">100lux</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">30lux</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 96px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      控制场景
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">手动</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">自动</span>
+                  </div>
+                  <div>
+                    <button style="
+                        width: 68px;
+                        height: 40px;
+                        opacity: 0.7;
+                        border-radius: 4px;
+                        background: linear-gradient(
+                          180deg,
+                          rgba(86, 221, 253, 1) 0%,
+                          rgba(25, 176, 255, 1) 100%
+                        );
+                        border: none;
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">
+                      色温
+                    </button>
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">4000k</span>
+
+                    <span style="
+                        color: rgba(255, 255, 255, 1);
+                        font-size: 14px;
+                        font-weight: 400;
+                      ">3800k</span>
+                  </div>
+                </div>
+              </div>
+              <div class="excubtn">
+                <button @click="excuModal" class="excuno">取消</button>
+                <button @click="handleOk" class="excuok">执行</button>
+              </div>
+
+            </div>
+          </a-modal>
         </a-tab-pane>
         <a-tab-pane key="2" tab="计划列表" force-render>
           <a-table bordered :data-source="dataSource" :columns="columns" class="atable">
@@ -159,8 +558,26 @@
             </template>
           </a-table>
           <div class="divadd">
-            <button class="add">添加</button>
+            <button class="add" @click="addModal">添加</button>
           </div>
+          <a-modal v-model:visible="addvisible" width="500px" height="792px" :closable="false" :footer="null"
+            :style="{ backgroundColor: '#000' }" :mask="false" :bodyStyle="{
+              background: 'rgba(0, 0, 0, 0.9)',
+              opacity: 0.8,
+              height: '792px',
+              maxHeight: '792px',
+              boxSizing: 'borderBox', display: 'flex',
+              flexDirection: 'column',
+            }">
+            <p style="font-size: 18px;font-weight: 700;">计划库</p>
+            <div style="width: 100%;border-top: 1px solid rgba(255,255,255,1);"></div>
+            <div style="margin-top: 20px;">
+              <a-transfer v-model:target-keys="targetKeys" :data-source="mockData" show-search
+                :filter-option="filterOption" :render="item => item.title" @change="handleChange"
+                :style="{ color: 'rgba(255,255,255,1)' }" @search="handleSearch" />
+            </div>
+            <button class="addok" @click="addhandleOk">确定</button>
+          </a-modal>
         </a-tab-pane>
         <a-tab-pane key="3" tab="日志">
           <table class="custom-table table1">
@@ -173,11 +590,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr
-                v-for="(row, index) in dataSource1"
-                :key="index"
-                @click="handleRowClick(row.id, row.name, row.age)"
-              >
+              <tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.id, row.name, row.age)">
                 <td>{{ row.key }}</td>
                 <td>{{ row.data }}</td>
                 <td>{{ row.planname }}</td>
@@ -185,22 +598,16 @@
               </tr>
             </tbody>
           </table>
-          <a-modal
-            width="562px"
-            height="792px"
-            v-model:visible="logModalVisible"
-            :style="{ backgroundColor: '#000' }"
-            @cancel="closeLogModal"
-            :footer="null"
-            :mask="false"
-            :bodyStyle="{
+          <a-modal width="562px" height="792px" v-model:visible="logModalVisible" :closable="false"
+            :style="{ backgroundColor: '#000', overflow: 'hidden' }" @cancel="closeLogModal" :footer="null"
+            :mask="false" :bodyStyle="{
               background: 'rgba(0, 0, 0, 0.9)',
               opacity: 0.8,
               height: '792px',
               maxHeight: '792px',
-              boxSizing: 'borderBox',
-            }"
-          >
+              boxSizing: 'borderBox', display: 'flex',
+              flexDirection: 'column',
+            }">
             <div style="height: 792px">
               <div>
                 <div class="div-operation"></div>
@@ -209,20 +616,15 @@
               <div class="journal" style="margin-top: 20px">
                 <div class="imgText">
                   <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
-                  <span
-                    style="
+                  <span style="
                       font-size: 20px;
                       font-weight: 500;
                       color: rgba(255, 255, 255, 1);
-                    "
-                    >站厅照明 1区</span
-                  >
+                    ">站厅照明 1区</span>
                 </div>
-
                 <div class="gird22">
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -236,30 +638,22 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制模式
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
-                    <span
-                      style="
+                      ">手动</span>
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -273,31 +667,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       亮度
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >100lux</span
-                    >
+                      ">100lux</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >30lux</span
-                    >
+                      ">30lux</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -311,31 +697,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制场景
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
+                      ">手动</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -349,47 +727,36 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       色温
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >4000k</span
-                    >
+                      ">4000k</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >3800k</span
-                    >
+                      ">3800k</span>
                   </div>
                 </div>
               </div>
               <div class="journal" style="margin-top: 20px">
                 <div class="imgText">
                   <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
-                  <span
-                    style="
+                  <span style="
                       font-size: 20px;
                       font-weight: 500;
                       color: rgba(255, 255, 255, 1);
-                    "
-                    >站厅照明 1区</span
-                  >
+                    ">站厅照明 1区</span>
                 </div>
 
                 <div class="gird22">
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -403,30 +770,22 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制模式
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
-                    <span
-                      style="
+                      ">手动</span>
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -440,31 +799,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       亮度
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >100lux</span
-                    >
+                      ">100lux</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >30lux</span
-                    >
+                      ">30lux</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -478,31 +829,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制场景
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
+                      ">手动</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -516,47 +859,36 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       色温
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >4000k</span
-                    >
+                      ">4000k</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >3800k</span
-                    >
+                      ">3800k</span>
                   </div>
                 </div>
               </div>
               <div class="journal" style="margin-top: 20px">
                 <div class="imgText">
                   <img src="../../../../public/bulbLogo/组 22549.png" alt="" />&nbsp;
-                  <span
-                    style="
+                  <span style="
                       font-size: 20px;
                       font-weight: 500;
                       color: rgba(255, 255, 255, 1);
-                    "
-                    >站厅照明 1区</span
-                  >
+                    ">站厅照明 1区</span>
                 </div>
 
                 <div class="gird22">
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -570,30 +902,22 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制模式
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
-                    <span
-                      style="
+                      ">手动</span>
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -607,31 +931,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       亮度
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >100lux</span
-                    >
+                      ">100lux</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >30lux</span
-                    >
+                      ">30lux</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 96px;
                         height: 40px;
                         opacity: 0.7;
@@ -645,31 +961,23 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       控制场景
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >手动</span
-                    >
+                      ">手动</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >自动</span
-                    >
+                      ">自动</span>
                   </div>
                   <div>
-                    <button
-                      style="
+                    <button style="
                         width: 68px;
                         height: 40px;
                         opacity: 0.7;
@@ -683,27 +991,20 @@
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                    >
+                      ">
                       色温
                     </button>
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >4000k</span
-                    >
+                      ">4000k</span>
 
-                    <span
-                      style="
+                    <span style="
                         color: rgba(255, 255, 255, 1);
                         font-size: 14px;
                         font-weight: 400;
-                      "
-                      >3800k</span
-                    >
+                      ">3800k</span>
                   </div>
                 </div>
               </div>
@@ -715,24 +1016,23 @@
         </a-tab-pane>
       </a-tabs>
     </div>
-    <div class="arrow-indicator" v-show="visible">
-      <a-icon type="menu-fold" />
-    </div>
   </a-drawer>
   <div class="drawer-title1" v-if="!visible">
-    <a-button @click="toggleDrawer">
-      <left-outlined />
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <left-outlined style="color:rgba(255, 255, 255, 1)" />
     </a-button>
   </div>
   <div class="drawer-title2" v-if="visible">
-    <a-button @click="toggleDrawer">
-      <right-outlined />
+    <a-button @click="toggleDrawer" class="arrowbtn">
+      <right-outlined style="color:rgba(255, 255, 255, 1)" />
     </a-button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { RightOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue';
+import { Background } from "@antv/x6/lib/registry";
 const toggleDrawer = () => {
   visible.value = !visible.value;
 };
@@ -752,11 +1052,29 @@ const selectButton = (button: Button) => {
 let singleSelection = true; // 默认为单选
 const selectAllCheckbox = ref(false);
 const showControlMode = ref(false);
+const showAllButtons = ref(false);
+// 限制显示的按钮数量
+const maxDisplayedButtons = 8;
+// 计算仅显示的按钮
+const limitedButtons = ref([
+  { label: "1区", selected: false },
+  { label: "2区", selected: false },
+  { label: "3区", selected: false },
+  { label: "4区", selected: false },
+])
 const buttons2 = ref([
   { label: "1区", selected: false },
   { label: "2区", selected: false },
   { label: "3区", selected: false },
   { label: "4区", selected: false },
+  { label: "1区", selected: false },
+  { label: "2区", selected: false },
+  { label: "3区", selected: false },
+  { label: "4区", selected: false },
+  { label: "1区", selected: false },
+  { label: "2区", selected: false },
+  { label: "3区", selected: false },
+  { label: "4区", selected: false },
 ]);
 const selectAll = () => {
   singleSelection = !singleSelection;
@@ -860,24 +1178,6 @@ const dataSource = ref([
     status: "待执行",
   },
 ]);
-const columns1 = [
-  {
-    title: "序号",
-    dataIndex: "key",
-  },
-  {
-    title: "执行时间",
-    dataIndex: "data",
-  },
-  {
-    title: "操作内容",
-    dataIndex: "planname",
-  },
-  {
-    title: "操作人",
-    dataIndex: "status",
-  },
-];
 const dataSource1 = ref([
   {
     key: "1",
@@ -902,23 +1202,84 @@ const dataSource1 = ref([
 const visible = ref(true);
 const activeKey = ref("1");
 
-const showDrawer = () => {
-  visible.value = true;
+const refresh = () => {
+  selectedButton.value = null;
+  showControlMode.value = false;
+  showControlScene.value = false;
+  selectedButton3.value = null;
+  selectedButton4.value = null;
 };
 // 操作日志
-
 const logModalVisible = ref(false);
-
 const handleRowClick = (record: any, index: number) => {
   // 处理行点击事件，例如选中行或者其他操作
   console.log(record, "=================", index);
   // 显示模态框
   logModalVisible.value = true;
 };
-
 const closeLogModal = () => {
   logModalVisible.value = false;
 };
+// 执行确认
+const executevisible = ref<boolean>(false);
+const showModal = () => {
+  executevisible.value = true;
+};
+const excuModal = () => {
+  console.log('取消111');
+  executevisible.value = false;
+};
+const handleOk = (e: MouseEvent) => {
+  console.log('ok1111');
+  executevisible.value = false;
+};
+// 添加模态框
+const addvisible = ref<boolean>(false);
+const addModal = () => {
+  addvisible.value = true;
+};
+// 穿梭框
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
+const mockData = ref([
+  {
+    key: "1",
+
+    title: "计划再开",
+
+  },
+  {
+    key: "2",
+
+    title: "检修模式",
+
+  },
+  {
+    key: "3",
+
+    title: "设备变更",
+
+  },
+]);
+// const mockData = ref<MockData[]>([]);
+const targetKeys = ref<string[]>([]);
+const filterOption = (inputValue: string, option: MockData) => {
+  return option.description.indexOf(inputValue) > -1;
+};
+const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+  console.log(keys, direction, moveKeys);
+};
+const handleSearch = (dir: string, value: string) => {
+  console.log('search:', dir, value);
+};
+const addhandleOk = (e: MouseEvent) => {
+  console.log(e);
+  addvisible.value = false;
+};
 </script>
 
 <style lang="less" scoped>
@@ -941,6 +1302,7 @@ const closeLogModal = () => {
   background-color: rgba(67, 136, 251, 1);
   cursor: pointer;
 }
+
 .table1 {
   margin-top: 20px;
   width: 100%;
@@ -950,6 +1312,7 @@ const closeLogModal = () => {
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.1);
 }
+
 .lightarea,
 .circuitarea,
 .controlarea,
@@ -984,11 +1347,9 @@ const closeLogModal = () => {
   width: 110px;
   height: 23px;
   opacity: 1;
-  background: linear-gradient(
-    270deg,
-    rgba(86, 221, 253, 0) 0%,
-    rgba(25, 176, 255, 1) 100%
-  );
+  background: linear-gradient(270deg,
+      rgba(86, 221, 253, 0) 0%,
+      rgba(25, 176, 255, 1) 100%);
 }
 
 .lightareatab,
@@ -1030,6 +1391,12 @@ const closeLogModal = () => {
   margin-left: 177px;
 }
 
+.openzm {
+  color: rgba(34, 183, 255, 1);
+  margin-left: 20px;
+  font-size: 14px;
+}
+
 .custom-checkbox {
   width: 13px;
   height: 13px;
@@ -1072,11 +1439,9 @@ p {
 }
 
 .selected {
-  background: linear-gradient(
-    180deg,
-    rgba(201, 245, 255, 1) 0%,
-    rgba(138, 215, 255, 1) 100%
-  );
+  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);
 }
@@ -1151,7 +1516,7 @@ p {
   grid-template-rows: 1fr 1fr;
 }
 
-.lightparameterstextarea > p {
+.lightparameterstextarea>p {
   height: 100%;
   display: flex;
   border: 1px solid rgba(236, 239, 245, 1);
@@ -1235,6 +1600,8 @@ p {
   margin-right: 20px;
 }
 
+
+
 .atable {
   margin-top: 20px;
 }
@@ -1263,8 +1630,7 @@ p {
   height: 33px;
   top: 0;
   bottom: 0;
-  right: 30px;
-  background-color: red;
+  right: 20px;
   margin: auto;
   z-index: 99999;
 }
@@ -1275,14 +1641,28 @@ p {
   height: 33px;
   top: 0;
   bottom: 0;
-  right: 500px;
-  background-color: red;
+  right: 495px;
   margin: auto;
   z-index: 99999;
 }
 
+.arrowbtn {
+  display: flex;
+  /* 使用 flex 布局 */
+  justify-content: center;
+  /* 水平居中 */
+  align-items: center;
+  /* 垂直居中 */
+  width: 28px;
+  height: 28px;
+  background: rgba(0, 0, 0, 1);
+  opacity: 0.5;
+  border: none;
+}
+
 /deep/ .ant-tabs-tab-btn {
-  color: white; /* 背景颜色改为白色 */
+  color: white;
+  /* 背景颜色改为白色 */
 }
 
 /deep/.ant-table {
@@ -1304,14 +1684,51 @@ p {
 
 .lighting-img {
   width: 100%;
-  height:934px;
+  height: 100%;
   object-fit: cover;
 }
 
+@media screen and (min-width: 0px) and (max-width: 959px) {
+  .lighting-img {}
+}
+
+@media screen and (min-width: 960px) and (max-width: 1023px) {
+  .lighting-img {}
+}
+
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .lighting-img {}
+}
+
+/*>=1280,<1440的设备屏幕*/
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .lighting-img {}
+}
+
+@media screen and (min-width: 1440px) and (max-width: 1679px) {
+  .lighting-img {}
+}
+
+/*>=1680,<1920px的设备屏幕*/
+@media screen and (min-width: 1680px) and (max-width: 1919px) {
+  .lighting-img {}
+}
+
+/*>=1920的设备屏幕*/
+@media (min-width: 1920px) {
+  .lighting-img {
+    height: 1191px;
+  }
+}
+
 .lighting-img-box {
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  /* 设置图片容器的高度为视口高度 */
+  overflow: hidden;
+  /* 隐藏溢出部分 */
   position: relative;
+  /* 使内部绝对定位元素基于此容器定位 */
 }
 
 .lighting-img-box img {
@@ -1322,6 +1739,11 @@ p {
   position: relative;
 }
 
+.lighting-img-box img {
+  width: 100%;
+  height: auto;
+}
+
 .lighting-img-box {
   width: 100%;
   height: 100%;
@@ -1333,6 +1755,7 @@ p {
   height: 100%;
   object-fit: cover;
 }
+
 .F1 {
   width: 120px;
   height: 50.72px;
@@ -1344,6 +1767,7 @@ p {
   font-weight: 400;
   color: rgba(255, 255, 255, 1);
 }
+
 .F2,
 .platform {
   width: 120px;
@@ -1357,58 +1781,67 @@ p {
   border: 1px solid rgba(39, 120, 255, 1);
   margin-top: 20px;
 }
+
 .btn-box {
   position: fixed;
   top: 100px;
   left: 250px;
 }
-.lighting-img-box > .bulbBox > .wh100 {
+
+.lighting-img-box>.bulbBox>.wh100 {
   width: 38px;
   height: calc(38px + 19px);
 }
-.lighting-img-box > .bulbBox > .bulbLogo1 {
+
+.lighting-img-box>.bulbBox>.bulbLogo1 {
   position: absolute;
   top: 111px;
   left: 111px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo2 {
+
+.lighting-img-box>.bulbBox>.bulbLogo2 {
   position: absolute;
   top: 222px;
   left: 222px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo3 {
+
+.lighting-img-box>.bulbBox>.bulbLogo3 {
   position: absolute;
   top: 333px;
   left: 333px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo4 {
+
+.lighting-img-box>.bulbBox>.bulbLogo4 {
   position: absolute;
   top: 444px;
   left: 444px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo5 {
+
+.lighting-img-box>.bulbBox>.bulbLogo5 {
   position: absolute;
   top: 555px;
   left: 555px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo6 {
+
+.lighting-img-box>.bulbBox>.bulbLogo6 {
   position: absolute;
   top: 666px;
   left: 666px;
   display: flex;
   align-items: center;
 }
-.lighting-img-box > .bulbBox > .bulbLogo7 {
+
+.lighting-img-box>.bulbBox>.bulbLogo7 {
   position: absolute;
   top: 777px;
   left: 777px;
@@ -1418,6 +1851,7 @@ p {
 
 .editable-cell {
   position: relative;
+
   .editable-cell-input-wrapper,
   .editable-cell-text-wrapper {
     padding-right: 24px;
@@ -1453,9 +1887,11 @@ p {
     margin-bottom: 8px;
   }
 }
+
 .editable-cell:hover .editable-cell-icon {
   display: inline-block;
 }
+
 .div-operation {
   width: 3px;
   height: 13px;
@@ -1463,23 +1899,27 @@ p {
   border-radius: 1px;
   background: rgba(67, 136, 251, 1);
 }
+
 .text-operation {
   color: rgba(255, 255, 255, 1);
   font-size: 16px;
   font-weight: 700;
   margin-left: 5px;
 }
+
 .div-operation,
 .text-operation {
   display: inline-block;
 }
+
 .journal {
   padding: 3% 10%;
   background-image: url("../../../../public/bulbLogo/bgsquare.png");
-  background-size: 482px 177px;
-  width: 482px;
+  background-size: 450px 177px;
+  width: 450px;
   height: 177px;
 }
+
 .gird22 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -1488,20 +1928,62 @@ p {
   grid-row-gap: 20px;
   margin-top: 10px;
 }
+
 .bulbLogo1 {
   background-image: url("../../../../public/bulbLogo/bulbLogo1.png");
 }
+
 .imgText {
   display: flex;
   align-items: center;
 }
+
 :deep(.ant-modal-content) {
   width: 555px;
   height: 792px;
 }
+
 :deep(.ant-modal-body) {
   width: 555px;
   max-height: 792px !important;
   box-sizing: border-box;
 }
+
+.text-change {
+
+  text-align: center;
+  color: rgba(255, 255, 255, 1);
+  font-size: 20px;
+}
+
+.excuno {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+}
+
+.excuok {
+  width: 150px;
+  height: 40px;
+  margin-top: 30px;
+}
+
+.excubtn {
+  display: flex;
+  justify-content: space-between;
+}
+
+.addok {
+  width: 74px;
+  height: 40px;
+  opacity: 1;
+  border-radius: 4px;
+  background: rgba(67, 136, 251, 1);
+  border: rgba(67, 136, 251, 1);
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  margin-top: 440px;
+  margin-left: 350px;
+}
 </style>