<%@ 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;
}

table {
	width: 100% !important;
}
</style>
</head>
<body>
	<div class="container-fluid">
		<table id="vdlist" style="width: 100%" 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>
				</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-table/bootstrap-table.js"></script>
	<script src="${ctx}/js/plugin/bootstrap-table/locales/bootstrap-table-zh-CN.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}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/jspJS/utils/common.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script type="text/javascript">
		$("#interval").val("月份");
		var resultData = null;
		var dataTable = null;
		let devLineType = getQueryString("devLineType")
		let typeIndex = getQueryString("typeIndex")
		let state = getQueryString("state")
		let type = getQueryString("type")
		let processTime;
		if(state && state == '1'){
			processTime = getQueryString("processTime")
		}

		$(document).ready(function() {
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			getAlarmInfo();
		})



		function getAlarmInfo() {
		    var i ;
			$.ajax({
				type : "POST",
				url : "/pqs9900/alarm/getAlarmInfoDetail",
				data : {
					typeIndex : typeIndex,
					devLineType : devLineType,
					state : state,
					type : type,
					processTime:processTime
				},
				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 : "10%",
					data : "type"
				}, {
					width : "15%",
					data : "timeid"
				}, {
					width : "8%",
					data : "alarmLevel",
					render : function(data, type, full, meta) {
						switch (data) {
						case "0":
							return '普通';
						case "1":
							return '中等';
						case "2":
							return '严重';
						}
					}
				}, {
					width : "300px",
					data : "descrpiption"
				}, {
					width : "7%",
					data : "state",
					render : function(data, type, full, meta) {
						switch (data) {
						case 0:
							return '未处理';
						case 1:
							return '已处理';
						}
					}
				}, {
					width : "10%",
					data : "username"
				}, {
					width : "10%",
					data : "ptime"
				}],
				destroy : true,
				order : [1, 'desc'],
				data : data,
				dom : 'rtip',
				lengthChange : false,
				scrollCollapse:true,
		        searching: true,
				scrollY : height,
				lengthMenu : [ 15 ],
				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')
			    	}
			    },
		        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);
		            });
		         }
			});
		    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().appendTo('.header');
		    dataTable.buttons().container().after($("#fliteData")[0]);
		}


	</script>
</body>
</html>
