YQ-August
/
oldRuico


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
							<!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">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<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="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<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;
		}
		body {
			height: 100vh;
			background-color: #103151;
		}
		div,button{
			box-sizing: border-box;
		}
		.cu-btn{
			display: none;
		}
		.cu-btn button{
			padding:3px 10px;
			border-radius:3px;
			margin-right: 10px;
			color: #fff;
		}
		._li_box{
			border-radius: 4px;
			border: 1px solid rgba(125,125,125,0.4);
		}
		._li_box>div{
			display: flex;
			align-items: center;
			font-size: 15px;
			color: #fff;
			border-bottom: 1px solid rgba(125,125,125,0.4);
		}
		._li_box>div>div:first-child{
			width: 25%;
			padding:0 6px;
		}
		._li_box>div>div:last-child{
			width: 75%;
			color:rgba(255,255,255,0.7);
			border-left: 1px solid rgba(125,125,125,0.4);
		}
		._li_box ._item{
			width: 100px;
			font-size: 13px;
			padding: 10px 0;
			text-align: center;
			border-right: 1px solid rgba(125,125,125,0.4);
		}
		._li_box ._item+div{
			padding: 10px;
			width:calc(100% - 100px);
		}
		._li_box input{
			width: 100%;
			color: rgba(255, 255, 255, 0.5);
		}
		._li_box input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
		  color: rgba(255, 255, 255, 0.5);
		}
		textarea{
			width: 100%;
			height:60px;
			color: rgba(255, 255, 255, 0.5);
			outline: none;
			padding: 5px;
			border: none;
			background-color: transparent;
		}
		img{
			width: 100px;
		}
		._upload #imgFile{
			position: absolute;
			left: 0;
			width: 17px;
			height: 17px;
			opacity: 0;
			z-index: 1444;
		}
	</style>
	<body>
		<div class="topParen">
			<div class="topBox">
				<i class="iconfont icon-left" onclick="javascript:history.back(-1);"></i>
				<div>油耗详情</div>
			</div>
			<div class="li_box" style="margin: 8px;">
				<div class="flex justify-between padding-bottom-sm">
					<div>
						<div class="cu-btn">
							<button type="button" class="bg-blue">保存</button>
							<button type="button" class="bg-green">取消</button>
						</div>
					</div>
					<div>
						<i class="iconfont icon-qianbi text-blue" style="font-size: 22px;margin-right: 10px;"></i>
						<i class="iconfont icon-shanchu text-red" style="font-size: 20px;"></i>
					</div>
				</div>
				<div class="_li_box">
					<div>
						<div>船舶名称</div>
						<div class="padding-sm">
							<input name="iboatname" type="text"/>
						</div>
					</div>
					<div>
						<div>航行时间</div>   
						<div class="padding-sm">
							<input name="endurance" type="text"/>
						</div>
					</div>
					<div>
						<div>录入日期</div>
						<div class="padding-sm">
							<input id="date1" name="date" type="text"/>
						</div>
					</div>
					<div>
						<div>专票油上月结存</div>
						<div>
							<div class="flex br_b">
								<div class="_item">上月数量</div>
								<div>
									<input name="residuenum" type="text"/>
								</div>
							</div>
							<div class="flex">
								<div class="_item">不含税金额</div>
								<div>
									<input name="residueprice" type="text"/>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>本月柴油(调出-/调入+)</div>
						<div>
							<div class="flex br_b">
								<div class="_item">调入数量</div>
								<div>
									<input name="callsnum" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">不含税金额</div>
								<div>
									<input name="callsprice" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">调入数量</div>
								<div>
									<input name="transfersnum" type="text"/>
								</div>
							</div>
							<div class="flex">
								<div class="_item">不含税金额</div>
								<div>
									<input name="transfersprice" type="text"/>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>本月领入</div>
						<div>
							<div class="flex br_b">
								<div class="_item">本月数量</div>
								<div>
									<input name="depositnum" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">不含税金额</div>
								<div>
									<input name="depositprice" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">税额</div>
								<div>
									<input name="deposittax" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">税率</div>
								<div>
									<input name="taxrate" type="text"/>
								</div>
							</div>
							<div class="flex">
								<div class="_item">金额合计</div>
								<div>
									<input name="totalprice" type="text"/>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>本月实际耗油量</div>
						<div>
							<div class="flex br_b">
								<div class="_item">实际数量</div>
								<div>
									<input name="actualnum" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">实际单价</div>
								<div>
									<input name="unitprice" type="text"/>
								</div>
							</div>
							<div class="flex br_b">
								<div class="_item">不含税金额</div>
								<div>
									<input name="actualprice" type="text"/>
								</div>
							</div>
							<div class="flex">
								<div class="_item">航行里程</div>
								<div>
									<input name="busmileage" type="text"/>
								</div>
							</div>
						</div>
					</div>
					<div>
						<div>本月结存</div>
						<div>
							<div class="flex br_b">
								<div class="_item">本月数量</div>
								<div>
									<input name="allnum" type="text"/>
								</div>
							</div>
							<div class="flex">
								<div class="_item">不含税金额</div>
								<div>
									<input name="allprice" type="text"/>
								</div>
							</div>
						</div>
					</div>
					<div style="align-items:flex-start;">
						<div>账单图片</div>
						<div class="flex justify-between padding-sm">
							<img src="" alt="">
							<div class="_upload" style="position: relative;">
								<i class="iconfont icon-tupian"></i>
								<input type="file" id="imgFile"/>
							</div>
						</div> 
					</div>
					<div style="align-items:flex-start;border-bottom:none">
						<div>备注</div>
						<div class="padding-xs">
							<textarea name="remark" placeholder="请填写备注"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var dataStr = {
			"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",
			"allnum":"701.1",
			"allprice":"3882.21",
			"remark":"无",
			"receipt":"../../imgs/videobg.png"
		};
		layui.use(['layer', 'form','laydate'], function(){
			var layer = layui.layer,
				laydate = layui.laydate;
				$ = layui.jquery;
			laydate.render({
				elem: '#date1',
				type: 'datetime',
				trigger: 'click',
				done: function(value) {
					console.log(value)
				}
			});
		})
		$(document).ready(function(){
			init();
		})
		function setVal(){
			for(var key in dataStr){
				$("input[name='"+key+"']").val(dataStr[key]);
			}
			$("textarea").text(dataStr["remark"]);
			$("img").attr("src",dataStr["receipt"]);
		}
		$(".iconfont.icon-qianbi").on("click","",function(){
			$(".cu-btn").css("display","block");
			$("._upload").css("display","block");
			$("input").attr("disabled",false);
			$("textarea").attr("disabled",false);
			$("input[name='iboatname']").focus();
		})
		$(".iconfont.icon-shanchu").on("click","",function(){
			yzkj.open({
				title: ["温馨提示","color:#000"],
				area: ["300px", "auto"],
				id: 'layerDemo6',
				content: `<div class="open_cont"><div class="text-center">是否删除该条数据?</div></div>`,
				btn:["删除","取消"],
				share:0.5,
				yes:function(){
					javascript:history.back(-1);
				}
			})
		})
		$(".cu-btn .bg-green").on("click","",function(){
			init();
		})
		function init(){
			$("input[type='text']").attr("disabled",true);
			$("textarea").attr("disabled",true);
			$("._upload").css("display","none");
			$(".cu-btn").css("display","none");
			setVal();
		}
		$('#imgFile').change(function(e) {
			var files = e.target.files;
			for (var i = 0; i < files.length; i++) {
				var reader = new FileReader();
				fileStr = files[i];
				reader.readAsDataURL(files[i]);
				reader.onload = function (e) {
					$("img").attr("src",e.target.result);
				}
			} 
		})
	</script>
</html>