选中样式

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="grid-item-main floor-item" @click="handelHouse()">
+  <div class="grid-item-main floor-item" @click="handelHouse()" :class="active">
     <div class="corlor-grid" :class="size">
       <div class="left-color" :style="{ background: item.leftColor }"></div>
       <div class="rigth-color">
@@ -55,12 +55,22 @@ export default {
       type: String,
       default: "medium",
     },
+    active: {
+      type: String,
+      default: "",
+    },
+
+    isClcik: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {};
   },
   methods: {
     handelHouse() {
+      if (!this.isClcik) return;
       this.$emit("clickHouse");
     },
   },
@@ -153,8 +163,9 @@ export default {
     }
   }
 }
-.grid-item-main:hover {
+.grid-item-main:hover,
-  border: 2px solid orange;
+.activeCell {
+  border: 2.5px solid #00ffff;
   transform: scale(1.2); /* 放大1.5倍 */
 }
 </style>

src/views/components/xiaoqu/building.vue

@@ -14,6 +14,8 @@
         <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' : ''"
+            :isClcik="true"
             :item="house"
             v-for="(house, houseIndex) in item"
             :key="index + houseIndex"
@@ -36,6 +38,7 @@ export default {
       show: false,
       info: {},
       list: [],
+      currentIndex: 0,
     };
   },
   computed: {
@@ -58,11 +61,13 @@ export default {
         this.show = false;
       }
     },
+    "houseItem.id"(newValue, oldValue) {
+      if (!newValue) this.currentIndex = 0;
+    },
   },
   created() {},
   methods: {
     clickHouse(item) {
-      console.log(item);
       this.$store.commit("SET_BUILDING_WIDTH", {
         id: item.id,
         buildingId: item.building_id,
@@ -81,6 +86,8 @@ export default {
         leftColor: item.leftColor,
         rightTopColor: item.rightTopColor,
       });
+      this.currentIndex = item.id;
+      console.log(this.currentIndex);
     },
     async getBuildingInfo() {
       let info = await getBuilding(this.queryParamsXiaoqu.buildingId);

src/views/components/xiaoqu/house.vue

@@ -44,6 +44,9 @@
             </div>
           </div>
           <div class="btn-group">
+            <div class="btn-gather" v-show="houseItem.color == 'NO'">
+              确认空关
+            </div>
             <div class="btn-gather">房屋信息采集</div>
             <div class="btn-add">添加居民</div>
             <div class="btn-close" @click="handleClose()">关闭</div>
@@ -475,6 +478,9 @@ div {
       display: flex;
       align-items: center;
     }
+    .is-list > div {
+      margin-right: 10px;
+    }
     .row-btn {
       flex-direction: row-reverse;