From bfe31cbbe2237edc6fc6ee4b07abe5f7ba147723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E5=AE=8F=E6=9D=B0?= <1943105267@qq.com>
Date: Tue, 3 Sep 2024 11:26:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3house=E4=B8=BA=E7=A9=BA?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +-
 package.json                                  |  1 +
 .../components/xiaoqu/ColorCell/index.vue     |  2 +
 src/views/components/xiaoqu/building.vue      | 41 ++++++++++++-------
 4 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/.env.development b/.env.development
index 66ec939..3c6a2d5 100644
--- a/.env.development
+++ b/.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'
 
diff --git a/package.json b/package.json
index ea440c1..ef3545a 100644
--- a/package.json
+++ b/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",
diff --git a/src/views/components/xiaoqu/ColorCell/index.vue b/src/views/components/xiaoqu/ColorCell/index.vue
index 22bc5d4..53e43d2 100644
--- a/src/views/components/xiaoqu/ColorCell/index.vue
+++ b/src/views/components/xiaoqu/ColorCell/index.vue
@@ -68,6 +68,8 @@ export default {
   data() {
     return {};
   },
+
+  created() {},
   methods: {
     handelHouse() {
       if (!this.isClcik) return;
diff --git a/src/views/components/xiaoqu/building.vue b/src/views/components/xiaoqu/building.vue
index 8477c05..dde4e97 100644
--- a/src/views/components/xiaoqu/building.vue
+++ b/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;