busInterval.html 12.3 KB
<style type="text/css">
	.table-bordered {
	  border: 1px solid; }
	  .table-bordered > thead > tr > th,
	  .table-bordered > thead > tr > td,
	  .table-bordered > tbody > tr > th,
	  .table-bordered > tbody > tr > td,
	  .table-bordered > tfoot > tr > th,
	  .table-bordered > tfoot > tr > td {
	    border: 1px solid; }
	  .table-bordered > thead > tr > th,
	  .table-bordered > thead > tr > td {
	    border-bottom-width: 2px; }
	 .table > tbody + tbody {
	   border-top: 1px solid; }
	#forms > tbody > tr{
		background-color: #FFFFFF;
	}
</style>

<div class="page-head">
	<div class="page-title">
		<h1>班次间隔统计表</h1>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="portlet light porttlet-fit bordered">
			<div class="portlet-title">
				<form id="history" class="form-inline" action="">
					<div style="display: inline-block; margin-left: 33px;" id="company1">
						<span class="item-label" style="width: 80px;">公司: </span>
						<select class="form-control" name="company" id="company" style="width: 140px;"></select>
					</div>
					<div style="display: inline-block; margin-left: 24px;" id="subCompany1">
						<span class="item-label" style="width: 80px;">分公司: </span>
						<select class="form-control" name="subCompany" id="subCompany" style="width: 140px;"></select>
					</div>
					<div style="display: inline-block; margin-left: 10px;">
						<span class="item-label" style="width: 80px;">线路: </span>
						<select class="form-control" name="statu" id="statu" style="width: 140px;">
							<option value="0">多线</option>
							<option value="1">单线</option>
						</select>
					</div>
					<div style="display: inline-block; margin-left: 0px;" id="line1">
						<span class="item-label" style="width: 80px;"> - </span>
						<select class="form-control" name="line" id="line" style="width: 140px;"/>
					</div>
					<div style="display: inline-block; margin-left: 10px">
						<span class="item-label" style="width: 80px;">时刻类型: </span>
						<select class="form-control" name="model" id="model" style="width: 165px;">
							<option value="">请选择...</option>
						</select>
					</div>
					<div style="margin-top: 10px"></div>
					<div style="display: inline-block;margin-left: 5px;">
						<span class="item-label" style="width: 80px;">开始时间: </span>
						<input class="form-control" type="text" id="startDate" style="width: 140px;"/>
					</div>
					<div style="display: inline-block;margin-left: 10px;">
						<span class="item-label" style="width: 80px;">结束时间: </span>
						<input class="form-control" type="text" id="endDate" style="width: 140px;"/>
					</div>
<!-- 					<div style="display: inline-block;margin-left: 10px;"> -->
<!-- 						<span class="item-label" style="width: 80px;">时间段: </span> -->
<!-- 						<input class="form-control" type="text" id="times1" style="width: 80px;"/> -->
<!-- 					</div> -->
<!-- 					<div style="display: inline-block;"> -->
<!-- 						<span class="item-label" style="width: 80px;"> - </span> -->
<!-- 						<input class="form-control" type="text" id="times2" style="width: 80px;"/> -->
<!-- 					</div> -->
					<div class="form-group" style="margin-left: 14px">
						<input class="btn btn-default" type="button" id="query" value="筛选"/>
<!-- 						<input class="btn btn-default" type="button" id="export" value="导出"/> -->
					</div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px">
					<table class="table table-bordered table-hover table-checkable" id="forms">
						<thead>
						
						</thead>
						<tbody>
							
						</tbody>
					</table>
					<div style="text-align: right;">
						<ul id="pagination" class="pagination"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();
		
		$("#startDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});
		$("#endDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});

// 		$("#times1").datetimepicker({
// 			format : 'HH:mm',
// 			locale : 'zh-cn'
// 		});
// 		$("#times2").datetimepicker({
// 			format : 'HH:mm',
// 			locale : 'zh-cn'
// 		});
		
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var day = d.getDate();
		if(month < 10)
			month = "0" + month;
		if(day < 10)
			day = "0" + day;
		$("#startDate").val(year + "-" + month + "-" + day);
		$("#endDate").val(year + "-" + month + "-" + day);
		
// 		$("#times1").val("06:00");
// 		$("#times2").val("07:00");
		
		var obj = [];
		$.get('/user/companyData', function(result){
			obj = result;
			var options = '';
			for(var i = 0; i < obj.length; i++){
				options += '<option value="'+obj[i].companyCode+'">'+obj[i].companyName+'</option>';
			}
			if(obj.length == 1){
				$('#company1').hide();
				if(obj[0].children.length == 1)
					$('#subCompany1').hide();
			}
			$('#company').html(options);
			updateCompany();
		});
		$("#company").on("change",updateCompany);
		function updateCompany(){
			var company = $('#company').val();
			var options = '';
			for(var i = 0; i < obj.length; i++){
				if(obj[i].companyCode == company){
					var children = obj[i].children;
					for(var j = 0; j < children.length; j++){
						options += '<option value="'+children[j].code+'">'+children[j].name+'</option>';
					}
				}
			}
			$('#subCompany').html(options);
		}
		
		$.get('/basic/lineCode2Name',function(result){
			var data=[];
// 			data.push({id:" ", text:"全部线路"});
			for(var code in result){
				data.push({id: code, text: result[code]});
			}
			console.log(data);
			initPinYinSelect2('#line',data,'');
			
// 			line = "";
			line = data[0].id;
			updateModel();
		})
		
// 		$('#line').select2({
// 			ajax: {
// 				url: '/realSchedule/findLine',
// 				type: 'post',
// 				dataType: 'json',
// 				delay: 150,
// 				data: function(params){
// 					return{line: params.term};
// 				},
// 			    processResults: function (data) {
// 			      return {
// 			        results: data
// 			      };
// 			    },
// 				cache: true
// 			},
// 			templateResult: function(repo){
// 				if (repo.loading) return repo.text;
// 				var h = '<span>'+repo.text+'</span>';
// 				return h;
// 			},
// 			escapeMarkup: function (markup) { return markup; },
// 			minimumInputLength: 1,
// 			templateSelection: function(repo){
// 				return repo.text;
// 			},
// 			language: {
// 		       noResults: function(){
// 		           return '<span style="color:red;font-size: 12px;">没有搜索到线路!</span>';
// 		       },
// 		       inputTooShort : function(e) {
// 					return '<span style="color:gray;font-size: 12px;"><i class="fa fa-search"></i> 输入线路搜索线路</span>';
// 			   },
// 		       searching : function() {
// 					return '<span style="color:gray;font-size: 12px;"> 正在搜索线路...</span>';
// 			   }
// 			}
// 		});
		
		$("#query").on("click",jsDoQuery);
		
		var line = $("#line").val();
		var statu = $("#statu").val();
		var startDate = $("#startDate").val();
		var endDate = $("#endDate").val();
		var model = $("#model").val();
// 		var times = $("#times1").val() + "-" + $("#times2").val();
		var company = $("#company").val();
		var subCompany = $("#subCompany").val();
		function jsDoQuery(pagination){
			var params = {};
// 			line = $("#line").val();
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			model = $("#model").val();
// 			times = $("#times1").val() + "-" + $("#times2").val();
			company = $("#company").val();
			subCompany = $("#subCompany").val();
			params['line'] = line;
			params['statu'] = statu;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			params['model'] = model;
// 			params['times'] = times;
			params['company'] = company;
			params['subCompany'] = subCompany;
			params['type'] = "query";
// 			$(".hidden").removeClass("hidden");
			$get('/busInterval/interval', params, function(result){
				// 把数据填充到模版中
				var tbodyHtml = template('list_workDaily',{list:result,statu:statu});
				// 把渲染好的模版html文本追加到表格中
				$('#forms').html(tbodyHtml);
				_w_table_rowspan("#forms tbody", 1);
				_w_table_rowspan("#forms tbody", 2);
				_w_table_rowspan("#forms tbody", 3);
				_w_table_rowspan("#forms tbody", 4);
				_w_table_rowspan("#forms tbody", 5);

			});		
		}
		
// 		$("#export").on("click",function(){
// 			$get('/pcpc/workDaily',{line:line,date:date,type:'export'},function(result){
// 				window.open("/downloadFile/download?fileName=营运服务日报表"+moment(date).format("YYYYMMDD"));
// 			});
// 		});


		$("#lp1").hide();
		$("#line1").hide();
		$("#statu").on("change", function(){
			statu = $("#statu").val();
			if(statu == 0){
				$("#line1").hide();
				$("#lp1").hide();
			}else{
				$("#line1").show();
				$("#lp1").show();
			}
			updateModel();
		});
		$("#line").on("change", function(){
			line = $("#line").val();
// 			if(line == " ")
// 				line = "";
			updateModel();
		});
		$('#startDate').on("blur", function(){
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			updateModel();
		});
		$('#endDate').on("blur", function(){
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			updateModel();
		});
		
		var flag = 0;
		function updateModel(){
			if(flag == 1)
				return;
			flag = 1;
			var treeData = [];
			var params = {};
			if(statu == 0)
				params['line'] = "";
			if(statu == 1)
				params['line'] = line;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			$get('/pcpc/getModel', params, function(result){
				treeData = createTreeData(result);
				var options = '<option value="">请选择...</option>';
				$.each(treeData, function(i, g){
					options += '<option value="'+g.id+'">'+g.name+'</option>';
				});
				$('#model').html(options)/* .select2() */;
				flag = 0;
			});
		}
		
		
		function _w_table_rowspan(_w_table_id, _w_table_colnum){
		    _w_table_firsttd = "";
		    _w_table_currenttd = "";
		    _w_table_SpanNum = 0;
		    _w_table_Obj = jQuery(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
		    _w_table_Obj.each(function(i){
		        if(i==0){
		            _w_table_firsttd = jQuery(this);
		            _w_table_SpanNum = 1;
		        }else{
		            _w_table_currenttd = jQuery(this);
		            if(_w_table_firsttd.text()==_w_table_currenttd.text()){
		                _w_table_SpanNum++;
		                _w_table_currenttd.hide(); //remove();
		                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
		            }else{
		                _w_table_firsttd = jQuery(this);
		                _w_table_SpanNum = 1;
		            }
		        }
		    });
		}
		
		
	});
	
</script>
<script type="text/html" id="list_workDaily">
<thead>
	<tr>
		<th>日期</th>
		<th>公司</th>
		<th>分公司</th>
		<th>线路</th>
		{{if statu == 1}}
			<th>时段</th>
		{{/if}}
		<th>起讫站</th>
		<th>计划车距(分钟)</th>
		<th>实际车距(分钟)</th>
		<th>最大车距(分钟)</th>
		<th>最小车距(分钟)</th>
		<th>误差值</th>
	</tr>
</thead>
<tbody>
	{{each list as obj i}}
		<tr>
			<td style='text-align:center;vertical-align:middle;' width='80px'>{{obj.date}}</td>
			<td style='text-align:center;vertical-align:middle;'>{{obj.company}}</td>
			<td style='text-align:center;vertical-align:middle;'>{{obj.subCompany}}</td>
			<td style='text-align:center;vertical-align:middle;'>{{obj.line}}</td>
			{{if statu == 1}}
				<td style='text-align:center;vertical-align:middle;'>{{obj.times}}</td>
			{{/if}}
			<td>{{obj.qdz}}</td>
			<td>{{obj.jhInterval}}</td>
			<td>{{obj.sjInterval}}</td>
			<td>{{obj.MaxInterval}}</td>
			<td>{{obj.MinInterval}}</td>
			<td>{{obj.deviation}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="11"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</tbody>
</script>