YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>油耗报表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="../../css/element.css">
		<link rel="stylesheet" href="../../css/style.css">
		<link rel="stylesheet" id="linkSource" href="../../css/base.css">
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/yz/init.js"></script>
		<script>
			checkLogin();
		</script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body{
			height: 100vh;
			overflow-y: auto;
			overflow-x: hidden;
			background-color: #040d32;
		}
		.topBox .icon-cha{
			position: absolute;
			right: 10px;
			bottom: 8px;
			font-size: 20px;
			z-index: 4446;
			transform: rotate(45deg);
		}
		button{
			border-radius: 4px;
			padding: 0 10px;
			height: 32px;
			line-height: 32px;
			font-size: 13px;
			color: #fff;
			background-color: #ff0000;
		}
		._unit{
			font-size: 11px;
		}
		._li{
			padding: 10px;
			background-color:#1b2a46;
			margin: 5px;
			border-radius: 3px;
			color: rgba(255,255,255,0.6);
		}
		.table_fat{
			height: calc(100% - 60px);
			overflow-y: auto;
			font-size: 13px;
		}
		._Sort{
			position: absolute;
			right: -410px;
			width:180px;
			padding: 5px;
			border-radius: 4px;
			color: #8b8b8b;
			list-style: none;
			background-color: #fff;
		}
		._Sort li{
			position: relative;
			font-size: 12px;
			padding: 8px;
			border-bottom: 1px solid #e2e2e2;
		}
		._Sort li.act::after{
			content: "";
			position: absolute;
			top:8px;
			right:14px;
			width: 6px;
			height: 12px;
			transform: rotate(45deg);
			border-right: 2px solid #d60000;
			border-bottom: 2px solid #d60000;
		}
		._Sort li:last-child{
			border: none;
		}
	</style>
	<body>
		<div class="topParen">
			<div class="topBox">
				<div style="margin: 0 45px;">
					<div class="search_">
						<input type="text" name="search" placeholder="船舶名称">
						<i class="iconfont icon-sousuo" style="top: 0;"></i>
					</div>
				</div>
				<i class="iconfont icon-cha" onclick="javascript:top.location.href='./AddReprot.html';"></i>
				<i class="iconfont icon-left" onclick="javascript:history.back(-1);"></i>
			</div>
			<div class="bg-theme-son flex align-center justify-between padding-sm margin-top-xs">
				<div class="flex align-center">
					<i class="iconfont icon-left" style="font-size: 14px;" onclick="changeDate(-1);"></i>
					<span id="_time" class="margin-lr-sm">yyyy年mm月</span>
					<i class="iconfont icon-right" style="font-size: 18px;" onclick="changeDate(1);"></i>
				</div>
				<div style="position: relative;">
					<div class="cl_sort">排序 <span class="iconfont icon-xiaoyuanjiaojiangxu"></span></div>
					<ul class="_Sort">
						<li data-nu="1">上/本月统计</li>
						<li data-nu="2">调入/调出统计统计</li>
						<li data-nu="3">领入统计</li>
						<li data-nu="4">实际耗油量统计</li>
					</ul>
				</div>
			</div>
			<div class="table_fat">
				
			</div>
		</div>
		<script>
			var nowTime = null,nowNum = 0;
			var dataObj = [{
				"id":"12",
				"iboatname":"巴8",
				"endurance":"41.08",
				"date":"2021-05-20 15:23:44",
				"residuenum":"598.50",
				"residueprice":"3494.22",
				"callsnum":"0.00",
				"callsprice":"0.00",
				"transfersnum":"0.00",
				"transfersprice":"0.00",
				"depositnum":"2907.00",
				"depositprice":"15916.81",
				"deposittax":"2069.19",
				"taxrate":"0.115",
				"totalprice":"17986.00",
				"actualnum":"2804.4",
				"unitprice":"5.54",
				"actualprice":"15528.83",
				"busmileage":"0.00",
				"travelmileage":"515.52",
				"allnum":"701.1",
				"allprice":"3882.21",
				"remark":"无"
			}];
			$(document).ready(function(){
				nowTime = getTime(new Date())[0];
				setHtml(dataObj,0);
			})
			function setHtml(_obj,_num){
				nowNum = _num;
				let _str = "";
				if(_obj.length){
					if(_num == 0){
						for(var i=0;i<_obj.length;i++){
							_str += `<div class="_li">
										<div class="br_b flex justify-between padding-bottom-xs text-white">
											<div>${_obj[i].iboatname}</div>
											<div class="text-gray">${_obj[i].date}</div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">航时：${_obj[i].endurance} <span class="_unit">H</span></div>
											<div class="flex-sub">本月数量：${_obj[i].allnum} <span class="_unit">L</span></div>
										</div>
										<div class="flex">
											<div class="flex-sub">本月耗油：${_obj[i].actualnum} <span class="_unit">L</span></div>
											<div class="flex-sub">本月金额：${_obj[i].allprice} <span class="_unit">元</span></div>
										</div>
									</div>`;
						}
					}else if(_num == 1){
						let obj = _obj.sort(function sortNumber(a,b){return b.residuenum - a.residuenum})
						for(var i=0;i<obj.length;i++){
							_str += `<div class="_li">
										<div class="br_b flex justify-between padding-bottom-xs text-white">
											<div>${obj[i].iboatname}</div>
											<div class="text-gray">${obj[i].date}</div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">上月结存数量：${obj[i].residuenum} <span class="_unit">H</span></div>
											<div class="flex-sub">本月结存数量：${obj[i].allnum} <span class="_unit">L</span></div>
										</div>
										<div class="flex">
											<div class="flex-sub">上月结存金额：${obj[i].residueprice} <span class="_unit">L</span></div>
											<div class="flex-sub">本月结存金额：${obj[i].allprice} <span class="_unit">元</span></div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">航时：${obj[i].endurance} <span class="_unit">H</span></div>
										</div>
									</div>`;
						}
					}else if(_num == 2){
						let obj = _obj.sort(function sortNumber(a,b){return b.callsnum - a.callsnum})
						for(var i=0;i<obj.length;i++){
							_str += `<div class="_li">
										<div class="br_b flex justify-between padding-bottom-xs text-white">
											<div>${obj[i].iboatname}</div>
											<div class="text-gray">${obj[i].date}</div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">调出数量：${obj[i].callsnum} <span class="_unit">H</span></div>
											<div class="flex-sub">调出金额：${obj[i].callsprice} <span class="_unit">L</span></div>
										</div>
										<div class="flex">
											<div class="flex-sub">调入数量：${obj[i].transfersnum} <span class="_unit">L</span></div>
											<div class="flex-sub">调入金额：${obj[i].transfersprice} <span class="_unit">元</span></div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">航时：${obj[i].endurance} <span class="_unit">H</span></div>
										</div>
									</div>`;
						}
					}else if(_num == 3){
						let obj = _obj.sort(function sortNumber(a,b){return b.depositnum - a.depositnum})
						for(var i=0;i<obj.length;i++){
							_str += `<div class="_li">
										<div class="br_b flex justify-between padding-bottom-xs text-white">
											<div>${obj[i].iboatname}</div>
											<div class="text-gray">${obj[i].date}</div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">航时：${obj[i].endurance} <span class="_unit">H</span></div>
											<div class="flex-sub">金额合计：${obj[i].totalprice} <span class="_unit">H</span></div>
										</div>
										<div class="flex">
											<div class="flex-sub">数量：${obj[i].depositnum} <span class="_unit">H</span></div>
											<div class="flex-sub">税额：${obj[i].deposittax} <span class="_unit">L</span></div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">不含税金额：${obj[i].depositprice} <span class="_unit">L</span></div>
											<div class="flex-sub">税率：${obj[i].taxrate} <span class="_unit">元</span></div>
										</div>
									</div>`;
						}
					}else if(_num == 4){
						let obj = _obj.sort(function sortNumber(a,b){return b.actualnum - a.actualnum})
						for(var i=0;i<obj.length;i++){
							_str += `<div class="_li">
										<div class="br_b flex justify-between padding-bottom-xs text-white">
											<div>${obj[i].iboatname}</div>
											<div class="text-gray">${obj[i].date}</div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">实际数量：${obj[i].actualnum} <span class="_unit">H</span></div>
											<div class="flex-sub">不含税金额：${obj[i].actualprice} <span class="_unit">L</span></div>
										</div>
										<div class="flex">
											<div class="flex-sub">实际单价：${obj[i].unitprice} <span class="_unit">L</span></div>
											<div class="flex-sub">航行里数：${obj[i].busmileage} <span class="_unit">元</span></div>
										</div>
										<div class="flex" style="margin: 10px 0 5px;">
											<div class="flex-sub">航时：${obj[i].endurance} <span class="_unit">H</span></div>
										</div>
									</div>`;
						}
					}
				}else{
					_str += '<div class="text-center padding-lg">暂无数据</div>';
				}
				$(".table_fat").html(_str)
			}
			$(document).on("click","._li",function(){
				top.location.href="./ReprotDet.html";
			})
			$(".search_ [name='search']").on("input","",function(){
				let _newArr = [];
				let _key = $(this).val();
				for(var i=0;i<dataObj.length;i++){
					if(dataObj[i].iboatname.indexOf(_key) != -1){
						_newArr.push(dataObj[i]);
					}
				}
				setHtml(_newArr,nowNum);
			})
			function changeDate(num){
				let _day = $("#_time").text();
				if(_day.indexOf("yyyy") != -1){
					let _acb = nowTime.split("-");
					$("#_time").text(_acb[0] +"年"+ _acb[1] +"月");
				}else{
					changeMon(num,_day.replace("年","-").replace("月","-"));
				}
			}
			function changeMon(d,time){
				var arr = time.split('-');
				var year = arr[0]; 
				var month = arr[1];
				var year2 = year;
				var month2 = parseInt(month) + d;
				if (d == 1) {
					if (month2 == 13) {
						year2 = parseInt(year2) + 1;
						month2 = 1;
					}
				} else {
					if (month2 == 0) {
						year2 = parseInt(year2) - 1;
						month2 = 12;
					}
				}
				if (month2 < 10) {
					month2 = '0' + month2;
				}
				if ((year2 + '-' + month2) > nowTime) {
					ShowLoading("不能再往下翻啦!",1);
					return;
				} else {
					$("#_time").text(year2 +"年"+ month2 +"月");
				}
			}
			$(".cl_sort").on("click","",function(){
				if($(".cl_sort .iconfont").hasClass("icon-xiaoyuanjiaojiangxu")){
					$("._Sort").css({"right":"10px","transition":"right 0.3s linear"});
					$(".cl_sort .iconfont").removeClass("icon-xiaoyuanjiaojiangxu").addClass("icon-xiaoyuanjiaoshengxu");
				}else{
					$(".cl_sort .iconfont").removeClass("icon-xiaoyuanjiaoshengxu").addClass("icon-xiaoyuanjiaojiangxu");
					$("._Sort").css({"right":"-410px","transition":"right 0.3s linear"});
				}
			})
			$(document).on("click","._Sort li",function(){
				setHtml(dataObj,parseInt($(this).data("nu")));
				$(".cl_sort .iconfont").removeClass("icon-xiaoyuanjiaoshengxu").addClass("icon-xiaoyuanjiaojiangxu");
				$("._Sort").css({"right":"-410px","transition":"right 0.3s linear"});
				$(this).addClass("act").siblings().removeClass("act");
			})
		</script>
	</body>
</html>