<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.exlive.mygpsonline.util.MyApplicationContextUtil"%>
<%@page import="cn.exlive.mygpsonline.util.GPSUtil"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String mapType =request.getParameter("mapType");
if(null == mapType || "".equals(mapType)){
	mapType="2";
}
if(null==GPSUtil.getLoginUser()){
	response.sendRedirect(path+"/"+"gpsonline/jsp/login.jsp");
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<title>区域历史查询</title>
		<link rel="Shortcut icon"
			href="<%=path%>/gpsonline/image/pic/logo.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css"
			href="<%=path%>/gpsonline/css/playback.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/monitor/user/monitor.css" />
		<script src="<%=path%>/gpsonline/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<%=path%>/gpsonline/js/language.js"></script>
		<script type="text/javascript" src="<%=path%>/gpsonline/js/url.js"></script>
		<script type="text/javascript" src="<%=path%>/gpsonline/js/calendar/My97DatePicker/WdatePicker.js"></script>
		<!-- 
		<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=drawing&key=AIzaSyDZis631eei5VArZqB-lP2DDOSgPrhLR5A"></script>
		<script type="text/javascript" src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>
 		-->
		<script type="text/javascript"	src="http://api.map.baidu.com/api?v=1.5&amp;ak=<%=MyApplicationContextUtil.map_baidu_key%>"></script>
		<script type="text/javascript"	src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
		
		<script type="text/javascript"  src="<%=path%>/gpsonline/js/google/google.js"></script>
		<script type="text/javascript"	src="<%=path%>/gpsonline/js/tool/historyAreaQuery.js"></script>
		<script type="text/javascript"	src="<%=path%>/gpsonline/js/tool/baiduHistoryAreaQuery.js"></script>
		<script type="text/javascript"	src="<%=path%>/gpsonline/js/monitor/infobox.js"></script>
		<script type="text/javascript"	src="<%=path%>/gpsonline/js/tool/historyQueryVechileSearch.js"></script>
		<script type="text/javascript"	src="<%=path%>/gpsonline/js/jquery.table2excel.js"></script>
<style type="text/css"> 
.guiji_title {
	font-size: 12px;
	height: 31px;
	text-align: center;
	background: #C5CFD6;
	border-bottom: 1px solid #999;
	line-height: 31px;
}
.guiji_input {
	border: #999 1px solid;
	background: #fff;
	width: 130px;
}
.guiji_link {
	width: 50px;
	height: 17px;
	line-height: 17px;
	float: right;
	margin-right: 10px;
	position: relative;
	top: 5px;
	cursor: pointer;
	background: #E1EBED;
	color: #07f;
}
#map {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 33px;
	bottom: 0px;
}
#map {
	height: auto;
}
/*--table--*/
.playback {
	empty-cells: show;
	border-collapse: collapse;
	width: 100%;
	background: #fff;
	font-size: 12px;
	border-spacing: 2px;
	border-color: gray;
}
.playback tr {
	background: #F0F0F0 url(<%=path%>/gpsonline/image/monitor/v3/bg_x.gif)
		repeat-x 0 -80px;
}
.playback tr th {
	padding: 7px 5px;
	background: url(<%=path%>/gpsonline/image/monitor/v3/icons.gif)
		no-repeat 0 -49px;
	_background-color: #F0F0F0;
	font-weight: bold;
	line-height: 22px;
	white-space: nowrap;
	color: #676767;
	text-align: center;
}
.playback tr td {
	padding: 3px 5px;
	line-height: 20px;
	color: #676767;
	text-align: center
}
.playback tr:hover td {
	background-color: #A0B0C7;
	color: #fff;
}
/*--map 弹出框--*/
.map_tanchu_wrap p {
	margin: 0;
	padding: 5px 10px;
	font-size: 12px;
	background: #fff;
}
.map_tanchu_areaQuery_wrap {
	background: transparent;
	background-color: #FFFFFF;
	width: 300px;
	height: 150px;
	margin: 0 3px;
	margin-left: 100px;
	box-shadow: 0px 2px 2px #d9d7d4
}
.map_tanchu_areaQuery_wrap p {
	margin: 0;
	padding: 5px 10px;
	font-size: 12px;
	background: #fff;
}
.map_tanchu_areaQuery_wrap p b {
	display: block;
	overflow: hidden;
	margin-bottom: 5px;
}
.areaQuery_img {
	margin-top: -2px;
	display: inlin-block;
}
.baiduareaQuery_img {
	margin-top: -2px;
	display: block;
	float: left;
}
.xboxcontent_areaQuery {
	display: block;
	border: 0 solid #c2c1be;
	border-width: 0 1px;
	background-color: #FFFFFF;
	height: 120px;
	margin-top: 22px;
	overflow: auto;
	width: 298px;
}
.baiduboxcontent_areaQuery {
	display: block;
	height: 100px;
	margin-top: 22px;
	overflow: auto;
	width: 300px;
}
.baiduboxcontent_areaQuery p b {
	display: block;
	overflow: hidden;
	margin-bottom: 5px;
}
.baiduboxcontent_areaQuery p p {
	margin: 0;
	padding: 5px 10px;
	font-size: 12px;
	background: #fff;
}
.map_tanchu_wrap {
	background: transparent;
	width: 300px;
	height: auto;
	margin: 0 3px;
	margin-left: 100px;
	box-shadow: 0px 2px 2px #d9d7d4
}
.xtop,.xbottom {
	display: block;
	background: transparent;
	font-size: 1px;
}
.xb1,.xb2,.xb3,.xb4 {
	display: block;
	overflow: hidden;
}
.xb1,.xb2,.xb3 {
	height: 1px;
}
.xb2,.xb3,.xb4 {
	background: #fff;
	border-left: 1px solid #c2c1be;
	border-right: 1px solid #c2c1be;
}
.xb1 {
	margin: 0 5px;
	background: #c2c1be;
}
.xb2 {
	margin: 0 3px;
	border-width: 0 2px;
}
.xb3 {
	margin: 0 2px;
}

.xb4 {
	height: 2px;
	margin: 0 1px;
}

.xboxcontent {
	display: block;
	border: 0 solid #c2c1be;
	border-width: 0 1px;
	height: auto;
}

span {
	_overflow: hidden;
}

.arrow {
	position: absolute;
	margin-top: -2px;
	margin-left: 50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #ffffff transparent transparent transparent;
	z-index: 20;
}

.arrow_bg {
	position: absolute;
	margin-top: -1px;
	margin-left: 50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #c2c1be transparent transparent transparent;
	z-index: 15;
}

* {
	font-size: 12px;
}

.table_style {
	border-collapse: collapse;
	line-height: 32px;
	color: #6b6b6b;
}

.table_style tr th {
	background: url(<%=path%>/gpsonline/image/monitor/v3/repeat.png) 0px
		-423px repeat scroll;
	height: 32px;
	line-height: 32px;
	border-top: 1px solid #8398b3;
	border-bottom: 1px solid #bcc6d0;
	color: #5d5c5c;
	font-weight: normal;
	text-align: center
}

.table_style tr td {
	border-bottom: 1px solid #e8e8e8;
}

.link_style {
	color: #0e88e5;
	text-decoration: none
}

a.link_style:hover {
	text-decoration: underline;
}
.searchcvs{margin:4px 5px 3px 6px;padding:0 0 0 10px;background:url(<%=path%>/gpsonline/image/monitor/v3/bg_block.png) no-repeat 0 0;}
.searchcvs .ctnr{height:27px;background:url(<%=path%>/gpsonline/image/monitor/v3/bg_block.png) no-repeat right 0;}
.searchinput{height:18px;padding:0px; margin:5px 0 0; width:190px;border:none;background-color:transparent;color:#605E5E; font-size:12px;}
.searchbutton{height:21px; padding:0px; margin:0px;font-size:12px;}
.navigate{height:50px;border-bottom:1px solid #D2DCDE;margin-top:2px;}
#searchListOutCanvas {
    display: none;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 1px solid rgb(149, 188, 240);
    background-color: rgb(253, 253, 253);
    position: absolute;
    z-index: 9999;
    height: 300px;
    width: 249px;
    word-break: keep-all;
    white-space: nowrap;
    margin-left: -10px;
}
</style>

	</head>

	<body>
		<div class="guiji_top_quyu" id="guiji_top">
			<div class="guiji_title_quyu">
				<div style="float: center; margin-left: 20px;">
					起始:
					<input type="text" name="queryhistoryTime_startTime"
						id="queryhistoryTime_startTime" style="width: 135px;"
						onkeydown="return false" onkeyup="return false"
						oncontextmenu="return false" class="Wdate"
						onclick="WdatePicker({el:$dp.$('d12'),skin:'simple',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})" />
					<!-- <input type="text" name="queryhistoryTime_startTime" id="queryhistoryTime_startTime" style="width: 130px;" onkeydown="return false" onkeyup="return false" oncontextmenu="return false"
						class="Wdate" onclick="WdatePicker({el:$dp.$('d12'),skin:'simple',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'queryhistoryTime_endTime\',{d:-60});}',maxDate:'#F{$dp.$D(\'queryhistoryTime_endTime\')}'})"/> -->
					结束:
					<input type="text" name="queryhistoryTime_endTime"
						id="queryhistoryTime_endTime" style="width: 135px;"
						onkeydown="return false" onkeyup="return false"
						oncontextmenu="return false" class="Wdate"
						onclick="WdatePicker({el:$dp.$('d12'),skin:'simple',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s',minDate:'#F{$dp.$D(\'queryhistoryTime_startTime\')}'})" />
					<input id="queryBtn" type="button" value="区域查询" style="margin-left: 20px;" />
					<input type="button" value="导出" onclick="queryDateExcel();" style="margin-left: 20px;" />
				</div>
			</div>
		</div>
		<div
			style="position: absolute; top: 40px; z-index: 800; right:100px;">
			<select id="mapTypeSel" onchange="queryToolObject.mapChange()"
				style="color: #C33;">
				<option value="1" <% if(mapType.equals("1")){ %> selected="selected"
					<%} %>>
					百度地图
				</option>
				<option value="2" <% if(!mapType.equals("1")){ %>
					selected="selected" <%} %>>
					谷歌地图
				</option>
			</select>
		</div>
		<div
			style="background: none repeat scroll 0 0 #8C98AE; overflow: hidden; width: 22%; height: 100%;">
			<div id="vehicle_table_history" class="sudu_main_quyu"
				style="display: block; width: 20%; position: absolute; left: 0; top: 32px; background: #FFF;">
				<!-- 设备搜索： -->
				<div class="searchcvs">
					<div class="ctnr">
						<div
							style="float: left; background: url(<%=path%>/image/monitor/v3/bg_block.png) no-repeat right 0; background: #fff; margin-top: 1px;">
							<input value="请输入设备ID/名称/SIM卡号" name="searchinput"
								autocomplete="off" id="searchinput" class="searchinput"
								onfocus="searchFocus(this)" onblur="searchBlur(this)"
								type="text"/>
						</div>
						<div class="suggest" onmouseout="isSearchFocus = false;"
							onclick="viewSearchListAll()"></div>
						<div style="clear: left; width: 200px;">
							<div style="display: none;" id="searchListOutCanvas">
								<span>...</span>
							</div>
						</div>
					</div>
				</div>
				<div id="vehicle_table_history_title">
					<table width="100%" border="0" align="center" cellpadding="0"
						cellspacing="0" class="table_style">
						<thead>
							<tr>
								<th width="50" scope="col">
									序号
								</th>
								<th scope="col">
									设备
								</th>
								<th width="50" scope="col">
									操作
								</th>
							</tr>
						</thead>
					</table>
					<div id="vehicle_table_history_content_div">
						<table id="vehicle_table_history_content" width="100%" border="0"
							align="center" cellpadding="0" cellspacing="0"
							class="table_style">
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div id="map" class="map_quyu" style="left:20%;width:auto;"></div>
		</div>
		<div>
			<table id="excelOutTable">
					 
			</table>
		</div>
		<input id="mapType" type="hidden"
			value="<%=(null != request.getParameter("mapType")?request.getParameter("mapType"):"2") %>" />
		<input id="center_lat" type="hidden"
			value="<%=request.getParameter("center_lat")%>" />
		<input id="center_lng" type="hidden"
			value="<%=request.getParameter("center_lng")%>" />
		<input id="zoom" type="hidden"
			value="<%=request.getParameter("zoom")%>" />
		<input type="hidden" id="serverUrl" value="<%=basePath%>"/>
	</body>
</html>