add:增加照明系统前端交互

hx-ai-intelligent/src/view/equipmentControl/lightingManage/dialogStyle.less

@@ -0,0 +1,141 @@
+.out-dialog {
+  position: fixed;
+  right: 496px;
+  width: 500px;
+  height: 100%;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  box-sizing: border-box;
+  color: rgb(255, 83, 0);
+  background: black;
+  display: flex;
+  padding: 25px;
+  flex-direction: column;
+  .content {
+    overflow-y: scroll;
+    .div-operation {
+      display: inline-block;
+      width: 3px;
+      height: 13px;
+      opacity: 1;
+      border-radius: 1px;
+      background: rgba(67, 136, 251, 1);
+    }
+    .text-operation {
+      display: inline-block;
+      color: rgba(255, 255, 255, 1);
+      font-size: 16px;
+      font-weight: 700;
+      margin-left: 5px;
+    }
+    .j-box {
+      background-color: #000;
+      opacity: 1;
+      z-index: 99999;
+      overflow-y: scroll;
+      .journal {
+        padding: 1% 3%;
+        width: 100%;
+        height: 150px;
+        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%
+          );
+        }
+      }
+      .btn-box {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        grid-row-gap: 15px;
+        .btn-item {
+          text-align: center;
+          display: flex;
+          align-content: space-between;
+          .left {
+            width: 70px;
+            height: 35px;
+            line-height: 35px;
+            border-radius: 4px;
+            background: linear-gradient(
+              180deg,
+              rgba(1, 206, 255, 1) 0%,
+              rgba(0, 150, 229, 1) 100%
+            );
+            color: rgba(255, 255, 255, 1);
+            font-size: 14px;
+            font-weight: 400;
+          }
+          .right {
+            width: 140px;
+            height: 35px;
+            line-height: 35px;
+            span {
+              vertical-align: middle;
+            }
+            img {
+              padding: 0 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .button-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 60px;
+    position: absolute;
+    background-color: transparent;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .execute, .cancel {
+      margin-right: 10px;
+      width: 74px;
+      height: 40px;
+      opacity: 1;
+      cursor: pointer;
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 400;
+      border: 0;
+      margin-left: 10px;
+    }
+    .execute {
+      background: rgb(67, 136, 251);
+      color: white;
+    }
+    .cancel {
+      background: white;
+      color: black;
+    }
+  }
+}

hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.less

@@ -1,156 +0,0 @@
-// 页面容器
-.lighting-box {
-    // width: 100%;
-    // height: 100%;
-    position: relative;
-    // background: linear-gradient(#badaff, #8cabeb, #7095de);
-    // 照明设备功能总容器
-    .lighting-img-box {
-        position: relative;
-        width: 1280px;
-        height: 720px;
-        user-select: none;
-        background-image: url(../image/bg.jpg);
-        // 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性
-        perspective: 1000px;
-        perspective-origin: 850px -160px;
-        // 左上角区域切换功能
-        .btn-box {
-            width: 120px;
-            position: sticky;
-            top: 10px;
-            left: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            .btn-item {
-                cursor: pointer;
-                width: 100%;
-                height: 40px;
-                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: 18px;
-                color: white;
-            }
-            .btn-item:hover {
-                color: black;
-            }
-        }
-        // 大区分区
-        .area{
-            position: absolute;
-            bottom: 170px;
-            left: 240px;
-            width: 780px;
-            height: 240px;
-            transform: rotateX(79deg) rotateZ(-22deg) skew(29deg);
-            display: flex;
-            gap: 8px;  
-            .area1 {
-                width: 170px;
-                background: rgba(0, 251, 91, 0.3);
-                border: 2px solid rgb(0, 251, 91);
-                display: flex;
-            }   
-            .area2 {
-                width: 240px;
-                background: rgba(255, 165, 0, 0.3);
-                border: 2px solid rgb(255, 165, 0);
-                display: flex;
-            } 
-            .area3 {
-                width: 110px;
-                background: rgba(255, 0, 0, 0.3);
-                border: 2px solid rgb(255, 0, 0);
-            } 
-            .area4 {
-                flex: 1;
-                background: rgba(80, 236, 244, 0.3);
-                border: 2px solid rgb(80, 236, 244);
-            } 
-            // .area-item:hover {
-            //     transform: scale(1.05);
-            // }
-            .area-item {
-                cursor: pointer;
-                transition: all ease 0.2s;
-                >.light-group {
-                    height: 100%;
-                    flex: 1;
-                    display:flex;
-                    justify-content: center;
-                    align-items: center;
-                    .group-shadow1 {
-                        width: 35px;
-                        height: 150px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow2 {
-                        width: 35px;
-                        height: 180px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow3 {
-                        width: 40px;
-                        height: 180px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                    .group-shadow4 {
-                        width: 40px;
-                        height: 160px;
-                        border-radius: 20px;
-                        background: rgba(0, 0, 0, 0.1);
-                    }
-                }
-                // .group-shadow {
-                //     transition: all ease 0.2s;
-                // }
-                // .group-shadow:hover {
-                //     transform: scale(1.05);
-                // }
-            }
-        }
-    }
-}
-// 总容器与抽屉按钮
-.ns-content-main {
-    position: relative;
-    // 抽屉打开按钮
-    .drawer-box-in {
-        width: 30px;
-        height: 40px;
-        border-radius: 2px;
-        position: fixed;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        background: rgba(0, 0 ,0 ,0.5);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-    // 抽屉关闭按钮
-    .drawer-box-out {
-        width: 30px;
-        height: 40px;
-        border-radius: 2px;
-        position: fixed;
-        right: 496px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        background: rgba(0, 0 ,0 ,0.5);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-    }
-    
-}

hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue

@@ -3,19 +3,19 @@
         <div class="lighting-img-box">
             <!-- 左上角，区域切换 -->
             <div class="btn-box">
-                <button class="btn-item">1F</button>
+                <button class="btn-item" @click=changeArea(1)>1F</button>
-                <button class="btn-item">2F</button>
+                <button class="btn-item" @click=changeArea(2)>2F</button>
-                <button class="btn-item">站台</button>
+                <button class="btn-item" @click=changeArea(3)>站台</button>
             </div>
             <!-- 楼层区域 -->
             <div class="area">
                 <div 
                 v-for="(item, index) in treeData" 
-                :class="computedClass(item.id)"
+                :class="computedClass(String(item.id))"
-                @click="getArea(item.id)"
+                @click="getArea(item)"
                 :key="index">
                     <div v-for="(v, i) in item.children" :key="i" class="light-group">
-                        <div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
+                        <div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v)"></div>
                     </div>
                 </div>
             </div>
@@ -40,16 +40,18 @@
         placement="right"
         :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
         :closable="false"
-        id="Odrawer"
+        id="drawer"
         :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
             <a-tabs v-model:activeKey="activeKey">
                 <a-tab-pane key="1" tab="控制面板">
                     <tabs1 @changeArea="getArea" :treeData="treeData"></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
-
+                    <tabs2></tabs2>
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="日志">
+                    <tabs3></tabs3>
                 </a-tab-pane>
-                <a-tab-pane key="3" tab="日志"></a-tab-pane>
             </a-tabs>
         </a-drawer>
     </div>
@@ -61,15 +63,17 @@ import { ref } from 'vue';
 import { treeData } from './treeData'
 import light from './light.vue';
 import tabs1 from './tabs1.vue'
+import tabs2 from './tabs2.vue'
+import tabs3 from './tabs3.vue'
 // ICON
 import {
     DoubleLeftOutlined,
     DoubleRightOutlined
   } from '@ant-design/icons-vue';
 
-// 分区 - 当前选择的分区 - 默认选择一区
+// 分区 - 当前选择的分区序号 - 默认选择一区
-let area = ref(['1'])
+const area = ref(['1'])
-// 分区 - 分区小灯泡
+// 分区 - 分区小灯泡 - 此处位置需前端写死
 const bulbs = ref([
     {
         styleText: { left: '190px', bottom: '200px' },
@@ -121,6 +125,16 @@ const bulbs = ref([
     },
 ])
 
+// 分区 - 左上角分区切换
+const changeArea = (area: number) => {
+    if (area == 1) {
+        console.log('1F')
+    } else if (area == 2) {
+        console.log('2F')
+    } else if (area == 3) {
+        console.log('站台')
+    }
+}
 // 分区 - 单个分区切换
 const getArea = (result: any) => {
     // 如果传入的值是数组
@@ -132,16 +146,14 @@ const getArea = (result: any) => {
         area.value[0] = String(result)
     } 
 }
-// 分区 - 多个分区切换，只有照明回路能够触发多个分区
 // 分区 - 样式函数
-const computedClass = (number: number) => {
+const computedClass = (string: string) => {
-    if (area.value.indexOf(number) != -1) {
+    if (area.value.indexOf(string) != -1) {
-        return `isActive area-item area${number}`
+        return `isActive area-item area${string}`
     } else {
-        return `area-item area${number}`
+        return `area-item area${string}`
     }
 }
-
 // 抽屉 - 当前选择的tab
 let activeKey = ref('1');
 // 抽屉 - 打开状态
@@ -153,7 +165,7 @@ const toggleDrawer = () => {
 
 </script>
 <style lang="less" scoped>
-@import "./indexs.less";
+@import "./index.less";
 .isActive {
     border: 3px solid white !important;
 }

hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs1.vue

@@ -1162,16 +1162,11 @@
     selectedButton.value = null;
     showControlMode.value = false;
     showControlScene.value = false;
-    selectedButton3.value = null;
+    selectedButton3.value = '';
-    selectedButton4.value = null;
+    selectedButton4.value = '';
   };
 
-  // 操作日志
+  
-  const logModalVisible = ref(false);
-  const handlerefClick1 = () => {
-    console.log(1111);
-    executevisible.value = true;
-  };
 
   let trindex = ref('-1');
   const handleRowClick = (index: any) => {
@@ -1192,9 +1187,7 @@
   };
   // 添加模态框
   const addvisible = ref<boolean>(false);
-  const addModal = () => {
+  
-    addvisible.value = true;
-  };
   // 穿梭框
   interface MockData {
     key: string;

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

@@ -12,7 +12,7 @@
     <div class="area">
       <template v-if="!showAllButtonsArea">
         <button v-for="(button, index) in limitedButtons1" :key="index"
-          :class="{ btn: true, selected: button.selected }" @click="selectButton(button, index)">
+          :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
           {{ button.label }}
         </button>
         <div style="margin-top: 10px">
@@ -20,8 +20,8 @@
         </div>
       </template>
       <template v-else>
-        <button v-for="(button, index) in props.treeData" :key="index"
+        <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
-          :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
+          @click="selectButton(button)">
           {{ button.label }}
         </button>
         <div style="margin-top: 10px">
@@ -36,7 +36,7 @@
       <div class="circuit-tab"></div>
       <span class="circuit-text">照明回路</span>
       <div class="btn2">
-        <button class="openplan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
+        <button class="openPlan" :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }" @click="togglePlan2">
           {{ isPlanEnabled2 ? '启用面板' : '禁用面板' }}
         </button>
         <a-switch v-model:checked="selectAllCheckbox" :disabled="singleSelection" :class="{
@@ -49,7 +49,7 @@
         </button>
       </div>
     </div>
-    <div class="btnarea" v-if="selectedButton">
+    <div class="btnArea" v-if="selectedButton">
       <template v-if="!showAllButtons">
         <button v-for="(button2, index) in limitedButtons2" :key="index"
           :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
@@ -80,7 +80,7 @@
     <!-- 控制模式按钮部分 -->
     <div class="control-mode-btn-area" v-show="showControlMode">
       <button v-for="(button3, index) in controlType" :key="index"
-        :class="{ btn: true, selected: button3.type === thisButtonType }" @click="selectButton3(button3)">
+        :class="{ btn: true, selected: button3.type == thisButton.type }" @click="selectButton3(button3)">
         {{ button3.name }}
       </button>
     </div>
@@ -119,7 +119,7 @@
             :style="{ height: '50px' }">
             <td>{{ row.num }}</td>
             <td>{{ row.light }}</td>
-            <td>{{ row.tempruter }}</td>
+            <td>{{ row.temperature }}</td>
           </tr>
         </tbody>
       </table>
@@ -130,170 +130,71 @@
     <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="{
+  <div class="out-dialog" v-if="executeVisible">
-        opacity: 1,
+    <div class="content" v-if="executeVisible">
-        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="j-box" 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;
+              <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
-              <span class="titletext" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
+              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
-        item.name }}</span>
             </div>
-            <button class="cxbtn" @click="delbtn(item.id)">撤销</button>
+            <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
           </div>
-          <div class="control-btn">
+          <div class="btn-box">
-            <button style="
+            <div class="btn-item">
-                width: 96px;
+              <div class="left">控制模式</div>
-                height: 40px;
+              <div class="right">
-                border-radius: 4px;
+                <span>手动</span>
-                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="
+                <span>自动</span>
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-                margin-right: 40px;
-              ">自动</span>
               </div>
-          <div class="light-btn">
+            </div>
-            <button style="
+            <div class="btn-item">
-                width: 68px;
+              <div class="left">
-                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="control-area-btn">
+              <div class="right">
-            <button style="
+                <span>100lux</span>
-                width: 96px;
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                height: 40px;
+                <span>30lux</span>
-                border-radius: 4px;
+              </div>
-                background: linear-gradient(
+            </div>
-                  180deg,
+            <div class="btn-item">
-                  rgba(1, 206, 255, 1) 0%,
+              <div class="left">
-                  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">
+              <div class="right">
-            <button style="
+                <span>手动</span>
-                width: 68px;
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                height: 40px;
+                <span>自动</span>
-                border-radius: 4px;
+              </div>
-                background: linear-gradient(
+            </div>
-                  180deg,
+            <div class="btn-item">
-                  rgba(1, 206, 255, 1) 0%,
+              <div class="left">
-                  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>
+              </div>
-            <span style="
+              <div class="right">
-                color: rgba(255, 255, 255, 1);
+                <span>4000k</span>
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 12px;
-                margin-right: 8px;
-              ">4000k</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-            <span style="
+                <span>3800k</span>
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-weight: 400;
-                margin-left: 8px;
-              ">3800k</span>
               </div>
             </div>
           </div>
         </div>
-  </a-modal> -->
+      </div>
+    </div>
+    <div style="width: 100%; height: 60px;"></div>
+    <div class="button-box">
+      <button class="cancel" @click="executeVisible = false">取消</button>
+      <button class="execute">执行</button>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -307,19 +208,23 @@ import {
 
 // 初始化
 onMounted(() => {
-  const tree = props.treeData
+  const data = props.treeData[0]
   // 默认选中第一个分区
-  tree[0].selected = true
+  data.selected = true
   // 默认展示第一个分区的回路
-  buttons2.value = tree[0].children
+  buttons2.value = data.children
 })
 
 // 与父组件的交互  ===================================================================
 const props = defineProps({
   // 分区结构（照明区域 > 照明回路）
   treeData: {
-    type: Array
+    type: Array,
+    default: []
   },
+  line: {
+    type: Array
+  }
 });
 const emit = defineEmits(['changeArea']);
 
@@ -336,20 +241,13 @@ const togglePlan = () => {
 const showAllButtonsArea = ref(false);
 // 照明区域 - 分区 - 被选中的按钮  默认为1
 const selectedButton = ref('1');
-// 照明区域 - 区域切换（按钮点击）事件
+// 照明区域 - 区域切换（按钮点击-单选）事件
-const selectButton = (button: any, index: number) => {
+const selectButton = (button: any) => {
   // 当前选中按钮
   selectedButton.value = button;
-  // 分区只能单选
+  // 重置
-  props.treeData.forEach(item => {
+  initMenu(1)
-    item.selected = false
-  })
   button.selected = true
-  // 切换1级分区时，重置二级分区
-  buttons2.value.forEach(item => {
-    item.selected = false
-  })
-  showControlMode.value = false
   buttons2.value = button.children
   // 反选area
   emit('changeArea', []);
@@ -375,16 +273,7 @@ const togglePlan2 = () => {
   isPlanEnabled2.value = !isPlanEnabled2.value;
   // 禁用 - 则取消选中，增加禁止图标
   if (isPlanEnabled2.value) {
-    item.selected = false;
     item.stop = true
-    let level1 = String(selectedButton.value.id)
-    let arr = [level1]
-    buttons2.value.forEach(item => {
-      if (item.selected) {
-        arr.push(item.id)
-      }
-    })
-    emit('changeArea', arr)
     // 启用 - 去除禁止图标
   } else {
     item.stop = false
@@ -410,10 +299,8 @@ const toggleAllSelection = () => {
   // 全选
   if (selectAllCheckbox.value) {
     buttons2.value.forEach((item) => {
-      if (!item.stop) {
       item.selected = true;
       arr.push(item.id)
-      } 
     });
     // 全不选
   } else {
@@ -431,7 +318,7 @@ const toggleSelection = (button: any) => {
   zmhlid.value = button.id
   // 如果已被锁定，则展示禁用/启用状态跳出
   if (button.stop) {
-    return isPlanEnabled2.value = true
+    isPlanEnabled2.value = true
   } else {
     isPlanEnabled2.value = false
   }
@@ -455,17 +342,22 @@ const toggleSelection = (button: any) => {
         arr.push(item.id)
       }
     });
-    console.log(arr)
     emit('changeArea', arr)
   }
   // 用于展示控制模式
   if (button.selected) {
+    // 发生了选中事件
     showControlMode.value = true
-    thisButtonType.value = button.type
     thisButton.value = button
+    if (button.type == 3) {
+      showControlScene.value = true
     } else {
+      showControlScene.value = false
+    }
+  } else {
+    // 未发生选中 或 多选被取消
     showControlMode.value = false
-    thisButton.value = null
+    thisButton.value = { type: '0' }
   }
 
 };
@@ -479,16 +371,12 @@ const buttons2 = ref([]);
 // 控制模式 =======================================================================
 // 控制模式 - 决定该区域是否显示
 const showControlMode = ref(false);
-const thisButtonType = ref(null)
+const thisButton = ref({ type: '0' })
-const thisButton = ref(null)
-// 控制模式 - 当前选择按钮
-const selectedButton3 = ref('');
 // 控制模式 - 按钮切换
 const selectButton3 = (button3) => {
   thisButton.value.type = button3.type
-  thisButtonType.value = button3.type
   showControlScene.value = button3.name === '手动';
-  selectedButton4.value = ''; // 清空选中的控制场景按钮
+  selectedButton4.value = null; // 清空选中的控制场景按钮
 };
 
 // 控制场景 =======================================================================
@@ -502,7 +390,7 @@ const controlSceneButtons = ref([
   { label: '客流高峰', selected: false },
 ]);
 // 控制场景 - 当前选择按钮
-const selectedButton4 = ref('');
+const selectedButton4 = ref(null);
 // 控制场景 - 按钮切换
 const selectButton4 = (button4) => {
   selectedButton4.value = button4.label;
@@ -510,33 +398,112 @@ const selectButton4 = (button4) => {
 
 // 灯具参数 ========================================================================
 // 灯具参数 - 表格数据
-const lightSource = ref([{ num: '8/10', light: '100', tempruter: '4200' }]);
+const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);
 
+let trIndex = ref('-1');
 const handleRowClick = (index: any) => {
-    trindex.value = index;
+  trIndex.value = index;
-    if (index === trindex.value) {
+  if (index === trIndex.value) {
     console.log('tri');
   }
-    // 显示模态框
-    logModalVisible.value = true;
 };
 
-// 底部表格 ========================================================================
+// 内侧弹窗 ========================================================================
+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 cxList = cxList.value.concat(cxList.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;
+  }
+};
+// 其他业务 ========================================================================
+
+// 用于初始化5级联动的菜单
+const initMenu = (tier: number) => {
+  // 1 = 照明区域 - 切换时，重置以下所有菜单
+  if (tier == 1) {
+    // 切换前，清除照明回路的选中状态
+    buttons2.value.forEach(item => {
+      item.selected = false
+    })
+    // 切换后，清空所有选中状态
+    props.treeData.forEach(item => {
+      item.selected = false
+    })
+    // 控制模式 隐藏
+    showControlMode.value = false;
+    // 控制场景 隐藏
+    showControlScene.value = false;
+    // 灯具参数 隐藏
+    selectedButton4.value = null;
+  } else if (tier == 2) {
+    // 控制场景 隐藏
+    showControlScene.value = false;
+    // 灯具参数 隐藏
+    selectedButton4.value = null;
+  }
+}
+// 刷新
 const refresh = () => {
-    selectedButton.value = {};
+  executeVisible.value = false
+  selectedButton.value = '1';
+  emit('changeArea', []);
+  emit('changeArea', [1]);
   showControlMode.value = false;
   showControlScene.value = false;
-    selectedButton3.value = null;
   selectedButton4.value = null;
 };
 // 执行确认
-const executevisible = ref<boolean>(false);
+const executeVisible = ref<boolean>(false);
 const showModal = () => {
-    executevisible.value = true;
+  executeVisible.value = true;
 };
 </script>
 <style lang="less" scoped>
+@import "./dialogStyle.less";
+
 // 抽屉
 .drawer-item {
 
@@ -614,7 +581,7 @@ const executevisible = ref<boolean>(false);
     cursor: not-allowed;
   }
 
-  .openplan.enabled2 {
+  .openPlan.enabled2 {
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -627,7 +594,7 @@ const executevisible = ref<boolean>(false);
     color: white;
   }
 
-  .openplan.disabled2 {
+  .openPlan.disabled2 {
     border: none;
     font-size: 14px;
     font-weight: 400;
@@ -639,7 +606,7 @@ const executevisible = ref<boolean>(false);
     background-color: red;
   }
 
-  .openplan:disabled {
+  .openPlan:disabled {
     cursor: not-allowed;
   }
 
@@ -714,7 +681,7 @@ const executevisible = ref<boolean>(false);
   }
 
   .area,
-  .btnarea,
+  .btnArea,
   .control-mode-btn-area,
   .control-scene-btn-area {
     margin-left: -17px;
@@ -828,7 +795,6 @@ const executevisible = ref<boolean>(false);
     position: fixed;
     bottom: 0;
     right: 0;
-    margin-bottom: 10px;
   }
 
   .execute {
@@ -836,6 +802,7 @@ const executevisible = ref<boolean>(false);
     width: 74px;
     height: 40px;
     opacity: 1;
+    cursor: pointer;
     border-radius: 4px;
     background: rgba(67, 136, 251, 1);
     font-size: 14px;
@@ -848,6 +815,7 @@ const executevisible = ref<boolean>(false);
   .flushed {
     width: 74px;
     height: 40px;
+    cursor: pointer;
     opacity: 1;
     border-radius: 4px;
     font-size: 14px;
@@ -857,50 +825,6 @@ const executevisible = ref<boolean>(false);
     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: white;
-  }
-
-  .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;
   }
@@ -1006,9 +930,12 @@ const executevisible = ref<boolean>(false);
     display: flex;
     align-items: center;
   }
+
   .zmhlbtn {
     position: relative;
   }
+
+  // 禁用图标
   .anticon-stop {
     position: absolute;
     right: 3px;

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs2.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="div-add">
+    <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: rgb(57, 215, 187);
+              border: 1px solid rgb(57, 215, 187);
+            ">
+            {{ 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);
+              color: rgba(243, 97, 99);
+            ">
+            {{ row.status }}
+          </button>
+        </td>
+        <td>
+          <button class="tabReboot" @click="handleRefClick1">重启</button>
+          <button class="tabDelete">删除</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="out-dialog" v-if="addVisible">
+    <div class="content" v-if="addVisible">
+      <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)', height: 'calc(100vh - 200px)' }" />
+    </div>
+    <div style="width: 100%; height: 60px;"></div>
+    <div class="button-box">
+      <button class="cancel" @click="addVisible = false">取消</button>
+      <button class="execute">确定</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 初始化
+onMounted(() => {
+  
+})
+
+// 表格数据
+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 addVisible = ref<boolean>(false);
+// 操作日志
+const handleRefClick1 = () => {
+  alert(111)
+};
+const addModal = () => {
+  addVisible.value = true;
+};
+const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+  console.log(keys, direction, moveKeys);
+};
+const handleSearch = (dir: string, value: string) => {
+  console.log('search:', dir, value);
+};
+
+// 穿梭框 相关业务
+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;
+};
+
+
+</script>
+<style lang="less" scoped>
+@import "./dialogStyle.less";
+
+// 右下角添加按钮
+.div-add {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin-right: 20px;
+  .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);
+  }
+}
+// 表格
+.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%;
+  border: 1px solid rgba(255, 255, 255);
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.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;
+  }
+}
+::v-deep(.ant-transfer) {
+  // 屏蔽自带的hover效果
+  .ant-transfer-list-content-item:hover {
+    background: black;
+  }
+}
+  
+
+</style>

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

@@ -0,0 +1,255 @@
+<template>
+  <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>
+  <div class="out-dialog" v-if="logModalVisible">
+    <div class="content" v-if="logModalVisible">
+      <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="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
+              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{
+        item.name }}</span>
+            </div>
+          </div>
+          <div class="btn-box">
+            <div class="btn-item">
+              <div class="left">控制模式</div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                亮度
+              </div>
+              <div class="right">
+                <span>100lux</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>30lux</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                控制场景
+              </div>
+              <div class="right">
+                <span>手动</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>自动</span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left">
+                色温
+              </div>
+              <div class="right">
+                <span>4000k</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>3800k</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="height: 60px;"></div>
+    <div class="button-box">
+      <button class="cancel" @click="logModalVisible = false">取消</button>
+    </div>
+  </div>
+  <div class="div-add">
+    <button class="add">刷新</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 初始化
+onMounted(() => {
+
+})
+
+// 与父组件的交互  ===================================================================
+const props = defineProps({
+  // 分区结构（照明区域 > 照明回路）
+  treeData: {
+    type: Array
+  },
+});
+const emit = defineEmits(['changeArea']);
+
+// 表格数据
+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 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',
+  },
+]);
+let trIndex = ref('-1');
+const logModalVisible = ref(false);
+const handleRowClick = (index: any) => {
+  trIndex.value = index;
+  if (index === trIndex.value) {
+    console.log('tri');
+  }
+  // 显示模态框
+  logModalVisible.value = true;
+};
+
+
+</script>
+<style lang="less" scoped>
+@import "./dialogStyle.less";
+
+// 右下角添加按钮
+.div-add {
+
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin-right: 20px;
+  .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);
+  }
+}
+
+// 表格
+.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%;
+  border: 1px solid rgba(255, 255, 255);
+  border-radius: 5px;
+  background: rgba(255, 255, 255, 0.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;
+  }
+
+  .isTrIndex {
+    background: rgba(67, 136, 251, 1);
+  }
+}
+
+::v-deep(.ant-transfer) {
+
+  // 屏蔽自带的hover效果
+  .ant-transfer-list-content-item:hover {
+    background: black;
+  }
+}
+</style>