jsp
-------------------------------------------------------------------------------------------
-------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<style type="text/css">
hr{margin: 20px 20px;}
#main_monitor{
background-color: #F7F7F7;
}
#head_monitor{
margin:10px auto;
width: 90%;
height: 20%;
background-color: #F9F9D4;
text-align: center;
font-size: 16px;
}
#body_monitor{
margin:5px auto;
width:100%;
height: 80%;
text-align: center;
background-color: #F7F7F7;
}
.unit_monitor{
text-align: center;
margin:10px auto;
padding:10px;
width: 85%;
height:300px;
border: 1px solid #3897C5;
}
</style>
<div id="main_monitor">
<div id="head_monitor" >
<span>服务器类型</span>
<input>
<span>IP地址</span>
<input id="ip">
<span></span>
<input>
</div>
<hr>
<div id="body_monitor">
<div id="cpu_monitor" class="unit_monitor">
</div>
<div id="mem_monitor" class="unit_monitor">
</div>
<div id="disk_monitor" class="unit_monitor">
</div>
<div id="net_monitor" class="unit_monitor">
</div>
</div> <script type="text/javascript" src="<%=request.getContextPath() %>/ptsjs/monitor.js"></script>
</div>
------------------------------------------------------------------------------------
js
-------------------------------------------------------------------------------------------
$(function(){
require.config({
paths: {
echarts: 'js/chart'
}
});
var interval = 10;
var switch_monitor = true;
var first = 1;
var times = 1;
// 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart_cpu = ec.init(document.getElementById('cpu_monitor'));
var myChart_mem = ec.init(document.getElementById('mem_monitor'));
series_cpu = new Array();
series_mem = new Array();
var series_cpu_data={};
var series_mem_data={};
var series_m={};//额外为mem创建一个对象，用来初始化接受ajax请求返回的data中的series
/*series_cpu_data_0 = new Array();
series_mem_data_0 = new Array();
series_cpu_data_1 = new Array();
series_mem_data_1 = new Array();*/
xAxis_data = new Array();
console.log("------------------------------------------------------1---");
ips = {"ip":["10.118.218.50","10.118.218.51","10.118.218.52"]};
console.log("-------------------------------------------------------2--");
/* ips = JSON.parse(ips);
ips = eval("("+ips+")");*/
console.log("-------------------------------------------------------3--");
/*for(var i=0;i<ips.ip.length;i++){
console.log("-------------------------------------------------------4--");
series_cpu_data[i]=new Array();
console.log("-------------------------------------------------------4.1--");
series_mem_data[i]=new Array();
console.log("-------------------------------------------------------4.2--");
}*/
for(var i in ips.ip){
var s = ips.ip[i];
console.log("-------------------------------------------------------4--");
series_cpu_data[s]=new Array();
console.log("-------------------------------------------------------4.1--");
series_mem_data[s]=new Array();
console.log("-------------------------------------------------------4.2--");
series_m[s]={};//用于存储mem_option中的的series结构，避免出现冲突。
}
console.log("-------------------------------------------------------5--"+JSON.stringify(series_cpu_data)+" "+JSON.stringify(series_mem_data));
ips = JSON.stringify(ips);
console.log("-------------------------------------------------------6--");
var cpu_mem_monitor = function(){
console.log("\n---ips: "+ips);
legend_data = new Array();
var req_time=getDate();
$.ajax({
url : "getCpuMemData/"+interval+"/"+times+"/"+req_time,
type : "POST",
contentType : 'application/json;charset=UTF-8',
data : ips,
dataType : 'json',
success:function(resData, status){
if(resData != ""){
console.log("---------------------------------------------------------");
console.log("start...option....."+JSON.stringify(cpu_option));
console.log("\n resData : "+JSON.stringify(resData));
xAxis_data.push(resData.xAxis_data);
//j用来控制多个ip时，分别用来取该ip对应的series.data数据
var j=0;
for(var s in resData.ip){
console.log("s : "+s);
legend_data.push(s);
console.log("series....."+JSON.stringify(resData.ip[s].series)+" times :"+times);
console.log("series_data....."+JSON.stringify(resData.ip[s].series_data));
//分别获取cpu和mem数据
series_cpu_data[s].push(resData.ip[s].series_data.cpu_total);
series_mem_data[s].push(resData.ip[s].series_data.mem_util);
console.log("series_cpu_data["+s+"]....."+series_cpu_data[s]);
console.log("series_mem_data["+s+"]....."+series_mem_data[s]);
//为series_mem赋值
//获取cpu和mem的series结构以及填充该结构的data值
if(times == 1){
console.log("resData.ip[s].series....."+JSON.stringify(resData.ip[s].series));
for(var ss in resData.ip[s].series ){
console.log("resData.ip[s].series+"+ss+" "+resData.ip[s].series[ss]);
}
//mem图标中分别为不同ip，添加对应的series
for(var str in resData.ip[s].series){
series_m[s][str]=resData.ip[s].series[str];
console.log("++++++series_m["+s+"]....."+JSON.stringify(series_m[s]));
}
console.log("series_m....."+JSON.stringify(series_m));
series_cpu.push(resData.ip[s].series);
series_mem.push(series_m[s]);
}
console.log("series_cpu....."+JSON.stringify(series_cpu));
console.log("series_mem....."+JSON.stringify(series_mem));
series_cpu[j].data=series_cpu_data[s];
console.log("series_cpu_data["+j+"]....."+series_cpu_data[s]);
console.log("series_cpu["+j+"]. ....0."+series_cpu[j].data);
console.log("series_cpu....0."+JSON.stringify(series_cpu));
console.log("series_mem....0."+JSON.stringify(series_mem));
series_mem[j].data=series_mem_data[s];
console.log("series_mem_data["+j+"]....."+series_mem_data[s]);
console.log("series_mem["+j+"].data....."+series_mem[j].data);
console.log("series_cpu["+j+"]......1."+series_cpu[j].data);
console.log("series_cpu....1."+JSON.stringify(series_cpu));
console.log("series_mem....1."+JSON.stringify(series_mem));
console.log("****xAxis_data : "+xAxis_data);
console.log("0 legend_data "+legend_data);
console.log("0 xAxis_cpu_data "+xAxis_data);
console.log("0 series_cpu_data "+series_cpu_data[s]);
console.log("0 series_mem_data "+series_mem_data[s]);
console.log("0 series_cpu.data "+series_cpu[j].data);
console.log("0 series_mem.data "+series_mem[j].data);
console.log("series_cpu....."+JSON.stringify(series_cpu));
console.log("series_mem....."+JSON.stringify(series_mem));
j++;
//成功获取数据后，请求次数累加
}
}else{
clearInterval(timer_1);
clearInterval(timer_2);
}
console.log("************************************************************");
console.log("1 legend_data "+legend_data);
console.log("1 series_cpu :"+series_cpu+"\n series_mem "+series_mem);
},
statusCode:{
404:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
},
500:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
},
405:function(){
console.log("laile ");
clearInterval(timer_1);
clearInterval(timer_2);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("----XMLHttpRequest.status------"+XMLHttpRequest.status);
console.log("----XMLHttpRequest.readyState------"+XMLHttpRequest.readyState);
console.log("----textStatus------"+textStatus);
//通常情况下textStatus和errorThrown只有其中一个包含信息
console.log(this); //调用本次ajax请求时传递的options参数
clearInterval(timer_1);
clearInterval(timer_2);
$.messager.alert('警告','获取监控数据失败，请检查网络或者查看该ip是否存于后台数据库');
}
});
//cpu统计
cpu_option = {
title : {
text: 'CPU资源使用监控',
subtext: '性能环境'
},
tooltip: {
show: true
},
legend: {
data:[] //"10.118.218.50"
},
dataZoom: {
show: true
},
xAxis : [
{
name : '时间',
nameLocation : 'end' ,
nameGap : 10,
type : 'category',//category time
data :[]//["10","15","20","25","30","35",'40','45','50','55','60','65','70']
}
],
yAxis : [
{
name : 'CPU 利用率(单位：%)',//
nameLocation : 'end' ,
nameGap :20,
//splitNumber :5,
type : 'value'
}
],
series : [] //[{"name":"10.118.218.50","data":["5","10","5","10","5","10","5","10"],"type":"line"}]
/*series : [
{
"name":"10.118.218.50",
"type":"line",
"data":['5', '20', '40', '10', '10', '20']
},
{
"name":"10.118.218.51",
"type":"line",
"data":['15', '30', '50', '20', '18', '28']
},
{
"name":"10.118.218.52",
"type":"line",
"data":['25', '20', '40', '27', '65', '36']
}
]*/
};
//mem统计
mem_option = {
title : {
text: 'MEM资源使用监控',
subtext: '性能环境'
},
tooltip: {
show: true
},
legend: {
data:[] //"10.118.218.50"
},
dataZoom: {
show: true
},
xAxis : [
{
name : '时间',
nameLocation : 'end' ,
nameGap : 10,
type : 'category',//category time
data :[]//["10","15","20","25","30","35",'40','45','50','55','60','65','70']
}
],
yAxis : [
{
name : 'MEM 利用率(单位：%)',//
nameLocation : 'end' ,
nameGap :20,
//splitNumber :5,
type : 'value'
}
],
series : [] //[{"name":"10.118.218.50","data":["5","10","5","10","5","10","5","10"],"type":"line"}]
};
//检查数据是否获取
timer_2=setInterval(checkData,5000);
function checkData(){
//档xAxis_data不为空时则此时可以朝图标灌入数据
if(xAxis_data.length >0){
console.log("来了："+legend_data+" "+xAxis_data);
//设置处理后的值到option中
cpu_option.legend.data = legend_data;
cpu_option.xAxis[0].data =xAxis_data;
cpu_option.series=series_cpu;
mem_option.legend.data = legend_data;
mem_option.xAxis[0].data =xAxis_data;
mem_option.series=series_mem;
// for(var i=0;i<series_cpu.size;i++){
// option.series[i]=series_cpu[i];
// }
console.log("4"+JSON.stringify(cpu_option.legend));
console.log("4 "+JSON.stringify(cpu_option.series));
console.log("************* "+JSON.stringify(cpu_option.series));
console.log("++++\n"+JSON.stringify(cpu_option));
console.log("----\n"+JSON.stringify(mem_option));
// 为echarts对象加载数据
myChart_cpu.setOption(cpu_option);
myChart_mem.setOption(mem_option);
clearInterval(timer_2);
//页面开关，当停止监控时，不再发起监控请求。
if(!switch_monitor){
clearInterval(timer_1);
}
times++;
}
};
console.log("5 legend_data "+legend_data);
console.log("5 series_cpu_data "+JSON.stringify(series_cpu_data));
};
if(switch_monitor){
if(first == 1){
cpu_mem_monitor();
first=0;
}
timer_1=setInterval(cpu_mem_monitor,interval*1000);
}
/*--2--*/
// 基于准备好的dom，初始化echarts图表
var myChart_disk = ec.init(document.getElementById('disk_monitor'));
var disk_option = {
tooltip: {
show: true
},
legend: {
data:['统计']
},
xAxis : [
{
type : 'category',
data : ["顺手付","理财","银企直连","小贷","顺丰卡"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"系统",
"type":"bar",
"data":[5, 20, 40, 10, 10]
}
]
};
// 为echarts对象加载数据
myChart_disk.setOption(disk_option);
}
);
//获取当前监控时间点，实际监控数据与时间点存在0-5秒的延迟
var getDate = function(){
var d = new Date();
var con = '';
var year = d.getFullYear();
var month = d.getMonth()+1+con;
var date = d.getDate()+con;
var hour = d.getHours()+con;
var minute = d.getMinutes()+con;
var second = d.getSeconds()+con;
console.log("----month.length "+month.length)
if( month.length < 2 ) month = "0"+month;
if( date.length < 2 ) date = "0"+date;
if( hour.length < 2 ) hour = "0"+hour;
if( minute.length < 2 ) minute = "0"+minute;
if( second.length < 2 ) second = "0"+second;
console.log("request time :"+ year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second);
return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
};
});
-------------------------------------------------------------------------------------------
java
-------------------------------------------------------------------------------------------
package com.sfpay.pts.controller; import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map; import javax.servlet.http.HttpServletRequest; import net.sf.json.JSONArray;
import net.sf.json.JSONObject; import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody; import com.sfpay.pts.model.MachineInfoModel;
import com.sfpay.pts.util.ContextParaInitializeUtil;
import com.sfpay.pts.util.MonitorUtil; @Controller
@RequestMapping("/")
public class PerformanceMonitorController {
private Logger log = LoggerFactory
.getLogger(PerformanceMonitorController.class);
private static JSONObject monitor_data;
private ContextParaInitializeUtil cpiUtil = new ContextParaInitializeUtil();
@RequestMapping("nowMonitor.action")
public String toNowMonitorPage() {
log.info("跳转进入监控页面");
return "/resource/nowMonitor";
} @RequestMapping("historyMonitor.action")
public String toHistoryMonitorPage() {
log.info("跳转进入监控页面");
return "/resource/historyMonitor";
} public static void main(String[] args) {
PerformanceMonitorController p = new PerformanceMonitorController();
HttpServletRequest request = null;
JSONObject json = new JSONObject();
String[] ip = {"10.118.218.50","10.118.218.51"};
json.put("ip", ip);
p.getCpuMemMonitorData(request, 1, 20 , "2015-07-21 10:10:10",json);
} @RequestMapping(value = "getCpuMemData/{interval}/{times}/{req_time}")//
@ResponseBody
public JSONObject getCpuMemMonitorData(HttpServletRequest request,@PathVariable("interval") int interval,
@PathVariable("times") int times,
@PathVariable("req_time") String req_time,
@RequestBody JSONObject ip) {
log.info("CPU 监控频率为 " + interval + "秒;监控次数：" + times + " ,监控请求时间 "
+ req_time+" ;所监控IP: "+ip.toString());//
// 最终返回的对象
JSONObject json = new JSONObject();
// json的value,可以包含多个ip的数据
JSONObject ip_data = new JSONObject();
// 一个ip_data包含多个option，一个option包含1个ip对应的所有监控数据
JSONObject option ;
// option包含监控数据结构
JSONObject series = null;
// 定义xAxis和series的动态列表以及数组，然后动态列表转成数组
String xAxis_data = req_time.split(" ")[1]; // "xAxis_data":[],
// 用于初始化series对象中的data属性
String[] series_datas = new String[0];
//额外封装一个series_data对象，用于封装监控的数据
JSONObject series_data ; //存储被监控机器信息
MachineInfoModel miModel;
//存储cpu监控信息
Map<String,String> cpu_mem_map ;
//监控工具对象
MonitorUtil m = new MonitorUtil();
String ip_exist = "no";
for(Object s :ip.getJSONArray("ip")){
//存放监控数据
series_data = new JSONObject();
//存放前端echarts需要的数据
series = new JSONObject();
//存放多个series
option = new JSONObject();
//存放监控结果
cpu_mem_map = new HashMap<String,String>();
//创建存放一个ip对应的机器信息对象
miModel = new MachineInfoModel();
//获取ip的详细信息
miModel = cpiUtil.getIpinfo(s.toString());
//如果获取ip后该对象ip信息为空，说明该ip在后台数据库中不存在
if(!miModel.getIp().equals("")){
cpu_mem_map=m.getCpuMemMonitor(miModel);
ip_exist = "yes";
}
//把获取的监控信息cpu_mem_map从map对象转化成json对象
series_data = JSONObject.fromObject(cpu_mem_map);
series.put("name", s.toString());
series.put("type", "line");
series.put("smooth", true);
series.put("data", series_datas);
// "series":{"name":"10.118.218.50","data":[],"type":"line"},
log.debug("获取 "+s.toString()+"返回到页面的series信息："+series.toString()+" "+series.get("data")+" "+series_datas.toString());
// series 和 series_data放入到option中
// 一个ip对应一个option
option.put("ip_exist",ip_exist );
option.put("series", series);
option.put("series_data", series_data);
ip_data.put(s.toString(), option);
log.debug("获取 "+s.toString()+"返回到页面的option信息："+ip_data.toString());
} // 一个ip对应一个data，最终一个json包含多个ip
json.put("ip", ip_data);
json.put("xAxis_data", xAxis_data);
/*json对象格式如下*/
/*
{
"xAxis_data":"17:27:52",
"ip":
{
"10.118.218.50":
{
"series":{"name":"10.118.218.50","type":"line"},
"ip_exist":"yes",
"series_data":"1"
},
"10.118.218.51":
{
"series":{"name":"10.118.218.51","type":"line"},
"ip_exist":"yes",
"series_data":"1"
}
}
}
*/
System.out.println(monitor_data);
monitor_data = ip_data;
log.info("monitor_data : " + monitor_data.toString());
log.info("*******最终返回页面数据*******"+json.toString());
return json;
} }
-------------------------------------------------------------------------------------------