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