|
|
|
<template>
|
|
|
|
<transition>
|
|
|
|
<div class="building-container" v-show="show">
|
|
|
|
<div class="building-floor">
|
|
|
|
<div
|
|
|
|
class="floor-number"
|
|
|
|
v-for="(item, index) in info.floor"
|
|
|
|
:key="item"
|
|
|
|
>
|
|
|
|
{{ info.floor - index }} 层
|
|
|
|
</div>
|
|
|
|
</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">
|
|
|
|
<colorCell
|
|
|
|
:item="house"
|
|
|
|
v-for="house in item"
|
|
|
|
:key="house.holder_id"
|
|
|
|
></colorCell>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</transition>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mapGetters } from "vuex";
|
|
|
|
import { getNum } from "@/api/taicangpop/data";
|
|
|
|
import { getBuilding } from "@/api/taicangpop/building";
|
|
|
|
import colorCell from "./ColorCell/index.vue";
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
show: true,
|
|
|
|
info: {},
|
|
|
|
list: [],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters(["queryParamsXiaoqu", "leftColor", "rightTopColor"]),
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
colorCell,
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
"queryParamsXiaoqu.buildingId"(newValue, oldValue) {
|
|
|
|
if (newValue) {
|
|
|
|
this.getBuildingInfo();
|
|
|
|
this.getBuildingList();
|
|
|
|
} else {
|
|
|
|
this.show = false;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
created() {},
|
|
|
|
methods: {
|
|
|
|
async getBuildingInfo() {
|
|
|
|
let info = await getBuilding(this.queryParamsXiaoqu.buildingId);
|
|
|
|
this.info = info.data;
|
|
|
|
this.show = true;
|
|
|
|
},
|
|
|
|
async getBuildingList() {
|
|
|
|
let res = await getNum({
|
|
|
|
buildingId: this.queryParamsXiaoqu.buildingId,
|
|
|
|
});
|
|
|
|
|
|
|
|
this.list = this.filterFloor(res.data);
|
|
|
|
|
|
|
|
console.log(this.list);
|
|
|
|
},
|
|
|
|
// 颜色处理
|
|
|
|
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];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return item;
|
|
|
|
},
|
|
|
|
filterFloor(list) {
|
|
|
|
const categorizedRooms = {};
|
|
|
|
list.forEach((room) => {
|
|
|
|
room.name = room.name.replace("室", "");
|
|
|
|
const floor = (parseInt(room.name, 10) / 100) | 0;
|
|
|
|
if (!categorizedRooms[floor]) {
|
|
|
|
categorizedRooms[floor] = [];
|
|
|
|
}
|
|
|
|
categorizedRooms[floor].push(this.handleColor(room));
|
|
|
|
});
|
|
|
|
|
|
|
|
// 确定最大楼层
|
|
|
|
const maxFloor = Math.max(...Object.keys(categorizedRooms).map(Number));
|
|
|
|
// 对每层房间号进行从小到大排序
|
|
|
|
const sortedRoomsByFloor = [];
|
|
|
|
for (let floor = 0; floor <= maxFloor; floor++) {
|
|
|
|
const roomsForFloor = categorizedRooms[floor] || [];
|
|
|
|
sortedRoomsByFloor.push(
|
|
|
|
roomsForFloor.sort(
|
|
|
|
(a, b) => parseInt(a.name, 10) - parseInt(b.name, 10)
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return sortedRoomsByFloor.reverse();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.building-container {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 100;
|
|
|
|
top: 80px;
|
|
|
|
right: 0;
|
|
|
|
height: calc(100% - 80px);
|
|
|
|
display: flex;
|
|
|
|
overflow-y: auto;
|
|
|
|
background: #113666;
|
|
|
|
border: 1px solid #2d6cad;
|
|
|
|
.building-floor {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
padding-top: 85px;
|
|
|
|
background: linear-gradient(
|
|
|
|
rgba(149, 18, 58, 0.1),
|
|
|
|
#95123a,
|
|
|
|
rgba(149, 18, 58, 0.1)
|
|
|
|
);
|
|
|
|
padding-top: 85px;
|
|
|
|
.floor-number {
|
|
|
|
height: 23px;
|
|
|
|
width: 50px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 23px;
|
|
|
|
margin-bottom: 6px;
|
|
|
|
font-size: 14px;
|
|
|
|
color: #fff;
|
|
|
|
font-family: "DIN-Regular-2.otf";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.building-house-container {
|
|
|
|
padding-top: 85px;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
background: url("~@/assets/images/ui/img_home@2x.png");
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: auto 100%;
|
|
|
|
.building-name {
|
|
|
|
position: absolute;
|
|
|
|
left: 130px;
|
|
|
|
top: 25px;
|
|
|
|
min-width: 135px;
|
|
|
|
height: 32px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 32px;
|
|
|
|
font-size: 18px;
|
|
|
|
color: #f0fffc;
|
|
|
|
font-family: "BY";
|
|
|
|
background: url("~@/assets/images/ui/img_number_bg@2x.png");
|
|
|
|
background-size: 100% 100%;
|
|
|
|
padding: 0 10px;
|
|
|
|
}
|
|
|
|
.house {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
box-sizing: border-box;
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
|
|
.floor-item {
|
|
|
|
cursor: pointer;
|
|
|
|
margin-right: 6px;
|
|
|
|
height: 23px;
|
|
|
|
width: 55px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 23px;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
& > .floor-item:first-child {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.building-house-container .house:last-child {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* 下面我们会解释这些 class 是做什么的 */
|
|
|
|
.v-enter-active,
|
|
|
|
.v-leave-active {
|
|
|
|
transition: opacity 0.5s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.v-enter-from,
|
|
|
|
.v-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
</style>
|