cpu_test

<%@ 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>&nbsp;&nbsp;&nbsp;&nbsp; 进程名称:<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>

 

转载于:https://www.cnblogs.com/onetwo/p/5793649.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值