<%@ 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/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/plugin/highchart/export.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}/js/color.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/middruntree.js"></script>--%>
<script>
    $("#interval").val("自定义");
    var resultData;
    $(document).ready(function () {
        var phs = $(window).height()-60;
        $("#fru").css("height", phs);
        var middIndex = parent.$("#middIndex").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getShowDetail(middIndex,startTime,endTime)
    })
    function getShowDetail(middIndex,startTime,endTime){
        $.ajax({
            type: "POST",
            url: "/pqs9900/middRun/getShow",
            data: {
                middIndex:middIndex,
                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 list = [];
        if (data.body.length != 0) {
            for (var i = 0; i < data.body.length; i++) {
                var point = [];
                var xx = data.body[i].timeId+ 8 * 60 * 60 * 1000;
                var yy = data.body[i].state;
                point = [xx, yy];
                list.push(point);
            }
        } else {
            // var point = [], point1 = [];
            // var xx = new Date($("#startTime").val() + ' 00:00:00').getTime();
            // var yy = -1;
            // var xx1 = new Date($("#endTime").val() + ' 23:59:59').getTime();
            // var yy1 = -1;
            // point = [xx, yy];
            // point1 = [xx1, yy1];
            // list.push(point);
            // list.push(point1);
        }
        Highcharts.stockChart('fru', {
            title: {
                text: '中间件状态',
                floating: true,
                style: {fontSize: "14px"}
            },
            rangeSelector: {
                enabled: false,
            },
            chart: {
                backgroundColor: canvasBG
            },
            //导航器各项属性设置
            navigator: {
                margin: 1,
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        second: '%H:%M:%S',
                        minute: '%H:%M',
                        hour: '%H:%M',
                        day: '%m-%d',
                        week: '%m-%d',
                        month: '%Y-%m',
                        year: '%Y'
                    },
                },
                series: [{
                    data: list
                }]
            },
            scrollbar: {
                enabled: false
            },
            exporting: {
                enabled: true
            },
            credits: false,
            colors: [red],
            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>';
                    var y = this.y;
                    var yd;
                    if (y === 0) {
                        yd = '异常';
                    } else if (y === -1) {
                        yd = '数据异常';
                    } else {
                        yd = '正常';
                    }
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' + yd;
                    });
                    return s;
                },
                shared: true
            },
            xAxis: {
                labels: {
                    format: '{value:%Y-%m-%d %H:%M}'
                }
            },
            yAxis: {
                opposite: false,
                allowDecimals: false,
                max: 1.1,
                min: -1,
                labels: {
                    formatter: function () {
                        var y = this.value;
                        var yd;
                        if (y === 0) {
                            yd = '异常';
                        } else if (y === -1) {
                            yd = '数据异常';
                        } else {
                            yd = '正常';
                        }
                        return yd;
                    }
                }
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                enabled: true
            },
            series: [{
                type: 'line',
                turboThreshold: 0,
                marker: {
                    symbol: 'circle'
                },
                name: '中间件状态',
                data: list
            }
            ],
        });
    }

    $("#query").click(function () {
        var middIndex = parent.$("#middIndex").val();
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        getShowDetail(middIndex, startTime, endTime);
    })
</script>
</html>
