|
|
@ -1,97 +1,114 @@ |
|
|
|
<template> |
|
|
|
<div class="warning-box"> |
|
|
|
<cpt-card class="card-wr"> |
|
|
|
<cpt-card > |
|
|
|
<div class="card-title"> |
|
|
|
<img class="title-icon" |
|
|
|
src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<div class="title-label"> |
|
|
|
志愿者服务情况 |
|
|
|
<el-cascader |
|
|
|
v-model="selectAgency" |
|
|
|
:options="propTree" |
|
|
|
:props="{ checkStrictly: true }" |
|
|
|
:show-all-levels="false" |
|
|
|
clearable |
|
|
|
@change="handleCascader"> |
|
|
|
</el-cascader> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box-wr"> |
|
|
|
<cpt-card class="card-wr"> |
|
|
|
<div class="card-title"> |
|
|
|
<img class="title-icon" |
|
|
|
src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<div class="title-label"> |
|
|
|
志愿者服务情况 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-echart"> |
|
|
|
<div class="card-left"> |
|
|
|
<div class="card-count"> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.partyTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">党员数量</div> |
|
|
|
<div class="card-echart"> |
|
|
|
<div class="card-left"> |
|
|
|
<div class="card-count"> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.partyTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">党员数量</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.resiTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">居民数量</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.resiTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">居民数量</div> |
|
|
|
<div class="echart-wr"> |
|
|
|
<!-- <div class="echart-cicle"></div> --> |
|
|
|
<div id="echartService" |
|
|
|
class="echart-org"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="echart-wr"> |
|
|
|
<!-- <div class="echart-cicle"></div> --> |
|
|
|
<div id="echartService" |
|
|
|
class="echart-org"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="card-echart"> |
|
|
|
<div class="card-left"> |
|
|
|
<div class="card-count"> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.partyServiceTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">党员数量</div> |
|
|
|
<div class="card-echart"> |
|
|
|
<div class="card-left"> |
|
|
|
<div class="card-count"> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.partyServiceTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">党员数量</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.resiServiceTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">居民数量</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-count-item"> |
|
|
|
<div class="card-count-content"> |
|
|
|
<div class="card-count-num">{{ vInfo.resiServiceTotal || 0 }}</div> |
|
|
|
<div class="card-count-label">居民数量</div> |
|
|
|
<div class="echart-wr"> |
|
|
|
<!-- <div class="echart-cicle"></div> --> |
|
|
|
<div id="echartCount" |
|
|
|
class="echart-org"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="echart-wr"> |
|
|
|
<!-- <div class="echart-cicle"></div> --> |
|
|
|
<div id="echartCount" |
|
|
|
class="echart-org"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</cpt-card> |
|
|
|
<cpt-card class="card-wr card-wr-map"> |
|
|
|
<div class="card-title"> |
|
|
|
<img class="title-icon" |
|
|
|
src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<div class="title-label"> |
|
|
|
多元化治理平面图 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</cpt-card> |
|
|
|
<cpt-card class="card-wr card-wr-map"> |
|
|
|
<div class="card-title"> |
|
|
|
<img class="title-icon" |
|
|
|
src="../../../../assets/img/shuju/title-tip.png" /> |
|
|
|
<div class="title-label"> |
|
|
|
多元化治理平面图 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card-map"> |
|
|
|
<screen-map class="map" |
|
|
|
ref="map" |
|
|
|
@clickFeature="clickMapVolunteer" |
|
|
|
:showIconLayer="true" |
|
|
|
:clickType="'popup'" |
|
|
|
:isAddOpenlay="true"></screen-map> |
|
|
|
</div> |
|
|
|
<div class="map-tips"> |
|
|
|
|
|
|
|
<div class="card-map"> |
|
|
|
<screen-map class="map" |
|
|
|
ref="map" |
|
|
|
@clickFeature="clickMapVolunteer" |
|
|
|
:showIconLayer="true" |
|
|
|
:clickType="'popup'" |
|
|
|
:isAddOpenlay="true"></screen-map> |
|
|
|
</div> |
|
|
|
<div class="map-tips"> |
|
|
|
<div class="map-tips-item" |
|
|
|
v-for="item in legendArray" |
|
|
|
:key="item.optionValue"> |
|
|
|
|
|
|
|
<div class="map-tips-item" |
|
|
|
v-for="item in legendArray" |
|
|
|
:key="item.optionValue"> |
|
|
|
<img class="title-icon" |
|
|
|
:src="item.url" /> |
|
|
|
<div class="map-tips-label">{{item.optionLabel}}</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<img class="title-icon" |
|
|
|
:src="item.url" /> |
|
|
|
<div class="map-tips-label">{{item.optionLabel}}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</cpt-card> |
|
|
|
</div> |
|
|
|
|
|
|
|
</cpt-card> |
|
|
|
</div> |
|
|
|
</template> |
|
|
@ -129,6 +146,8 @@ export default { |
|
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
|
|
|
], |
|
|
|
value2: '', |
|
|
|
selectAgency: '', |
|
|
|
propTree: [], |
|
|
|
visibleLoading: true, |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
@ -163,12 +182,13 @@ export default { |
|
|
|
}, |
|
|
|
async mounted () { |
|
|
|
await nextTick(100); |
|
|
|
this.getPie() |
|
|
|
await this.getAgencyList() |
|
|
|
this.getPie(this.$store.state.user.agencyId) |
|
|
|
// this.initCharts() |
|
|
|
// this.initCount() |
|
|
|
|
|
|
|
await this.getWorkUserInfo() |
|
|
|
await this.getMapUnitList() |
|
|
|
await this.getMapUnitList(this.$store.state.user.agencyId) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initCharts (total, data) { |
|
|
@ -286,12 +306,12 @@ export default { |
|
|
|
option && _charts.setOption(option); |
|
|
|
|
|
|
|
}, |
|
|
|
async getPie () { |
|
|
|
async getPie (agencyId) { |
|
|
|
const url = "/data/report/heart/demand/volunteer/service"; |
|
|
|
// let params = { |
|
|
|
// agencyId: this.$store.state.user.agencyId, |
|
|
|
// }; |
|
|
|
const { data, code, msg } = await requestPost(url); |
|
|
|
let params = { |
|
|
|
agencyId, |
|
|
|
}; |
|
|
|
const { data, code, msg } = await requestPost(url, params); |
|
|
|
if (code === 0) { |
|
|
|
console.log('data-ddd', data) |
|
|
|
this.vInfo = data |
|
|
@ -317,7 +337,7 @@ export default { |
|
|
|
}, { |
|
|
|
name: '居民数量', |
|
|
|
value: data.resiServiceTotal, |
|
|
|
temStyle: { |
|
|
|
itemStyle: { |
|
|
|
color: 'rgba(250, 193, 38, 1)' |
|
|
|
} |
|
|
|
}] |
|
|
@ -331,6 +351,52 @@ export default { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
async getAgencyList() { |
|
|
|
// const url = "/gov/org/customeragency/staffinagencylist"; |
|
|
|
const url = '/gov/org/customeragency/agencygridtree' |
|
|
|
// let params = { |
|
|
|
// agencyId: this.$store.state.user.agencyId, |
|
|
|
// }; |
|
|
|
const { data, code, msg } = await requestPost(url); |
|
|
|
if (code === 0) { |
|
|
|
console.log('data-org----o', data) |
|
|
|
this.selectAgency = [`${data.agencyId}-${data.level}`] |
|
|
|
let arr = [] |
|
|
|
arr.push(data) |
|
|
|
this.propTree = arr && this.getTreeData(arr) |
|
|
|
|
|
|
|
} else { |
|
|
|
this.$message.error(msg) |
|
|
|
} |
|
|
|
}, |
|
|
|
getTreeData(data){ |
|
|
|
if (!Array.isArray(data)) return [] |
|
|
|
let arr = data.map(item => { |
|
|
|
let _item = {} |
|
|
|
if (item.subAgencyList) { |
|
|
|
if (item.subAgencyList.length === 0) { |
|
|
|
_item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
children: undefined |
|
|
|
} |
|
|
|
} else _item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
children: this.getTreeData(item.subAgencyList)} |
|
|
|
} else { |
|
|
|
_item = { |
|
|
|
label: item.agencyName, |
|
|
|
value: item.agencyId + '-' + item.level, |
|
|
|
level: item.level, |
|
|
|
} |
|
|
|
} |
|
|
|
return _item |
|
|
|
}) |
|
|
|
return arr |
|
|
|
}, |
|
|
|
// 【人员预警】 楼宇预警数量列表 |
|
|
|
pageSizeChangeHandleNew (val) { |
|
|
|
this.pageNo = 1; |
|
|
@ -370,12 +436,13 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
//获取联建单位分布图 |
|
|
|
async getMapUnitList () { |
|
|
|
async getMapUnitList (agencyId) { |
|
|
|
const url = "/epmetuser/volunteer/distribution" |
|
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" |
|
|
|
|
|
|
|
let params = { |
|
|
|
customerId: this.$store.state.user.customerId |
|
|
|
customerId: this.$store.state.user.customerId, |
|
|
|
agencyId |
|
|
|
} |
|
|
|
|
|
|
|
const { data, code, msg } = await requestPost(url, params) |
|
|
@ -427,7 +494,17 @@ export default { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
handleCascader(val) { |
|
|
|
console.log('val-vvv', val) |
|
|
|
if (val.length > 0) { |
|
|
|
const _arr = val[val.length - 1].split('-') |
|
|
|
const orgType = _arr[1] !== 'grid' ? 'agency': 'grid' |
|
|
|
// this.getServicePie(_arr[0], orgType) |
|
|
|
this.getPie(_arr[0]) |
|
|
|
this.getMapUnitList(_arr[0]) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
//加载地图数据 |
|
|
|
loadMap () { |
|
|
|
if (this.isfirstInit) { |
|
|
@ -534,7 +611,10 @@ export default { |
|
|
|
></style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.warning-box { |
|
|
|
display: flex; |
|
|
|
// display: flex; |
|
|
|
.box-wr { |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.card-wr { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
@ -547,6 +627,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
cursor: pointer; |
|
|
|
margin-bottom: 10px; |
|
|
|
.title-icon { |
|
|
|
display: block; |
|
|
|
width: 36px; |
|
|
@ -557,6 +638,20 @@ export default { |
|
|
|
.title-label { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 800; |
|
|
|
|
|
|
|
::v-deep .el-input { |
|
|
|
width: 180px; |
|
|
|
.el-input__inner { |
|
|
|
font-size: 20px; |
|
|
|
font-weight: 800; |
|
|
|
color: #fff; |
|
|
|
background: transparent; |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
.el-icon-arrow-down::before { |
|
|
|
content: "\e790"; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-dropdown { |
|
|
|
font-size: 16px; |
|
|
|