610 lines
14 KiB
HTML
610 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
#include("/common/header.html")
|
||
<script src="/js/highcharts/highcharts.js"></script>
|
||
<script src="/js/highcharts/exporting.js"></script>
|
||
<script src="/js/highcharts/series-label.js"></script>
|
||
<script src="/js/highcharts/oldie.js"></script>
|
||
<script src="/js/highcharts/dark-unica.js"></script>
|
||
<style type="text/css">
|
||
.echart {
|
||
max-width: 850px;
|
||
height: 280px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.tspan {
|
||
text-transform: none;
|
||
}
|
||
</style>
|
||
<script>
|
||
$(document).ready(function() {
|
||
var equipmentName = "#(equipmentName)";
|
||
if (equipmentName == 'ASEM-T102') {
|
||
$("#front").attr("src", "/img/route/ASEM-T102-FRONT.png");
|
||
$("#back").attr("src", "/img/route/ASEM-T102-BACK.png");
|
||
} else {
|
||
$("#front").attr("src", "/img/route/ADC-A016-FRONT.png");
|
||
$("#back").attr("src", "/img/route/ADC-A016-BACK.png");
|
||
}
|
||
|
||
rateCharts();
|
||
});
|
||
|
||
//<2F><><EFBFBD>ݹ<EFBFBD><DDB9>˷<EFBFBD><CBB7><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
|
||
function roteArray(detectInfo, sign, routeDate) {
|
||
var ipdate = [];
|
||
if (detectInfo != null && detectInfo != '') {
|
||
var info = eval(detectInfo);
|
||
if (info.length > 0) {
|
||
for (var i = 0; i < info.length; i++) {
|
||
if ('cpu' == sign) {
|
||
ipdate.push(detectInfo[i].TOTAL_USED_PERC);
|
||
} else if ('memory' == sign) {
|
||
ipdate.push(detectInfo[i].USED_MEMORY_PERC);
|
||
} else if ('disk' == sign) {
|
||
ipdate.push(detectInfo[i].USED_DISK_PERC);
|
||
} else if ('rx' == sign) {
|
||
ipdate.push(detectInfo[i].RX_PPS);
|
||
} else if ('tx' == sign) {
|
||
ipdate.push(detectInfo[i].TX_PPS);
|
||
}
|
||
routeDate.push(detectInfo[i].DATA_CHECK_TIME)
|
||
}
|
||
}
|
||
}
|
||
return ipdate;
|
||
}
|
||
|
||
function roteArray2(detectInfo, sign) {
|
||
var ipdate = [];
|
||
if (detectInfo != null && detectInfo != '') {
|
||
var info = eval(detectInfo);
|
||
if (info.length > 0) {
|
||
for (var i = 0; i < info.length; i++) {
|
||
var child = [];
|
||
child.push(detectInfo[i].DATA_CHECK_TIME_DIGITAL);
|
||
if ('cpu' == sign) {
|
||
child.push(parseFloat(detectInfo[i].TOTAL_USED_PERC));
|
||
} else if ('memory' == sign) {
|
||
child.push(parseFloat(detectInfo[i].USED_MEMORY_PERC));
|
||
} else if ('disk' == sign) {
|
||
child.push(parseFloat(detectInfo[i].USED_DISK_PERC));
|
||
} else if ('rx' == sign) {
|
||
child.push(parseFloat(detectInfo[i].RX_PPS));
|
||
} else if ('tx' == sign) {
|
||
child.push(parseFloat(detectInfo[i].TX_PPS));
|
||
}
|
||
ipdate.push(child);
|
||
}
|
||
}
|
||
}
|
||
return ipdate;
|
||
}
|
||
|
||
setInterval(rateCharts, 1000 * 10);
|
||
|
||
function rateCharts() {
|
||
$.getJSON('/welcome/rateCharts',
|
||
function(res) {
|
||
var routeip = [];
|
||
var routeTime = [];
|
||
|
||
var memrouteip = [];
|
||
var memTime = [];
|
||
|
||
var diskrouteip = [];
|
||
var diskTime = [];
|
||
|
||
var netrouteip = [];
|
||
var netTime = [];
|
||
if (res != null && res != '') {
|
||
for (var i = 0; i < res.length; i++) {
|
||
|
||
var ip = {};
|
||
ip.name = res[i].name;
|
||
//ip.data = roteArray(res[i].detectInfoCpu, 'cpu',routeTime);
|
||
ip.data = roteArray2(res[i].detectInfoCpu, 'cpu');
|
||
routeip.push(ip);
|
||
|
||
var memip = {};
|
||
memip.name = res[i].name;
|
||
//memip.data = roteArray(res[i].detectInfoMemory,'memory', memTime);
|
||
memip.data = roteArray2(res[i].detectInfoMemory,'memory');
|
||
memrouteip.push(memip);
|
||
|
||
var diskip = {};
|
||
diskip.name = res[i].name;
|
||
//diskip.data = roteArray(res[i].detectInfoDisk,'disk', diskTime);
|
||
diskip.data = roteArray2(res[i].detectInfoDisk,'disk');
|
||
diskrouteip.push(diskip);
|
||
|
||
var netrxip = {};
|
||
var nettxip = {};
|
||
netrxip.name = res[i].name + '_TX_PPS';
|
||
nettxip.name = res[i].name + '_RX_PPS';
|
||
//netrxip.data = roteArray(res[i].detectInfoNetdata,'rx', netTime);
|
||
netrxip.data = roteArray2(res[i].detectInfoNetdata,'rx');
|
||
//nettxip.data = roteArray(res[i].detectInfoNetdata,'tx', netTime);
|
||
nettxip.data = roteArray2(res[i].detectInfoNetdata,'tx');
|
||
netrouteip.push(netrxip);
|
||
netrouteip.push(nettxip);
|
||
}
|
||
}
|
||
Highcharts.setOptions( {
|
||
global : {
|
||
useUTC : false
|
||
}
|
||
});
|
||
chart = Highcharts.chart('container', {
|
||
title : {
|
||
text : '#(_res.get("cpuuser.usage"))'
|
||
},
|
||
|
||
yAxis : {
|
||
title : {
|
||
text : '#(_res.get("cpuuser"))'
|
||
}
|
||
},
|
||
xAxis : {
|
||
type:"datetime",
|
||
labels : {
|
||
rotation : 20
|
||
},
|
||
dateTimeLabelFormats: {
|
||
second: '%Y-%m-%d %H:%M:%S',
|
||
minute: '%Y-%m-%d %H:%M',
|
||
hour: '%Y-%m-%d %H:%M',
|
||
day: '%Y-%m-%d',
|
||
week: '%Y-%m-%d',
|
||
month: '%Y-%m',
|
||
year: '%Y'
|
||
}
|
||
},
|
||
exporting : {
|
||
enabled : false
|
||
},
|
||
credits : {
|
||
enabled : false
|
||
},
|
||
legend : {
|
||
layout : 'vertical',
|
||
align : 'right',
|
||
verticalAlign : 'middle'
|
||
},
|
||
plotOptions : {
|
||
line:{
|
||
lineWidth : 1,
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
}
|
||
}
|
||
},
|
||
area : {
|
||
fillOpacity: 0.08,
|
||
lineWidth : 1,
|
||
shadow : true,
|
||
marker: {
|
||
radius: 3,
|
||
states: {
|
||
hover: {
|
||
radius: 5
|
||
}
|
||
}
|
||
}
|
||
},
|
||
column: {
|
||
grouping: false,
|
||
shadow: false,
|
||
pointPlacement: 'between',
|
||
groupPadding: 0,
|
||
pointPadding: 0,
|
||
borderWidth: 0
|
||
},
|
||
scatter:{
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
},
|
||
symbol: 'circle'
|
||
}
|
||
}
|
||
},
|
||
tooltip : {
|
||
formatter : function() {
|
||
var s = Highcharts.dateFormat("%Y-%m-%d %H:%M",
|
||
this.x) + ' [';
|
||
s += '<span>'
|
||
+ this.point.series.name
|
||
+ ': </span><span style="color:red">'
|
||
+ this.point.y + '% </span> ';
|
||
s = $.trim(s) + "]";
|
||
return s;
|
||
}
|
||
},
|
||
series : routeip,
|
||
responsive : {
|
||
rules : [ {
|
||
condition : {
|
||
maxWidth : 500
|
||
},
|
||
chartOptions : {
|
||
legend : {
|
||
layout : 'horizontal',
|
||
align : 'center',
|
||
verticalAlign : 'bottom'
|
||
}
|
||
}
|
||
} ]
|
||
}
|
||
})
|
||
|
||
bchart = Highcharts.chart('memory', {
|
||
title : {
|
||
text : '#(_res.get("memory.usage"))'
|
||
},
|
||
|
||
yAxis : {
|
||
title : {
|
||
text : '#(_res.get("memory"))'
|
||
}
|
||
},
|
||
xAxis : {
|
||
type:"datetime",
|
||
labels : {
|
||
rotation : 20
|
||
},
|
||
dateTimeLabelFormats: {
|
||
second: '%Y-%m-%d %H:%M:%S',
|
||
minute: '%Y-%m-%d %H:%M',
|
||
hour: '%Y-%m-%d %H:%M',
|
||
day: '%Y-%m-%d',
|
||
week: '%Y-%m-%d',
|
||
month: '%Y-%m',
|
||
year: '%Y'
|
||
}
|
||
},
|
||
exporting : {
|
||
enabled : false
|
||
},
|
||
credits : {
|
||
enabled : false
|
||
},
|
||
legend : {
|
||
layout : 'vertical',
|
||
align : 'right',
|
||
verticalAlign : 'middle'
|
||
},
|
||
plotOptions : {
|
||
line:{
|
||
lineWidth : 1,
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
}
|
||
}
|
||
},
|
||
area : {
|
||
fillOpacity: 0.08,
|
||
lineWidth : 1,
|
||
shadow : true,
|
||
marker: {
|
||
radius: 3,
|
||
states: {
|
||
hover: {
|
||
radius: 5
|
||
}
|
||
}
|
||
}
|
||
},
|
||
column: {
|
||
grouping: false,
|
||
shadow: false,
|
||
pointPlacement: 'between',
|
||
groupPadding: 0,
|
||
pointPadding: 0,
|
||
borderWidth: 0
|
||
},
|
||
scatter:{
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
},
|
||
symbol: 'circle'
|
||
}
|
||
}
|
||
},
|
||
tooltip : {
|
||
formatter : function() {
|
||
var s = Highcharts.dateFormat("%Y-%m-%d %H:%M",
|
||
this.x) + ' [';
|
||
s += '<span>'
|
||
+ this.point.series.name
|
||
+ ': </span><span style="color:red">'
|
||
+ this.point.y + '% </span> ';
|
||
s = $.trim(s) + "]";
|
||
return s;
|
||
}
|
||
},
|
||
series : memrouteip,
|
||
responsive : {
|
||
rules : [ {
|
||
condition : {
|
||
maxWidth : 500
|
||
},
|
||
chartOptions : {
|
||
legend : {
|
||
layout : 'horizontal',
|
||
align : 'center',
|
||
verticalAlign : 'bottom'
|
||
}
|
||
}
|
||
} ]
|
||
}
|
||
})
|
||
|
||
cchart = Highcharts.chart('disk', {
|
||
title : {
|
||
text : '#(_res.get("disk.usage"))'
|
||
},
|
||
|
||
yAxis : {
|
||
title : {
|
||
text : '#(_res.get("disk"))'
|
||
}
|
||
},
|
||
xAxis : {
|
||
type:"datetime",
|
||
labels : {
|
||
rotation : 20
|
||
},
|
||
dateTimeLabelFormats: {
|
||
second: '%Y-%m-%d %H:%M:%S',
|
||
minute: '%Y-%m-%d %H:%M',
|
||
hour: '%Y-%m-%d %H:%M',
|
||
day: '%Y-%m-%d',
|
||
week: '%Y-%m-%d',
|
||
month: '%Y-%m',
|
||
year: '%Y'
|
||
}
|
||
},
|
||
exporting : {
|
||
enabled : false
|
||
},
|
||
credits : {
|
||
enabled : false
|
||
},
|
||
legend : {
|
||
layout : 'vertical',
|
||
align : 'right',
|
||
verticalAlign : 'middle'
|
||
},
|
||
plotOptions : {
|
||
line:{
|
||
lineWidth : 1,
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
}
|
||
}
|
||
},
|
||
area : {
|
||
fillOpacity: 0.08,
|
||
lineWidth : 1,
|
||
shadow : true,
|
||
marker: {
|
||
radius: 3,
|
||
states: {
|
||
hover: {
|
||
radius: 5
|
||
}
|
||
}
|
||
}
|
||
},
|
||
column: {
|
||
grouping: false,
|
||
shadow: false,
|
||
pointPlacement: 'between',
|
||
groupPadding: 0,
|
||
pointPadding: 0,
|
||
borderWidth: 0
|
||
},
|
||
scatter:{
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
},
|
||
symbol: 'circle'
|
||
}
|
||
}
|
||
},
|
||
tooltip : {
|
||
formatter : function() {
|
||
var s = Highcharts.dateFormat("%Y-%m-%d %H:%M",
|
||
this.x) + ' [';
|
||
s += '<span>'
|
||
+ this.point.series.name
|
||
+ ': </span><span style="color:red">'
|
||
+ this.point.y + '% </span> ';
|
||
s = $.trim(s) + "]";
|
||
return s;
|
||
}
|
||
},
|
||
series : diskrouteip,
|
||
responsive : {
|
||
rules : [ {
|
||
condition : {
|
||
maxWidth : 500
|
||
},
|
||
chartOptions : {
|
||
legend : {
|
||
layout : 'horizontal',
|
||
align : 'center',
|
||
verticalAlign : 'bottom'
|
||
}
|
||
}
|
||
} ]
|
||
}
|
||
})
|
||
|
||
dchart = Highcharts.chart('netdata', {
|
||
title : {
|
||
text : '#(_res.get("netdata.usage"))'
|
||
},
|
||
|
||
yAxis : {
|
||
title : {
|
||
text : '#(_res.get("netdata"))'
|
||
}
|
||
},
|
||
xAxis : {
|
||
type:"datetime",
|
||
labels : {
|
||
rotation : 20
|
||
},
|
||
dateTimeLabelFormats: {
|
||
second: '%Y-%m-%d %H:%M:%S',
|
||
minute: '%Y-%m-%d %H:%M',
|
||
hour: '%Y-%m-%d %H:%M',
|
||
day: '%Y-%m-%d',
|
||
week: '%Y-%m-%d',
|
||
month: '%Y-%m',
|
||
year: '%Y'
|
||
}
|
||
},
|
||
tooltip : {
|
||
formatter : function() {
|
||
var s = Highcharts.dateFormat("%Y-%m-%d %H:%M",
|
||
this.x) + ' [';
|
||
s += '<span>'
|
||
+ this.point.series.name
|
||
+ ': </span><span style="color:red">'
|
||
+ this.point.y + ' </span> ';
|
||
s = $.trim(s) + "]";
|
||
return s;
|
||
}
|
||
},
|
||
exporting : {
|
||
enabled : false
|
||
},
|
||
credits : {
|
||
enabled : false
|
||
},
|
||
legend : {
|
||
layout : 'vertical',
|
||
align : 'right',
|
||
verticalAlign : 'middle'
|
||
},
|
||
plotOptions : {
|
||
line:{
|
||
lineWidth : 1,
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
}
|
||
}
|
||
},
|
||
area : {
|
||
fillOpacity: 0.08,
|
||
lineWidth : 1,
|
||
shadow : true,
|
||
marker: {
|
||
radius: 3,
|
||
states: {
|
||
hover: {
|
||
radius: 5
|
||
}
|
||
}
|
||
}
|
||
},
|
||
column: {
|
||
grouping: false,
|
||
shadow: false,
|
||
pointPlacement: 'between',
|
||
groupPadding: 0,
|
||
pointPadding: 0,
|
||
borderWidth: 0
|
||
},
|
||
scatter:{
|
||
marker: {
|
||
radius: 2,
|
||
states: {
|
||
hover: {
|
||
radius: 3
|
||
}
|
||
},
|
||
symbol: 'circle'
|
||
}
|
||
}
|
||
},
|
||
series : netrouteip,
|
||
responsive : {
|
||
rules : [ {
|
||
condition : {
|
||
maxWidth : 500
|
||
},
|
||
chartOptions : {
|
||
legend : {
|
||
layout : 'horizontal',
|
||
align : 'center',
|
||
verticalAlign : 'bottom'
|
||
}
|
||
}
|
||
} ]
|
||
}
|
||
})
|
||
|
||
})
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="bcColor noScroll-y aC">
|
||
<div class="container-fluid">
|
||
<div class="row-fluid">
|
||
<div class="span12" align="center">
|
||
<img id="front" style="width: 35%; height: 130px; margin-top: 10px;">
|
||
<img id="back" style="width: 35%; height: 130px; margin-top: 10px;">
|
||
</div>
|
||
</div>
|
||
<div class="row-fluid">
|
||
<div class="span6">
|
||
<div id="container" class="echart"></div>
|
||
</div>
|
||
<div class="span6">
|
||
<div id="memory" class="echart"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row-fluid">
|
||
<div class="span6">
|
||
<div id="disk" class="echart"></div>
|
||
</div>
|
||
<div class="span6">
|
||
<div id="netdata" class="echart"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |