<%@ 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/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <style>
        body {
            overflow: hidden;
        }

        .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">
        <div class="form-group fr ml10" id="levelDiv">
            <label>合格率等级：</label>
            <select class="form-control" id="dataLevel">
                <option value="全部">全部</option>
                <option value="优">优</option>
                <option value="良">良</option>
                <option value="差">差</option>
            </select>
        </div>
        <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="steadylist" 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>负序电流(%)</th>
            <th>间谐波电压含有率(%)</th>
        </tr>
        </thead>
    </table>
</div>
<input id="_startTime" value="${startTime}" hidden>
<input id="_endTime" value="${endTime}" hidden>
<input id="_area" value="${area}" hidden>
</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/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}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var dataTable = null;
    var resultData = null;
    var excellentData = [];
    var benignData = [];
    var badData = [];
    $(function () {
        var startTime = $("#_startTime").val();
        var endTime = $("#_endTime").val();
        var area = $("#_area").val();
        startTime = filterXSS(startTime);
        endTime = filterXSS(endTime);
        area = filterXSS(area);
        refresh(startTime, endTime, area);
    })

    //获取表格数据
    function refresh(startTime, endTime, area) {
        var i;
        $.ajax({
            type: "POST",
            url: "/pqs9000/area/outOfLimitDetail",
            dataType: "json",
            data: {
                area: area,
                startTime: startTime,
                endTime: endTime
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            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 initTable(data) {
        var height = $(window).height() - 155;
        var length = Math.floor(height / 28);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#steadylist").DataTable();
        dataTable.clear().draw();
        dataTable = $('#steadylist').DataTable({
            order: [],
            autoWidth: false,
            columnDefs: [
                {
                    orderable: false,
                    targets: [0]
                }
            ],
            columns: [
                {
                    width: "8%", data: "substation", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 8) {
                            value = data.substring(0, 7) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
                {
                    width: "9.09%", data: "lineName", render: function (data, type, full, meta) {
                        var value = data;
                        if (data.length > 8) {
                            value = data.substring(0, 7) + "...";
                            value = "<span title=" + data + ">" + value + "</span>";
                        }
                        return value;
                    }
                },
                {
                    width: "9.09%",
                    data: "frequency",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "flicker",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "uBalance",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "harmVoltage",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "voltageDeviation",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "harmElec",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "9.09%",
                    data: "iNeg",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                },
                {
                    width: "10%",
                    data: "inUharm",
                    render: function (data, type, full, meta) {
                        return getValue(Number(data));
                    }
                }
            ],
            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) {
                $("#steadylist_info").addClass("fl");
                $("#steadylist_paginate").addClass("fr");
                $("#steadylist_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 = $("#steadylist").dataTable();
                $('#dataTable-btn').click(function (e) {
                    if ($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });
        modifyCss(dataTable);
    }

    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]);
    }

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


    $("#dataLevel").on("change", function () {
        const level = $(this).val();
        switch (level) {
            case "全部":
                initTable(resultData);
                break;
            case "优":
                initTable(excellentData);
                break;
            case "良":
                initTable(benignData);
                break;
            case "差":
                initTable(badData);
                break;
            default:
                initTable(resultData);
                break;
        }


    })

    //筛选出所有负荷数据
    function dealWithAllData(resultData) {
        for (let i = 0; i < resultData.length; i++) {
            if (resultData[i].frequency >= 90 && resultData[i].flicker >= 90 && resultData[i].uBalance >= 90 && resultData[i].harmVoltage >= 90 && resultData[i].voltageDeviation >= 90 && resultData[i].harmElec >= 90 && resultData[i].iNeg >= 90 && resultData[i].inUharm >= 90) {
                excellentData.push(resultData[i]);
            } else if (resultData[i].frequency < 60 || resultData[i].flicker < 60 || resultData[i].uBalance < 60 || resultData[i].harmVoltage < 60 || resultData[i].voltageDeviation < 60 || resultData[i].harmElec < 60 || resultData[i].iNeg < 60 || resultData[i].inUharm < 60) {
                badData.push(resultData[i])
            } else {
                benignData.push(resultData[i])
            }
        }
    }

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

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

    }

    /* 刷新查询 */
    function refreshQuery() {
        var width = $("#steadylist").width();
        if (width > 100) {
            $("#dataLevel").val("差");
            if (resultData == null) {
                resultData = [];
            }
            //筛选出数据
            dealWithAllData(resultData);
            //默认显示差的数据
            initTable(badData);
            window.clearInterval(it)
        }
    }

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

    function getValue(temp) {
        var value = temp;
        if (temp > 100) {
            value = 100;
        }
        if (temp < 0) {
            value = 0;
        }
        var color = getColor(value)
        return "<span style='color:" + color + "'>" + temp + "</span>";
    }

    //根据在线率获取颜色
    function getColor(data) {
        if (data >= 90) {
            return green;
        } else if (data < 60) {
            return red;
        } else {
            return yellow;
        }
    }
</script>
</html>
