fix:照明系统修改

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

@@ -4,24 +4,6 @@
     // height: 100%;
     position: relative;
     // background: linear-gradient(#badaff, #8cabeb, #7095de);
-    .drawer-box {
-        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-icon {
-                
-        }
-    }
     // 照明设备功能总容器
     .lighting-img-box {
         position: relative;
@@ -88,9 +70,9 @@
                 background: rgba(80, 236, 244, 0.3);
                 border: 2px solid rgb(80, 236, 244);
             } 
-            .area-item:hover {
+            // .area-item:hover {
-                border:2px solid white;
+            //     transform: scale(1.05);
-            }
+            // }
             .area-item {
                 cursor: pointer;
                 transition: all ease 0.2s;
@@ -125,20 +107,21 @@
                         background: rgba(0, 0, 0, 0.1);
                     }
                 }
-                .group-shadow {
+                // .group-shadow {
-                    transition: all ease 0.2s;
+                //     transition: all ease 0.2s;
-                }
+                // }
-                .group-shadow:hover {
+                // .group-shadow:hover {
-                    border: 2px solid white;
+                //     transform: scale(1.05);
-                }
+                // }
             }
         }
     }
 }
+// 总容器与抽屉按钮
 .ns-content-main {
     position: relative;
-    // 抽屉伸缩按钮
+    // 抽屉打开按钮
-    .drawer-box {
+    .drawer-box-in {
         width: 30px;
         height: 40px;
         border-radius: 2px;
@@ -152,8 +135,22 @@
         justify-content: center;
         align-items: center;
         cursor: pointer;
-        .drawer-icon {
-                
-        }
     }
+    // 抽屉关闭按钮
+    .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

@@ -9,73 +9,156 @@
             </div>
             <!-- 楼层区域 -->
             <div class="area">
-                <div class="area-item area1" :class="{ 'isActive': area === 1 }" @click="getArea(1)">
+                <div 
-                    <div class="light-group">
+                v-for="(item, index) in treeData" 
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
+                :class="computedClass(item.id)"
-                    </div>
+                @click="getArea(item.id)"
-                    <div class="light-group">
+                :key="index">
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
+                    <div v-for="(v, i) in item.children" :key="i" class="light-group">
-                    </div>
+                        <div class="group-shadow group-shadow1" :class="computedClass(v.id)" @click.stop="getArea(v.id)"></div>
-                </div>
-                <div class="area-item area2" @click="getArea(2)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.1)"></div>
-                    </div>
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow2" @click.stop="getArea(2.2)"></div>
-                    </div>
-                </div>
-                <div class="area-item area3" @click="getArea(3)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow3" @click.stop="getArea(3.1)"></div>
-                    </div>
-                </div>
-                <div class="area-item area4" @click="getArea(4)">
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow4" @click.stop="getArea(4.1)"></div>
                     </div>
                 </div>
             </div>
             <!-- 照明设备 -->
             <div class="lights">
-                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
+                <light v-for="(item, index) in bulbs" :key="index" :styleObject="item.styleText" :type="item.type" :visible="item.visible"></light>
-                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
-                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
-                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
-                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
             </div>
         </div>
         <!-- 右侧抽屉的触发按钮 -->
-        <div class="drawer-box" v-if="!visible">
+        <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
-            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
+            <double-left-outlined class="drawer-icon" style="color: white" />
         </div>
-    </div>
+        <!-- 左侧抽屉的关闭按钮 -->
+        <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
+            <double-right-outlined class="drawer-icon" style="color: white;" />
+        </div>
+        <!-- 右侧抽屉 -->
+        <a-drawer
+        v-model:visible="visible"
+        class="drawer-item"
+        width="496"
+        placement="right"
+        :body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8 }"
+        :closable="false"
+        id="Odrawer"
+        :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>
 
+                </a-tab-pane>
+                <a-tab-pane key="3" tab="日志"></a-tab-pane>
+            </a-tabs>
+        </a-drawer>
+    </div>
 </template>
   
 <script setup lang="ts">
 
 import { ref } from 'vue';
+import { treeData } from './treeData'
 import light from './light.vue';
+import tabs1 from './tabs1.vue'
+// ICON
 import {
     DoubleLeftOutlined,
     DoubleRightOutlined
   } from '@ant-design/icons-vue';
 
-let area = ref(1)
+// 分区 - 当前选择的分区 - 默认选择一区
-let visible = ref(false)
+let area = ref(['1'])
+// 分区 - 分区小灯泡
+const bulbs = ref([
+    {
+        styleText: { left: '190px', bottom: '200px' },
+        area: 1,
+        type: 1,
+        visible: true
+    },
+    {
+        styleText: { left: '245px', bottom: '125px' },
+        area: 1,
+        type: 2,
+        visible: true
+    },
+    {
+        styleText: { left: '355px', bottom: '160px' },
+        area: 1,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '295px', bottom: '230px' },
+        area: 1,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '425px', bottom: '230px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '470px', bottom: '190px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '380px', bottom: '275px' },
+        area: 2,
+        type: 3,
+        visible: true
+    },
+    {
+        styleText: { left: '700px', bottom: '320px' },
+        area: 3,
+        type: 1,
+        visible: true
+    },
+])
 
+// 分区 - 单个分区切换
+const getArea = (result: any) => {
+    // 如果传入的值是数组
+    if (Array.isArray(result)) {
+        area.value = result
+    // 如果不是数组
+    } else {
+        area.value.length = 0
+        area.value[0] = String(result)
+    } 
+}
+// 分区 - 多个分区切换，只有照明回路能够触发多个分区
+// 分区 - 样式函数
+const computedClass = (number: number) => {
+    if (area.value.indexOf(number) != -1) {
+        return `isActive area-item area${number}`
+    } else {
+        return `area-item area${number}`
+    }
+}
 
-const getArea = (number: any) => {
+// 抽屉 - 当前选择的tab
-    alert(number)
+let activeKey = ref('1');
+// 抽屉 - 打开状态
+let visible = ref(false);
+// 抽屉 - 开关事件
+const toggleDrawer = () => {
+    visible.value = !visible.value;
 };
+
 </script>
 <style lang="less" scoped>
 @import "./indexs.less";
 .isActive {
-    border: 2px solid white !important;
+    border: 3px solid white !important;
+}
+:deep(.ant-tabs-tab-btn) {
+    color: white;
 }
 </style>
   

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

@@ -33,7 +33,7 @@
                 </div>
             </div>
         </template>
-        <div class="icon-box" :style="styleObject">
+        <div class="icon-box" :style="styleObject" v-show="visible">
             <img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt="">
             <img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt="">
             <img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt="">
@@ -43,9 +43,14 @@
   
 <script setup lang="ts">
 import { ref } from 'vue';
+
 defineProps({
-  styleObject: Object,
+    styleObject: Object,
-  type: Number
+    type: Number,
+    visible: {
+        type: Boolean,
+        default: false
+    }
 });
 
 const result = ref({

hx-ai-intelligent/src/view/equipmentControl/lightingManage/treeData.ts

@@ -0,0 +1,88 @@
+import { ref } from 'vue';
+export const treeData = ref([
+  {
+    label: '站厅',
+    id: '1',
+    // 前端遍历后添加，属前端属性
+    selected: false,
+    children: [{
+      label: '站厅1区',
+      id: '1-1',
+      // 前端属性
+      selected: false,
+      // 后端属性（表示禁用了一个设备）
+      stop: false,
+      // 当前的控制模式
+      type: 3
+    },{
+      label: '站厅2区',
+      id: '1-2',
+      selected: false,
+      stop: false,
+      type: 1
+    }]
+  },
+  {
+    label: '站台',
+    id: '2',
+    selected: false,
+    children: [{
+      label: '站台1区',
+      id: '2-1',
+      selected: false,
+      stop: false,
+      type: 1
+    },{
+      label: '站台2区',
+      id: '2-2',
+      selected: false,
+      stop: false,
+      type: 2
+    },{
+      label: '站台3区',
+      id: '2-3',
+      selected: false,
+      stop: false,
+      type: 3
+    },{
+      label: '站台4区',
+      id: '2-4',
+      selected: false,
+      stop: false,
+      type: 1
+    }]
+  },{
+    label: '办公室',
+    id: '3',
+    selected: false,
+    children: [{
+      label: '办公室1区',
+      id: '3-1',
+      selected: false,
+      stop: false,
+      type: 2
+    }]
+  },{
+    label: '楼道',
+    id: '4',
+    selected: false,
+    children: [{
+      label: '楼道1区',
+      id: '4-1',
+      selected: false,
+      stop: false,
+      type: 3
+    }]
+  },
+]);
+
+export const controlType = ref([{
+  name: '托管',
+  type: 1,
+},{
+  name: 'AI',
+  type: 2,
+},{
+  name: '手动',
+  type: 3,
+}])