add:照明系统 抽屉功能tab2分页功能完善

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

@@ -3,8 +3,7 @@
         <div class="lighting-img-box">
             <!-- 左上角，区域切换 -->
             <div class="btn-box">
-                <button class="btn-item" @click=changeFloor(1)>1F</button>
-                <button class="btn-item" @click=changeFloor(2)>2F</button>
+                <button v-for="item in floorData" class="btn-item" @click=changeFloor(item.childList)>{{ item.name }}</button>
             </div>
             <!-- 楼层区域 -->
             <div class="area">
@@ -13,7 +12,7 @@
                 :class="computedClass(item.id)"
                 @click="changeThisArea([item])"
                 :key="index">
-                    <div v-for="(v, i) in item.children" :key="i" class="light-group">
+                    <div v-for="(v, i) in item.childList" :key="i" class="light-group">
                         <div class="group-shadow" @click.stop="changeThisArea([item, v])">
                             <div :class="computedClass(v.id)" class="shadow-box"></div>
                         </div>
@@ -50,7 +49,7 @@
         :maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
             <a-tabs v-model:activeKey="activeKey">
                 <a-tab-pane key="1" tab="控制面板">
-                    <tabs1 @changeArea="changeArea" :treeData="treeData" :nowArea="nowArea"></tabs1>
+                    <tabs1 @changeArea="changeArea" @reset="reset" :treeData="treeData" :nowArea="nowArea"></tabs1>
                 </a-tab-pane>
                 <a-tab-pane key="2" tab="计划列表" force-render>
                     <tabs2></tabs2>
@@ -80,55 +79,53 @@ import {
     DoubleRightOutlined
 } from '@ant-design/icons-vue';
 
-// 类声明 =======================================================
-
-interface items {
-    id: string,
-
-}
 
 // 初始化 =======================================================
 
 onMounted(() => {
-    http.post(lightingManage.getArea, { floor: '1', siteId: '10000001' }).then(res => {
+    http.get(lightingManage.getArea, { projectId: 'HLlmTZp8' }).then(res => {
         const data = res.data
-        /** 由前端创建的，只在前端使用的变量
+        floorData.value = data
+        /** 只在前端使用的变量
          * @param id 用于判断样式和层级的前端属性
          * @param selected 用于表示是否选中的前端属性
          */
-        data.forEach((item, index) => {
-            if (index == 0) {
-                item.selected = true
-            } else {
-                item.selected = false
-            }
-            item.id = String(index + 1)
-            item.children = []
-            // deviceGroup后端返回了对象，此处转化为数组
-            let i = 1;
-            for (let obj in item.deviceGroup) {
-                item.deviceGroup[obj].selected = false
-                item.deviceGroup[obj].id = String((index + 1) + '-' + i++)
-                item.children.push(item.deviceGroup[obj])
-            }
+        data.forEach(floor => {
+            floor.childList.forEach((item, index) => {
+                if (index == 0) {
+                    item.selected = true
+                } else {
+                    item.selected = false
+                }
+                item.id = String(index + 1)
+                item.childList.forEach((v, i) => {
+                    v.selected = false
+                    v.id = (index + 1) + '-' + (i + 1)
+                })
+            })
         })
-        treeData.value = data
+        treeData.value = data[0].childList
     })
 })
 
 // 分层业务 =====================================================
 
 // 左上角分层切换
-const changeFloor = (area: number) => {
-    if (area == 1) {
-        console.log('1F')
-    } else if (area == 2) {
-        console.log('2F')
-    } 
+const changeFloor = (area: any) => {
+    // 重置数据
+    reset()
+    // 重置视图
+    changeArea(['1'])
+    // 切换楼层数据
+    treeData.value = area
+    // 默认选择第一项
+    treeData.value[0].selected = true
 }
 
 // 分区业务 =====================================================
 
+// 所有楼层的数据
+const floorData = ref([])
 // 分区结构树
 const treeData = ref([])
 // 当前选中的分区id
@@ -223,7 +220,7 @@ const changeThisArea = (result: any) => {
 const reset = () => {
     treeData.value.forEach(item => {
         item.selected = false
-        item.children.forEach(i => {
+        item.childList.forEach(i => {
             i.selected = false
         })
     })