<!doctype html>
|
<html class="no-js">
|
<head>
|
<meta charset="utf-8">
|
<title>运维年报</title>
|
[#include "/business/pages/include/static.html" /]
|
<script type="text/javascript">
|
initSplineStyle();
|
var statisType = 'year';
|
$(function() {
|
initNumChart();
|
initMonChart();
|
initConverChart();
|
initSatisChart();
|
});
|
|
//无数据显示
|
function showNoData(containerId) {
|
var strHrml = '<div id="noDailyReport" style="position:relative;width:100%;height:400px">';
|
strHrml = strHrml + '<span class="nodata"></span>';
|
strHrml = strHrml + '</div>';
|
$('#'+containerId).html(strHrml);
|
}
|
//初始化数量
|
function initNumChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getSatisNumChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('num_container')
|
}else{
|
createNumChart(data);
|
}
|
|
},'json');
|
}
|
|
function createNumChart(data){
|
$('#num_container').highcharts({
|
chart: {
|
height:380
|
},
|
tooltip: {
|
valueSuffix: ' 分'
|
},
|
title: {
|
text: '近一年满意度趋势分析'
|
},
|
xAxis: {
|
categories: data.categories
|
},
|
yAxis: {
|
allowDecimals:false,
|
title: {
|
enabled:false
|
},
|
floor:0
|
},
|
labels: {
|
items: [{
|
style: {
|
left: '40px',
|
top: '8px',
|
color: 'black'
|
}
|
}]
|
},
|
series: data.series
|
});
|
}
|
|
//初始化同比图表
|
function initMonChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getSatisMonChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('mom_container')
|
}else{
|
createMonChart(data);
|
}
|
},'json');
|
}
|
|
function createMonChart(data){
|
$('#mom_container').highcharts({
|
chart: {
|
type: 'column',
|
height:400,
|
},
|
title: {
|
text: ''
|
},
|
xAxis: {
|
categories: data.categories
|
},
|
tooltip: {
|
formatter: function() {
|
return '<b>'+ this.x +'</b><br>'+this.series.name +': '+ this.y ;
|
}
|
},
|
plotOptions: {
|
column: {
|
pointWidth: 30
|
}
|
},
|
series: data.series
|
});
|
}
|
|
//覆盖率图表
|
function initConverChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getSatisConverRateSplineChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('conver_container')
|
}else{
|
createConverChart(data);
|
}
|
|
},'json');
|
}
|
|
function createConverChart(data){
|
$('#conver_container').highcharts({
|
chart: {
|
type: 'area'
|
},
|
title: {
|
text: ''
|
},
|
xAxis: {
|
categories: data.categories
|
},
|
yAxis: {
|
min: 0,
|
title: {
|
text: ''
|
}
|
},
|
plotOptions:{
|
area: {
|
marker: {
|
enabled: false,
|
symbol: 'circle'
|
}
|
}
|
},
|
tooltip: {
|
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:.2f}%</b> <br/>',
|
shared: true
|
},
|
series: data.series
|
});
|
}
|
|
|
//初始化满意度图表
|
function initSatisChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getSatisSurveyChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('satis_container')
|
}else{
|
createSatisChart(data);
|
}
|
|
},'json');
|
}
|
|
function createSatisChart(data){
|
$('#satis_container').highcharts({
|
chart: {
|
type: 'gauge',
|
plotBackgroundColor: null,
|
plotBackgroundImage: null,
|
plotBorderWidth: 0,
|
plotShadow: false
|
},
|
title: {
|
text: ''
|
},
|
pane: {
|
startAngle: -150,
|
endAngle: 150,
|
background: [{
|
backgroundColor: {
|
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
stops: [
|
[0, '#FFF'],
|
[1, '#333']
|
]
|
},
|
borderWidth: 0,
|
outerRadius: '109%'
|
}, {
|
backgroundColor: {
|
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
stops: [
|
[0, '#333'],
|
[1, '#FFF']
|
]
|
},
|
borderWidth: 1,
|
outerRadius: '107%'
|
}, {
|
// default background
|
}, {
|
backgroundColor: '#DDD',
|
borderWidth: 0,
|
outerRadius: '105%',
|
innerRadius: '103%'
|
}]
|
},
|
yAxis: {
|
min: 0,
|
max: 100,
|
|
minorTickInterval: 'auto',
|
minorTickWidth: 1,
|
minorTickLength: 10,
|
minorTickPosition: 'inside',
|
minorTickColor: '#666',
|
|
tickPixelInterval: 30,
|
tickWidth: 2,
|
tickPosition: 'inside',
|
tickLength: 10,
|
tickColor: '#666',
|
labels: {
|
step: 5,
|
rotation: 'auto'
|
},
|
title: {
|
text: ''
|
},
|
plotBands: [{
|
from: 0,
|
to: 40,
|
color: '#55BF3B' // green
|
}, {
|
from: 40,
|
to: 70,
|
color: '#DDDF0D' // yellow
|
}, {
|
from: 70,
|
to: 100,
|
color: '#DF5353' // red
|
}]
|
},
|
series: [{
|
name: '分数',
|
data: [0],
|
tooltip: {
|
valueSuffix: ' 分'
|
}
|
}]
|
|
},function(chart){
|
var y=data.y;
|
chart.series[0].data[0].update(y);
|
});
|
}
|
|
</script>
|
</head>
|
|
<body class="fullscreen">
|
<div class="monitor_report clearfix">
|
<div class="monitoring">
|
<table class="monitor_flow" style="margin-top: 0px;">
|
<tr>
|
<td class="monitor_sysinfocon">
|
<div class="edit_title">
|
<h3>全年满意度走势</h3>
|
</div>
|
</td>
|
</tr>
|
</table>
|
<div id="num_container" style="height: 400px;"></div>
|
</div>
|
|
<div class="monitoring">
|
<table class="monitor_flow" style="margin-top: 0px;">
|
<tr>
|
<td class="monitor_sysinfocon">
|
<div class="edit_title">
|
<h3>满意度评分同比统计</h3>
|
</div>
|
<div id="mom_container" style="height: 400px;"></div>
|
</td>
|
<td>
|
<div class="edit_title">
|
<h3>满意度调查覆盖率</h3>
|
</div>
|
<div id="conver_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
|
<div class="monitor_report clearfix">
|
<div class="edit_title">
|
<h3>满意度评分</h3>
|
</div>
|
<div class="monitor_flowreport" style="height:400px;">
|
<div class="monitor_serabnorinfostat" id="satis_container" style="width:40%; min-height: 350px; float:left"></div>
|
<table class="reportTable" style="width:58%;">
|
<tr>
|
<td class="tdbg" rowspan="2">序号</td>
|
<td class="tdbg" colspan="2" rowspan="2" align="center">服务类型</td>
|
<td class="tdbg" colspan="4" align="center">调查覆盖率(%)</td>
|
<td class="tdbg" colspan="3" align="center">分项得分</td>
|
</tr>
|
<tr>
|
<td class="tdbg" align="center">服务次数</td>
|
<td class="tdbg" align="center">调查次数</td>
|
<td class="tdbg" align="center">要求覆盖率(%)</td>
|
<td class="tdbg" align="center">实际覆盖率(%)</td>
|
<td class="tdbg" align="center">得分权重(%)</td>
|
<td class="tdbg" align="center">要求得分</td>
|
<td class="tdbg" align="center">实际得分</td>
|
</tr>
|
|
[#assign yfcount = 0 ]
|
[#if satisList ?? && satisList?size > 0]
|
[#list satisList as satis]
|
<tr>
|
<td align="center">${satis_index+1+yfcount}</td>
|
<td colspan="2" [#if satis.YF_BUS_TYPE??]align="right"[#else]align="center"[/#if]>${satis.SATIS_TYPE_TEXT}</td>
|
<td align="center">${satis.ALL_COUNT}</td>
|
<td align="center">${satis.SATIS_COUNT}</td>
|
<td align="center">${satis.REQUEST_FG_RATE}</td>
|
<td align="center">${satis.FG_RATE}</td>
|
<td align="center">${satis.SATIS_QZ}</td>
|
<td align="center">${satis.REQUEST_SATIS_SCORE}</td>
|
<td align="center">${satis.SATIS_SCORE}</td>
|
</tr>
|
[/#list]
|
[#else]
|
<tr><td colspan="10">暂无数据</td></tr>
|
[/#if]
|
|
</table>
|
</div>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
