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

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">2F</button>
-                <button class="btn-item">站台</button>
+                <button class="btn-item" @click=changeArea(1)>1F</button>
+                <button class="btn-item" @click=changeArea(2)>2F</button>
+                <button class="btn-item" @click=changeArea(3)>站台</button>
             </div>
             <!-- 楼层区域 -->
             <div class="area">
                 <div 
                 v-for="(item, index) in treeData" 
-                :class="computedClass(item.id)"
-                @click="getArea(item.id)"
+                :class="computedClass(String(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) => {
-    if (area.value.indexOf(number) != -1) {
-        return `isActive area-item area${number}`
+const computedClass = (string: string) => {
+    if (area.value.indexOf(string) != -1) {
+        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;
 }