<%@ 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 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>
<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/jquery/jquery-ui.css">
<link rel="stylesheet"
	href="${ctx}/css/plugin/metroStyle/metroStyle.css">
<link rel="stylesheet" href="${ctx}/js/plugin/layerui/css/layui.css"
	media="all">
<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/basic.css">
<link rel="stylesheet" href="${ctx}/css/tip.css">
<style>
.glyphicon {
	top: 2px;
	left: 2px;
}

.queryButton {
	display: inline-block
}

.nav>li>a {
	padding: 2px 15px;
}

</style>
</head>
<body class="pd5" style="overflow: hidden;">
	<div class="container-fluid" style="background: #fff; margin-top: -5px;">
		<div class="form-inline pdt5">
			<form class="form-inline">
				<%@include file="../../include/time.jsp"%>
				<div class="form-inline queryButton">
					<button id="query" type="button" class="btn themeBGColor">
						<i class="glyphicon glyphicon-search"></i>
					</button>
					<button id="helper" type="button" class="btn btn-primary tip tip-bottom" data-tip="电压容忍度曲线详解">
						<i class="glyphicon glyphicon-info-sign" style="margin-left: -6px;margin-right: -3px;"></i>
					</button>
				</div>
			</form>
		</div>

		<ul id="myTab" class="nav nav-tabs pdt5">
			<li class="active"><a href="#itic" data-toggle="tab">ITIC</a></li>
			<li><a href="#f47" data-toggle="tab">SEMI F47</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
			<div id="itic" class="tab-pane fade in active">
				<div id="event1" style="width:100%;"></div>
				<div id="chart1"
					style="z-index: 9; position: absolute;">
					<table
						class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
						cellspacing="0" width="100%" role="grid"
						aria-describedby="example_info"
						style="width: 120%; font-size: xx-small;">
						<thead>
							<tr role="row">
								<th class="text-center">名称</th>
								<th class="text-center">事件总数</th>
								<th class="text-center">可容忍</th>
								<th class="text-center">不可容忍</th>
							</tr>
						</thead>
						<tbody>
							<tr role="row" class="odd text-center"
								style="background-color: transparent;">
								<td>事件个数</td>
								<td id="totalI"></td>
								<td id="standI"></td>
								<td id="unstandI"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="f47" class="tab-pane fade in">
				<div id="event2" style="width:100%;"></div>
				<div id="chart2"
					style="z-index: 9; position: absolute;">
					<table
						class="table table-striped table-bordered dataTable no-footer table-hover table-condensed"
						cellspacing="0" width="100%" role="grid"
						aria-describedby="example_info"
						style="width: 120%; font-size: xx-small;">
						<thead>
							<tr role="row">
								<th class="text-center">名称</th>
								<th class="text-center">事件总数</th>
								<th class="text-center">可容忍</th>
								<th class="text-center">不可容忍</th>
							</tr>
						</thead>
						<tbody>
							<tr role="row" class="odd text-center"
								style="background-color: transparent;">
								<td>事件个数</td>
								<td id="totalF"></td>
								<td id="standF"></td>
								<td id="unstandF"></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<canvas id='canvasipal' width='2000' height='900'
			style='display: none'></canvas>
	</div>
	<input type="hidden" value="${sessionScope.lineIndex}" id="lineIndex">
	<%--Common Modal --%>
	<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/layerui/layer.js"></script>
	<script src="${ctx}/js/plugin/layerui/layui.js" charset="utf-8"></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/echarts3D/echarts.js"></script>
	<script src="${ctx}/jspJS/monitor/showeventdatalist.js"></script>
	<script src="${ctx}/js/basic.js"></script>
	<script src="${ctx}/js/color.js"></script>
	<script src="${ctx}/js/plugin/xss/xss.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
	<script src="${ctx}/jspJS/utils/timeControl.js"></script>
	<script src="${ctx}/jspJS/utils/saveImage.js"></script>
	<script src="${ctx}/jspJS/utils/helper.js"></script>
	<script type="text/javascript" charset="utf-8">
		$("#query").click(function() {
			var lineIndex = $("#lineIndex").val();
		    lineIndex=filterXSS(lineIndex);
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			getEventData(lineIndex, startTime, endTime);
		});
		$("#helper").click(function (){
			toHelper("#dyrrd");
		});  
	</script>
</body>
</html>