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.
564 lines
17 KiB
564 lines
17 KiB
<template>
|
|
<div class="warning-box">
|
|
<cpt-card>
|
|
<!-- <div class="card-title">
|
|
<img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
|
|
<div class="title-label">
|
|
组织架构
|
|
</div>
|
|
</div> -->
|
|
<div class="title">
|
|
<img src="../../../../../assets/img/shuju/title-tip.png" />
|
|
<span>组织架构</span>
|
|
<div class="second-select cascader">
|
|
<el-cascader class="customer_cascader"
|
|
ref="myCascader"
|
|
placeholder="请选择所属组织"
|
|
:options="agencytree"
|
|
v-model="agencyId"
|
|
:show-all-levels="false"
|
|
:props="{ expandTrigger: 'hover', emitPath: false, label: 'orgName', value: 'orgId', children: 'subOrgList' }"
|
|
clearable/>
|
|
</div>
|
|
<!-- <div class="second-select ">
|
|
|
|
<el-date-picker v-model="dateIdShow"
|
|
type="date"
|
|
:clearable="false"
|
|
@change="handleChangeDate"
|
|
:picker-options="pickerOptions"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
placeholder="选择日期"
|
|
value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
|
|
</div> -->
|
|
</div>
|
|
<div class="card-panel">
|
|
<div class="card-left">
|
|
<!-- <div class="card-item-title">小标题</div> -->
|
|
<div class="card-left-top">
|
|
<screen-org-tree :list="list" @onClickNode="onClickNode"></screen-org-tree>
|
|
</div>
|
|
<div class="card-left-bottom">
|
|
<screen-table :headerStyle="headerStyle"
|
|
:headerList="headerList"
|
|
:tableContentStyle="headerStyle"
|
|
:tableData="tableData"
|
|
:visibleLoading="visibleLoading"
|
|
:operate="true"
|
|
@look="handleLook"></screen-table>
|
|
<div class="pagination">
|
|
<el-pagination :current-page="pageNo"
|
|
:page-size="pageSize"
|
|
background
|
|
layout="prev, pager, next"
|
|
@size-change="pageSizeChangeHandleNew"
|
|
@current-change="pageCurrentChangeHandleNew"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
<house-dialog v-if="showHouse"
|
|
:houseId="houseId"
|
|
@close="showHouse = false"></house-dialog>
|
|
</div>
|
|
</div>
|
|
<div class="card-right">
|
|
<div class="card-right-top">
|
|
<screen-top-count :colorIndex="item.index" v-for="(item, key) in countList" :key="key">
|
|
<template v-slot:number>{{item.value}}</template>
|
|
<template v-slot:title>{{item.title}}</template>
|
|
</screen-top-count>
|
|
</div>
|
|
<div class="card-title" style="margin-left: 20px; margin-bottom: 20px; margin-top: 20px;">
|
|
<img class="title-icon" src="../../../../../assets/img/shuju/title-tip.png" />
|
|
<div class="title-label">
|
|
网格分布
|
|
</div>
|
|
</div>
|
|
<div class="card-right-bottom">
|
|
<screen-org-map ref="orgMap"></screen-org-map>
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<img src="../../../../../assets/img/plugins/danghui.png" class="legend-item-icon">
|
|
<div class="legend-item-text">党群服务站</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<img src="../../../../../assets/img/plugins/louyuanxiaozu.png" class="legend-item-icon">
|
|
<div class="legend-item-text">楼院党小组</div>
|
|
</div>
|
|
<div class="legend-item">
|
|
<img src="../../../../../assets/img/plugins/dangyuanzhongxinhu.png" class="legend-item-icon">
|
|
<div class="legend-item-text">党员中心户</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</cpt-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import nextTick from "dai-js/tools/nextTick"
|
|
import cptCard from "@/views/modules/visual/cpts/card"
|
|
import screenMap from "@/views/modules/visual/components/screen-map"
|
|
import screenTable from "../../components/screen-table/index"
|
|
import screenOrgMap from './components/screen-org-map.vue'
|
|
import screenOrgTree from './components/screen-org-tree.vue'
|
|
import screenTopCount from './components/screen-top-count.vue'
|
|
import houseDialog from './components/house-dialog.vue'
|
|
import { requestPost } from "@/js/dai/request"
|
|
|
|
import dhIcon from '@/assets/img/plugins/danghui.png'
|
|
import lyxzIcon from '@/assets/img/plugins/louyuanxiaozu.png'
|
|
import dyzxhIcon from '@/assets/img/plugins/dangyuanzhongxinhu.png'
|
|
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
screenMap,
|
|
screenOrgMap,
|
|
screenOrgTree,
|
|
screenTopCount,
|
|
houseDialog
|
|
},
|
|
data() {
|
|
return {
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index', width: '100px' },
|
|
{ title: "党员", coulmn: 'ownerName' },
|
|
{ title: "地址", coulmn: 'address' }
|
|
],
|
|
headerStyle: [
|
|
{ width: '100px' },
|
|
{ width: '200px' },
|
|
{ width: '400px' }
|
|
],
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
agencytree: [],
|
|
agencyId: '',
|
|
noInit: false,
|
|
visibleLoading: false,
|
|
pageNo: 1,
|
|
pageSize: 5,
|
|
total: 0,
|
|
list: [],
|
|
countList: {
|
|
gridNum: { index: 0, title: '网格党支部', value: '0' },
|
|
groupNum: { index: 1, title: '楼院党小组', value: '0' },
|
|
kernelHouseHoldNum: { index: 2, title: '党员中心户', value: '0' },
|
|
partyMemberNum: { index: 3, title: '党员数', value: '0' },
|
|
serviceStationNum: { index: 4, title: '网格党群服务站实体阵地数', value: '0' },
|
|
volunteerTeamNum: { index: 5, title: '社区服务队伍数', value: '0' }
|
|
},
|
|
axisStructId: '', // 动力主轴节点
|
|
showHouse: false, // 显示house-dialog
|
|
houseId: '', // 房屋ID
|
|
dangqunList: [], // 党群服务站列表
|
|
xiaozuList: [], // 楼院小组地图坐标列表
|
|
zhongxinhuList: [], // 党员中心户列表
|
|
}
|
|
},
|
|
async mounted() {
|
|
this.showInfo = false
|
|
// const { user } = this.$store.state
|
|
// this.agencyId = user.agencyId
|
|
// console.log('agencyId-------', this.agencyId)
|
|
// this.agencyId = '50140d770c578100328792121aa7b3c5'
|
|
this.axisStructId = '1518062548749725697'
|
|
await nextTick(100)
|
|
await this.getAgencylist()//获取组织级别
|
|
await this.getStructTree()
|
|
await this.getCount()
|
|
await this.getMapData()
|
|
},
|
|
methods: {
|
|
onClickNode (e) {
|
|
this.axisStructId = e.id
|
|
this.getList()
|
|
},
|
|
async handleLook (val) {
|
|
this.houseId = val.houseId
|
|
this.showHouse = true
|
|
},
|
|
pageSizeChangeHandleNew (val) {
|
|
this.pageNo = 1
|
|
this.pageSize = val
|
|
this.getList()
|
|
},
|
|
pageCurrentChangeHandleNew (val) {
|
|
this.pageNo = val
|
|
this.getList()
|
|
},
|
|
getList() {
|
|
this.tableData = []
|
|
this.visibleLoading = true
|
|
let params = {
|
|
axisStructId: this.axisStructId,
|
|
pageSize: this.pageSize,
|
|
pageNo: this.pageNo,
|
|
}
|
|
const url = "/pli/power/data/kernelHousehold/list"
|
|
this.$http.post(url, params).then(res => {
|
|
this.total = parseInt(res.data.total)
|
|
this.tableData = res.data.data.map((item, index) => {
|
|
return {
|
|
...item,
|
|
index: index + 1
|
|
}
|
|
})
|
|
this.visibleLoading = false
|
|
}).catch(err => {
|
|
this.$message.error(err)
|
|
})
|
|
},
|
|
async getCount() {
|
|
const url = "/pli/power/data/axis/statistics"
|
|
let params = {
|
|
agencyId: this.agencyId
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
Object.keys(this.countList).forEach(item => {
|
|
if (item != 'partyMemberNum' && item != 'volunteerTeamNum') {
|
|
this.countList[item].value = data[item]
|
|
}
|
|
})
|
|
this.getPartyNumber() // 党员数
|
|
this.getVolunteerTeamNum() // 社区服务队伍数
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getPartyNumber () {
|
|
const url = "/epmetuser/icresiuser/partymemberagestatistics"
|
|
let params = {
|
|
orgId: this.agencyId,
|
|
orgType: 'agency'
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
let count = 0
|
|
data.forEach(item => {
|
|
count += parseInt(item.value)
|
|
})
|
|
this.countList.partyMemberNum.value = count
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getVolunteerTeamNum () {
|
|
const url = "/heart/userdemand/servicelist"
|
|
let params = {
|
|
serviceType: 'community_org'
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
this.countList.volunteerTeamNum.value = data.length || 0
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
async getStructTree() {
|
|
const url = "/pli/power/data/axis/structTree"
|
|
let params = {
|
|
agencyId: this.agencyId
|
|
}
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
if (code === 0) {
|
|
this.list = data
|
|
if (data.length > 0) {
|
|
this.axisStructId = this.list[0].id
|
|
this.getList()
|
|
}
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
getMapData() {
|
|
const params1 = {
|
|
axisStructId: this.axisStructId,
|
|
limit: 99
|
|
}
|
|
// 党群服务站
|
|
this.$http.post(`/pli/power/data/serviceStation/listPosition`, params1).then(res => {
|
|
res.data.data.forEach((item, index) => {
|
|
let ob = {
|
|
index: index,
|
|
id: item.stationId,
|
|
name: item.address,
|
|
latitude: item.latitude,
|
|
longitude: item.longitude
|
|
}
|
|
this.dangqunList.push(ob)
|
|
})
|
|
this.$nextTick(() => {
|
|
this.$refs.orgMap.addMarker(this.dangqunList, dhIcon)
|
|
})
|
|
}).catch(err => {
|
|
this.$message.error(err)
|
|
})
|
|
// 动力主轴节点
|
|
const params2 = {
|
|
agencyId: this.agencyId
|
|
}
|
|
const structLevel = '2'
|
|
this.$http.post(`/pli/power/data/axis/${structLevel}/listPosition`, params2).then(res => {
|
|
res.data.data.forEach((item, index) => {
|
|
let ob = {
|
|
index: index,
|
|
id: item.axisStructId,
|
|
name: item.axisStructName,
|
|
latitude: item.latitude,
|
|
longitude: item.longitude
|
|
}
|
|
this.xiaozuList.push(ob)
|
|
})
|
|
this.$nextTick(() => {
|
|
this.$refs.orgMap.addMarker(this.xiaozuList, lyxzIcon)
|
|
})
|
|
}).catch(err => {
|
|
this.$message.error(err)
|
|
})
|
|
// 党员中心户
|
|
this.$http.post(`/pli/power/data/kernelHousehold/listPosition`, params1).then(res => {
|
|
res.data.data.forEach((item, index) => {
|
|
let ob = {
|
|
index: index,
|
|
id: item.houseId,
|
|
name: item.address,
|
|
latitude: item.latitude,
|
|
longitude: item.longitude
|
|
}
|
|
this.zhongxinhuList.push(ob)
|
|
})
|
|
this.$nextTick(() => {
|
|
this.$refs.orgMap.addMarker(this.zhongxinhuList, dyzxhIcon)
|
|
})
|
|
}).catch(err => {
|
|
this.$message.error(err)
|
|
})
|
|
},
|
|
// handleClickRow(val) {
|
|
// console.log('click-row----', val)
|
|
// this.$router.push({
|
|
// path: `/main-shuju/visual-basicinfo-people/${val.userId}`,
|
|
// })
|
|
// },
|
|
//获取组织数据
|
|
async getAgencylist () {
|
|
const url = '/data/aggregator/org/agencytree'
|
|
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
client:'gov'
|
|
}
|
|
const { data, code, msg } = await requestPost(url,params)
|
|
if (code === 0) {
|
|
let _data
|
|
if (data) {
|
|
_data = this.removeByOrgType(data, 'agency')
|
|
if (_data) {
|
|
this.agencytree = this.removeEmptySubOrgList(_data)
|
|
this.agencyId = this.agencytree ? this.agencytree[0].orgId : ''
|
|
}
|
|
}
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
removeByOrgType (orgArray, orgType) {
|
|
if (orgArray && orgArray.length > 0) {
|
|
for (let p = orgArray.length - 1; p >= 0; p--) {
|
|
let orgInfo = orgArray[p]
|
|
if (orgInfo) {
|
|
if (orgInfo.orgType !== orgType) {
|
|
orgArray.splice(p, 1)
|
|
} else {
|
|
this.removeByOrgType(orgInfo.subOrgList, orgType)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return orgArray
|
|
},
|
|
removeEmptySubOrgList (orgArray) {
|
|
orgArray.forEach((orgInfo) => {
|
|
if (orgInfo && orgInfo.subOrgList) {
|
|
if (orgInfo.subOrgList.length === 0) {
|
|
orgInfo.subOrgList = undefined
|
|
} else {
|
|
this.removeEmptySubOrgList(orgInfo.subOrgList)
|
|
}
|
|
}
|
|
})
|
|
return orgArray;
|
|
},
|
|
async handleChangeAgency (value) {
|
|
let selAgency = this.$refs["myCascader"].getCheckedNodes()[0].data
|
|
// this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
|
|
this.agencyName = selAgency.name
|
|
this.agencyId = selAgency.agencyId
|
|
this.level = selAgency.level === 'grid' ? 'grid' : 'agency'
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/typeAnalyze.scss"
|
|
scoped
|
|
></style>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/personCategory.scss"
|
|
scoped
|
|
></style>
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.second-select {
|
|
margin: 0 10px 0 40px !important;
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.title-icon {
|
|
display: block;
|
|
width: 46px;
|
|
height: 34px;
|
|
box-sizing: border-box;
|
|
margin-right: 6px;
|
|
}
|
|
.title-label {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
::v-deep .el-input {
|
|
width: 180px;
|
|
.el-input__inner {
|
|
font-size: 18px;
|
|
color: #fff;
|
|
background: #06186d;
|
|
border: 1px solid #1a64cc;
|
|
}
|
|
.el-icon-arrow-down::before {
|
|
content: "\e790";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card-panel {
|
|
display: flex;
|
|
margin-top: 10px;
|
|
height: 100%;
|
|
.card-left {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
&-top {
|
|
width: 100%;
|
|
height: 550px;
|
|
display: flex;
|
|
}
|
|
&-bottom {
|
|
width: 100%;
|
|
height: calc(100% - 550px);
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
margin-top: 30px;
|
|
.pagination {
|
|
box-sizing: border-box;
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
|
background: #0266d1;
|
|
color: #000d3f;
|
|
}
|
|
|
|
/deep/ .el-pagination .el-pager li {
|
|
background: #002e74;
|
|
}
|
|
|
|
/deep/ .el-pagination .btn-prev {
|
|
background: #002e74;
|
|
}
|
|
|
|
/deep/ .el-pagination .btn-next {
|
|
background: #002e74;
|
|
}
|
|
}
|
|
/deep/ .warning-table .table {
|
|
min-height: 300px;
|
|
}
|
|
}
|
|
}
|
|
.card-right {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
&-top {
|
|
width: 100%;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
&-bottom {
|
|
height: 700px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
padding-left: 30px;
|
|
.legend {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
&-item {
|
|
width: 150px;
|
|
display: flex;
|
|
align-items: center;
|
|
&-text {
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.card-item-title {
|
|
position: relative;
|
|
padding-left: 40px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
.card-item-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20px;
|
|
width: 12px;
|
|
height: 12px;
|
|
box-sizing: border-box;
|
|
margin-top: -6px;
|
|
background: #2865FA;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
|