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(" ---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(" 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+" 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("++++ "+JSON.stringify(cpu_option)); console.log("---- "+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; } }
-------------------------------------------------------------------------------------------