潘钊 / 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; }
	 .table > tbody + tbody {
	   border-top: 1px solid; }
	#forms > tbody > tr{
		background-color: #FFFFFF;
	}
	#works > tbody > tr{
		background-color: #FFFFFF;
	}
	tbody > tr > td{
		text-align: center;
		vertical-align: middle;
	}
</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: 140px;"></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: 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: 165px;"/>
						<input type="hidden" name="statu" id="statu"/>
					</div>
					<div style="display: inline-block; margin-left: 10px">
						<span class="item-label" style="width: 80px;">时刻类型: </span>
						<select class="form-control" name="model" id="model" style="width: 165px;">
							<option value="">请选择...</option>
						</select>
					</div>
					<div style="display: inline-block; margin-left: 10px" id="lp1">
						<span class="item-label" style="width: 80px;">路牌: </span>
						<select class="form-control" name="lp" id="lp" style="width: 140px;"></select>
					</div>
					<div style="margin-top: 10px"></div>
					<div style="display: inline-block; margin-left: 5px">
						<span class="item-label" style="width: 80px;">是否营运: </span>
						<select class="form-control" name="sfyy" id="sfyy" style="width: 140px;">
							<option value="0">全部线路</option>
							<option value="1" selected="selected">营运线路</option>
							<option value="2">非营运线路</option>
						</select>
					</div>
					<div style="display: inline-block; margin-left: 10px;">
						<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;">
						<select class="form-control" name="sfqr" id="sfqr" style="width: 75px;">
							<option value="0">全日</option>
							<option value="1">时段</option>
						</select>
					</div>
					<div style="display: inline-block;margin-left: 12px;">
						<span class="item-label" style="width: 80px;"> </span>
						<input class="form-control" type="text" id="times1" style="width: 60px;"/>
					</div>
					<div style="display: inline-block;">
						<span class="item-label" style="width: 80px;"> - </span>
						<input class="form-control" type="text" id="times2" style="width: 60px;"/>
					</div>
					<div class="form-group" style="margin-left: 14px">
						<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">
					</table>
					<div id="works_hidden" class="hidden">
						<span class="item-label" style="width: 80px;margin-left: 20px;">明细: </span>
						<span class="item-label" style="width: 80px;margin-left: 60px;">日期: </span>
						<span class="item-label" style="width: 80px;" id="date0"></span>
						<span class="item-label" style="width: 80px;margin-left: 60px;">公司: </span>
						<span class="item-label" style="width: 80px;" id="company0"></span>
						<span class="item-label" style="width: 80px;margin-left: 60px;">分公司: </span>
						<span class="item-label" style="width: 80px;" id="subCompany0"></span>
						<span class="item-label" style="width: 80px;margin-left: 60px;">线路: </span>
						<span class="item-label" style="width: 80px;" id="line0"></span>
						<table class="table table-bordered table-hover table-checkable" id="works">
						</table>
					</div>
					<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();
		

		$("#times1").datetimepicker({
			format : 'HH:mm',
			locale : 'zh-cn'
		});
		$("#times2").datetimepicker({
			format : 'HH:mm',
			locale : 'zh-cn'
		});
		
		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").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn',
			maxDate : dateTime
		});
		$("#endDate").datetimepicker({
			format : 'YYYY-MM-DD',
			locale : 'zh-cn',
			maxDate : dateTime
		});
		$("#startDate").val(dateTime);
		$("#endDate").val(dateTime);
		
		$("#times1").val("05:00");
		$("#times2").val("23:00");
		$("#times1").attr("disabled", true);
		$("#times2").attr("disabled", true);
		
		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 = '<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 = [];
			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,'');
				$("#endDate").attr("disabled", true);
				$("#endDate").val($("#startDate").val());
				line = data[0].id;
				statu = 0;
				
				updateModel();
				updateLp("");
			});
		});
		
		$("#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]);
				$("#subCompany").val("");
				$("#company").attr("disabled", true);
// 				$("#subCompany").attr("disabled", true);
			}
		});
		
		$("#query").on("click", function (){
			jsDoQuery();
		});

		var list = [];
		var sfyy = 1;
		var sfqr = 0;
		var statu = 0;
		var line = $("#line").val();
// 		var statu = $("#statu").val();
		var startDate = $("#startDate").val();
		var endDate = $("#endDate").val();
		var times1 = $("#times1").val();
		var times2 = $("#times2").val();
		var model = $("#model").val();
		var company = $("#company").val();
		var subCompany = $("#subCompany").val();
		var lp = $("#lp").val();
		var lineName = $('#line option:selected').text();
		function jsDoQuery(pagination){
			if($("#startDate").val().trim().length == 0 || $("#endDate").val().trim().length == 0){
				layer.msg("请选择日期");
				return;
			}
			if(sfqr == 1 && ($("#times1").val().trim().length == 0 || $("#times2").val().trim().length == 0)){
				layer.msg("请选择时间");
				return;
			}
			var params = {};
			sfyy = $("#sfyy").val();
			line = $("#line").val();
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			times1 = $("#times1").val();
			times2 = $("#times2").val();
			model = $("#model").val();
			company = $("#company").val();
			subCompany = $("#subCompany").val();
			lp = $("#lp").val();
			lineName = $('#line option:selected').text();
			if(lineName == "全部线路")
				lineName = $('#subCompany option:selected').text();
			params['lp'] = lp;
			params['sfyy'] = sfyy;
			params['line'] = line;
			params['sfqr'] = sfqr;
			params['statu'] = statu;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			params['times1'] = times1;
			params['times2'] = times2;
			params['model'] = model;
			params['company'] = company;
			params['subCompany'] = subCompany;
			params['type'] = "query";
// 			$(".hidden").removeClass("hidden");
			var i = layer.load(2);
			$get('/busInterval/timeAndSpeed', params, function(result){
				// 把数据填充到模版中
				var tbodyHtml = template('list_timeAndSpeed', {list:result});
				// 把渲染好的模版html文本追加到表格中
				$('#forms').html(tbodyHtml);
				list = result;
				$("#works_hidden").addClass("hidden");
				layer.close(i);
				
				_w_table_rowspan("#forms", 1);
				_w_table_rowspan("#forms", 2);
				_w_table_rowspan("#forms", 3);
				_w_table_rowspan("#forms", 4);
				
				if(result.statu == 0)
				$("#forms tbody").on("click", "a", function(){
					var key = $(this).parent().prev().html();
		 			$.each(list.dataList, function(i, g){
		 				if(g.line == key){
		 					var tbodyHtml = template('list_timeAndSpeed_1',{list:g});
		 					$("#works_hidden").removeClass("hidden");
		 					$("#date0").html(g.date);
		 					$("#line0").html(g.line);
		 					$("#company0").html(g.company);
		 					$("#subCompany0").html(g.subCompany);
		 					$("#works").html(tbodyHtml);
		 					
		 					_w_table_rowspan("#works", 1);
		 					_w_table_rowspan("#works", 2);
		 					_w_table_rowspan("#works", 3);
		 					_w_table_rowspan("#works", 4);
		 				}
		 			});
					$("html,body").animate({scrollTop:$("#works").offset().top},700);
				});
			});		
		}
		
		$("#export").on("click", function(){
			if($("#startDate").val().trim().length == 0 || $("#endDate").val().trim().length == 0){
				layer.msg("请选择日期");
				return;
			}
			if(sfqr == 1 && ($("#times1").val().trim().length == 0 || $("#times2").val().trim().length == 0)){
				layer.msg("请选择时间");
				return;
			}
			var params = {};
			params['lp'] = lp;
			params['sfyy'] = sfyy;
			params['line'] = line;
			params['sfqr'] = sfqr;
			params['statu'] = statu;
			params['startDate'] = startDate;
			params['endDate'] = endDate;
			params['times1'] = times1;
			params['times2'] = times2;
			params['model'] = model;
			params['company'] = company;
			params['subCompany'] = subCompany;
			params['type'] = "export";
			params['lineName'] = lineName;
			var i = layer.load(2);
			$get('/busInterval/timeAndSpeed', params, 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);
			});
		});
		
		
// 		$("#lp1").hide();
		
		$("#sfqr").on("change", function(){
			if($("#sfqr").val() == 0){
				$("#times1").attr("disabled", true);
				$("#times2").attr("disabled", true);
				sfqr = 0;
			}else{
				$("#times1").attr("disabled", false);
				$("#times2").attr("disabled", false);
				sfqr = 1;
			}
		});
		$("#line").on("change", function(){
			line = $("#line").val();
			if(line.trim().length == 0){
				statu = 0;
				$("#endDate").attr("disabled", true);
				$("#endDate").val($("#startDate").val());
			}else{
				statu = 1;
				$("#endDate").attr("disabled", false);
			}
			updateModel();
			updateLp("");
		});
		$("#model").on("change", function(){
			model = $("#model").val();
			updateLp(model);
		});
		$('#startDate').on("blur", function(){
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			updateModel();
			if($("#endDate").prop("disabled")){
				$("#endDate").val($("#startDate").val());
			}
		});
		$('#endDate').on("blur", function(){
			startDate = $("#startDate").val();
			endDate = $("#endDate").val();
			updateModel();
		});
		
		var flag = 0;
		function updateModel(){
			if(flag == 1)
				return;
			flag = 1;
			var treeData = [];
			var params = {};
			if(statu == 0)
				params['line'] = " ";
			if(statu == 1)
				params['line'] = line;
			params['startDate'] = $("#startDate").val();
			params['endDate'] = $("#endDate").val();
			$get('/pcpc/getModel', params, function(result){
				treeData = createTreeData(result);
				var options = '<option value="">请选择...</option>';
				$.each(treeData, function(i, g){
					options += '<option value="'+g.id+'">'+g.name+'</option>';
				});
				$('#model').html(options);
				flag = 0;
			});
// 			if(statu == 0)
// 				var options = '<option value="">请选择...</option>';
// 				$('#model').html(options)/* .select2() */;
// 				flag = 0;
// 			if(statu == 1){
// 				params['xl.lineCode_eq'] = line;
// 				$get('/tic_ec', params, function(result){
// 					treeData = createTreeData(result.data.content);
// 					var options = '<option value="">请选择...</option>';
// 					$.each(treeData, function(i, g){
// 						if(!g.isCancel)
// 							options += '<option value="'+g.id+'">'+g.name+'</option>';
// 					});
// 					$('#model').html(options)/* .select2() */;
// 					flag = 0;
// 				});
// 			}
		}
		
		function updateLp(ttId){
			var treeData = [];
			var params = {};
			params['line'] = line;
			params['ttId'] = ttId;
			$get('/busInterval/getLp', params, function(result){
				treeData = createTreeData(result);
				var options = '<option value="">全部路牌</option>';
				$.each(treeData, function(i, g){
// 					options += '<option value="'+g.id+'">'+g.name+'</option>';
					options += '<option value="'+g.name+'">'+g.name+'</option>';
				});
				$('#lp').html(options);
			});
		}
		
		/**
		 * 将模块List 转换为树结构
		 * @param arr
		 * @returns {Array}
		 */
		function createTreeData(arr){
			var treeData = [];
			var len = arr.length;
			for(var i = 0; i < len; i ++){
				var pId = arr[i].pId;
				arr[i].text = arr[i].name;
				if(!pId){
					treeData.push(arr[i]);
				}

				for(var j = 0; j < len; j ++){
					if(pId == arr[j].id){
						if(!arr[j].children)
							arr[j].children = [];
						arr[j].children.push(arr[i]);
						break;
					}
				}
			}
			return treeData;
		}
		
		function _w_table_rowspan(_w_table_id, _w_table_colnum){
		    _w_table_firsttd = "";
		    _w_table_currenttd = "";
		    _w_table_SpanNum = 0;
		    _w_table_Obj = jQuery(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
		    _w_table_Obj.each(function(i){
		        if(i==0){
		            _w_table_firsttd = jQuery(this);
		            _w_table_SpanNum = 1;
		        }else{
		            _w_table_currenttd = jQuery(this);
		            if(_w_table_firsttd.text()==_w_table_currenttd.text()){
		                _w_table_SpanNum++;
		                _w_table_currenttd.hide(); //remove();
		                _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
		            }else{
		                _w_table_firsttd = jQuery(this);
		                _w_table_SpanNum = 1;
		            }
		        }
		    });
		}
		
		
	});
	
</script>

<script type="text/html" id="list_timeAndSpeed">
<thead>
	<tr>
		<th width='80px'>日期</th>
		<th style='text-align:center;'>公司</th>
		<th style='text-align:center;'>分公司</th>
		<th style='text-align:center;'>线路</th>
		{{if list.statu == 0}}<th style='text-align:center;'>路牌数量</th>{{/if}}
		{{if list.statu == 1}}<th style='text-align:center;'>路牌名</th>{{/if}}
		<th>计划营运时间（小时）</th>
		<th>计划营运车速（公里/小时）</th>
		<th>实际营运时间（小时）</th>
		<th>实际营运车速（公里/小时）</th>
		<th>计划运送时间（小时）</th>
		<th>计划运送车速（公里/小时）</th>
		<th>实际运送时间（小时）</th>
		<th>实际运送车速（公里/小时）</th>
	</tr>
</thead>
<tbody>
	{{each list.dataList as obj i}}
		<tr>
			<td style='vertical-align:middle;'>{{obj.date}}</td>
			<td style='vertical-align:middle;'>{{obj.company}}</td>
			<td style='vertical-align:middle;'>{{obj.subCompany}}</td>
			<td style='vertical-align:middle;'>{{obj.line}}</td>
			{{if list.statu == 0}}<td><a>{{obj.lp}}</a></td>{{/if}}
			{{if list.statu == 1}}<td>{{obj.lp}}</td>{{/if}}
			<td>{{obj.jhyysj}}</td>
			<td>{{obj.jhyycs}}</td>
			<td>{{obj.sjyysj}}</td>
			<td>{{obj.sjyycs}}</td>
			<td>{{obj.jhyssj}}</td>
			<td>{{obj.jhyscs}}</td>
			<td>{{obj.sjyssj}}</td>
			<td>{{obj.sjyscs}}</td>
		</tr>
	{{/each}}
	{{if list.dataList.length > 0}}
		<tr>
			<td style='vertical-align:middle;' colspan='5'>合计平均值</td>
			<td>{{list.jhyysj}}</td>
			<td>{{list.jhyycs}}</td>
			<td>{{list.sjyysj}}</td>
			<td>{{list.sjyycs}}</td>
			<td>{{list.jhyssj}}</td>
			<td>{{list.jhyscs}}</td>
			<td>{{list.sjyssj}}</td>
			<td>{{list.sjyscs}}</td>
		</tr>
	{{/if}}
	{{if list.dataList.length == 0}}
		<tr>
			<td colspan="13"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</tbody>
</script>
<script type="text/html" id="list_timeAndSpeed_1">
<thead>
	<tr>
		<th width='80px'>日期</th>
		<th style='text-align:center;'>公司</th>
		<th style='text-align:center;'>分公司</th>
		<th style='text-align:center;'>线路</th>
		<th style='text-align:center;'>路牌名</th>
		<th>计划营运时间（小时）</th>
		<th>计划营运车速（公里/小时）</th>
		<th>实际营运时间（小时）</th>
		<th>实际营运车速（公里/小时）</th>
		<th>计划运送时间（小时）</th>
		<th>计划运送车速（公里/小时）</th>
		<th>实际运送时间（小时）</th>
		<th>实际运送车速（公里/小时）</th>
	</tr>
</thead>
<tbody>
	{{each list.work as obj i}}
		<tr>
			<td style='vertical-align:middle;'>{{obj.date}}</td>
			<td style='vertical-align:middle;'>{{obj.company}}</td>
			<td style='vertical-align:middle;'>{{obj.subCompany}}</td>
			<td style='vertical-align:middle;'>{{obj.line}}</td>
			<td>{{obj.lp}}</td>
			<td>{{obj.jhyysj}}</td>
			<td>{{obj.jhyycs}}</td>
			<td>{{obj.sjyysj}}</td>
			<td>{{obj.sjyycs}}</td>
			<td>{{obj.jhyssj}}</td>
			<td>{{obj.jhyscs}}</td>
			<td>{{obj.sjyssj}}</td>
			<td>{{obj.sjyscs}}</td>
		</tr>
	{{/each}}
	{{if list.work.length > 0}}
		<tr>
			<td style='vertical-align:middle;' colspan='5'>合计平均值</td>
			<td>{{list.jhyysj}}</td>
			<td>{{list.jhyycs}}</td>
			<td>{{list.sjyysj}}</td>
			<td>{{list.sjyycs}}</td>
			<td>{{list.jhyssj}}</td>
			<td>{{list.jhyscs}}</td>
			<td>{{list.sjyssj}}</td>
			<td>{{list.sjyscs}}</td>
		</tr>
	{{/if}}
	{{if list.work.length == 0}}
		<tr>
			<td colspan="13"><h6 class="muted">没有找到相关数据</h6></td>
		</tr>
	{{/if}}
</tbody>
</script>