线调

潘钊
1 parent 69b92326
Showing 6 changed files with 260 additions and 315 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
@@ -208,29 +208,29 @@
 .card_wrap .line_chart{
 	height: 100%;
 	padding: 0;
+	border-top: 1px solid #DADADA;
 }
  
 .card_wrap .line_chart .top{
-    height: 64px;
-    background: linear-gradient(to right, #5384B9, #5e96d2, #5384B9);
-    border: 1px solid #DADADA;
+	height: 44px;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    -webkit-transform: translate(-50%, 0);
 }
  
 .card_wrap .line_chart .top .center{
-	background: #FFFFFF;
     height: 100%;
     font-size: 15px;
-    color: #333;
+    color: #B9B9B9;
     padding: 10px 0px;
-    font-family: 微软雅黑;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    width: 190px;
+    width: auto;
     float: left;
+    background: transparent;
 }
  
 .card_wrap .line_chart .top .center strong{
-	color: #336BB7;
-    font-size: 18px;
+    font-size: 30px;
 }
  
 .card_wrap .line_chart .top .left
@@ -358,23 +358,35 @@
  
 /* svg 样式 */
 .line_chart svg{
-    background: #fdfdfd;
-    height: calc(100% - 70px);
-    margin: 18px 0 0 0;
+    height: 100%;
+    margin: 0;
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
-.station_circle{
+/* .station_circle{
 	fill: #FFFFFF;
     r: 7.6;
-}
+} */
  
-.up_station_circle_inside{
-	fill: #5e96d2;
+.up_place{
+	fill: red;
     r: 5;
 }
  
-.down_station_circle_inside{
+.up_station_circle{
+    fill: #5e96d2;
+    r: 6;
+    stroke: #fff;
+    stroke-width: 3;
+}
+
+.down_station_circle{
 	fill: #c92121;
-    r: 5;
+    r: 6;
+    stroke: #fff;
+    stroke-width: 3;
 }
  
 .station_text{
@@ -382,6 +394,14 @@
 	letter-spacing: -2.6px;
 }
  
+.station_text.up{
+	fill: #5e96d2;
+}
+
+.station_text.down{
+	fill: #c92121;
+}
+
 .station_text.end{
 	fill: none;
     stroke: #c92121;
@@ -396,10 +416,17 @@
 	stroke-width: 7.4px;
 	stroke: #5e96d2;
 }
+
 .down_path{
 	stroke-width: 7.4px;
 	stroke: #c92121;
 }
+
+.up_path.arc,
+.down_path.arc{
+	fill: none;	
+}
+
 .up-circle-none{
 	fill: #5e96d2;
     r: 3;
@@ -64,18 +64,18 @@
     </div>
     <div class="portlet-body" id="top-tabs-wrap" >
 		<ul class="nav nav-tabs" >
-			<li class="">
+			<li class="active">
 				<a href="#tab_home" data-toggle="tab" aria-expanded="true" style="padding: 10px 15px;"> 
 					<i class="fa fa-home"></i> 主页 
 				</a>
 			</li>
-			<li class="active"><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
+			<li class=""><a href="#tab_map" data-toggle="tab" style="padding: 10px 15px;"
 				aria-expanded="false"><i class="fa fa-map"></i> 地图 </a></li>
 		</ul>
  
 		<div class="tab-content" style="padding: 5px;overflow-y: auto;">
-			<div class="tab-pane fade" id="tab_home" ></div>
-			<div class="tab-pane fade  active in"  id="tab_map" style="position: relative;"></div>
+			<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>
 	</div>
@@ -127,7 +127,7 @@ var _data = (function(){
 				}else{
 					for(var t = j; t < dIndex - 1; t++){
 						var temp = down[t].station;
-						data.push({name: ['',temp.stationName], type:1, id: [-1, temp.stationCod]});
+						data.push({name: [temp.stationName], type:1, id: [temp.stationCod]});
 					}
 					//delete
 					down.splice(j, dIndex - 1 - j);
@@ -146,11 +146,11 @@ var _data = (function(){
  
 			if(first.type == 0
 					&& sec.type == 1){
-				data.splice(s, 2, {name: [first['name'][0],sec['name'][1]], type:3, id: [first['id'][0],sec['id'][1]]});
+				data.splice(s, 2, {name: [first['name'][0],sec['name'][0]], type:3, id: [first['id'][0],sec['id'][0]]});
 				len --;
 			}
 			else if(first.type == 1 && sec.type == 0){
-				data.splice(s, 2, {name: [first['name'][1],sec['name'][0]], type:3, id: [first['id'][1],sec['id'][0]]});
+				data.splice(s, 2, {name: [first['name'][0],sec['name'][0]], type:3, id: [first['id'][0],sec['id'][0]]});
 				len --;
 			}
 		}
 /**
 * 画线路svg 图
-* 
-* type: 0 上行站点  1 下行站点  2  上下行共有  3  合并不同站点
+* type: 0 上行站点  1 下行站点  2  上下行共有  3 不同名合并
 */
-
 var drawSvg = (function(){
  
-	//顶部距离
-	var mTop = 21;
-	//上下行之间高度
-	var h = 132;
+	var mt = 81//顶部距离
+		,p = 132//上下行之间的间隔
+		,x = d3.scale.linear()
+		,w;
  
-	var xScale;
-	var drawSvgObject = {
-		init: function(data, container){
-			var stations = data;
-			var svg = d3.selectAll('#' + container).append('svg').attr('width',
-					'100%').attr('opacity', 0),
-				w = $('.line_chart:first').width();
-			
-			var dLen = stations.length;
-			
-			//站点太多
-			var ms = w / 42;
-			if(ms < dLen){
-				for(var i = 0; i < dLen - ms; i ++){
-					//要被清理的站点
-					var rem = stations[i + 2];
-					stations.splice(i + 2, 1);
-					
-					//设置哪些点需要虚线连接
-					var prev = stations[i + 1];
-					prev.clear = rem.type + 10;
-				}
-				dLen = stations.length;
-			}
-			var indent = w / 12 - (dLen * 2) - 2;
-			
-			//横向比例尺  -根据svg的宽度平均分布站点
-			xScale = d3.scale.linear().domain([ 0,  dLen])
-					.range([ indent, w]);
-			
-			$.each(stations, function(i, d) {
-				d.cx = xScale(i);
-			});
-			
-			$('#' + container).find('.text-load').remove();
-			svg.transition().duration(1000).attr('opacity', 1);
-			//线
-			drawRoutePath(svg, stations);
-			//点
-			drawStationCircle(svg, stations);
-			//两端弧线
-			brackets(svg);
-			//字
-			drawText(svg, stations);
-			//修正位置
-			adjustTwoName(svg);
-		}
-	};
-	
-	var upLine = d3.svg.line().x(function(d) {
-		return d.cx;
-	}).y(function(d) {
-		return mTop;
-	});
-
-	var downLine = d3.svg.line().x(function(d) {
-		return d.cx;
-	}).y(function(d) {
-		return mTop + h;
-	});
+	var upStation = function(value){
+		return value.type != 1 ;
+	}
  
-	 var line = d3.svg.line().x(function(d) {
-			return d.attr('cx');
-	}).y(function(d) {
-			return d.attr('cy');
-	});
+	var downStation = function(value){
+		return value.type != 0;
+	}
  
-	var circleClass = function(d, type, c){
-		if(d.type == type){
-			if(type == 1){
-				c = 'up-circle-none';
-			}
-			else{
-				c = 'down-circle-none';
-			}
-		}
-		return c;
+	var textY = function(d){
 	}
  
-	var getText = function(t){
-		if (t.length > 7) {
-			return t.substring(0, 7) + '·';
-		}
-		return t;
+	var upLine = d3.svg.line().x(function(d) {
+			return d.cx;
+		}).y(function(){return mt});
+	
+	var downLine = d3.svg.line().x(function(d) {
+			return d.cx;
+		}).y(function(){return mt + p});
+	
+	var cx = function(d, i){
+		return x(i);
 	}
  
-	//画圆点
-	var drawStationCircle = function(svg, stations){
-		
-		//上行
-		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
-				.attr('cy', mTop)
-				.attr('class', function(d){return circleClass(d, 1, 'station_circle')})
-				.attr('cx', function(d, i) {
-					return d.cx;
-				});
-		
-		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
-				.attr('class', function(d, i){
-					var classzz = circleClass(d, 1, 'up_station_circle_inside');
-					if(i == 0)
-						classzz += ' start';
-					else if(i == stations.length - 1)
-						classzz += ' end';
-					
-					return classzz;
+	var drawSvgObject = {
+		init: function(data, container){
+			w = $('.line_chart:first').width();
+			var svg = d3.select('#' + container).append('svg')
+						.attr('width', w).attr('opacity', 0)
+				,dLen = data.length;
+			
+			x.range([ 50 , w - 10]).domain([ 0,  dLen]);
+			
+			//上行线条 path
+			svg.append('path')
+				.attr('d', function(){
+					return upLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
 				})
-				.attr('cy', mTop)
-				.attr('id', function(d){
-					var id = d.id[0];
-					return id;
+				.attr('class', 'up_path');
+			
+			//下行线条 path
+			svg.append('path')
+				.attr('d', function(){
+					return downLine([{cx: x(0)}, {cx: x(dLen - 1)}]);
 				})
-				.attr('cx', function(d, i) {
-					return d.cx;
-				});
-		
-		//下行 
-		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
-				.attr('class', function(d){return circleClass(d, 0, 'station_circle')})
-				.attr('cy', mTop + h)
-				.attr('cx', function(d, i) {
-					return d.cx;
-				});
-		svg.append('g').selectAll('circle').data(stations).enter().append('circle')
+				.attr('class', 'down_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);
+				})
+				.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);
+				})
+				.attr('class', 'down_path arc');
+			
+			var g = svg.append('g').selectAll('g')
+					.data(data)
+					.enter()
+					.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);
+			
+			//站点名称 text
+			g.append('text')
 				.attr('class', function(d, i){
-					var classzz = circleClass(d, 0, 'down_station_circle_inside');
+					var c = 'station_text';
 					if(i == 0)
-						classzz += ' start';
-					else if(i == stations.length - 1)
-						classzz += ' end';
-					
-					return classzz;
+						c += ' start';
+					else if(i == dLen - 1)
+						c += ' end';
+					if(d.type == 3)
+						c += ' up';
+					return c;
 				})
-				.attr('cy', mTop + h)
-				.attr('cx', function(d, i) {
-					return d.cx;
+				.text(function(d){
+					return d.type==3 ? d.name[0] : d.name;
 				})
-				.attr('id', function(d){
-					var id = d.id[1];
-					return id;
-				});
-	}
-	
-	var brackets = function(svg){
-		//左括号
-		svg.append('g').append('path')
-			.attr('d', function(){
-				var up = svg.select('.up_station_circle_inside.start')
-					,down = svg.select('.down_station_circle_inside.start');
-				
-				var upX = parseInt(up.attr('cx')) -5
-					, upY =  parseInt(up.attr('cy')) + 8
-					, downX = parseInt(down.attr('cx')) -5
-					, downY = parseInt(down.attr('cy')) -8
-					,arc = (upX - 18);
-				return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
-			})
-			.attr('class', 'up_path')
-			.attr('fill', 'none'); 
+				.attr('x', function(d, i){return (d.type==3?(x(i) - 8):x(i))})
+				.attr('y', mt + 10);
  
-	 	//右括号
-		svg.append('g').append('path')
-		.attr('d', function(){
-			var up = svg.select('.up_station_circle_inside.end')
-				,down = svg.select('.down_station_circle_inside.end');
-
-			var upX = parseInt(up.attr('cx')) + 5
-				, upY =  parseInt(up.attr('cy')) + 8
-				, downX = parseInt(down.attr('cx')) + 5
-				, downY = parseInt(down.attr('cy')) -8
-				,arc = (upX + 18);
-			return 'M' + upX + ',' + upY + ' C' + arc + ',' + (upY + 5) + ' ' + arc + ',' + (downY - 5) + ' ' + downX + ',' + downY;
-		})
-		.attr('class', 'down_path')
-		.attr('fill', 'none');
-	}
-	
-	//画线条
-	var drawRoutePath = function(svg, stations){
-		//上下行拆分数组
-		var upArray = [], downArray = [];
-		$.each(stations, function(i, st){
-			if(st.type == 0)
-				upArray.push(st);
-			else if(st.type == 1)
-				downArray.push(st);
-			else if(st.type == 2){
-				upArray.push(st);
-				downArray.push(st);
-			}
-		});
-		
-		//上行线条
-		svg.append('g').selectAll('path')
-			.data(upArray.slice(0, upArray.length - 1)).enter().append('path')
-			.attr('d', function(d, i) {
-				return upLine([ d, upArray[i + 1] ]);
-			})
-			.attr('class', 'up_path')
-			.attr('stroke-dasharray', function(d){
-				if(d.clear == 10 || d.clear == 12){
-					$(this).css('stroke-width', '5px');
-					return '2,1';
-				}
-				return 0;
-			}); 
-
-		//下行线条
-		svg.append('g').selectAll('path')
-				.data(downArray.slice(0, downArray.length - 1)).enter().append('path')
-				.attr('d', function(d, i) {
-					return downLine([ d, downArray[i + 1] ]);
+			//下行站点
+			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})
+				.append('text')
+				.attr('class', 'station_text down')
+				.text(function(d){return d.name[1]})
+				.attr('x', function(d, i){return x(i) + 8;})
+				.attr('y', mt + 10);
+			
+			/**
+			 * ---------------  文字居中啊，长度截断啊处理一下 ----------------------
+			 */
+			svg.selectAll('text')
+				.attr('transform', function(d, i){
+					var len = $(this).text().length;
+					return 'translate(0,' + (len < 7?(7 - len) * 8:0) + ')';
 				})
-				.attr('class', 'down_path')
-				.attr('stroke-dasharray', function(d){//虚线
-					if(d.clear == 11 || d.clear == 12){
-						$(this).css('stroke-width', '5px');
-						return '2,1';
+				.text(function(){
+					var t = $(this).text()
+						len = t.length;
+					if(len > 7){
+						$(this).data('fullname', t);
+						return t.substring(0, 7);
 					}
-					return 0;
-				}); 
-	}
+					return t;
+				});
+			
+			$(' .text-load', '#'+container).remove();
+			svg.transition().duration(500).attr('opacity', 1);
+			
+			up(svg, data, g);
+		}
+	};
  
-	//写文字
-	var drawText = function(svg, stations){
-		svg.append('g').selectAll('text').data(stations).enter()
-		.append('text')
-		.attr('y',
-			function(d, i) {
-				var t;
-				if(d.type == 1)
-					t = d.name[1];
-				else
-					t = d.name[0];
-				return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
-			})
-		.attr('class', function(d, i){
-			var classz = 'station_text';
-			if(i == 0)
-				classz += ' start';
-			else if(i == stations.length - 1)
-				classz += ' end';
-			return classz;
-		})
-		.text(function(d){
-			if(d.type == 1)
-				t = d.name[1];
-			else
-				t = d.name[0];
+	//更新
+	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;
  
-			if(d.type == 3)
-				$(this).attr('type', 3).attr('downName', d.name[1]);
-			return getText(t);
-		})
-		.attr('x', function(d, i) {
-			return xScale(i);
-		});
+			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)
+				}
+				
+				$(rsEmes[i]).fadeOut(30, function(){
+					$(this).remove();
+					i ++;
+					f();
+				});
+			})();
+		}
 	}
  
-	var adjustTwoName = function(svg){
-		//上下行不同名
-		var lastG = svg.append('g');
-		$.each($('.station_text[type=3]'), function(i, obj){
-			var x = parseInt($(obj).attr('x'))
-				,diff = 8;
-			
-			lastG.append('text')
-				.attr('y', function(){
-					var t = $(obj).attr('downname');
-					return mTop + 5 + (h - (18 * (t.length > 7 ? 7 : t.length))) / 2;
-				})
-				.attr('class', 'station_text')
-				.attr('x', (x + diff))
-				.attr('fill', 'red')
-				.text(getText($(obj).attr('downname')));
+	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);
+			}
+			d3.select(ts[0])
+				.transition().duration(500)//过渡
+				.attr('x', xv);
  
-			$(obj).attr('fill', '#337AB7')
-				.removeAttr('type').removeAttr('downname')
-				.attr('x', x - diff);
+			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;
@@ -41,9 +41,11 @@
  
 			//svg线路图
 			$.each(lineArray, function(i, obj){
-				_data.queryStationRoute(obj.id, 'line_chart_' + obj.id , drawSvg.init);
+				_data.queryStationRoute( obj.id, 'line_chart_' + obj.id , drawSvg.init);
 			});
  
+			//_data.queryStationRoute( lineArray[2].id, 'line_chart_' + lineArray[2].id , drawSvg.init);
+			
 		 	$('.line_chart .top .top-remark').slimscroll({
 		 		height: '47px'
 		 	});
@@ -60,16 +62,9 @@ setTimeout(function(){
 	$('#top-tabs-wrap .nav-tabs').append(topTabs);
  
 	//加载地图页数据
-	$('#tab_map').load('/pages/mapmonitor/real/real.html');
+	//$('#tab_map').load('/pages/mapmonitor/real/real.html');
  
  
-	var homeLoad = false;
-	$('a[href=#tab_home]').on('click', function(){
-		if(homeLoad)
-			return;
-		
-		homeLoad = true;
-		homeObject.init();
-	});
+	homeObject.init();
 }, 200)
 }();
 \ No newline at end of file
@@ -66,20 +66,8 @@
 	</div>
 	<div class="col-lg-8 line_chart" id="line_chart_{{lineObj.id}}"> 
 		<div class="top">
-			<div class="left">
-				<div class="top-remark">
-					应发未发：4 &nbsp;[05:20, 07:10]<br>
-					待发班次：44 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60, 15:04, 16:60]
-				</div>
-			</div>
 			<div class="center">
-				<strong>{{lineObj.name}}</strong> 计划配车：0<br> 在运营：0&nbsp;场内：0
-			</div>
-			<div class="right">
-				<div class="top-remark">
-					应发未发：0&nbsp;[05:20, 07:10]<br>
-					待发班次：18 &nbsp;[12:50, 13:20, 13:40, 14:05, 14:35, 14:55, 15:04, 16:60]
-				</div>
+				<strong>{{lineObj.name}}</strong>
 			</div>
 		</div>
 <p style="margin-top: 70px;" class="text-load">正在加载...</p>