实时监控接入线路GPS数据

潘钊
1 parent 2df0767e
Showing 6 changed files with 174 additions and 57 deletions
src/main/resources/static/pages/mapmonitor/real/css/real.css
src/main/resources/static/pages/mapmonitor/real/js/map_platform.js
src/main/resources/static/pages/mapmonitor/real/js/real.js
src/main/resources/static/pages/mapmonitor/real/js/vehicle.js
src/main/resources/static/pages/mapmonitor/real/real.html
src/main/resources/static/pages/mapmonitor/real/temps/vehicle.html
@@ -53,6 +53,28 @@ label.BMapLabel{
 }
+.mapRightWrap.vehicle .slimScrollBar{
+    width: 6px !important;
+    opacity: 0.5 !important;
+    background: #e7ecf1 !important;
+    border-radius: 5px !important;
+}
+
+.mapRightWrap.vehicle a.fixed-line{
+	text-decoration: none;
+    position: fixed;
+    top: 218.5px;
+    width: 318px;
+    left: 1586px;
+    background-color: red;
+    z-index: 2;
+}
+
+.mapRightWrap.vehicle a.fixed-line .head{
+	border-bottom: none;
+    margin: 15px 15px 10px 15px;
+}
+
 .mapRightWrap.to_searchPanel{
 	transform:rotateY(180deg);
 	height: 200px;	
@@ -313,34 +335,35 @@ html{
 }
 .mapRightWrap.vehicle p.head{
-	color: #C0BDBD;
-	font-size: 21px;
-	border-bottom: 1px solid gray; 
-	padding-left: 15px;
-	position: relative;
+    color: #B7B7B7;
+    font-size: 18px;
+    border-bottom: 1px dashed #556471;
+    position: relative;
+    margin: 15px;
+    padding-bottom: 10px;
+    font-family: 微软;
 }
 /* .mapRightWrap.vehicle p.head:hover{
     box-shadow: 0 8px 17px 0 rgba(128, 123, 123, 0.2),0 6px 20px 0 rgba(86, 67, 67, 0.19);
 }
  */
-.mapRightWrap.vehicle p.head>span.icon>a{
-	position: absolute;
-	right: 15px;
-	top: -2px;
-	font-size: 24px;
-	color: #B9B9B9;
-	
-	transition: all .5s ease;
+.mapRightWrap.vehicle p.head>span.icon{
+    position: absolute;
+    right: 10px;
+    top: -6px;
+    font-size: 24px;
+    color: #7C8994;
+    transition: all .5s ease;
 }
-.mapRightWrap.vehicle p.head>span.icon>a.rotate{
+.mapRightWrap.vehicle p.head>span.icon.rotate{
 	transform:rotate(180deg);
 }
-.mapRightWrap.vehicle p.head>span.icon>a:hover{
+.mapRightWrap.vehicle p.head>span.icon:hover{
 	color: #D8D5D5;
 }
@@ -489,7 +512,7 @@ html{
 }
 .mapRightWrap.gaode.vehicle p.head{
-	border-bottom: 1px solid #e5e5e5;
+	border-bottom: 1px dashed #E2DFDF;
 	color: #7D7777;
 }
@@ -132,20 +132,24 @@ var realMap = (function() {
 				local.search(val);
 			},
-			drawLine: function(lineName, gpsList){
-				var drawCar = this.drawGpsMarker;
+			drawLine: function(lineName, cb){
 				//画线路
 				var busline = new BMap.BusLineSearch(currentMap.map,{
 					renderOptions: {map: currentMap.map},
 					onGetBusListComplete: function(result){
-					  if(result) {
-						  var fstLine = result.getBusListItem(0);
-						  busline.getBusLine(fstLine);
-						  //画车
-						  setTimeout(function(){
-							  drawCar(gpsList);
-						  }, 500);
-					   }
+					  if(result) 
+						  busline.getBusLine(result.getBusListItem(0));
+					  else
+						  cb && cb();
+					},
+					onPolylinesSet: function(pline){
+						//pline.setStrokeColor('#333');
+						//console.log(pline.getStrokeColor());
+						console.log(pline);
+						cb && cb();
+					},
+					onGetBusLineComplete: function(line){
+						line.getPolyline().setStrokeColor('#333');
 					}
 				});
 				busline.getBusList(lineName);
@@ -166,6 +170,9 @@ var realMap = (function() {
 				});
 			},
 			coordsConvert: function(list, cb){
+				if(list.length > 100)
+					list = list.slice(0, 100);
+				
 				var coords = '';
 				//拼接GPS坐标，一次性转换
 				for (var i = 0, item; item = list[i++];) 
@@ -313,10 +320,33 @@ var realMap = (function() {
 	function createLabel(gpsData){
 		var point = new BMap.Point(gpsData.bd_coord.x, gpsData.bd_coord.y)
 		//label
-		,label = new BMap.Label(gpsData.nbbm, {position: point, offset: new BMap.Size(-25,-5)});
-		label.setStyle({borderColor: '#36C6D3',borderRadius: '5px', padding: '5px 9px 5px 9px', color: '#fff', backgroundColor: '#36C6D3'});
+		,label = new BMap.Label(gpsData.nbbm.replace('-',''), {position: point, offset: new BMap.Size(-28,-10)});
+		label.setStyle({borderColor: bgColor(gpsData),borderRadius: '5px', padding: '3px 5px', color: tColor(gpsData), backgroundColor: bgColor(gpsData)});
 		return label;
 	}
+	/**
+	 * 颜色
+	 */
+	var bgColor = function(g){
+		if(g.state == 0){
+			if(g.upDown == 0)
+				return '#5E96D2';
+			else if(g.upDown == 1)
+				return '#C92121';
+			else
+				return 'red';
+		}
+		else
+			return "rgb(171, 171, 171)";
+	}
+	
+	var tColor = function(g){
+		if(g.state == 0)
+			return "#fff";
+		else
+			return "rgb(229, 229, 229)";
+	}
+	
 	return real_map;
 })();
 \ No newline at end of file
@@ -87,15 +87,15 @@
 	$('#mapContainer').height($(pjaxContainer).height() + 49);
 	mrw.html(spinnerLoad);
-	init();
+	realMap.init();
+	vehiclePanel.showDataLazy();
-	function init(){
-		//初始化地图
+	//function init(){
+		/*//初始化地图
 		(function(){
 			var f = arguments.callee;
 			try {
 				realMap.init();
-				console.log('realMap');
 			} catch (e) {
 				setTimeout(f , 100);
 			}
@@ -108,6 +108,6 @@
 			} catch (e) {
 				setTimeout(f , 100);
 			}
-		})();
-	}
+		})();*/
+	//}
 }();
 \ No newline at end of file
@@ -3,24 +3,83 @@
  */
 var vehiclePanel = (function() {
+	
 	function getCurr(){
 		return realMap[realMap.getMap().fName];
 	}
+	var storage = window.localStorage;
+	
+	function closeAll(){
+		$('a[data-toggle=collapse]').collapse('hide');
+	}
+	
 	// 手风琴收拢
 	$('.mapRightWrap').on('hide.bs.collapse', '.panel-collapse', function() {
-		$(this).prev().find('span.icon a').addClass('rotate');
+		$(this).prev().find('span.icon').addClass('rotate');
 	});
 	// 手风琴展开
 	$('.mapRightWrap').on('show.bs.collapse', '.panel-collapse', function() {
-		$(this).prev().find('span.icon a').removeClass('rotate');
+		$(this).prev().find('span.icon').removeClass('rotate');
+		var lineCode = $(this).data('line');
+		
+		//收拢其他
+		closeAll();
+		
+		//该线路的GPS点
+		var showList = [];
+		$.each(lineGps[lineCode], function(){
+			showList.push(allGps[this]);
+		})
+		//在地图上画出线路
+		var mapObj = getCurr();
+		console.log('allGps', allGps, 'lineCode', lineCode);
+		mapObj.drawLine($(this).data('name'), function(){
+			mapObj.drawGpsMarker(showList);
+		});
+		
+		//显示车辆列表
+		var htmlStr = template('vehicle_panel_collapse_temp', {list: showList});
+		$(this).html(htmlStr);
+	});
+	
+	//GPS刷新事件
+	var allGps = {};
+	var lineGps = {};
+	$('#mapContainer').on('gps_refresh', function(e, add, up){
+		var temp = add;
+		if(up)
+			temp = temp.concat(up);
+		
+		if(!$(this).is(":hidden")){
+			$.each(temp, function(){
+				allGps[this.deviceId] = this;
+			});
+			
+			$.each(add, function(){
+				if(!lineGps[this.lineId])
+					lineGps[this.lineId] = [];
+				//线路和设备号映射
+				lineGps[this.lineId].push(this.deviceId);
+			})
+		}
 	});
 	var exports = {
 		// 加载车辆信息
 		showData: function(){
-			var line = {code: 10103, name: '119路'};
+			//要展示的线路
+			var lines = JSON.parse(storage.getItem('lineControlItems'));
+			
+			var htmlStr = template('vehicle_panel_temp', {list: lines});
+			$('.mapRightWrap').html(htmlStr).addClass('vehicle');
+			//滚动条
+			$('.gps-line-wrap').slimscroll({
+				height: '100%',
+				alwaysVisible: true
+			});
+			/*var line = {code: 10103, name: '119路'};
 			$get('/gps/real/line/' + line.code, null, function(data){
 				//过滤掉没有自编号和站点名为空的
 				var newArray = [];
@@ -36,10 +95,10 @@ var vehiclePanel = (function() {
 				var mapObj;
 				mapObj = getCurr();
 				mapObj.drawLine(line.name, newArray);
-			});
+			});*/
 		},
 		showDataLazy : function() {
-			setTimeout(exports.showData, 600);
+			setTimeout(exports.showData, 1000);
 		}
 	};
@@ -50,5 +50,4 @@
 <script src="/pages/mapmonitor/real/js/temp.js"></script>
 <script src="/pages/mapmonitor/real/js/real.js"></script>
 <script>
-	console.log(111);
 </script>
 <script id="vehicle_panel_temp" type="text/html">
+<div class="gps-line-wrap">
+{{each list as line i}}
+<a data-toggle="collapse" href="#collapse_{{line.lineCode}}" aria-expanded="true" style="text-decoration:none">
 <p class="head" >
-	119路
-	<span class="icon">
-		<a data-toggle="collapse" href="#collapse_2_2" aria-expanded="true">
+	{{line.name}}
+	<span class="icon rotate">
 			<i class="fa fa-angle-double-down"></i>	
-		</a>
 	</span>
 </p>
-<div id="collapse_2_2" class="panel-collapse collapse in">
-{{each list as gpsObj i}}
-	<div class="vehicle-item online" >
-		<div class="text">
-			 <span class="nbbm"><i class="fa fa-circle"></i> &nbsp;{{gpsObj.nbbm}}</span> 
-			 &nbsp;&nbsp;&nbsp;
-			<span style="font-size: 13px;">{{gpsObj.stationName}}站</span>
-		</div>
-		<div class="icon">
-			 <i class="fa fa-angle-down"></i>
-		</div>
-	</div>
-{{/each}}
+</a>
+<div id="collapse_{{line.lineCode}}" class="panel-collapse collapse" data-line={{line.lineCode}} data-name={{line.name}}>
 	<!--
 	<div class="vehicle-item offline" >
@@ -34,4 +24,20 @@
 	</div>
 	-->
 </div>
+{{/each}}
+</div>
+</script>
+<script id="vehicle_panel_collapse_temp" type="text/html">
+{{each list as gpsObj i}}
+	<div class="vehicle-item online" >
+		<div class="text">
+			 <span class="nbbm"><i class="fa fa-circle"></i> &nbsp;{{gpsObj.nbbm}}</span> 
+			 &nbsp;&nbsp;&nbsp;
+			<span style="font-size: 13px;">{{gpsObj.stationName}}</span>
+		</div>
+		<div class="icon">
+			 <i class="fa fa-file-text-o"></i>
+		</div>
+	</div>
+{{/each}}
 </script>
 \ No newline at end of file