<!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 = 'quarter';
|
$(function() {
|
initMonChart();
|
initTypeChart();
|
initSourceChart();
|
initCloseChart();
|
initFinishChart();
|
initLvChart();
|
});
|
|
//无数据显示
|
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 initMonChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentMomChart.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: 40
|
}
|
},
|
series: data.series
|
});
|
}
|
|
|
//初始化类型图表
|
function initTypeChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentTypeChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('type_container')
|
}else{
|
createTypeChart(data);
|
}
|
},'json');
|
}
|
|
function createTypeChart(data){
|
$('#type_container').highcharts({
|
chart: {
|
renderTo: 'container',
|
type: 'pie'
|
},
|
title :{
|
text:''
|
},
|
plotOptions: {
|
pie: {
|
startAngle: -90,
|
endAngle:90,
|
center: ['50%', '70%']
|
}
|
},
|
tooltip: {
|
valueSuffix:' ({point.percentage:.1f}%)'
|
},
|
series: [{
|
name:'数量',
|
data: data.seriesData
|
}]
|
});
|
}
|
|
//初始化来源图表
|
function initSourceChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentSourceChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('source_container')
|
}else{
|
createSourceChart(data);
|
}
|
|
},'json');
|
}
|
|
function createSourceChart(data){
|
$('#source_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 initCloseChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentCloseChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('close_container')
|
}else{
|
createCloseChart(data);
|
}
|
},'json');
|
}
|
|
function createCloseChart(data){
|
$('#close_container').highcharts({
|
chart: {
|
type: 'bar',
|
height:400
|
},
|
title: {
|
text: ''
|
},
|
xAxis: {
|
labels: {
|
enabled: false
|
},
|
categories: data.categories
|
},
|
tooltip: {
|
formatter: function() {
|
return '<b>'+ this.x +'</b><br>'+this.series.name +': '+ this.y ;
|
}
|
},
|
series: data.series
|
});
|
}
|
|
//初始化达成率图表
|
function initFinishChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentFinishRateChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('finish_container')
|
}else{
|
createFinishChart(data);
|
}
|
},'json');
|
}
|
|
function createFinishChart(data){
|
$('#finish_container').highcharts({
|
chart: {
|
height:350,
|
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 initLvChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/workReport/getIncidentLvChart.html",param,function(data){
|
if(data.nodata){
|
showNoData('lv_container')
|
}else{
|
createLvChart(data);
|
}
|
},'json');
|
}
|
|
function createLvChart(data){
|
$('#lv_container').highcharts({
|
chart: {
|
type: 'pie',
|
options3d: {
|
enabled: true,
|
alpha: 45
|
},
|
height:380
|
},
|
title: {
|
text: ''
|
},
|
plotOptions: {
|
pie: {
|
innerSize: 100,
|
depth: 45
|
}
|
},
|
tooltip: {
|
valueSuffix:' ({point.percentage:.1f}%)'
|
},
|
series: [{
|
name: '数量',
|
data: data.seriesData
|
}]
|
});
|
}
|
</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>
|
<div class="dbserver_sga" id="mom_container" style="height: 400px;"></div>
|
</td>
|
<td>
|
<div class="edit_title">
|
<h3>事件类型</h3>
|
</div>
|
<div class="dbserver_sga" id="type_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</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 class="dbserver_sga" id="source_container" style="height: 400px;"></div>
|
</td>
|
<td>
|
<div class="edit_title">
|
<h3>事件关闭方式</h3>
|
</div>
|
<div class="dbserver_sga" id="close_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</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 class="dbserver_sga" id="finish_container" style="height: 400px;"></div>
|
</td>
|
<td>
|
<div class="edit_title">
|
<h3>事件服务级别</h3>
|
</div>
|
<div class="dbserver_sga" id="lv_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
|
|
<div class="monitoring">
|
<table class="monitor_flow" style="margin-top: 0px;">
|
<tr>
|
<td >
|
<div class="edit_title">
|
<h3>事件处理情况统计</h3>
|
</div>
|
</td>
|
</tr>
|
</table>
|
<br/>
|
<div>
|
<table border="0" class="reportTable tablew" id="reportTable" style="width:98%;">
|
[#if report.lebalList??&&report.lebalList?size>0]
|
<tr>
|
[#list report.lebalList as item]
|
[#if item_index==0]
|
<td style="width: 6%" class="tdbg">${item}</td>
|
[#else]
|
<td style="width: 6%" class="tdbg">${item}</td>
|
[/#if]
|
[/#list]
|
</tr>
|
[/#if]
|
|
[#if report.dataList??&&report.dataList?size>0]
|
[#list report.dataList as dataList]
|
<tr>
|
[#list dataList as item]
|
<td>${item}</td>
|
[/#list]
|
</tr>
|
[/#list]
|
[#else]
|
<tr>
|
<td colspan="${report.lebalList?size}">暂无数据</td>
|
</tr>
|
[/#if]
|
</table>
|
</div>
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
