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>
|