线调线路选择

潘钊
1 parent 5bb75329
Showing 6 changed files with 607 additions and 196 deletions
src/main/resources/static/pages/control/line/css/lineControl.css
src/main/resources/static/pages/control/line/index.html
src/main/resources/static/pages/control/line/js/data.js
src/main/resources/static/pages/control/line/js/drawSvg.js
src/main/resources/static/pages/control/line/js/main.js
src/main/resources/static/pages/control/line/temps/home_tp.html
+label {
+	max-width: none;
+}
+.load-text{
+	position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%);
+    font-size: 14px;
+    font-family: 仿宋;
+}
+body{
+	overflow: hidden;
+}
+
+/* ^_^ 隐藏logo */
+.anchorBL,
+.anchorBL,
+.amap-logo,
+.amap-copyright{
+	display: none;
+}
+
+
 /* .dropdown-menu {
     background-color: rgba(76, 115, 142, 0.95);
     border: 1px solid #4C738E;
@@ -196,7 +220,7 @@
 }
  
 .card_wrap{
-	height: 263px;
+	height: 268px;
 	text-align: center;
 }
  
@@ -207,8 +231,8 @@
  
 .card_wrap .line_chart{
 	height: 100%;
-	padding: 0;
-	border-top: 1px solid #DADADA;
+    padding: 0;
+    border-top: 1px solid #DADADA;
 }
  
 .card_wrap .line_chart .top{
@@ -222,7 +246,7 @@
 .card_wrap .line_chart .top .center{
     height: 100%;
     font-size: 15px;
-    color: #B9B9B9;
+    color: #5E96D2;
     padding: 10px 0px;
     width: auto;
     float: left;
@@ -339,7 +363,7 @@
     margin-right: 0;
     overflow-y: hidden;
     background: #fdfdfd;
-    margin-top: 5.8px;
+    margin-top: 0;
    /*  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
 }
  
@@ -358,11 +382,18 @@
  
 /* svg 样式 */
 .line_chart svg{
-    height: 100%;
+/*     height: 100%;
     margin: 0;
     z-index: 1;
     position: absolute;
     top: 0;
+    left: 0; */
+    
+    height: calc(100% - 40px);
+    margin: 0;
+    z-index: 1;
+    position: absolute;
+    bottom: 0;
     left: 0;
 }
 /* .station_circle{
@@ -376,16 +407,16 @@
 }
  
 .up_station_circle{
-    fill: #5e96d2;
+	fill: #5e96d2;
     r: 6;
-    stroke: #fff;
+    stroke: rgb(253, 253, 253);
     stroke-width: 3;
 }
  
 .down_station_circle{
-	fill: #c92121;
+    fill: #c92121;
     r: 6;
-    stroke: #fff;
+    stroke: rgb(253, 253, 253);
     stroke-width: 3;
 }
  
@@ -394,32 +425,36 @@
 	letter-spacing: -2.6px;
 }
  
+.station_text:hover{
+	background-color: red;
+}
+
 .station_text.up{
-	fill: #5e96d2;
+	fill: #5E96D2;
 }
  
 .station_text.down{
-	fill: #c92121;
+	fill: #C92121
 }
  
 .station_text.end{
-	fill: none;
-    stroke: #c92121;
+    fill: none;
+    stroke: #C92121;
 }
  
 .station_text.start{
-	stroke: #5e96d2;
+    stroke: #5E96D2;
     fill: none;
 }
  
 .up_path{
-	stroke-width: 7.4px;
-	stroke: #5e96d2;
+	stroke-width: 5.4px;
+	stroke: #5E96D2;
 }
  
 .down_path{
-	stroke-width: 7.4px;
-	stroke: #c92121;
+    stroke-width: 5.4px;
+    stroke: #C92121;
 }
  
 .up_path.arc,
@@ -437,6 +472,94 @@
     r: 0;
 }
  
+.vehci-g.up{
+        transform: translate(-15px, -34px);
+}
+
+.vehci-g.down{
+       transform: translate(-15px, 8px);
+}
+
+.vehci-g.up rect,
+.vehci-g.down rect{
+    width: 28px;
+    height: 25px;
+    fill: rgba(253, 253, 253, 0.17);
+    rx: 5px;
+    stroke: #26c281;
+}
+
+.vehci-g.up text,
+.vehci-g.down text{
+    stroke: #26c281;
+    font-size: 12px;
+    cursor: default;
+}
+
+.vehci-g.updown-error rect,
+.vehci-g.updown-error text{
+	stroke: #CACA17;
+	fill: rgba(253, 253, 253, 0);
+}
+
+.number-g{
+	 transform: translate(-13px, -32px);
+}
+.number-g text{
+    transform: translate(9px, 17px);
+    stroke: white;
+}
+
+.number-g rect{
+    width: 25px;
+    height: 25px;
+    fill: #333333;
+    rx: 11px;
+    stroke: #FDFDFD;
+    stroke-width: 5px;
+}
+
+.number-g.start{
+	transform: translate(-38px, 52px);
+}
+
+.number-g.end{
+	transform: translate(13px, 52px);
+}
+
+g.park .park-rect{
+	width: 50px;
+    height: 130px;
+    fill: rgba(94, 150, 210, 0.32);
+    rx: 5px;
+}
+g.park.start rect,
+g.park.start text{
+	transform: translate(-56px, 0);
+}
+
+g.park .gps-rect{
+    width: 28px;
+    height: 25px;
+    fill: #ccc;
+    rx: 5px;
+    stroke: #ccc;
+}
+
+g.park text{
+	stroke: #fafafa;
+    font-size: 12px;
+    cursor: default;
+    
+}
+
+/* .svg-bg{
+	width: 100%;
+    height: 100%;
+    fill: rgba(94, 150, 210, 0.32);
+} */
+
+
 /* tab_map 地图嵌入样式修正 */
 #tab_map #mapContainer{
 	margin-top: -8px
@@ -513,7 +636,7 @@
     color: #000;
 }
 #tab_map .mapRightWrap.gaode.vehicle p.head{
-	color: #7D7777;
+	color: #504B4B;
 }
 #tab_map .mapRightWrap.vehicle.gaode p.head>span.icon>a:hover{
 	color: #555555;
@@ -555,4 +678,79 @@
 	background: #ddd;
 	color: #333333;
 }
-/* GaoDe  style end-------  */
 \ No newline at end of file
+/* GaoDe  style end-------  */
+#tooltipShade {
+ 	position: absolute;
+    z-index: 99998;
+    width: 100%;
+    height: 100%;
+    display: none;	
+    left: 0;
+    top: 0;
+    
+    background: rgba(102, 102, 102, 0.63);
+    animation-duration:.2s;
+	-webkit-animation-duration:.2s;
+}
+
+#tooltipShade.level2{
+	background: rgba(102, 102, 102, 0.13);
+}
+
+#tooltip{
+    position: absolute;
+    z-index: 99999;
+   /*  border-radius: 5px !important; */
+    border: 1px solid rgba(94, 150, 210, 1);
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    width: 185px;
+}
+
+#tooltip hr{
+    margin: 9px 0 9px -10px;
+    border-top: 1px solid #ddd;
+    width: calc(100% + 20px);
+}
+
+#tooltip.fixed{
+	transition: all .5s ease;
+	border: 1px solid #fff;
+	background: #fff;
+}
+
+#tooltip #tooltip-Container{
+	padding: 10px;
+}
+
+#tooltip #tooltip-Container div{
+	margin: 3px;
+	font-size: 13.4px;
+}
+
+#tooltip #tooltip-Container div a{
+	color: #274865;
+}
+
+#tooltip #tooltip-Container .title a{
+	font-size: 16px;
+    font-family: 微软雅黑;
+    color: blue;
+}
+
+#tooltip #tooltip-Container .subtitle,
+#tooltip #tooltip-Container .subtitle a{
+    color: #999;
+    font-size: 13px;
+}
+
+#tooltip.tooltip-modal{
+width: 700px;
+height: 400px;
+    box-shadow: 0 12px 15px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
+#tooltip #tip_map_wrap{
+	width: 100%;
+	height: 100%;
+}
 \ No newline at end of file
@@ -76,22 +76,33 @@
 		<div class="tab-content" style="padding: 5px;overflow-y: auto;">
 			<div class="tab-pane fade active in" id="tab_home" ></div>
 			<div class="tab-pane fade"  id="tab_map" style="position: relative;"></div>
-			<div class="tab-pane fade" id="tab_line">单线路调度</div>
+			<div class="tab-pane fade" id="tab_line">单线路调度aaa</div>
 		</div>
 	</div>
+<div id="tooltipShade" class="animated fadeIn"></div>
+
 </div>
 <div id="temps"></div>
  
-<script src="js/drawSvg.js"></script>
-<script src="js/data.js"></script>
-<script src="js/main.js"></script>
+
+<div id="tooltip" style="display: none;">
+</div>
+
+<script src="/pages/control/line/js/tooltip.js"></script>
+<script src="/pages/control/line/js/drawSvg.js"></script>
+<script src="/pages/control/line/js/data.js"></script>
+<script src="/pages/control/line/js/main.js"></script>
 <script>
 $(function() {
-	
-	// 关闭左侧栏 http://222.66.0.204:8899/transport_server/rtgps
-/* 	if (!$('body').hasClass('page-sidebar-closed'))
-		$('.menu-toggler.sidebar-toggler').click();
-	 */
-  
+ 	//加载模板文件
+ 	getTemp('temps/home_tp.html');
+ 	getTemp('temps/home_table_tp.html');
+ 	getTemp('temps/tooltip_tp.html');
+ 	
+	function getTemp(url){
+		$.get(url, function(template){
+			$('#temps').append(template);
+		});
+	}
 });
 </script>
 \ No newline at end of file
@@ -4,24 +4,19 @@
 var _data = (function(){
  
 	var storage = window.localStorage;
-	//写入模拟数据
-	storage.setItem('lineControlItems',JSON.stringify( 
-			[
-			 {id: 10232, name: '604路', start: '三林世博家园', end: '西营路德州路'},
-			 {id: 10566, name: '778路', start: '莱阳路五莲路', end: '张江地铁站'} ,
-			 {id: 10904, name: '新川专线', start: '上海火车站（北广场）', end: '华戴路川环南路'},
-			 {id: 10069, name: '85路', start: '陆家嘴地铁站', end: '长岛路东陆路'},
-			 {id: 10474, name: '987路', start: '源华路双桥路', end: '世纪大道地铁站'},
-			 {id: 10507, name: '636路', start: '龚丰路溪平路', end: '张江地铁站'},
-			 {id: 10702, name: '浦东23路', start: '南汇汽车站', end: '五七场部'},
-			 {id: 10220, name: '573路', start: '宁桥路申江路', end: '东方路栖霞路'}
-			]));
  
+	//实时GPS数据
+	var allGps = {};
+	//10秒刷新一次实时GPS
+	var realGpsT = 1000 * 30;
  
 	var dataObject = {
 		getLines: function(){
 			return JSON.parse(storage.getItem('lineControlItems'));
 		},
+		getLineIds: function(){
+			return JSON.parse(storage.getItem('lineIds'));
+		},
 		getRealVehic: function(lineArray, cb){
 			var tabList = [
 						   {nbbm: 'W9H108', endDistance: '13.14', endTime: '82', instructions: '', speed: '16', roadSigns: '另1'},
@@ -56,20 +51,37 @@ var _data = (function(){
 			$get('/stationroute/all', {'line.lineCode_eq': lineId}, function(routes){
 				var svgData = analyData(routes);
  
-				cb && cb(svgData, container);
+				cb && cb(lineId, svgData, container);
 			});
+		},
+		/**
+		 * 实时GPS定时刷新
+		 */
+		startRefreshGpsTimer: function(){
+			var f = arguments.callee;
+			refreshGpsProxy();
+			setTimeout(f, realGpsT);
 		}
 	};
  
- 	//加载模板文件
- 	getTemp('temps/home_tp.html');
- 	getTemp('temps/home_table_tp.html');
+	//地图tab页显示时 注入gps数据
+	$('a[href=#tab_map]').on('shown.bs.tab', function(){
+		$('#tab_map #mapContainer').trigger('gps_refresh', [allGps]);
+	});
  
-	function getTemp(url){
-		$.get(url, function(template){
-			$('#temps').append(template);
+	function refreshGpsProxy(){
+		refreshGps(function(add, up){
+			$('#tab_home,#tab_map #mapContainer').trigger('gps_refresh', [add, up]);
 		});
 	}
+
+	
+	//初始化lineCodes
+	var lineCodes = '';
+	$.each(dataObject.getLines(), function(i, obj){
+		lineCodes += (obj.lineCode + ',');
+	});
+	lineCodes = lineCodes.substr(0, lineCodes.length - 1);
  
 	var upSort = function(a, b){
 		return a.outStationNmber - b.outStationNmber;
@@ -84,7 +96,7 @@ var _data = (function(){
  
 		for(var i = start, obj; obj = array[i++];){
  
-			if(obj.station.stationName == station.stationName){
+			if(obj.stationName == station.stationName){
 				res = i;
 				break;
 			}
@@ -93,6 +105,50 @@ var _data = (function(){
 		return res;
 	}
  
+	
+	/**
+	 * 刷新GPS车辆信息
+	 */
+	function refreshGps(cb){
+		$.ajax({
+			url: '/gps/real/line',
+			data: {lineCodes: lineCodes},
+			timeout: 5000,//5秒超时
+			success: getGpsSuccess,
+			error: getGpsError
+		});
+		
+		function getGpsSuccess(gpsList){
+			if(!gpsList || gpsList.length == 0)
+				return;
+			
+			var prve = allGps
+				,addArray = []
+				,upArray = []
+				,oldGps;
+			for(var i = 0, gps; gps=gpsList[i++];){
+				oldGps = prve[gps.deviceId];
+				if(!oldGps){
+					//添加
+					prve[gps.deviceId] = gps;
+					addArray.push(gps);
+				}
+				else if(gps.timestamp > oldGps.timestamp){
+					//更新
+					upArray.push(gps);
+				}
+			}
+			cb && cb(addArray, upArray);
+		}
+		
+		function getGpsError(jqXHR, textStatus){
+			if(textStatus === 'error')
+				layer.alert('获取GPS数据时，服务器出现异常', {icon: 2});
+			else if(textStatus === 'timeout')
+				layer.alert('连接服务器超时', {icon: 2});
+		}
+	}
+	
 	/**
 	 * 解析数据成svg想要的格式
 	 */
@@ -112,9 +168,9 @@ var _data = (function(){
 		//合并
 		var data = [];
 		for(var j = 0; j < up.length; j ++){
-			var upS = up[j].station
-				, downS = down[j].station
-				,op = {name: [upS.stationName], id: [upS.stationCod, downS.stationCod], type: 2};
+			var upS = up[j] == null?{}:up[j]
+				,downS = down[j] == null?{}:down[j]
+				,op = {name: [upS.stationName], id: [upS.stationCode, downS.stationCode], type: 2, stationMark: upS.stationMark};
  
 			//编码相同
 			if(upS.stationName != downS.stationName){
@@ -126,8 +182,8 @@ var _data = (function(){
 					down.splice(j, 0, {});
 				}else{
 					for(var t = j; t < dIndex - 1; t++){
-						var temp = down[t].station;
-						data.push({name: [temp.stationName], type:1, id: [temp.stationCod]});
+						var temp = down[t];
+						data.push({name: [temp.stationName], type:1, id: [temp.stationCode]});
 					}
 					//delete
 					down.splice(j, dIndex - 1 - j);
@@ -4,10 +4,17 @@
 */
 var drawSvg = (function(){
  
-	var mt = 81//顶部距离
+	var mt = 44//顶部距离
 		,p = 132//上下行之间的间隔
 		,x = d3.scale.linear()
-		,w;
+		,w
+		,lineSvgMapp = {}
+		,lineStations = {}
+		,seGps = {} //起终点gps信号;
+	
+/*	var arcPath = function(cx, cy, arc){
+		return 'M' + cx + ',' + cy + ' C' + arc + ',' + (cy + 5) + ' ' + arc + ',' + (cy + p - 13) + ' ' + cx + ',' + (cy + p - 8);
+	}*/
  
 	var upStation = function(value){
 		return value.type != 1 ;
@@ -17,63 +24,65 @@ var drawSvg = (function(){
 		return value.type != 0;
 	}
  
-	var textY = function(d){
-	}
-	
-	var upLine = d3.svg.line().x(function(d) {
+	var line = {
+		up: d3.svg.line().x(function(d) {
 			return d.cx;
-		}).y(function(){return mt});
-	
-	var downLine = d3.svg.line().x(function(d) {
+		}).y(function(){return mt}),
+		down: d3.svg.line().x(function(d) {
 			return d.cx;
-		}).y(function(){return mt + p});
+		}).y(function(){return mt + p})
+	}
+	
  
 	var cx = function(d, i){
 		return x(i);
 	}
  
+	var cutNbbm = function(nbbm){
+		return nbbm.substr(nbbm.length - 3, nbbm.length);
+	}
+	
 	var drawSvgObject = {
-		init: function(data, container){
+		init: function(lineId, data, container){
+			//记录起终点站
+			$.each(data, function(){
+				if(this.stationMark == 'B' || this.stationMark == 'E' )
+					seGps[lineId + '_' + this.id[0]] = [];
+			});
+			
 			w = $('.line_chart:first').width();
 			var svg = d3.select('#' + container).append('svg')
-						.attr('width', w).attr('opacity', 0)
-				,dLen = data.length;
+				.attr('width', w).attr('opacity', 0)
+				.attr('id', lineId);
  
-			x.range([ 50 , w - 10]).domain([ 0,  dLen]);
+			lineSvgMapp[lineId] = svg;
+			lineStations[lineId] = data.slice(0);
+			//抽站
+			cleanStation(data);
+			var dLen = data.length;
  
-			//上行线条 path
-			svg.append('path')
-				.attr('d', function(){
-					return upLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
-				})
-				.attr('class', 'up_path');
+			x.range([ 60 , w - 15]).domain([ 0,  dLen]);
  
-			//下行线条 path
-			svg.append('path')
-				.attr('d', function(){
-					return downLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
-				})
-				.attr('class', 'down_path');
+			//上行线条
+			drawPath(svg, data, 'up', 11);
+			//下行线条
+			drawPath(svg, data, 'down', 10);
  
-			//左弧线 path
+/*			//左弧线 path
 			svg.append('path')
 				.attr('d', function(){
-					var cx = x(0) - 8
-						,cy = mt + 5
-						,arc = cx - 18;
-					return 'M' + cx + ',' + cy + ' C' + arc + ',' + (cy + 5) + ' ' + arc + ',' + (cy + p - 13) + ' ' + cx + ',' + (cy + p - 8);
+					var cx = x(0) - 8;
+					return arcPath(cx , mt + 5,cx - 20);
 				})
 				.attr('class', 'up_path arc');
  
 			//右弧线 path
 			svg.append('path')
 				.attr('d', function(){
-					var cx = x(dLen - 1) + 8
-						,cy = mt + 5
-						,arc = cx + 18;
-					return 'M' + cx + ',' + cy + ' C' + arc + ',' + (cy + 5) + ' ' + arc + ',' + (cy + p - 13) + ' ' + cx + ',' + (cy + p - 8);
+					var cx = x(dLen - 1) + 8;
+					return arcPath(cx , mt + 5,cx + 20);
 				})
-				.attr('class', 'down_path arc');
+				.attr('class', 'down_path arc');*/
  
 			var g = svg.append('g').selectAll('g')
 					.data(data)
@@ -81,17 +90,13 @@ var drawSvg = (function(){
 					.append('g').attr('class', 'item');
  
 			//上行站点 circle
-			g.append('circle')
-					.attr('class', function(d){
-						if(d.type != 1)
-							return 'up_station_circle';
-					})
-					.attr('cx', cx)
-					.attr('cy', mt);
+			drawCircle(g, 'up', lineId);
+			
+			//下行站点 circle
+			drawCircle(g.select(function(d){return d.type!=0?this:null}), 'down', lineId);
  
 			//站点名称 text
-			g.append('text')
-				.attr('class', function(d, i){
+			g.append('text').attr('class', function(d, i){
 					var c = 'station_text';
 					if(i == 0)
 						c += ' start';
@@ -107,15 +112,6 @@ var drawSvg = (function(){
 				.attr('x', function(d, i){return (d.type==3?(x(i) - 8):x(i))})
 				.attr('y', mt + 10);
  
-			//下行站点
-			g.select(function(d){return d.type!=0?this:null})
-				.append('circle')
-				.attr('class', function(d){
-					if(d.type != 0)
-						return 'down_station_circle';
-				})
-				.attr('cx', cx)
-				.attr('cy', mt + p);
  
 			//上下行不同名（异站合并）
 			g.select(function(d){return d.type==3?this:null})
@@ -137,8 +133,8 @@ var drawSvg = (function(){
 					var t = $(this).text()
 						len = t.length;
 					if(len > 7){
-						$(this).data('fullname', t);
-						return t.substring(0, 7);
+						var sortText = t.substring(0, 7);
+						return sortText;
 					}
 					return t;
 				});
@@ -146,86 +142,210 @@ var drawSvg = (function(){
 			$(' .text-load', '#'+container).remove();
 			svg.transition().duration(500).attr('opacity', 1);
  
-			up(svg, data, g);
+			//GPS点容器
+			svg.append('g').attr('class', 'gps-g-wrap');
+			
+			d3.selectAll('g.item circle').select(function(){
+				return $(this).attr('class')?null:this;
+			}).remove();
+			
+		},
+		
+		//画出GPS点
+		drawVehicle: function(gpsArray){
+			
+			for(var i = 0, gps; gps = gpsArray[i ++];){
+				var svg = lineSvgMapp[gps.lineId]
+					,stionId = gps.lineId + '_' + gps.stopNo
+					,station = $('#' + stionId)
+					,c = station.attr('class')||""
+					,start = c.indexOf('start') != -1
+					,end = c.indexOf('end') != -1;
+			
+				if(station.length == 0)
+					continue;
+				
+				//起终点站GPS信号
+				if(seGps[stionId]){
+					seGps[stionId].push(gps);
+					continue;
+				}
+				
+				var cx = parseInt(station.attr('cx'))
+					,cy = parseInt(station.attr('cy'))
+					,updown = station.attr('updown')
+					,gpsGWrap = svg.select('.gps-g-wrap')
+					,gpscont;
+				
+				if($('g[for='+stionId+']').length == 0){
+					gpscont = gpsGWrap.append('g')
+						.attr('class', 'station-gps-container')
+						.attr('updown', updown)
+						.attr('for', stionId);
+				}else{
+					gpscont = gpsGWrap.selectAll('g')
+							.select(function(){return $(this).attr('for') == stionId?this:null})
+							.classed({'multiple': true});
+				}
+				var vg = gpscont.selectAll('g[deviceId="'+gps.deviceId+'"]')
+					.data([gps]).enter().append('g')
+					.attr('deviceId', gps.deviceId)
+					.attr('class', 'vehci-g ' + (updown==0?'up':'down'))
+					.attr('station', gps.stopNo);
+				
+				//上下行异常
+				/*if(!start && !end && updown != gps.upDown){
+					vg.classed({'updown-error': true});
+				}*/
+				
+				vg.append('text')
+					.attr('x', cx + 4).attr('y', cy + 17)
+					.text(cutNbbm(gps.nbbm));
+				
+				var rect = vg.append('rect').attr('x', cx).attr('y', cy);
+				
+				//tooltip
+				_tooltip.initGpsTip(vg);
+			}
+			
+			//画出起终点GPS信号
+			var len;
+			for(var eid in seGps){
+				len = seGps[eid].length;
+				if(len > 0){
+					var e = $('#' + eid)
+					,x = parseInt(e.attr('cx'))
+					,y = parseInt(e.attr('cy'));
+					
+					var svg = lineSvgMapp[seGps[eid][0].lineId];
+					
+					var gs = svg.append('g').classed({'start': e.attr('class').indexOf('start') != -1, 'park': true})
+						.selectAll('g').data(seGps[eid]).enter().append('g');
+					//Y轴居中
+					y = (y + 66) - len * 13;
+					gs.append('rect')
+						.attr('x', x + 15)
+						.attr('y', function(d, i){
+							return y + i * 27;
+						})
+						.classed({'gps-rect': true});
+					
+					gs.append('text')
+						.attr('x', x + 18)
+						.attr('y', function(d, i){
+							return y + i * 27 + 17;
+						})
+						.text(function(d){return cutNbbm(d.nbbm)});
+				}
+			}
+			
+			/**
+			 * 堆叠多个GPS信号
+			
+			$.each($('.station-gps-container'), function(i, multiGps){
+				var tArray = $(multiGps).find('g')
+					,updowm = $(multiGps).attr('updown')
+					,translateY
+					,len = tArray.length;
+				
+				var circle = $('#' + $(multiGps).attr('for')) 
+					,c = circle.attr('class')
+					,start = c.indexOf('start') != -1
+					,end = c.indexOf('end') != -1;
+				
+				if(start || end || len > 2){
+					tArray.hide();
+					drawNumber(multiGps, len, this, start, end);
+				}if(len == 2){
+					if(updowm == 0){
+						translateY = -60;
+					}else
+						translateY = 32;
+					
+					$(tArray[1]).css('transform', 'translate(-15px, '+ translateY +'px)');
+				}
+			}); */
+			
+/*			function drawNumber(multiGps, num, that, start, end){
+				var circle = $('#' + $(multiGps).attr('for'))
+				,x = circle.attr('cx')
+				,y = circle.attr('cy');
+				
+				//数字标记
+				var numberG = d3.select(that).append('g').attr('class', 'number-g');
+				
+				if(start)
+					numberG.classed({'start': true});//始发站
+				else if(end)
+					numberG.classed({'end': true});//终点站
+				
+				numberG.append('rect').attr('x', x).attr('y', y);
+				numberG.append('text').attr('x', x).attr('y', y).text(num);
+			}*/
 		}
 	};
  
-	//更新
-	function up(svg, data, g){
-		/**
-		 * ------------- 抽站 --------------------------------
-		 */
-		var ms = w / 37
-			,dLen = data.length;
-		if(ms < dLen){
-			var rs  = dLen - ms
-				,s = parseInt(dLen / 2 - rs)
-				,e = (rs + s) * 2;
-			
-			var rsEmes = [];
-			//中间开始，隔站抽
-			for(;s < e; s +=2)
-				rsEmes.push(g[0][s]);
-			
-			var i = 0;
-			(function(){
-				var f = arguments.callee;
-				if(i >= rsEmes.length){
-					upPosi(svg)
+	function drawPath(svg, data,updown, noclear){
+		svg.append('g').selectAll('path')
+			.data(data.slice(0, data.length - 1)).enter().append('path')
+			.attr('d', function(d, i) {
+				return line[updown]([{cx: x(i)}, {cx: x(i + 1)} ]);
+			})
+			.attr('class', updown + '_path')
+			.attr('stroke-dasharray', function(d){//虚线
+				if(d.clear && d.clear != noclear){
+					$(this).css('stroke-width', '5px');
+					return '2,1';
 				}
+				return 0;
+		}); 
+	}
+	
+	function drawCircle(g, updown, lineId){
+		var len = g[0].length;
+		g.append('circle')
+			.attr('cx', cx)
+			.attr('cy',  updown=='up'?mt:mt + p)
+			.attr('id',function(d){
+				if(d.id[0] != -1)
+					return lineId + '_' + d.id[0];
+			})
+			.attr('updown', updown=='up'?0:1)
+			.attr('class', function(d, i){
+				var no = updown=='up'?1:0
+					,classz= '';
+				if(d.type != no)
+					classz += (updown + '_station_circle');
  
-				$(rsEmes[i]).fadeOut(30, function(){
-					$(this).remove();
-					i ++;
-					f();
-				});
-			})();
-		}
+				if(i == 0)
+					classz += ' start';
+				else if(i == len-1)
+					classz += ' end';
+				
+				return classz;
+			});
 	}
  
-	function upPosi(svg){
-		//重新等比例位置
-		var gItems = svg.selectAll('g.item')
-			,dLen = gItems[0].length;
-		x.domain([ 0,  dLen]);
-		gItems.select(function(d, i){
-			var ts = $(this).find('text')
-				,xv = x(i);
-			if(ts.length == 2){
-				xv = x(i) - 8;
-				d3.select(ts[1])
-					.transition().duration(500)//过渡
-					.attr('x', x(i) + 8);
+	function cleanStation(data){
+		var ms = w / 52
+		,dLen = data.length;
+		if(ms < dLen){
+			var end;
+			//最多清理一半
+			if(ms < dLen / 2)
+				end = parseInt(dLen / 2) + 1;
+			else
+				end = dLen - ms + 1;
+			
+			for(var i = 1; i < end; i ++){
+				var rem = data[i];
+				var prev = data[i - 1];
+				
+				prev.clear = rem.type + 10;//设置哪些点需要虚线连接
+				data.splice(i, 1);//要被清理的站点
+				
 			}
-			d3.select(ts[0])
-				.transition().duration(500)//过渡
-				.attr('x', xv);
-			
-			d3.select(this).selectAll('circle')
-				.transition().duration(500)//过渡
-				.attr('cx', x(i));
-		});
-		//缩线
-		svg.select('path.up_path')
-			.transition().delay(500).duration(500)//过渡
-			.attr('d', function(){
-				return upLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
-			});
-		
-		svg.select('path.down_path')
-			.transition().delay(500).duration(500)//过渡
-			.attr('d', function(){
-				return downLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
-			});
-		
-		svg.select('path.down_path.arc')
-			.transition().delay(500).duration(500)//过渡
-			.attr('d', function(){
-				var cx = x(dLen - 1) + 8
-					,cy = mt + 5
-					,arc = cx + 18;
-				return 'M' + cx + ',' + cy + ' C' + arc + ',' + (cy + 5) + ' ' + arc + ',' + (cy + p - 13) + ' ' + cx + ',' + (cy + p - 8);
-			});
+		}
 	}
  
 	return drawSvgObject;
 !function(){
  
+	var gpsOff = 1000 * 60 * 5;
+	
 	var homeObject = {
 		init:function(){
 			//初始化主页
@@ -41,14 +43,27 @@
  
 			//svg线路图
 			$.each(lineArray, function(i, obj){
-				_data.queryStationRoute( obj.id, 'line_chart_' + obj.id , drawSvg.init);
+				_data.queryStationRoute( obj.lineCode, 'line_chart_' + obj.lineCode , drawSvg.init);
 			});
  
-			//_data.queryStationRoute( lineArray[2].id, 'line_chart_' + lineArray[2].id , drawSvg.init);
-			
 		 	$('.line_chart .top .top-remark').slimscroll({
 		 		height: '47px'
 		 	});
+		 	
+		 	//模拟图GPS刷新事件
+		 	$('#tab_home').on('gps_refresh', function(e, add, up){
+		 		drawSvg.drawVehicle(add);
+		 	});
+		 	
+		 	//定时刷新GPS
+		 	_data.startRefreshGpsTimer();
+		 /*	setTimeout(function(){
+		 		homeObject.refreshGps(function(add, update){
+			 		//将新增的点画到模拟图上
+			 		drawSvg.drawVehicle(add);
+			 	});
+		 	}, 300);*/
+		 	
 		}
 	}
  
@@ -61,10 +76,21 @@ setTimeout(function(){
 	});
 	$('#top-tabs-wrap .nav-tabs').append(topTabs);
  
-	//加载地图页数据
-	//$('#tab_map').load('/pages/mapmonitor/real/real.html');
-	
+	setTimeout(function(){
+		//加载地图页数据
+		$('#tab_map').load('/pages/mapmonitor/real/real.html');
+	}, 500);
  
 	homeObject.init();
+	
 }, 200)
+
+
+	function gpslistToMap(gpslist){
+		var map = {}
+		for(var i = 0, gps; gps = gpslist[i++];){
+			map[gps.deviceId] = gps;
+		}
+		return map;
+	}
 }();
 \ No newline at end of file
@@ -4,11 +4,11 @@
 {{each tabList as tabObj i}}
 <div class="tab-pane {{if i == 0}}active in{{/if}}" id="tab_{{tabObj.id}}">
 {{each tabObj.array as lineObj j}}
-<div class="row card_wrap"  style="{{if j == 0}}margin-top: 0px;{{/if}}">
+<div class="row card_wrap"  >
 	<div class="col-lg-2 ">
  
 		<div class="title">
-			发往{{lineObj.start}}方向 <span class="badge"> 13 </span>
+			发往{{lineObj.startStationName}}方向 <span class="badge"> 13 </span>
 			<div class="help_text dropdown">
 				<span class=" blue dropdown-toggle col_hide_1440"
 					data-toggle="dropdown" aria-expanded="true"
@@ -51,7 +51,7 @@
 		<div class="table_wrap">
 			<table
 				class="table table-striped table-bordered table-advance table-hover vehicDataTable"
-				style="table-layout: fixed;" id="tab_{{lineObj.id}}_0">
+				style="table-layout: fixed;" id="tab_{{lineObj.lineCode}}_0">
 				<colgroup>
 					<col style="width: 20%;">
 					<col style="width: 19%;">
@@ -64,7 +64,7 @@
 			</table>
 		</div>
 	</div>
-	<div class="col-lg-8 line_chart" id="line_chart_{{lineObj.id}}"> 
+	<div class="col-lg-8 line_chart" id="line_chart_{{lineObj.lineCode}}"> 
 		<div class="top">
 			<div class="center">
 				<strong>{{lineObj.name}}</strong>
@@ -75,7 +75,7 @@
 	<div class="col-lg-2  down">
  
 		<div class="title">
-			发往{{lineObj.end}}方向 <span class="badge"> 7 </span>
+			发往{{lineObj.endStationName}}方向 <span class="badge"> 7 </span>
 			<div class="help_text dropdown">
 				<span class=" blue dropdown-toggle col_hide_1440"
 					data-toggle="dropdown" aria-expanded="true"
@@ -114,7 +114,7 @@
 		<div class="table_wrap">
 			<table
 				class="table table-striped table-bordered table-advance table-hover vehicDataTable"
-				style="table-layout: fixed;" id="tab_{{lineObj.id}}_1">
+				style="table-layout: fixed;" id="tab_{{lineObj.lineCode}}_1">
 				<colgroup>
 					<col style="width: 20%;">
 					<col style="width: 19%;">