潘钊 / bsth_control · Files

<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; }
	  .btn-default{
	   margin-left: 5px;
	  }
</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 class="form-inline" action="">
                    <div style="display: inline-block;margin-left: 24px;">
                        <span class="item-label" style="width: 80px;">&nbsp;日期: </span>
                        <input class="form-control" type="text" id="date" style="width: 180px;"/>
                    </div>
                    <div style="display: inline-block;margin-left: 6px;">
                        <span class="item-label" style="width: 80px;">&nbsp;车号: </span>
                        <input class="form-control" type="text" id="car" style="width: 180px;"/>
                    </div>
                    <div style="display: inline-block;margin-left: 6px;">
                        <span class="item-label" style="width: 80px;">&nbsp;驾驶员: </span>
                        <input class="form-control" type="text" id="driver" style="width: 180px;"/>
                    </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>
								<td>序号</td>
								<td>日期</td>
								<td>路别</td>
								<td>车号</td>
								<td>驾驶员</td>
								<td>出场</td>
								<td>进场</td>
								<td>场内0号</td>
								<td>场内B5#</td>
								<td>油卡0号</td>
								<td>油卡-10#</td>
								<td>东站0#</td>
								<td>东站-10#</td>
								<td>场外0#</td>
								<td>场外-10#</td>
								<td>实绩油耗</td>
								<td>特约</td>
								<td>业务</td>
								<td>车间</td>
								<td>总公里</td>
								<td>其中空驶</td>
								<td>损失公里</td>
								<td>班次</td>
								<td>车日</td>
								<td>备注</td>
							</tr>
						</thead>
						<tbody id="tbody">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();
		
		$("#date").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});
		
	var d = new Date();
	var year = d.getFullYear();
	var mon = (d.getMonth()+1)>9?(d.getMonth()+1):("0"+(d.getMonth()+1));
	var day = d.getDate()>9?d.getDate():("0"+d.getDate());
	$("#date").val(year + "-" + mon + "-" + day);
	
	
	var date = "", car = "", driver = "";
	$("#query").on("click",function(){
		if($("#date").val() == null || $("#date").val().trim().length == 0){
			layer.msg("请选择日期");
			return;
		}
		date = $("#date").val();
		car = $("#car").val();
		driver = $("#driver").val();
		var i = layer.load(2);
		$get('/refuel/queryYc',{date:date,car:car,driver:driver,type:'query'},function(result){
			// 把数据填充到模版中
			var tbodyHtml = template('refuel_daily',{list:result});
			// 把渲染好的模版html文本追加到表格中
			$('#tbody').html(tbodyHtml);
			layer.close(i);
		});
	});
	
	$("#export").on("click",function(){
		if(date && date != ""){
			var i = layer.load(2);
			var params = {};
			params['date'] = date;
			params['car'] = car;
			params['driver'] = driver;
			$get('/refuel/exportQueryYc', params, function(result){
				layer.close(i);
				window.open("/downloadFile/download?fileName="
						+date+"-燃油车日报表");
				layer.close(i);
			});
		}
	});
	
});
</script>
<script type="text/html" id="refuel_daily">
	{{each list as obj i}}
		<tr>
			<td>{{i + 1}}</td>
			<td>{{obj.date}}</td>
			<td>{{obj.line}}</td>
			<td>{{obj.car}}</td>
			<td>{{obj.driver}}</td>
			<td>{{obj.outOil}}</td>
			<td>{{obj.inOil}}</td>
			<td>{{obj.inStation0}}</td>
			<td>{{obj.inStation5}}</td>
			<td>{{obj.oilCard0}}</td>
			<td>{{obj.oilCard10}}</td>
			<td>{{obj.eastStation0}}</td>
			<td>{{obj.eastStation10}}</td>
			<td>{{obj.outStation0}}</td>
			<td>{{obj.outStation10}}</td>
			<td>{{obj.oil}}</td>
			<td>{{obj.ty}}</td>
			<td>{{obj.yw}}</td>
			<td>{{obj.cj}}</td>
			<td>{{obj.realMileage}}</td>
			<td>{{obj.ksMileage}}</td>
			<td>{{obj.ssMileage}}</td>
			<td>{{obj.bc}}</td>
			<td>{{obj.cr}}</td>
			<td>{{obj.remark}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="25"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>