<%@ 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/datatables/datatables.bootstrap.css">
<link rel="stylesheet"
	href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
<link rel="stylesheet" href="${ctx}/css/basic.css">
<style>
body {
	max-height: 500px;
}





th,td{
	white-space:nowrap;
}

</style>
</head>
<body style="overflow-y: hidden">
	<div class="container-fluid">
		<div class="form-inline mt10">
			<div class="row">
				<form class="form-inline ml15 header">
					<%@include file="../../include/time.jsp"%>
					<div class="form-group ml15">
						<label>告警等级:</label>
						<select class="form-control" id="alarmLevel" style="width: 60px">
							<option value="">全部</option>
							<option value="0">普通</option>
							<option value="1">中等</option>
							<option value="2">严重</option>
						</select>
					</div>
					<div class="form-group ml5">
						<label>装置/监测点等级:</label>
						<select class="form-control" id="lineGrade" style="width: 80px">

						</select>
					</div>
		            <div class="form-group ml5">
		                <label>处理状态:</label>
		                <select class="form-control" id="state" style="width: 60px">
		                    <option value="">全部</option>
		                    <option value="0">未处理</option>
		                    <option value="1">已处理</option>
		                </select>
		            </div>
		            <div class="form-group ml5">
		                <label>告警类型:</label>
		                <select class="form-control" id="type" style="width: 140px">

		                </select>
		            </div>

					<div class="form-group  mr10 fr mb3" style="margin-bottom: 3px"
						id="fliteData">
						<label>筛选数据:</label> <input type="text" class="form-control"
							onkeyup="searchResult(this.value)" placeholder="空格分开多条件筛选数据">
					</div>
					<button id="query" type="button" title="查询"
						class="btn themeBGColor ml10">
						<i class="glyphicon glyphicon-search"></i>
					</button>
				</form>
			</div>
		</div>
		<table id="vdlist" class="table table-striped table-bordered  dataTable no-footer">
			<thead>
				<tr role="row">
					<th class="text-center">告警类型</th>
					<th class="text-center">最新发生时间</th>
					<th class="text-center">告警等级</th>
					<th class="text-center">告警定位(装置/监测点)</th>
					<th class="text-center">描述</th>
					<th class="text-center">是否处理</th>
					<th class="text-center">处理人员</th>
					<th class="text-center">处理时间</th>
					<th class="text-center">监测点装置等级</th>
					<th class="text-center">操作</th>
				</tr>
			</thead>
		</table>
	</div>
	<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/jquery/jquery.dataTables.js"></script>
	<script src="${ctx}/js/plugin/datatables/datatables.bootstrap.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/bootstrap-table/bootstrap-table.js"></script>
	<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/js/plugin/bootstrap-table/bootstrap-table.js"></script>
	<script src="${ctx}/js/plugin/layui/layer.js"></script>
	<script src="${ctx}/js/plugin/datatables/dataTables.buttons.min.js"></script>
	<script src="${ctx}/js/plugin/datatables/buttons.html5.min.js"></script>
	<script src="${ctx}/js/basic.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/jspJS/utils/timeControl.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script type="text/javascript">
		$("#interval").val("月份");
		var resultData = null;
		var dataTable = null;
		$(document).ready(function() {
			loadselect("告警类型","type");
			loadLineGrade("终端等级","lineGrade")
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			getAlarmInfo(startTime, endTime,'','');
		})

		$("#query").click(function() {
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			var state = $("#state").val();
			var type = $("#type").val();
			var alarmLevel = $("#alarmLevel").val();
			var lineGrade = $("#lineGrade").val();
			getAlarmInfo(startTime, endTime,state,type,alarmLevel,lineGrade);
		});

		function getAlarmInfo(startTime, endTime , state, type,alarmLevel,lineGrade) {
		    var i ;
			$.ajax({
				type : "POST",
				url : "/pqs9900/alarm/getAlarmInfo",
				data : {
					startTime : startTime,
					endTime : endTime,
					state : state,
					type : type,
					alarmLevel:alarmLevel,
					lineGrade:lineGrade
				},
				async : false,
				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);
				}
			})
		}

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

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

		}

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

		//特殊处理，表头紧缩问题--end
		var height = $(window).height() - 30;

		function initTable(data) {
		    var height=$(window).height()-140;
		    dataTable=$("#vdlist").DataTable();
		    dataTable.clear().draw();
		    dataTable=$('#vdlist').DataTable({
				columns : [ {
					width : "5%",
					data : "type"
				}, {
					width : "10%",
					data : "timeid"
				}, {
					width : "5%",
					data : "alarmLevel",
					render : function(data, type, full, meta) {
						switch (data) {
						case "0":
							return '普通';
						case "1":
							return '中等';
						case "2":
							return '严重';
						}
					}
				}, {
					width : "30%",
					data : "null",
					render:function (data,type,full,meta) {
						let sub = full.subName ==null? ' - ':full.subName+' ';
						let dev = full.devName == null ? ' - ':full.devName+' ';
						let line = full.lineName == null ? '':'监测点名称: '+full.lineName+' '
						return '变电站名称: '+sub+'设备名称: '+dev+line
					}
				},{
					width : "30%",
					data : "descrpiption"
				}, {
					width : "50px",
					data : "state",
					render : function(data, type, full, meta) {
						switch (data) {
						case 0:
							return '未处理';
						case 1:
							return '已处理';
						}
					}
				}, {
					width : "10%",
					data : "username"
				}, {
					width : "10%",
					data : "ptime"
				},{
					width : "10%",
					data : "lineGrade",render:function (data, type, full, meta) {
						if(data == 0){
							return "极重要"
						}else if(data == 1){
							return "重要"
						}else if(data == 2){
							return "普通"
						}else if(data == 3){
							return "不重要"
						}else {
							return "/"
						}
					}
				},
	            {width: "120px",data:"alarmIndex",
	                render:function (data, type, full, meta) {
	                    var flag=true;
	                    if(full.state===1){
	                        flag=false;
	                    }
	                    var bxck;
	                    if(flag){
	                        bxck="<button onclick='detailInfo(\"" + data + "\",\"" + full.type+ "\",\"" + full.typeIndex+ "\",\"" + full.state+ "\",\"" + full.devLineType+ "\",\"" + full.ptime+ "\")' type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'>详细信息</button><button type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'  onclick='commit(\"" + data + "\",\"" + full.typeId+ "\",\"" + full.typeIndex+ "\",\"" + full.state+ "\",\"" + full.devLineType+ "\",\"" + full.type+ "\")' >&nbsp;处理&nbsp;</button>";
	                    }else{
	                        bxck="<button onclick='detailInfo(\"" + data + "\",\"" + full.type+ "\",\"" + full.typeIndex+ "\",\"" + full.state+ "\",\"" + full.devLineType+ "\",\"" + full.ptime+ "\")' type='button' class='btn themeBGColor' style='margin-right:10px;' href='javascript:void(0);'>详细信息</button><button type='button' class='btn themeBGDisableColor' style='margin-right:10px;' href='javascript:void(0);'  >已处理</button>";
	                    }
	                    return bxck;
	                }
	            } ],
				destroy : true,
				order : [],
				data : data,
				dom : 'rtip',
				lengthChange : false,
				autoWidth:true,
		        searching: true,
				scrollY : height,
				scrollX:true,
				lengthMenu : [20],
				language : {
					url : '/pqs9900/json/chine.json'
				},
			    createdRow: function ( row, data, index ) {
			    	if(data.alarmLevel=="1"){
			    		$('td', row).eq(2).css('color','#FFA500')
			    	}else if(data.alarmLevel=="2"){
			    		$('td', row).eq(2).css('color','#ED1C24')
			    	}else if(data.alarmLevel==0){
						$('td', row).eq(9).find("button").eq(1).css('display','none');
					}

			    	if(data.lineGrade == 0){
						$('td', row).eq(8).css('color','#ED1C24');
					}


			    },
		        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);
		            });
		         }
			});
			new $.fn.dataTable.Buttons(dataTable, {
				buttons: [
					{
						extend: 'csv',//导出格式
						title:'告警列表',//导出csv名称
						exportOptions:{
							columns :[0,1,2,3,4,5,6,7,8],//导出需要的列
							format:{
								body:function(data,rID,cID){//对导出内容的筛选 data 表格内容 rid 行索引 cid 列索引
									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","3px");
		    dataTable.buttons().container().appendTo('.header');
		    dataTable.buttons().container().after($("#fliteData")[0]);
		}

		//详细信息
		function detailInfo(alarmIndex,type,typeIndex,state,devLineType,processTime) {
			layer.open({
				type: 2,
				title: '告警详细信息',
				shadeClose: true,
				area: ['100%', '100%'],
				maxmin : false,
				content: 'alarmdetail?typeIndex='+typeIndex+'&state='+state+'&devLineType='+devLineType+'&processTime='+processTime+'&type='+type,
				scrollbar: false
			});

		}
		//点击按钮跳转到相关的操作界面
		function commit(alarmIndex,type,typeIndex,state,devLineType,typetype){

		    var ii ;
			layer.confirm('是否确认？',function(){
				if(typetype == '流量告警' || typetype == '流量通知'|| typetype == '流量预警'){
					parent.addTab('deviceproperty','终端运行管理')
				}else if(typetype == '装置类型不匹配' || typetype == '统计间隔不匹配'|| typetype=='接线方式不匹配'|| typetype=='系统对时启动异常'|| typetype=='装置上电'|| typetype=='装置掉电'){
					parent.addTab('devmanage','台账管理')
				}else if(typetype == '暂降事件推送异常'){
					parent.addTab('eventlog','暂降事件推送异常')
				}
				$.ajax({
					type : "POST",
					url : "/pqs9900/alarm/updateAlarmInfo",
					data : {
						type:type,
						typeIndex:typeIndex,
						devLineType:devLineType
					},
					beforeSend : function() {
						ii = 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 : 1,
								time : 2000
							})
						}
						//***********关闭loading
						ityzl_CLOSE_LOAD_LAYER(ii);

						var startTime = $("#startTime").val();
						var endTime = $("#endTime").val();
						getAlarmInfo(startTime, endTime,'','');
					}
				})
			})
		}



		function loadselect(dictypeName,div){
			var part='#'+div;
			$.ajax({
				method : "post",
				url : "/pqs9900/device/getselect",
				data : {
					dictypeName:dictypeName
				},
				async:false,
				success : function(data) {
					if(data == null){
						var message = dictypeName + '信息加载失败';
						layer.msg(message,{icon:1,time:1000});
					}else{
						var all = "<option selected value=''>全部</option>";
						$(part).append(all);
						$.each(data, function(i, item) {
							var option = $("<option value='"
									+ item.dicIndex + "'>"
									+ item.dicName + "</option>");
							$(part).append(option);
						})
					}
				}
			})
		}

		function loadLineGrade(dictypeName,div){
			var part='#'+div;
			$.ajax({
				method : "post",
				url : "/pqs9900/device/getselect",
				data : {
					dictypeName:dictypeName
				},
				async:false,
				success : function(data) {
					$(part).empty()
					if(data == null){
						var message = dictypeName + '信息加载失败';
						layer.msg(message,{icon:1,time:1000});
					}else{
						var all = "<option selected value=''>全部</option>";
						$(part).append(all);
						$.each(data, function(i, item) {
							var option = $("<option value='"
									+ item.dicLeave + "'>"
									+ item.dicName + "</option>");
							$(part).append(option);
						})
					}
				}
			})
		}

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