<%@ 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>
    <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}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/buttons.dataTables.min.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/bootstrapSwitch/bootstrap-switch.min.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">
    <style>
        .tr {
            text-align: center;
        }

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

        #vdlist {
            min-width: 1880px;
        }

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

        body {
            overflow: hidden;
        }
    </style>
</head>
<body class="mbody pdt5 pdb5">
<div class="container-fluid">
    <div class="form-inline header">
        <label class="form-group">区域：</label>
        <div class="disinlineb">
            <input id="area" class="form-control" style="width: 100px" 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: 100px;height: 147px;border: 2px solid #C9CBCE;overflow: auto;top: 32px;background: #fff;z-index: 100;border-radius: 2px">
            </div>
        </div>
       	<div class="form-group">
		    <input type="text" class="form-control form_datetime con"  autocomplete="off"
		           id="startTime" style="width: 138px">
		</div>
		&nbsp;—
		<div class="form-group">
		    <input type="text" class="form-control form_datetime con" autocomplete="off"
		           id="endTime" style="width: 138px">
		</div>
        <div class="form-group has-feedback  ml10">
            <label>统计类型：</label>
            <input type="checkbox" checked class="checkbox"/>
        </div>
        <div class="form-group has-feedback  ml10">
            <label class="form-group">触发类型：</label>
            <select class="form-control" id="waveType">
				<option selected value="">全部</option>
				<option value="0">扰动</option>
				<option value="1">暂降</option>
				<option value="2">暂升</option>
				<option value="3">中断</option>
				<option value="4">其他</option>
				<option value="5">录波</option>
            </select>
        </div>
        <button id="query" type="button" class="btn btn-primary ml5">
            <i class="glyphicon glyphicon-search"></i>
        </button>
        <div class="form-group fr mr10">
        	<button id='downloadWave' type='button' class='btn btn-primary mr10' >
        	<i class='glyphicon glyphicon-download'></i>导出</button>
        </div>
        <div class="form-group fr mr10" id="fliteData">
<%--        <label>筛选数据：</label>--%>
            <input type="text" class="form-control" onkeyup="searchResult(this.value)" placeholder="筛选数据" style="width: 110px">
        </div>
    </div>
    <table id="vdlist" class="table table-striped table-bordered dataTable no-footer">
        <thead>
        <tr>
            <th width="20px"><input type="checkbox" class="icheckbox_minimal" id="all_checked"></th>
            <th>序号</th>
            <th class="hidden">监测点ID</th>
            <th>暂态事件发生时刻</th>
            <th>供电公司</th>
            <th>变电站</th>
            <th>网络参数</th>
            <th>监测点</th>
            <th>电压等级</th>
            <th>暂降（骤升）幅值(%)</th>
            <th>持续时间(s)</th>
            <th>严重度</th>
            <th>触发类型</th>
            <th>暂态类型</th>
            <th>暂态原因</th>
        </tr>
        </thead>
    </table>
</div>
</body>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.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}/js/plugin/laydate/laydate.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.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/dataTables.buttons.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/buttons.html5.min.js"></script>
<script src="${ctx}/js/basic.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/jspJS/utils/loading.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 type="text/javascript">
var tiggleValue = "online";
var $area = $("#area");
var $startTime = $("#startTime");
var $endTime = $("#endTime");
var $waveType = $("#waveType");
$(document).ready(function() {
    //初始化按钮开关
    $(".checkbox").bootstrapSwitch({
        onText: "在线",      // 设置ON文本
        offText: "离线",    // 设置OFF文本
        onColor: "primary",// 设置ON文本颜色     (info/success/warning/danger/primary)
        offColor: "primary",  // 设置OFF文本颜色        (info/success/warning/danger/primary)
        size: "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
        handleWidth: "60",//设置控件宽度
        // 当开关状态改变时触发
        onSwitchChange: function (event, state) {
            if (state === true) {
                tiggleValue = "online";
            } else {
                tiggleValue = "offline";
            }
        }
    });

	//执行一个laydate实例
	laydate.render({
		elem: '#startTime', //指定元素
		type: 'datetime'
	});

	laydate.render({
		elem: '#endTime', //指定元素
		type: 'datetime'
	});

    $("#startTime").val(getStartime());
    $("#endTime").val(getEndTime());

    flush();
})

//点击确定，去后台请求参数
$("#query").click(function () {
    var area = $area.eq(0).attr("index");
    var startTime = $startTime.eq(0).val();
    var endTime = $endTime.eq(0).val();
    var waveType = $waveType.val();
    refresh(area, startTime, endTime, waveType);
});

function getStartime() {
	var date = new Date();// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date
			.getMonth() + 1)
			+ '-';
	var D = change(date.getDate());

	var H = "00";
	var m = "00";
	var S = "00";
	return Y + M + D + ' ' + H + ':' + m + ':' + S;
}

function getEndTime() {
	var date = new Date();// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
	var Y = date.getFullYear() + '-';
	var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date
			.getMonth() + 1)
			+ '-';
	var D = change(date.getDate());

	var H = change(date.getHours());
	var m = change(date.getMinutes());
	var S = change(date.getSeconds());
	return Y + M + D + ' ' + H + ':' + m + ':' + S;
}

function change(t) {
	if (t < 10) {
		return "0" + t;
	} else {
		return t;
	}
}

//初始化区域
function flush() {

    $.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();
            var waveType = $waveType.val();
            refresh(area, startTime, endTime, waveType);
        }
    })
}
function refresh(area, startTime, endTime, waveType) {
    var i;
    $.ajax({
        type: "POST",
        url: "/pqs9200/report/getEventList",
        dataType: "json",
        data: {
            startTime: startTime,
            endTime: endTime,
            area: area,
            type: tiggleValue,
            waveType : waveType
        },
        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;
            }
            level=data.result;
            startQuery();
            //***********关闭loading
            ityzl_CLOSE_LOAD_LAYER(i);
        }
    });
}


//实例化暂降事件表格
function initTable(data) {
    var height = $(window).height() - 140;
    dataTable = $("#vdlist").DataTable();
    dataTable.clear().draw();
    dataTable = $('#vdlist').DataTable({
        order: [],
        columnDefs: [
            {
                orderable: false,
                targets: [0, 1, 14]
            }, {
                visible: false, targets: 2
            }
        ],
        columns: [
            {
                width: "2%", data: "eventDetailIndex",
                render: function (data, type, full, meta) {
                    if (full.fileFlag === "0") {
                        return "<input type ='checkbox' name='disable' class='icheckbox_minimal' disabled >";
                    } else {
                        return "<input type ='checkbox' name='test' class='icheckbox_minimal' value='" + data + "'>";
                    }
                }
            },
            {width: "3%", data: null},
            {width: "4%", data: "lineId"},
            {width: "9%", data: "time"},
            {width: "7%", data: "gdName"},
            {
                width: "6%", data: "subName", 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: "7%", data: "ip"},
            {
                width: "7%", data: "lineName", 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: "6%", data: "scale", type: "number-fate"},
            {width: "9%", data: "eventValue"},
            {width: "7%", data: "persistTime"},
            {
                width: "5%", data: "severity",type: "number-Value",render: function (data, type, full, meta) {
                    return displayYzd(data, full.persistTime,full.eventValue,full.waveType);
                }
            },
            {
                width: "5%", data: "waveType", render: function (data, type, full, meta) {
                    return displayWaveType(data);
                }
            },
            {
                width: "5%", data: "eventType", render: function (data, type, full, meta) {
                    return displayValue(data,full.waveType);
                }
            },
            {
                width: "6%", data: "eventReason", render: function (data, type, full, meta) {
                    return displayValue(data,full.waveType);
                }
            }
        ],
        destroy: true,
        data: data,
        lengthChange: false,
        searching: true,
        dom: 'rtip',
        scrollY: height,
        scrollX: true,
        lengthMenu: [50],
        language: {
            url: '/pqs9200/json/chine.json'
        },
        fnDrawCallback: function (oTable) {
            $("#vdlist_info").addClass("fl");
            $("#vdlist_paginate").addClass("fr");
            $("#vdlist_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 = $("#vdlist").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();
    dataTable.on('order.dt search.dt',
        function () {
            dataTable.column(1, {
                search: 'applied',
                order: 'applied'
            }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();
}

//实现全选功能
$("#all_checked").click(function () {
    $('[name=test]:checkbox').prop('checked', this.checked);//checked为true时为默认显示的状态
});

//实现反选功能
$("#checkrev").click(function () {
    $('[name=test]:checkbox').each(function () {
        this.checked = !this.checked;
    });
});

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

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

}

/* 刷新查询 */
function refreshQuery() {
    var width = $("#vdlist").width();
    if (width > 100) {
        initTable(resultData);
        window.clearInterval(it)
    }
}
//获取严重度显示的值
function displayYzd(data, persisttime, eventvaule,waveType) {
    var yzd = 0;
    if (null === data | data === 0.0) {
        //根据持续时间计算出严重度
        yzd = calculateYzd(persisttime, eventvaule);
    } else {
        yzd = data;
    }
    //判断是否为暂升事件
    if (eventvaule > 100) {
        yzd = "/";
        return "<span style='color:#000'>" + yzd + "</span>";
    }
    if(waveType === 2 | waveType === 5){
        yzd = "/";
        return "<span style='color:#000'>" + yzd + "</span>";
    }
   //判断是否为暂升事件
       if(0<=yzd&yzd<=1){
           return "<span style='color:#22B14C'>"+yzd+"</span>";
       }else if(yzd<=2){
           return "<span style='color:#3F48CC'>"+yzd+"</span>";
       }else if(yzd<=5){
           return "<span style='color:#FFA500'>"+yzd+"</span>";
       }else if(yzd<=10){
           return "<span style='color:#FF7F27'>"+yzd+"</span>";
       }else{
           return "<span style='color:#ED1C24'>"+yzd+"</span>";
       }
}

//计算严重度
function calculateYzd(persisttime, eventvaule) {
    persisttime = persisttime * 1000;
    eventvaule = eventvaule / 100;
    var yzd = 0;
    if (persisttime <= 20) {
        yzd = 1 - eventvaule;
    } else if (persisttime > 20 && persisttime <= 200) {
        yzd = 2 * (1 - eventvaule);
    } else if (persisttime > 200 && persisttime <= 500) {
        yzd = 3.3 * (1 - eventvaule);
    } else if (persisttime > 500 && persisttime <= 10000) {
        yzd = 5 * (1 - eventvaule);
    } else {
        yzd = 10 * (1 - eventvaule);
    }
    if (eventvaule > 1) {
        yzd = "/";
    } else {
        yzd = yzd.toFixed(3);
    }
    return yzd;
}

//获取暂降类型暂降原因显示的值
function displayValue(data, waveType) {
    if(waveType === 2 | waveType === 5){
        return "/"
    }
    return data;
}

//处理触发类型
function displayWaveType(data) {
    switch (data) {
        case 0:
            return '扰动';
        case 1:
            return '暂降';
        case 2:
            return '暂升';
        case 3:
            return '中断';
        case 4:
            return '其他';
        case 5:
            return '录波';
        case 6:
            return '外部录入';
    }

}

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

//点击下载
$("body").on("click", "#downloadWave", function () {
    var indexs = [];
    var $checkboxs = $("[name=test]:checked");
    var length = $checkboxs.length;
    if (length === 0) {
        layer.msg('请选中需要下载的波形', {icon: 2, time: 2000});
    }
//     else if (length > 5) {
//         layer.msg('最多同时下载5个波形数据', {icon: 2, time: 2000});
//     }
    else {
        for (var i = 0; i < length; i++) {
            indexs.push($checkboxs.eq(i).val())
        }
        //执行波形下载
        downloadFile(indexs);
    }
})

//下载波形
function downloadFile(index) {
    var i;
    $.ajax({
        type: "post",
        url: "/pqs9200/report/createEventReport",
        dataType: "json",
        data: {
            index: index
        },
        beforeSend: function () {
            i = ityzl_SHOW_EVENT_LOAD();
        },
        success: function (data) {
            if (data.code === 200) {
                downloadZip();
            } else {
                layer.msg(data.message, {icon: 2, time: 1000});
            }
            ityzl_CLOSE_LOAD_LAYER(i);
        }
    })
}

function downloadZip() {
    window.location.href = '/pqs9200/report/downEventReport';
}
</script>
</html>

