<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="cn.exlive.mygpsonline.util.MyApplicationContextUtil"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!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"
			href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
		<link rel="stylesheet" href="/mygpsonline/gpsonline/css/playback.css" />

		<script src="<%=path%>/gpsonline/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/calendar/My97DatePicker/WdatePicker.js"></script>
		<script type="text/javascript"
			src="http://api.map.baidu.com/api?v=2.0&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/jquery.table2excel.js"></script>
		<script type="text/javascript">
var map;
var overlays = [];
var marks = [];
var vehicles = [];
var vhcids = "";
var xuhao = 0;
var drawingManager;
var fristFlag = true;

var comArr = [];//临时数组
var result = [];//结果集合

var overlaycomplete = function(e){
	if(overlays.length >= 5){
		clearAll();
	}
    overlays.push(e.overlay);
    var point = e.overlay.getCenter();
    var marker = new BMap.Marker(point);
	map.addOverlay(marker);
    marks.push(marker);
    loaddate(parseInt(e.overlay.getRadius()),e.overlay.getCenter().lng,e.overlay.getCenter().lat);
    if(overlays.length==1){
    	drawingManager.circleOptions.fillColor='#dcb52f';
    	drawingManager.circleOptions.strokeColor='#dcb52f';
    }else if(overlays.length==2){
    	drawingManager.circleOptions.fillColor='#9426da';
    	drawingManager.circleOptions.strokeColor='#9426da';
    }else if(overlays.length==3){
    	drawingManager.circleOptions.fillColor='#ff0000';
    	drawingManager.circleOptions.strokeColor='#ff0000';
    }else if(overlays.length==4){
    	drawingManager.circleOptions.fillColor='#2fb9dc';
    	drawingManager.circleOptions.strokeColor='#2fb9dc';
    }else if(overlays.length==5){
    	drawingManager.circleOptions.fillColor='#5bcb63';
    	drawingManager.circleOptions.strokeColor='#5bcb63';
    }
    drawingManager.close();
};


function loaddate(radius,lng,lat){
	if(radius < 10){
		return;
	}
	$("#lostfound_zz").show();
	var btime = $("#start").val();
	var etime = $("#end").val();
    $.ajax({
	     type:"POST",
	   	 dataType:"json", 
	   	 url:"json/vehicleAction_lostfound.action", 
	   	 data:{"ids":"-1","lng":lng,"lat":lat,"radius":radius,"bedate":btime,"endate":etime}, 
	   	 success:function (json){
		   	 if(json && json.flag){
		   		$("#lostfound_zz").hide();
		   		tableAppend(json.data);
			 }else{
				 $("#lostfound_zz").hide();
			 }
	   	 }});
}

function tableAppend(data){
	var style="";
	if(overlays.length==1){
		style="color:#5bcb63";
    }else if(overlays.length==2){
    	style="color:#dcb52f";
    }else if(overlays.length==3){
    	style="color:#9426da";
    }else if(overlays.length==4){
    	style="color:#ff0000";
    }else if(overlays.length==5){
    	style="color:#2fb9dc";
    }
    if(marks.length > 1){
      $("#lostfound_append").html("");
      xuhao = 0;
    }
    comArr = [];
    comArr.length = 0;
	if(fristFlag){//第一次查询的时候，交集就是第一次查询结果
		fristFlag = false;
		result = data;
	}else{
		for ( var m = 0; m < result.length; m++){
			for ( var n = 0; n < data.length; n++){
				if(result[m].id == data[n].id){
					comArr.push(result[m]);
				}
			}
		}
		result = comArr;
	}

    for (var i = 0; i < result.length; i++){
			xuhao += 1;
			var html="<tr style='"+style+";'><td width='50'>"+xuhao+"</td><td>"+result[i].vhcCode+"</td></tr>";
			$("#lostfound_append").append(html);
	}
}

function initMap(){
	map = new BMap.Map("map");    //创建Map实例
	map.centerAndZoom(new BMap.Point(105.746944,34.584083),11); //初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);
	var top_left_navigation = new BMap.NavigationControl();
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角，添加比例尺
	map.addControl(top_left_navigation);
	map.addControl(top_left_control);
	var styleOptions = {
		        strokeColor:"#5bcb63",    //边线颜色。
		        fillColor:"#5bcb63",      //填充颜色。当参数为空时，圆形将没有填充效果。
		        strokeWeight: 3,       //边线的宽度，以像素为单位。
		        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
		        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
		        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }

	//实例化鼠标绘制工具
    drawingManager = new BMapLib.DrawingManager(map,{
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: false, //是否显示工具栏
        drawingType:BMAP_DRAWING_CIRCLE,
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5,5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
    });
	drawingManager.setDrawingMode(BMAP_DRAWING_CIRCLE);
	//添加鼠标绘制工具监听事件，用于获取绘制结果
	drawingManager.addEventListener('overlaycomplete',overlaycomplete);
    var myDate = new Date();
	var btime = myDate.getFullYear() + "-" + ((myDate.getMonth()+1)<=9?("0"+(myDate.getMonth()+1)):(myDate.getMonth()+1))+ "-" + (myDate.getDate()<=9?("0"+myDate.getDate()):(myDate.getDate()));
    $("#start").val(btime + " 00:00:00");
    $("#end").val(btime + " 23:59:59");
}

function drawSet(){
	 drawingManager.open();
	 vehicles = [];
	 vehicles.length = 0;
	 if(overlays.length==1){
	    	drawingManager.circleOptions.fillColor='#dcb52f';
	    	drawingManager.circleOptions.strokeColor='#dcb52f';
	    }else if(overlays.length==2){
	    	drawingManager.circleOptions.fillColor='#9426da';
	    	drawingManager.circleOptions.strokeColor='#9426da';
	    }else if(overlays.length==3){
	    	drawingManager.circleOptions.fillColor='#ff0000';
	    	drawingManager.circleOptions.strokeColor='#ff0000';
	    }else if(overlays.length==4){
	    	drawingManager.circleOptions.fillColor='#2fb9dc';
	    	drawingManager.circleOptions.strokeColor='#2fb9dc';
	    }else if(overlays.length==0){
	    	drawingManager.circleOptions.fillColor='#5bcb63';
	    	drawingManager.circleOptions.strokeColor='#5bcb63';
	    }
} 

function quxiao(){
	drawingManager.close();
	clearAll();
}

function clearAll(){
	fristFlag = false;
	vehicles = [];
	vehicles.length = 0;
	for ( var i = 0; i < overlays.length; i++){
		map.removeOverlay(overlays[i]);
		map.removeOverlay(marks[i]);
	}
	xuhao = 0;
	$("#lostfound_append").empty();
    overlays = [];
    overlays.length = 0;
    marks = [];
    marks.length = 0;
}

function excelOut(){
	var excelname = Date.parse(new Date());
	$("#lostfound_append").table2excel({
		exclude: ".link_style",
		name:"Excel Document Name",
		filename:excelname,
		exclude_img: true,
		exclude_links: false,
		exclude_inputs: true
	});
}
$(function(){
	initMap();
});
</script>
	</head>
	<body>
		<!--日期查询-->
		<div class="guiji_top_quyu">
			<div class="guiji_title_quyu">
				<div style="float: center; margin-left: 20px;">
					起始:
					<input type="text" name="startTime" id="start"
						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:'#F{$dp.$D(\'end\')}',position:{left:520,top:70}})" />
					<span></span> 结束:
					<input type="text" name="endTime" id="end" 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(\'start\')}',position:{left:692,top:70}})" />
					<span></span>
					<input type="button" onclick="drawSet();" value="区域查询"
						style="margin-left: 20px;" />
					<input type="button" onclick="quxiao();" value="取消"
						style="margin-left: 20px;" />
					<input type="button" onclick="excelOut();" value="导出"
						style="margin-left: 20px;" />
				</div>
			</div>
		</div>
		<!--日期查询 end-->
		<!--地图和车辆树形-->
		<div style="background: none repeat scroll 0 0 #8C98AE;">
			<!--车辆-->
			<div class="sudu_main_quyu"
				style="display: block; width: 20%; position: absolute; left: 0; top: 72px; background: #FFF;">
				<!-- 设备搜索： -->
				<div class="searchcvs" style="display: none;">
					<div class="ctnr">
						<!--搜索-->
						<div
							style="float: left; background: url(/mygpsonline/image/monitor/v3/bg_block.png) no-repeat right 0; background: #fff; margin-top: 1px; display: none;">
							<input placeholder="请输入设备车牌号" onkeyup="linkVhcCode();"
								class="searchinput" type="text" />
						</div>
						<!--搜索 end-->
						<div class="suggest"></div>
						<!--三角按钮-->
						<!--联想-->
						<div style="clear: left; width: 200px;">
							<div style="display: none;" id="searchListOutCanvas">
								<span style="bordercolor: white;">No queries to the data</span>
							</div>
						</div>
						<!--联想 end-->
					</div>
				</div>
				<!-- 设备搜索： end-->
				<div>
					<table width="100%" border="0" align="center" cellpadding="0"
						cellspacing="0" class="table_style">
						<thead>
							<tr>
								<th width="50" scope="col">
									序号
								</th>
								<th>
									车牌号
								</th>

							</tr>
						</thead>
					</table>
					<div id="vehicle_table_history_content_div">
						<table width="100%" border="0" align="center" cellpadding="0"
							cellspacing="0" class="table_style" id="lostfound_append">
							<tr>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<!--车辆 end-->
			<!--地图-->
			<div id="map" class="map_quyu"></div>
			<!--地图 end-->
		</div>
		<!--地图和车辆树形 end-->
		<div class="maskloading" id="lostfound_zz" style="display: none;">
			<div class="loadingtext">
				<i class="logagif"></i>
				<span>加载数据中...</span>
			</div>
		</div>
	</body>
	<style>
.guiji_top_quyu {
	top: 40px;
}

.searchcvs {
	margin: 4px 5px 3px 6px;
	padding: 0 0 0 10px;
	background: url(/mygpsonline/gpsonline/image/monitor/v3/bg_block.png)
		no-repeat 0 0;
}

.searchinput {
	height: 18px;
	padding: 0px;
	margin: 5px 0 0;
	width: 190px;
	border: none;
	background-color: transparent;
	color: #605E5E;
	font-size: 12px;
}

#vehicle_table_history_content_div {
	top: 34px;
}

.searchcvs .ctnr {
	height: 27px;
	background: url(/mygpsonline/gpsonline/image/monitor/v3/bg_block.png)
		no-repeat right 0;
}

.table_style tr th {
	background: url(/mygpsonline/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 {
	border-collapse: collapse;
	line-height: 32px;
	color: #6b6b6b;
}

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

#map {
	position: absolute;
	top: 72px;
	bottom: 0px;
	left: 20%;
	width: auto;
	right: 0px;
}

.suggest {
	float: right;
	margin: 3px 0px 0px;
	width: 33px;
	height: 20px;
	cursor: pointer;
}

#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;
}

.maskloading {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.3)
}

.loadingtext {
	position: absolute;
	width: 120px;
	height: 90px;
	left: 50%;
	top: 50%;
	margin-left: -60px;
	margin-top: -45px;
	background: #fff;
	border: 1px solid #8a9fbc;
	border-radius: 4px;
	text-align: center
}

.loadingtext span {
	display: block
}

.logagif {
	display: block;
	width: 35px;
	height: 35px;
	margin: 0px auto;
	margin-top: 15px;
	margin-bottom: 10px;
	background: url(gpsonline/image/load.gif) no-repeat center
}

.guiji_top_quyu,.sudu_main_quyu {
	z-index: 100
}
</style>
</html>