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.
614 lines
15 KiB
614 lines
15 KiB
<template>
|
|
<div class="warning-box">
|
|
<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>
|
|
</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 class="echart-wr">
|
|
<!-- <div class="echart-cicle"></div> -->
|
|
<div id="echartService"
|
|
class="echart-org"></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>
|
|
</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 class="echart-wr">
|
|
<!-- <div class="echart-cicle"></div> -->
|
|
<div id="echartCount"
|
|
class="echart-org"></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>
|
|
|
|
<div class="card-map">
|
|
<screen-map class="map"
|
|
ref="map"
|
|
@clickFeature="clickProject"
|
|
:showIconLayer="true"></screen-map>
|
|
</div>
|
|
<div class="map-tips">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
</cpt-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { requestPost } from "@/js/dai/request";
|
|
import screenTable from "../components/screen-table/index";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import screenMap from "@/views/modules/visual/components/screen-map";
|
|
|
|
import * as echarts from 'echarts';
|
|
export default {
|
|
name: "warning-box",
|
|
components: {
|
|
cptCard,
|
|
screenTable,
|
|
screenMap
|
|
},
|
|
data () {
|
|
return {
|
|
warningList: [],
|
|
headerList: [
|
|
{ title: "序号", coulmn: 'index' },
|
|
{ title: "需求类型", coulmn: 'gridName' },
|
|
{ title: "具体内容", coulmn: 'buildingName' },
|
|
{ title: "上报情况", coulmn: 'neighborhoodName' },
|
|
{ title: "上报人", coulmn: 'residentNames' },
|
|
{ title: "上报时间", coulmn: 'residentNames' },
|
|
{ title: "是否认领", coulmn: 'residentNames' },
|
|
{ title: "认领方", coulmn: 'residentNames' },
|
|
{ title: "认领时间", coulmn: 'residentNames' }
|
|
],
|
|
tableData: [
|
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
|
|
],
|
|
value2: '',
|
|
visibleLoading: true,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
activeIndex: 0,
|
|
activeLevel: "1",
|
|
|
|
//地图相关数据
|
|
isfirstInit: true,//记录是否是首次加载地图
|
|
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
|
|
distributionsList: [],
|
|
|
|
legendArray: [],
|
|
|
|
iconUrlArray: [
|
|
require('../../../../assets/img/shuju/volunteer1.png'),//文化队伍
|
|
require('../../../../assets/img/shuju/volunteer2.png'),//楼委会
|
|
require('../../../../assets/img/shuju/volunteer3.png'),//能人达人
|
|
require('../../../../assets/img/shuju/volunteer4.png'),//老友俱乐部
|
|
require('../../../../assets/img/shuju/volunteer5.png'),//代办员
|
|
require('../../../../assets/img/shuju/volunteer6.png'),//调解员
|
|
require('../../../../assets/img/shuju/volunteer7.png'),//采集员
|
|
require('../../../../assets/img/shuju/volunteer8.png'),//治安巡逻
|
|
require('../../../../assets/img/shuju/volunteer9.png'),//其他
|
|
],
|
|
vPersonal: [],
|
|
vCount: [],
|
|
vpTotal: 0,
|
|
vcTotal: 0,
|
|
vInfo: {}
|
|
};
|
|
},
|
|
async mounted () {
|
|
await nextTick(100);
|
|
this.getPie()
|
|
// this.initCharts()
|
|
// this.initCount()
|
|
|
|
await this.getWorkUserInfo()
|
|
await this.getMapUnitList()
|
|
},
|
|
methods: {
|
|
initCharts (total, data) {
|
|
const eId = document.getElementById('echartService')
|
|
let _charts = echarts.init(eId)
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: 'bottom',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: total, //图形标题，配置在中间对应效果图的80%
|
|
subtext: '志愿者总数',
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 28,
|
|
align: "center"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['50%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
left: 'center',
|
|
width: 400,
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
option && _charts.setOption(option);
|
|
|
|
},
|
|
initCount (total, data) {
|
|
const eId = document.getElementById('echartCount')
|
|
let _charts = echarts.init(eId)
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: 'bottom',
|
|
left: 'center',
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
title: {
|
|
text: total, //图形标题，配置在中间对应效果图的80%
|
|
subtext: '志愿者服务总数',
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 28,
|
|
align: "center"
|
|
},
|
|
subtextStyle: {
|
|
fontSize: 16,
|
|
color: '#fff'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: 'Access From',
|
|
type: 'pie',
|
|
// center: ['10%', '50%'],
|
|
radius: ['50%', '60%'],
|
|
avoidLabelOverlap: false,
|
|
// top: top + '%',
|
|
// height: '80%',
|
|
left: 'center',
|
|
width: 400,
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
fontSize: '14',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
|
|
data: data
|
|
}
|
|
]
|
|
}
|
|
option && _charts.setOption(option);
|
|
|
|
},
|
|
async getPie () {
|
|
const url = "/data/report/heart/demand/volunteer/service";
|
|
// let params = {
|
|
// agencyId: this.$store.state.user.agencyId,
|
|
// };
|
|
const { data, code, msg } = await requestPost(url);
|
|
if (code === 0) {
|
|
console.log('data-ddd', data)
|
|
this.vInfo = data
|
|
const arr = [{
|
|
name: '党员数量',
|
|
value: data.partyTotal,
|
|
itemStyle: {
|
|
color: 'rgba(26, 178, 255, 1)'
|
|
}
|
|
}, {
|
|
name: '居民数量',
|
|
value: data.resiTotal,
|
|
itemStyle: {
|
|
color: 'rgba(250, 193, 38, 1)'
|
|
}
|
|
}]
|
|
const arr1 = [{
|
|
name: '党员数量',
|
|
value: data.partyServiceTotal,
|
|
itemStyle: {
|
|
color: 'rgba(26, 178, 255, 1)'
|
|
}
|
|
}, {
|
|
name: '居民数量',
|
|
value: data.resiServiceTotal,
|
|
temStyle: {
|
|
color: 'rgba(250, 193, 38, 1)'
|
|
}
|
|
}]
|
|
this.vPersonal = [ ...arr ]
|
|
this.vCount = [ ...arr1 ]
|
|
this.vpTotal = data.volunteerTotal
|
|
this.vcTotal = data.serviceTotal
|
|
this.initCharts(data.volunteerTotal, arr)
|
|
this.initCount(data.serviceTotal, arr1)
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
// 【人员预警】 楼宇预警数量列表
|
|
pageSizeChangeHandleNew (val) {
|
|
this.pageNo = 1;
|
|
this.pageSize = val;
|
|
},
|
|
pageCurrentChangeHandleNew (val) {
|
|
this.pageNo = val;
|
|
},
|
|
|
|
// 获取当前管理员信息
|
|
getWorkUserInfo () {
|
|
const url = '/epmetuser/customerstaff/staffbasicinfo'
|
|
let params = {}
|
|
window.app.ajax.post(
|
|
url,
|
|
params,
|
|
(data, rspMsg) => {
|
|
this.agencyInfo = data
|
|
if (!data.latitude) {
|
|
this.agencyInfo.latitude = 36.072227
|
|
}
|
|
if (!data.longitude) {
|
|
this.agencyInfo.longitude = 120.389455
|
|
}
|
|
if (!data.level) {
|
|
this.agencyInfo.level = 'street'
|
|
}
|
|
|
|
},
|
|
(rspMsg, data) => {
|
|
this.$message.error(rspMsg)
|
|
}
|
|
)
|
|
|
|
},
|
|
|
|
|
|
|
|
//获取联建单位分布图
|
|
async getMapUnitList () {
|
|
const url = "/epmetuser/volunteer/distribution"
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
|
|
|
|
let params = {
|
|
customerId: this.$store.state.user.customerId
|
|
}
|
|
|
|
const { data, code, msg } = await requestPost(url, params)
|
|
|
|
if (code === 0) {
|
|
this.legendArray = data.legends
|
|
|
|
this.legendArray.forEach((legendTtem, index) => {
|
|
if (index < this.iconUrlArray.length) {
|
|
legendTtem.url = this.iconUrlArray[index]
|
|
} else {//超过原型数量的都默认为第一个图标
|
|
legendTtem.url = this.iconUrlArray[0]
|
|
}
|
|
|
|
});
|
|
this.legendArray.push({
|
|
optionValue: 'other',
|
|
optionLabel: '其他',
|
|
url: this.iconUrlArray[8]
|
|
})
|
|
|
|
this.distributionsList = data.distributions
|
|
|
|
this.distributionsList.forEach(item => {
|
|
let typeShow = ''
|
|
if (item.volunteerCategories.length > 0) {
|
|
typeShow = item.volunteerCategories[0]
|
|
} else {
|
|
typeShow = 'other'
|
|
}
|
|
item.urlIndex = 0
|
|
for (let i = 0; i < this.legendArray.length; i++) {
|
|
if (typeShow === this.legendArray[i].optionValue) {
|
|
item.urlIndex = i
|
|
break;
|
|
}
|
|
}
|
|
|
|
});
|
|
console.log(this.distributionsList)
|
|
|
|
//第一次加载完置为false
|
|
this.loadMap()
|
|
this.isfirstInit = false
|
|
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//加载地图数据
|
|
loadMap () {
|
|
if (this.isfirstInit) {
|
|
//mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray
|
|
this.$refs.map.loadMap(this.agencyInfo, null, null, this.distributionsList, this.iconUrlArray, null)
|
|
} else {
|
|
this.$refs.map.refreshMap(null, this.unitMapList)
|
|
|
|
}
|
|
},
|
|
|
|
//点击项目
|
|
clickProject (feature) {
|
|
console.log('标注信息', feature.values_.properties)
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/warning.scss"
|
|
scoped
|
|
></style>
|
|
<style lang="scss" scoped>
|
|
.warning-box {
|
|
display: flex;
|
|
.card-wr {
|
|
flex: 1;
|
|
}
|
|
.card-wr:last-child {
|
|
margin-left: 20px;
|
|
}
|
|
padding: 25px 21px 15px 24px;
|
|
}
|
|
.card-title {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.title-icon {
|
|
display: block;
|
|
width: 36px;
|
|
height: 29px;
|
|
box-sizing: border-box;
|
|
margin-right: 3px;
|
|
}
|
|
.title-label {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
::v-deep .el-dropdown {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
.card-echart {
|
|
display: flex;
|
|
margin-top: 40px;
|
|
|
|
.card-left {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
}
|
|
.card-echart:last-child {
|
|
padding-bottom: 40px;
|
|
}
|
|
.echart-wr {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
width: 50%;
|
|
height: 320px;
|
|
box-sizing: border-box;
|
|
.echart-org {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.echart-cicle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 240px;
|
|
height: 240px;
|
|
box-sizing: border-box;
|
|
margin-top: -120px;
|
|
margin-left: -120px;
|
|
border: 1px dashed rgba(0, 96, 240, 1);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.card-count {
|
|
flex: 1;
|
|
.card-count-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 418px;
|
|
height: 124px;
|
|
box-sizing: border-box;
|
|
margin-top: 20px;
|
|
// padding-left: 192px;
|
|
background: url("../../../../assets/img/shuju/measure/dangyuan.png") center
|
|
no-repeat;
|
|
background-size: cover;
|
|
.card-count-content {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding-left: 30px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
.card-count-num {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
}
|
|
.card-count-label {
|
|
margin-top: 6px;
|
|
font-size: 16px;
|
|
color: rgba(255, 255, 255, 0.72);
|
|
}
|
|
}
|
|
.card-count-content::after {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
content: "";
|
|
width: 1px;
|
|
height: 50px;
|
|
margin-top: -25px;
|
|
background: rgba(98, 162, 205, 1);
|
|
}
|
|
}
|
|
.card-count-item:last-child {
|
|
background: url("../../../../assets/img/shuju/measure/jumin.png") center
|
|
no-repeat;
|
|
}
|
|
}
|
|
|
|
.map-tips {
|
|
width: 700px;
|
|
display: flex;
|
|
// justify-content: start;
|
|
flex-wrap: wrap;
|
|
padding-top: 10px;
|
|
padding-bottom: 20px;
|
|
|
|
.map-tips-item {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
margin-right: 40px;
|
|
|
|
.map-tips-icon {
|
|
width: 20px;
|
|
height: 10px;
|
|
box-sizing: border-box;
|
|
margin-right: 10px;
|
|
background: #dd2719;
|
|
border-radius: 2px;
|
|
}
|
|
.map-tips-label {
|
|
font-size: 16px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-wr-map {
|
|
height: calc(100vh - 150px);
|
|
text-align: center;
|
|
|
|
.card-map {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
// height: calc(100vh - 285px);
|
|
height: calc(100vh - 315px);
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|