站点间预测样本页面

潘钊
1 parent a3082e3a
Showing 10 changed files with 199 additions and 87 deletions
src/main/java/com/bsth/controller/forecast/SampleController.java
src/main/java/com/bsth/data/BasicData.java
src/main/java/com/bsth/repository/forecast/SampleRepository.java
src/main/java/com/bsth/service/forecast/SampleService.java
src/main/java/com/bsth/service/forecast/SampleServiceImpl.java
src/main/java/com/bsth/websocket/handler/SendUtils.java
src/main/resources/static/pages/forecast/sample/css/main.css
src/main/resources/static/pages/forecast/sample/js/svg.js
src/main/resources/static/pages/forecast/sample/main.html
src/main/resources/static/pages/forecast/sample/modal.html
 package com.bsth.controller.forecast;
  
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
  
 import com.bsth.controller.BaseController;
 import com.bsth.entity.forecast.Sample;
+import com.bsth.service.forecast.SampleService;
  
 @RestController
 @RequestMapping("sample")
 public class SampleController extends BaseController<Sample, Long>{
  
+	@Autowired
+	SampleService sampleService;
+	
+	@RequestMapping("/create/gps")
+	public int createDataByGps(String lineCode, Integer updown){
+		return sampleService.createDataByGps(lineCode, updown);
+	}
 }
@@ -75,7 +75,7 @@ public class BasicData implements CommandLineRunner{
  
 	@Override
 	public void run(String... arg0) throws Exception {
-		Application.mainServices.scheduleWithFixedDelay(dataLoader, 0, 2, TimeUnit.HOURS);
+		Application.mainServices.scheduleWithFixedDelay(dataLoader, 0, 1, TimeUnit.HOURS);
 	}
  
  
 package com.bsth.repository.forecast;
  
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
 import org.springframework.stereotype.Repository;
+import org.springframework.transaction.annotation.Transactional;
  
 import com.bsth.entity.forecast.Sample;
 import com.bsth.repository.BaseRepository;
@@ -8,4 +11,9 @@ import com.bsth.repository.BaseRepository;
 @Repository
 public interface SampleRepository extends BaseRepository<Sample, Long>{
  
+	
+	@Transactional
+    @Modifying
+    @Query("delete Sample where lineCode=?1 and updown=?2")
+	void deleteByLineAndUpdown(Integer lineCode, int updown);
 }
@@ -5,4 +5,6 @@ import com.bsth.service.BaseService;
  
 public interface SampleService extends BaseService<Sample, Long>{
  
+	int createDataByGps(String lineCode, Integer updown);
+
 }
@@ -3,15 +3,22 @@ package com.bsth.service.forecast;
 import java.util.Iterator;
 import java.util.Map;
  
+import javax.transaction.Transactional;
+
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
  
 import com.bsth.data.BasicData;
 import com.bsth.entity.forecast.Sample;
+import com.bsth.repository.forecast.SampleRepository;
 import com.bsth.service.impl.BaseServiceImpl;
  
 @Service
-public class SampleServiceImpl extends BaseServiceImpl<Sample, Long>{
+public class SampleServiceImpl extends BaseServiceImpl<Sample, Long> implements SampleService{
  
+	@Autowired
+	SampleRepository sampleRepository;
+	
 	@Override
 	public Iterable<Sample> list(Map<String, Object> map) {
 		Iterable<Sample> rs = super.list(map);
@@ -26,4 +33,13 @@ public class SampleServiceImpl extends BaseServiceImpl&lt;Sample, Long&gt;{
 		}
 		return rs;
 	}
+
+	@Transactional
+	@Override
+	public int createDataByGps(String lineCode, Integer updown) {
+		//删除原有数据
+		sampleRepository.deleteByLineAndUpdown(Integer.parseInt(lineCode), updown);
+		
+		return 0;
+	}
 }
@@ -18,6 +18,7 @@ import com.bsth.data.LineConfigData;
 import com.bsth.data.schedule.DayOfSchedule;
 import com.bsth.entity.directive.D80;
 import com.bsth.entity.realcontrol.ScheduleRealInfo;
+import com.fasterxml.jackson.core.JsonProcessingException;
 import com.fasterxml.jackson.databind.ObjectMapper;
  
 @Component
@@ -130,10 +131,18 @@ public class SendUtils{
 	 * @Description: TODO(调度指令状态推送) 
 	 */
 	public void sendDirectiveToPage(ScheduleRealInfo sch) {
-		JSONObject json = new JSONObject();
-		json.put("fn", "directive");
-		json.put("t", sch);
-		socketHandler.sendMessageToLine(sch.getXlBm(), json.toJSONString());
+		
+		Map<String, Object> map = new HashMap<>();
+		map.put("fn", "directive");
+		map.put("t", sch);;
+		
+		ObjectMapper mapper = new ObjectMapper();
+		
+		try {
+			socketHandler.sendMessageToLine(sch.getXlBm(), mapper.writeValueAsString(map));
+		} catch (JsonProcessingException e) {
+			logger.error("", e);
+		}
 	}
  
 	public void send80ToPage(D80 d80) {
-#lineConfigPanel{
+#forecastSamplePanel{
     background: #fff;
     overflow: hidden;
     font-family: 'Segoe UI',Arial,'Microsoft Yahei',sans-serif !important;
     min-width: 1392px;
 }
  
-#lineConfigPanel h1{
+#forecastSamplePanel h1{
 	-webkit-margin-start: 23px;
     color: rgb(92, 97, 102);
     margin-bottom: 1em;
@@ -13,26 +13,26 @@
     font-size: 1.5em;
 }
  
-#lineConfigPanel .line_config_tree ul {
+#forecastSamplePanel .line_config_tree ul {
 	list-style-type: none;
     padding: 0;
     height: 100% !important;
 }
  
-#lineConfigPanel .line_config_tree ul li{
+#forecastSamplePanel .line_config_tree ul li{
 	 -webkit-border-start: 6px solid transparent;
     -webkit-padding-start: 18px;
     -webkit-user-select: none;
     cursor: pointer;
 }
  
-#lineConfigPanel .line_config_tree ul li.selected{
+#forecastSamplePanel .line_config_tree ul li.selected{
 	-webkit-border-start-color: #1bbc9b;
     cursor: default;
     pointer-events: none;
 }
  
-#lineConfigPanel .line_config_tree ul li button{
+#forecastSamplePanel .line_config_tree ul li button{
 	background-color: white;
     border: 0;
     color: #999;
@@ -43,25 +43,26 @@
     padding: 0;
 }
  
-#lineConfigPanel .line_config_tree ul li.selected button{
+#forecastSamplePanel .line_config_tree ul li.selected button{
 	color: #1bbc9b;
 }
  
-#lineConfigPanel #trafficChart{
+#forecastSamplePanel #trafficChart{
 	display: inline-block;
     width: calc(100% - 152px);
     vertical-align: top;
     height: 100%;
+    overflow: auto;
+    padding-bottom: 12px;
 }
  
-#lineConfigPanel #trafficChart .sample_tags{
+#forecastSamplePanel #trafficChart .sample_tags{
     width: 100%;
-    height: 65px;
     text-align: right;
-    padding: 20px 40px 0;
+    padding: 20px 40px 10px;
 }
  
-#lineConfigPanel #trafficChart .sample_tags a.tag{
+#forecastSamplePanel #trafficChart .sample_tags a.tag{
     display: inline-block;
     line-height: 1;
     vertical-align: baseline;
@@ -79,37 +80,44 @@
        font-weight: 400;
 }
  
-#lineConfigPanel #trafficChart svg{
-	width: 100%;
-    height: calc(100% - 65px);
+#forecastSamplePanel #trafficChart svg{
+    width: calc(100% - 11px);
+}
+
+#svgWrap{
+	width: calc(100% - 10px);
+    border: 1px solid #dadada;
+    border-radius: 3px !important;
+    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
+    transition: all .3s ease;
 }
  
-#lineConfigPanel #trafficChart svg circle{
+#forecastSamplePanel #trafficChart svg circle{
     fill: #b9b7b7;
     r: 6;
     stroke: rgb(253, 253, 253);
     stroke-width: 3;
 }
  
-#lineConfigPanel #trafficChart svg path{
+#forecastSamplePanel #trafficChart svg path{
 	stroke-width: 6.4px;
     opacity: 0.9;
     stroke: #b2afaf;
     cursor: pointer;
 }
  
-#lineConfigPanel #trafficChart svg path.active{
+#forecastSamplePanel #trafficChart svg path.active{
 	stroke: #1bbc9b;
 }
  
-#lineConfigPanel #trafficChart svg text{
+#forecastSamplePanel #trafficChart svg text{
     font-size: 85%;
     fill: #6b6666;
     font-weight: bold;
     pointer-events: none;
 }
  
-#lineConfigPanel #trafficChart .sample_tags a.tag.active{
+#forecastSamplePanel #trafficChart .sample_tags a.tag.active{
 	background-color: #1bbc9b;
     color: white;
 }
@@ -120,7 +128,7 @@
 	height: 100%;
 }
  
-#lineConfigPanel .slimScrollBar{
+#forecastSamplePanel .slimScrollBar{
 	border-radius: 7px !important;
 	background: rgb(176, 173, 173) !important;
     width: 4px !important;
@@ -179,8 +187,10 @@
 }
  
 .left_station_route .tabbable-line .tab-content{
-	height: 100% !important;
-	padding: 20px 0 0;
+    height: calc(100% - 63px);
+    padding: 20px 0 0;
+    overflow: auto;
+    border-top: 0;
 }
  
 rect.station_rect{
@@ -196,10 +206,43 @@ rect.f_rect{
     cursor: pointer;
 }
  
-#lineConfigPanel #trafficChart svg text.f_text{
+#forecastSamplePanel #trafficChart svg text.f_text{
 	fill: #ffffff;
 }
  
 .select2-container--open{
 	z-index: 100000000;
+}
+
+.inline-link{
+	font-size: 12px;
+    color: red;
+    text-decoration: underline;
+    display: inline-block;
+    vertical-align: bottom;
+    margin: 0 8px 7px 0;
+}
+
+
+#forecastSamplePanel .tab-content::-webkit-scrollbar,
+#forecastSamplePanel #trafficChart::-webkit-scrollbar {  
+    width: 15px;
+    height: 16px;  
+}  
+#forecastSamplePanel .tab-content::-webkit-scrollbar-track,  
+#forecastSamplePanel .tab-content::-webkit-scrollbar-thumb,
+#forecastSamplePanel #trafficChart::-webkit-scrollbar-track,  
+#forecastSamplePanel #trafficChart::-webkit-scrollbar-thumb {  
+  border-radius: 999px;  
+  border: 5px solid transparent;  
+}  
+#forecastSamplePanel .tab-content::-webkit-scrollbar-thumb,
+#forecastSamplePanel #trafficChart::-webkit-scrollbar-thumb {  
+  min-height: 20px;  
+  background-clip: content-box;  
+  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  
+}  
+#forecastSamplePanel .tab-content::-webkit-scrollbar-corner,
+#forecastSamplePanel #trafficChart::-webkit-scrollbar-corner {  
+  background: transparent;  
 }
 \ No newline at end of file
@@ -53,10 +53,10 @@ var sampleSvg = (function(){
 	}
  
 	function draw(opt){
-		$('#trafficChart svg').remove();
-		svg = d3.select('#trafficChart').append('svg');
+		$('#svgWrap svg').remove();
+		svg = d3.select('#svgWrap').append('svg');
 		//容器宽度
-		var width = $('#trafficChart svg').width();
+		var width = $('#svgWrap svg').width();
 		margin = (width - (rowNum - 1) * itemWidth) / 2;
 		var rts = opt.rts
 		_count = rts.length;
@@ -69,6 +69,10 @@ var sampleSvg = (function(){
 			stationMapp[obj.stationCode] = obj.stationName;
 		});
  
+		var h = rts[rts.length - 1].cy + 50;
+		svg.style('height', h).style('opacity', 0);
+		$('#svgWrap').css('height', h + 6);
+		
 		//画线
 		svg.selectAll('path').data(rts)
 			.enter().append('path')
@@ -91,13 +95,16 @@ var sampleSvg = (function(){
 		drawText(rts);
 		//显示tags
 		showTags();
+		
+		//d3 anim
+		svg.transition().delay(100).style('opacity', 1);
 	}
  
 	//tag 点击事件
 	$('#trafficChart').on('click', '.sample_tags a.tag', function(){
 		$('.sample_tags a.tag.active').removeClass('active');
 		$(this).addClass('active');
-		var tag = $(this).text();
+		var tag = $(this).attr('title');
 		clearRunTimeE();
 		//show
 		showRunTimeE(_data[tag])
@@ -115,7 +122,6 @@ var sampleSvg = (function(){
 				.attr('data-sid', this.id);
 		});
  
-		console.log('showRunTimeE...', rs);
 		//背景
 		svg.selectAll('.f_rect')
 			.data(rs).enter().append('rect')
@@ -153,11 +159,14 @@ var sampleSvg = (function(){
 			$.each(rs, function(i, d){
 				if(!_data[d.tag]){
 					_data[d.tag] = [];
-					tags += '<a class="tag">'+d.tag+'</a>';
+					tags += '<a class="tag" title="'+d.tag+'">'+(d.tag + ' ' + d.sDate + ' - ' + d.eDate)+'</a>';
 				}
 				_data[d.tag].push(d);
 			});
-			$('#trafficChart .sample_tags').html(tags);
+			
+			var wrap = $('#trafficChart .sample_tags');
+			wrap.find('a.tag').remove();
+			wrap.append(tags);
 			//选中第一个tag
 			$('#trafficChart .sample_tags a.tag:eq(0)').click();
 		});
@@ -173,42 +182,16 @@ var sampleSvg = (function(){
 	}
  
 	function popAddModal(id){
-		//var eid = id ,sid =  prve(id);
-		//if(!sid)return;
-		
-		//var opts = {sid: sid, eid: eid, sName: stationMapp[sid], eName: stationMapp[eid]};
 		$.get('/pages/forecast/sample/modal.html', function(rs){
 			var index = layer.open({
 				  type: 1,
 				  area: '550px',
 				  content: rs,
 				  shift: 5,
-				 // title: '...',
+				  title: '人工编辑',
 				  success: function(layero, index){
 					  var activeTag = $('.sample_tags a.tag.active');
-					 $('#forecast_sample_modal').trigger('init', {layero: layero, _opt: _opt, _data: _data, id: id, tag: activeTag.length > 0?activeTag.text():''});
-					/*$("#addSampleForm select[name=tag]").select2({
-						  maximumSelectionLength: 1,
-						  tags: true
-					})
-					.on('change', function(){
-						var t = $(this).val();
-						if(tagRange[t]){
-							$("#addSampleForm input[name=sDate]").val(tagRange[t].s);
-							$("#addSampleForm input[name=eDate]").val(tagRange[t].e);
-						}
-					});
-					
-					//提交
-					$('#addSampleForm .confirm').on('click', function(){
-						if(customFormValidate('#addSampleForm')){
-							console.log(_opt);
-							var param = $('#addSampleForm').serializeJSON();
-							param.lineCode = _opt.lineCode;
-							param.updown = _opt.updown;
-							$post('/sample', param, function(){layer.close(index);});
-						}
-					});*/
+					 $('#forecast_sample_modal').trigger('init', {drawObject: drawObject, layero: layero, _opt: _opt, _data: _data, id: id, tag: activeTag.length > 0?activeTag.attr('title'):''});
 				  }
 			});
 		});
 <link href="/pages/forecast/sample/css/main.css" rel="stylesheet" type="text/css" />
-<div id="lineConfigPanel">
+<div id="forecastSamplePanel">
 	<div class="line_config_tree" >
 		<h1 >线路</h1>
 		<ul></ul>
@@ -29,7 +29,12 @@
 			</div>
  
 			<div id="trafficChart" >
-				<div class="sample_tags"></div>
+				<div class="sample_tags">
+					<a href="javascript:;" class="inline-link" id="gpsCreateDataLink"><i class="fa fa-sign-in"> </i> GPS生成数据</a>
+				</div>
+				<div id="svgWrap" >
+					
+				</div>
 			</div>
 		</div>
 	</div>
@@ -57,23 +62,23 @@
 	//站点路由信息
 	var routes = {};
  
-	var $panel = $('#lineConfigPanel')
+	var $panel = $('#forecastSamplePanel')
 		,$body = $('.line_config_content .body');
 	var h = $('.page-container>.page-sidebar-wrapper>.page-sidebar').height();
 	$panel.css('height', h - 18);
  
-	//线路滚动条
+ 	//线路滚动条
 	$('.line_config_tree ul').slimscroll({
 		height : 'calc(100% - 68px)',
 		alwaysVisible : true,
 		opacity : .8
 	});
  
-	//路由
+/*  	//路由
 	$('.left_station_route .tab-content').slimscroll({
 		height : 'calc(100% - 46px)',
 		opacity : .8
-	});
+	}); */
  
 	//上下行切换事件 
 	$('.left_station_route .tabbable-line ul li').on('click', function(){setTimeout(drawSvg, 300);});
@@ -149,8 +154,21 @@
 		sampleSvg.draw({lineCode: getLineCode(), rts: rts, updown: getUpdown()});
 	}
  
-	$('#lineConfigPanel').on('click', '.sample_route_item', function(){
+	$('#forecastSamplePanel').on('click', '.sample_route_item', function(){
 		sampleSvg.popAddModal($(this).data('id'));
 	})
+	
+	
+	$('#gpsCreateDataLink').on('click', function(){
+		var lineName = $('.line_config_tree ul li.selected button').text();
+		var updownText = $('.left_station_route ul li.active a').text();
+		
+		layer.confirm('使用GPS轨迹生成【'+lineName+' -'+updownText+'】站点间耗时数据？ 该操作将会清除原有数据。', {
+		  btn: ['我确定','算了吧'],
+		  icon: 3
+		}, function(){
+			
+		});
+	});
 }();
 </script>
 \ No newline at end of file
@@ -19,10 +19,12 @@
 <div class="tab-content">
 {{each data as obj i}}
 	<div class="tab-pane" id="tab_sample_{{i}}">
-		<form class="form-horizontal" role="form" style="padding: 35px 25px;" id="addSampleForm">
+		<form class="form-horizontal" role="form" style="padding: 35px 25px;" id="editSampleForm_{{i}}">
 			<input type="hidden" name="id" value="{{obj.d.id}}"/>
-			<input type="hidden" name="sStation" value="{{obj.d.sid}}"/>
-			<input type="hidden" name="eStation" value="{{obj.d.eid}}"/>
+			<input type="hidden" name="sStation" value="{{obj.d.sStation}}"/>
+			<input type="hidden" name="eStation" value="{{obj.d.eStation}}"/>
+			<input type="hidden" name="tag" value="{{obj.d.tag}}"/>
+
 		    <div class="form-body">
 		        <div class="form-group">
 		            <label class="col-md-3 control-label">开始站：</label>
@@ -57,8 +59,8 @@
 		    <div class="form-actions">
 		        <div class="row">
 		            <div class="col-md-offset-4 col-md-8">
-		                <button type="button" class="btn green confirm"><i class="fa fa-check"></i> 保存</button>&nbsp;&nbsp;
-		                <button type="button" class="btn red layui-layer-close">删除</button>
+		                <button type="button" class="btn green confirm" data-form="#editSampleForm_{{i}}"><i class="fa fa-check"></i> 保存</button>&nbsp;&nbsp;
+		                <button type="button" class="btn red remove" data-id="{{obj.d.id}}">删除</button>
 		            </div>
 		        </div>
 		    </div>
@@ -113,8 +115,8 @@
 		<br>
 		    <div class="form-actions">
 		        <div class="row">
-		            <div class="col-md-offset-4 col-md-8">
-		                <button type="button" class="btn green confirm"><i class="fa fa-check"></i> 提交</button>&nbsp;&nbsp;
+		            <div class="col-md-offset-5 col-md-7">
+		                <button type="button" class="btn green confirm" data-form="#addSampleForm"><i class="fa fa-check"></i> 提交</button>&nbsp;&nbsp;
 		            </div>
 		        </div>
 		    </div>
@@ -126,18 +128,26 @@
  
 <script>
 !function(){
-	var _data,_opt,id, currentData, layero;
+	var _data,_opt,id, currentData, layero, drawObject;
 	var tagRange = {'早高峰': {s: '06:31', e: '08:30'}, '平峰': {s: '08:31', e: '16:00'}, '晚高峰': {s: '16:01', e: '18:00'}};
  
 	$('#forecast_sample_modal').on('init', function(e, rs){
 		_data = rs._data;
 		_opt = rs._opt;
+		drawObject = rs.drawObject;
 		layero = rs.layero;
 		id = rs.id;
  
-		var eid = id, sid = prve(id).stationCode;
+		var _prve = prve(id);
+		if(!_prve){
+			layer.closeAll();
+			layer.msg('没有上一站，无法录入数据！');
+			return;
+		}
+		var eid = id, sid = _prve.stationCode;
 		var sampData = searchData(sid, eid);
 		var baseData = {sid: sid, eid: eid, sName: toName(sid), eName: toName(eid)};
+		console.log('baseData', baseData);
 		var html = template('forecast_sample_tab_detail_temp', {data: sampData, base: baseData});
 		$('#forecast_sample_modal .row').html(html);
 		//默认选中tab
@@ -158,15 +168,30 @@
  
 		toCenter(layero);
  
-		$('#addSampleForm .confirm').on('click', function(){
-			if(customFormValidate('#addSampleForm')){
-				console.log(_opt);
-				var param = $('#addSampleForm').serializeJSON();
+		//确定
+		$('#forecast_sample_modal .confirm').on('click', function(){
+			var f = $(this).data('form');
+			if(customFormValidate(f)){
+				var param = $(f).serializeJSON();
 				param.lineCode = _opt.lineCode;
 				param.updown = _opt.updown;
-				$post('/sample', param, function(){layer.close(index);});
+				
+				layer.msg('操作中...', {icon: 16});
+				$post('/sample', param, function(){
+					layer.closeAll();
+					layer.msg('保存成功！');
+					drawObject.draw(_opt);
+				});
 			}
 		});
+		
+		//删除
+		$('#forecast_sample_modal .remove').on('click', function(){
+			removeConfirm('确定删除这条数据？', '/sample/' + $(this).data('id'), function(){
+				layer.closeAll();
+				drawObject.draw(_opt);
+			});
+		});
 	});
  
  
@@ -180,7 +205,6 @@
  
 			}
 		}
-		
 		return null;
 	}