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>
|