潘钊 / 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;
	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">
						<span class="item-label" style="width: 80px;">公司: </span> <select
							class="form-control" name="company" id="gsdm"
							style="width: 140px;"></select>
					</div>
					<div style="display: inline-block; margin-left: 19px;"
						id="fgsdmDiv">
						<span class="item-label" style="width: 80px;">分公司: </span> <select
							class="form-control" name="subCompany" id="fgsdm"
							style="width: 140px;"></select>
					</div>
					<div style="display: inline-block; margin-left: 33px;">
						<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: 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: 5px;">
						<span class="item-label" style="width: 80px;">结束日期: </span> <input
							class="form-control" type="text" id="endDate"
							style="width: 140px;" />
					</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>
							<th colspan="10">发车到站统计</th>
							<th colspan="1">发车准点率:</th>
							<th colspan="1" id="fczdl"></th>
							<th colspan="1">到站准点率:</th>
							<th colspan="1" id="dzzdl"></th>
						</tr>
						<tr>
							<td >日期</td>
							<td >公司</td>
							<td >分公司</td>
							<td >线路</td>
							<td >计划发车时间</td>
							<td >实际发车时间</td>
							<td >计划到站时间</td>
							<td >实际到站时间</td>
							<td >烂班类型</td>
							<td >备注</td>
							<td >发车延迟</td>
							<td >发车准点</td>
							<td >到站延迟</td>
							<td >到站准点</td>
						</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();

		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").css('display','none');
				}else if(obj.length ==1){
					 $("#gsdmDiv").css('display','none');
					if(obj[0].children.length == 1  || obj[0].children.length ==0)
						$('#fgsdmDiv').css('display','none');
				}
				$('#gsdm').html(options);
				updateCompany();
			});
		})
		$("#gsdm").on("change",updateCompany);
		function updateCompany(){
			var company = $('#gsdm').val();
			var options = '<option value="">全部分公司</option>';
			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>';
					}
				}
			}
			$('#fgsdm').html(options);
			initXl();
		}


		$("#fgsdm").on("change",initXl);
		function initXl(){
			var data=[];
			data.push({id: " ", text: "全部线路"});
			if(fage){
				$("#line").select2("destroy").html('');
			}
			var fgs=$('#fgsdm').val();
			var gs=$('#gsdm').val();
			for(var i=0;i<xlList.length;i++){
				if(gs!=""){
					if(fgs!=""){
						if(xlList[i]["fgsbm"]==fgs && xlList[i]["gsbm"]==gs){
							data.push({id: xlList[i]["xlbm"], text: xlList[i]["xlname"]});
						}
					}else{
						if(xlList[i]["gsbm"]==gs){
							data.push({id: xlList[i]["xlbm"], text: xlList[i]["xlname"]});
						}
					}
				}
			}
			initPinYinSelect2('#line',data,'');
			fage=true;
		}

		$("#startDate").on("change", function(){
			console.log(">>>>>>>>");
		});
		/*$("#line").on("change", function(){
			if($("#line").val() == " "){
				$("#gsdm").attr("disabled", false);
				$("#fgsdm").attr("disabled", false);
			} else {
				var temp = tempData[$("#line").val()].split(":");
				$("#gsdm").val(temp[0]);
				updateCompany();
				$("#fgsdm").val("");
				$("#gsdm").attr("disabled", true);
			}
		});*/
		

		$("#query").on(
				"click",
				function() {
					var startDate = $("#startDate").val();
					var endDate = $("#endDate").val();
					if(getDateDifference(startDate, endDate)>60){
						layer.msg("单次查询最多不超过60天！");
						return;
					}
					if (startDate != '') {
						page=0;
						loadTableDate(true);
					} else {
						alert("请选择时间范围!");
					}
				});

		$("#export").on(
				"click",
				function() {
					var line = $("#line").val();
					var startDate = $("#startDate").val();
					var endDate = $("#endDate").val();
					var gsdm= $("#gsdm").val();
					var fgsdm= $("#fgsdm").val();
					if(getDateDifference(startDate, endDate)>60){
						layer.msg("单次查询最多不超过60天！");
						return;
					}
					var i = layer.load(2);
					window.open('/report/fcdzStatistics/?line=' + line + "&startDate=" + startDate + "&endDate=" + endDate +
							"&gsdm=" + gsdm + "&fgsdm=" + fgsdm + "&type=export");
					layer.close(i);
				});
		function getDateDifference(start, end) {
			const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
			const startDate = new Date(start); // 转换为Date对象
			const endDate = new Date(end); // 转换为Date对象
			const diffDays = Math.round(Math.abs((endDate - startDate) / oneDay)); // 计算两个日期的差值，取绝对值并四舍五入
			return diffDays;
		}
		function getParams() {
			// 搜索参数集合
			var params = {};
			params['line'] = $("#line").val();
			params['startDate'] = $("#startDate").val();
			params['endDate'] = $("#endDate").val();
			params['gsdm'] = $("#gsdm").val();
			params['fgsdm'] = $("#fgsdm").val();
			return params;
		}
		var page = 0,
				initPag;
		function showPagination(data){
			// 分页组件
			$('#pagination').jqPaginator({
				// 总页数
				totalPages: data.totalPages,
				// 中间显示页数
				visiblePages: 6,
				// 当前页
				currentPage: page + 1,
				first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',
				prev:  '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',
				next:  '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',
				last:  '<li class="last"><a href="javascript:void(0);">尾页<\/a><\/li>',
				page:  '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',
				onPageChange: function (num, type) {
					if(initPag){
						initPag = false;
						return;
					}
					page = num - 1;
					loadTableDate(false);
				}
			});
		}
		/** 表格数据分页加载事件 @param:<param : 查询参数;isPon : 是否重新分页> */
		function loadTableDate(isPon){
			// 搜索参数
			var params = getParams();
			params['type'] = 'query';
			// 记录当前页数
			params['page'] = page;
			// 弹出正在加载层
			var i = layer.load(2);
			$.get('/report/fcdzStatistics',params,function(result){
				$("#fczdl").html(result.fczdl);
				$("#dzzdl").html(result.dzzdl);
				// 把数据填充到模版中
				var tbodyHtml = template('changetochange',{list:result.list});
				// 把渲染好的模版html文本追加到表格中
				$('#forms tbody').html(tbodyHtml);
				// 是重新分页且返回数据长度大于0
				if(isPon){
					// 重新分页
					initPag = true;
					// 分页栏
					showPagination(result);
				}
				// 关闭弹出加载层
				layer.close(i);
			});
		}
	});
</script>
<script type="text/html" id="changetochange">
	{{each list as obj i}}
		<tr>
			<td>{{obj.schedule_date_str}}</td>
			<td>{{obj.gs_name}}</td>
			<td>{{obj.fgs_name}}</td>
			<td>{{obj.xl_name}}</td>
			<td>{{obj.fcsj}}</td>
			<td>{{obj.fcsj_actual}}</td>
			<td>{{obj.zdsj}}</td>
			<td>{{obj.zdsj_actual}}</td>
			<td>{{obj.adjust_exps}}</td>
			<td>{{obj.remarks}}</td>
			<td>{{obj.fcyc}}</td>
			<td>{{obj.fczd}}</td>
			<td>{{obj.dzyc}}</td>
			<td>{{obj.dzzd}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="15"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>