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.
726 lines
23 KiB
726 lines
23 KiB
|
|
<template>
|
|
<div class="g-main">
|
|
<div>
|
|
<div class="m-search">
|
|
<el-form :inline="true" :model="formData" ref="ref_searchform" :label-width="'100px'">
|
|
<el-form-item label="统计时间">
|
|
<el-date-picker v-model="formData.queryDateStart" type="date" value-format="yyyy-MM-dd" placeholder="开始时间"
|
|
style="width: 202px" clearable>
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker v-model="formData.queryDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"
|
|
style="width: 202px" clearable>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-button style="margin-left: 30px" size="small" type="primary "
|
|
@click="handleSearch">查询</el-button>
|
|
<el-button style="margin-left: 10px" is-plain class="diy-button--white el-button--default"
|
|
size="small" @click="exportReport">导出</el-button>
|
|
</el-form>
|
|
|
|
</div>
|
|
|
|
<div class="m-table">
|
|
<div style="text-align: center;">
|
|
<h1>{{ report.streetName }}{{ report.period }}</h1>
|
|
<h1>政务热线运行情况分析报告</h1>
|
|
</div>
|
|
<div>
|
|
<h1 style="font-size: 24px; font-weight: bold;"> 一、总体运行情况 </h1>
|
|
<p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
|
|
{{ report.overallOperation }}
|
|
</p>
|
|
<h1 style="text-align: center;font-size: 20px;">行业领域分布情况</h1>
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
|
|
<div id="categoryChart"></div>
|
|
<div id="categoryPie"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h1 style="font-size: 24px; font-weight: bold;"> 二、工单情况分析 </h1>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (一）地域统计分析 </h2>
|
|
<p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
|
|
{{ report.geoStatis }}
|
|
</p>
|
|
<h1 style="text-align: center;font-size: 20px;">各社区问题数量及占比</h1>
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
|
|
<div id="communityChart"></div>
|
|
</div>
|
|
|
|
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (二）科室热线分布分析 </h2>
|
|
<p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
|
|
{{ report.departHotline }}
|
|
</p>
|
|
<h1 style="text-align: center;font-size: 20px;">科室热线分布情况</h1>
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
|
|
<div id="departChart"></div>
|
|
</div>
|
|
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (三）热点诉求及区域分析 </h2>
|
|
<p style="font-size: 16px; line-height: 1.5; margin-top: 10px; text-indent: 2em;">
|
|
{{ report.hotDemand }}
|
|
</p>
|
|
<h1 style="text-align: center;font-size: 20px;">热线诉求热点问题前十</h1>
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }">
|
|
<div id="hotlineChart"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
<h1 style="font-size: 24px; font-weight: bold;"> 三、存在主要问题 </h1>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (一）同地点同类型事件重复投诉 </h2>
|
|
</div>
|
|
|
|
<el-table :data="addressData" border class="m-table-item" style="width: 100%">
|
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
|
|
<el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>
|
|
</el-table>
|
|
|
|
<div>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (二）同一人员重复投诉</h2>
|
|
</div>
|
|
|
|
<el-table :data="mobileData" border class="m-table-item" style="width: 100%">
|
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
|
|
<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>
|
|
</el-table>
|
|
|
|
<div>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> (三）同一区域不同类型投诉</h2>
|
|
</div>
|
|
|
|
<el-table :data="addressMobileData" border class="m-table-item" style="width: 100%" >
|
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
|
|
<el-table-column prop="address" align="center" label="地点" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="mobile" align="center" label="联系方式" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="amount" align="center" label="投诉次数" :show-overflow-tooltip="true"></el-table-column>
|
|
<el-table-column prop="content" align="center" label="投诉内容" :show-overflow-tooltip="true"></el-table-column>
|
|
</el-table>
|
|
|
|
<div>
|
|
<h1 style="font-size: 24px; font-weight: bold;"> 四、工作改进举措 </h1>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 一是机制要“优”</h2>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 二是质量要“高”</h2>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 三是分流要“准”</h2>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 四是流程要“亚”</h2>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 五是沟通要“多</h2>
|
|
<h2 style="font-size: 20px; font-weight: bold;"> 六是模板要“精"</h2>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { requestPost, requestGet } from "@/js/dai/request";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import { mapGetters } from "vuex";
|
|
import axios from "axios";
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
components: {},
|
|
|
|
data() {
|
|
return {
|
|
searchH: 20,
|
|
|
|
formData: {
|
|
queryDateStart: "",
|
|
queryDateEnd: "",
|
|
},
|
|
|
|
// 内容字段
|
|
report:{
|
|
streetName:"",
|
|
overallOperation:"",
|
|
geoStatis:"",
|
|
departHotline:"",
|
|
hotDemand:"",
|
|
},
|
|
|
|
addressData:[],
|
|
mobileData:[],
|
|
addressMobileData:[],
|
|
|
|
categoryChart: {},
|
|
categoryPie: {},
|
|
communityChart: {},
|
|
departChart: {},
|
|
hotlineChart: {},
|
|
|
|
|
|
categoryChartOption: {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['工单数量'],
|
|
bottom: '10%',
|
|
icon: 'rect',
|
|
itemWidth: 20,
|
|
itemHeight: 5,
|
|
itemGap: 20,
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '25%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {},
|
|
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: [],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位(个)',
|
|
min: 0,
|
|
},
|
|
series: [
|
|
{
|
|
name: '工单数量',
|
|
type: 'bar',
|
|
data: [],
|
|
barWidth: 36, // 设置柱子宽度
|
|
barCategoryGap: 0, // 设置柱子间的间隔为0
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#2c7cf2' }, // 从顶部开始
|
|
{ offset: 1, color: '#80b3ff' } // 到底部结束
|
|
]
|
|
)
|
|
},
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#fafbfc',
|
|
opacity: "0.5"
|
|
}
|
|
},
|
|
]
|
|
},
|
|
|
|
categoryPieOption:{
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
legend: {
|
|
type: 'scroll',
|
|
bottom: 0,
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'pie',
|
|
radius: '80%',
|
|
data: [
|
|
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
|
|
communityOption : {
|
|
color: ['#5470C6', '#91CC75'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
grid: {
|
|
right: '20%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['数量', '占比']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
data: [],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '占比',
|
|
position: 'right',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#91CC75'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} %'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
position: 'left',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#5470C6'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} 件'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: 36, // 设置柱子宽度
|
|
data: [
|
|
|
|
]
|
|
},
|
|
{
|
|
name: '占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [
|
|
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
departOption : {
|
|
color: ['#5470C6', '#91CC75'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
grid: {
|
|
right: '20%'
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['数量', '占比']
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
data: [],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '占比',
|
|
position: 'right',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#5470C6'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} %'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '数量',
|
|
position: 'left',
|
|
alignTicks: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#00264D'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} 件'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: 36, // 设置柱子宽度
|
|
itemStyle: {
|
|
normal: {
|
|
// 定制显示（按顺序）
|
|
color: function(params) {
|
|
var colorList = ['#00BFFF', '#800080', '#008080', '#FF8C00', '#FF3333', '#6600CC', '#00FF00', '#4682B4', '#282828', '#FF4500'];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
},
|
|
},
|
|
data: [
|
|
|
|
]
|
|
},
|
|
{
|
|
name: '占比',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: [
|
|
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
hotlineChartOption: {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['工单数量'],
|
|
bottom: '10%',
|
|
icon: 'rect',
|
|
itemWidth: 20,
|
|
itemHeight: 5,
|
|
itemGap: 20,
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '25%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {},
|
|
|
|
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: true,
|
|
data: [],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位(个)',
|
|
min: 0,
|
|
},
|
|
series: [
|
|
{
|
|
name: '工单数量',
|
|
type: 'bar',
|
|
data: [],
|
|
barWidth: 36, // 设置柱子宽度
|
|
barCategoryGap: 0, // 设置柱子间的间隔为0
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[
|
|
{ offset: 0, color: '#2c7cf2' }, // 从顶部开始
|
|
{ offset: 1, color: '#80b3ff' } // 到底部结束
|
|
]
|
|
)
|
|
},
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: '#fafbfc',
|
|
opacity: "0.5"
|
|
}
|
|
},
|
|
]
|
|
},
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
maxTableHeight() {
|
|
const h = this.clientHeight - this.searchH - 330 + this.iframeHeight;
|
|
const _h = this.clientHeight - 330 - this.searchH;
|
|
return this.$store.state.inIframe ? h : _h;
|
|
},
|
|
...mapGetters(["clientHeight", "iframeHeight"]),
|
|
},
|
|
watch: {},
|
|
async mounted() {
|
|
this.user = this.$store.state.user;
|
|
this.agencyId = this.user.agencyId;
|
|
await this.getTableData();
|
|
await this.initEcharts();
|
|
},
|
|
methods: {
|
|
initEcharts() {
|
|
this.categoryChart = echarts.init(document.getElementById("categoryChart"));
|
|
this.categoryChart.setOption(this.categoryChartOption);
|
|
let than = this;
|
|
this.categoryChart.on("click", function (params) {
|
|
than.handelClickChart(params.name);
|
|
});
|
|
|
|
this.categoryPie= echarts.init(document.getElementById("categoryPie"));
|
|
this.categoryPie.setOption(this.categoryPieOption);
|
|
this.categoryPie.on("click", function (params) {
|
|
than.handelClickChart(params.name);
|
|
});
|
|
|
|
this.communityChart= echarts.init(document.getElementById("communityChart"));
|
|
this.communityChart.setOption(this.communityOption);
|
|
this.communityChart.on("click", function (params) {
|
|
than.handelClickChart(params.name);
|
|
});
|
|
|
|
|
|
this.departChart= echarts.init(document.getElementById("departChart"));
|
|
this.departChart.setOption(this.departOption);
|
|
this.departChart.on("click", function (params) {
|
|
than.handelClickChart(params.name);
|
|
});
|
|
|
|
this.hotlineChart= echarts.init(document.getElementById("hotlineChart"));
|
|
this.hotlineChart.setOption(this.hotlineChartOption);
|
|
this.hotlineChart.on("click", function (params) {
|
|
than.handelClickChart(params.name);
|
|
});
|
|
|
|
|
|
window.addEventListener("resize", this.handleWindowResize);
|
|
|
|
console.log("图表加载")
|
|
},
|
|
handleWindowResize() {
|
|
if (this.categoryChart) {
|
|
this.categoryChart.resize();
|
|
}
|
|
if (this.categoryPie) {
|
|
this.categoryPie.resize();
|
|
}
|
|
},
|
|
handelClickChart(name) {
|
|
this.showFormList = true;
|
|
this.satisfactionCategoryStr = this.dicts.satisfaction_category.filter(
|
|
(item) => item.label == name
|
|
)[0].value;
|
|
},
|
|
handleClose() {
|
|
this.showFormList = false;
|
|
},
|
|
// 搜索事件
|
|
async handleSearch(val) {
|
|
console.log(this.formData);
|
|
// 清空数据
|
|
this.cleanReportData();
|
|
await this.getTableData();
|
|
await this.initEcharts();
|
|
},
|
|
|
|
cleanReportData(){
|
|
console.log("刷新数据");
|
|
this.report={}
|
|
this.addressData=[]
|
|
this.mobileData=[]
|
|
this.addressMobileData=[]
|
|
|
|
this.categoryChartOption.series[0].data=[];
|
|
this.categoryChartOption.xAxis.data=[];
|
|
|
|
this.categoryPieOption.series[0].data=[];
|
|
|
|
this.communityOption.xAxis[0].data=[];
|
|
this.communityOption.series[0].data=[];
|
|
this.communityOption.series[1].data=[];
|
|
|
|
this.departOption.xAxis[0].data=[];
|
|
this.departOption.series[0].data=[];
|
|
this.departOption.series[1].data=[];
|
|
|
|
this.hotlineChartOption.xAxis.data=[];
|
|
this.hotlineChartOption.series[0].data=[];
|
|
},
|
|
|
|
// 重置
|
|
exportReport() {
|
|
this.formData = {};
|
|
},
|
|
|
|
// 获取分类
|
|
async getTableData() {
|
|
|
|
const url = '/governance/dwdEvent/report';
|
|
const {formData } = this;
|
|
const { data, code, msg } = await requestPost(url, {
|
|
...formData
|
|
});
|
|
if (code != 0) {
|
|
this.$message.error(msg);
|
|
return;
|
|
}
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
this.report = data;
|
|
console.log(this.report)
|
|
|
|
this.tableLoading = true;
|
|
|
|
//获取分类
|
|
Object.keys(this.report.categoryCount).forEach((key) => {
|
|
const value = this.report.categoryCount[key];
|
|
|
|
this.categoryChartOption.series[0].data.push(value);
|
|
this.categoryChartOption.xAxis.data.push(key);
|
|
|
|
const jsonObject = {
|
|
name: key,
|
|
value: value
|
|
};
|
|
this.categoryPieOption.series[0].data.push(jsonObject);
|
|
|
|
});
|
|
|
|
// 获取社区
|
|
Object.keys(this.report.communityCount).forEach((key) => {
|
|
const value = this.report.communityCount[key];
|
|
|
|
this.communityOption.xAxis[0].data.push(key);
|
|
this.communityOption.series[0].data.push(value/this.report.totalEvent*100);
|
|
this.communityOption.series[1].data.push(value);
|
|
|
|
});
|
|
|
|
// 获取科室
|
|
Object.keys(this.report.departCount).forEach((key) => {
|
|
const value = this.report.departCount[key];
|
|
|
|
this.departOption.xAxis[0].data.push(key);
|
|
this.departOption.series[0].data.push(value/this.report.totalEvent*100);
|
|
this.departOption.series[1].data.push(value);
|
|
|
|
});
|
|
|
|
|
|
// 获取热点诉求及区域分析
|
|
Object.keys(this.report.subCategoryCount).forEach((key) => {
|
|
const value = this.report.subCategoryCount[key];
|
|
|
|
this.hotlineChartOption.xAxis.data.push(key);
|
|
this.hotlineChartOption.series[0].data.push(value);
|
|
});
|
|
|
|
this.addressData = this.report.addressEvent
|
|
? this.report.addressEvent.map(item => {
|
|
return item;
|
|
})
|
|
: [];
|
|
|
|
this.mobileData = this.report.mobileEvent
|
|
? this.report.mobileEvent.map(item => {
|
|
return item;
|
|
})
|
|
: [];
|
|
|
|
this.addressMobileData = this.report.addressMobileEvents
|
|
? this.report.addressMobileEvents.map(item => {
|
|
return item;
|
|
})
|
|
: [];
|
|
},
|
|
},
|
|
|
|
props: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/buttonstyle.scss";
|
|
@import "@/assets/scss/modules/management/list-main.scss";
|
|
@import "@/assets/scss/modules/shequzhili/event-info.scss";
|
|
|
|
.div_btn_left>* {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.m-table-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
#categoryChart {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#categoryPie {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#communityChart {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#departChart {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
#hotlineChart {
|
|
width: 100%;
|
|
flex: 1;
|
|
}
|
|
|
|
.centered-title {
|
|
text-align: center; /* 将文本水平居中对齐 */
|
|
font-size: 28px; /* 设置标题字体大小 */
|
|
font-weight: bold; /* 设置标题加粗 */
|
|
color: #333; /* 设置标题颜色 */
|
|
margin-bottom: 20px; /* 设置标题与下方内容的间距 */
|
|
}
|
|
|
|
</style>
|
|
|
|
|