修复部分楼层房间数不对问题

src/views/components/xiaoqu/ColorCell/index.vue

@@ -9,7 +9,7 @@
           v-show="item.color == 'HF' || item.color == 'NF'"
         ></div>
       </div>
-      <div class="house-number">{{ item.name }}</div>
+      <div class="house-number">{{ item.name.replace("室", "") }}</div>
       <div class="item-type">
         <el-tooltip effect="dark" content="党员" placement="top">
           <img

src/views/components/xiaoqu/building.vue

@@ -12,13 +12,13 @@
       </div>
       <div class="building-house-container">
         <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
-        <div class="house" v-for="(item, index) in list" :key="index">
+        <div class="house" v-for="(item, index) in groupedRooms" :key="index">
           <colorCell
             :active="currentIndex == house.keyId ? 'activeCell' : ''"
             :isClcik="true"
             :item="house"
-            v-for="house in item"
-            :key="house.keyId"
+            v-for="(house, houseIndex) in item"
+            :key="houseIndex"
             @clickHouse="clickHouse(house, house.keyId)"
           ></colorCell>
         </div>
@@ -49,6 +49,29 @@ export default {
       "rightTopColor",
       "houseItem",
     ]),
+    groupedRooms() {
+      // 初始化每层楼的数组
+      let floors = Array.from({ length: this.info.floor }, () => []);
+
+      // 遍历房间数据
+      this.list.forEach((room) => {
+        // 提取房间号前几位作为楼层号
+        let floor = (parseInt(room.name) / 100) | 0;
+        room.keyId = uuidv4();
+        // 将房间加入对应楼层数组
+        if (floor > 0 && floor <= this.info.floor) {
+          floors[floor - 1].push(this.handleColor(room));
+        }
+      });
+
+      // 对每层楼的房间进行排序
+      floors.forEach((floorRooms) => {
+        floorRooms.sort((a, b) => parseInt(a.name) - parseInt(b.name));
+      });
+
+      // 返回对象，键为楼层号（从1开始），值为对应的房间数组
+      return floors;
+    },
   },
   components: {
     colorCell,
@@ -95,7 +118,6 @@ export default {
         rightTopColor: item.rightTopColor,
       });
       this.currentIndex = keyId;
-      console.log(this.currentIndex);
     },
     async getBuildingInfo() {
       let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
@@ -106,53 +128,32 @@ export default {
       let res = await getNum({
         buildingId: this.queryParamsXiaoqu.buildingId,
       });
+      this.list = res.data;
 
-      this.list = this.filterFloor(res.data);
+      // this.list = this.groupedRooms(res.data);
+      // let num = 0;
+      // this.list.forEach((item) => {
+      //   num = num + item.length;
+      // });
+      // console.log(num, res.data.length);
     },
+
     // 颜色处理
     handleColor(item) {
       if (!item.color) {
         item.leftColor = "#7b75ff";
         item.rightTopColor = "#7b75ff";
-        return;
-      }
-      for (let key in this.leftColor) {
-        if (item.color == key) {
-          item.leftColor = this.leftColor[key];
-          item.rightTopColor = this.rightTopColor[key];
+      } else {
+        for (let key in this.leftColor) {
+          if (item.color == key) {
+            item.leftColor = this.leftColor[key];
+            item.rightTopColor = this.rightTopColor[key];
+          }
         }
       }
 
       return item;
     },
-    filterFloor(list) {
-      const categorizedRooms = {};
-      list.forEach((room) => {
-        room.name = room.name.replace("室", "");
-        room.keyId = uuidv4();
-        const floor = (parseInt(room.name, 10) / 100) | 0;
-        if (!categorizedRooms[floor]) {
-          categorizedRooms[floor] = [];
-        }
-
-        categorizedRooms[floor].push(this.handleColor(room));
-      });
-
-      const totalFloors = this.info.floor;
-      const sortedRoomsByFloor = [];
-      for (let floor = 1; floor <= totalFloors; floor++) {
-        const roomsForFloor = (categorizedRooms[floor] || []).sort((a, b) => {
-          return a.name - b.name;
-        });
-
-        const filteredArray = roomsForFloor.filter(
-          (element) => element !== undefined
-        );
-        sortedRoomsByFloor.push(filteredArray);
-      }
-
-      return sortedRoomsByFloor.reverse();
-    },
   },
 };
 </script>