<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>告警</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatables/buttons.dataTables.min.css">
<link rel="stylesheet" href="${ctx}/css/basic.css">
<style type="text/css">
	#query{
		float:right;
		margin:2px 17px -6px 0px;
		background-color:#006565;
	}
	.table > tbody > tr > td {
		padding : 3px;
	}
	th{
		white-space: nowrap
	}

</style>
</head>
<body style="overflow:hidden;">
	<div role="alert" style="background-color: #d9edf7;">
		    <shiro:hasPermission name="/pqs9200/business/glindex/#">
		        <button type="button" class="btn themeBGColor" id="query" style="margin-right: 4%"
		                onclick="jump()">
		            <i class="glyphicon glyphicon-random"></i>告警列表
		        </button>
		    </shiro:hasPermission>
            <table id="example"
		           class="table table-striped table-bordered dataTable no-footer"
		           cellspacing="0" width="100%" role="grid"
		           aria-describedby="example_info">
		        <thead>
		        <tr role="row">
		            <th class="text-center">发生时间</th>
		            <th class="text-center">告警类型</th>
		            <th class="text-center">告警描述</th>
		        </thead>
		    </table>
	</div>
	<script src="${ctx}/js/plugin/jquery.min.js"></script>
	<script src="${ctx}/js/plugin/layui/layer.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/bootstrap/bootstrap-datetimepicker.min.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/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/loading.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		var alarmlist = parent.alarmlist;

		initTable(alarmlist);
	});

	var table=null;
	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

	/**
	 * @param data
	 * @returns
	 * 初始化表格
	 */
	 function initTable(data) {
		   var  oTable = $('#example').DataTable({
		        destroy: true,
	            columns: [
	                {width: "30%", data: "timeid"},
	                {width: "20%", data: "type"},
	                {width: "50%", data: "descrpiption"}
	            ],
		        "aaSorting": [[0, "desc"]],
		        data: data,
		        dom: 'rt',
	            lengthChange: false,
		        scrollY: '185px',
		        lengthMenu: [12],
		        language: {
		            url: '/pqs9900/json/chine.json'
		        }
		    });
		}

	function jump(){
		window.top.addTab('alarm','告警信息');
		parent.layer.close(index);
	}
	</script>
</body>
</html>
