timeAndSpeed.html 9.09 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; }
</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;">
						<span class="item-label" style="width: 80px;">线路: </span>
						<select class="form-control" name="line" id="line" style="width: 180px;"></select>
					</div>
					<div style="display: inline-block;margin-left: 15px;">
						<span class="item-label" style="width: 80px;">开始时间: </span>
						<input class="form-control" type="text" id="startDate" style="width: 180px;"/>
					</div>
					<div style="display: inline-block;margin-left: 15px;">
						<span class="item-label" style="width: 80px;">结束时间: </span>
						<input class="form-control" type="text" id="endDate" style="width: 180px;"/>
					</div>
					<br/>
					<div style="display: inline-block;">
						<span class="item-label" style="width: 80px;">时刻类型: </span>
						<select class="form-control" name="model" id="model" style="width: 180px;">
							<option value="">请选择...</option>
						</select>
					</div>
					<div style="display: inline-block;">
						<span class="item-label" style="width: 80px;">时间段: </span>
						<select class="form-control" name="times" id="times" style="width: 180px;">
							<option value="05:00-06:00">05:00-06:00</option>
							<option value="06:00-07:00">06:00-07:00</option>
							<option value="07:00-08:00">07:00-08:00</option>
							<option value="08:00-09:00">08:00-09:00</option>
							<option value="09:00-10:00">09:00-10:00</option>
							<option value="10:00-11:00">10:00-11:00</option>
							<option value="11:00-12:00">11:00-12:00</option>
							<option value="12:00-13:00">12:00-13:00</option>
							<option value="13:00-14:00">13:00-14:00</option>
							<option value="14:00-15:00">14:00-15:00</option>
							<option value="15:00-16:00">15:00-16:00</option>
							<option value="16:00-17:00">16:00-17:00</option>
							<option value="17:00-18:00">17:00-18:00</option>
							<option value="18:00-19:00">18:00-19:00</option>
							<option value="19:00-20:00">19:00-20:00</option>
							<option value="20:00-21:00">20:00-21:00</option>
							<option value="21:00-22:00">21:00-22:00</option>
							<option value="22:00-23:00">22:00-23:00</option>
							<option value="23:00-00:00">23:00-00:00</option>
						</select>
					</div>
					<div style="display: inline-block;">
						<span class="item-label" style="width: 80px;">方向: </span>
						<select class="form-control" name="upDown" id="upDown" style="width: 180px;">
							<option value="">请先选择线路</option>
						</select>
					</div>
					<div class="form-group">
						<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>
							<tr class="hidden">
								<th width="130px">日期</th>
								<th width="105px">时段</th>
								<th>公司</th>
								<th>分公司</th>
								<th width="100px">线路</th>
								<th width="50px">路牌</th>
								<th width="110px">起讫站</th>
								<th width="110px">行驶方向</th>
								<th width="103px">营运时间(小时/分钟)</th>
								<th width="130px">营运车速(公里/小时)</th>
								<th width="103px">运送时间(小时/分钟)</th>
								<th width="130px">运送车速(公里/小时)</th>
							</tr>
						</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'
		});
		
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var day = d.getDate();
		if(month > 9){
			$("#startDate").val(year + "-" + month + "-" + day);
			$("#endDate").val(year + "-" + month + "-" + day);
		} else {
			$("#startDate").val(year + "-0" + month + "-" + day);
			$("#endDate").val(year + "-0" + month + "-" + day);
		}
		
		$.get('/basic/lineCode2Name',function(result){
			var data=[];
			
			for(var code in result){
				data.push({id: code, text: result[code]});
			}
			console.log(data);
			initPinYinSelect2('#line',data,'');

			line = data[0].id;
			updateModel();
		})
		
		$("#query").on("click", function (){
			line = $("#line").val();
			upDown = $("#upDown").val();
			if(line=="" || line==null){
				layer.msg("请选择线路");
			}else if(upDown==null || upDown==""){
				layer.msg("请选择方向");
			}else{
				jsDoQuery();
			}
		});
		
		var line = $("#line").val();
		var startDate = $("#startDate").val();
		var endDate = $("#endDate").val();
		var model = $("#model").val();
		var times = $("#times").val();
		var upDown = $("#upDown").val();
		function jsDoQuery(pagination){
			var params = {};
			line = $("#line").val();
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			model = $("#model").val();
			times = $("#times").val();
			upDown = $("#upDown").val();
			params['line'] = line;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			params['model'] = model;
			params['times'] = times;
			params['upDown'] = upDown;
			params['type'] = "query";
			$(".hidden").removeClass("hidden");
			$get('/busInterval/timeAndSpeed', params, function(result){
				// 把数据填充到模版中
				var tbodyHtml = template('list_timeAndSpeed',{list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#forms tbody').html(tbodyHtml);

			});		
		}
		
// 		$("#export").on("click",function(){
// 			$get('/pcpc/workDaily',{line:line,date:date,type:'export'},function(result){
// 				window.open("/downloadFile/download?fileName=营运服务日报表"+moment(date).format("YYYYMMDD"));
// 			});
// 		});
		
		
		$("#line").on("change", function(){
			line = $("#line").val();
			updateModel();
			var params = {};
			params['line'] = line;
			$get('/busInterval/getDir', params, function(result){
				dirData = createTreeData(result);
				var options = '';
				$.each(dirData, function(i, g){
					options += '<option value="'+g.name+'">'+g.name+'</option>';
				});
				$('#upDown').html(options);
			});
		});
		$('#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 = {};
			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;
			});
		}
		
		
	});
	
</script>
<script type="text/html" id="list_timeAndSpeed">
	{{each list.dateList as obj i}}
		<tr>
			<td>{{obj.date}}</td>
			<td>{{obj.times}}</td>
			<td>{{obj.company}}</td>
			<td>{{obj.branchCompany}}</td>
			<td>{{obj.line}}</td>
			<td>{{obj.lp}}</td>
			<td>{{obj.qdz_zdz}}</td>
			<td>{{obj.zdz}}</td>
			<td>{{obj.yysj}}</td>
			<td>{{obj.yysd}}</td>
			<td>{{obj.yssj}}</td>
			<td>{{obj.yssd}}</td>
		</tr>
	{{/each}}
	{{if list.dateList.length != 0}}
		<tr>
			<td colspan="8">汇总平均</td>
			<td>{{list.yysj}}</td>
			<td>{{list.yysd}}</td>
			<td>{{list.yssj}}</td>
			<td>{{list.yssd}}</td>
		</tr>
	{{/if}}
	{{if list.dateList.length == 0}}
		<tr>
			<td colspan="12"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>