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.
583 lines
18 KiB
583 lines
18 KiB
<template>
|
|
<div class="homeWrap">
|
|
<div class="bread">
|
|
<bread-crumb
|
|
:list="[
|
|
{
|
|
path: '/dataBoard/overview/index',
|
|
name: '概览',
|
|
},
|
|
{
|
|
name: homeText ? homeText : '',
|
|
},
|
|
]" />
|
|
</div>
|
|
<div class="top-nav-list" v-if="$route.query.typeB !== building">
|
|
<div v-for="item in buildingList" :key="item.id" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" @click="chooseNav(item)">{{ item.buildingName }}{{ item.unitName }}</div>
|
|
</div>
|
|
<el-row :gutter="48">
|
|
<el-col :span="8">
|
|
<div class="bg">
|
|
<Title :text="homeText ? homeText : ''">
|
|
<span v-if="homeMsg && homeMsg.type" :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">{{ homeMsg.type === "red" ? "红" : homeMsg.type === "yellow" ? "黄" : "绿" }}色微网格</span>
|
|
</Title>
|
|
</div>
|
|
<!-- <div class="mount">
|
|
<people-mount />
|
|
</div> -->
|
|
<div class="apartment">
|
|
<div class="apar_comtent">
|
|
<div class="apar_top">
|
|
<img src="@/assets/images/home/homeTop.png" alt="/" />
|
|
</div>
|
|
<div style="min-width: 284px; max-width: 488px; padding: 0 20px">
|
|
<div class="apar_center">
|
|
<div class="apar_center_flex" :style="{ width: flexWidth + 'px' }">
|
|
<div v-for="(item, index) in houseMountArr" :key="index" class="floor">
|
|
<div v-for="itm in item" :key="itm.id" :class="[itm.riskyNum === 0 && itm.importanceNum === 0 ? 'households' : '', itm.riskyNum > 0 ? 'dangerHome' : '', itm.importanceNum > 0 ? 'dangerPeople' : '', itm.rentFlag === '2' ? 'freeHome' : '']">
|
|
<div v-if="itm.riskyNum === 0 && itm.importanceNum === 0 && itm.rentFlag != '2'">{{ itm.doorName }}</div>
|
|
<div v-if="itm.riskyNum > 0" class="dangerClass">
|
|
<div>{{ itm.doorName }}</div>
|
|
<img :src="require('@/assets/images/home/dangerHome.png')" alt="" />
|
|
</div>
|
|
<div v-if="itm.importanceNum > 0" class="dangerClass">
|
|
<div>{{ itm.doorName }}</div>
|
|
<img :src="require('@/assets/images/home/dangerPeople.png')" alt="" />
|
|
</div>
|
|
<div v-if="itm.rentFlag === '2'" class="dangerClass">
|
|
<div>闲置</div>
|
|
</div>
|
|
</div>
|
|
</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="screen">
|
|
<el-form :model="queryParams" inline>
|
|
<el-input v-model.trim="queryParams.ownerName" size="small" placeholder="按房主姓名"></el-input>
|
|
<el-input v-model.trim="queryParams.ownerPhone" size="small" placeholder="按房主电话"></el-input>
|
|
<el-input v-model.trim="queryParams.ownerIdCard" size="small" placeholder="按房主身份证号"></el-input>
|
|
<el-select popper-class="selectPopClass" clearable v-model="queryParams.residentTag" size="small" placeholder="居民类型">
|
|
<el-option v-for="item in peopleTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
</el-select>
|
|
<el-select popper-class="selectPopClass" clearable v-model="queryParams.riskyFlag" size="small" placeholder="满意度风险家庭">
|
|
<el-option v-for="item in riskHomeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
|
</el-select>
|
|
|
|
<el-button size="small" class="btn" type="primary" @click="search">查询</el-button>
|
|
</el-form>
|
|
</div>
|
|
<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" width="100" label="门牌号" />
|
|
<el-table-column prop="quartersName" width="120" show-overflow-tooltip label="所属小区" />
|
|
<el-table-column prop="buildingName" width="120" show-overflow-tooltip label="所属楼栋" />
|
|
<el-table-column prop="buildingUnitName" width="120" show-overflow-tooltip label="所属单元" />
|
|
<el-table-column prop="houseCode" width="120" label="房屋编码" />
|
|
<el-table-column prop="rentFlag" width="120" label="房屋状态">
|
|
<template slot-scope="scope">
|
|
<!-- 1：出租 0：自住 2：闲置 3：未售出 -->
|
|
<span>{{ getRentFlag(scope.row.rentFlag) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="houseType" width="120" label="房屋类型">
|
|
<template slot-scope="scope"> -->
|
|
<!-- 1楼房，2平房，3别墅 -->
|
|
<!-- <span>{{ getHouseType(scope.row.houseType) }}</span>
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="ownerName" width="120" label="房主姓名" />
|
|
<el-table-column prop="ownerPhone" width="120" show-overflow-tooltip label="房主电话">
|
|
<template slot-scope="scope">
|
|
{{ $sensitive(scope.row.ownerPhone, 3, 7) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="riskyNum" width="170" label="满意度风险家庭">
|
|
<template slot="header"> <img :src="require('@/assets/images/home/dangerHome.png')" alt="" /> 满意度风险家庭 </template>
|
|
<template slot-scope="scope">
|
|
<span style="color: #f95619" v-if="+scope.row.riskyNum > 0">是</span>
|
|
<span style="color: #3cf5ff" v-else>否</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="importanceNum" width="140" label="重点人员">
|
|
<template slot="header"> <img :src="require('@/assets/images/home/dangerPeople.png')" alt="" /> 重点人员 </template>
|
|
<template slot-scope="scope">
|
|
<span style="color: #f95619" v-if="+scope.row.importanceNum > 0">是</span>
|
|
<span style="color: #3cf5ff" v-else>否</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="90" align="center">
|
|
<template slot-scope="{ row }">
|
|
<el-button type="text" @click="$router.push(`/dataBoard/overview/familyPortrait/?name=${row.doorName}&houseId=${row.id}&id=${row.buildingId}&buId=${row.buildingUnitId}&type=${$route.query.typeB}&name2=${row.houseName}`)">查看</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div>
|
|
<Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getTableData" />
|
|
</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";
|
|
import PeopleMount from "./PeopleMount/index.vue";
|
|
|
|
export default {
|
|
name: "homeDetails",
|
|
components: {
|
|
Pagination,
|
|
Title,
|
|
BreadCrumb,
|
|
PeopleMount,
|
|
},
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
unitId: "",
|
|
ownerName: "",
|
|
ownerPhone: "",
|
|
ownerIdCard: "",
|
|
riskyFlag: "",
|
|
residentTag: "",
|
|
},
|
|
orgOptions: [],
|
|
peopleTypeList: [],
|
|
riskHomeList: [
|
|
{
|
|
label: "风险",
|
|
value: "1",
|
|
},
|
|
{
|
|
label: "无风险",
|
|
value: "0",
|
|
},
|
|
],
|
|
flexWidth: 0,
|
|
loading: false,
|
|
homeMsg: {},
|
|
list: [],
|
|
homeText: "",
|
|
buildingList: [],
|
|
houseMountArr: [
|
|
// [
|
|
// { doorName: 101, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
|
|
// { doorName: 102, riskyNum: 1, importanceNum: 0, rentFlag: "0" },
|
|
// { doorName: 103, riskyNum: 0, importanceNum: 1, rentFlag: "0" },
|
|
// { doorName: 104, riskyNum: 0, importanceNum: 0, rentFlag: "2" },
|
|
// ],
|
|
],
|
|
};
|
|
},
|
|
watch: {},
|
|
mounted() {
|
|
const buId = this.$route.query.buId || null;
|
|
this.getList(buId);
|
|
// this.getTableData(this.$route.query.id);
|
|
this.getPeopleTypeList();
|
|
},
|
|
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;
|
|
},
|
|
|
|
getPeopleTypeList() {
|
|
this.$http
|
|
.post("sys/dict/data/dictlist", {
|
|
dictType: "resident_category",
|
|
})
|
|
.then((res) => {
|
|
const { code, data } = res.data;
|
|
if (code === 0) {
|
|
this.peopleTypeList = data;
|
|
}
|
|
});
|
|
},
|
|
|
|
getUnitList(id) {
|
|
this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id).then((res) => {
|
|
const {
|
|
code,
|
|
data: { houseList, unitInfo },
|
|
} = res.data;
|
|
if (code === 0) {
|
|
let unitInfos = unitInfo || {};
|
|
this.homeMsg = unitInfos;
|
|
this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
|
|
this.houseMountArr = this.getDoorNameList(houseList);
|
|
if (this.houseMountArr.length > 0) {
|
|
this.flexWidth = this.houseMountArr[0].length * 58;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
getTableData(id) {
|
|
this.queryParams.unitId = id;
|
|
this.loading = true;
|
|
this.$http.get("/actual/base/streetOverview/getUnitHouseOverviewList?" + this.$paramsFormat(this.queryParams)).then((res) => {
|
|
const {
|
|
code,
|
|
data: { list, total },
|
|
} = res.data;
|
|
if (code === 0) {
|
|
this.list = list;
|
|
this.total = total;
|
|
this.loading = false;
|
|
} else {
|
|
this.loading = false;
|
|
}
|
|
});
|
|
},
|
|
|
|
search() {
|
|
this.queryParams.pageNo = 1;
|
|
this.getTableData();
|
|
},
|
|
|
|
getList(buid) {
|
|
const homeType = this.$route.query.typeB;
|
|
if (homeType === "building") {
|
|
// 1514914015259979777
|
|
this.$http.get(`/actual/base/streetOverview/getUnitListByBuilding?buildingId=` + this.$route.query.id).then((res) => {
|
|
const { code, data } = res.data;
|
|
if (code === 0) {
|
|
this.buildingList = data;
|
|
this.homeText = this.buildingList[0].buildingName + this.buildingList[0].unitName;
|
|
if (this.buildingList && this.buildingList.length > 0) {
|
|
if (buid) {
|
|
this.buildingList.forEach((item, i) => {
|
|
if (item.id === buid) {
|
|
item.ifActive = true;
|
|
this.getUnitList(item.id);
|
|
this.getTableData(item.id);
|
|
} else {
|
|
item.ifActive = false;
|
|
}
|
|
});
|
|
} else {
|
|
this.buildingList.forEach((item, i) => {
|
|
if (i === 0) {
|
|
item.ifActive = true;
|
|
this.getUnitList(item.id);
|
|
this.getTableData(item.id);
|
|
} else {
|
|
item.ifActive = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
this.loading = false;
|
|
} else {
|
|
this.loading = false;
|
|
}
|
|
});
|
|
} else {
|
|
this.getUnitList(this.$route.query.id);
|
|
this.getTableData(this.$route.query.id);
|
|
}
|
|
},
|
|
|
|
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);
|
|
},
|
|
|
|
chooseNav(item) {
|
|
let buildList = [...this.buildingList];
|
|
this.homeText = item.buildingName + item.unitName;
|
|
buildList.forEach((d) => {
|
|
if (item.id === d.id) {
|
|
d.ifActive = true;
|
|
this.getUnitList(item.id);
|
|
this.getTableData(item.id);
|
|
} else {
|
|
d.ifActive = false;
|
|
}
|
|
});
|
|
this.buildingList = buildList;
|
|
},
|
|
},
|
|
};
|
|
</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;
|
|
}
|
|
|
|
@mixin navListCommon {
|
|
min-width: 120px;
|
|
height: 36px;
|
|
font-size: 14px;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
margin-right: 4px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@mixin homeCommon {
|
|
height: 58px;
|
|
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: #fff;
|
|
&:not(:last-child) {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
.top-nav-list {
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
.top-nav-item {
|
|
@include navListCommon;
|
|
background-image: url("~@/assets/images/home/noChooseMain.png");
|
|
color: #96b1ce;
|
|
}
|
|
.top-nav-itemAC {
|
|
@include navListCommon;
|
|
background-image: url("~@/assets/images/home/chooseMain.png");
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.homeWrap {
|
|
.bread {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.apar_top {
|
|
width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.apartment {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
margin-top: 60px;
|
|
|
|
.apar_comtent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.apar_center {
|
|
min-width: 244px;
|
|
max-width: 488px;
|
|
height: 578px;
|
|
overflow: auto;
|
|
background: #caab93;
|
|
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 {
|
|
@include homeCommon;
|
|
background: url("@/assets/images/home/hasPeople.png") no-repeat;
|
|
}
|
|
.dangerHome,
|
|
.dangerPeople {
|
|
@include homeCommon;
|
|
background: url("@/assets/images/home/dangerHomeBg.png") no-repeat;
|
|
}
|
|
.freeHome {
|
|
@include homeCommon;
|
|
background: url("@/assets/images/home/freeHome.png") no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dangerClass {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
div:first-child {
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.apar_bottom {
|
|
width: 100%;
|
|
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: 0px;
|
|
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 green;
|
|
color: green;
|
|
}
|
|
|
|
.miniGrid_yellow {
|
|
@include radio;
|
|
background: rgba(249, 86, 25, 0.2);
|
|
border: 1px solid yellow;
|
|
color: yellow;
|
|
}
|
|
}
|
|
.mount {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.screen {
|
|
margin: 5px 0 40px;
|
|
|
|
.el-select,
|
|
.el-input {
|
|
width: 150px;
|
|
margin-right: 4px;
|
|
border: 1px solid #126ac5;
|
|
border-radius: 2px;
|
|
|
|
/deep/ .el-input__inner {
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.searchSelect {
|
|
width: 200px;
|
|
/deep/ .el-select__tags {
|
|
width: 200px !important;
|
|
max-width: 200px !important;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin-left: 46px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|