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.
710 lines
20 KiB
710 lines
20 KiB
<template>
|
|
<cpt-card>
|
|
<div class="title">
|
|
<img src="@/assets/img/shuju/title-tip.png" />
|
|
<span>事件处置分析</span>
|
|
|
|
<div class="second-title">
|
|
<div class="second-select cascader">
|
|
<el-cascader class="customer_cascader"
|
|
ref="myCascader"
|
|
v-model="agencyIdArray"
|
|
:key="iscascaderShow"
|
|
:options="casOptions"
|
|
:props="optionProps"
|
|
:show-all-levels="false"
|
|
@change="handleChangeAgency"></el-cascader>
|
|
</div>
|
|
<div class="second-select">
|
|
<el-date-picker v-model="dateIdShow"
|
|
type="date"
|
|
:clearable="false"
|
|
@change="handleChangeDate"
|
|
prefix-icon="el-icon-caret-bottom"
|
|
placeholder="选择日期"
|
|
value-format="yyyy-MM-dd">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="g-cpt-resi">
|
|
<div class="g-l">
|
|
<div class="l_top">
|
|
<div class="g-count">
|
|
<div class="t_count">事件总数</div>
|
|
<div class="c_count">{{projectTotal}}</div>
|
|
<div class="t_yestoday">昨日
|
|
<span class="c_yestoday">{{dateIncr}}</span>
|
|
</div>
|
|
<div class="t_today">上月
|
|
<span class="c_today">{{monthIncr}}</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="!pieNoData && !dataLoading"
|
|
class="g-pie">
|
|
<screen-echarts-frame class="echart-wr"
|
|
@myChartMethod="pieInitOk"
|
|
ref="pieChart"></screen-echarts-frame>
|
|
|
|
<div class="pie-legend">
|
|
<div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
|
|
v-for="(item,index) in legendArray"
|
|
:key="index">
|
|
<div class="item_name">{{item.name}}</div>
|
|
<img :src="item.url" />
|
|
<div class="item_num">
|
|
<span class="item_count">{{item.count}}</span>
|
|
<span class="item_percent">{{item.percent}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<screen-nodata class="nodata"
|
|
v-if="pieNoData&& !dataLoading"></screen-nodata>
|
|
<div class="table-status"
|
|
v-if="dataLoading">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="l_bottom">
|
|
<div class="bottom_label">近12月新增事件数</div>
|
|
<screen-echarts-frame v-if="!lineNoData&& !dataLoading"
|
|
class="echart-line"
|
|
@myChartMethod="lineInitOk"
|
|
ref="lineChart"></screen-echarts-frame>
|
|
<screen-nodata class="nodata"
|
|
v-if="lineNoData&& !dataLoading"></screen-nodata>
|
|
<div class="table-status"
|
|
v-if="dataLoading">
|
|
<screen-loading>加载中</screen-loading>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="g-r">
|
|
<div class="r-map">
|
|
<screen-map class="map"
|
|
ref="map"
|
|
@clickFeature="clickProject"
|
|
:isAddOpenlay="true"
|
|
:clickType="'popup'"
|
|
:showIconLayer="true"></screen-map>
|
|
<div class="r-status">
|
|
<div :class="['status', 'status-pending', {'sel-status':status==='pending'}]"
|
|
@click="handleChangeStatus('pending')">未结案</div>
|
|
<div :class="['status', 'status-closed', {'sel-status':status==='closed'}]"
|
|
@click="handleChangeStatus('closed')">已结案</div>
|
|
|
|
</div>
|
|
<div class="r-legend">
|
|
<img src="@/assets/img/shuju/weiwanjie.png"
|
|
mode="aspectFill" />
|
|
<span>未结案</span>
|
|
<img src="@/assets/img/shuju/yiwanjie.png"
|
|
mode="aspectFill" />
|
|
<span>已结案</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</cpt-card>
|
|
</template>
|
|
|
|
<script>
|
|
import { Loading } from "element-ui"; //引入Loading服务
|
|
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
|
|
import { requestPost } from "@/js/dai/request";
|
|
import cptCard from "@/views/modules/visual/cpts/card";
|
|
import cptTb from "@/views/modules/visual/cpts/tb";
|
|
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";
|
|
import screenMap from "@/views/modules/visual/components/screen-map";
|
|
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
|
|
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
|
|
|
|
import { pieOption } from './processPieOption.js'
|
|
import { lineOption } from './processLineOption.js'
|
|
import nextTick from 'dai-js/tools/nextTick'
|
|
|
|
|
|
export default {
|
|
name: "HomeMap",
|
|
data () {
|
|
return {
|
|
dataLoading: true,
|
|
pieNoData: false,
|
|
lineNoData: false,
|
|
isfirstInit: true,//记录地图是否第一次加载
|
|
|
|
projectTotal: 0,
|
|
dateIncr: 0,
|
|
monthIncr: 0,
|
|
|
|
lineChart: '',
|
|
lineOption: {},
|
|
lineInitState: false,
|
|
lineColorArray: [],
|
|
lineData: [],
|
|
lineXaxis: [],
|
|
lineSeriesData: [],
|
|
|
|
pieChartS: null,
|
|
pieChart: '',
|
|
pieOption: {},
|
|
pieInitState: false,
|
|
pieTotal: 0,
|
|
colorArray: [],
|
|
pieData: [
|
|
// { value: 1048, name: '未结案', color: '#FAC126', selected: true },
|
|
// { value: 735, name: '已结案', color: '#3DDA83' },
|
|
],
|
|
|
|
legendArray: [
|
|
{
|
|
name: '未结案',
|
|
count: 0,
|
|
percent: '0%',
|
|
url: require('../../../../assets/img/shuju/measure/huang@2x.png')
|
|
},
|
|
{
|
|
name: '已结案',
|
|
count: 0,
|
|
percent: '0%',
|
|
url: require('../../../../assets/img/shuju/measure/lv@2x.png')
|
|
}
|
|
],
|
|
|
|
dateId: '',
|
|
dateIdShow: '',
|
|
agencyId: '',
|
|
status: 'pending',//状态:待处理 pending，结案closed
|
|
agencyInfo: {},
|
|
projectList: [],
|
|
|
|
|
|
iconUrlArray: [],
|
|
iconTextStyle: {},
|
|
|
|
casOptions: [],
|
|
agencyIdArray: [],
|
|
customerList: [],
|
|
iscascaderShow: 0,
|
|
|
|
|
|
optionProps: {
|
|
multiple: false,
|
|
value: 'agencyId',
|
|
label: 'agencyName',
|
|
children: 'subAgencyList',
|
|
checkStrictly: true
|
|
},
|
|
|
|
};
|
|
},
|
|
// mixins: [animate]
|
|
beforeDestroy () {
|
|
|
|
},
|
|
async created () {
|
|
|
|
},
|
|
|
|
async mounted () {
|
|
this.dataLoading = true
|
|
//初始化时间、各组件
|
|
this.initData()
|
|
await this.getAgencylist()//获取组织级别
|
|
//获取服务器数据
|
|
await this.getProjectTotal()
|
|
await this.getLineChart()
|
|
await this.loadProjectlist()
|
|
this.dataLoading = false
|
|
|
|
this.assignData()
|
|
|
|
},
|
|
|
|
methods: {
|
|
async getApiData () {
|
|
await this.getProjectTotal()
|
|
await this.getLineChart()
|
|
await this.loadProjectlist()
|
|
|
|
this.assignData()
|
|
|
|
},
|
|
|
|
assignData () {
|
|
this.getPie()
|
|
this.getLine()
|
|
},
|
|
|
|
handleChangeDate (value) {
|
|
this.dateIdShow = value
|
|
this.getApiData()
|
|
},
|
|
|
|
// 获取当前登录人员信息及组织信息
|
|
async getAgencylist () {
|
|
const url = "/gov/org/customeragency/agencygridtree";
|
|
|
|
let params = {};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (code === 0) {
|
|
let treeData = []
|
|
console.log(this.treeData)
|
|
treeData.push(data)
|
|
//重构树，去除网格
|
|
let treeDataNew
|
|
treeDataNew = this.filterTree(treeData)
|
|
|
|
this.agencyInfo = data
|
|
this.agencyId = this.agencyInfo.agencyId
|
|
if (!this.agencyInfo.latitude) {
|
|
this.agencyInfo.latitude = 36.072227
|
|
}
|
|
if (!this.agencyInfo.longitude) {
|
|
this.agencyInfo.longitude = 120.389455
|
|
}
|
|
if (!this.agencyInfo.level) {
|
|
this.agencyInfo.level = 'street'
|
|
}
|
|
|
|
//组织级联数据
|
|
++this.iscascaderShow
|
|
this.casOptions = []
|
|
this.agencyIdArray.length = []
|
|
|
|
if (data) {
|
|
this.casOptions = treeDataNew
|
|
this.agencyIdArray.push(this.agencyId)
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
|
|
},
|
|
|
|
//重构树，去除网格
|
|
filterTree (treeData) {
|
|
|
|
let newTree = treeData.filter(x => x.level !== 'grid')
|
|
newTree.forEach(x => x.subAgencyList && (x.subAgencyList = this.filterTree(x.subAgencyList)))
|
|
return newTree
|
|
|
|
},
|
|
|
|
|
|
|
|
//加载项目
|
|
async getProjectTotal () {
|
|
if (this.$refs.pieChart) {
|
|
this.$refs.pieChart.showLoading()
|
|
this.$refs.pieChart.clear()
|
|
}
|
|
|
|
const url = "/data/aggregator/project/projecttotal";
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projecttotal";
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
dateId: this.dateId,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
if (this.$refs.pieChart) {
|
|
this.$refs.pieChart.hideLoading()
|
|
}
|
|
if (code === 0) {
|
|
this.projectTotal = data.projectTotal
|
|
this.dateIncr = data.dateIncr
|
|
this.monthIncr = data.monthIncr
|
|
this.legendArray = [
|
|
{
|
|
name: '未结案',
|
|
count: data.pendingTotal,
|
|
percent: data.pendingRatio,
|
|
url: require('../../../../assets/img/shuju/measure/huang@2x.png')
|
|
},
|
|
{
|
|
name: '已结案',
|
|
count: data.closedTotal,
|
|
percent: data.closedRatio,
|
|
url: require('../../../../assets/img/shuju/measure/lv@2x.png')
|
|
}
|
|
]
|
|
|
|
this.pieData = [
|
|
{
|
|
name: "未结案",
|
|
value: data.pendingTotal,
|
|
},
|
|
{
|
|
name: "已结案",
|
|
value: data.closedTotal,
|
|
}
|
|
]
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
},
|
|
|
|
//加载项目
|
|
async loadProjectlist () {
|
|
const url = "/data/aggregator/project/projectstatuslist";
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectstatuslist";
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
dateId: this.dateId,
|
|
status: this.status
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
|
|
if (code === 0) {
|
|
|
|
this.projectList = [...data]
|
|
|
|
this.projectList.forEach(item => {
|
|
item.values_ = {
|
|
name: item.title
|
|
}
|
|
if (item.title.length > 10) {
|
|
item.values_.name = item.title.substring(0, 9) + '...'
|
|
}
|
|
if (item.status === 'pending') {
|
|
item.urlIndex = 0
|
|
} else {
|
|
item.urlIndex = 1
|
|
}
|
|
});
|
|
|
|
this.iconUrlArray = [
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211209/0994757e8962405ca1cdf9792bf325e4.png',//未处理
|
|
'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211209/2a80f800b04442448c41a6ed4592cd95.png'//已处理
|
|
]
|
|
|
|
this.iconTextStyle = {
|
|
textAlign: undefined,
|
|
font: "15px Arial",
|
|
//fontFamily: "Courier New, monospace",
|
|
// fontWeight: "bold",
|
|
text: '',
|
|
backgroundFill: new Fill({
|
|
color: "#194160",
|
|
}),
|
|
backgroundStroke: new Stroke({ color: "#2865FA", width: 2 }),
|
|
padding: [5, 10, 4, 10],
|
|
fill: new Fill({ color: "#ffffff" }),
|
|
// stroke: new Stroke({ color: "#2865FA", width: 3 }),
|
|
offsetY: -30,
|
|
offsetX: 50,
|
|
overflow: true,
|
|
}
|
|
|
|
//第一次加载完置为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.projectList, this.iconUrlArray, this.iconTextStyle, 3000)
|
|
this.$refs.map.loadMap(this.agencyInfo, null, null, this.projectList, this.iconUrlArray, this.iconTextStyle)
|
|
} else {
|
|
this.$refs.map.refreshMap(null, this.projectList)
|
|
}
|
|
},
|
|
|
|
//点击项目
|
|
async clickProject (feature) {
|
|
console.log(feature)
|
|
const featureInfo = feature.values_.properties.info
|
|
let coordinate = [featureInfo.longitude, featureInfo.latitude]
|
|
const url = "/gov/project/trace/projectdetail";
|
|
|
|
const { data, code, msg } = await requestPost(url, {
|
|
projectId: featureInfo.projectId,
|
|
});
|
|
|
|
if (code === 0) {
|
|
let projectInfo = data;
|
|
projectInfo = {
|
|
projectTitle: data.projectTitle ? data.projectTitle : '--',
|
|
backGround: data.backGround ? data.backGround : '--',
|
|
publicReply: data.publicReply ? data.publicReply : '--',
|
|
internalRemark: data.internalRemark ? data.internalRemark : '--',
|
|
departmentNameList: (data.departmentNameList && data.departmentNameList.length > 0) ? data.departmentNameList.join('、') : '--',
|
|
projectCate: (data.projectCate && data.projectCate.length > 0) ? data.projectCate.join('、') : '--',
|
|
projectTag: (data.projectTag && data.projectTag.length > 0) ? data.projectTag.join('、') : '--',
|
|
}
|
|
let showData = `
|
|
<div style='font-size:16px; color:#FFFFFF;'>项目信息</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:10px'>项目标题：
|
|
<span>`+ projectInfo.projectTitle + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>项目背景：
|
|
<span>`+ projectInfo.backGround + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>项目方案：
|
|
<span>`+ projectInfo.projectTitle + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>内部备注：
|
|
<span>`+ projectInfo.internalRemark + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>处理部门：
|
|
<span>`+ projectInfo.departmentNameList + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>分类：
|
|
<span>`+ projectInfo.projectCate + `</span>
|
|
</div>
|
|
<div style='font-size:12px; color:#FFFFFF;margin-top:5px'>标签：
|
|
<span>`+ projectInfo.projectTag + `</span>
|
|
</div>
|
|
|
|
`
|
|
|
|
this.$refs.map.handleShowPopup(showData, coordinate)
|
|
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
|
|
},
|
|
|
|
pieInitOk (dom) {
|
|
this.pieChartS = dom
|
|
this.pieInitState = true
|
|
},
|
|
lineInitOk () {
|
|
|
|
this.lineInitState = true
|
|
|
|
},
|
|
getLine () {
|
|
if (this.lineInitState) {
|
|
this.assignLineChart()
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getLine()
|
|
}, 500)
|
|
}
|
|
},
|
|
// 获取折线图
|
|
async getLineChart () {
|
|
if (this.$refs.lineChart) {
|
|
this.$refs.lineChart.clear()
|
|
this.$refs.lineChart.showLoading()
|
|
}
|
|
const _that = this
|
|
// this.$refs.pieChart.showLoading()
|
|
const url = "/data/aggregator/project/projectmonthincr";
|
|
// const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
|
|
let params = {
|
|
agencyId: this.agencyId,
|
|
dateId: this.dateId,
|
|
};
|
|
|
|
const { data, code, msg } = await requestPost(url, params);
|
|
|
|
if (code === 0) {
|
|
// 获取pieChart配置
|
|
|
|
this.lineXaxis = []
|
|
this.lineSeriesData = []
|
|
if (data && data.length > 0) {
|
|
this.lineNoData = false
|
|
data.forEach(item => {
|
|
this.lineXaxis.push(item.type)
|
|
this.lineSeriesData.push(item.value)
|
|
});
|
|
this.lineData = data
|
|
|
|
} else {
|
|
this.lineNoData = true
|
|
}
|
|
|
|
if (this.$refs.lineChart) {
|
|
this.$refs.lineChart.hideLoading()
|
|
}
|
|
|
|
} else {
|
|
this.$message.error(msg);
|
|
}
|
|
|
|
|
|
},
|
|
|
|
assignLineChart () {
|
|
|
|
this.lineOption = lineOption()
|
|
this.$refs.lineChart.setOption(this.lineOption, true)
|
|
this.$refs.lineChart.setOption({
|
|
xAxis: { data: this.lineXaxis },
|
|
series: [
|
|
{ data: this.lineSeriesData },
|
|
|
|
]
|
|
}, true)
|
|
},
|
|
|
|
getPie () {
|
|
if (this.pieInitState) {
|
|
this.assignPieChart()
|
|
} else {
|
|
setTimeout(() => {
|
|
this.getPie()
|
|
}, 500)
|
|
}
|
|
},
|
|
// 获取饼状图
|
|
async assignPieChart () {
|
|
|
|
this.pieTotal = 0
|
|
let maxIndex = 0
|
|
let maxValue = this.pieData[0].value
|
|
const _that = this
|
|
|
|
// 获取pieChart配置
|
|
this.pieOption = pieOption(this.pieChartS)
|
|
|
|
this.pieData.forEach((item, index) => {
|
|
this.pieTotal = this.pieTotal + item.value
|
|
if (item.value > maxValue) {
|
|
maxValue = item.value
|
|
maxIndex = index
|
|
item.selected = true
|
|
} else if (index !== 0) {
|
|
item.selected = false
|
|
}
|
|
});
|
|
|
|
this.pieOption.title.text = this.pieTotal
|
|
|
|
this.clickPie(maxIndex)
|
|
|
|
let fun = function (params) {
|
|
_that.clickPie(params.dataIndex)
|
|
}
|
|
this.$refs.pieChart.handleClick(fun)
|
|
|
|
},
|
|
|
|
clickPie (seriesIndex) {
|
|
this.pieData.forEach((element, index) => {
|
|
if (index === seriesIndex) {
|
|
element.label = {
|
|
show: true,
|
|
|
|
};
|
|
element.labelLine = {
|
|
show: true,
|
|
lineStyle: {
|
|
opacity: 1,
|
|
}
|
|
|
|
};
|
|
|
|
} else {
|
|
element.label = {
|
|
show: false,
|
|
|
|
};
|
|
element.labelLine = {
|
|
show: false,
|
|
lineStyle: {
|
|
opacity: 0,
|
|
color: 'rgba(255,255,255,0)'
|
|
}
|
|
};
|
|
}
|
|
});
|
|
this.pieOption.series[1].data = this.pieData
|
|
// this.$refs.pieChart.hideLoading()
|
|
this.$refs.pieChart.setOption(this.pieOption)
|
|
},
|
|
|
|
handleChangeStatus (status) {
|
|
this.status = status
|
|
this.loadProjectlist()
|
|
},
|
|
|
|
handleChangeAgency (value) {
|
|
|
|
this.agencyName = this.$refs["myCascader"].getCheckedNodes()[0].label
|
|
this.agencyId = this.agencyIdArray.length > 0 ? this.agencyIdArray[this.agencyIdArray.length - 1] : ''
|
|
this.getApiData()
|
|
console.log(this.agencyIdArray)
|
|
},
|
|
|
|
//初始化时间
|
|
initData () {
|
|
var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
|
|
var nowdate = new Date(time); // 获取的是前一天日期
|
|
var y = nowdate.getFullYear();
|
|
var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
|
|
var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
|
|
this.dateIdShow = y + '-' + m + '-' + d;
|
|
},
|
|
|
|
toUserInfo (uid) {
|
|
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` });
|
|
},
|
|
},
|
|
props: {
|
|
uid: {
|
|
type: String,
|
|
default: "",
|
|
// default: "8ada68cb6f1e4b9a8333348a39ef3aee",
|
|
},
|
|
},
|
|
|
|
computed: {},
|
|
|
|
components: {
|
|
cptCard,
|
|
cptTb,
|
|
screenEchartsFrame,
|
|
screenMap,
|
|
ScreenLoading,
|
|
ScreenNodata
|
|
},
|
|
|
|
watch: {
|
|
dateIdShow () {
|
|
|
|
let dataArray = this.dateIdShow.split('-')
|
|
this.dateId = dataArray.join('')
|
|
},
|
|
uid (id) {
|
|
this.userId = id;
|
|
},
|
|
userId () {
|
|
this.getApiData();
|
|
window.scrollTo(0, 0);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
src="@/assets/scss/modules/visual/processAnalyze.scss"
|
|
scoped
|
|
></style>
|
|
|
|
|
|
|