fix:照明系统修改

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 class="light-group">
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.1)"></div>
-                    </div>
-                    <div class="light-group">
-                        <div class="group-shadow group-shadow1" @click.stop="getArea(1.2)"></div>
-                    </div>
-                </div>
-                <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 
+                v-for="(item, index) in treeData" 
+                :class="computedClass(item.id)"
+                @click="getArea(item.id)"
+                :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>
                 </div>
             </div>
             <!-- 照明设备 -->
             <div class="lights">
-                <light :styleObject="{left: '190px', bottom: '200px'}" :type="1"></light>
-                <light :styleObject="{left: '245px', bottom: '125px'}" :type="2"></light>
-                <light :styleObject="{left: '355px', bottom: '160px'}" :type="3"></light>
-                <light :styleObject="{left: '295px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '460px', bottom: '230px'}" :type="3"></light> 
-                <light :styleObject="{left: '510px', bottom: '190px'}" :type="3"></light> 
-                <light :styleObject="{left: '415px', bottom: '275px'}" :type="1"></light> 
+                <light v-for="(item, index) in bulbs" :key="index" :styleObject="item.styleText" :type="item.type" :visible="item.visible"></light>
             </div>
         </div>
         <!-- 右侧抽屉的触发按钮 -->
-        <div class="drawer-box" v-if="!visible">
-            <double-left-outlined class="drawer-icon" style="color: rgba(255, 255, 255, 1)" />
+        <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
+            <double-left-outlined class="drawer-icon" style="color: white" />
         </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) => {
-    alert(number)
+// 抽屉 - 当前选择的tab
+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>