<!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 = 'week';
|
$(function() {
|
initSplineStyle();
|
initOrderChart();
|
initIncidentStateChart();
|
initIncidentTypeChart();
|
});
|
|
//无数据显示
|
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 initIncidentTypeChart(){
|
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('incident_type_container')
|
}else{
|
createIncidentTypeChart(data);
|
}
|
},'json');
|
}
|
|
function createIncidentTypeChart(data){
|
$('#incident_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 initOrderChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/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 initIncidentStateChart(){
|
var selDate = '${RequestParameters.selDate}';
|
var cusId = '${RequestParameters.cusId}';
|
var param = {'selDate':selDate,'statisType':statisType,'cusId':cusId};
|
$.post("${base}/uc/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
|
}]
|
});
|
}
|
|
|
|
|
</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>
|
|
|
|
<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="incident_type_container" style="height: 400px;"></div>
|
</td>
|
</tr>
|
</table>
|
</div>
|
</body>
|
|
</html>
|
