<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html lang="zh"> <head> <base href="<%=basePath%>"> <!-- jsp文件头和头部 --> <%@ include file="../admin/top.jsp"%> <script type="text/javascript"> $(top.hangge()); </script> <style type="text/css"> #resourch_bar select { border: solid 1px #C0C0C0; appearance: none; -moz-appearance: none; font-size: 13px; font-family: Arial, "Microsoft YaHei", 黑体, 宋体, sans-serif; padding: 1px 5px; height: 22px; width: 130px; margin-top: 7px; } select::-ms-expand { display: none; } #top_bar_left { font-weight: bold; float: left; font-size: 16px; margin: 10px 20px; } #resourch_bar { margin: 0 20px; text-align: right; float: right; } </style> </head> <body> <div id="top_bar_left" style="">CPU占用率统计</div> <div id="resourch_bar" style=""> IP地址:<select name="ip" id="ip" οnchange="changeIp()" title="IP"> <option value="0">10.62.256.156</option> <option value="1">10.62.256.12</option> <%-- <c:forEach items="" var="menu"> <option value="">${menu.MENU_NAME }</option> </c:forEach> --%> </select> 进程名称:<select name="processName" id="processName" οnchange="changeProcessName()" title="进程名称"> <option value="0">zte_cloud1</option> <option value="1">zte_cloud1_main1</option> <%-- <c:forEach items="" var="menu"> <option value="">${menu.MENU_NAME }</option> </c:forEach> --%> </select> </div> <div id="container" style="min-width: 700px; min-height: 500px; margin: 0 10px;"></div> <!-- 引入 --> <script type="text/javascript"> window.jQuery || document .write("_$tag_______________________________________\x3C/script>"); </script> <script src="static/js/bootstrap.min.js"></script> <script src="static/js/ace-elements.min.js"></script> <script src="static/js/ace.min.js"></script> <!-- 引入 --> <script type="text/javascript"> $(function() { $ .getJSON( 'http://www.hcharts.cn/datas/jsonp.php?filename=usdeur.json&callback=?', function(data) { var startDate = new Date( data[data.length - 1][0]), // Get year of last data point minRate = 1, maxRate = 0, startPeriod, date, rate, index; startDate.setMonth(startDate.getMonth() - 3); // a quarter of a year before last data point startPeriod = Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate .getDate()); for (index = data.length - 1; index >= 0; index = index - 1) { date = data[index][0]; // data[i][0] is date rate = data[index][1]; // data[i][1] is exchange rate if (date < startPeriod) { break; // stop measuring highs and lows } if (rate > maxRate) { maxRate = rate; } if (rate < minRate) { minRate = rate; } } // Create the chart $('#container').highcharts('StockChart', { rangeSelector : { selected : 1 }, title : { /* text : 'CPU占用率统计(样板)' */ }, yAxis : { title : { text : 'CPU占用率(%)' }, plotLines : [ { value : minRate, color : 'green', dashStyle : 'shortdash', width : 2, label : { text : '最近半小时最小值' } }, { value : maxRate, color : 'red', dashStyle : 'shortdash', width : 2, label : { text : '最近半小时最大值' } } ] }, series : [ { name : 'CPU占用率', data : data, tooltip : { valueDecimals : 4 } } ] }); }); }); </script> <script type="text/javascript"> var taskId = 1470211358843; function changeIp() { $.ajax({ type : "post", async : false, //同步执行 url : "resource/getReourceIP?taskId=" + taskId, //data:{taskId:taskId}, dataType : "json", //返回数据形式为json success : function(data) { console.log("1111"); var selectid = document.getElementById("ip"); for (var i = 0; i < data.length; i++) { selectid[i] = new Option(data[i].TAGS, data[i].TAGS); } }, error : function(errorMsg) { console.log("2222"); var selectid = document.getElementById("processName"); selectid[0] = new Option("---- 设置显示0 ----", 0); selectid[1] = new Option("---- 设置显示1 ----", 1); selectid[2] = new Option("---- 设置显示2 ----", 2); } }); } </script> <style type="text/css"> li { list-style-type: none; } </style> <script type="text/javascript" src="static/js/hcharts/highstock.js"></script> <ul class="navigationTabs"> <li><a></a></li> <li></li> </ul> </body> </html>