|
|
|
@ -22,18 +22,24 @@ |
|
|
|
<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 class="apar_center"> |
|
|
|
<div class="apar_center_flex" :style="{ width: flexWidth + 'px' }"> |
|
|
|
<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 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 class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="apar_bottom"> |
|
|
|
<img src="@/assets/images/home/homeBottom.png" alt="/" /> |
|
|
|
</div> |
|
|
|
@ -44,32 +50,61 @@ |
|
|
|
</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 satisfactionCategoryOptions" :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 satisfactionCategoryOptions" :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" label="门牌号" /> |
|
|
|
<el-table-column prop="fullName" show-overflow-tooltip label="所属小区" /> |
|
|
|
<el-table-column prop="buildingId" show-overflow-tooltip label="所属楼栋" /> |
|
|
|
<el-table-column prop="buildingUnitId" show-overflow-tooltip label="所属单元" /> |
|
|
|
<el-table-column prop="houseCode" label="房屋编码" /> |
|
|
|
<el-table-column prop="rentFlag" label="房屋状态"> |
|
|
|
<el-table-column prop="doorName" width="100" label="门牌号" /> |
|
|
|
<el-table-column prop="fullName" width="120" show-overflow-tooltip label="所属小区" /> |
|
|
|
<el-table-column prop="buildingId" width="120" show-overflow-tooltip label="所属楼栋" /> |
|
|
|
<el-table-column prop="buildingUnitId" 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" label="房屋类型"> |
|
|
|
<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" label="房主姓名" /> |
|
|
|
<el-table-column prop="ownerPhone" label="房主电话"> |
|
|
|
<el-table-column prop="ownerName" width="120" label="房主姓名" /> |
|
|
|
<el-table-column prop="ownerPhone" width="120" 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> |
|
|
|
@ -77,9 +112,9 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<!-- <div> |
|
|
|
<Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" /> |
|
|
|
</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> |
|
|
|
@ -89,6 +124,7 @@ |
|
|
|
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", |
|
|
|
@ -96,12 +132,24 @@ export default { |
|
|
|
Pagination, |
|
|
|
Title, |
|
|
|
BreadCrumb, |
|
|
|
PeopleMount, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
// total: 0, |
|
|
|
// pageNum: 1, |
|
|
|
// pageSize: 10, |
|
|
|
total: 0, |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
unitId: "", |
|
|
|
ownerName: "", |
|
|
|
ownerPhone: "", |
|
|
|
ownerIdCard: "", |
|
|
|
riskyFlag: "", |
|
|
|
residentTag: "", |
|
|
|
}, |
|
|
|
orgOptions: [], |
|
|
|
satisfactionSourceOptions: [], |
|
|
|
satisfactionCategoryOptions: [], |
|
|
|
flexWidth: 0, |
|
|
|
loading: false, |
|
|
|
homeMsg: {}, |
|
|
|
@ -111,28 +159,11 @@ export default { |
|
|
|
houseMountArr: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
// "$route.query.buIding": { |
|
|
|
// handler(val) { |
|
|
|
// if (val) { |
|
|
|
// this.getList(val); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// immediate: true, |
|
|
|
// }, |
|
|
|
// "$route.query.typeB": { |
|
|
|
// handler(val) { |
|
|
|
// console.log("jhjkbhkjhkjhkjhkjhkj"); |
|
|
|
// if (val) { |
|
|
|
// this.getList(); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
// immediate: true, |
|
|
|
// }, |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
mounted() { |
|
|
|
const buId = this.$route.query.buId || null; |
|
|
|
this.getList(buId); |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getDoorNameList(list) { |
|
|
|
@ -167,7 +198,6 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
getUnitList(id) { |
|
|
|
this.loading = true; |
|
|
|
this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id).then((res) => { |
|
|
|
const { |
|
|
|
code, |
|
|
|
@ -175,13 +205,24 @@ export default { |
|
|
|
} = res.data; |
|
|
|
if (code === 0) { |
|
|
|
let unitInfos = unitInfo || {}; |
|
|
|
this.list = houseList; |
|
|
|
this.homeMsg = unitInfos; |
|
|
|
this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : ""); |
|
|
|
this.houseMountArr = this.getDoorNameList(this.list); |
|
|
|
if (this.houseMountArr.length > 0) { |
|
|
|
this.flexWidth = this.houseMountArr[0].length * 58; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
getTableData() { |
|
|
|
const { id } = this.$route.query; |
|
|
|
this.queryParams.unitId = id; |
|
|
|
this.loading = true; |
|
|
|
this.$http.get("/actual/base/streetOverview/getUnitHouseOverviewList?" + this.$paramsFormat(this.queryParams)).then((res) => { |
|
|
|
const { code, data } = res.data; |
|
|
|
if (code === 0) { |
|
|
|
this.list = data; |
|
|
|
this.loading = false; |
|
|
|
} else { |
|
|
|
this.loading = false; |
|
|
|
@ -189,6 +230,8 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
search() {}, |
|
|
|
|
|
|
|
getList(buid) { |
|
|
|
const homeType = this.$route.query.typeB; |
|
|
|
if (homeType === "building") { |
|
|
|
@ -201,7 +244,6 @@ export default { |
|
|
|
if (this.buildingList && this.buildingList.length > 0) { |
|
|
|
if (buid) { |
|
|
|
this.buildingList.forEach((item, i) => { |
|
|
|
console.log(item); |
|
|
|
if (item.id === buid) { |
|
|
|
item.ifActive = true; |
|
|
|
this.getUnitList(item.id); |
|
|
|
@ -327,7 +369,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 100px; |
|
|
|
margin-top: 60px; |
|
|
|
|
|
|
|
.apar_comtent { |
|
|
|
display: flex; |
|
|
|
@ -338,7 +380,7 @@ export default { |
|
|
|
.apar_center { |
|
|
|
min-width: 244px; |
|
|
|
max-width: 488px; |
|
|
|
height: 584px; |
|
|
|
height: 578px; |
|
|
|
overflow: auto; |
|
|
|
background: #caab93; |
|
|
|
padding: 30px 30px 10px 30px; |
|
|
|
@ -426,5 +468,39 @@ export default { |
|
|
|
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> |
|
|
|
|
PLUTO
2 years ago
