<%@ 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.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">
    <style>
        .panel-default > .panel-heading{
            background-color:#ddd !important
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline header">
        <div class="form-group fr mr10" id="fliteData">
            <label>筛选数据：</label>
            <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
            <button class="btn btn-primary"  id="export">导出详情</button>
        </div>
    </div>
    <table id="runException" class="table table-striped table-bordered dataTable no-footer" style="width: 100%">
        <thead>
        <tr>
            <th>省份</th>
            <th>供电公司</th>
            <th>变电站</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/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/layui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    var height = $(window).height() - 135;
    var dataTable;
    var dataObject;
    let timeId = getQueryString("timeId")
    let lineGrade = getQueryString("lineGrade")


    $(function () {
        refresh()

    });


    //获取表格数据
    function refresh() {

          let loading;
          $.ajax({
              type: "POST",
              url: "/pqs9900/inStrategy/getRunExceptionDetail",
              dataType: 'json',
              data: {
                  timeId: timeId,
                  lineGrade: lineGrade
              },
              beforeSend: function () {
                  loading = ityzl_SHOW_LOAD_LAYER()
              },
              success: function (data) {
                  if (data.code == 200) {
                      dataObject = data.body
                      initTable(dataObject)
                  } else {
                      initTable(null)
                  }
                  ityzl_CLOSE_LOAD_LAYER(loading)
              }
          })

    }

    //实例化表格
    function initTable(data) {

        var length = Math.floor(height / 28);
        if (length < 1) {
            length = 1;
        }
        dataTable = $("#runException").DataTable();
        dataTable.clear().draw();
        dataTable = $('#runException').DataTable({
            columnDefs: [
                {
                    orderable: false,
                    targets: [5]
                }
            ],
            columns: [

                {width: "20%", data: "provinceName"},
                {width: "20%", data: "gdName"},
                {width: "20%", data:"subName"},
                {width: "20%", data:"scale"},
                {width: "20%", data:"devName"},
                {width: "20%", data: "devIndex", render:function (data, type, full, meta) {
                        return '<button class="btn btn-primary" onclick="detailInfo(\''+timeId+'\',\''+data+'\')">查看详情</button>'
                    }},
            ],
            destroy: true,
            data: data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: true,
            lengthMenu: [length],
            language: {
                url: '/pqs9900/json/chine.json'
            },
            fnDrawCallback: function (oTable) {
                $("#runException_info").addClass("fl");
                $("#runException_paginate").addClass("fr");
                $("#runException_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 = $("#runException").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();
    }

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

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

    }

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




    $("#export").click(function () {
        if (dataObject != null) {
            if (dataObject.length != 0) {
                let html = '序号,时间,供电公司,变电站,设备名称,数据完整性是否达标,数据完整性(%),告警事件,中断详情,流量使用率,终端等级,\n'
                let time = formatTime(dataObject[0].timeId,2)
                for (let i = 0; i < dataObject.length; i++) {

                    let overLimit = dataObject[i].overLimit == 1 ?"否":"是";
                    let alarm = dataObject[i].alarmDesc ==null ?"/":dataObject[i].alarmDesc
                    let off =dataObject[i].comoutDesc==null?"/":dataObject[i].comoutDesc
                    let lineGrade =  toChange(dataObject[i].lineGrade)
                    let limitValue;
                    if(dataObject[i].overLimit == 0){
                        limitValue='/'
                    }else {
                        limitValue=dataObject[i].limitValue
                    }
                    let item =  i+1+",\t\t"+time+ "\t,"+dataObject[i].gdName + "," + dataObject[i].subName + "," + dataObject[i].devName +","+overLimit+","+limitValue+","+alarm+","+off+","+dataObject[i].flowNum+","+lineGrade+",\n"
                    html+=item;
                }
                var aaaa = "data:text/csv;charset=utf-8,\ufeff" + html;
                var link = document.createElement("a");
                link.setAttribute("href", aaaa);
                link.setAttribute("download", time+"终端异常详情" + ".csv");
                link.click();




            }
        }

    })


    function detailInfo(time,devIndex) {
        layer.open({
            type: 2,
            title: time+'日 终端异常通告详情 ',
            maxmin : false,
            area : ['40%' , '90%'],
            content: 'terminalrundetailopen?timeId='+time+'&devIndex='+devIndex,
            scrollbar: false
        });
    }

    function toChange(lineGrade) {
        switch (lineGrade){
            case 0: return "极重要";
            case 1: return "重要";
            case 2: return "普通";
            case 3: return "不重要";
            default : return "/"
        }
    }



</script>
</html>
