changetochange.html 7.59 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; 
	        text-align: center;}
	 
	 .table > tbody + tbody {
	   border-top: 1px solid; }
	 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ text-align: center; }
.table-checkable tr > th:first-child, .table-checkable tr > td:first-child {
    text-align: center;
    max-width: initial;
    min-width: 40px;
    padding-left: 0;
    padding-right: 0;
}

</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="" method="post">
				<div style="display: inline-block;">
                        <span class="item-label" style="width: 80px;">线路: </span>
                        <select class="form-control" name="line" id="line" style="width: 120px;"></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: 120px;"/>
                    </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: 120px;"/>
                    </div>
                    <div style="display: inline-block;">
                        <span class="item-label" style="width: 120px;">类型: </span>
                    	<select class="form-control" id="sel">
    						<option value="">请选择</option>
    						<option value="1">换人</option>
   						    <option value="2">换车</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: 20px;overflow:auto;min-width: 1000px">
					<table class="table table-bordered table-hover table-checkable" id="forms">
						<thead>
							<tr>
								<th colspan="15">换人换车情况统计表</th>
							</tr>
							<tr>
								<td  rowspan="3" style=" padding-top: 50px;">日期</td> 
								<td rowspan="3" style=" padding-top: 50px;">公司</td>
								<td rowspan="3" style=" padding-top: 50px;">分公司</td>
								<td rowspan="3" style=" padding-top: 50px;">线路</td>
								<td rowspan="3" style=" padding-top: 50px;">路牌</td>
								<td rowspan="3" style=" padding-top: 50px;">发生时间</td>
								<td rowspan="3" style=" padding-top: 50px;">修改时间</td>
								<td colspan="2">配车</td>
								<td colspan="4">人员</td>
								<td rowspan="3" style=" padding-top: 50px;">原因</td>
								<td rowspan="3" style=" padding-top: 50px;">修改人</td>
							</tr>
							<tr>
								<td>计划</td>
								<td>实际</td>
								<td colspan="2">计划</td>
								<td colspan="2">实际</td>
								
							</tr>
							<tr>
								<td>车号</td>
								<td>车号</td>
								<td>工号</td>
								<td>人员</td>
								<td>工号</td>
								<td>人员</td>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();
		
		$("#startDate,#endDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});
		
		$('#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 line;
		 var startDate;
		 var endDate;
		$("#query").on("click",function(){
			line = $("#line").val();
			sel = $("#sel").val();
		 var	startDate1=$("#startDate").val();
		var 	endDate1=$("#endDate").val();
			
			 if(startDate1!=''&&endDate1!=''){
				 $post('/mcy_forms/changetochange',{sel:sel,line:line,startDate:$("#startDate").val(),endDate:$("#endDate").val(),type:'query'},function(result){
						startDate = $("#startDate").val();
					    endDate = $("#endDate").val();
					    $("#sDate").text(startDate);
				        $("#eDate").text(endDate);
				        var temp = {};
				        var today_account = 0;
				        temp["line"] = $("#line").text(); 	        
				        $.each(result, function(i, obj) {
				            if(moment(obj.schedule_date_str).format("YYYY-MM-DD") == moment(obj.startDate).format("YYYY-MM-DD")){
				                today_account++;
				            } 
			                obj.updateDate = moment(obj.startDate).format("YYYY-MM-DD HH:mm:ss");
			            }); 
						// 把数据填充到模版中
						var tbodyHtml = template('changetochange',{list:result});
						// 把渲染好的模版html文本追加到表格中
						$('#forms tbody').html(tbodyHtml);
					})	
		
			 }else{
				 alert("请选择时间范围!");
			 } 
	});
		 
	$("#export").on("click",function(){
		$post('/mcy_export/changetochangeExport',{startDate:startDate,endDate:endDate,type:'export'},function(result){
			window.open("/downloadFile/download?fileName=换人换车情况日统计"+moment(startDate).format("YYYYMMDD"));
		});
	});
	});
</script>
<script type="text/html" id="changetochange">
	{{each list as obj i}}
		<tr>
			<td>{{obj.rq}}</td>
			<td>{{obj.gs}}</td>
			<td>{{obj.fgs}}</td>
			<td>{{obj.xl}}</td>
			<td>{{obj.lp}}</td>
			<td>{{obj.fssj}}</td>
			<td>{{obj.xgsj}}</td>
			<td>{{obj.pcch}}</td>
			<td>{{obj.pcry}}</td>
			<td>{{obj.jhgh}}</td>
			<td>{{obj.jhch}}</td>
			<td>{{obj.sjgh}}</td>
			<td>{{obj.sjch}}</td>
			<td>{{obj.yy}}</td>
			<td>{{obj.xgr}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="15"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>