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.
698 lines
18 KiB
698 lines
18 KiB
<template>
|
|
|
|
<div class="div_community_info"
|
|
@click="handleShowAllUser()">
|
|
<div class="div_select">
|
|
|
|
<img src="../../../../assets/img/shuju/title-tip.png"
|
|
alt />
|
|
<div class="customer_select">
|
|
<!-- <span>{{neighborHoodName+'-'}}</span> -->
|
|
<el-select v-model="selBuildingId"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择">
|
|
<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 style="height:100%">
|
|
<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)">
|
|
<span>{{item.houseName}}</span>
|
|
|
|
<div class="icon_party">
|
|
<img :src="item.partyUrl"
|
|
alt />
|
|
</div>
|
|
<div class="icon_category">
|
|
<img v-for="(iconItem,iconIndex) in item.iconArrayShow"
|
|
:key="iconIndex"
|
|
:src="iconItem.iconUrl"
|
|
alt />
|
|
</div>
|
|
<div @click.stop="handleShowAllUser(index)"
|
|
class="div_user">
|
|
|
|
<span>全部成员</span>
|
|
<img src="../../../../assets/img/xiala.png"
|
|
alt />
|
|
|
|
<div class="user_list"
|
|
v-show="item.showAllUser&&userArray.length>0">
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { Loading } from 'element-ui'; //引入Loading服务
|
|
import { requestPost } from "@/js/dai/request";
|
|
|
|
let loading;//加载动画
|
|
|
|
export default {
|
|
|
|
data () {
|
|
return {
|
|
//父组件传过来的小区id
|
|
neighborHoodId: '',
|
|
neighborHoodName: '',
|
|
buildingArray: [],//楼栋下拉框数据
|
|
selBuildingId: '',
|
|
selBuildingName: '',
|
|
|
|
roomLoaded: false,
|
|
roomArray: [
|
|
{
|
|
houseId: "1",
|
|
houseName: "101室",
|
|
categoryList: [
|
|
{
|
|
name: '党员',
|
|
iconUrl: require('../../../../assets/img/shuju/dangyuan.png'),
|
|
isSpecial: '1',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "2",
|
|
houseName: "102室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "3",
|
|
houseName: "103室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "4",
|
|
houseName: "104室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "5",
|
|
houseName: "105室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "6",
|
|
houseName: "106室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
}, {
|
|
houseId: "1",
|
|
houseName: "101室",
|
|
categoryList: [
|
|
{
|
|
name: '党员',
|
|
iconUrl: require('../../../../assets/img/shuju/dangyuan.png'),
|
|
isSpecial: '1',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "2",
|
|
houseName: "102室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "3",
|
|
houseName: "103室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "4",
|
|
houseName: "104室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "5",
|
|
houseName: "105室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "6",
|
|
houseName: "106室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
}, {
|
|
houseId: "1",
|
|
houseName: "101室",
|
|
categoryList: [
|
|
{
|
|
name: '党员',
|
|
iconUrl: require('../../../../assets/img/shuju/dangyuan.png'),
|
|
isSpecial: '1',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "2",
|
|
houseName: "102室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
},
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "3",
|
|
houseName: "103室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "4",
|
|
houseName: "104室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "5",
|
|
houseName: "105室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
houseId: "6",
|
|
houseName: "106室",
|
|
categoryList: [
|
|
{
|
|
name: '低保',
|
|
iconUrl: require('../../../../assets/img/modules/visual/dabing.png'),
|
|
isSpecial: '0',
|
|
}
|
|
]
|
|
}
|
|
],
|
|
selHouseId: '',
|
|
selHouseName: '',
|
|
selHouseIndex: 0,
|
|
|
|
userArray: [],
|
|
selUserName: '',
|
|
selUserId: '',
|
|
|
|
orgData: {},//当前组织对象
|
|
orgId: '',
|
|
orgLevel: '',
|
|
|
|
//下钻层级记录
|
|
runNum: 0,
|
|
runAgencyArray: [],
|
|
|
|
}
|
|
},
|
|
async mounted () {
|
|
|
|
|
|
},
|
|
methods: {
|
|
//小区id，小区名称
|
|
async initData (neighborHoodId, neighborHoodName) {
|
|
this.roomLoaded = false
|
|
this.neighborHoodId = neighborHoodId
|
|
this.neighborHoodName = neighborHoodName
|
|
//加载楼栋数据
|
|
await this.loadBuilding()
|
|
|
|
if (this.selBuildingId) {
|
|
await this.loadRoom()
|
|
this.roomLoaded = true
|
|
|
|
}
|
|
|
|
},
|
|
|
|
//切换楼栋
|
|
async handleClickBuilding (index) {
|
|
|
|
this.selBuildingId = this.buildingArray[index].buildingId
|
|
this.selBuildingName = this.buildingArray[index].buildingName
|
|
|
|
await this.loadRoom()
|
|
this.roomLoaded = true
|
|
|
|
this.$emit('refreshInfoList', this.selBuildingId, 'building')
|
|
},
|
|
//选择房间
|
|
handleClickRoom (index) {
|
|
this.selHouseIndex = index
|
|
this.selHouseId = this.roomArray[index].houseId
|
|
this.selHouseName = this.roomArray[index].houseName
|
|
|
|
// this.$emit('refreshInfoList', this.selHouseId, 'room')
|
|
},
|
|
//点击全部成员
|
|
async handleShowAllUser (selIndex) {
|
|
// this.startLoading()
|
|
|
|
this.roomArray.forEach((element, index) => {
|
|
let obj = JSON.parse(JSON.stringify(element))
|
|
|
|
if (index === selIndex) {
|
|
obj.showAllUser = !obj.showAllUser
|
|
this.$set(this.roomArray, selIndex, obj)
|
|
|
|
this.loadUser(element.houseId, selIndex)
|
|
} else {
|
|
obj.showAllUser = false
|
|
this.$set(this.roomArray, index, obj)
|
|
// element.showAllUser = false
|
|
}
|
|
});
|
|
// this.endLoading()
|
|
|
|
},
|
|
|
|
//点击用户
|
|
handleClickUser (userId) {
|
|
this.$emit('toSubAgency', 'people', userId, "")
|
|
},
|
|
//获取右侧infolist数据
|
|
async loadList () {
|
|
|
|
},
|
|
|
|
//加载楼栋数据
|
|
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 () {
|
|
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)
|
|
|
|
if (code === 0) {
|
|
this.roomArray = data
|
|
|
|
if (this.roomArray.length > 0) {
|
|
|
|
this.roomArray.forEach(roomItem => {
|
|
let iconArrayShow = JSON.parse(JSON.stringify(roomItem.categoryList))
|
|
let iconArray = []
|
|
|
|
if (iconArrayShow.length > 0) {
|
|
if (iconArrayShow[0].isSpecial === '1') {//第一个图标是党员
|
|
roomItem.isParty = true
|
|
roomItem.partyUrl = iconArrayShow[0].iconUrl
|
|
iconArrayShow.shift();//删除第一个数据
|
|
} else {
|
|
roomItem.isParty = false
|
|
}
|
|
}
|
|
if (iconArrayShow.length > 4) {//去前四个
|
|
for (let i = 0; i < 4; i++) {
|
|
iconArray.push(iconArrayShow[i])
|
|
}
|
|
} else {
|
|
iconArray = iconArrayShow
|
|
}
|
|
this.$nextTick(() => {
|
|
// ref_tree 元素的ref value 绑定的node-key
|
|
roomItem.iconArrayShow = iconArray
|
|
});
|
|
|
|
roomItem.showAllUser = false
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
//加载成员数据
|
|
async loadUser (houseId, index) {
|
|
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 {
|
|
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: {},
|
|
}
|
|
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/basicInfoMain.scss"
|
|
scoped
|
|
></style>
|
|
|
|
<style lang=scss scoped>
|
|
.customer_select {
|
|
/* 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重 */
|
|
/deep/ input::-webkit-input-placeholder {
|
|
color: #fff;
|
|
}
|
|
/deep/ input::-moz-input-placeholder {
|
|
color: #fff;
|
|
}
|
|
/deep/ input::-ms-input-placeholder {
|
|
color: #fff;
|
|
}
|
|
|
|
/* 修改的是el-input的样式 */
|
|
/* 一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色 */
|
|
/* 另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色 */
|
|
/deep/ .el-select,
|
|
/deep/ .el-input,
|
|
/deep/ .el-input__inner {
|
|
background-color: #08164d00;
|
|
color: #fff;
|
|
border: 0px;
|
|
border-radius: 0px;
|
|
text-align: left;
|
|
font-size: 22px;
|
|
font-family: PingFang SC;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
display: flex;
|
|
}
|
|
|
|
/* el-input聚焦的时候 外层的border会有一个样式 */
|
|
/deep/ .el-select .el-input.is-focus .el-input__inner {
|
|
border: 0px;
|
|
}
|
|
|
|
/* 修改的是el-input上下的小图标的颜色 */
|
|
/deep/ .el-select .el-input .el-select__caret::before {
|
|
color: #fff;
|
|
content: "";
|
|
background: url("../../../../assets/img/xiala.png") center center no-repeat;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* 修改总体选项的样式 最外层 */
|
|
/deep/ .el-select-dropdown {
|
|
background-color: #08164d;
|
|
margin: 0px;
|
|
border: 0px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* 修改选项整体的样式 */
|
|
/deep/ .el-select-dropdown__list {
|
|
padding: 6px 0 20px 0;
|
|
}
|
|
/* 修改单个的选项的样式 */
|
|
/deep/ .el-select-dropdown__item {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
}
|
|
|
|
/* item选项的hover样式 */
|
|
/deep/ .el-select-dropdown__item.hover,
|
|
/deep/ .el-select-dropdown__item:hover {
|
|
color: #409eff;
|
|
}
|
|
|
|
/* 修改的是下拉框选项内容上方的尖角 */
|
|
/deep/ .el-popper .popper__arrow,
|
|
.el-popper .popper__arrow::after {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang=scss >
|
|
.el-scrollbar__wrap {
|
|
overflow-x: hidden !important;
|
|
}
|
|
</style>
|