249 lines
8.2 KiB
Plaintext
249 lines
8.2 KiB
Plaintext
|
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="/jstl/c" prefix="c"%>
|
|||
|
|
<%@ taglib uri="/jstl/fn" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%
|
|||
|
|
String path = request.getContextPath();
|
|||
|
|
String basePath = request.getScheme() + "://"
|
|||
|
|
+ request.getServerName() + ":" + request.getServerPort()
|
|||
|
|
+ path + "/";
|
|||
|
|
request.setAttribute("vEnter","\n");
|
|||
|
|
%>
|
|||
|
|
|
|||
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>NTC</title>
|
|||
|
|
<link href="<c:url value='/css/nms.css'/>" rel="stylesheet" type="text/css" />
|
|||
|
|
<script language="javascript" type="text/javascript" src="<c:url value='/js/jquery1.11.3.js'/>"></script>
|
|||
|
|
<script language="javascript" type="text/javascript" src="<c:url value='/js/echarts.min.js'/>"></script>
|
|||
|
|
</head>
|
|||
|
|
<style>
|
|||
|
|
.section{
|
|||
|
|
margin: 30px 10px 30px 10px;
|
|||
|
|
float: left;
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
.part{
|
|||
|
|
height: 400px;
|
|||
|
|
width: 50%;
|
|||
|
|
float: left;
|
|||
|
|
min-width: 600px;
|
|||
|
|
margin-top: 60px;
|
|||
|
|
}
|
|||
|
|
#template{
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.addr{
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight:bold;
|
|||
|
|
padding: 5px;
|
|||
|
|
height: 50px;
|
|||
|
|
line-height: 50px;
|
|||
|
|
}
|
|||
|
|
.pic{
|
|||
|
|
float: left;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script language="javascript" type="text/javascript">
|
|||
|
|
var systemId = "${systemLogin}";//从session 中取出 systemId
|
|||
|
|
var refreshInterval = 30000;//定时数据间隔，单位：ms
|
|||
|
|
//数据源
|
|||
|
|
var influxdbSource = {
|
|||
|
|
"100000":{
|
|||
|
|
addr:"Astana",
|
|||
|
|
url:'http://10.0.5.19:8086/query'
|
|||
|
|
},
|
|||
|
|
"100001":{
|
|||
|
|
addr:"Almaty",
|
|||
|
|
url:"http://10.0.5.15:8086/query"
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
//配置查询相关信息
|
|||
|
|
var queryInfo = {
|
|||
|
|
traffic : {
|
|||
|
|
title:'Throughputs (Gigabits per second)',
|
|||
|
|
//yAxisName:'packet/s',
|
|||
|
|
data: {
|
|||
|
|
legend:['Ether','TCP','UDP','IPv4','IPv6'],
|
|||
|
|
db:'ntc_stat',
|
|||
|
|
q:'SELECT sum("value_sum") /(1024*1024*1024)/30 FROM "[sapp]Ethernet_bps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /(1024*1024*1024)/30 FROM "[sapp]TCP_bps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /(1024*1024*1024)/30 FROM "[sapp]UDP_bps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /(1024*1024*1024)/30 FROM "[sapp]IPv4_bps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /(1024*1024*1024)/30 FROM "[sapp]IPv6_bps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value") /(1024*1024*1024)/30 FROM "[sapp]Unknown" WHERE time >= now() - 6h GROUP BY time(30s) fill(null)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
packet :{
|
|||
|
|
title:'Throughputs (Packets per second)',
|
|||
|
|
//yAxisName:'conn/s',
|
|||
|
|
data:{
|
|||
|
|
legend:['TCP','UDP','Ether','IPv4','IPv6'],
|
|||
|
|
db:'ntc_stat',
|
|||
|
|
q:'SELECT sum("value_sum") /30 FROM "[sapp]TCP_pps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /30 FROM "[sapp]UDP_pps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /30 FROM "[sapp]Ethernet_pps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /30 FROM "[sapp]IPv4_pps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null);SELECT sum("value_sum") /30 FROM "[sapp]IPv6_pps" WHERE time >= now() - 6h GROUP BY time(30s) fill(null)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function renderChart(systemId){
|
|||
|
|
var influxdb = influxdbSource[systemId];
|
|||
|
|
var addr = influxdb.addr;
|
|||
|
|
var $templateClone = $("#template").clone();
|
|||
|
|
$templateClone.attr("id",systemId);
|
|||
|
|
$templateClone.find(".addr").html(addr);
|
|||
|
|
$("#container").append($templateClone);
|
|||
|
|
$.each(queryInfo,function(key,info){
|
|||
|
|
var $part = $templateClone.find("."+key);
|
|||
|
|
var title = info.title;
|
|||
|
|
var data = info.data;
|
|||
|
|
var yAxisName = info.yAxisName;
|
|||
|
|
var legengData = data.legend;
|
|||
|
|
var series = [];
|
|||
|
|
$.each(legengData,function(i,n){
|
|||
|
|
series.push({
|
|||
|
|
name: n,
|
|||
|
|
symbol:"none",
|
|||
|
|
type: 'line',
|
|||
|
|
data: []
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
var Chart=echarts.init($part[0]);//初始化
|
|||
|
|
Chart.showLoading({text : "loading..."});
|
|||
|
|
var option = {
|
|||
|
|
title: {
|
|||
|
|
text: title ,
|
|||
|
|
left:"center"
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function(params){
|
|||
|
|
var dateTime ;
|
|||
|
|
var result = "";
|
|||
|
|
$.each(params,function(i,n){
|
|||
|
|
console.log(n);
|
|||
|
|
if(!dateTime){
|
|||
|
|
dateTime = (new Date(n.value[0])).Format("yyyy-MM-dd hh:mm:ss");//n.value[0];
|
|||
|
|
}
|
|||
|
|
result += "<br/>" +n.marker + n.seriesName +": " + (n.value[1]?n.value[1].toFixed(0):"");
|
|||
|
|
});
|
|||
|
|
return dateTime + result;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data:legengData,
|
|||
|
|
left:20,
|
|||
|
|
bottom:5
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'time',
|
|||
|
|
timeFormat: 'hh:mm',
|
|||
|
|
splitNumber:6
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
name:yAxisName,
|
|||
|
|
nameLocation:"middle",
|
|||
|
|
nameTextStyle:{
|
|||
|
|
padding:30
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: series
|
|||
|
|
};
|
|||
|
|
Chart.setOption(option);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//刷新数据
|
|||
|
|
function refreshData(){
|
|||
|
|
$("#container > .section").each(function(i,n){
|
|||
|
|
var $section = $(this);
|
|||
|
|
var systemId = $section.attr("id");
|
|||
|
|
var influxdb = influxdbSource[systemId];
|
|||
|
|
$.each(queryInfo,function(key,info){
|
|||
|
|
var $part = $section.find("."+key);
|
|||
|
|
var title = info.title;
|
|||
|
|
var data = info.data;
|
|||
|
|
var legengData = data.legend;
|
|||
|
|
$.ajax({//ajax请求获取数据
|
|||
|
|
type : "POST",
|
|||
|
|
url : influxdb.url,
|
|||
|
|
data:{
|
|||
|
|
db:data.db,//查询的数据库名
|
|||
|
|
q:data.q //查询语句
|
|||
|
|
},
|
|||
|
|
dataType : "json",
|
|||
|
|
success : function(data) {
|
|||
|
|
var results = data.results;//返回的result为json格式的数据
|
|||
|
|
var series = [];
|
|||
|
|
$.each(results, function(index, result) {
|
|||
|
|
var s = result["series"];
|
|||
|
|
var values = s ? s[0].values : [];
|
|||
|
|
series.push({
|
|||
|
|
name: legengData[index],
|
|||
|
|
type: 'line',
|
|||
|
|
data: values
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
var Chart=echarts.getInstanceByDom($part[0]);//获取echarts实例
|
|||
|
|
Chart.showLoading({text : "loading..."});
|
|||
|
|
var option = { series: series };
|
|||
|
|
Chart.setOption(option);
|
|||
|
|
Chart.hideLoading();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function(){
|
|||
|
|
if(systemId == '-1'){//显示所有地区的图表
|
|||
|
|
$.each(influxdbSource,function(key,value){
|
|||
|
|
renderChart(key);
|
|||
|
|
});
|
|||
|
|
}else{//只显示当前登录的图表
|
|||
|
|
renderChart(systemId);
|
|||
|
|
}
|
|||
|
|
//首次加载数据
|
|||
|
|
refreshData();
|
|||
|
|
//定时刷新功能
|
|||
|
|
setInterval(function(){
|
|||
|
|
refreshData();
|
|||
|
|
}, refreshInterval);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 对Date的扩展，将 Date 转化为指定格式的String
|
|||
|
|
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
|
|||
|
|
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
|
|||
|
|
// 例子：
|
|||
|
|
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
|
|||
|
|
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
|
|||
|
|
Date.prototype.Format = function(fmt) { //author: meizz
|
|||
|
|
var o = {
|
|||
|
|
"M+" : this.getMonth()+1, //月份
|
|||
|
|
"d+" : this.getDate(), //日
|
|||
|
|
"h+" : this.getHours(), //小时
|
|||
|
|
"m+" : this.getMinutes(), //分
|
|||
|
|
"s+" : this.getSeconds(), //秒
|
|||
|
|
"q+" : Math.floor((this.getMonth()+3)/3), //季度
|
|||
|
|
"S" : this.getMilliseconds() //毫秒
|
|||
|
|
};
|
|||
|
|
if(/(y+)/.test(fmt))
|
|||
|
|
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
|
|||
|
|
for(var k in o)
|
|||
|
|
if(new RegExp("("+ k +")").test(fmt))
|
|||
|
|
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
|
|||
|
|
return fmt;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<body>
|
|||
|
|
<div id="container" class="container"></div>
|
|||
|
|
<div id="template" class="section" >
|
|||
|
|
<div class="addr"></div>
|
|||
|
|
<div class="pic">
|
|||
|
|
<div class="part traffic"></div>
|
|||
|
|
<div class="part packet"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|