<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>终端状态统计</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .tr {
            text-align: center;
        }

        .td {
            text-align: center;
            line-height: 48px
        }

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

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }

        #downloadWave {
            margin-top: -25px;
        }

        body {
            overflow: hidden;
        }

        .left-menu1 {
            position: absolute;
            z-index: 904;
            top: 80px;
            bottom: 35px;
            left: 20px;
            width: 240px;
            padding-top: 0;
            background: rgba(255, 255, 255, 0.3);
        }
    </style>
</head>
<body class="pd15 bg-white">
<div class="container-fluid">
    <div class="form-inline">
        <div class="row">
            <form class="form-inline ml15 header mt-6">
                <%@include file="../../include/time.jsp" %>
                <button id="query" type="button" title="查询" class="btn themeBGColor">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
                <div style="text-align: center;font-size: 15px;color: red" class="fr" id="point"></div>
            </form>
        </div>
    </div>
</div>
<div class="left-menu1 fl" style="margin-top: -3%" id="echartsFl">
    <a id="drw">
        <div id="container1" CLASS="fl" style="margin-left: 5%;width: 78%"></div>
        <div id="poin" CLASS="fl" style="margin-left: 5%;width: 78%;">
            <img src="${ctx}/images/timg.png" id="imgs1" style="margin-top:5px">
        </div>
        <div CLASS="fr" style="margin-top:15%">CPU1负荷(%)</div>
    </a>
    <a id="drw1">
        <div id="container2" CLASS="fl" style="margin-left: 5%;width: 78%;">
        </div>
        <div id="poin1" style="margin-left: 5%;width: 78%;">
            <img src="${ctx}/images/timg.png" id="imgs2" style="margin-top:5px">
        </div>
        <div CLASS="fr" style="margin-top:-20%">CPU2负荷(%)</div>
    </a>
    <a id="drw2">
        <div id="container3" CLASS="fl" style="margin-left: 5%;width: 78%;">

        </div>
        <div id="poin2" style="margin-left: 5%;width: 78%;">
            <img src="${ctx}/images/timg.png" id="imgs3" style="margin-top:5px">
        </div>
        <div CLASS="fr" style="margin-top:-20%">内存(MB)</div>
    </a>
    <a id="drw3">
        <div id="container4" CLASS="fl" style="margin-left: 5%;width: 78%;">

        </div>
        <div id="poin3" style="margin-left: 5%;width: 78%;">
            <img src="${ctx}/images/timg.png" id="imgs4" style="margin-top:5px">
        </div>
        <div CLASS="fr" style="margin-top:-20%">存储卡(GB)</div>
    </a>
</div>
<div class="fr" id="echartFr" style="margin-top: 1%">
    <div style="text-align: center;font-size: 15px;color: red" id="point11"></div>
    <div id="point1" style="max-width: 98%; max-height:100%;margin-left: 5%;">
        <img src="${ctx}/images/timg.png" id="imgs" style="margin-top:5px;height: 100%">
    </div>
    <div id="container" class="fr"></div>
</div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/echarts/echarts.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/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
<script src="${ctx}/js/plugin/layui/layer.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/basic.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    $("#interval").val("周");
    var devIndex = parent.devIndexs;
    var offWidth = $(window).width();
    var drawDetail = 1;
    var cpu1Data = new Array();
    var cpu2Data = new Array();
    var ramData = new Array();
    var spaceData = new Array();
    $(document).ready(function () {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getDevDetail();
        getFlowDetail(startTime, endTime);
        $("#point11").text("监测点：");
    })
    $("#echartsFl").css("width", offWidth * 0.3);
    $("#echartFr").css("width", offWidth * 0.7);
    var echartH = document.getElementById("echartsFl").clientHeight || o.offsetHeight;
    $("#drw").css("height", (echartH / 4));
    $("#drw1").css("height", (echartH / 4));
    $("#drw2").css("height", (echartH / 4));
    $("#drw3").css("height", (echartH / 4));
    $("#container1").css("height", (echartH / 4));
    $("#container2").css("height", (echartH / 4));
    $("#container3").css("height", (echartH / 4));
    $("#container4").css("height", (echartH / 4));
    $("#drw").css("width", offWidth * 0.3);
    $("#drw1").css("width", offWidth * 0.3);
    $("#drw2").css("width", offWidth * 0.3);
    $("#drw3").css("width", offWidth * 0.3);
    $("#container").css("width", offWidth * 0.7);
    $("#container").css("height", echartH);
    // $("#echartFr").css("height", echartH);
    var dataTable = null;
    $("#query").click(function () {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getDevDetail();
        getFlowDetail(startTime, endTime);
    });

    function getFlowDetail(startTime, endTime) {
        $.ajax({
            type: "POST",
            url: "/pqs9900/devstate/getDevStateInfo",
            data: {
                devIndex: devIndex,
                startTime: startTime,
                endTime: endTime
            },
            async: false,
            beforeSend: function () {
                ia = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.body.length == 0) {
                    cpu1Data = null;
                    cpu2Data = null;
                    ramData = null;
                    spaceData = null;
                    document.getElementById("poin").setAttribute("style", "display:block;margin-left: 5%;width: 78%;");
                    document.getElementById("container1").setAttribute("style", "display:none;margin-left: 5%;width: 78%;");
                    document.getElementById("poin1").setAttribute("style", "display:block;margin-left: 5%;width: 78%;");
                    document.getElementById("container2").setAttribute("style", "display:none;margin-left: 5%;width: 78%;");
                    document.getElementById("poin2").setAttribute("style", "display:block;margin-left: 5%;width: 78%;");
                    document.getElementById("container3").setAttribute("style", "display:none;margin-left: 5%;width: 78%;");
                    document.getElementById("poin3").setAttribute("style", "display:block;margin-left: 5%;width: 78%;");
                    document.getElementById("container4").setAttribute("style", "display:none;margin-left: 5%;width: 78%;");
                } else {
                    var timeid = [], cpu1 = [], cpu2 = [], ram = [], space = [];
                    for (var i = 0; i < data.body.length; i++) {
                        timeid.push(data.body[i].timeId);
                        cpu1.push(data.body[i].cpuOne);
                        cpu2.push(data.body[i].cpuTwo);
                        ram.push(data.body[i].ram);
                        space.push(data.body[i].spaceMemory);
                    }
                    cpu1Data = [];
                    cpu2Data = [];
                    ramData = [];
                    spaceData = [];
                    cpu1Data.push(timeid);
                    cpu1Data.push(cpu1);
                    cpu2Data.push(timeid);
                    cpu2Data.push(cpu2);
                    ramData.push(timeid);
                    ramData.push(ram);
                    spaceData.push(timeid);
                    spaceData.push(space);
                    drawChartCpu1(cpu1Data);
                    drawChartDetail(cpu1Data);
                    drawChartCpu2(cpu2Data);
                    drawChartRam(ramData);
                    drawChartSpace(spaceData);
                }
                ityzl_CLOSE_LOAD_LAYER(ia);
            }
        })
    }

    //获取详细信息
    function getDevDetail() {
        $.ajax({
            type: "POST",
            url: "/pqs9900/devstate/getDeviceDetail",
            data: {
                devIndex: devIndex
            },
            async: false,
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                $("#point").text("监测点：" + data.body.devName + "(" + data.body.ip + ")" + "  所属变电站：" + data.body.subName + "  所属供电公司：" + data.body.gdName)
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        })
    }

    function drawChartDetail(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        var textName = null;//标题名称
        var unit;//单位

        //$("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container")[0]);
        var areas = [];
        if (resultData.length > 0) {
            document.getElementById("point1").style.display = "none";
            document.getElementById("container").style.display = "block";
            for (var i = 0; i < resultData[0].length; i++) {
                var eValue = (resultData[1][i]);
                var eSingleData = {};
                eSingleData.value = eValue;
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var xASingleData = {};
                var xValue = resultData[0][i]
                xASingleData.value = xValue;
                x[i] = xASingleData;
            }
            var labelOption = {
                normal: {
                    show: true,
                    position: 'top'
                }
            };
            var option = {
                backgroundColor: canvasBG,//背景色
                title: {
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                //控制图标在dataroom中的位置大小
                // grid: {
                //     left: '0%',
                //     right: '5%',
                //     top: '1%',
                //     containLabel: true
                // },
                calculable: false,
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        // rotate: 20
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: unit,
                    // splitNumber: 3,
                    // min: 0,
                    // max: 100

                }],
                series: [{
                    type: 'line',
                    barGap: 0.2,
                    label: labelOption,
                    data: y
                }
                ]
            };
        } else {

        }


    }

    //画图
    function drawChartCpu1(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        //$("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container1")[0]);
        var areas = [];
        if (resultData.length > 0) {
            document.getElementById("poin").style.display = "none";
            document.getElementById("container1").style.display = "block";
            $("#container1").css("height", (echartH / 4));
            for (var i = 0; i < 2; i++) {
                var eValue = (resultData[1][i]);
                var eSingleData = {};
                eSingleData.value = eValue;
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var xASingleData = {};
                var xValue = resultData[0][i]
                xASingleData.value = xValue;
                x[i] = xASingleData;
            }
            var labelOption = {
                normal: {
                    show: true,
                    position: 'top'
                }
            };
            var option = {
                backgroundColor: canvasBG,//背景色
                title: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                //控制图标在dataroom中的位置大小
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '1%',
                    height: echartH / 4 - 5,
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        // rotate: 20
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: 'MB',
                    // splitNumber: 2,
                    // min: 0,
                    // max: 100

                }],
                series: [{
                    type: 'line',
                    barGap: 0.2,
                    label: labelOption,
                    data: y
                }
                ]
            };
            areaOption.setOption(option);
        } else {
            document.getElementById("poin").style.display = "block";
            document.getElementById("container1").style.display = "none";
        }
    };

    function drawChartCpu2(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        //$("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container2")[0]);
        var areas = [];
        if (resultData.length > 0) {
            document.getElementById("poin1").style.display = "none";
            document.getElementById("container2").style.display = "block";
            $("#container2").css("height", (echartH / 4));
            for (var i = 0; i < 2; i++) {
                var eValue = (resultData[1][i]);
                var eSingleData = {};
                eSingleData.value = eValue;
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var xASingleData = {};
                var xValue = resultData[0][i]
                xASingleData.value = xValue;
                x[i] = xASingleData;
            }
            var labelOption = {
                normal: {
                    show: true,
                    position: 'top'
                }
            };
            var option = {
                backgroundColor: canvasBG,//背景色
                title: {
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                //控制图标在dataroom中的位置大小
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '1%',
                    height: echartH / 4 - 5,
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        // rotate: 20
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '%',
                    splitNumber: 2,
                    min: 0,
                    max: 100

                }],
                series: [{
                    type: 'line',
                    barGap: 0.2,
                    label: labelOption,
                    data: y
                }
                ]
            };
            areaOption.setOption(option);
        } else {
            document.getElementById("poin1").style.display = "block";
            document.getElementById("container2").style.display = "none";
        }
    };

    function drawChartRam(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        //$("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container3")[0]);
        var areas = [];
        if (resultData.length > 0) {
            document.getElementById("poin2").style.display = "none";
            document.getElementById("container3").style.display = "block";
            for (var i = 0; i < 2; i++) {
                var eValue = (resultData[1][i]);
                var eSingleData = {};
                eSingleData.value = eValue;
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var xASingleData = {};
                var xValue = resultData[0][i]
                xASingleData.value = xValue;
                x[i] = xASingleData;
            }
            var labelOption = {
                normal: {
                    show: true,
                    position: 'top'
                }
            };
            var option = {
                backgroundColor: canvasBG,//背景色
                title: {
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                //控制图标在dataroom中的位置大小
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '1%',
                    height: echartH / 4 - 5,
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        // rotate: 20
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: 'MB',
                    splitNumber: 2,
                    min: 0

                }],
                series: [{
                    type: 'line',
                    barGap: 0.2,
                    label: labelOption,
                    data: y
                }
                ]
            };
            areaOption.setOption(option);
        } else {
            document.getElementById("poin2").style.display = "block";
            document.getElementById("container3").style.display = "none";
        }
    };

    function drawChartSpace(resultData) {
        var x = [];
        var y = [];
        var y1 = [];
        //$("#container").css("height", height * 0.5);
        var areaOption = echarts.init($("#container4")[0]);
        var areas = [];
        if (resultData.length > 0) {
            document.getElementById("poin3").style.display = "none";
            document.getElementById("container4").style.display = "block";
            for (var i = 0; i < 2; i++) {
                var eValue = (resultData[1][i]);
                var eSingleData = {};
                eSingleData.value = eValue;
                var eItem = {};
                eItem.color = ITICTop;
                eSingleData.itemStyle = eItem;
                y[i] = eSingleData;

                var xASingleData = {};
                var xValue = resultData[0][i]
                xASingleData.value = xValue;
                x[i] = xASingleData;
            }
            var labelOption = {
                normal: {
                    show: true,
                    position: 'top'
                }
            };
            var option = {
                backgroundColor: canvasBG,//背景色
                title: {
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                //控制图标在dataroom中的位置大小
                grid: {
                    left: '0%',
                    right: '5%',
                    top: '1%',
                    height: echartH / 4 - 5,
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: x,
                    axisLabel: {//坐标轴刻度标签的相关设置。
                        interval: 0,
                        // rotate: 20
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: 'GB',
                    splitNumber: 2,
                    min: 0

                }],
                series: [{
                    type: 'line',
                    barGap: 0.2,
                    label: labelOption,
                    data: y
                }
                ]
            };
            areaOption.setOption(option);
        } else {
            document.getElementById("poin3").style.display = "block";
            document.getElementById("container4").style.display = "none";
        }
    };

    $("#drw").click(function () {
        $("#point11").text("CPU1负荷");
        drawChartDetail(cpu1Data);
    })
    $("#drw1").click(function () {
        $("#point11").text("CPU2负荷");
        drawChartDetail(cpu2Data);
    })
    $("#drw2").click(function () {
        $("#point11").text("内存");
        drawChartDetail(ramData);
    })
    $("#drw3").click(function () {
        $("#point11").text("存储卡");
        drawChartDetail(spaceData);
    })
</script>
</body>
</html>