elink-star
/
epmet-work-pc
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

12345月度热线

V1.0
duanliangtao 3 years ago
parent
479fe9a60e
commit
d99e70438f
1 changed files with 655 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 655
      src/views/modules/goverhotline/index.vue

655
src/views/modules/goverhotline/index.vue
View File

@ -0,0 +1,655 @@
<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" placeholder="开始时间"
style="width: 202px" clearable>
</el-date-picker>
至
<el-date-picker v-model="formData.queryDateEnd" type="date" value-format="yyyy-MM" 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>海伦路街道2023年1月1日至6月31日</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%" :height="maxTableHeight">
<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%" :height="maxTableHeight">
<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>
</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:{
overallOperation:"",
geoStatis:"",
departHotline:"",
hotDemand:""
},
addressData:{},
mobileData:{},
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;
},
// 搜索事件
handleSearch(val) {
console.log(this.formData);
},
// 重置
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 = {
address: key,
amount: key,
content:key
};
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);
});
},
},
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>
Write Preview
Loading…
Cancel
Save