<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html>
<head>
    <title>服务器列表</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/iconfont/iconfont.css">
    <style>
        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }

        #vdlist {
            width: 1720px;
            min-width: 1720px;
        }

        body {
            overflow: hidden;
        }

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
    </style>
</head>
<body class="mbody pdt5 pdb5">
<div class="container-fluid">
    <div class="form-inline header">
        <%@include file="../../include/time.jsp" %>
        <button id="query" type="button" class="btn btn-primary ml5">
            <i class="glyphicon glyphicon-search"></i>
        </button>
    </div>
</div>
<div id="fru"></div>
</body>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/highchart/highstock.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/plugin/highchart/export.js"></script>
<script src="${ctx}/js/plugin/highchart/highchart-ZH.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<%--<script src="${ctx}/js/plugin/sbtree/servertree.js"></script>--%>
<script>
    $("#interval").val("自定义");
    $(document).ready(function () {
        var phs = $(window).height()-60;
        $("#fru").css("height", phs);
        var sevIndex = parent.$("#sevIndex").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getShowDetail(sevIndex,startTime,endTime)
    })

    function getShowDetail(sevIndex,startTime,endTime){
        $.ajax({
            type: "POST",
            url: "/pqs9900/serverstate/getShow",
            data: {
                sevIndex:sevIndex,
                startTime:startTime,
                endTime:endTime
            },
            async: false,
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                getshows=data;
                getShow(getshows);
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        })
    }

    function getShow(data) {
        var series_Data = [];// 展示数据
        var series_Nav = [];// 导航栏
        var data1=[],data2=[],data3=[];
        var list=[];
        var list1=[];
        var colo=[];
        if(data.body.length!=0){
            for(var i=0;i<data.body.length;i++) {
                data1.push([data.body[i].timeId,data.body[i].seCpu]);
                data2.push([data.body[i].timeId,data.body[i].seRam]);
                data3.push([data.body[i].timeId,data.body[i].seHdd])
            }
                list.push({
                    "data" : data1
                });
                list.push({
                    "data" : data2
                });
                list.push({
                    "data" : data3
                });
                list1.push({
                    "name" : "CPU",
                    "data" : data1
                });
                list1.push({
                    "name" : "内存",
                    "data" : data2
                });
                list1.push({
                    "name" : "硬盘",
                    "data" : data3
                });
                colo.push(yellow, green, red);
            series_Data.push(list);
            series_Nav.push(list1);
        }else{
            // var start =new Date($("#startTime").val()+' 00:00:00') ;
            // var end =new Date($("#endTime").val()+' 23:59:59') ;
            // data1.push([start.getTime(),100]);
            // data2.push([start.getTime(),100]);
            // data3.push([start.getTime(),100]);
            // data1.push([end.getTime(),100]);
            // data2.push([end.getTime(),100]);
            // data3.push([end.getTime(),100]);
            list.push({
                "data" : data1
            });
            list.push({
                "data" : data2
            });
            list.push({
                "data" : data3
            });
            list1.push({
                "name" : "CPU",
                "data" : data1
            });
            list1.push({
                "name" : "内存",
                "data" : data2
            });
            list1.push({
                "name" : "硬盘",
                "data" : data3
            });
            colo.push(yellow, green, red);
            series_Data.push(list);
            series_Nav.push(list1);
        }
        Highcharts.setOptions({
            global : {
                useUTC : false
            }
        });
        Highcharts.stockChart('fru', {
            title : {
                text : "服务器状态"
            },
            chart : {
                type : 'spline',
            },
            dataLabels : {
                allowOverlap : true
            },
            tooltip : {
                borderColor : grey,
                backgroundColor : 'rgba(105,105,105,0.7)',
                style : {
                    color : 'white',
                    fontSize : "15px",
                    padding : 10,
                },
                formatter : function() {
                    var s = '<b>时刻：'
                        + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)
                        + '</b>';
                    $.each(this.points, function() {
                            s += '<br/>' + this.series.name + ': '
                                + this.y.toFixed(2) +'%';
                    });
                    return s;
                },
                shared : true
            },
            // 导航器各项属性设置
            navigator : {
                height : 20,
                margin : 1,
                xAxis : {
                    labels : {
                        formatter : function() {
                            return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',
                                this.value);
                        }
                    }
                },
                series : series_Data[0]
            },
            rangeSelector : {
                enabled : false
            },
            scrollbar : {
                enabled : false
            },
            credits : false,
            colors : colo,
            xAxis : {
                title : {
                    text : '(时间)',
                    enabled : true,
                    align : 'high',
                },
                labels : {
                    step : 2
                },
                type : 'datetime',
                dateTimeLabelFormats : {
                    second : '%H:%M:%S',
                    minute : '%H:%M',
                    hour : '%H:%M',
                    day : '%m-%d',
                    week : '%m-%d',
                    month : '%Y-%m',
                    year : '%Y'
                },
            },
            yAxis : {
                max:100.1, // 定义Y轴 最大值
                min:0, // 定义最小值
                title : {
                    align : 'high',
                    offset : 0,
                    text : "%",
                    rotation : 0,
                    y : -10
                },
                opposite : false
            },
            legend : {
                align : 'left',
                verticalAlign : 'top',
                enabled : true
            },
            series : series_Nav[0]
        });
    }
    $("#query").click(function () {
        var sevIndex = parent.$("#sevIndex").val();
        var startTime=$("#startTime").val();
        var endTime=$("#endTime").val();
        getShowDetail(sevIndex,startTime,endTime);
    })
</script>
</html>