<%@ 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 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}/js/plugin/layerui/css/layui.css" media="all">
    <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/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/ztree/zTreeStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontAwesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/tip.css">
</head>
<script type="text/javascript" charset="utf-8">
</script>
<style>
    thead tr th {
        text-align: center;
        width: 50%;
    }

    ._area {
        text-align: center;
        width: 25%;
    }

    html {
        background-color: #fff;
    }

    .table > tbody > tr > td {
        padding: 5px;
        line-height: 1.42857143;
        vertical-align: top;
        border-top: 1px solid #ddd;
    }
</style>
<body>
<div style="padding: 5px 15px 15px 15px">
    <div>
        <div style="padding-bottom: 5px">
            <div class="form-inline">
                <label class="form-group">区域：</label>
                <div class="disinlineb">
                    <input id="area" class="form-control" style="width: 140px" readonly>
                    <i class="fa fa-caret-down areaicon"></i>
                    <i class="fa fa-caret-up treeUpIcon disnone"
                       style="color: #C9CBCE;position: absolute;left: 60px;font-size: 18px;z-index: 9999;top: 20px"></i>
                    <div class=" ztree treeUpDiv disnone " id="areaTree"
                         style="position: absolute;width: 140px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
                    </div>
                </div>
                <div style="display: inline-block;">
                    <form class="form-inline">
                        <%@include file="../../include/time.jsp" %>
                        <div class="form-inline" style="margin-left: 4px;display: inline-block;">

                            <button type="button" class="btn btn-primary" id="query">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                            <button id="helper" type="button" class="btn btn-primary tip tip-bottom" data-tip="SARFI详解">
                                <i class="glyphicon glyphicon-info-sign"
                                   style="margin-left: -3px;margin-right: -3px;"></i>
                            </button>
                        </div>

                    </form>
                </div>
                <button type="button" class="btn btn-primary fr" id="exportData">
                    <i class="glyphicon glyphicon-share"></i>导出
                </button>
            </div>
        </div>
    </div>
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">区域</h2>
            <div class="layui-colla-content layui-show">
                <table id="areaTable" class="table table-striped table-bordered dataTable no-footer">
                    <thead>
                    <tr>
                        <th class="_area">区域</th>
                        <th class="_area">监测点数</th>
                        <th class="_area">暂降次数</th>
                        <th class="_area">SARFI-90</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">变电站</h2>
            <div class="layui-colla-content">
                <table id="subTable" class="table table-striped table-bordered dataTable no-footer">
                    <thead>
                    <tr>
                        <th>变电站</th>
                        <th>暂降次数</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">监测点</h2>
            <div class="layui-colla-content">
                <table id="monitorTable" class="table table-striped table-bordered dataTable no-footer">
                    <thead>
                    <tr>
                        <th>监测点</th>
                        <th>暂降次数</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<%--Common Modal --%>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layui.all.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/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/jspJS/utils/helper.js"></script>
<script type="text/javascript">
    var $area = $("#area");
    var $startTime = $("#startTime");
    var $endTime = $("#endTime");
    $("#helper").click(function () {
        toHelper("#sarfi");
    });
    var allData;
    $(document).ready(function () {
        //初始化区域
        $.ajax({
            type: "POST",
            url: "/pqs9200/user/getAreasInfo",
            dataType: 'json',
            success: function (data) {
                $("#area").val(data[0].name);
                $("#area").attr("index", data[0].id);
                areaTree = $.fn.zTree.init($("#areaTree"), settingAreaTree, data);
                //初始化页面内容
                var area = $area.eq(0).attr("index");
                var startTime = $startTime.eq(0).val();
                var endTime = $endTime.eq(0).val();
                refresh(area, startTime, endTime);
            }
        })
    });


    $("#query").click(function () {
        var area = $area.eq(0).attr("index");
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        refresh(area, startTime, endTime);
    });

    function refresh(area, startTime, endTime) {
        var i;
        //初始化区域
        $.ajax({
            type: "POST",
            url: "/pqs9200/area/queryLevel",
            data: {
                area: area,
                startTime: startTime,
                endTime: endTime
            },
            dataType: "json",
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 500) {
                    allData = null;
                } else {
                    allData = data.body;
                }
                startQuery()
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }
    var totalEvents=0;
    //初始化区域内容
    function initArea(areaList){
        if(areaList==null){
            areaList=[];
        }else{
            //计算总计
            var name='总计';
            var value=0;
            var monitor=0;
            var node='/';
            for(var i=0;i<areaList.length;i++){
                value=Number(areaList[i].value)+value;
                monitor=Number(areaList[i].countAll)+monitor
            }
            var area={};
            area.name=name;
            area.value=value;
            area.countAll=monitor;
            totalEvents=value;
            area.node=node;
            areaList.push(area);
            areaList.reverse();
        }
        $("#areaTable").DataTable({
            data: areaList,
            autoWidth:false,
            order:[1,"desc"],
            columnDefs : [ {
                orderable : false,
                targets : [0]
            } ,
                { "width": "25%", "targets": 0 },
                { "width": "25%", "targets": 1 },
                { "width": "25%", "targets": 2 },
                { "width": "25%", "targets": 3 }
            ],
            paging:true,
            lengthChange: false,
            searching:false,
            destroy : true,
            pageLength:10,
            language : {
                url:'/pqs9200/json/chine.json',
            },
            columns: [
                { data: 'name' },
                { data: 'countAll' },
                { data: 'value'},
                { data: 'node'},
            ],
        })
    }
    //初始化变电站内容
    function initSub(subList){
        if(subList==null){
            subList=[];
        }else{
            //计算总计
            var name='总计';
            var value=0;
            for(var i=0;i<subList.length;i++){
                value=Number(subList[i].value)+value;
            }
            var sub={};
            sub.name=name;
            sub.value=value;
            subList.push(sub);
            subList.reverse();
        }
        $("#subTable").DataTable({
            data: subList,
            autoWidth:false,
            columnDefs : [
                { "width": "50%", "targets": 0 },
                {
                    orderable : false,
                    targets : [0]
                }
            ],
            order:[1,"desc"],
            paging:true,
            lengthChange: false,
            searching:false,
            destroy : true,
            pageLength:10,
            language : {
                url:'/pqs9200/json/chine.json',
            },
            columns: [
                { data: 'name' },
                { data: 'value'}
            ],
        })
    }
    //初始化监测点内容
    function initMonitor(monitorList){
        if(monitorList==null){
            monitorList=[];
        }else{
            var name='总计';
            var monitor={};
            monitor.name=name;
            monitor.value=totalEvents;
            monitorList.push(monitor);
            monitorList.reverse();
        }
        $("#monitorTable").DataTable({
            data: monitorList,
            autoWidth:false,
            columnDefs : [
                { "width": "50%", "targets": 0 },
                {
                    orderable : false,
                    targets : [0]
                }
            ],
            order:[1,"desc"],
            paging:true,
            lengthChange: false,
            searching:false,
            destroy : true,
            pageLength:10,
            language : {
                url:'/pqs9200/json/chine.json',
            },
            columns: [
                { data: 'name' },
                { data: 'value'}
            ],
        })
    }

    //特殊处理，表头紧缩问题--start
    var it = null;

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

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#areaTable").width();
        if (width > 100) {
            if (allData === 500) {
                initArea(null);
                initSub(null);
                initMonitor(null);
            } else {
                initArea(allData.areaList);
                initSub(allData.subList);
                initMonitor(allData.monitorList);
            }
            window.clearInterval(it)
        }
    }

    //特殊处理，表头紧缩问题--end

    //点击导出报表数据
    $("#exportData").on("click", function () {
        var area = $area.eq(0).attr("index");
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        var name = $area.eq(0).val();
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/pqs9200/area/downloadLevelData', true);
        xhr.responseType = 'blob';
        xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
        var commontParamter = {};
        commontParamter.area = area;
        commontParamter.startTime = startTime;
        commontParamter.endTime = endTime;
        var i = ityzl_SHOW_LOAD_LAYER();
        xhr.send(JSON.stringify(commontParamter))
        xhr.onload = function () {
            if (this.status === 200) {
                var blob = this.response;
                var a = document.createElement('a');
                var url = window.URL.createObjectURL(blob);
                a.href = url;
                //设置文件名称
                a.download = name + '严重度统计_' + startTime + '_' + endTime + '.xlsx';
                a.click();
                a.remove();
            }
            //***********关闭loading
            ityzl_CLOSE_LOAD_LAYER(i);
        }

    })
</script>
</body>
</html>
