waybillQp.html 11.9 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; }
	.table {
		width: 90%;
	}
</style>

<div class="page-head">
	<div class="page-title">
	<i class="fa fa-question-circle-o" aria-hidden="true"></i>
		<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;">
						<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="date" style="width: 180px;"/>
					</div>
					<div class="form-group" style="display: inline-block;margin-left: 15px;">
						<input class="btn btn-default" type="button" id="query" value="查询"/>
						<input class="btn btn-default" type="button" id="export" value="导出"/>
						<input class="btn btn-default" type="button" id="print" value="打印"/>
<!-- 						<input class="btn btn-default" type="button" id="exportMore" value="批量导出"/> -->
					</div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="row">
					<div class="col-md-2">
						<div class="" style="margin-top: 10px;overflow:auto;/*height: 860px*/">
							<table class="table table-bordered table-hover table-checkable pre-scrollable" id="info">
								<thead>
									<tr class="hidden">
										<th>自编号</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="col-md-9"  id="printArea">
						<div class="table-container" style="margin-top: 10px;overflow:auto;min-width: 906px">
							<table class="table table-bordered table-checkable" id="forms">
								<tbody class="ludan_1">
									
								</tbody>
						        <tbody class="ludan_2">
						        	
						        </tbody>
						        <tbody class="ludan_3">
						        	
						        </tbody>
						        <tbody class="ludan_4">
						        	
						        </tbody>
							</table>
						</div>
					</div>
				</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'
		});
		
		$.get('/basic/lineCode2Name',function(result){
			var data=[];
			
			for(var code in result){
				data.push({id: code, text: result[code]});
			}
			initPinYinSelect2('#line',data,'');
			
		})
		
		/* $('#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>';
			   }
			}
		});
		 */
		
		var date = '';
		 var line ='';
		$("#query").on("click",function(){
			line= $("#line").val();
			date = $("#date").val();
			$(".hidden").removeClass("hidden");
			$get('/realSchedule/queryUserInfo',{line:line,date:date,state:3},function(result){
				// 把数据填充到模版中
				var tbodyHtml = template('list_info',{list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#info tbody').html(tbodyHtml);
			});
		});
		
		var params = new Array();
		var jName = '';
		$("#info tbody").on("click","tr",function(){
			if($(this).children().size() < 1){
				return;
			} else if($(this).children().children().html() == "没有找到相关数据"){
				return;
			}
			$(this).children().each(function(index){
				params[index] = $(this).text();
			});
			
			var id = $("#"+params[0]).val();
			
			$get('/realSchedule/MapByIdQp',{id:id},function(result){
// 			    result.scheduleDate = moment(result.scheduleDate).format("YYYY/MM/DD");
				var ludan_1 = template('ludan_1',{map:result});
				//var ludan_4 = template('ludan_4',result);
				// 把渲染好的模版html文本追加到表格中
				$('#forms .ludan_1').html(ludan_1);
				//$('#forms .ludan_4').html(ludan_4);
			});
			$get('/realSchedule/queryListWaybillQp',{clZbh:params[0],date:date,line:line},function(result){
			    getTime(result);
				var ludan_2 = template('ludan_2',{list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#forms .ludan_2').html(ludan_2);
			});
			$get('/realSchedule/findKMBCQp',{clZbh:params[0],date:date,line:line},function(result){
				console.log(result);
			    var ludan_3 = template('ludan_3',{map:result});
			    $('#forms .ludan_3').html(ludan_3);
			});
			
		});
		
		$("#export").on("click",function(){
			if(params.length < 1){
				return;
			}
			$get('/realSchedule/exportWaybillQp',{clZbh:params[0],date:date,line:line},function(result){
				var fileName=date+"-"+params[0]+"-行车路单"
				window.open("/downloadFile/download?fileName="+fileName);
// 				window.open("/downloadFile/download?fileName="+encodeURIComponent(encodeURIComponent(fileName)));
			});
		});
		
		$("#print").click(function(){
			$("#printArea").printArea();
		});
		
		$("#exportMore").on("click",function(){
			if($("#info tbody").children().size() < 1){
				return;
			} else if($("#info tbody tr td").children().html() == "没有找到相关数据"){
				return;
			}
			var param = new Array();
			$("#info tbody tr").each(function(index){
				param[index] = $(this).txet();
			});
// 			$post('/realSchedule/exportWaybillQpMore',{date:date},function(result){
// 				window.open("/downloadFile/downloadList?fileName="+result.fileName);
// 			});
		});
		
		function getTime(list){
            $.each(list, function(i, obj) {
                if(obj.zdsj != null && obj.zdsjActual != null ){
                    var zdsjActual = (obj.zdsjActual).split(":");
                    var zdsj = (obj.zdsj).split(":");
                    if(zdsjActual[0]*60+Number(zdsjActual[1]) > zdsj[0]*60+Number(zdsj[1])){
                        obj["slow"] = (zdsjActual[0]*60+Number(zdsjActual[1])) - (zdsj[0]*60+Number(zdsj[1]));
                    }
                    else if(zdsjActual[0]*60+Number(zdsjActual[1]) < zdsj[0]*60+Number(zdsj[1])){
                        obj["fast"] = (zdsj[0]*60+Number(zdsj[1])) - (zdsjActual[0]*60+Number(zdsjActual[1]));
                    }
                }
            }); 
		}
	});
</script>
<script type="text/html" id="list_info">
	{{each list as obj i}}
		<tr>
			<td>{{obj[1]}}<input type="hidden" id="{{obj[1]}}" value="{{obj[0]}}"></td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="3"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>
<script type="text/html" id="ludan_1">
	  <tr>
          <td colspan="16">行车路单</td>
      </tr>
      <tr>
          <td colspan="16">路别:{{map.xlName}}    车号:{{map.clZbh}}   出场时间:{{map.fcsjActual}}   到达站名:{{map.zdzName}}     日期:{{map.scheduleDate}}</td>
      </tr>
      <tr>
          <td colspan="2">出场存油 &nbsp;</td>
          <td colspan="3">加注油量 {{map.jzl}}</td>
          <td colspan="2">进场存油 &nbsp;</td>
          <td colspan="4">加注机油 &nbsp;</td>
          <td colspan="5">本日耗油 &nbsp;</td>
      </tr>
      <tr>
          <td colspan="2">调度员</td>
          <td colspan="2">早班(职号)</td>
          <td title={{map.zdp}}>{{map.zdpT}}</td>
          <td >中班(职号)</td>
          <td title={{map.zwdp}}>{{map.zwdpT}}</td>
          <td colspan="2">夜班(职号)</td>
          <td colspan="2" title={{map.wdp}}>{{map.wdpT}}</td>
          <td colspan="2">其他</td>
          <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
          <td rowspan="2">车次</td>
		  <td rowspan="2">路牌</td>
          <td colspan="2">工号</td>
          <td rowspan="2">公里耗油</td>
          <td colspan="2">起讫站</td>
          <td colspan="4">时间</td>
          <td colspan="2">误点</td>
          <td rowspan="2" width="66px">里程(公里)计划</td>
 		  <td rowspan="2" width="66px">里程(公里)实际</td>
          <td rowspan="2">备注</td>
      </tr>
      <tr>
          <td colspan="1" width="60px">&nbsp;</td>
          <td colspan="1" width="60px">&nbsp;</td>
          <td colspan="1">起点</td>
          <td colspan="1">终点</td>
          <td colspan="1">计发</td>
          <td colspan="1">实发</td>
          <td colspan="1">应到</td>
          <td colspan="1">实到</td>
          <td colspan="1"></td>
          <td colspan="1"></td>
      </tr>
</script>
<script type="text/html" id="ludan_2">
	{{each list as obj i}}
		<tr>
			<td>{{i+1}}</td>
			<td>{{obj.lpName}}</td>
			<td>{{obj.jGh}}{{obj.jName}}</td>
			<td>
				{{if obj.sGh !=null}}
					{{obj.sGh}}
					{{obj.sName}}
				{{/if}}
			</td>
			<td>&nbsp;</td>
			<td>{{obj.qdzName}}</td>
			<td>{{obj.zdzName}}</td>
			<td>{{obj.fcsj}}</td>
			<td>{{obj.fcsjActual}}</td>
			<td>{{obj.zdsj}}</td>
			<td>{{obj.zdsjActual}}</td>
			<td>{{obj.fast}}</td>
			<td>{{obj.slow}}</td>
			<td>{{obj.jhlcOrig}}</td>
			<td>{{obj.sjlc}}</td>
			<td title="{{obj.remarks}}">
             	{{if  obj.remarks !=""}}
					<div class="caption">

                    	<font style="font-size: 24px;font-weight: bold;"></font>

                    </div>
				{{/if}}
			</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="15"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>
<script type="text/html" id="ludan_3">
	<tr>
		<td colspan="2">计划公里</td>
		<td>{{map.jhlc}}</td>
		<td colspan="2">营运公里(计划)</td>
		<td >{{map.yygljh}}</td>
		<td >损失公里</td>
		<td>{{map.ssgl}}</td>
		<td colspan="2">空驶公里</td>
		<td colspan="1">{{map.ksgl}}</td>
		<td colspan="3">营运公里(实际)</td>
		<td colspan="2">{{map.yyglsj}}</td>
		
	</tr>
	<tr>
		<td colspan="2">计划班次</td>
		<td>{{map.jhbc}}</td>
		<td colspan="2">进出场公里</td>
		<td>{{map.jcclc}}</td>
		<td >加车公里</td>
		<td>{{map.ljgl}}</td>
		<td colspan="2">损失班次</td>
		<td colspan="1">{{map.ssbc}}</td>
		<td colspan="3"></td>
		<td colspan="2"></td>
	</tr>
	<tr>
		
		<td colspan="2">实际班次</td>
		<td>{{map.sjbc}}</td>
		<td colspan="2">总公里</td>
		<td>{{map.zgl}}</td>
		<td >加车班次</td>
		<td>{{map.ljbc}}</td>
		
		<td colspan="3"></td>
		<td colspan="5"></td>
	</tr>
</script>