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.
563 lines
13 KiB
563 lines
13 KiB
<template>
|
|
|
|
<div class="div_community_info"
|
|
@click="handleCloseAllUser()">
|
|
<div class="div_select">
|
|
|
|
<img src="../../../../assets/img/shuju/title-tip.png"
|
|
alt />
|
|
|
|
<div class="second-select">
|
|
<el-select v-model="selBuildingId"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择"
|
|
@click="handleCloseAllUser()">
|
|
<el-option v-for="(item,index) in buildingArray"
|
|
:key="item.buildingId"
|
|
:label="item.buildingName"
|
|
:value="item.buildingId"
|
|
@click.native="handleClickBuilding(index)">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="div_room_bar">
|
|
<el-scrollbar v-if="roomArray.length>0"
|
|
style="height:100%">
|
|
<div class="info_loading"
|
|
v-if="roomLoaded">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
<div v-if="!roomLoaded"
|
|
class="div_room">
|
|
|
|
<div v-for="(item,index) in roomArray"
|
|
:key="index"
|
|
:class="['item',{'item_sel':selHouseIndex==index}]"
|
|
@click="handleClickRoom(index)">
|
|
|
|
<div class="housename">{{item.houseName}}</div>
|
|
|
|
<div class="icon_party">
|
|
<img :src="item.partyUrl"
|
|
alt />
|
|
</div>
|
|
|
|
<div class="icon_roomstate">
|
|
<div>出租</div>
|
|
</div>
|
|
|
|
<div class="icon_category">
|
|
|
|
<div class="div_icon_item"
|
|
v-for="(iconItem,iconIndex) in item.iconArrayShow"
|
|
:key="iconIndex">
|
|
<el-popover trigger="hover"
|
|
popper-class="icon_popover"
|
|
placement="bottom">
|
|
<div class="icon_name">{{iconItem.name}} </div>
|
|
<div slot="reference">
|
|
<img class="icon_img"
|
|
:src="iconItem.iconUrl"
|
|
alt />
|
|
</div>
|
|
|
|
</el-popover>
|
|
</div>
|
|
<!-- <img v-for="(iconItem,iconIndex) in item.iconArrayShow"
|
|
:key="iconIndex"
|
|
:src="iconItem.iconUrl"
|
|
alt /> -->
|
|
</div>
|
|
|
|
<el-popover v-model="item.showAllUser"
|
|
placement="bottom"
|
|
width="50"
|
|
popper-class="my_popover"
|
|
trigger="manual">
|
|
<div class="user_list">
|
|
<div v-for="(userItem,userIndex) in userArray"
|
|
:key="userIndex"
|
|
class="user_item"
|
|
@click.stop="handleClickUser(userItem.userId)">
|
|
<div class="user_item_content">
|
|
<div class="name">{{userItem.name}}</div>
|
|
|
|
<img src="../../../../assets/img/jinru.png"
|
|
alt />
|
|
|
|
</div>
|
|
<div :class="['item_line',{'last_line':userIndex==(userArray.length-1)}]"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div slot="reference"
|
|
class="div_user"
|
|
@click.stop="handleShowAllUser(index)">
|
|
|
|
<span>全部成员</span>
|
|
<img src="../../../../assets/img/xiala.png"
|
|
alt />
|
|
</div>
|
|
|
|
</el-popover>
|
|
</div>
|
|
|
|
</div>
|
|
</el-scrollbar>
|
|
|
|
<div v-else
|
|
class="no-data">
|
|
<img src="@/assets/img/modules/visual/noData.png"
|
|
class="no-data-img" />
|
|
</div>
|
|
</div>
|
|
|
|
<room-info v-show="showHouseInfo"
|
|
v-if="selHouseId"
|
|
:selHouseId="selHouseId"
|
|
@close="showHouseInfo = false" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from 'element-ui'; //引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
import ScreenLoading from "@/views/modules/visual/cpts/loading";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import roomInfo from "@/views/modules/visual/basicinfo/cpts/roomInfo";
|
|
|
|
let loading;//加载动画
|
|
|
|
export default {
|
|
|
|
data () {
|
|
return {
|
|
//父组件传过来的小区id
|
|
neighborHoodId: '',
|
|
neighborHoodName: '',
|
|
buildingArray: [],//楼栋下拉框数据
|
|
selBuildingId: '',
|
|
selBuildingName: '',
|
|
|
|
roomLoaded: false,
|
|
roomArray: [],
|
|
selHouseId: '',
|
|
selHouseName: '',
|
|
selHouseIndex: 0,
|
|
showHouseInfo: false,
|
|
|
|
userArray: [],
|
|
selUserName: '',
|
|
selUserId: '',
|
|
|
|
orgData: {},//当前组织对象
|
|
orgId: '',
|
|
orgLevel: '',
|
|
|
|
//下钻层级记录
|
|
runNum: 0,
|
|
runAgencyArray: [],
|
|
|
|
|
|
|
|
|
|
}
|
|
},
|
|
async mounted () {
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
//小区id，小区名称
|
|
async initData (neighborHoodId, neighborHoodName) {
|
|
|
|
this.neighborHoodId = neighborHoodId
|
|
this.neighborHoodName = neighborHoodName
|
|
//加载楼栋数据
|
|
await this.loadBuilding()
|
|
|
|
if (this.selBuildingId) {
|
|
await this.loadRoom()
|
|
|
|
} else {
|
|
this.roomArray = []
|
|
}
|
|
|
|
},
|
|
|
|
//切换楼栋
|
|
async handleClickBuilding (index) {
|
|
|
|
this.selBuildingId = this.buildingArray[index].buildingId
|
|
this.selBuildingName = this.buildingArray[index].buildingName
|
|
|
|
await this.loadRoom()
|
|
|
|
|
|
this.$emit('refreshInfoList', this.selBuildingId, 'building')
|
|
},
|
|
//选择房间
|
|
handleClickRoom (index) {
|
|
this.selHouseIndex = index
|
|
this.selHouseId = this.roomArray[index].houseId
|
|
this.selHouseName = this.roomArray[index].houseName
|
|
|
|
this.showHouseInfo = true
|
|
|
|
// this.$emit('refreshInfoList', this.selHouseId, 'room')-
|
|
},
|
|
//点击全部成员
|
|
async handleShowAllUser (selIndex) {
|
|
|
|
this.userArray = []
|
|
this.roomArray.forEach((element, index) => {
|
|
if (index !== selIndex) {
|
|
let obj = JSON.parse(JSON.stringify(element))
|
|
obj.showAllUser = false
|
|
this.$set(this.roomArray, index, obj)
|
|
}
|
|
|
|
});
|
|
|
|
if ((selIndex === 0 || selIndex) && !this.roomArray[selIndex].showAllUser) {
|
|
await nextTick(100);
|
|
await this.loadUser(this.roomArray[selIndex].houseId, selIndex)
|
|
|
|
} else {
|
|
let obj = JSON.parse(JSON.stringify(this.roomArray[selIndex]))
|
|
obj.showAllUser = false
|
|
this.$set(this.roomArray, selIndex, obj)
|
|
}
|
|
|
|
|
|
},
|
|
//关闭成员显示
|
|
async handleCloseAllUser () {
|
|
|
|
this.userArray = []
|
|
this.roomArray.forEach((element, index) => {
|
|
|
|
let obj = JSON.parse(JSON.stringify(element))
|
|
|
|
obj.showAllUser = false
|
|
this.$set(this.roomArray, index, obj)
|
|
|
|
});
|
|
|
|
},
|
|
|
|
//点击用户
|
|
handleClickUser (userId) {
|
|
this.handleCloseAllUser()
|
|
this.$emit('toSubAgency', 'people', userId, "")
|
|
},
|
|
//获取右侧infolist数据
|
|
async loadList () {
|
|
|
|
},
|
|
|
|
onEnterTd () {
|
|
console.log('进入')
|
|
},
|
|
onLeaveTd () {
|
|
console.log('出来')
|
|
},
|
|
|
|
//加载楼栋数据
|
|
async loadBuilding () {
|
|
const url = "/gov/org/agency/baseinfofamilybuilding"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/baseinfofamilybuilding"
|
|
let params = {
|
|
neighborHoodId: this.neighborHoodId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
|
|
this.buildingArray = data
|
|
this.buildingArray.forEach(item => {
|
|
if (!this.buildingArray[0].buildingName) {
|
|
item.buildingName = '楼'
|
|
}
|
|
|
|
});
|
|
if (this.buildingArray.length > 0) {
|
|
this.selBuildingId = this.buildingArray[0].buildingId
|
|
this.selBuildingName = this.buildingArray[0].buildingName
|
|
|
|
|
|
} else {
|
|
this.selBuildingId = ''
|
|
this.selBuildingName = ''
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
//加载房间数据
|
|
async loadRoom () {
|
|
this.roomLoaded = true
|
|
const url = "/gov/org/ichouse/houselist"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/ichouse/houselist"
|
|
let params = {
|
|
buildingId: this.selBuildingId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
this.roomLoaded = false
|
|
if (code === 0) {
|
|
|
|
if (data.length > 0) {
|
|
|
|
data.forEach((roomItem, index) => {
|
|
roomItem.showAllUser = false
|
|
|
|
let categoryList = JSON.parse(JSON.stringify(roomItem.categoryList))
|
|
|
|
roomItem.iconArrayShow = []
|
|
|
|
if (categoryList.length > 0) {
|
|
if (categoryList[0].isSpecial === '1') {//第一个图标是党员
|
|
roomItem.isParty = true
|
|
roomItem.partyUrl = categoryList[0].iconUrl
|
|
categoryList.shift();//删除第一个数据
|
|
} else {
|
|
roomItem.isParty = false
|
|
}
|
|
|
|
let iconNum = categoryList.length > 4 ? 4 : categoryList.length
|
|
|
|
for (let i = 0; i < iconNum; i++) {
|
|
roomItem.iconArrayShow.push(categoryList[i])
|
|
}
|
|
}
|
|
|
|
|
|
});
|
|
|
|
this.$nextTick(() => {
|
|
this.roomArray = [...data]
|
|
});
|
|
|
|
} else {
|
|
this.roomArray = []
|
|
}
|
|
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
//加载成员数据
|
|
async loadUser (houseId, selIndex) {
|
|
const url = "/epmetuser/icresiuser/getpeoplebyroom"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/getpeoplebyroom"
|
|
let params = {
|
|
homeId: houseId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.userArray = data
|
|
if (this.userArray.length === 0) {
|
|
this.$message.warning('该房间下没有住户')
|
|
} else {
|
|
let objItem = JSON.parse(JSON.stringify(this.roomArray[selIndex]))
|
|
|
|
objItem.showAllUser = true
|
|
this.$set(this.roomArray, selIndex, objItem)
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//开启加载动画
|
|
startLoading () {
|
|
loading = Loading.service({
|
|
lock: true, //是否锁定
|
|
text: '正在加载……', //加载中需要显示的文字
|
|
background: 'rgba(0,0,0,.7)' //背景颜色
|
|
});
|
|
|
|
},
|
|
|
|
//结束加载动画
|
|
endLoading () {
|
|
//clearTimeout(timer);
|
|
if (loading) {
|
|
loading.close();
|
|
}
|
|
},
|
|
},
|
|
props: {
|
|
|
|
},
|
|
computed: {
|
|
// selectWidth () {
|
|
// let width = this.selHouseName.length * 200
|
|
// console.log(width)
|
|
// return width + 'px';
|
|
// },
|
|
|
|
mapHeight () {
|
|
|
|
return this.clientHeight - 120;
|
|
|
|
},
|
|
// zoom: {
|
|
// get () {
|
|
// //根据不同屏幕分辨率，控制zoom大小
|
|
// if (this.clientHeight < 900) {
|
|
// return 2.3
|
|
// } else {
|
|
// return 2.8
|
|
// }
|
|
// },
|
|
// set (value) {
|
|
// }
|
|
// },
|
|
...mapGetters(["clientHeight"])
|
|
|
|
},
|
|
components: { ScreenLoading, roomInfo },
|
|
}
|
|
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/basicInfoMain.scss"
|
|
scoped
|
|
></style>
|
|
|
|
<style lang=scss scoped>
|
|
.info_loading {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.second-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
.second-title-label {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
.second-title-label::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
margin-top: -6px;
|
|
background: #2865fa;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.second-select {
|
|
margin: 0 10px 10px;
|
|
::v-deep .el-input {
|
|
width: 380px;
|
|
height: 36px;
|
|
.el-input__inner {
|
|
height: 100%;
|
|
padding: 0 10px;
|
|
color: #fff;
|
|
line-height: 36px;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
width: 380px;
|
|
}
|
|
|
|
.el-icon-arrow-up:before {
|
|
content: "\e78f";
|
|
}
|
|
// .el-select__caret:before {
|
|
// content: '\E790'
|
|
// }
|
|
}
|
|
::v-deep .el-date-editor {
|
|
width: 360px;
|
|
position: relative;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
.el-range-input {
|
|
color: #fff;
|
|
background: #06186d;
|
|
}
|
|
.el-range-separator {
|
|
color: #fff;
|
|
}
|
|
.el-range__icon {
|
|
position: absolute;
|
|
right: 5px;
|
|
// float: right;
|
|
}
|
|
.el-input__prefix {
|
|
left: unset;
|
|
right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.second-select:last-child {
|
|
margin-left: 0;
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/typeAnalyze.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.div_room_bar {
|
|
/deep/ .el-scrollbar__wrap {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
.no-data {
|
|
padding-top: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss" >
|
|
.el-popover.my_popover {
|
|
padding: 0px;
|
|
margin-top: 14px;
|
|
border: 0;
|
|
}
|
|
.el-popover.icon_popover {
|
|
font-size: 14px;
|
|
min-width: 50px !important;
|
|
margin-top: 5px !important;
|
|
padding: 3px !important;
|
|
background-color: rgb(247, 250, 253);
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|