<%@ 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">
    <style>
        li {
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
            background: white;
        }
    </style>
</head>
<body>
<div class="banner">
    <div id="divinfo" class="alert alert-info" role="alert"
         style="position:absolute;width:180px;top:0px;left:5px;padding:0px 15px 0px 15px;">
        <div id="msgInfo" class="alert alert-info"
             style="position:absolute;white-space:pre;width:180px;left: 0px;"></div>
    </div>
    <div id="slide3d" class="slide-carousel slide-3d">
        <ul class="item-list clearfix">
            <shiro:hasPermission name="/pqs9000/business/frequency">
                <li id="item0">
                    <div style="position:absolute;z-index: 99">
                        <div>
                            <span  class='fr font12' style="margin-left: 10px;margin-top: 20px"><span class='info'><span  class='inB bg-info smallBlock'></span> 合格率≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤合格率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 合格率<60%</span></span>
                        </div>
                    </div>
                    <div class="item-content" id="frequency" titles="稳态指标合格率">
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/powerquality">
                <li id="item1">
                    <div style="position:absolute;z-index: 99;bottom: 10px;margin-left: 10px" >
                        <div>
                            <div class="mt10">
                                <span  class='inB  smallBlock2' style="background-color:#2E8B57 "></span> 优质
                            </div>
                            <div class="mt10">
                                <span  class='inB smallBlock2' style="background-color:#84983C"></span> 良好
                            </div>
                            <div class="mt10">
                                <span  class='inB smallBlock2' style="background-color:#DAA520"></span> 合格
                            </div>
                            <div class="mt10">
                                <span  class='inB smallBlock2' style="background-color:#C06825"></span> 较差
                            </div>
                            <div class="mt10">
                                <span  class='inB smallBlock2' style="background-color:#A52a2a"></span> 极差
                            </div>
                        </div>
                    </div>

                    <div class="item-content" id="powerquality" titles="电能质量评估">
                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/devicestatus">
                <li id="item2">
                    <div style="position:absolute;z-index: 99">
                        <div>
                            <span class=' font12 fontBold  ' style="display: block;margin-left: 10px">终端状态(左柱) <span class='run'><span  class='inB bg-run smallBlock'></span> 投运 </span><span class='breaks'><span  class='inB bg-breaks smallBlock'></span> 检修 </span><span class='grey'><span  class='inB bg-grey smallBlock'></span> 退运 &nbsp;</span></span>
                            <span  class=' font12 fontBold' style="display: block;margin-left: 10px;margin-top: 8px" > 终端在线率(右柱) <span class='info'><span  class='inB  smallBlock' style="background-color:#2E8B57 "></span> 在线率≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤在线率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 在线率<60%</span> </span>
                        </div>
                    </div>
                    <div class="item-content" id="devicestatus" titles="终端状态">

                    </div>
                </li>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/detaintegrality">
                <li id="item3">
                    <div style="position:absolute;z-index: 99">
                        <div>
                            <span  class='fr font12' style="margin-left: 10px;margin-top: 20px"><span class='info'><span  class='inB bg-info smallBlock'></span> 完整性≥90%</span><span class='warn'> <span class='inB bg-warn smallBlock'></span> 60%≤完整性<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 完整性<60%</span></span>
                        </div>
                    </div>
                    <div class="item-content" id="dataintegrality" titles="数据完整性">

                    </div>
                </li>
            </shiro:hasPermission>
        </ul>
        <%--indicators--%>
        <div class="indicator-list">
            <shiro:hasPermission name="/pqs9000/business/frequency">
                <a href="javascript:void(0);" data-slide-index="0" class="selected"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/powerquality">
                <a href="javascript:void(0);" data-slide-index="1"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/devicestatus">
                <a href="javascript:void(0);" data-slide-index="2"></a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/pqs9000/business/detaintegrality">
                <a href="javascript:void(0);" data-slide-index="3"></a>
            </shiro:hasPermission>
        </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/area/powerCommon.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/mapCommon.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/jspJS/utils/barUtil.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script>
    var mapEvent, loadingItem;
    var load = 0;
    var total = 0;
    var areLength;//区域的个数
    var companyLength;//厂家个数
    var color;
    var companyname;
    var onlines = [];
    var gwonlines = [];
    var integralitys = [];
    var gwintegralitys = [];
    function rate(num) {
        if(num.length===0){
            return 0;
        }
        var dataNum = 0;
        for (var i = 0; i < num.length; i++) {
            if (!(num[i] === 3.1415)&&!(num[i] === 3.14159)) {
                dataNum=dataNum+num[i];
            }
        }
        return  (dataNum/num.length).toFixed(2);
    }
    
    function initInfo() {
        var endTime = getEndTime();
        var startTime = getMonthStartTime(endTime);

        $.ajax({
            type: "POST",
            data:{
                start: startTime,
                end: endTime
            },
            url: "/pqs9000/device/getMsgInfo",
            dataType: 'json',
            success: function (data) {
                var str0 = "<b style='font-size: 13px;color:" + color + ";'>" + "统计时间：" +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;" + startTime + "至" + endTime + "</b>\n";
                var str1 = "<b style='font-size: 13px;color:" + color + ";'>" + data.body.name +
                    ":</b>\n<b style='font-size: 12px;color:" + color + ";'>&nbsp;&nbsp;监测点数:" +data.body.pointCount +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;终端数：" + data.body.count +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;在线率：" + rate(onlines) +
                    "%</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;数据完整性：" + rate(integralitys)  + "%</b>\n";
                var str2 = "<b style='font-size: 13px;color: " + color + ";'>" + companyname +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;监测点数：" + data.body.gwPointCount +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;终端数：" + data.body.gwCount +
                    "</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;在线率：" + rate(gwonlines) +
                    "%</b>\n<b style='font-size: 12px;color: " + color + ";'>&nbsp;&nbsp;数据完整性：" +  rate(gwintegralitys)  + "%</b>\n";
                var str = str0;
                str += data.body.count == 0 ? "" : str1;
                str += data.body.gwCount == 0 ? "" : str2;

                $("#msgInfo").html(str);
            }
        })
    }

    $(function () {
        $.ajax({
            type: "POST",
            url: "/pqs9000/theme/getThemeInfo",
            async: false,
            dataType: 'json',
            success: function (data) {
                color = data.body.value;
                companyname = data.body.name;
            }
        })

        var t1 = getRole("/pqs9000/business/frequency");
        var t2 = getRole("/pqs9000/business/powerquality");
        var t3 = 0;
        var t4 = getRole("/pqs9000/business/devicestatus");
        var t5 = getRole("/pqs9000/business/detaintegrality");

        var index = 0;

        addIndex(t1, "#item0");
        addIndex(t2, "#item1");
        addIndex(t4, "#item2");
        addIndex(t5, "#item3");

        function addIndex(t, str) {
            if (t1 + t2 + t3 + t4 + t5 === 1) {
                index = 1;
            }

            if (t == 1) {
                $(str).addClass("item" + index);
                index++;
            }
        }

        total = t1 + t2 + t3 + t4 + t5;
        startQuery();
        loadingItem = ityzl_SHOW_LOAD_LAYER();
        $('#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);
        //打开电能质量评估页面---start

        if (t1 == 1) {
            $.ajax({
                url: '/pqs9000/overview/frequencyDeviation',
                type: 'post',
                data: {
                    startTime: startTime,
                    overview: 'overview',
                    endTime: endTime
                },
                dataType: 'json',
                success: function (data) {
                    load = load + 1;
                    if (data.body === null) {
                        drawFrequencyDeviationPic(null);
                    } else {
                        var deviaLength = data.body.area.length;
                        if (parseInt(deviaLength) > parseInt(barspaclength)) {
                            drawFrequencyDeviationPic(data.body.area, 0);
                        } else {
                            drawFrequencyDeviationPic(data.body.area, 0);
                        }
                    }
                }
            })
        }

        //获取数据完整性并画缩略图
        if (t5 == 1) {
            $.ajax({
                url: '/pqs9000/overview/dataIntegrality',
                type: 'post',
                data: {
                    startTime: startTime,
                    overview: 'overview',
                    endTime: endTime
                },
                dataType: 'json',
                success: function (data) {
                    load = load + 1;
                    if (data.body === null) {
                        drawIntegralityPic(null);
                    } else {
                        var typicLength = data.body.area.length;
                        if (parseInt(typicLength) > parseInt(barspaclength)) {
                            drawIntegralityPic(data.body.area, 0);
                        } else {
                            drawIntegralityPic(data.body.area, 0);
                        }
                    }
                }
            })
        }

        //获取在线率数据并画图
        if (t3 == 1) {
            $.ajax({
                url: '/pqs9000/overview/onlineRate',
                type: 'post',
                data: {
                    startTime: startTime,
                    overview: 'overview',
                    endTime: endTime
                },
                dataType: 'json',
                success: function (data) {
                    load = load + 1;
                    if (data.body === null) {
                        drawOnlineRatePic(null);
                    } else {
                        companyLength = data.body.area.length;
                        if (parseInt(companyLength) > parseInt(barspaclength)) {
                            drawOnlineRatePic(data.body.area, 0);
                        } else {
                            drawOnlineRatePic(data.body.area, 0);
                        }
                    }
                }
            })
        }

        //获取终端运行状态数据并画图
        if (t4 == 1) {
            $.ajax({
                url: "/pqs9000/overview/deviceStatus",
                type: 'post',
                data: {
                    startTime: startTime,
                    overview: 'overview',
                    endTime: endTime
                },
                dataType: 'json',
                success: function (data) {
                    load = load + 1;
                    if (data.body === null) {
                        drawDeviceStatusPic(null);
                    } else {
                        areLength = data.body.area.length;
                        if (parseInt(areLength) > parseInt(barspaclength)) {
                            drawDeviceStatusPic(data.body.area, 0);
                        } else {
                            drawDeviceStatusPic(data.body.area, 0);
                        }
                    }
                }
            })
        }

        if (t2 == 1) {
            $.ajax({
                url: '/pqs9000/overview/powerQualityVol',
                type: 'post',
                data: {
                    startTime: startTime,
                    overview: 'overview',
                    endTime: endTime
                },
                dataType: 'json',
                success: function (data) {
                    load = load + 1;
                    $("#powerquality").css("height", $("li").height())
                    $("#powerquality").css("width", $("li").width())
                    if (data.body === null) {
                        initEvents(null);
                    } else {
                        initEvents(data.body.synData);
                    }
                }
            })
        }

        function initEvents(volData) {
            //地图容器
            mapEvent = echarts.init(document.getElementById('powerquality'));
            var pNode, node;
            $.ajax({
                url: '/pqs9000/area/getMapInfo',
                type: 'post',
                data: {
                    area: "overview"
                },
                async: false,
                dataType: 'json',
                success: function (data) {
                    pNode = data.body.name;
                    node = data.body.subName;
                }
            })
            if (volData == null) {
                //获取地图数据
                var geoJson = getFullMapData(pNode, node);
                d = [];
                //注册地图
                echarts.registerMap('电能质量', geoJson);
                //绘制地图
                renderMapEvent(d);
            } else {
                if (volData.length > 1) {
                    //获取地图数据
                    var geoJson = getFullMapData(pNode, node);
                    var d = [];
                    for (var i = 0; i < volData.length; i++) {
                        //根据level获取等级颜色
                        var color = getColorByLevelAllData(volData[i].level);
                        var dataTemp;
                        if (volData[i].data === 3.1415) {
                            dataTemp = "/";
                        } else if (volData[i].data === 3.14159) {
                            dataTemp = "（暂无数据）";
                        } else {
                            dataTemp = volData[i].data
                        }
                        d.push({
                            name: volData[i].name,
                            value: dataTemp,
                            emphasis: {itemStyle: {areaColor: color, borderColor: "white", borderWidth: "1"}}
                        })
                    }
                    //注册地图
                    echarts.registerMap('电能质量', geoJson);
                    //绘制地图
                    renderMapEvent(d);
                } else {
                    var d = [];
                    var dataTemp;
                    var color = getColorByLevelAllData(volData[0].level);
                    if (volData[0].data === 3.1415) {
                        dataTemp = "/";
                    } else if (volData[0].data === 3.14159) {
                        dataTemp = "（暂无数据）";
                    } else {
                        dataTemp = volData[0].data
                    }
                    //获取地图数据
                    var data = getFullMapData(pNode, node);
                    if (data !== null) {
                        d.push({
                            name: volData[0].name,
                            value: dataTemp,
                            emphasis: {itemStyle: {areaColor: color, borderColor: "white", borderWidth: "1"}}
                        });
                        //注册地图
                        echarts.registerMap('电能质量', data);
                        //绘制地图
                        renderMapEvent(d);
                    }
                }
            }
        }

        //初始化绘制全国地图配置
        function renderMapEvent(data) {
            var  optionEvent={
                backgroundColor: canvasBG,
                title: {
                    text: '电能质量评估',
                    left: 'center'
                },
                animationDuration: 1000,
                animationEasing: 'cubicOut',
                animationDurationUpdate: 1000,
                tooltip:{
                    trigger: 'item',
                    // formatter: '{b}<br/>{c} (p / km2)',
                    show:false
                },
                visualMap:{
                    type: 'piecewise',
                    pieces: [
                        {gt: 4.5, lte: 5, label: '优质'},
                        {gt: 4, lte: 4.5, label: '良好'},
                        {gt: 3, lte: 4, label: '合格'},
                        {gt: 2, lte: 3, label: '较差'},
                        {gte: 0, lte: 2, label: '极差'}
                    ],
                    show:false,
                    color: [green, yellow, red],
                    inverse: false
                } ,
                series:{
                    type: 'map',
                    mapType: '电能质量',
                    roam: false,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                ccolor: 'black',
                                fontSize: 10
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#CCCCCC',
                            borderColor: 'dodgerblue'
                        },
                        emphasis: {
                            areaColor: '#B6B5B5'
                        }
                    },
                    data: data
                }
            }
            //渲染地图
            mapEvent.setOption(optionEvent);
        }

        //绑定点击跳转
        $('ul').on('click', '.item1 .item-content', function () {
            var id = $(this).prop("id");
            var title = $(this).attr("titles");
            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, "全部");
                } else if (id === "powerquality") {
                    info = getTitleInfo("综合评估", startTime, endTime, "综合评估");
                }else if(id==="devicestatus"){
                    info = getTitleInfo("终端状态", startTime, endTime, "终端状态");
                }
                onContent(id, title + info);
            }
        });

        initInfo();
    });

    //画终端状态缩略图
    function drawDeviceStatusPic(area, intervals) {
        //给div指定宽高
        $("#devicestatus").css("height", $("li").height())
        $("#devicestatus").css("width", $("li").width())
        var normal = [];
        var breaks = [];
        var shutdown = [];
        var areas = [];
        var rate=[];
        if (null != area) {
            area = area.slice(0, 8);
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
                var monitors = area[i].amounts;
                if (Number(monitors) === 0) {
                    var singleData = {};
                    var item = {};
                    singleData.value = 3.1415;
                    item.color = noMonitor;
                    singleData.itemStyle = item;
                    normal[i] = singleData;
                    rate[i] = singleData;
                    breaks[i] = 0;
                    shutdown[i] = 0;
                } else {
                    var itemStyle={};
                    normal[i] = area[i].status.normal;
                    breaks[i] = area[i].status.breaks;
                    shutdown[i] = area[i].status.shutdown;
                    var singleData={};
                    var normalData={};
                    var onlineRate = Number(area[i].online);
                    normalData.color = getColor(onlineRate);
                    if(onlineRate<3.1414){
                        singleData.value = 3.1415;
                        normalData.actual = onlineRate;
                    }else{
                        singleData.value = onlineRate;
                    }
                    itemStyle.normal=normalData;
                    singleData.itemStyle=itemStyle;
                    if(area[i].amounts!=="0"){
                        onlines.push(Number(area[i].online));
                    }
                    if(area[i].gwamounts!=="0"){
                        gwonlines.push(Number(area[i].gwonline));
                    }
                    rate[i]=singleData;
                }
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '终端状态',
                x: 'center'
            },
            color: [runColor, breaksColor, grey],
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '11%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(终端个数)',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: intervals
                }
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                nameLocation:'center',
                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
            },{
                name: '在线率',
                type: 'bar',
                barGap: 0,
                barMaxWidth: barMax,
                data: rate
            }]
        };
        var district = echarts.init(document.getElementById('devicestatus'));
        district.setOption(option);
    }

    //裝置在线率缩略图
    function drawOnlineRatePic(area, intervals) {
        $("#onlinerate").css("height", $("li").height())
        $("#onlinerate").css("width", $("li").width())
        var onlinerate = echarts.init($("#onlinerate")[0]);
        var rate = [];
        var areas = [];
        if (null != area) {
            area = area.slice(0, 8);
            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 = {};
                item.color = getColor(onlineRate);
                if (onlineRate === 3.1415) {
                    singleData.value = onlineRate;
                } else if (onlineRate === 3.14159) {
                    singleData.value = onlineRate;
                } else if (onlineRate < 3.15159) {
                    singleData.value = 3.1415;
                    item.actual = onlineRate;
                } else {
                    singleData.value = onlineRate;
                }
                singleData.itemStyle = item;
                rate[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '终端在线率',
                x: 'center'
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '11%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: intervals
                }
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '在线率',
                type: 'bar',
                barMaxWidth: barMax,
                data: rate
            }]
        };
        onlinerate.setOption(option);
    }

    //数据完整性缩率图
    function drawIntegralityPic(area, intervals) {
        //给div指定宽高
        $("#dataintegrality").css("height", $("li").height())
        $("#dataintegrality").css("width", $("li").width())
        var integrality = echarts.init($("#dataintegrality")[0]);
        var inte = [];
        var areas = [];
        if (null != area) {
            area = area.slice(0, 8);
            for (var i = 0; i < area.length; i++) {
                var integralityRate;
                areas[i] = area[i].name + "\n(" + area[i].amounts + ")";
                integralityRate = Number(area[i].dataIntegrity);
                var singleData = {};
                var item = {};
                item.color = getColor(integralityRate);
                if (integralityRate === 3.1415) {
                    singleData.value = integralityRate;
                } else if (integralityRate === 3.14159) {
                    singleData.value = integralityRate;
                } else if (integralityRate < 3.15159) {
                    singleData.value = 3.1415;
                    item.actual = integralityRate;
                } else {
                    singleData.value = integralityRate;
                }
                singleData.itemStyle = item;
                inte[i] = singleData;
                if(area[i].amounts!=="0"){
                    integralitys.push(Number(area[i].dataIntegrity));
                }
                if(area[i].gwamounts!=="0"){
                    gwintegralitys.push(Number(area[i].gwdataIntegrity));
                }

            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '数据完整性',
                x: 'center'
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '11%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: intervals
                }
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                nameLocation:'center',
                min: '0',
                max: '100'
            }],
            series: [{
                name: '完整性',
                type: 'bar',
                barMaxWidth: barMax,
                data: inte
            }]
        };
        integrality.setOption(option);
    };

    //稳态指标合格率
    function drawFrequencyDeviationPic(area, intervals) {
        //给div指定宽高
        $("#frequency").css("height", $("li").height());
        $("#frequency").css("width", $("li").width());
        var frequency = echarts.init($("#frequency")[0]);
        var freRate = [];
        var areas = [];
        if (null != area) {
            area = area.slice(0, 8);
            for (var i = 0; i < area.length; i++) {
                areas[i] = area[i].name + "\n(" + area[i].monitors + ")";
                var acceptabilityRate = Number(area[i].frequency);
                var singleData = {};
                var item = {};
                item.color = getColor(acceptabilityRate);
                if (acceptabilityRate === 3.1415) {
                    singleData.value = acceptabilityRate;
                } else if (acceptabilityRate === 3.14159) {
                    singleData.value = acceptabilityRate;
                } else if (acceptabilityRate < 3.15159) {
                    singleData.value = 3.1415;
                    item.actual = acceptabilityRate;
                } else {
                    singleData.value = acceptabilityRate;
                }
                singleData.itemStyle = item;
                freRate[i] = singleData;
            }
        }
        var option = {
            backgroundColor: canvasBG,//背景色
            title: {
                text: '稳态指标合格率',
                x: 'center'
            },
            //控制图标在dataroom中的位置大小
            grid: {
                left: '3%',
                right: '11%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: areas,
                name: '地区\n(监测点数)',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: intervals
                }
            }],
            yAxis: [{
                type: 'value',
                name: '%',
                nameLocation:'center',
                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,
            maxmin: false,
            resize: 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, '/');
        if (name === "综合评估") {
            return "<span style='color:red;cursor:pointer;margin-right: 5px' class='fr fontBold font12' onMouseOver='divdangerMouseOver()' onMouseOut='divdangerMouseOut()' >详细电能质量评估等级划分</span><span class='fr font25'>&nbsp;&nbsp;|&nbsp;&nbsp;  </span><span  class='fr font12' ></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>";
        }else if(name === "终端状态"){
            return "<span  class='fr font12 fontBold' > 终端在线率(右柱) <span class='info'><span  class='inB bg-info smallBlock'></span> 在线率≥90%</span><span class='warn''> " +
                "<span class='inB bg-warn smallBlock'></span>" +
                " 60%≤在线率<90% </span><span class='error'> <span class='inB bg-error smallBlock'></span> 在线率" +
                "<60%</span> </span><span class='fr font12 fontBold'>终端状态(左柱) <span class='run'><span  class='inB bg-run smallBlock'></span> 投运 </span><span class='breaks'><span  class='inB bg-breaks smallBlock'></span> 检修 </span><span class='grey'><span  class='inB bg-grey smallBlock'></span> 退运 &nbsp;</span></span><span class='fr font12 '><span class='fontBold'>统计时间：</span><span class='' >" + startTime + "-" + endTime + "&nbsp;</span></span>";
        } else {
            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' style='cursor:pointer' >" + target + "</span></span><span class='fr font12'>统计时间：<span class='fontBold' >" + startTime + "-" + endTime + "</span></span>";
        }
    }

    function divdangerMouseOver() {
        var frameId = document.getElementById('overview').getElementsByTagName("iframe")[0].id;
        $('#' + frameId)[0].contentWindow.divdangerMouseOver();
    }

    function divdangerMouseOut() {
        var frameId = document.getElementById('overview').getElementsByTagName("iframe")[0].id;
        $('#' + frameId)[0].contentWindow.divdangerMouseOut();
    }

    //根据合格率获取颜色
    function getColor(data) {
        if (data >= 90) {
            return green;
        } else if (data === 3.1415) {
            return noMonitor;
        } else if (data === 3.14159) {
            return noData;
        } else if (data < 60) {
            return red;
        } else {
            return yellow;
        }
    }

    var it = null;

    function startQuery() {
        //实时刷新时间单位为毫秒
        it = setInterval('refreshQuery()', 100);

    }

    /* 刷新查询 */
    function refreshQuery() {
        if (load === total) {
            ityzl_CLOSE_LOAD_LAYER(loadingItem);
            window.clearInterval(it)
        }
    }


</script>
</body>
</html>
