changetochange.html 10.1 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; margin-left: 33px;"
						id="gsdmDiv_change">
						<span class="item-label" style="width: 80px;">公司: </span> <select
							class="form-control" name="company" id="gsdmChange"
							style="width: 140px;"></select>
					</div>
					<div style="display: inline-block; margin-left: 24px;"
						id="fgsdmDiv_change">
						<span class="item-label" style="width: 80px;">分公司: </span> <select
							class="form-control" name="subCompany" id="fgsdmChange"
							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="line" id="line" style="width: 180px;"></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: 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 colspan="2">工号/人员</td>
								<td colspan="2">工号/人员</td>
							</tr>
						</thead>
						<tbody>

						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function() {
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();

		var d = new Date();
		d.setTime(d.getTime() - 1*1000*60*60*24);
		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;
		var dateTime = year + "-" + month + "-" + day;
		$("#startDate,#endDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn',
			maxDate : dateTime
		});
		$("#startDate,#endDate").val(dateTime);

		var fage=false;
		var xlList;
		var obj = [];
		
		
		$.get('/report/lineList',function(result){
			xlList=result;
			$.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 ==0){
					 $("#gsdmDiv_change").css('display','none');
				}else if(obj.length ==1){
					 $("#gsdmDiv_change").css('display','none');
					if(obj[0].children.length == 1  || obj[0].children.length ==0)
						$('#fgsdmDiv_change').css('display','none');
				}
				$('#gsdmChange').html(options);
				updateCompany();
			});
		})
		$("#gsdmChange").on("change",updateCompany);
		function updateCompany(){
			var company = $('#gsdmChange').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>';
					}
				}
			}
			$('#fgsdmChange').html(options);
		}
		
		 
		var tempData = {};
		$.get('/report/lineList',function(xlList){
			var data = [];
			data.push({id: " ", text: "全部线路"});
			$.get('/user/companyData', function(result){
				for(var i = 0; i < result.length; i++){
					var companyCode = result[i].companyCode;
					var children = result[i].children;
					for(var j = 0; j < children.length; j++){
						var code = children[j].code;
						for(var k=0;k < xlList.length;k++ ){
							if(xlList[k]["fgsbm"]==code && xlList[k]["gsbm"]==companyCode){
								data.push({id: xlList[k]["xlbm"], text: xlList[k]["xlname"]});
								tempData[xlList[k]["xlbm"]] = companyCode+":"+code;
							}
						}
					}
				}
				initPinYinSelect2('#line',data,'');
				
			});
		});
		
		$("#line").on("change", function(){
			if($("#line").val() == " "){
				$("#gsdmChange").attr("disabled", false);
				$("#fgsdmChange").attr("disabled", false);
			} else {
				var temp = tempData[$("#line").val()].split(":");
				$("#gsdmChange").val(temp[0]);
				updateCompany();
				$("#fgsdmChange").val(temp[1]);
				$("#gsdmChange").attr("disabled", true);
				$("#fgsdmChange").attr("disabled", true);
			}
		});
		
		var line;
		var startDate;
		var endDate;
		$("#query").on(
				"click",
				function() {
					line = $("#line").val();
					sel = $("#sel").val();
					var startDate1 = $("#startDate").val();
					var endDate1 = $("#endDate").val();
					var gsdmChange= $("#gsdmChange").val();
				    var fgsdmChange= $("#fgsdmChange").val();
					if (startDate1 != '' && endDate1 != '') {
						var i = layer.load(2);
						$get('/mcy_forms/changetochange', {
							sel : sel,
							line : line,
							startDate : $("#startDate").val(),
							endDate : $("#endDate").val(),
							gsdm:gsdmChange,
							fgsdm:fgsdmChange,
							type : 'query'
						}, function(result) {
							// 把数据填充到模版中
							var tbodyHtml = template('changetochange', {
								list : result
							});
							// 把渲染好的模版html文本追加到表格中
							$('#forms tbody').html(tbodyHtml);
							layer.close(i);
						})

					} else {
						alert("请选择时间范围!");
					}
				});

		$("#export").on(
				"click",
				function() {
					line = $("#line").val();
					var sel = $("#sel").val();
					 var startDate = $("#startDate").val();
					    var endDate = $("#endDate").val();
					    var lpName = $("#lpName").val(); 
					    var gsdmChange= $("#gsdmChange").val();
					    var fgsdmChange= $("#fgsdmChange").val();
					var lineName = $('#line option:selected').text();
					if(lineName == "全部线路")
						lineName = $('#fgsdmChange option:selected').text();
					var i = layer.load(2);
					$post('/mcy_export/changetochangeExport', {
						sel:sel,
						line:line,
						gsdm:gsdmChange,
						fgsdm:fgsdmChange,
						startDate : startDate,
						endDate : endDate,
						type : 'export',
						lineName : lineName
					}, function(result) {
						var dateTime = "";
						if(startDate == endDate){
							dateTime = moment(startDate).format("YYYYMMDD");
						} else {
							dateTime = moment(startDate).format("YYYYMMDD")
									+"-"+moment(endDate).format("YYYYMMDD");
						}
						window.open("/downloadFile/download?fileName="
								+dateTime+"-"+lineName+"-换人换车情况日统计");
						layer.close(i);
					});
				});
	});
</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.sjch}}</td>
			<td colspan="2">{{obj.pcry}}</td>
			<td colspan="2">{{obj.sjgh}}</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>