countInterval.html 9.57 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; }
</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: 28px; " id="gsdmDiv">
						<span class="item-label" style="width: 80px;">公司: </span>
						<select class="form-control" name="company" id="gsdm" style="width: 180px;"></select>
					</div> 
					<div style="display: inline-block; margin-left: 29px;" id="fgsdmDiv">
						<span class="item-label" style="width: 80px;">分公司: </span>
						<select class="form-control" name="subCompany" id="fgsdm" style="width: 180px;"></select>
					</div>
					<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="导出"/> -->
					</div>
				</form>
			</div>
			<div class="portlet-body">
				<div class="row"  class="col-md-12">
					<div class="col-md-5">
						<div  id="left_table" style="margin-top: 10px;overflow:auto;">
							<input class="btn btn-default hidden" type="button" id="export" value="导出"/>
							<table class="table table-bordered table-hover table-checkable pre-scrollable" id="info_inter">
								<thead>
									<tr class="hidden">
										<th>分公司</th>
										<th>线路</th>
										<th>等级</th>
										<th>班次数</th>
										<th>次数</th>
										<th>发生率</th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
					<div class="col-md-7"  id="printArea">
						<div class="table-container" id="table" style="margin-top: 10px;overflow:auto;">
							<input class="btn btn-default hidden" type="button" id="exportXx" value="导出详细"/>
							<table class="table table-bordered table-hover table-checkable" id="forms">
								<thead class="hidden">
									<tr >
										<th rowspan="3">分公司</th>
										<th rowspan="3">线路</th>
										<th rowspan="3">等级</th>
										<th colspan="6">发生大间隔班次</th>
									</tr>
									<tr>
										<th rowspan="2">计发</th>
										<th rowspan="2">实发</th>
										<th rowspan="2">计发</th>
										<th rowspan="2">实发</th>
										<th colspan="2">间隔时间(分)</th>
									</tr>
									<tr>
										<th>班次</th>
										<th>大间隔</th>
									</tr>
								</thead>
								<tbody>
									
								</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'
		});
		
		
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var day = d.getDate();
		if(month < 9)
			month = "0" + month;
		if(day < 9)
			day = "0" + day;
		$("#date").val(year + "-" + month + "-" + day);
		var fage=false;
		var obj = [];
		var xlList;
		$.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 = '';
			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);
		}
		

		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() == " "){
				$("#gsdm").attr("disabled", false);
				$("#fgsdm").attr("disabled", false);
			} else {
				var temp = tempData[$("#line").val()].split(":");
				$("#gsdm").val(temp[0]);
				updateCompany();
				$("#fgsdm").val(temp[1]);
				$("#gsdm").attr("disabled", true);
				$("#fgsdm").attr("disabled", true);
			}
		});
		
		var date = "";
		var gsbm="";
		var fgsbm="";
		var listRe=null;
		var line = $("#line").val();
		$("#query").on("click",function(){
			if($("#date").val() == null || $("#date").val().trim().length == 0){
				layer.msg("请选择时间!");
				return;
			}
			$("#left_table").height($(window).height()-200);
			line = $("#line").val();
			date = $("#date").val();
			gsbm =$("#gsdm").val();
			fgsbm=$("#fgsdm").val();
			$(".hidden").removeClass("hidden");
			var i = layer.load(2);
			$get('/report/countDjg',{line:line,date:date,gsbm:gsbm,fgsbm:fgsbm,type:"query"},function(result){
				listRe=result;
				// 把数据填充到模版中
				var tbodyHtml = template('list_inter_info',{list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#info_inter tbody').html(tbodyHtml);
				
				$('.btn-intervalList').on('click', showIntervalList);
				layer.close(i);
				$("#info_inter").height($(window).height()-180);
			});
		});
		var listXx;
		function showIntervalList(){
			
			$("#info_inter tbody tr td button").css('background-color', 'blue');
			$(this).css('background-color', '#99CCFF');
			var line_ = $(this).data('id');
			
			 $.each(listRe, function (i, obj) {
				if(obj.line==line_){
					listXx=obj.djgxx;
				}
             });		
// 			 if(listXx.length>0){
				 $(".hidden").removeClass("hidden");
				var interList = template('list_inter_info_xx',{list:listXx});
				$('#forms tbody').html(interList);
// 				$("html,body").animate({scrollTop:$("#forms_1").offset().top},1000); 
// 			 }
			
		}
		
		 $("#export").on("click",function(){
			 var i = layer.load(2);
			$get('/report/countDjg',{line:line,date:date,gsbm:gsbm,fgsbm:fgsbm,type:"export"},function(result){
				layer.close(i);
				window.open("/downloadFile/download?fileName=大间隔统计表");
			});
		}); 
		
		
		 $("#exportXx").on("click",function(){
			 
			 if(listXx.length>0){
				 var i = layer.load(2);
				 var params = {};
		        	params['listXx']=JSON.stringify(listXx);
		        	params['date']=date;
				$get('/report/countDjgXx',params,function(result){
					layer.close(i);
					window.open("/downloadFile/download?fileName=大间隔统计表详细");
				});
			 }else{
				 layer.msg("无数据");
			 }
		}); 
	});
</script>
<script type="text/html" id="list_inter_info">
	{{each list as obj i}}
		<tr>
			<td width="20%">{{obj.fgsname}}</td>
			<td width="20%">{{obj.xlName}}</td>
			<td width="15%">{{obj.djgde}}</td>
			<td width="15%">{{obj.bcs}}</td>
			<td width="15%"><button type="button" class="btn btn-sm blue btn-intervalList" 
			data-id="{{obj.line}}">{{obj.djgcs}}</button></td>
			<td width="15%" >{{obj.fsl}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="6"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>

<script type="text/html" id="list_inter_info_xx">
	{{each list as obj i}}
		<tr>
			<td width="14%">{{obj.fgsname}}</td>
			<td width="16%">{{obj.xlName}}</td>
			<td width="8%">{{obj.djgde}}</td>
			<td width="8%">{{obj.qJh}}</td>
			<td width="8%">{{obj.qSj}}</td>
			<td width="8%">{{obj.hJh}}</td>
			<td width="8%">{{obj.hSj}}</td>
			<td width="10%">{{obj.bcjgsj}}</td>
			<td width="10%">{{obj.djgsj}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="9"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>