<%@ 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>
    		#showeventdensity{
    			 width:50%;
    			 height: 255px;
    			 margin-top: 10px;
    			 left:50%;
    		}
	    	@media screen and (min-width: 1200px) and (max-width:1400px) and (max-height:490px){
				#showeventdensity{
					height:300px;
				}
			}
			.glyphicon {
			    top: 2px;
			    left: 2px;
		    }
		    .queryButton{
		    	display:inline-block
		    }
		    canvas{
		    	 width:744px;
    			 height: 210px;
		    }
		    html{
		    	background:white;
		    }
    </style> 
</head>

<body class="pd15">
    <div style="background:#fff;margin-top:-15px;">
    	<div class="form-inline pdt10">
					<form class="form-inline">
						<%@include file="../../include/time.jsp"%>
						<div class="form-inline queryButton">
							<button id="query" type="button" class="btn btn-primary">
								<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>
    <div class="mt20">
    	<div id="showeventdensity"></div>
    	<div id="disdip" style="z-index:9;position:relative;margin-top: -270px;width:50%;">
    			DISDIP表格:国际发配电联盟(UNIPEDE)
	    		<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: 100%;font-size: xx-small;">
	    			<thead>
	    			<tr role="row">
	    			<th class="text-center">剩余电压\持续时间</th>
	    			<th class="text-center">20ms</th>
	    			<th class="text-center">100ms</th>
	    			<th class="text-center">500ms</th>
	    			<th class="text-center">1s</th>
	    			<th class="text-center">3s</th>
	    			<th class="text-center">20s</th>
	    			<th class="text-center">60s</th>
	    			<th class="text-center">180s</th>
	    			</tr>
	    			</thead>
	    			<tbody>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T1D1R1"></td><td id="T1D1R2"></td>
	    			<td id="T1D1R3"></td><td id="T1D1R4"></td><td id="T1D1R5"></td><td id="T1D1R6"></td><td id="T1D1R7"></td><td id="T1D1R8"></td><td id="T1D1R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T1D2R1"></td><td id="T1D2R2"></td>
	    			<td id="T1D2R3"></td><td id="T1D2R4"></td><td id="T1D2R5"></td><td id="T1D2R6"></td><td id="T1D2R7"></td><td id="T1D2R8"></td><td id="T1D2R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T1D3R1"></td><td id="T1D3R2"></td>
	    			<td id="T1D3R3"></td><td id="T1D3R4"></td><td id="T1D3R5"></td><td id="T1D3R6"></td><td id="T1D3R7"></td><td id="T1D3R8"></td><td id="T1D3R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T1D4R1"></td><td id="T1D4R2"></td>
	    			<td id="T1D4R3"></td><td id="T1D4R4"></td><td id="T1D4R5"></td><td id="T1D4R6"></td><td id="T1D4R7"></td><td id="T1D4R8"></td><td id="T1D4R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T1D5R1"></td><td id="T1D5R2"></td>
	    			<td id="T1D5R3"></td><td id="T1D5R4"></td><td id="T1D5R5"></td><td id="T1D5R6"></td><td id="T1D5R7"></td><td id="T1D5R8"></td><td id="T1D5R9"></td></tr>
	    			</tbody>
	    		</table>
			</div>
			<div id="iec411" style="z-index:9;position:relative;margin-top: 10px;width:50%;">
				IEC 61000-4-11:(用电终端的电压暂降抗度)
	    		<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: 100%;font-size: xx-small;">
	    			<thead>
	    			<tr role="row">
	    			<th class="text-center">剩余电压\持续时间</th>
	    			<th class="text-center">10~20ms</th>
	    			<th class="text-center">20~100ms</th>
	    			<th class="text-center">0.1~0.2s</th>
	    			<th class="text-center">0.2~0.5s</th>
	    			<th class="text-center">0.5~1s</th>
	    			<th class="text-center">>1s</th>
	    			</tr>
	    			</thead>
	    			<tbody>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T2D1R1"></td><td id="T2D1R2"></td>
	    			<td id="T2D1R3"></td><td id="T2D1R4"></td><td id="T2D1R5"></td><td id="T2D1R6"></td><td id="T2D1R7"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T2D2R1"></td><td id="T2D2R2"></td>
	    			<td id="T2D2R3"></td><td id="T2D2R4"></td><td id="T2D2R5"></td><td id="T2D2R6"></td><td id="T2D2R7"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T2D3R1"></td><td id="T2D3R2"></td>
	    			<td id="T2D3R3"></td><td id="T2D3R4"></td><td id="T2D3R5"></td><td id="T2D3R6"></td><td id="T2D3R7"></td></tr>
	    			</tbody>
	    		</table>
			</div>
			<div id="iec28" style="z-index:9;position:relative;margin-top: 70px;bottom:60px;width:100%;">
				IEC 61000-2-8:(公共电网电压暂降测量统计)
	    		<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: 100%;font-size: xx-small;">
	    			<thead>
	    			<tr role="row">
	    			<th class="text-center">剩余电压\持续时间</th>
	    			<th class="text-center">0.01~0.1s</th>
	    			<th class="text-center">0.1~0.25s</th>
	    			<th class="text-center">0.25~0.5s</th>
	    			<th class="text-center">0.5~1s</th>
	    			<th class="text-center">1~3s</th>
	    			<th class="text-center">3~20s</th>
	    			<th class="text-center">20~60s</th>
	    			<th class="text-center">60~180s</th>
	    			</tr>
	    			</thead>
	    			<tbody>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D1R1"></td><td id="T3D1R2"></td>
	    			<td id="T3D1R3"></td><td id="T3D1R4"></td><td id="T3D1R5"></td><td id="T3D1R6"></td><td id="T3D1R7"></td><td id="T3D1R8"></td><td id="T3D1R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D2R1"></td><td id="T3D2R2"></td>
	    			<td id="T3D2R3"></td><td id="T3D2R4"></td><td id="T3D2R5"></td><td id="T3D2R6"></td><td id="T3D2R7"></td><td id="T3D2R8"></td><td id="T3D2R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D3R1"></td><td id="T3D3R2"></td>
	    			<td id="T3D3R3"></td><td id="T3D3R4"></td><td id="T3D3R5"></td><td id="T3D3R6"></td><td id="T3D3R7"></td><td id="T3D3R8"></td><td id="T3D3R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D4R1"></td><td id="T3D4R2"></td>
	    			<td id="T3D4R3"></td><td id="T3D4R4"></td><td id="T3D4R5"></td><td id="T3D4R6"></td><td id="T3D4R7"></td><td id="T3D4R8"></td><td id="T3D4R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D5R1"></td><td id="T3D5R2"></td>
	    			<td id="T3D5R3"></td><td id="T3D5R4"></td><td id="T3D5R5"></td><td id="T3D5R6"></td><td id="T3D5R7"></td><td id="T3D5R8"></td><td id="T3D5R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D6R1"></td><td id="T3D6R2"></td>
	    			<td id="T3D6R3"></td><td id="T3D6R4"></td><td id="T3D6R5"></td><td id="T3D6R6"></td><td id="T3D6R7"></td><td id="T3D6R8"></td><td id="T3D6R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D7R1"></td><td id="T3D7R2"></td>
	    			<td id="T3D7R3"></td><td id="T3D7R4"></td><td id="T3D7R5"></td><td id="T3D7R6"></td><td id="T3D7R7"></td><td id="T3D7R8"></td><td id="T3D7R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D8R1"></td><td id="T3D8R2"></td>
	    			<td id="T3D8R3"></td><td id="T3D8R4"></td><td id="T3D8R5"></td><td id="T3D8R6"></td><td id="T3D8R7"></td><td id="T3D8R8"></td><td id="T3D8R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D9R1"></td><td id="T3D9R2"></td>
	    			<td id="T3D9R3"></td><td id="T3D9R4"></td><td id="T3D9R5"></td><td id="T3D9R6"></td><td id="T3D9R7"></td><td id="T3D9R8"></td><td id="T3D9R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D10R1"></td><td id="T3D10R2"></td>
	    			<td id="T3D10R3"></td><td id="T3D10R4"></td><td id="T3D10R5"></td><td id="T3D10R6"></td><td id="T3D10R7"></td><td id="T3D10R8"></td><td id="T3D10R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D11R1"></td><td id="T3D11R2"></td>
	    			<td id="T3D11R3"></td><td id="T3D11R4"></td><td id="T3D11R5"></td><td id="T3D11R6"></td><td id="T3D11R7"></td><td id="T3D11R8"></td><td id="T3D11R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D12R1"></td><td id="T3D12R2"></td>
	    			<td id="T3D12R3"></td><td id="T3D12R4"></td><td id="T3D12R5"></td><td id="T3D12R6"></td><td id="T3D12R7"></td><td id="T3D12R8"></td><td id="T3D12R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D13R1"></td><td id="T3D13R2"></td>
	    			<td id="T3D13R3"></td><td id="T3D13R4"></td><td id="T3D13R5"></td><td id="T3D13R6"></td><td id="T3D13R7"></td><td id="T3D13R8"></td><td id="T3D13R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D14R1"></td><td id="T3D14R2"></td>
	    			<td id="T3D14R3"></td><td id="T3D14R4"></td><td id="T3D14R5"></td><td id="T3D14R6"></td><td id="T3D14R7"></td><td id="T3D14R8"></td><td id="T3D14R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D15R1"></td><td id="T3D15R2"></td>
	    			<td id="T3D15R3"></td><td id="T3D15R4"></td><td id="T3D15R5"></td><td id="T3D15R6"></td><td id="T3D15R7"></td><td id="T3D15R8"></td><td id="T3D15R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D16R1"></td><td id="T3D16R2"></td>
	    			<td id="T3D16R3"></td><td id="T3D16R4"></td><td id="T3D16R5"></td><td id="T3D16R6"></td><td id="T3D16R7"></td><td id="T3D16R8"></td><td id="T3D16R9"></td></tr>
	    			<tr role="row" class="odd text-center" style="background-color: transparent;"><td id="T3D17R1"></td><td id="T3D17R2"></td>
	    			<td id="T3D17R3"></td><td id="T3D17R4"></td><td id="T3D17R5"></td><td id="T3D17R6"></td><td id="T3D17R7"></td><td id="T3D17R8"></td><td id="T3D17R9"></td></tr>
	    			</tbody>
	    		</table>
			</div>
    </div>
    </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/basic.js"></script></body>
	<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>
	<%--引入echarts3D文件--%>
	<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
	<script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
	<script src="${ctx}/jspJS/utils/helper.js"></script>
	<script src="${ctx}/jspJS/monitor/showeventdensity.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();

    getEventDensity(lineIndex,startTime,endTime);
    getEventDisdip(lineIndex,startTime,endTime);
    getIEC411(lineIndex,startTime,endTime);
    getIEC28(lineIndex,startTime,endTime);
});
function DensityDetail(){
    var line_index=$("#lineIndex").val();
    lineIndex=filterXSS(lineIndex);
    var startTime = $("#startTime").val();
    var endTime = $("#endTime").val();
    layer.open({
      type: 2,
      title: '暂降密度图',
      shadeClose: true, //点击遮罩关闭层
      area : ['100%' , '100%'],
      content: 'densityDetail?lineIndex='+line_index+'&startTime='+startTime+'&endTime='+endTime,
      scrollbar:false
    });
}

$("#helper").click(function (){
	toHelper("#zjmdt");
});  
</script>
</body>
</html>