|
|
|
@ -32,40 +32,66 @@ |
|
|
|
{{ 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 v-if="categoryCountShow"> |
|
|
|
<div class="m-table-item" :style="{ height: maxTableHeight + 'px', width: '100%' }"> |
|
|
|
<div id="categoryChart"></div> |
|
|
|
<div id="categoryPie"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="no-data" v-else> |
|
|
|
暂无数据 |
|
|
|
</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> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="communityCountShow"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<div class="no-data" v-else> |
|
|
|
暂无数据 |
|
|
|
</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 v-if="departCountShow"> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<div v-else class="no-data"> |
|
|
|
暂无数据 |
|
|
|
</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 v-if="subCategoryCountShow"> |
|
|
|
<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 class="no-data" v-else> |
|
|
|
暂无数据 |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -152,6 +178,12 @@ export default { |
|
|
|
departChart: {}, |
|
|
|
hotlineChart: {}, |
|
|
|
|
|
|
|
categoryCountShow:false, |
|
|
|
communityCountShow:false, |
|
|
|
departCountShow:false, |
|
|
|
subCategoryCountShow:false, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
categoryChartOption: { |
|
|
|
tooltip: { |
|
|
|
@ -484,38 +516,45 @@ export default { |
|
|
|
}, |
|
|
|
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); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
if(this.categoryCountShow){ |
|
|
|
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.departChart= echarts.init(document.getElementById("departChart")); |
|
|
|
this.departChart.setOption(this.departOption); |
|
|
|
this.departChart.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.hotlineChart= echarts.init(document.getElementById("hotlineChart")); |
|
|
|
this.hotlineChart.setOption(this.hotlineChartOption); |
|
|
|
this.hotlineChart.on("click", function (params) { |
|
|
|
than.handelClickChart(params.name); |
|
|
|
if(this.communityCountShow){ |
|
|
|
this.communityChart= echarts.init(document.getElementById("communityChart")); |
|
|
|
this.communityChart.setOption(this.communityOption); |
|
|
|
this.communityChart.on("click", function (params) { |
|
|
|
than.handelClickChart(params.name); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if(this.departCountShow){ |
|
|
|
this.departChart= echarts.init(document.getElementById("departChart")); |
|
|
|
this.departChart.setOption(this.departOption); |
|
|
|
this.departChart.on("click", function (params) { |
|
|
|
than.handelClickChart(params.name); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if(this.subCategoryCountShow){ |
|
|
|
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); |
|
|
|
|
|
|
|
@ -658,6 +697,23 @@ export default { |
|
|
|
return item; |
|
|
|
}) |
|
|
|
: []; |
|
|
|
|
|
|
|
|
|
|
|
if (this.report && this.report. categoryCount && Object.keys(this.report. categoryCount).length > 0) { |
|
|
|
this.categoryCountShow = true; |
|
|
|
} |
|
|
|
|
|
|
|
if (this.report && this.report. communityCount && Object.keys(this.report. communityCount).length > 0) { |
|
|
|
this.communityCountShow = true; |
|
|
|
} |
|
|
|
|
|
|
|
if (this.report && this.report.departCount && Object.keys(this.report.departCount).length > 0) { |
|
|
|
this.departCountShow = true; |
|
|
|
} |
|
|
|
|
|
|
|
if (this.report && this.report.subCategoryCount && Object.keys(this.report.subCategoryCount).length > 0) { |
|
|
|
this.subCategoryCountShow = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
@ -712,6 +768,15 @@ export default { |
|
|
|
margin-bottom: 20px; /* 设置标题与下方内容的间距 */ |
|
|
|
} |
|
|
|
|
|
|
|
.no-data { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
height: 200px; /* 调整高度以适应你的需要 */ |
|
|
|
color: #888; /* 灰色字体颜色 */ |
|
|
|
font-size: 20px; /* 字体大小 */ |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
PLUTO
2 years ago
