<%@page import="org.wdk.module.auth.mount.bean.BaseSessionUser"%>
<%@page import="org.wdk.WDK"%>
<%@page import="org.wdk.module.auth.source.bean.TokenBean"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
BaseSessionUser su = WDK.getSessionUser(request, response);
if(null==su){
su = new BaseSessionUser();
}
String WDK_ROOT = WDKCore.WDK_ROOT;
String RSS_ROOT = WDK_ROOT +"/"+WDKConstant.Theme+"/"+WDKCore.THEME;
String commonURL = "/"+RSS_ROOT+"/module/public/common.jsp";
%>
<!DOCTYPE html>
<%@page import="org.wdk.WDKConstant"%>
<%@page import="org.wdk.WDKCore"%>
<html>
<head>
<base href="<%=basePath%>" target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<jsp:include page='<%=commonURL %>'></jsp:include>
<script type="text/javascript" src="<%=RSS_ROOT%>/core/js/wdk.js"></script>
<title>访问量实时监控</title>
<style type="text/css">
html
{
height: 100%;
overflow: hidden;
}
body
{
background: #000;
color: #C0C0C0;
font-weight: bold;
font-size: 14px;
font-family: Lucida Console;
height: 100%;
margin: 0 0 0 5px;
}
#divContent
{
position:fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
overflow:auto;
white-space: nowrap;
}
#cont
{
height: 100%;
width: 100%;
}
#txtTimeout
{
width: 40px;
}
button
{
margin-left: 10px;
}
</style>
<script type="text/javascript" src="<%=WDK_ROOT%>/core/js/lib/highcharts.3.0.7/highcharts.src.js"></script>
<script type="text/javascript" src="<%=WDK_ROOT%>/core/js/lib/highcharts.3.0.7/highcharts-more.src.js"></script>
<script type="text/javascript" src="<%=WDK_ROOT%>/core/js/lib/highcharts.3.0.7/themes/grid.js"></script>
<script type="text/javascript">
<% if(null==su){%>
$.timeout();
//alert("登录超时，请重新登录!");
//$.getRoot().document.location.href = $.base()+"/console.jsp";
<%}%>
var chart_panel;
var _gridcode = 'wdk.module.monitor.visitgrid';
var _gridid = null;
var _grid_ok = false;
window.onload = function(){
Highcharts.setOptions({
global: {
useUTC: false
}
});
_gridid = $.grid({
containerid:'layout_grid',
gridcode:_gridcode,
//url:'wdk?action=wdk.public&method=monitor_visit_load&ajaxparam='+new Date().getTime(),
fit: true,//自动大小
showContextMenu:false,
onLoadSuccess:function(){_grid_ok = true;}
});
initPanel();
monitor_load();
};
//加载授权信息
function monitor_load(){
$.cuajax({
url:'wdk?action=wdk.public&method=monitor_visit_load&ajaxparam='+new Date().getTime(),
method:"post",
timeout:WDK_Timeout,
data:{},
success:function(result) {
var jres = $.str2json(result);
if("1"==jres.code){
grid_redraw(jres);
panel_redraw(jres);
}
setTimeout('monitor_load()',2000);
},
error:function(result){
alert('网络错误！result='+result);
}
});
}
function grid_redraw(jres){
if(_gridid){
$('#'+_gridid).datagrid('loadData',jres.grid);
}else{
alert('err');
}
}
function panel_redraw(jres){
if(chart_panel){
var x = (new Date()).getTime();
var y0 = parseInt(jres.totalsize);
var y1 = parseInt(jres.wrongrequest);
var y2 = parseInt(jres.avervisit);
chart_panel.series[0].addPoint([x,y0],true,true);
chart_panel.series[1].addPoint([x,y1],true,true);
chart_panel.series[2].addPoint([x,y2],true,true);
chart_panel.redraw();
}
}
function initPanel(){
$('#layout_panel').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 80,
events: {
load: function() {
chart_panel = this;
}
}
},
title: {
text: '对外服务监控'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 100
},
/* yAxis: {
min: 0, //从0开始
allowDecimals:false, //只显示整数
title: {
text: '并发量'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
*/
yAxis: [
{
min: 0, //从0开始
allowDecimals:false, //是否允许显示小数
title: {
text: '每秒请求数',
style: {
color: '#3E576F'
}
}
},
{
min: 0, //从0开始
allowDecimals:true, //是否允许显示小数
title: {
text: '平均响应时间(单位：秒)',
style: {
color: '#00AA00'
}
},
opposite:true
}
],
tooltip: {
formatter: function() {
//return '<b>'+this.series.name+'当前并发数：'+this.y+'</b>';
/* return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);*/
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
},
series: [{
name: '总请求数',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -10; i <= 0; i++) {
data.push({
x: time + i * 5000,
y: 0
});
}
return data;
})()
},{
name: '错误请求数',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -10; i <= 0; i++) {
data.push({
x: time + i * 5000,
y: 0
});
}
return data;
})()
},{
name: '平均响应时间',
yAxis:1,
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -10; i <= 0; i++) {
data.push({
x: time + i * 5000,
y: 0
});
}
return data;
})()
}]
});
}
</script>
</head>
<!--<body style="padding:0px;margin:0px;overflow: auto;" >-->
<!-- <div id="panel4" style="position:fixed;left:50%;top:50%;right:0px;bottom:0px;width:50%;height:50%;background-color:#22332a">444</div>-->
<!--</body>-->
<body class="easyui-layout" data-options="fit:true" style="padding:0px;margin:0px;background-color:#FFFFFF;">
<div id="layout_panel" data-options="region:'center',border:false,collapsed:false" style="overflow:hidden;border:1px solid #ddd;" >
</div>
<div id="layout_grid" data-options="region:'south',border:false,collapsed:false" style="width:100%;height:200px;overflow:hidden;border:1px solid #ddd;text-align:left;" >
</div>
</body>
</html>