车辆派遣管理系统-15-单车查询

今日完成任务:单车查询功能及页面设计

核心代码:见下列插入的代码

遇到的问题:无

解决的方法:无

 

功能模块:单车查询

需要角色:任意

数据加载:车辆信息,加载月结算对应的派车单数据列表

数据验证:非空验证

导出报表:excel文件

业务描述:

按车牌号码统计该车所有派车单与月结算单信息,并生成报表

点击左侧“查询统计”下的“单车查询”菜单,在右侧主题区域加载单车查询子页面,选择不同的车牌号码查询不同车辆结算信息,点击结算信息,自动加载对应的派车单信息在下方,再次点击可以隐藏对应的派车单信息,查询后可以点击“生成报表”生成查询的车辆的月结算和对应的派车单的excel信息。

视频演示地址:https://www.bilibili.com/video/BV1Kf4y1d7Uj/

图文演示:

单车查询月结算信息

加载月结算信息相关的派车单信息和生成报表

单车查询子页面的html代码:

<table id="table0" width='100%' cellspacing="0" border='0'>
	<tr align="left">
		<td style="height:32px;">
			<div class="cxtjDiv">
				<input type="text" name="cxtj" value="" readonly="readonly"/>
				<ul>
				</ul>
			</div>
			<b id="tjtb"><img src="img/down.png" width="10px"/></b>
			<span style="margin-top:4px;margin-bottom:4px;margin-left:10px;">
				<button onclick="cx()">查 询 派 车 单 和 月 结 算 信 息</button>
			</span>
			<span style="margin-top:4px;margin-bottom:4px;margin-left:10px;">
				<button onclick="scbb()">生 成 报 表</button>
			</span>
			<span style="margin-left:20px;">[点击结算行信息可查看对应的派车单信息]</span>
		</td>
	</tr>
</table>
<table  class="table1" width='100%' cellspacing="0" border='0'>
	<tr align="left">
		<td width="5%">编号</td>
		<td width="9%">结算日期</td>
		<td width="9%">车牌号码</td>
		<td width="9%">结算年份</td>
		<td width="8%">结算月份</td>
		<td width="9%">月公里数</td>
		<td width="9%">月油费</td>
		<td width="8%">修理费</td>
		<td width="9%">总营业额</td>
		<td width="9%">毛利润</td>
	</tr>
</table>
<table class="list" width='100%' cellspacing="0">
	
</table>

单车查询子页面的js代码:

var bj=0;
function loadPage(rows,page,cphm,nian,yue){
	$(".list").html(' ');
	$.ajax({
		url:'yjsList',
		type:'post',
		data:'rows='+rows+'&row='+((page-1)*rows)+'&nian='+nian+'&yue='+yue+'&cphm='+cphm,
		async:false,
		success:function(data){
			var arr = eval(data);
			if(arr.length==0){
				$("#message").html("暂无月结算信息!");
    			var left = $("#message").width()/2;
				$("#message").css("left",$(window).width()/2-left);
				$("#message").css("top",270);
    			$("#message").fadeIn(1000);
    			messageOut();
				return;
			}
			var row="";
			$.each(arr,function(i,o){
				row +="<tr>";
				row +="<td width='5%'>"+o.jsbh+"</td>";
				row +="<td width='9%'>"+o.jsrq+"</td>";
				row +="<td width='9%'>"+o.cphm+"</td>";
				row +="<td width='9%'>"+o.jsnf+"年</td>";
				row +="<td width='8%'>"+o.jsyf+"月</td>";
				row +="<td width='9%'>"+o.zgls+"(km)</td>";
				row +="<td width='9%'>"+o.yf+".00</td>";
				row +="<td width='8%'>"+o.xlf+".00</td>";
				row +="<td width='9%'>"+o.zyye+".00</td>";
				row +="<td width='9%'>"+o.mlr+".00</td>";
				row +="</tr>";
				$(".list").append(row);
				//查询此车,此月的派车单信息
				var jsyf='';
				if(o.jsyf.length==1){
					jsyf='0'+o.jsyf;
				}else{
					jsyf=o.jsyf;
				}
				$.ajax({
					url:'yjsPcdList',
					type:'post',
					data:'cphm='+o.cphm+'&jsnf='+o.jsnf+'&jsyf='+jsyf,
					async:false,
					success:function(data2){
						var arr2 = eval(data2);
						var table="<table border='0' cellspacing='0' cellpadding='0' style='display:none;position:absolute;z-index:1;'>";
						table+="<tr style='outline:none;background-color:#eef'>";
						table +="<td width='6%'>&nbsp;</td>";
						table +="<td width='12%'>派车单号</td>";
						table +="<td width='8%'>登记日期</td>";
						table +="<td width='8%'>出车日期</td>";
						table +="<td width='7%'>车牌号</td>";
						table +="<td width='5%'>业务员</td>";
						table +="<td width='5%'>联系人</td>";
						table +="<td width='8%'>客户电话</td>";
						table +="<td width='5%'>租车费</td>";
						table +="<td width='5%'>实收</td>";
						table +="<td width='5%'>油费</td>";
						table +="<td width='5%'>过桥费</td>";
						table +="<td width='5%'>停车费</td>";
						table +="<td width='5%'>车补贴</td>";
						table +="<td width=''>行驶公里</td>";
						table+="</tr>";
						$.each(arr2,function(i,o2){
							table +="<tr  style='outline:none;background-color:#fef;'>";
							if(i==0){
								table +="<td style='font-size:14px;color:#069;' rowspan="+arr2.length+">&nbsp&nbsp派<br>&nbsp&nbsp车<br>&nbsp&nbsp单<br>&nbsp&nbsp信<br>&nbsp&nbsp息</td>";
							}
							table +="<td width='12%'>"+o2.pcdh+"</td>";
							table +="<td width='8%'>"+o2.djrq+"</td>";
							table +="<td width='8%'>"+o2.ccrq+"</td>";
							table +="<td width='7%'>"+o2.cphm+"</td>";
							table +="<td width='5%'>"+o2.ywyxm+"</td>";
							table +="<td width='5%'>"+o2.lxr+"</td>";
							table +="<td width='8%'>"+o2.lxdh+"</td>";
							table +="<td width='5%'>"+o2.zcf+".00</td>";
							table +="<td width='5%'>"+o2.sjsf+".00</td>";
							table +="<td width='5%'>"+o2.yf+".00</td>";
							table +="<td width='5%'>"+o2.gqf+".00</td>";
							table +="<td width='5%'>"+o2.tcf+".00</td>";
							table +="<td width='5%'>"+o2.cbt+".00</td>";
							table +="<td width=''>"+o2.xsgls+"</td>";
							table +="</tr>";
						});
						table+="</table>";
						$(".list").append(table);
					}
				});
			});
		}
	});
	$(".list>tr").click(function(){
		$(this).next().slideToggle();
	});
}
$(function(){
	$.ajax({
		url:'pcdtjCphm',
		async:false,
		success:function(data){
			var arr = eval(data);
			var lis="";
			$.each(arr,function(i,o){
				if(i==0){
					$(".cxtjDiv input[name='cxtj']").val(o.cphm);
				}
				lis+="<li>"+o.cphm+"</li>";
			});
			$(".cxtjDiv>ul").html(lis);
			$(".cxtjDiv input[name='cxtj'] , #tjtb").click(function(){
				$(".cxtjDiv>ul").slideDown();
				$("#tjtb>img").prop("src","img/up.png");
				bj=1;
			});
			$(document).mousedown(function(){
				if(bj==1){
					var ulLeft = $(".cxtjDiv ul").offset().left;
					var ulTop = $(".cxtjDiv ul").offset().top;
					if(event.x>=ulLeft && event.x<=ulLeft+180 &&event.y>=ulTop&&event.y<=ulTop+116){
					}else{
						$(".cxtjDiv ul").slideUp();
						$("#tjtb img").attr("src","img/down.png"); 
						bj=0;
					}
				}
			});
			$(".cxtjDiv>ul>li").click(function(){
				var cxtj = $(this).html();
				$(".cxtjDiv input[name='cxtj']").val(cxtj);
				$("#tjtb img").attr("src","img/down.png"); 
				$(".cxtjDiv input[name='cxtj']").css("padding-left","15px").css("color","#069");
				bj=0;
				$(".cxtjDiv ul").slideUp();
			});
		}
	});
});
function cx(){
	var cphm = $(".cxtjDiv input[name='cxtj']").val();
	loadPage(10,1,cphm,'','');
	sc=1;
}
var sc=0;
function scbb(){
	if(sc==0){
		$("#message").html("请查询后再进行报表导出!");
  			var left = $("#message").width()/2;
		$("#message").css("left",$(window).width()/2-left);
		$("#message").css("top",270);
  			$("#message").fadeIn(1000);
  			messageOut();
  			return;
	}
	var cphm = $(".cxtjDiv input[name='cxtj']").val();
	var nian='';
	var yue='';
	$.ajax({
		url:'yjsList2',
		type:'post',
		data:'rows=10&row=1&nian='+nian+'&yue='+yue+'&cphm='+cphm,
		async:false,
		success:function(data){
			var arrData = eval(data);
			if(arrData.length==0){
				$("#message").html("暂无月结算信息!");
    			var left = $("#message").width()/2;
				$("#message").css("left",$(window).width()/2-left);
				$("#message").css("top",270);
    			$("#message").fadeIn(1000);
    			messageOut();
				return;
			}
	        var excel = '<table>';
			var ShowLabel = [{ "value": "结算编号" },
				{ "value": "结算日期" }, 
				{ "value": "车牌号码" }, 
				{ "value": "结算年份" }, 
				{ "value": "结算月份" }, 
				{ "value": "月公里数" }, 
				{ "value": "月油费" },
				{ "value": "修理费" },
				{ "value": "轮胎费" },
				{ "value": "过桥费" },
				{ "value": "停车费" },
				{ "value": "总营业额" },
				{ "value": "毛利润" }
				];
	        var row = "<tr>";
	        for (var i = 0, l = ShowLabel.length; i < l; i++) {
	            row += "<td style=\"color:blue\">" + ShowLabel[i].value + '</td>';
	        }
	        row+="</tr>";
	        excel += row;
	        for (var i = 0; i < arrData.length; i++) {
	            var row = "<tr>";
                row += '<td>' + arrData[i].jsbh + '</td>';
                row += '<td>' + arrData[i].jsrq + '</td>';
                row += '<td>' + arrData[i].cphm + '</td>';
                row += '<td>' + arrData[i].jsnf + '</td>';
                row += '<td>' + arrData[i].jsyf + '</td>';
                row += '<td>' + arrData[i].zgls + '</td>';
                row += '<td>' + arrData[i].yf + '</td>';
                row += '<td>' + arrData[i].xlf + '</td>';
                row += '<td>' + arrData[i].ltf + '</td>';
                row += '<td>' + arrData[i].gqf + '</td>';
                row += '<td>' + arrData[i].tcf + '</td>';
                row += '<td>' + arrData[i].zyye + '</td>';
                row += '<td>' + arrData[i].mlr + '</td>';
	            excel += row + "</tr>";
				//查询此车,此月的派车单信息
				$.ajax({
					url:'yjsPcdList',
					type:'post',
					data:'cphm='+arrData[i].cphm+'&jsnf='+arrData[i].jsnf+'&jsyf='+arrData[i].jsyf,
					async:false,
					success:function(data2){
						var arrData2 = eval(data2);
				        for (var i2 = 0; i2 < arrData2.length; i2++) {
				            var row = "<tr>";
			                row += '<td >派车单信息</td>';
			                row += '<td style="mso-number-format:\\@;">' + arrData2[i2].pcdh + '</td>';
			                row += '<td>' + arrData2[i2].djrq + '</td>';
			                row += '<td>' + arrData2[i2].ywybh + '</td>';
			                row += '<td>' + arrData2[i2].ywyxm + '</td>';
			                row += '<td>' + arrData2[i2].khbh + '</td>';
			                row += '<td>' + arrData2[i2].ycdw + '</td>';
			                row += '<td>' + arrData2[i2].lxr + '</td>';
			                row += '<td>' + arrData2[i2].lxdh + '</td>';
			                row += '<td>' + arrData2[i2].cphm + '</td>';
			                row += '<td>' + arrData2[i2].jsybh + '</td>';
			                row += '<td>' + arrData2[i2].jsyxm + '</td>';
			                row += '<td>' + arrData2[i2].ccrq + '</td>';
			                row += '<td>' + arrData2[i2].ccsj + '</td>';
			                row += '<td>' + arrData2[i2].zffs + '</td>';
			                row += '<td>' + arrData2[i2].mddd + '</td>';
			                row += '<td>' + arrData2[i2].zcf + '</td>';
			                row += '<td>' + arrData2[i2].sjsf + '</td>';
			                row += '<td>' + arrData2[i2].zt + '</td>';
			                row += '<td>' + arrData2[i2].sh + '</td>';
			                row += '<td>' + arrData2[i2].yf + '</td>';
			                row += '<td>' + arrData2[i2].gqf + '</td>';
			                row += '<td>' + arrData2[i2].xlf + '</td>';
			                row += '<td>' + arrData2[i2].tcf + '</td>';
			                row += '<td>' + arrData2[i2].cbt + '</td>';
			                row += '<td>' + arrData2[i2].xsgls + '</td>';
			                row += '<td>' + arrData2[i2].bz + '</td>';
				            excel += row + "</tr>";
				        }
	        		}
				});
		     }
	        excel += "</table>";
	        var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
	        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
	        excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
	        excelFile += '; charset=UTF-8">';
	        excelFile += "<head>";
	        excelFile += "<!--[if gte mso 9]>";
	        excelFile += "<xml>";
	        excelFile += "<x:ExcelWorkbook>";
	        excelFile += "<x:ExcelWorksheets>";
	        excelFile += "<x:ExcelWorksheet>";
	        excelFile += "<x:Name>";
	        excelFile += "{worksheet}";
	        excelFile += "</x:Name>";
	        excelFile += "<x:WorksheetOptions>";
	        excelFile += "<x:DisplayGridlines/>";
	        excelFile += "</x:WorksheetOptions>";
	        excelFile += "</x:ExcelWorksheet>";
	        excelFile += "</x:ExcelWorksheets>";
	        excelFile += "</x:ExcelWorkbook>";
	        excelFile += "</xml>";
	        excelFile += "<![endif]-->";
	        excelFile += "</head>";
	        excelFile += "<body>";
	        excelFile += excel;
	        excelFile += "</body>";
	        excelFile += "</html>";
	        var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
	        var link = document.createElement("a");
	        link.href = uri;
	        link.style = "visibility:hidden";
	        link.download = "单车查询报表.xls";
	        document.body.appendChild(link);
	        link.click();
	        document.body.removeChild(link);
		}
	});
}

单车查询子页面的css代码:

.xg{
	color:#fff;
	border-radius:5px;
	border:none;
	line-height:25px;
	width:70px;
	background-color:#01AAED;
	outline:none;
	cursor:pointer;
}
#table0{
	background-color:#01AAED;
	color:#fff;
	font-size:12px;
	padding-left:45px;
	font-weight:bolder;
	
}
#table0 span{
	float:left;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:5px;
	line-height:20px;
}
#table0 button{
	outline:none;
	border:none;
	padding:3px 15px;
	background-color:#fff;
	color:#069;
	cursor:pointer;
	margin-left:15px;
	box-shadow:2px 2px 2px #666;
}
#table0 button:hover{
	color:#01AAED;
}
.table1{
	background-color:#eef;
	line-height:41px;
	font-size:12px;
	padding-left:25px;
	font-weight:bolder;
	color:#666;
}
.table1 tr td{
	padding-left:10px;
}
.list{
	font-size:12px;
	padding-left:25px;
	margin-top:15px;
	color:#666;
}
.list tr{
	background-color:#fff;
	height:50px;
	outline:3px solid #def;
}
.list>tr:hover{
	background-color:#aef;
}
.list tr td{
	padding-left:10px;
}
.list1{
	font-size:12px;
	margin-top:15px;
	color:#666;
}
.pcddjForm input[type='text']{
	height:30px;
	color:#666;
}
.pcddjForm input[type='number']{
	height:30px;
}
.cxtjDiv{
	float:left;
	overflow: auto;
	box-shadow:2px 2px 2px #666;
}
.cxtjDiv ul{
	display:none;
	list-style:none;
	outline:none;
	position:absolute;
	background-color:#fff;
	margin-top:5px;
	width:128px;
	border:1px solid #eee;
	padding-bottom:10px;
	box-shadow:2px 2px 2px #666;
	height:250px;
	overflow:scroll;
	z-index:9;
}
.cxtjDiv ul li{
	padding-left:15px;
	line-height:25px;
	border-bottom:1px dotted #eee;
	cursor:pointer;
	color:#777;
}
.cxtjDiv ul li:hover{
	background-color:#01AAED;
	color:#fff;
}
.cxtjDiv>input{
	padding-left:15px;
	line-height:22px;
	margin-top:4px;
	width:130px;
	border:none;
	outline:none;
	color:#777;
	font-size:8px;
	font-family:'宋体';
	cursor:pointer;
}
#tjtb{
	float:left;
	margin-left:-18px;
	display:block;
	width:16px;
	height:16px;
	color:red;
	margin-top:7px;
	padding-top:6px;
	cursor:pointer;
}
#table0 input[type='date']{
	color:#069;
	border:none;
	outline:none;
	height:20px;
	
}
.list table{
	width:1012px;
	font-size:9px;
}
.list table tr{
	height:30px;
}

 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页