<%@ 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" type="text/css" 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/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
     <style>
    		#showeventdensity{
    			 width:100%;
    			 height: 410px;
    			 margin-top: 10px;
    		}
	    	@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
		    }
    </style> 
</head>
<body class="pd15">
    <div class="row pd15" style="background:#fff;margin-top:-15px;">
    <div class="col-sm-12 mt10">
    	<div id="showeventdensity" ></div>
    </div>
    </div>
<input type="hidden" value="${sessionScope.lineIndex}" id="lineIndex">    
<input type="hidden" value="${sessionScope.startTime}" id="startTime">   
<input type="hidden" value="${sessionScope.endTime}" id="endTime"> 
    <%--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>
    <%--引入echarts3D文件--%>
    <script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
    <script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
	<script src="${ctx}/js/plugin/xss/xss.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
    <script src="${ctx}/jspJS/monitor/showeventdensity.js"></script>
    <script src="${ctx}/js/basic.js"></script>
    <script src="${ctx}/jspJS/utils/timeControl.js"></script>
        <script type="text/javascript" charset="utf-8">
            $("#query").click(function (){
                var lineIndex=$("#lineIndex").val();
                var startTime = $("#startTime").val();
                var endTime = $("#endTime").val();
                lineIndex=filterXSS(lineIndex);
                startTime=filterXSS(startTime);
                endTime=filterXSS(endTime);

                getEventDensity(lineIndex,startTime,endTime);
            });
        </script>
</body>
</html>