<!doctype html>
|
<html class="no-js">
|
<head>
|
<meta charset="utf-8">
|
<title>运维月报</title>
|
[#include "/business/pages/include/static.html" /]
|
<script type="text/javascript">
|
|
var statisType = 'quarter';
|
$(function() {
|
initSplineStyle();
|
initOrderChart();
|
initSatisChart();
|
initIncidentStateChart();
|
initSatisDetailChart();
|
});
|
|
//无数据显示
|
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 initOrderChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getOrderSurveyChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('order_container')
|
}else{
|
createOrderChart(data);
|
}
|
},'json');
|
}
|
|
function createOrderChart(data){
|
$('#order_container').highcharts({
|
chart: {
|
type: 'column',
|
height:400
|
},
|
xAxis: {
|
categories: data.categories
|
},
|
legend: {
|
floating:true,
|
align: 'center',
|
verticalAlign:'top',
|
y:15,
|
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
|
borderColor: '#CCC',
|
borderWidth: 1,
|
shadow: false
|
},
|
tooltip: {
|
formatter: function() {
|
return '<b>'+ this.x +'</b><br>'+this.series.name +': '+ this.y ;
|
}
|
},
|
plotOptions: {
|
column: {
|
stacking: 'normal',
|
dataLabels: {
|
enabled: false,
|
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
|
formatter: function() { //格式化标签名称
|
return this.y;
|
}
|
},
|
pointWidth: 40
|
}
|
},
|
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: 2,
|
rotation: 'auto'
|
},
|
title: {
|
text: ''
|
},
|
plotBands: [{
|
from: 0,
|
to: 40,
|
color: '#DF5353' // green
|
}, {
|
from: 40,
|
to: 60,
|
color: '#DDDF0D' // yellow
|
}, {
|
from: 60,
|
to: 100,
|
color: '#55BF3B' // red
|
}]
|
},
|
series: [{
|
name: '分数',
|
data: [0],
|
tooltip: {
|
valueSuffix: ' 分'
|
}
|
}]
|
|
},function(chart){
|
chart.series[0].data[0].update(data.y);
|
});
|
}
|
|
|
|
//初始化事件状态图表
|
function initIncidentStateChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getIncidentStateChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('incident_container')
|
}else{
|
createIncidentStateChart(data);
|
}
|
},'json');
|
}
|
|
function createIncidentStateChart(data){
|
$('#incident_container').highcharts({
|
chart: {
|
type: 'pie',
|
options3d: {
|
enabled: true,
|
alpha: 45,
|
beta: 0
|
}
|
},
|
title: {
|
text: ''
|
},
|
tooltip: {
|
valueSuffix:' ({point.percentage:.1f}%)'
|
},
|
plotOptions: {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
depth: 35,
|
dataLabels: {
|
enabled: true,
|
formatter: function() {
|
// return this.point.name +'：'+ this.point.y;
|
return this.point.name;
|
}
|
},
|
showInLegend: true
|
}
|
},
|
series: [{
|
type: 'pie',
|
name: '数量',
|
data: data.seriesData,
|
showInLegend:true
|
}]
|
});
|
}
|
|
|
//初始化满意度明细图表
|
function initSatisDetailChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/business/pages/workReport/getSatisDetailChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('satis_detail_container')
|
}else{
|
createSatisDetailChart(data);
|
}
|
|
},'json');
|
}
|
|
function createSatisDetailChart(data){
|
$('#satis_detail_container').highcharts({
|
chart: {
|
type: 'column',
|
height:400
|
},
|
xAxis: {
|
categories: data.categories
|
},
|
tooltip: {
|
formatter: function() {
|
return '<b>'+ this.x +'</b><br>'+this.series.name +': '+ this.y ;
|
}
|
},
|
plotOptions: {
|
column: {
|
pointWidth: 40
|
}
|
},
|
series: data.series
|
});
|
|
|
}
|
|
</script>
|
</head>
|
|
<body class="fullscreen">
|
<div class="monitoring">
|
<div class="edit_title">
|
<h3>工单统计</h3>
|
</div>
|
<table class="monitor_flow" style="margin-top:0px;">
|
<tr>
|
<td style="width:55%;">
|
<div class="dbserver_sga" id="order_container" style="height:400px;"></div>
|
</td>
|
<td style="width:42%;padding-left:10px;">
|
<div class="dbserver_sga" style="height:400px;">
|
<table class="reportTable" style="width:auto;">
|
[#if orderTableMap??]
|
[#if orderTableMap.labelList??&&orderTableMap.labelList?size>0]
|
<tr>
|
[#list orderTableMap.labelList as item]
|
<td class="tdbg" style="width:7%">${item}</td>
|
[/#list]
|
</tr>
|
[/#if]
|
[#if orderTableMap.dataList??&&orderTableMap.dataList?size>0]
|
[#list orderTableMap.dataList as dataList]
|
<tr>
|
[#list dataList as item]
|
<td style="width:7%">${item}</td>
|
[/#list]
|
</tr>
|
[/#list]
|
[#else]
|
<tr>
|
<td colspan="${orderTableMap.labelList?size}">暂无数据</td>
|
</tr>
|
[/#if]
|
|
[/#if]
|
</table>
|
</div>
|
</td>
|
</tr>
|
</table>
|
|
|
|
|
|
<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:35%; min-height: 320px; float:left"></div>
|
<table class="reportTable" style="width:62%;">
|
<tr>
|
<td width="60px" 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>
|
|
<table class="monitor_flow" style="margin-top: 0px;">
|
<tr>
|
<td class="monitor_sysinfocon">
|
<div class="edit_title">
|
<h3>事件状态统计</h3>
|
</div>
|
<div class="dbserver_sga" id="incident_container" style="height: 400px;"></div>
|
</td>
|
<td>
|
<div class="edit_title">
|
<h3>满意度明细统计</h3>
|
</div>
|
<div class="dbserver_sga" id="satis_detail_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</body>
|
|
</html>
|
