<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String server_ip = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/Interface/vhcphoto/";
%>
<!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%>">
		<% 
    String uname = "";
    String uname2 = "";
    if(request.getParameter("uName") != null){
    	 uname = new String(request.getParameter("uName").getBytes("ISO-8859-1"),"utf-8");
    	 uname2 = new String(request.getParameter("uName").getBytes("ISO-8859-1"),"GBK");
    } 
    String sstype= request.getParameter("type");
    %>

		<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 href="<%=path%>/gpsonline/css/jquery-ui-1.10.3.custom.css"
			rel="stylesheet" />

		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/user/monitor.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/monitor/zTreeStyle.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/user/marker.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/user/userframe-c.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/v3/global.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/table/bootstrap.min.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/table/jquery.resizableColumns.css" />

		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/calendar/My97DatePicker/WdatePicker.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/table/jquery.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/jquery-ui-1.10.3.custom.js"></script>
		<script type="text/javascript" src="<%=path%>/gpsonline/js/Base64.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/cmarker/baidu_marker.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/marker/jquery.ztree.core-3.5.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/marker/jquery.ztree.excheck-3.5.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/marker/jquery.ztree.exedit-3.5.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/marker/markersearch.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/language.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/table/jquery.resizableColumns.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/table/store.js"></script>
		<script type="text/javascript"
			src="<%=path%>/gpsonline/js/table/sucaijiayuan.js"></script>

		<style>
#slider .ui-slider-range {
	background: #729fcf;
}

.table td {
	text-align: center;
	word-break: keep-all;
	white-space: nowrap;
}

.table th {
	text-align: center;
	font-weight: bold;
	word-break: keep-all;
	white-space: nowrap;
}
p{
 margin:0px;
}
.playback_left h3{
   height:auto;
   overflow:hidden;
}
.pCar{
   margin-bottom: 5px;
   font-weight: bold;
   color: #666;
   width: 220px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
</style>
<script type="text/javascript">
      //window.onerror = function(){return true};
      var topics = [];
      var alldata = []; 
      var speedvalue=500;
      var x;
      var y;
      var series ;
      var curveb = true;
      var row;
      var table1;
      var timeArray=[];
      var youhaoArray=[];
      var suduArray=[];
      var yctime;
      var carname;
      var strCarName;
      var rldis = 0;
      var dqdis = 0;
	  var photobool = false;
	  var wuxiaobool  = false;
	  var tingchedianbool = 0;
	  var jzIsShow = 1;//0 显示 1 不显示 基站数据
	  var bfIsShow = 1;//0 显示 1 不显示 不发数据
	  var isLoadComplete = false;
      $(window).load(function(){
    	 document.onreadystatechange = checkLoadState();//检测加载状态
    	 photourl= '<%=server_ip%>';
    	 var uname = '<%=uname%>';
      	 var carid = $("#carid").val();
      	 carname = '<%=request.getParameter("carname")%>';
      	 
      	 if(carid=='null'){
      		strCarName = uname;
         }else{ 
        	 strCarName =decodeURI(carname); 
         }
      	 document.title=strCarName + " | 轨迹回放";
      	 document.getElementById('carname').innerHTML=strCarName;
      	 var sstype='<%=sstype%>';
	     if(sstype!="null"){
	     	$('#selectdiv').hide();
	     }
		  $( "#slider" ).slider( "disable" );
		  $( "#speed" ).slider({
				range : "min",
				max : 140,
				min : 10,
				value : 100,
				orientation : 'horizontal'
		  });
		$('#speed').bind('slidechange', function(event, ui){
			var r=ui.value;
			var t=4;
			var w=100;
			var p=[10000,5000,3000,1000,500,100,10];
			var u=[0,20,40,60,80,100,120,140];
			for(var s=0,o=u.length-1;s<o;s++){
				if(r>=u[s]&&r<u[s+1]){
					t=s;
					break
				}
				if(r>=140){
					t=6;
					break
				}
			}
			speedvalue=p[t];
		});
		
		mapType = 1;
		var  myselect=document.getElementById("select");

		if(1==mapType){
			 baiduMap();
			 myselect.options[0].selected = true;
		}else{
			loadGoogleMapJs();
			initialize2();
			myselect.options[1].selected = true;
		}
		$("#table1").resizableColumns({
		    store: window.store
		});

		var bbbtime = '<%=request.getParameter("btime")%>';
     	var eeetime = '<%=request.getParameter("etime")%>';
		console.info(bbbtime);
		console.info(eeetime);

		
     	if(bbbtime!='null' && eeetime!='null'){
     		  $("#start").val(bbbtime);
  		      $("#end").val(eeetime);
  		      play();
        }
      })
      //检测加载状态
      function checkLoadState(){
			if(document.readyState=="complete"){
				isLoadComplete = true;
			}
      }
      function ShowPhoto(type){
		if(type==0){
			photobool = true;
		}else{
			photobool = false;
		}
      }
      function ShowWuxiao(type){
  		if(type==0){
  			wuxiaobool = true;
  		}else{
  			wuxiaobool = false;
  		}
      }
      function ShowTingchedian(type){
    		if(type==0){
    			tingchedianbool=0;
    		}else{
    			tingchedianbool=1;
    		}
      }
      function jz(type){
    	if(type==0){
    		  jzIsShow=0;
  		}else{
  			  jzIsShow=1;
  		}
      }
      function bf(type){
      	if(type==0){
      		  bfIsShow=0;
    		}else{
    			  bfIsShow=1;
    		}
      }
      function f5(){
     	  //document.getElementById("startTime").value="null";
		  //document.getElementById("endTime").value="null";
		  times.length = 0;
      	  var d = new Date();
		  var vYear = d.getFullYear();
		  var vMon = d.getMonth() + 1;
		  var vDay = d.getDate();
		  var start=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 00:00:00";
		  var end=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 23:59:59";
		  //$("#start").val(start);
		  //$("#end").val(end);
		  
		  if(car!=null){
		   	  clearTimeout(yctime);
		  	  var chart = $('#container').highcharts();
		      if (chart.series.length){
		      		//chart.get('temperature-xaxis').remove();
		      		//chart.get('temperature-yaxis').remove();
		             chart.series[0].setData([]);
		             chart.series[1].setData([]);
		             chart.series[2].setData([]);
		      }
		      for(var i=1;i<=car.topics.length;i++){
		      		$('#row'+i).remove();
		      }
	          if(1==mapType){
			    baiduMap();
			    markers.length=0;
			  }else{
				initialize2();
			  }
		  	 
		  	  playkg = null;
		  	  bol = false;
		  	 
		  	  $("#startplay").val("轨迹回放");
		  	  row_count = 1;
		  	  //$( "#slider" ).slider( "option", "value", 0 );
		      $( "#slider" ).slider( "disable" );
		  	  // document.getElementById("f5").style.display = "none";
		 	  car = null;
		 	  topics.length=0;
		 	  $('#f5').attr('disabled', true);
		 	  $('#end').attr('disabled', false);
			  $('#start').attr('disabled', false);
			  tnum = 0;
			  Ascending =0;
			 document.getElementById("lic").innerHTML="";
			 document.getElementById("youh").innerHTML="";
			 document.getElementById("time").innerHTML="";
		  }
      }
      var playkg = null;
      var tkey;
      var dtype = 0;
      function play(){
        if(!isLoadComplete){
				alert("页面正在加载,请稍候!");
				return;
        }
	    var start = $("#start").val();
	    var end = $("#end").val();
	    stopCarTime = $("#stopcartime").val() * 60 *1000;
	   	if(playkg == null){
	   		var radio = document.getElementsByName("gjdata");
			for(var i=0;i<radio.length;i++){
				  if(radio[i].checked==true){
				  	   dtype=radio[i].value;
				  }
			 }
	   		 initialize(start,end);
	   		$("#play_span").removeClass("paly_ico_play");
	   		$("#play_span").addClass("paly_ico_stop");
			 $('#f5').attr('disabled', false);
			 $('#end').attr('disabled', true);
			 $('#start').attr('disabled', true);
	   	}else  if(playkg == false){
	   		setTimeout("alcurve()", speedvalue);
	   		$("#startplay").val("暂停回放");
	   		$("#play_span").removeClass("paly_ico_play");
	   		$("#play_span").addClass("paly_ico_stop");
	   		playkg = true;
	   		curveb = true;
	   	}else{
	   		$("#startplay").val("开始回放");
	   		$("#play_span").removeClass("paly_ico_stop");
	   		$("#play_span").addClass("paly_ico_play");
	   		playkg = false;
	   		curveb = false;
	   	}
 	  }
 	  
 	 function stop()
	 {
	 		$("#startplay").val("开始回放");
	   		tkey=-1;
	   		//alert(car.topics.length);
	   		t=car.topics.length;
	   		playkg = true;
	   		curveb = false;
	   		marker.setMap(null);
	   		infowindow.close();
	   		$( "#slider" ).slider( "option", "value", 0 );
	   		table1.empty();
	   		row_count = 1;
	   		car = null;
	   		//alert(1);
		
	 }
 	var row_count = 1;
 	 
	function addNew1(){
		 for(var t=0; t<car.topics.length;t++){
			var direction ="";
		 	var ti = parseInt(car.topics[t].dir);
				  if(ti>27 && ti<=72){
						
						direction="东北";
					}else if(ti>72 && ti<=117){
					
						direction="东";
					}
					else if(ti>117 && ti<=162){
						
						direction="东南";
					}
					else if(ti>162 && ti<=207){
						
						direction="南";
					}
					else if(ti>207 && ti<=252){
						
						direction="西南";
					}
					else if(ti>252 && ti<=297){
						
						direction="西";
					}
					else if(ti>297 && ti<=342){
						
						direction="西北";
					}
					else {
						
						direction="北";
					}
		table1 = $('#table1');
		var firstTr = table1.find('tbody>tr:first'); 
		//alert("row"+row_count);
		row = $("<tr id='row"+row_count+"' onDblClick='DblClick(\""+row_count+"\")'></tr>"); 
		var td = $("<td></td>");
		td.append($("<b>"+row_count+"</b>") 
		); 
		
		
		var td2 = $("<td></td>"); 
		td2.append(car.topics[t].recvt
		); 
		
		var td3 = $("<td></td>"); 
		td3.append((car.topics[t].lat+"").substring(0,8)
		); 
		var td4 = $("<td></td>"); 
		td4.append((car.topics[t].lng+"").substring(0,8)
		); 
		
		var td5 = $("<td></td>"); 
		td5.append(car.topics[t].veo.toFixed(1)
		); 
		
		var td6 = $("<td></td>"); 
		td6.append(direction
		); 
		
		var td7 = $("<td></td>");
		var lens =  len(car.topics[t].state);
		if(lens>10){
			var strs = car.topics[t].state.substring(0, 9);
			td7.append(strs+"...");
		}else{ 
			td7.append(car.topics[t].state);
		}
		 
		var td8 = $("<td></td>");
		td8.css("text-align","left");
		//alert(td8.);
		td8.append(car.topics[t].posinfo);

		var td9 = $("<td align='left'></td>"); 
		td9.append(car.topics[t].oil.toFixed(1)
		); 
		
		row.append(td);
		row.append(td2);
		row.append(td3);
		row.append(td4);
		row.append(td5);
		row.append(td6);
		row.append(td9);
		row.append(td7);
		row.append(td8);
		table1.append(row);
		//alert(row);
		//var container = $('#mingxi_tab'),
		//scrollTo = $(row);
		//container.scrollTop(
		//  scrollTo.offset().top - container.offset().top-20 + container.scrollTop()
		//);
			row_count++;
		 }
		
		} 
		function addNew() 
		{ 
		 var str="",strs="",direction ="",ti=0,lens=0;
	
		 var t=tnum;
		 ti = parseInt(car.topics[t].dir);
				  if(ti>27 && ti<=72){
						direction="东北";
					}else if(ti>72 && ti<=117){
						direction="东";
					}
					else if(ti>117 && ti<=162){
						direction="东南";
					}
					else if(ti>162 && ti<=207){
						direction="南";
					}
					else if(ti>207 && ti<=252){
						direction="西南";
					}
					else if(ti>252 && ti<=297){
						direction="西";
					}
					else if(ti>297 && ti<=342){
						direction="西北";
					}else {
						direction="北";
					}				
		lens=  len(car.topics[t].state);
		var titlestr = car.topics[t].state;
		if(lens>10){
			//strs= car.topics[t].state.substring(0, 9)+"...";
		}else{ 
			
		}
		strs=car.topics[t].state;		
		str="<tr id='row"+row_count+"' onDblClick='DblClick(\""+row_count+"\")'>"
		+"<td><b>"+row_count+"</b>"+"</td>"
		+"<td>"+car.topics[t].recvt+"</td>"
		+"<td>"+(car.topics[t].lat+"").substring(0,8)+"</td>"
		+"<td>"+(car.topics[t].lng+"").substring(0,8)+"</td>"
		+"<td>"+car.topics[t].veo.toFixed(1)+"</td>"
		+"<td>"+direction+"</td>"
		+"<td>"+car.topics[t].oil.toFixed(1)+"</td>"
		+"<td title="+titlestr+" style='text-align:left;'>"+strs+"</td>"
		+"<td style='text-align:left;'>"+car.topics[t].posinfo+"</td>"
		+"</tr>";
		row_count++;
	$('#table1').append(str);
} 

 	 function loadTime(){
		  var d = new Date();
		  var vYear = d.getFullYear();
		  var vMon = d.getMonth() + 1;
		  var vDay = d.getDate();
		  var start=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 00:00:00";
		  var end=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 23:59:59";
		  $("#start").val(start);
		  $("#end").val(end);
	 } 
	 
	 function len(s) { 
		var l = 0; 
		var a = s.split(""); 
		for (var i=0;i<a.length;i++) { 
		if (a[i].charCodeAt(0)<299) { 
		l++; 
		} else { 
		l+=2; 
		} 
		} 
		return l; 
	 }
    </script>

		<script type="text/javascript">
	var mingxi =false;
	var sudu= false;
	var kaiguan=false;
	var loadmx = true;
	var loadsd = true;
	function sudu_open(){
		if(sudu==false){
			
			
			var mapid = document.getElementById("map");
			var sudu_main = document.getElementById("sudu_main");
			//var sudu_open = document.getElementById("sudu_open");
			//var sudu_close = document.getElementById("sudu_close");
			var clientheight= document.documentElement.clientHeight;
			sudu_main.style.display = "block";
			if(mingxi==false){
				mapid.style.top = "0px";
			}else{
				mapid.style.top = "0px";
				//mingxi_main.style.display="block";
				//alert(2)
				mingxi_main.style.top="260px"
			}
			sudu = true;
		}else{
			var sudu_main = document.getElementById("sudu_main");
			sudu_main.style.display = "none";
			//var clientheight= document.documentElement.clientHeight;
			var mapid = document.getElementById("map");
			//var mingxi_main = document.getElementById("mingxi_main");
			sudu= false;
			if(mingxi==false){
				mapid.style.top="0px";
			}else{
				mapid.style.top="0px";
				//alert(1)
				//mingxi_main.style.display="block";
				//alert(2)
				mingxi_main.style.top="60px"
			}
		}
	}
	function mingxi_open(){
		if(mingxi==false){
			var mapid = document.getElementById("map");
			var mingxi_main = document.getElementById("mingxi_main");
			var mingxi_open = document.getElementById("mingxi_open");
			mingxi_main.style.display = "block";
			mingxi=true;
			if(sudu==false){
				mapid.style.top="0px"
				google.maps.event.trigger(map,'resize');
			}else{
				mapid.style.top="0px";
				mingxi_main.style.top="260px"
				google.maps.event.trigger(map,'resize');
			}
		}else{
			var mapid = document.getElementById("map");
			var mingxi_main = document.getElementById("mingxi_main");
			mingxi_main.style.display = "none";
			mingxi=false;
			if(sudu==false){
				mapid.style.top="0px";
				google.maps.event.trigger(map,'resize');
			}else{
				mapid.style.top="0px";
				mingxi_main.style.top="60px"
				google.maps.event.trigger(map,'resize');
			}
		}
	}
function getMousePercX(){
	if(car!=null){
		  $("#slider").mousemove(function(e){
		  	 if(car==null){
		  	 	return;
		  	 }
			  var x=e.pageX;//获取当前位置的X坐标
			  //计算鼠标位置占slider总体的百分比
			  var divX=document.getElementById("slider").getBoundingClientRect().left;
			  var divW=document.getElementById("slider").offsetWidth;
			  var perc1=(x-divX)/divW;
			 
			  if(perc1>0){
			  	//  alert(car.topics.length);
			  	 // alert(car.topics.length*perc1);
			  	  //alert(car.topics[parseInt(car.topics.length*perc1)].recvt);
			      document.getElementById("tip").innerHTML=car.topics[parseInt(car.topics.length*perc1)].recvt+" ";//显示百分比
			  }else{
				  document.getElementById("tip").innerHTML=car.topics[0].recvt+" ";//显示百分比
			  }
			  var temp=divW-x;//计算所余位置宽度
			  var tipDivW=document.getElementById("tip").offsetWidth;//获取tipDiv的宽度
			  var tipDivWH=tipDivW/2;//取tipDiv一半的
			  var leftM=divW-tipDivW;
			  if(tipDivWH>=x){
				  document.getElementById("tip").style.left=0+"px";//tipDiv最左时的左边距    
			  }else if(tipDivWH<x && temp>tipDivWH){
				  var leftMid=x-tipDivWH;
				  document.getElementById("tip").style.left=leftMid+"px";//tipDiv中段时的左边距
			  }else if(temp<=tipDivWH){
				  document.getElementById("tip").style.left=leftM+"px";//tipDiv最右时的左边距
			  }       
			  var divY=document.getElementById("slider").getBoundingClientRect().top;//获得sliderDiv顶部的Y坐标值
			  document.getElementById("tip").style.top=(divY-25)+"px";//tipDiv的上边距
			  document.getElementById("tip").style.display=""; //显示tipDiv
		  });
	 }
}
var timesType=0;
function cutovertimesType() {
 	 var  myselect=document.getElementById("selecttimesType");
	 var index=myselect.selectedIndex ;
	 timesType=myselect.options[index].value;
}
function cutovergjdata() {
 	 var  myselect=document.getElementById("selectgjdata");
	 var index=myselect.selectedIndex ;
	 dtype=myselect.options[index].value;
}
function hiddeDiv(){
	$(document).ready(function(){
		document.getElementById("tip").style.display="none";//鼠标移出slider区域，隐藏tipDiv
	})
}



function showShezhi(){
	var timeform = document.getElementById("timeform");
	var timeform2 = document.getElementById("timeform2");
	
	var clientheight= document.documentElement.clientHeight;

	var clientwidth= document.documentElement.clientWidth;
	
	
	timeform2.style.top = document.documentElement.clientHeight/2-$("#timeform2").height()/2+"px";
	timeform2.style.left = clientwidth/2-$("#timeform2").width()/2+"px";
	timeform.style.display = "block";
}
function hideShezhi(){
	var timeform = document.getElementById("timeform");
	timeform.style.display = "none";
}
var disdata = [];
//加载当月里程数据
function getCurrentMonthDis(ymd){
	var vhcid = $("#carid").val();
	disdata = [];
	//console.info("strCarName:"+'<%=uname%>');
	$.ajax({
        type: "POST",
        dataType: "json",
        data:{"ymd":ymd,"vhcid":vhcid,"vhcCode":'<%=uname%>'},
        url:"json/reportsAction_getCurrentMonthDis.action",
        success: function(json){
        	if(json.flag){
		         for(var i=0;i<json.data.length;i++){
		        	 disdata[json.data[i].day] = json.data[i].dis;
			     }
			     if(json.stop_alarm_time!=0 && json.stop_alarm_time!=10
			    		 && json.stop_alarm_time!=30 && json.stop_alarm_time!=60){
			    	 $("#stopcartime").append("<option selected='true'  value="+json.stop_alarm_time+">"+json.stop_alarm_time+"</option>"); 
				 }else{
					 if(json.stop_alarm_time==30){
						 $("#stopcartime").get(0).selectedIndex=1;//index为索引值
					 }else if(json.stop_alarm_time==60){
						 $("#stopcartime").get(0).selectedIndex=2;//index为索引值
					 }
				 }
				 $("#companyname").html("所属公司:"+json.companyname);
        	}
        	initial();
        },
        error:function(){
        }
   });
}
//加载页面的时候执行
$(function(){
	var m = (tM+1) < 10? "0"+(tM+1):(tM+1);
	//alert(m);
	getCurrentMonthDis(tY+""+m);
});
</script>
	</head>
	<body oncontextmenu="return false" onload="closeMarkerPanel();"
		style="background: #eaeef0">

		<div id="mingxi_main">
			<table id="table1" class="table table-bordered"
				data-resizable-columns-id="demo-table-v2">
				<thead>
					<tr>
						<th data-resizable-column-id="a" style="width: 60px;">
							序号
						</th>
						<th data-resizable-column-id="b" style="width: 130px;">
							时间
						</th>
						<th data-resizable-column-id="c" style="width: 100px;">
							经度
						</th>
						<th data-resizable-column-id="d" style="width: 100px;">
							纬度
						</th>
						<th data-resizable-column-id="e" style="width: 120px;">
							速度(公里/小时)
						</th>
						<th data-resizable-column-id="f" style="width: 80px;">
							方向
						</th>
						<th data-resizable-column-id="g" style="width: 80px;">
							油量
						</th>
						<th data-resizable-column-id="h" style="width: 100px;">
							状态
						</th>
						<th data-resizable-column-id="k" id="username-column">
							位置
						</th>
					</tr>
				</thead>
			</table>
		</div>

		<div id="sudu_main" class="sudu_main" style="display: none">
			<jsp:include page="/gpsonline/jsp/Curve.jsp" flush="true" />
		</div>
		<!--left-->
		<div class="playback_left">
			<h3>
				<span>
					<p id="carname" class="pCar"></p>
					<p style="color: #888; width: 220px;" id="companyname"></p> 
				</span>
				<a href="javascript:DownLoadTrack();"
					style="float: right; margin-top: 13px; margin-right: 10px;"
					id="showShezhi">下载轨迹</a>
			</h3>
			<!--日历-->
			<div class="guiji_rili">
				<div id="rili">
					<form name="CLD">
						<div class="play_rili_wrap">
							<table width="100%" border="0" cellpadding="0" cellspacing="0"
								class="datetable">
								<thead>
									<tr>
										<th colSpan="7">
											<span>公历</span>
											<select id="yearsel" name="SY" onchange="changeCld();"
												style="color: #000;">
												<script>
						            for(i=2000;i<2050;i++) document.write('<option value='+i+'>'+i);
						        </script>
											</select>
											<span>年</span>
											<select id="monthsel" name="SM" onchange="changeCld();"
												style="color: #000">
												<script>
						            for(i=1;i<13;i++) document.write('<option value='+i+'>'+i);
						        </script>
											</select>
											<span>月</span>
											</font><span id="GZ"></span>
										</th>
									</tr>
								</thead>
								<tbody>
									<tr style="background: #eee;">
										<td width="54">
											日
										</td>
										<td width="54">
											一
										</td>
										<td width="54">
											二
										</td>
										<td width="54">
											三
										</td>
										<td width="54">
											四
										</td>
										<td width="54">
											五
										</td>
										<td width="54">
											六
										</td>
									</tr>
									<script>
							function onal(a){
								var day = document.getElementById("SD"+a).innerHTML;
								var value = document.getElementById("LD"+a).innerHTML;
								rldis = value;
								var year = document.getElementById("yearsel").value;
								var month = document.getElementById("monthsel").value;
								if(day=="" || year=="" || month==""||value=="-")return;
								f5();
								var date = year+"-"+(month<10?"0"+month:month)+"-"+(day<10?"0"+day:day);
								$("#start").val(date+" 00:00:00");
								$("#end").val(date+" 23:59:59");
								play();
							}
						    var gNum;
						    for(i=0;i<6;i++){
						       document.write('<tr align="center">');
						       for(j=0;j<7;j++) {
						          gNum = i*7+j;
						          document.write('<td style="cursor:pointer" onclick="onal('+gNum+')" id="GD' + gNum +'"><span style=" font-size:13px; font-weight:bold;" class="play_rili_riqi" id="SD' + gNum +'" ');
						          if(j == 0) document.write('color="red"');
						          if(j == 6) document.write('color="#000080"');
						          document.write('></span><br/><span style="color:#999;" id="LD' + gNum + '" ></span></td>');
						       }
						       document.write('</tr>');
						    }
						   </script>
								</tbody>
							</table>
						</div>
					</form>
				</div>
			</div>
			<!--日历 end-->
			<!--回放设置-->
			<div class="guiji_search">
				<dl>
					<dt>
						开始时间
					</dt>
					<dd>
						<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\')}'})" />
						<span></span>
					</dd>
				</dl>
				<dl>
					<dt>
						结束时间
					</dt>
					<dd>
						<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\')}'})" />
						<span></span>
					</dd>
				</dl>
				<dl style="display:none;">
					<dt>
						参数设置
					</dt>
					<dd>
						<a href="javascript:showShezhi();" class="guiji_setting"
							id="showShezhi">设置</a>
					</dd>

				</dl>
				<!--button-->
				<div class="guiji_button">

					<input id="startplay" type="button" onclick="play()" value="轨迹回放"
						class="guiji_button_play" />
					<!--<input id="startplay" type="button" onclick="stop()" value="停止回放"/>   -->
					<input id="f5" disabled="true" type="button" onclick="f5()"
						value="结束回放" class="guiji_button_end" />
				</div>
				<!--button end-->
			</div>
			<!--回放设置 end-->
		</div>
		<!--left end-->

		<!--right-->
		<div class="playback_right">
			<div class="guiji_top" id="guiji_top" style="width:180px">
				<div class="guiji_title">
					<a href="javascript:mingxi_open()" class="guiji_link"
						id="mingxi_open"> <span class="play_ico_mingxi"></span> <i>明细</i>
					</a>
					<a href="javascript:sudu_open()" class="guiji_link" id="sudu_open">
						<span class="play_ico_quxian"></span> <i>曲线图</i> </a>
				</div>
			</div>
			<!--播放-->
			<div class="play_play_main">
				<!--left-->
				<div id="div4" class="play_play_left">
					<span id="time" style="margin-right: 20px;"></span>
					<span id="lic" style="margin-right: 20px;"></span>
				</div>
				<!--left end-->
				<!--right-->
				<div class="play_play_right">
					<!--速度-->
					<span>速度:慢</span>
					<div id="speed"></div>
					<span>快</span>
					<!--速度 end-->
				</div>
				<!--right end-->

				<!--middle-->
				<div class="play_play_all">
					<a href="javascript:void(0);" onclick="play();"><span
						id="play_span" class="paly_ico_play"></span> </a>
					<a href="javascript:void(0);" onclick="f5();"><span
						class="paly_ico_end"></span> </a>
				</div>
				<!--middle end-->
			</div>
			<!--播放 end-->

			<!--进度条-->
			<div class="slider_bg" style="overflow: hidden">
				<div id="tip"
					style="display: none; height: 17px; padding: 0px 5px; color: #000; z-index: 500; position: absolute; left: 0px; border: 1px solid #999; border-bottom: none; background-color: #D3DDE4; text-align: center;"></div>
				<div id="slider" onmouseover="getMousePercX()"
					onmouseout="hiddeDiv()"></div>
			</div>
			<!--进度条 end-->
			<div id="map">
				<jsp:include page="/gpsonline/jsp/ReportBackMap.jsp" flush="true" />
			</div>
			<!-- <input type="hidden" value=""
				id="mapType" name="mapType" /> -->
			<input type="hidden" value="<%=request.getParameter("carid")%>"
				id="carid" name="carid" />
			<input type="hidden" value="<%=request.getParameter("icon")%>"
				id="icon" name="icon" />
			<input type="hidden" value="<%=request.getParameter("carname")%>"
				id="carname" name="carname" />
			<input type="hidden" class="txt" id="uType" name="uType"
				value="<%=request.getParameter("uType")%>" />
			<input type="hidden" class="txt" id="uName" name="uName"
				value="<%=uname%>" />
			<input type="hidden" class="txt" id="uName2" name="uName2"
				value="<%=uname2%>" />
			<input type="hidden" class="txt" id="uPass" name="uPass"
				value="<%=request.getParameter("uPwd")%>" />
			<input type="hidden" value="<%=request.getParameter("startTime")%>"
				id="startTime" name="startTime" />
			<input type="hidden" value="<%=request.getParameter("endTime")%>"
				id="endTime" name="endTime" />
			<!--标注-->
			<div class="marker_wrap" id="marker_wrap"
				style="display:none;">
				<!--open-->
				<div class="marker_open" style="display: none;" id="biaozhu_open">
					<!--top-->
					<div class="marker_open_top">
						<a class="marker_open_close" href="javascript:;"
							onclick="closeMarkerPanel();"> <span></span> </a>
						<div class="marker_title">
							<a href="javascript:;" class="ico_marker"></a>

						</div>
						<div class="marker_dot"></div>
					</div>
					<!--top end-->

					<div class="marker_main_bg"></div>
					<div class="marker_main">
						<div class="marker_search marker_line">
							<!-- 标注搜索开始： -->
							<div class="searchcvs">
								<div class="ctnr">
									<div style="float: left;">
										<input value="请输入标注名称" style="width: 160px;"
											name="markersearchinput" autocomplete="off"
											id="markersearchinput" class="searchinput"
											onfocus="markersearchFocus(this)"
											onblur="markersearchBlur(this)" type="text" />
									</div>
									<div class="suggest" onmouseout="ismarkerSearchFocus = false;"
										onclick="markerviewSearchListAll()"></div>
									<div style="clear: left; width: 200px;">
										<div
											style="display: none; position: absolute; background: #FFF; width: 207px; height: 200px; margin-left: -10px; border: 1px solid #95BCF0; margin-top: 3px; overflow: auto;"
											id="markersearchListOutCanvas">
											<span>...</span>
										</div>
									</div>
								</div>
								<!-- 标注搜索结束： -->
							</div>
						</div>
						<div id="markerGroupTreeCanvas"
							style="width: 220px; height: 388px; overflow-y: auto;">
							<ul id="markerGroupTree" class="ztree"></ul>
						</div>
					</div>
				</div>
				<!--open end-->

				<!--close-->
				<a class="marker_close" style="display: block;" href="javascript:;"
					onclick="openMarkerPanel();" id="biaozhu_close"> <span></span>
				</a>
				<!--close end-->
			</div>
			<!--标注 end-->


			<div id="timeform" style="font-size: 12px; display: none;">
				<div
					style="width: 100%; height: 100%; background: #fff; position: absolute; z-index: 800; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: alpha(opacity =   0.4); -moz-opacity: 0.4; opacity: 0.4;"></div>
				<div id="timeform2"
					style="position: absolute; z-index: 900; border: 1px solid #bbb; background: #fff; width: 700px; padding-bottom: 10px; left: 50%; top: 50%; margin-left: -250px; margin-top: -150px;">
					<h3
						style="height: 35px; margin: 0px; padding-right: 10px; line-height: 35px; padding-left: 10px; background: #eee; border-bottom: 1px solid #bbb; font-size: 12px">
						<b>设置</b>
					</h3>
					<div style="line-height: 40px; margin: 10px;">
						<table width="100%" border="0" cellpadding="0" cellspacing="0"
							align="center">
							<tr>
								<td width="120" align="right">
									轨迹数据：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <select
											id="selectgjdata" onchange="cutovergjdata()"
											style="width: 150px;">
											<option value="0" selected>
												轨迹文件
											</option>
											<option value="1" >
												数据库
											</option>
										</select> </span>
								</td>

								<td align="right">
									时间类型：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <select
											id="selecttimesType" onchange="cutovertimesType()"
											style="width: 150px;">
											<option value="0" selected>
												GPS时间
											</option>
											<option value="1">
												服务器时间
											</option>
										</select> </span>
								</td>
							</tr>
							<tr>
								<td width="120" align="right">
									无效定位：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <input
											type="radio" name="ShowWuxiao" onclick="ShowWuxiao(0);" />显示</span>
									<span style="float: left; margin-left: 60px;"> <input
											type="radio" name="ShowWuxiao" checked="checked"
											onclick="ShowWuxiao(1);" />不显示</span>
								</td>

								<td align="right">
									显示照片：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <input
											type="radio" id="ShowPhoto" name="ShowPhoto"
											onclick="ShowPhoto(0);" />显示</span>
									<span style="float: left; margin-left: 60px;"> <input
											type="radio" id="ShowPhoto" name="ShowPhoto"
											onclick="ShowPhoto(1);" checked="checked" />不显示</span>
								</td>

							</tr>
							<tr>
								<td width="120" align="right">
									所有停车点：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <input
											type="radio" name="ShowTingchedian"
											onclick="ShowTingchedian(1);" />显示</span>
									<span style="float: left; margin-left: 60px;"> <input
											type="radio" name="ShowTingchedian"
											onclick="ShowTingchedian(0);" checked="checked" />不显示</span>
								</td>
								<td align="right">
									停车超时：
								</td>
								<td>
									<span
										style="float: left; margin-left: 10px; margin-top: 16px; margin-right: 10px; margin-top: 10px;">
										<select id="stopcartime" style="width: 110px;">
											<option value="10">
												10
											</option>
											<option value="30">
												30
											</option>
											<option value="60">
												60
											</option>
										</select> </span>
									<span>分钟</span>
								</td>
							</tr>
							<tr>
								<td width="120" align="right">
									基站数据：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <input
											type="radio" name="jz" onclick="jz(0);" />显示</span>
									<span style="float: left; margin-left: 60px;"> <input
											type="radio" name="jz" onclick="jz(1);" checked="checked" />不显示</span>
								</td>
								<td width="120" align="right">
									补发数据：
								</td>
								<td>
									<span style="float: left; margin-left: 10px;"> <input
											type="radio" name="bf" onclick="bf(0);" />显示</span>
									<span style="float: left; margin-left: 60px;"> <input
											type="radio" name="bf" onclick="bf(1);" checked="checked" />不显示</span>
								</td>
							</tr>
						</table>
						<div style="text-align: center; color: #999; display: none;">
							（以10分钟为例：>10分钟：停车超时，<=10分钟：临时停车）
						</div>
						<div
							style="text-align: center; margin-top: 5px; margin-bottom: 10px;">
							<input type="button" value="确定" onclick="hideShezhi();"
								style="width: 100px; height: 35px; line-height: 35px;" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- right end -->

		<div id="mask" class="mask"></div>
		<div class="content" id="content" style="z-index: 100099;">
			<img src="<%=path%>/gpsonline/image/monitor/loading.gif"></img>
			<div style="text-align: center; margin-top: 10px;">
				<span id="loadingMsg"></span>
			</div>
		</div>
	</body>
</html>
