You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
12 KiB
394 lines
12 KiB
2 years ago
|
<template>
|
||
|
|
<div class="homeWrap">
|
||
|
|
<div class="bread">
|
||
|
|
<bread-crumb :list="list" />
|
||
|
|
</div>
|
||
|
|
<el-row :gutter="48">
|
||
|
|
<el-col :span="8">
|
||
|
|
<div class="bg">
|
||
|
|
<Title :text="homeText">
|
||
|
|
<span :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">红色微网格</span>
|
||
|
|
</Title>
|
||
|
|
</div>
|
||
|
|
<div class="apartment">
|
||
|
|
<div class="apar_comtent">
|
||
|
|
<div class="apar_top">
|
||
|
|
<img src="@/assets/images/home/homeTop.png" alt="/" />
|
||
|
|
</div>
|
||
|
|
<div class="apar_center">
|
||
|
|
<div class="apar_center_flex">
|
||
|
|
<div v-for="(item, index) in houseMountArr" :key="index" class="floor">
|
||
|
|
<div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="apar_bottom">
|
||
|
|
<img src="@/assets/images/home/homeBottom.png" alt="/" />
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="apar_right">
|
||
|
|
<img src="@/assets/images/home/homeRight.png" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="16">
|
||
|
|
<div class="table">
|
||
|
|
<el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
|
||
|
|
<el-table-column label="序号" type="index" width="80" />
|
||
|
|
<el-table-column prop="doorName" label="门牌号" />
|
||
|
|
<el-table-column prop="fullName" label="所属小区" />
|
||
|
|
<el-table-column prop="buildingId" label="所属楼栋" />
|
||
|
|
<el-table-column prop="houseName" label="所属单元" />
|
||
|
|
<el-table-column prop="houseCode" label="房屋编码" />
|
||
|
|
<el-table-column prop="rentFlag" label="房屋状态">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- 1：出租 0：自住 2：闲置 3：未售出 -->
|
||
|
|
<span>{{ getRentFlag(scope.row.rentFlag) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="houseType" label="房屋类型">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- 1楼房，2平房，3别墅 -->
|
||
|
|
<span>{{ getHouseType(scope.row.houseType) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="ownerName" label="房主姓名" />
|
||
|
|
<el-table-column prop="ownerPhone" label="房主电话" />
|
||
|
|
<el-table-column label="操作" width="90" align="center">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-button type="text">查看</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<!-- <div>
|
||
|
|
<Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
|
||
|
|
</div> -->
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
|
||
|
|
import Title from "./Title/index.vue";
|
||
|
|
import BreadCrumb from "@/views/dataBoard/cpts/personnel/components/Breadcrumb/index.vue";
|
||
|
|
export default {
|
||
|
|
name: "homeDetails",
|
||
|
|
components: {
|
||
|
|
Pagination,
|
||
|
|
Title,
|
||
|
|
BreadCrumb,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// total: 0,
|
||
|
|
// pageNum: 1,
|
||
|
|
// pageSize: 10,
|
||
|
|
loading: false,
|
||
|
|
homeMsg: {},
|
||
|
|
list: [],
|
||
|
|
homeText: "",
|
||
|
|
houseMountArr: [
|
||
|
|
// [
|
||
|
|
// { doorName: "101", id: 1 },
|
||
|
|
// { doorName: "102", id: 1 },
|
||
|
|
// { doorName: "103", id: 1 },
|
||
|
|
// { doorName: "104", id: 1 },
|
||
|
|
// { doorName: "105", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "201", id: 1 },
|
||
|
|
// { doorName: "202", id: 1 },
|
||
|
|
// { doorName: "203", id: 1 },
|
||
|
|
// { doorName: "204", id: 1 },
|
||
|
|
// { doorName: "205", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "301", id: 1 },
|
||
|
|
// { doorName: "302", id: 1 },
|
||
|
|
// { doorName: "303", id: 1 },
|
||
|
|
// { doorName: "304", id: 1 },
|
||
|
|
// { doorName: "305", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "401", id: 1 },
|
||
|
|
// { doorName: "402", id: 1 },
|
||
|
|
// { doorName: "403", id: 1 },
|
||
|
|
// { doorName: "404", id: 1 },
|
||
|
|
// { doorName: "405", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "501", id: 1 },
|
||
|
|
// { doorName: "502", id: 1 },
|
||
|
|
// { doorName: "503", id: 1 },
|
||
|
|
// { doorName: "504", id: 1 },
|
||
|
|
// { doorName: "505", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "601", id: 1 },
|
||
|
|
// { doorName: "602", id: 1 },
|
||
|
|
// { doorName: "603", id: 1 },
|
||
|
|
// { doorName: "604", id: 1 },
|
||
|
|
// { doorName: "605", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "701", id: 1 },
|
||
|
|
// { doorName: "702", id: 1 },
|
||
|
|
// { doorName: "703", id: 1 },
|
||
|
|
// { doorName: "704", id: 1 },
|
||
|
|
// { doorName: "705", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "801", id: 1 },
|
||
|
|
// { doorName: "802", id: 1 },
|
||
|
|
// { doorName: "803", id: 1 },
|
||
|
|
// { doorName: "804", id: 1 },
|
||
|
|
// { doorName: "805", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "901", id: 1 },
|
||
|
|
// { doorName: "902", id: 1 },
|
||
|
|
// { doorName: "903", id: 1 },
|
||
|
|
// { doorName: "904", id: 1 },
|
||
|
|
// { doorName: "905", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1001", id: 1 },
|
||
|
|
// { doorName: "1002", id: 1 },
|
||
|
|
// { doorName: "1003", id: 1 },
|
||
|
|
// { doorName: "1004", id: 1 },
|
||
|
|
// { doorName: "1005", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1101", id: 1 },
|
||
|
|
// { doorName: "1102", id: 1 },
|
||
|
|
// { doorName: "1103", id: 1 },
|
||
|
|
// { doorName: "1104", id: 1 },
|
||
|
|
// { doorName: "1105", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1201", id: 1 },
|
||
|
|
// { doorName: "1202", id: 1 },
|
||
|
|
// { doorName: "1203", id: 1 },
|
||
|
|
// { doorName: "1204", id: 1 },
|
||
|
|
// { doorName: "1205", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1301", id: 1 },
|
||
|
|
// { doorName: "1302", id: 1 },
|
||
|
|
// { doorName: "1303", id: 1 },
|
||
|
|
// { doorName: "1304", id: 1 },
|
||
|
|
// { doorName: "1305", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1401", id: 1 },
|
||
|
|
// { doorName: "1402", id: 1 },
|
||
|
|
// { doorName: "1403", id: 1 },
|
||
|
|
// { doorName: "1404", id: 1 },
|
||
|
|
// { doorName: "1405", id: 1 },
|
||
|
|
// ],
|
||
|
|
// [
|
||
|
|
// { doorName: "1501", id: 1 },
|
||
|
|
// { doorName: "1502", id: 1 },
|
||
|
|
// { doorName: "1503", id: 1 },
|
||
|
|
// { doorName: "1504", id: 1 },
|
||
|
|
// { doorName: "1505", id: 1 },
|
||
|
|
// ],
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDoorNameList(list) {
|
||
|
|
const doorNameList = [];
|
||
|
|
const doorNameArr = [];
|
||
|
|
list.forEach((item) => {
|
||
|
|
const doorName = item.doorName;
|
||
|
|
if (doorName.length === 4) {
|
||
|
|
doorNameArr.push(doorName.slice(0, 2));
|
||
|
|
} else if (doorName.length === 3) {
|
||
|
|
doorNameArr.push(doorName.slice(0, 1));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
const doorNameSet = new Set(doorNameArr);
|
||
|
|
doorNameSet.forEach((item) => {
|
||
|
|
const arr = [];
|
||
|
|
list.forEach((item2) => {
|
||
|
|
const doorName = item2.doorName;
|
||
|
|
if (doorName.length === 4) {
|
||
|
|
if (doorName.slice(0, 2) === item) {
|
||
|
|
arr.push(item2);
|
||
|
|
}
|
||
|
|
} else if (doorName.length === 3) {
|
||
|
|
if (doorName.slice(0, 1) === item) {
|
||
|
|
arr.push(item2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
doorNameList.push(arr);
|
||
|
|
});
|
||
|
|
return doorNameList;
|
||
|
|
},
|
||
|
|
|
||
|
|
getList() {
|
||
|
|
this.loading = true;
|
||
|
|
this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=1689829742860771329`).then((res) => {
|
||
|
|
const {
|
||
|
|
code,
|
||
|
|
data: { houseList, unitInfo },
|
||
|
|
} = res.data;
|
||
|
|
if (code === 0) {
|
||
|
|
this.list = houseList;
|
||
|
|
this.homeMsg = unitInfo;
|
||
|
|
this.homeText = unitInfo.quartersName + unitInfo.buildingName + unitInfo.unitNum + "单元";
|
||
|
|
this.houseMountArr = this.getDoorNameList(this.list);
|
||
|
|
this.loading = false;
|
||
|
|
} else {
|
||
|
|
this.loading = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getRentFlag(type) {
|
||
|
|
const rentFlag = new Map([
|
||
|
|
["0", "出租"],
|
||
|
|
["1", "自住"],
|
||
|
|
["2", "闲置"],
|
||
|
|
["3", "未售出"],
|
||
|
|
]);
|
||
|
|
return rentFlag.get(type);
|
||
|
|
},
|
||
|
|
|
||
|
|
getHouseType(type) {
|
||
|
|
const houseTypeMap = new Map([
|
||
|
|
["1", "楼房"],
|
||
|
|
["2", "平房"],
|
||
|
|
["3", "别墅"],
|
||
|
|
]);
|
||
|
|
return houseTypeMap.get(type);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@import "@/assets/scss/dataBoard/table.scss";
|
||
|
|
@mixin radio {
|
||
|
|
display: inline-block;
|
||
|
|
width: 90px;
|
||
|
|
height: 24px;
|
||
|
|
opacity: 0.8;
|
||
|
|
border-radius: 11px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 22px;
|
||
|
|
margin-left: 15px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
.homeWrap {
|
||
|
|
.bread {
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
.apar_top {
|
||
|
|
width: 100%;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.apartment {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: center;
|
||
|
|
.apar_comtent {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
.apar_center {
|
||
|
|
min-width: 244px;
|
||
|
|
max-width: 488px;
|
||
|
|
height: 584px;
|
||
|
|
overflow: auto;
|
||
|
|
background: url("@/assets/images/home/homeCenter.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
padding: 30px 30px 10px 30px;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
flex-direction: column-reverse;
|
||
|
|
.apar_center_flex {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap-reverse;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.floor {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
.households {
|
||
|
|
height: 58px;
|
||
|
|
background: url("@/assets/images/home/hasPeople.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
display: flex;
|
||
|
|
flex: 0 0 48px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #7fceff;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.apar_bottom {
|
||
|
|
width: 244px;
|
||
|
|
margin-top: -1px;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.apar_right {
|
||
|
|
margin-left: -3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.more {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #a0cdff;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
margin-bottom: 50px;
|
||
|
|
background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
|
||
|
|
.miniGrid_red {
|
||
|
|
@include radio;
|
||
|
|
background: rgba(249, 86, 25, 0.2);
|
||
|
|
border: 1px solid #f95619;
|
||
|
|
color: #f95619;
|
||
|
|
}
|
||
|
|
.miniGrid_green {
|
||
|
|
@include radio;
|
||
|
|
background: rgba(249, 86, 25, 0.2);
|
||
|
|
border: 1px solid #f95619;
|
||
|
|
color: #f95619;
|
||
|
|
}
|
||
|
|
.miniGrid_yellow {
|
||
|
|
@include radio;
|
||
|
|
background: rgba(249, 86, 25, 0.2);
|
||
|
|
border: 1px solid #f95619;
|
||
|
|
color: #f95619;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|