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