<%@ 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>
    <title>合格率报告</title>
    <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"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/datatables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/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/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/tip.css">
    <style>

        body {
            overflow: hidden;
        }

        #integritylist {
            min-width: 2000px;
        }

        .tr {
            text-align: center;
        }

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

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

        .pagination > li > a, .pagination > li > span {
            padding: 6px 12px;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline header mt10">
        <label class="form-group">区域：</label>
        <div class="form-group has-feedback mr10">
            <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>
        <%@include file="../include/time.jsp" %>
        <button id="query" type="button" class="btn btn-primary ml5">
            <i class="glyphicon glyphicon-search"></i>
        </button>
        <div class="form-group fr mr10" id="fliteData">
            <label>筛选数据：</label>
            <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
        </div>
    </div>
    <table id="integritylist" class="table table-striped table-bordered dataTable no-footer width100">
        <thead>
        <tr>
            <th>序号</th>
            <th>变电站</th>
            <th>监测点名称</th>
            <th>行业类型</th>
            <th>分类等级</th>
            <th>电压等级</th>
            <th>上级变电站</th>
            <th>挂接线路</th>
            <th>PT变比</th>
            <th>CT变比</th>
            <th>短路容量(MVA)</th>
            <th>设备容量(MVA)</th>
            <th>协议容量(MVA)</th>
            <th>数据完整率</th>
            <th>谐波情况</th>
            <th>电能质量情况</th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.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}/js/plugin/datatables/datatables.jquery.js"></script>
<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.js"></script>
<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/area.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script type="text/javascript">
    var $area = $("#area");
    var $startTime = $("#startTime");
    var $endTime = $("#endTime");
    var dataTable = null;
    var resultData = null;
    var areaInfo;

    $("#interval").val("周");

    $(function () {

        //初始化区域
        $.ajax({
            type: "POST",
            url: "/pqs9000/user/getAreasInfo",
            dataType: 'json',
            success: function (data) {
                areaInfo = 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: "get",
            url: "/pqs9000/fpyreport/qualifiedRate",
            dataType: "json",
            data: {
                startTime: startTime,
                endTime: endTime,
                area: area
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYERLONG();
            },
            success: function (data) {
                if (data.code === 500) {
                    layer.msg(data.message, {icon: 2, time: 2000})
                    //没有数据
                    resultData = null;
                } else {
                    resultData = data.body;
                }
                startQuery();
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

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

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#integritylist").width();
        if (width > 100) {
            initTable(resultData);
            window.clearInterval(it)
        }
    }

    //实例化表格
    function initTable(data) {
        var height = $(window).height() - 155;
        var length = Math.floor(height / 28);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#integritylist").DataTable();
        dataTable.clear().draw();
        dataTable = $('#integritylist').DataTable({
            columnDefs: [
                {
                    orderable: false,
                    targets: [0]
                }
            ],
            columns: [
                {width: "2%", data: null},
                {
                    width: "10%", data: "bdName", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 10) {
                            value = data.substring(0, 9) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
                {
                    width: "10%", data: "lineName", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 12) {
                            value = data.substring(0, 11) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
                {width: "6%", data: "businessType"},
                {width: "6%", data: "calssificationGrade", render: function (data, type, full, meta) {
                        return data==null?"/":data;
                    }},
                {width: "5%", data: "scale"},
                {width: "6%", data: "superiorsSubstation", render: function (data, type, full, meta) {
                        return data==null?"/":data;
                    }},
                {width: "6%", data: "hangLine", render: function (data, type, full, meta) {
                        return data==null?"/":data;
                    }},
                {width: "5%", data: "pt"},
                {width: "5%", data: "ct"},
                {width: "6%", data: "dlcmp"},
                {width: "6%", data: "devcmp"},
                {width: "6%", data: "xycmp"},
                {
                    width: "6%", data: "integrity",
                    render: function (data, type, full, meta) {
                        var temp = Number(data);
                        if (temp > 100) {
                            return 100;
                        } else if (temp < 0) {
                            return 0;
                        } else {
                            return temp;
                        }
                    }
                },
                {width: "8%", data: "harmDes"},
                {
                    width: "20%", data: "powerDes", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 21) {
                            value = data.substring(0, 20) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
            ],
            destroy: true,
            data: data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9000/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#integritylist_info").addClass("fl");
                $("#integritylist_paginate").addClass("fr");
                $("#integritylist_paginate").append("<div style='float:right;padding-top:4px;padding-left:10px'>到第 <input type='text' id='changePage' class='input-text' style='width:50px;height:28px;'> 页  <button class='btn btn-primary' id='dataTable-btn'>确定</button></div>");
                var table = $("#integritylist").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        var name = $area.find("option:selected").text();
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        startTime.replace("-", "");
        endTime.replace("-", "");
        new $.fn.dataTable.Buttons(dataTable, {
            buttons: [
                {
                    extend: 'csv',
                    title: name + startTime + '至' + endTime + '合格率',//导出csv名称
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                        format: {
                            body: function (data, rID, cID) {
                                if (cID === 0) {
                                    return rID + 1;
                                } else if (cID === 1 | cID === 2 | cID === 6 | cID === 7 | cID === 15) {
                                    let result;
                                    if (data.indexOf("title") > 0) {
                                        result = data.substring(data.indexOf("=") + 1, data.indexOf(">"));
                                    } else {
                                        result = data
                                    }

                                    if(cID === 1){
                                        if (result.lastIndexOf("_") > 0) {
                                            result = result.substring(0,result.lastIndexOf("_"));
                                        }
                                    }
                                    if (cID === 15) {
                                        let arr = result.split(";")
                                        if (arr.length == 0) {
                                            return result;
                                        } else {
                                            let resultStr = "";
                                            for (let i = 0; i < arr.length; i++) {
                                                if (i != arr.length - 1) {
                                                    resultStr += arr[i] + ';\n';
                                                }
                                            }
                                            return resultStr;
                                        }
                                    }
                                    return result;

                                } else {
                                    return data;
                                }
                            }
                        }
                    }
                }
            ]
        });
        modifyCss(dataTable);
        dataTable.on('order.dt search.dt',
            function () {
                dataTable.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
    }

    function modifyCss(dataTable) {
        dataTable.buttons().container().css("display", "inline-block");
        dataTable.buttons().container().css("float", "right");
        dataTable.buttons().container().css("top", "4px");
        dataTable.buttons().container().find("a").prepend("<i class='glyphicon glyphicon-share'></i>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }

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

    //搜索表中的数据
    function searchResult(value) {
        dataTable.search(value).draw();
    }
</script>
</html>
