解决house为空问题

.env.development

@@ -4,7 +4,7 @@ VUE_APP_TITLE = 人口数据管理系统
 # 开发环境配置
 ENV = 'development'
 
-# # 政务网/开发环境
+# 政务网/开发环境
 VUE_APP_BASE_API_HTML = "http://122.193.93.182:19002"
 VUE_APP_BASE_API = 'http://122.193.93.182:19002'
 

package.json

@@ -57,6 +57,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "uuid": "^10.0.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

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

@@ -68,6 +68,8 @@ export default {
   data() {
     return {};
   },
+
+  created() {},
   methods: {
     handelHouse() {
       if (!this.isClcik) return;

src/views/components/xiaoqu/building.vue

@@ -14,12 +14,12 @@
         <div class="building-name">{{ info.deptname }}{{ info.name }}</div>
         <div class="house" v-for="(item, index) in list" :key="index">
           <colorCell
-            :active="currentIndex == house.id ? 'activeCell' : ''"
+            :active="currentIndex == house.keyId ? 'activeCell' : ''"
             :isClcik="true"
             :item="house"
-            v-for="(house, houseIndex) in item"
-            :key="index + houseIndex"
-            @clickHouse="clickHouse(house)"
+            v-for="house in item"
+            :key="house.keyId"
+            @clickHouse="clickHouse(house, house.keyId)"
           ></colorCell>
         </div>
       </div>
@@ -32,6 +32,7 @@ import { mapGetters } from "vuex";
 import { getNum } from "@/api/taicangpop/data";
 import { getBuilding } from "@/api/taicangpop/building";
 import colorCell from "./ColorCell/index.vue";
+import { v4 as uuidv4 } from "uuid";
 export default {
   data() {
     return {
@@ -55,6 +56,7 @@ export default {
   watch: {
     "queryParamsXiaoqu.buildingId"(newValue, oldValue) {
       if (newValue) {
+        this.reset();
         this.getBuildingInfo();
         this.getBuildingList();
       } else {
@@ -67,7 +69,13 @@ export default {
   },
   created() {},
   methods: {
-    clickHouse(item) {
+    reset() {
+      this.show = false;
+      this.info = {};
+      this.list = [];
+      this.currentIndex = 0;
+    },
+    clickHouse(item, keyId) {
       this.$store.commit("SET_BUILDING_WIDTH", {
         id: item.id,
         buildingId: item.building_id,
@@ -86,7 +94,7 @@ export default {
         leftColor: item.leftColor,
         rightTopColor: item.rightTopColor,
       });
-      this.currentIndex = item.id;
+      this.currentIndex = keyId;
       console.log(this.currentIndex);
     },
     async getBuildingInfo() {
@@ -99,11 +107,7 @@ export default {
         buildingId: this.queryParamsXiaoqu.buildingId,
       });
 
-      console.log(res.data.filter((item) => item.name == "101室"));
-
       this.list = this.filterFloor(res.data);
-
-      console.log(this.list);
     },
     // 颜色处理
     handleColor(item) {
@@ -125,21 +129,26 @@ export default {
       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) => a.name - b.name
-        );
+        const roomsForFloor = (categorizedRooms[floor] || []).sort((a, b) => {
+          return a.name - b.name;
+        });
 
-        sortedRoomsByFloor.push(roomsForFloor);
+        const filteredArray = roomsForFloor.filter(
+          (element) => element !== undefined
+        );
+        sortedRoomsByFloor.push(filteredArray);
       }
 
       return sortedRoomsByFloor.reverse();
@@ -227,6 +236,10 @@ export default {
         margin-left: 8px;
       }
     }
+    .house:hover {
+      background: #ffb82f;
+      // padding: 2px 0;
+    }
   }
   .building-house-container .house:last-child {
     margin-bottom: 0;