<%@ 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">
    <title>概览页面</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/reset.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/slide/slide.css">
    <link rel="stylesheet" href="${ctx}/jspCSS/overview/overview.css">
</head>
<body>
<div class="banner">
    <div id="slide3d" class="slide-carousel slide-3d">
        <ul class="item-list clearfix">
            <li class="item0">
                <div class="item-content">
                    <a href="javascript:void(0);">
                        <img class="cover-img" src="${ctx}/images/banner3.jpg" alt="">
                    </a>
                </div>
            </li>
            <li class="item1">
                <div class="item-content" id="frequency" title="稳态指标合格率">

                </div>
            </li>
            <li class="item2">
                <div class="item-content" id="onlinerate" title="终端在线率">

                </div>
            </li>
            <li class="item3">
                <div class="item-content" id="devicestatus" title="终端状态">

                </div>
            </li>
            <li class="item4">
                <div class="item-content" id="dataintegrality" title="数据完整性">

                </div>
            </li>
        </ul>
        <%--indicators--%>
        <div class="indicator-list">
            <a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
            <a href="javascript:void(0);" data-slide-index="1"></a>
            <a href="javascript:void(0);" data-slide-index="2"></a>
            <a href="javascript:void(0);" data-slide-index="3"></a>
            <a href="javascript:void(0);" data-slide-index="4"></a>
        </div>
        <%--controls--%>
        <div class="controls">
            <a class="item-prev glyphicon glyphicon-menu-left" href="javascript:void(0);"></a>
            <a class="item-next glyphicon glyphicon-menu-right" href="javascript:void(0);"></a>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/slide.min.js"></script>
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/getTime.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    $(function () {
        $('#slide3d').slideCarsousel({slideType: '3d', indicatorEvent: 'click'});
        //获取当前内容的高度
        var height = $(window).height();
        $(".banner").css("height", height * 0.8);
        $(".banner").css("margin-top", height * 0.1);
        $("li").css("height", height * 0.8);
        var endTime = getEndTime();
        var startTime = getMonthStartTime(endTime);
        //获取终端运行状态数据并画图
        $.ajax({
            url: "/pqs9000/overview/deviceStatus",
            type: 'post',
            dataType: 'json',
            success: function (data) {
                if (data.body === null) {
                    drawDeviceStatusPic(null);
                } else {
                    drawDeviceStatusPic(data.body.area);
                }
            }
        })
        //获取在线率数据并画图
        $.ajax({
            url: '/pqs9000/overview/onlineRate',
            type: 'post',
            data: {
                startTime: startTime,
                endTime: endTime
            },
            dataType: 'json',
            success: function (data) {
                if (data.body === null) {
                    drawOnlineRatePic(null);
                } else {
                    drawOnlineRatePic(data.body.area);
                }
            }
        })
        //获取数据完整性并画缩略图
        $.ajax({
            url: '/pqs9000/overview/dataIntegrality',
            type: 'post',
            data: {
                startTime: startTime,
                endTime: endTime
            },
            dataType: 'json',
            success: function (data) {
                if (data.body === null) {
                    drawIntegralityPic(null);
                } else {
                    drawIntegralityPic(data.body.area);
                }
            }
        })
        //获取稳态指标合格率并画缩率图 频率偏差
        $.ajax({
            url: '/pqs9000/overview/frequencyDeviation',
            type: 'post',
            data: {
                startTime: startTime,
                endTime: endTime
            },
            dataType: 'json',
            success: function (data) {
                if (data.body === null) {
                    drawFrequencyDeviationPic(null);
                } else {
                    drawFrequencyDeviationPic(data.body.area);
                }
            }
        })


        //绑定点击跳转
        $('ul').on('click', '.item1 .item-content', function () {
            var id = $(this).prop("id");
            var title = $(this).prop("title");
            if (id !== '') {
                var info = '';
                if (id === 'onlinerate') {
                    info = getTitleInfo("在线率", startTime, endTime, "在线率");
                } else if (id === "dataintegrality") {
                    info = getTitleInfo("完整性", startTime, endTime, "数据完整性");
                } else if (id === "frequency") {
                    info = getTitleInfo("合格率", startTime, endTime, "频率偏差");
                }
                onContent(id, title + info);
            }
        });
    });

    //画裝置状态缩略图
    function drawDeviceStatusPic(area) {
        //给div指定宽高
        $("#devicestatus").css("height", $("li").height())
        $("#devicestatus").css("width", $("li").width())
        var normal = [];
        var breaks = [];
        var shutdown = [];
        var areas = [];
        if (null != area) {
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
                normal[i] = area[i].status.normal;
                breaks[i] = area[i].status.breaks;
                shutdown[i] = area[i].status.shutdown;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '终端状态',
                x: 'center'
            },
            color: [green, yellow, grey],
            legend: {
                x: 'left',
                data: ['投运', '检修', '退运'],
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tips = "";
                    tips += params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        tips += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    return tips;
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0
                }
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '投运',
                type: 'bar',
                stack: 'sum',
                barMaxWidth: barMax,
                data: normal
            }, {
                name: '检修',
                type: 'bar',
                stack: 'sum',
                barMaxWidth: barMax,
                data: breaks
            }, {
                name: '退运',
                type: 'bar',
                stack: 'sum',
                barMaxWidth: barMax,
                data: shutdown
            }]
        };
        var district = echarts.init(document.getElementById('devicestatus'));
        district.setOption(option);
    }

    //裝置在线率缩略图
    function drawOnlineRatePic(area) {
        var onlinerate = echarts.init($("#onlinerate")[0]);
        var rate = [];
        var areas = [];
        if (null != area) {
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
                var onlineRate = Number(area[i].online);
                var singleData = {};
                var item = {};
                singleData.value = onlineRate;
                if (onlineRate > 90) {
                    item.color = green;
                } else if (onlineRate < 60) {
                    item.color = red;
                } else {
                    item.color = yellow;
                }
                singleData.itemStyle = item;
                rate[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '终端在线率',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tips = "";
                    tips += params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        tips += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    return tips;
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '在线率',
                type: 'bar',
                barMaxWidth: barMax,
                data: rate
            }]
        };
        onlinerate.setOption(option);
    }

    //数据完整性缩率图
    function drawIntegralityPic(area) {
        //给div指定宽高
        $("#dataintegrality").css("height", $("li").height())
        $("#dataintegrality").css("width", $("li").width())
        var integrality = echarts.init($("#dataintegrality")[0]);
        var inte = [];
        var areas = [];
        if (null != area) {
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
                var integralityRate = Number(area[i].dataIntegrity);
                var singleData = {};
                var item = {};
                singleData.value = integralityRate;
                if (integralityRate > 90) {
                    item.color = green;
                } else if (integralityRate < 60) {
                    item.color = red;
                } else {
                    item.color = yellow;
                }
                singleData.itemStyle = item;
                inte[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '数据完整性',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tips = "";
                    tips += params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        tips += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    return tips;
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '完整性',
                type: 'bar',
                barMaxWidth: barMax,
                data: inte
            }]
        };
        integrality.setOption(option);
    };

    //频率偏差缩率图
    function drawFrequencyDeviationPic(area) {
        //给div指定宽高
        $("#frequency").css("height", $("li").height())
        $("#frequency").css("width", $("li").width())
        var frequency = echarts.init($("#frequency")[0]);
        var freRate = [];
        var areas = [];
        if (null != area) {
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].monitors + ")";
                var acceptabilityRate = Number(area[i].acceptability);
                var singleData = {};
                var item = {};
                singleData.value = acceptabilityRate;
                if (acceptabilityRate > 90) {
                    item.color = green;
                } else if (acceptabilityRate < 60) {
                    item.color = red;
                } else {
                    item.color = yellow;
                }
                singleData.itemStyle = item;
                freRate[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '稳态指标合格率',
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (params) {
                    var tips = "";
                    tips += params[0].name;
                    for (var i = 0; i < params.length; i++) {
                        tips += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
                    }
                    return tips;
                }
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '频率偏差合格率',
                type: 'bar',
                barMaxWidth: barMax,
                data: freRate
            }]
        };
        frequency.setOption(option);
    }

    //根据跳转页面
    function onContent(id, title) {
        layer.open({
            id: 'overview',
            type: 2,
            title: title,
            resize: false,
            maxmin: false,
            shadeClose: true, //点击遮罩关闭层
            area: ['100%', '100%'],
            content: id,
            scrollbar: false
        });
    }

    //获取layer打开新页面后，在标题添加内容并向右浮动
    function getTitleInfo(name, startTime, endTime, target) {
        startTime = startTime.replace(/-/g, '/');
        endTime = endTime.replace(/-/g, '/');
        return "<span  class='fr font12' ><span class='info'><span  class='inB bg-info smallBlock'></span> "
            + name + "≥90%</span><span class='warn''> <span class='inB bg-warn smallBlock'></span> 60%<"
            + name + "<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> "
            + name + "<60%</span></span><span class='fr font25'>&nbsp;&nbsp;|&nbsp;&nbsp;  </span><span class='fr font12'>&nbsp;&nbsp;统计指标：<span class='fontBold'  id='target' >" + target + "</span></span><span class='fr font12'>统计时间：<span class='fontBold' >" + startTime + "-" + endTime + "</span></span>";
    }
</script>
</body>
</html>
