|
|
|
@ -1,23 +1,24 @@ |
|
|
|
<template> |
|
|
|
<div class="homeWrap"> |
|
|
|
|
|
|
|
<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)"> |
|
|
|
<el-row :gutter="48" style="background-color: #fff;height: calc(100vh - 129px);"> |
|
|
|
<el-row style="padding-left: 23px;"> |
|
|
|
<el-col :span="24"> |
|
|
|
<div class="top-nav-list" v-if="level != 'unit'"> |
|
|
|
<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" style="background-color: #fff;height: calc(100vh - 129px);"> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-col :span="8"> |
|
|
|
<!-- <div class="mount"> |
|
|
|
<people-mount /> |
|
|
|
</div> --> |
|
|
|
<div class="apartment"> |
|
|
|
<div class="apar_comtent" v-if="houseMountArr.length > 0"> |
|
|
|
<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_top"></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"> |
|
|
|
@ -73,7 +74,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="apar_bottom"> |
|
|
|
<img src="@/assets/images/home/homeBottom.png" alt="/" /> |
|
|
|
<img src="@/assets/images/home/homeBottomS.png" alt="/" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="apar_right"> |
|
|
|
@ -152,11 +153,7 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" width="80" 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> |
|
|
|
<el-button type="text" @click="handleToDetail(row)">查看</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -164,8 +161,8 @@ |
|
|
|
</div> |
|
|
|
<div class="pagination"> |
|
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
|
|
|
:current-page.sync="queryParams.pageNo" :page-size="queryParams.pageSize" layout="total,->,prev, pager, next, jumper" |
|
|
|
:total="total"> |
|
|
|
:current-page.sync="queryParams.pageNo" :page-size="queryParams.pageSize" |
|
|
|
layout="total,->,prev, pager, next, jumper" :total="total"> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -193,7 +190,6 @@ export default { |
|
|
|
residentTag: "", |
|
|
|
}, |
|
|
|
orgOptions: [], |
|
|
|
peopleTypeList: [], |
|
|
|
riskHomeList: [ |
|
|
|
{ |
|
|
|
label: "风险", |
|
|
|
@ -208,7 +204,6 @@ export default { |
|
|
|
loading: false, |
|
|
|
homeMsg: {}, |
|
|
|
list: [], |
|
|
|
homeText: "", |
|
|
|
buildingList: [], |
|
|
|
houseMountArr: [ |
|
|
|
[ |
|
|
|
@ -225,18 +220,33 @@ export default { |
|
|
|
level: '' |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: {}, |
|
|
|
watch: { |
|
|
|
|
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.buildingId = this.$store.state.huaXiang.buildingInfo.buildingId || null; |
|
|
|
this.queryParams.unitId = this.$store.state.huaXiang.buildingInfo.buildingUnitId || null; |
|
|
|
this.level = this.$store.state.huaXiang.buildingInfo.level || null; |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
|
|
|
|
activated() { |
|
|
|
this.list = []; |
|
|
|
this.houseMountArr = []; |
|
|
|
this.queryParams.unitId = this.$route.query.buildingUnitId || null; |
|
|
|
this.level = this.$route.query.level || null; |
|
|
|
this.buildingId = this.$route.query.buildingId || null; |
|
|
|
this.getList(this.buildingId); |
|
|
|
this.getPeopleTypeList(); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleToDetail(row){ |
|
|
|
let {doorName,id,fullName} = row |
|
|
|
this.$store.dispatch('saveDataH', { doorName,houseId:id,fullName }); |
|
|
|
this.$router.push({ name: 'fangwu-huaxiang' }); |
|
|
|
this.$store.state.contentTabs = this.$store.state.contentTabs.map(item => { |
|
|
|
if (item.name === "fangwu-huaxiang") { |
|
|
|
return {...item, title: doorName }; |
|
|
|
} |
|
|
|
return item; |
|
|
|
}); |
|
|
|
}, |
|
|
|
handleSizeChange(val) { |
|
|
|
this.queryParams.pageSize = val; |
|
|
|
window.localStorage.setItem("pageSize", val); |
|
|
|
@ -277,20 +287,8 @@ export default { |
|
|
|
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.houseMountArr = [] |
|
|
|
this.$http |
|
|
|
.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id) |
|
|
|
.then((res) => { |
|
|
|
@ -307,12 +305,7 @@ export default { |
|
|
|
]); |
|
|
|
this.freeHomeArr = freeHomeArr; |
|
|
|
this.homeMsg = unitInfos; |
|
|
|
this.homeText = |
|
|
|
(unitInfos.quartersName ? unitInfos.quartersName : "") + |
|
|
|
(unitInfos.buildingName ? unitInfos.buildingName : "") + |
|
|
|
(unitInfos.unitNum ? unitInfos.unitNum + "单元" : ""); |
|
|
|
this.houseMountArr = this.getDoorNameList(houseList); |
|
|
|
console.log(this.houseMountArr); |
|
|
|
if (this.houseMountArr.length > 0) { |
|
|
|
this.flexWidth = this.houseMountArr[0].length * 58; |
|
|
|
} |
|
|
|
@ -321,6 +314,8 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
getTableData(id) { |
|
|
|
this.queryParams.unitId = id; |
|
|
|
this.list = [] |
|
|
|
// const idx = "812295ba44c594fc85a808f67b7a8aa4"; |
|
|
|
this.loading = true; |
|
|
|
this.$http |
|
|
|
@ -345,11 +340,12 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getList(buid) { |
|
|
|
// const homeType = this.$route.query.typeB; |
|
|
|
getList() { |
|
|
|
console.log(this.level); |
|
|
|
if (this.level == "building") { |
|
|
|
// 1514914015259979777 |
|
|
|
this.getUnitList(this.queryParams.unitId); |
|
|
|
this.getTableData(this.queryParams.unitId); |
|
|
|
} else if(this.level == "unit"){ |
|
|
|
this.$http |
|
|
|
.get( |
|
|
|
`/actual/base/streetOverview/getUnitListByBuilding?buildingId=` + |
|
|
|
@ -359,13 +355,11 @@ export default { |
|
|
|
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) { |
|
|
|
if (this.queryParams.unitId) { |
|
|
|
this.buildingList.forEach((item, i) => { |
|
|
|
if (item.id === buid) { |
|
|
|
if (item.id === this.queryParams.unitId) { |
|
|
|
item.ifActive = true; |
|
|
|
this.getUnitList(item.id); |
|
|
|
this.getTableData(item.id); |
|
|
|
@ -390,9 +384,6 @@ export default { |
|
|
|
this.loading = false; |
|
|
|
} |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.getUnitList(this.queryParams.unitId); |
|
|
|
this.getTableData(this.queryParams.unitId); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -440,14 +431,11 @@ export default { |
|
|
|
["LIVE_ALONE_FLAG", "kclr"], |
|
|
|
["PUBLIC_WELFARE_FLAG", "gyg"], |
|
|
|
]); |
|
|
|
console.log(item); |
|
|
|
console.log(homeTypeMap.get(item)); |
|
|
|
return homeTypeMap.get(item); |
|
|
|
}, |
|
|
|
|
|
|
|
chooseNav(item) { |
|
|
|
let buildList = [...this.buildingList]; |
|
|
|
this.homeText = item.buildingName + item.unitName; |
|
|
|
buildList.forEach((d) => { |
|
|
|
if (item.id === d.id) { |
|
|
|
d.ifActive = true; |
|
|
|
@ -462,7 +450,7 @@ export default { |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
tableHeight() { |
|
|
|
return this.clientHeight - 60 - 80 - 80 ; |
|
|
|
return this.clientHeight - 60 - 80 - 80 - 30; |
|
|
|
}, |
|
|
|
...mapGetters(["clientHeight", "env"]), |
|
|
|
}, |
|
|
|
@ -474,6 +462,7 @@ export default { |
|
|
|
.table { |
|
|
|
margin-top: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
@mixin radio { |
|
|
|
display: inline-block; |
|
|
|
width: 90px; |
|
|
|
@ -523,32 +512,34 @@ export default { |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .pagination { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.el-pagination { |
|
|
|
display: flex; |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.el-pagination__rightwrapper { |
|
|
|
position: absolute; |
|
|
|
right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-list { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 16px; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
.top-nav-item { |
|
|
|
@include navListCommon; |
|
|
|
background-image: url("~@/assets/images/home/noChooseMain.png"); |
|
|
|
color: #96b1ce; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
|
|
|
|
.top-nav-itemAC { |
|
|
|
@include navListCommon; |
|
|
|
background-image: url("~@/assets/images/home/chooseMain.png"); |
|
|
|
color: #fff; |
|
|
|
color: #0056d6; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -558,7 +549,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.apar_top { |
|
|
|
width: 100%; |
|
|
|
min-width: 334px; |
|
|
|
max-width: 483px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
@ -587,6 +579,7 @@ export default { |
|
|
|
// align-items: flex-end; |
|
|
|
flex-direction: column-reverse; |
|
|
|
height: calc(100vh - 376px); |
|
|
|
|
|
|
|
.apar_center_flex { |
|
|
|
// width: 100%; |
|
|
|
display: flex; |
|
|
|
@ -632,8 +625,9 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.apar_bottom { |
|
|
|
width: 100%; |
|
|
|
margin-top: -1px; |
|
|
|
min-width: 334px; |
|
|
|
max-width: 378px; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
@ -641,6 +635,12 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.apar_center_top { |
|
|
|
width: 100%; |
|
|
|
height: 9px; |
|
|
|
background: #D8DBE7; |
|
|
|
} |
|
|
|
|
|
|
|
// .apar_right { |
|
|
|
// margin-left: -3px; |
|
|
|
// } |
|
|
|
|
