<%@ 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>
    <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/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/basicButton.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .tr {
            text-align: center;
        }
        .td {
            text-align: center;
            height: 48px;
            line-height: 48px
        }
        #resList {
            width: 1720px;
            min-width: 1720px;
        }

        .table > tbody > tr > td {
            padding: 3px;
            line-height: 1.42857143;
            vertical-align: top;
            border-top: 1px solid #ddd;
        }
        #calculate,#userDataList {
            margin-top: -20px;
        }
        body {
            overflow: hidden;
        }
        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            text-decoration: none;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="form-inline header mt10">
        <%@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="resList" class="table table-striped table-bordered dataTable no-footer">
        <thead>
        <tr>
            <th>供电公司</th>
            <th>变电站</th>
            <th>终端名称</th>
            <th>IP</th>
            <th>监测点名称</th>
            <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/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}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/js/color.js"></script>
<script>
    var $startTime=$("#startTime");
    var $endTime=$("#endTime");
    var dataTable=null;
    var resultData=null;
    $("#interval").val("月份");
    $(function () {
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        refresh(startTime,endTime);
    })

    //点击确定，去后台请求参数
    $("#query").click(function() {
        var startTime = $startTime.eq(0).val();
        var endTime = $endTime.eq(0).val();
        refresh(startTime,endTime);
    });
    //获取表格数据
    function refresh(startTime,endTime){
        var i ;
        $.ajax({
            type : "POST",
            url : "/pqs9000/responsibility/responsibilityDataList",
            dataType : "json",
            data : {
                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()-140;
        dataTable=$("#resList").DataTable();
        dataTable.clear().draw();
        dataTable=$('#resList').DataTable({
            order:[[8,"desc"]],
            columnDefs : [
                {
                    orderable : false,
                    targets : [6,9,10]
                }
            ],

            columns: [
                {width: "8%",data:"gdName", 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: "10%",data:"subName", 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: "11",data:"devName", 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: "8%",data:"ip"},
                {width: "8%",data:"lineName"},
                {width: "8%",data:"resType"},
                {width: "8%",data:"resTimes"},
                {width: "12%",data:"userData", render:function (data, type, full, meta) {
                        var value=data;
                        if(data.length>14){
                            value=data.substring(0,13)+"...";
                            value="<span title="+data+">"+value+"</span>";
                        }
                        return value;
                    }},
                {width: "10%",data:"time"},
                {width: "10%",data:"timeWin"},
                {width: "9%",data:"resIndex",
                    render:function (data, type, full, meta) {
                        var name=full.gdName+"->"+full.subName+"->"+full.devName+"->"+full.lineName;
                        var deleteButton="<button type='button' class='btn themeBGColor ml10'  href='javascript:void(0);' onclick='deleteRes(\"" + data + "\")' >删除</button>";
                        return "<button type='button' class='btn themeBGColor'  href='javascript:void(0);' onclick='viewDetail(\"" + data + "\","+"\"" + name + "\")' >查看详情</button>"+deleteButton;
                    }
                }
            ],
            autoWidth:false,
            serverSide : false,
            destroy : true,
            data : data,
            lengthChange: false,
            searching: true,
            dom: 'rtip',
            scrollY: height,
            scrollX: true,
            lengthMenu : [ 50 ],
            language : {
                url:'/pqs9000/json/chine.json'
            },
            fnDrawCallback: function(oTable) {
                $("#resList_info").addClass("fl");
                $("#resList_paginate").addClass("fr");
                $("#resList_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 = $("#resList").dataTable();
                $('#dataTable-btn').click(function(e) {
                    if($("#changePage").val() && $("#changePage").val() > 0) {
                        var redirectpage = $("#changePage").val() - 1;
                    } else {
                        var redirectpage = 0;
                    }
                    table.fnPageChange(redirectpage);
                });
            }
        });

        new $.fn.dataTable.Buttons( dataTable, {
            buttons: [
                {
                    extend: 'csv',
                    title:'谐波责任列表',//导出csv名称
                    exportOptions:{
                        columns :[0,1,2,3,4,5,6,7,8,9],
                        format:{
                            body:function(data,rID,cID){
                                if(cID===8){
                                    return data.replace("0","O");
                                }else if(cID===1|cID===7|cID===2|cID===3){
                                    if(data.indexOf("title")>0){
                                        return data.substring(data.indexOf("=")+1,data.indexOf(">"));
                                    }else{
                                        return data
                                    }
                                } else{
                                    return data;
                                }
                            }
                        }
                    }
                }
            ]
        } );
        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().find("a").before("<button id='calculate' type='button' class='btn btn-primary mr10' > <i class='fa fa-line-chart'></i>谐波贡献度计算</button>");
        dataTable.buttons().container().find("a").before("<button id='userDataList' type='button' class='btn btn-primary mr10' > <i class='fa fa-list-ul'></i>用采数据列表</button>");
        dataTable.buttons().container().appendTo('.header');
        dataTable.buttons().container().after($("#fliteData")[0]);
    }


    //点击贡献度计算
    $("body").on("click","#calculate",function(){
        layer.open({
            type: 2,
            title: '贡献度计算',
            maxmin : false,
            area : ['100%' , '100%'],
            content: '/pqs9000/responsibility/calculate',
            scrollbar: false,
            end:function () {
                var startTime = $startTime.eq(0).val();
                var endTime = $endTime.eq(0).val();
                refresh(startTime,endTime);
            }
        });
    })

    //点击用采数据列表
    $("body").on("click","#userDataList",function(){
        layer.open({
            type: 2,
            title: '用采数据列表',
            maxmin : false,
            area : ['100%' , '100%'],
            content: '/pqs9000/responsibility/userDataList',
            scrollbar: false
        });
    })

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

    //特殊处理，表头紧缩问题--start
    var it=null;
    function startQuery() {
        //实时刷新时间单位为毫秒
        it= setInterval('refreshQuery()',100);

    }
    /* 刷新查询 */
    function refreshQuery(){
        var width=$("#resList").width();
        if(width>100){
            initTable(resultData);
            window.clearInterval(it)
        }
    }
    //特殊处理，表头紧缩问题--end
    
    //查看谐波详情
    function viewDetail(resIndex,name) {
        layer.open({
            id: 'viewDetail',
            type: 2,
            title: "<span class='fr font12'>"+name+"</span>",
            maxmin: false,
            resize: false,
            shadeClose: true, //点击遮罩关闭层
            area: ['100%', '100%'],
            content: '/pqs9000/responsibility/viewDetail?resIndex='+resIndex,
            scrollbar: false
        });
    }

    //根据索引删除指定记录以及本地文件夹下的所有文件
    function deleteRes(resIndex) {
        var i ;
        $.ajax({
            type : "POST",
            url : "/pqs9000/responsibility/deleteResponsibility",
            dataType : "json",
            data : {
                resIndex : resIndex,
            },
            beforeSend: function () {
                i = ityzl_SHOW_LOAD_LAYER();
            },
            success : function(data) {
                if (data.code === 500) {
                    layer.msg(data.message,{icon:2,time:2000})
                } else {
                    layer.msg(data.message,{icon:6,time:2000})
                }
                var startTime = $startTime.eq(0).val();
                var endTime = $endTime.eq(0).val();
                refresh(startTime,endTime);
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(i);
            }
        });
    }

</script>
</html>
