浦东越界功能修改、间隔信息页面优化

zb
1 parent e0cdd631
Showing 7 changed files with 109 additions and 32 deletions
src/main/java/com/bsth/service/excep/impl/NowOutboundServiceImpl.java
src/main/resources/static/pages/base/interval/js/interval-add-form.js
src/main/resources/static/pages/base/interval/js/interval-edit-form.js
src/main/resources/static/pages/excep/outBoundMap.html
src/main/resources/static/pages/excep/outboundMap.html
src/main/resources/static/pages/excep/pdboundList.html
src/main/resources/static/pages/excep/speedingMap.html
@@ -70,7 +70,7 @@ public class NowOutboundServiceImpl implements NowOutboundService{
 		}
-		sql +=" and endtimestamp - starttimestamp >10000 ";//yue越界超过10秒的才显示，有待探讨。
+		sql +=" and endtimestamp - starttimestamp >10000 ";//越界超过30秒的才显示，有待探讨。
 		sql +=" order by starttimestamp limit ?,?";
@@ -30,21 +30,18 @@ $(function(){
 		focusInvalid : true, 
 		// 需要验证的表单元素
 		rules : {
-			// 公司名称编码
 			'level' : {
 				// 必填项
 				required : true,
 				// 最大长度
 				maxlength: 10
 			},
-			// 公司名称
 			'peak' : {
 				// 必填项
 				required : true,
 				// 最大长度
 				maxlength: 10
 			},
-			// 公司名称
 			'trough' : {
 				// 必填项
 				required : true,
@@ -12,7 +12,7 @@
 	var intervalId = $.url().param('no');
 	// 如果参数ID不为空
 	if(intervalId) {
-		// 获取线路Id元素并设值
+		// 获取间隔信息Id元素并设值
 		$('#intervalId').val(intervalId);
 		/** 根据ID查询详细信息 */
 		$get('/interval/' + intervalId ,null, function(result){
@@ -50,21 +50,18 @@
 		focusInvalid : true, 
 		// 需要验证的表单元素
 		rules : {
-			// 公司名称编码
 			'level' : {
 				// 必填项
 				required : true,
 				// 最大长度
 				maxlength: 10
 			},
-			// 公司名称
 			'peak' : {
 				// 必填项
 				required : true,
 				// 最大长度
 				maxlength: 10
 			},
-			// 公司名称
 			'trough' : {
 				// 必填项
 				required : true,
-<link href="/pages/base/stationroute/css/bmap_base.css" rel="stylesheet" type="text/css" />
-<div class="portlet-body">
-	<!-- 地图 -->
-	<div id="bmap_basic" class="bmaps"></div>
-</div>
-<!-- load事件 -->
-<script src="/pages/excep/js/outboundmap-load.js"></script>
-<!-- 线路类 -->
-<script src="/pages/excep/js/outboundline.js"></script>
-<!-- 绘图类 -->
-<script src="/pages/base/stationroute/js/drawingManager.js"></script>
-<!-- 地图类 -->
-<script src="/pages/excep/js/outbound-map.js"></script>
-<!-- 函数与方法 -->
-<script src="/pages/excep/js/outboundmap-function.js"></script>
-<!-- ajax请求类 -->
-<script src="/pages/base/stationroute/js/stationroute-ajax-getdata.js"></script>
-
+<style>
+	.play_back-layer .layui-layer-title{
+    	height: 36px;
+    	border-bottom: none;
+	}
+</style>
+
+<div id="titleMap">
+<button id="run" style="margin-left:10px" class="btn btn-sm green btn-outline filter-submit margin-bottom">运行</button>
+</div>
+<div id="BasicMap">
+</div>
+<style type="text/css">
+
+#BasicMap{
+	width: 100%; 
+	border: 2px solid #fdfdfd;
+	height: calc(100% - 30px);
+	overflow: hidden;
+}
+</style>
+<script type="text/javascript" src="/pages/excep/js/map.js"></script>
+<script type="text/javascript" src="/pages/excep/js/line-list-function.js"></script>
+
+<script type="text/javascript">
+$(function(){
+		var dataArr = window.localStorage.zbhAndDate.split(",");//获取页面传递过来的车辆自编号以及超速起始时间和超速结束时间
+		localStorage.clear();//清楚前端缓存
+		var vehicle = dataArr[0];
+		var startdate = dataArr[1];
+		var enddate = dataArr[2];
+		var lon = dataArr[3];//起点经度
+		var lat = dataArr[4];//起点纬度
+		var endLon = dataArr[5];//终点经度
+		var endLat = dataArr[6];//终点纬度
+		var lineid = dataArr[7];
+		var directionData = dataArr[8];
+		var pointObj;//坐标和速度组成的对象
+		var Points = [];//坐标和速度对象的集合
+		var coordinateArr = [];//坐标点数组
+  		$.ajax({
+        	type: "GET",
+        	async:false,
+            url: '/nowbound/findPosition',
+            data: {vehicle:vehicle,startdate:startdate,enddate:enddate},
+            success: function(data){
+             	$.each(data,function(i,item){
+             		if(item.lon>1 && item.lat>1){
+             			pointObj = new Object();
+             			pointObj.coordinate = new BMap.Point(item.lon,item.lat);
+			 			pointObj.vehicle = item.vehicle;
+			 			Points.push(pointObj);
+            		} 
+ 				});
+            }
+        });      
+ setTimeout(function(){
+		var map = BasicMap.init();//创建地图
+		$get('/sectionroute/findSection',{'line.id_eq' : lineid , 'directions_eq' :directionData},function(data) {
+			// 在地图上画出线路走向
+			PublicFunctions.linePanlThree(lineid,data,directionData);
+		});
+		var myP1 = new BMap.Point(lon,lat);    //起点
+		var myP2 = new BMap.Point(endLon,endLat);    //终点
+ 		for(i in Points){
+ 			coordinateArr.push(Points[i].coordinate);
+ 		}
+ 		var polyline = new BMap.Polyline(coordinateArr, {strokeColor:"red", strokeWeight:5, strokeOpacity:0.5});//创建折线
+		var myIcon = new BMap.Icon("/pages/excep/img/bus.png", new BMap.Size(32, 70), {//小车图片
+			imageOffset: new BMap.Size(5,20) //图片的偏移量。为了是图片底部中心对准坐标点。
+		}); 
+		
+		var carMk;
+		$(document).on('click', '#run', function() {
+			map.centerAndZoom(new BMap.Point(lon,lat),16);//地图中心点坐标 */
+			if(typeof(carMk)!="undefined"){
+ 				map.removeOverlay(carMk);//清空上一次的轨迹
+			}
+ 			carMk = new BMap.Marker(coordinateArr[0],{icon:myIcon});
+			map.addOverlay(polyline);//增加折线
+			var paths = coordinateArr.length;//获得有几个点
+			map.addOverlay(carMk);
+			i=0;
+			setTimeout(function(){
+				resetMkPoint(0);
+			},500);
+			function resetMkPoint(i){
+				carMk.setPosition(coordinateArr[i]);
+				if(i < paths-1){
+					setTimeout(function(){
+						i++;
+						resetMkPoint(i);
+					},500);
+				}
+			};
+				 
+		});
+	}, 500);
+ });
+</script>
+
+
@@ -65,11 +65,9 @@
 							<tr role="row" class="filter">
 								<td></td>
 								<td>
-<!-- 									<input type="text" class="form-control form-filter input-sm" name="userName_like"> -->
 										<select class="form-control" name="line" id="line" style="width: 150px;"></select>
 								</td>
 								<td>
-<!-- 									<input type="text" class="form-control form-filter input-sm" name="nbbm"> -->
 								<select class="form-control" name="nbbm" id="nbbm" style="width: 150px;"></select>
 								</td>
 								<td>
@@ -128,7 +126,7 @@
 		{{/if}}
 	</td>	
 	<td>
-		{{obj.id}}
+		{{obj.address}}
 	</td>	
 	<td>
 		{{obj.timestampDate}}
@@ -137,7 +135,7 @@
 		<a class="btn default blue-stripe btn-sm lookTrajectory" data-vehicle ="{{obj.vehicle}}"
 			data-startdate="{{obj.timestampDate}}" data-enddate="{{obj.endtimestampDate}}"
 			data-lon="{{obj.lon}}"  data-lat="{{obj.lat}}" data-endlon="{{obj.endlon}}"  
-            data-endlat="{{obj.endlat}}" data-lineid="{{obj.lineId}}" data-updown="{{obj.upDown}}">
+            data-endlat="{{obj.endlat}}" data-lineid="{{obj.line}}" data-updown="{{obj.upDown}}">
 			轨迹回放										
 		</a>
 	</td>
@@ -243,8 +241,8 @@ $(function(){
 							    content:result,//内容
 							});
 					    });
-					}) 
-					return;
+					})
+					return; 
 				}
 				var result = listResult[index];
 				new BMap.Geocoder().getLocation(new BMap.Point(result.lon,result.lat), function(rs){
@@ -25,6 +25,7 @@
 <script type="text/javascript">
 $(function(){
 		var dataArr = window.localStorage.zbhAndDate.split(",");//获取页面传递过来的车辆自编号以及超速起始时间和超速结束时间
+		localStorage.clear();//清楚前端缓存
 		var vehicle = dataArr[0];
 		var startdate = dataArr[1];
 		var enddate = dataArr[2];