潘钊 / 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;
	    text-align: center; }
	  .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 id="history" class="form-inline" action="">
					<div style="display: inline-block;margin-left: 33px;" id="company1">
						<span class="item-label" style="width: 80px;">公司: </span>
						<select class="form-control" name="company" id="company" style="width: 150px;"></select>
					</div>
					<div style="display: inline-block;margin-left: 24px;" id="subCompany1">
						<span class="item-label" style="width: 80px;">分公司: </span>
						<select class="form-control" name="subCompany" id="subCompany" style="width: 150px;"></select>
					</div>
					<div style="display: inline-block;margin-left: 38px;">
						<span class="item-label" style="width: 80px;">线路: </span>
						<select class="form-control" name="line" id="line" style="width: 150px;"></select>
					</div>
					<div style="display: inline-block;margin-left: 10px;">
						<span class="item-label" style="width: 80px;">班次类型: </span>
						<select class="form-control" name="bcType" id="bcType" style="width: 150px;">
							<option value="0">全部班次</option>
							<option value="1">非直放非区间</option>
							<option value="2">非直放</option>
							<option value="3">非区间</option>
						</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: 150px;"/>
					</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: 150px;"/>
					</div>
					<div style="display: inline-block;margin-left: 10px;">
						<span class="item-label" style="width: 80px;">每周时段: </span>
						<select multiple="multiple" class="form-control" name="weeks" id="weeks" style="width: 150px;">
							<option value="1">星期一</option>
							<option value="2">星期二</option>
							<option value="3">星期三</option>
							<option value="4">星期四</option>
							<option value="5">星期五</option>
							<option value="6">星期六</option>
							<option value="7">星期日</option>
						</select>
					</div>
					<div class="form-group" style="margin-left: 10px">
						<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 class="hidden">
								<th style="display: none;"></th>
								<th width="8%">公司</th>
								<th width="8%">分公司</th>
								<th width="8%">线路</th>
								<th width="8%">起点站名</th>
								<th width="6%">路牌</th>
								<th width="6%">计发时间</th>
								<th width="6%">计划运送<br/>时间(分)</th>
								<th width="6%">实际运送<br/>时间(平均)</th>
								<th width="6%">计划停站<br/>时间(分)</th>
								<th width="6%">最长停站<br/>时间(分)</th>
								<th width="6%">最短停站<br/>时间(分)</th>
								<th width="6%">平均停站<br/>时间(分)</th>
							</tr>
						</thead>
						<tbody>
							
						</tbody>
					</table>
					<div style="text-align: right;">
						<ul id="pagination" class="pagination"></ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	$(function(){
		var page = 0, initPagination;
		$('#export').attr('disabled', "true");
		
		// 关闭左侧栏
		if (!$('body').hasClass('page-sidebar-closed'))
			$('.menu-toggler.sidebar-toggler').click();
		
		$("#startDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn'
		});
		
		$("#endDate").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 < 10)
			month = "0" + month;
		if(day < 10)
			day = "0" + day;
		$("#startDate").val(year + "-" + month + "-" + day);
		$("#endDate").val(year + "-" + month + "-" + day);
		
		initPinYinSelect2('#weeks',[],'');
		
		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){
					 $("#company1").css('display','none');
				}else if(obj.length ==1){
					 $("#company1").css('display','none');
					if(obj[0].children.length == 1  || obj[0].children.length ==0)
						$('#subCompany1').css('display','none');
				}
				$('#company').html(options);
				updateCompany();
			});
		})
		$("#company").on("change",updateCompany);
		function updateCompany(){
			var company = $('#company').val();
			var options = '';
// 			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>';
					}
				}
			}
			$('#subCompany').html(options);
		}
		
		
		var tempData = {};
		$.get('/report/lineList',function(xlList){
			var data = [];
			$.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 = data[0].id;
				
			});
		});
		
		$("#line").on("change", function(){
			if($("#line").val() == " "){
				$("#company").attr("disabled", false);
				$("#subCompany").attr("disabled", false);
			} else {
				var temp = tempData[$("#line").val()].split(":");
				$("#company").val(temp[0]);
				updateCompany();
				$("#subCompany").val(temp[1]);
				$("#company").attr("disabled", true);
// 				$("#subCompany").attr("disabled", true);
			}
		});
		

		$("#query").on("click", function(){
			page = 0;
			jsDoQuery(true);
		});
		
		var list;
		var line = $("#line").val();
		var startDate = $("#startDate").val();
		var endDate = $("#endDate").val();
		var weeks = $("#weeks").val();
		var bcType = $('#bcType').val();
		var company = $("#company").val();
		var subCompany = $("#subCompany").val();
		var lineName = $('#line option:selected').text();
		function jsDoQuery(pagination){
			if($("#startDate").val() == null || $("#startDate").val().trim().length == 0){
				layer.msg("请选择时间范围！");
				return;
			}
			if($("#endDate").val() == null || $("#endDate").val().trim().length == 0){
				layer.msg("请选择时间范围！");
				return;
			}
			var params = {};
// 			line = $("#line").val();
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			weeks = $("#weeks").val();
			bcType = $("#bcType").val();
			company = $("#company").val();
			subCompany = $("#subCompany").val();
			lineName = $('#line option:selected').text();
			if(lineName == "全部线路")
				lineName = $('#subCompany option:selected').text();
			params['page'] = page;
			params['line'] = line;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			if(weeks){
				params['weeks'] = weeks.join();
			} else {
				params['weeks'] = weeks;
			}
			params['bcType'] = bcType;
			params['company'] = company;
			params['subCompany'] = subCompany;
			params['type'] = "query";
			$(".hidden").removeClass("hidden");
			var i = layer.load(2);
			$get('/pcpc/dwellTime', params, function(result){
				list = result.dataList;
				dataPageChange(page, result.dataList);
				layer.close(i);

				if(result.dataList.length == 0)
					$("#export").attr('disabled',"true");
				else
					$("#export").removeAttr("disabled");
				
				if(pagination && result.dataList.length > 0){
					//重新分页
					initPagination = true;
					showPagination(result);
					
					$('#pagination').show();
				} else if(result.dataList.length == 0){
					$('#pagination').hide();
				}
			});
		}
		
		function dataPageChange(page, list){
			var tempList = [];
			for(var f = page*10; f < list.length && f < (page+1)*10; f++){
				tempList[tempList.length] = list[f];
			}
			// 把数据填充到模版中
			var tbodyHtml = template('list_dwellTime',{list:tempList});
			// 把渲染好的模版html文本追加到表格中
			$('#forms tbody').html(tbodyHtml);
		}
		
		$("#export").on("click",function(){
			var params = {};
			params['page'] = page;
			params['line'] = line;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			if(weeks){
				params['weeks'] = weeks.join();
			} else {
				params['weeks'] = weeks;
			}
			params['bcType'] = bcType;
			params['company'] = company;
			params['subCompany'] = subCompany;
			params['type'] = "export";
			params['lineName'] = lineName;
			var i = layer.load(2);
			$get('/pcpc/dwellTime', params, function(result){
				window.open("/downloadFile/download?fileName="
						+moment(startDate).format("YYYYMMDD")+
						"-"+moment(endDate).format("YYYYMMDD")
						+"-"+lineName+"-停站时间分析");
				layer.close(i);
			});
		});


		$("#line").on("change", function(){
			line = $("#line").val();
			if(line == " ")
				line = "";
		});
		$('#startDate, #endDate').on("blur", function(){
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
		});
		
		
		function showPagination(data){
			//分页
			$('#pagination').jqPaginator({
			    totalPages: data.totalPage,
			    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(initPagination){
			    		initPagination = false;
			    		return;
			    	}
			    	page = num - 1;
// 			    	jsDoQuery(false);
					dataPageChange(page, list);
			    }
			});
		}
		
		
	});
	
</script>
<script type="text/html" id="list_dwellTime">
	{{each list as obj i}}
		<tr>
			<th style="display: none;"></th>
			<td>{{obj.gsName}}</td>
			<td>{{obj.fgsName}}</td>
			<td>{{obj.xlName}}</td>
			<td>{{obj.qdzName}}</td>
			<td>{{obj.lpName}}</td>
			<td>{{obj.fcsj}}</td>
			<td>{{obj.bcsj}}</td>
			<td>{{obj.aveBcsj}}</td>
			<td>{{obj.jhtz}}</td>
			<td>{{obj.maxSjtz}}</td>
			<td>{{obj.minSjtz}}</td>
			<td>{{obj.aveSjtz}}</td>
		</tr>
	{{/each}}
	{{if list.length == 0}}
		<tr>
			<td colspan="15"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</script>