| | |
| | | margin-top: -75px; |
| | | margin-right: 5px; |
| | | color: #09d1ea; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .clock #Date { |
| | | text-align: center; |
| | | text-shadow: 0 0 0px #00c6ff; |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .clock ul { |
| | | width: 450px; |
| | | margin: 0 auto; |
| | |
| | | margin-left: 15px; |
| | | position: relative; |
| | | } |
| | | |
| | | |
| | | .clock ul li { |
| | | display: inline; |
| | | font-size: 24px; |
| | |
| | | font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif; |
| | | text-shadow: 0 0 0px #00c6ff; |
| | | } |
| | | |
| | | |
| | | body { |
| | | padding-left: 50px; |
| | | padding-right: 50px; |
| | | } |
| | | |
| | | |
| | | .title { |
| | | |
| | | |
| | | font-size: 44px; |
| | | font-family: PingFangSC; |
| | | font-weight: 500; |
| | |
| | | background: url(img/img_little_new.png) center no-repeat; |
| | | margin-bottom: 30px; |
| | | } |
| | | |
| | | |
| | | .flex { |
| | | display: flex; |
| | | display: -webkit-flex; |
| | |
| | | flex-direction: row; |
| | | flex-wrap: wrap; |
| | | } |
| | | |
| | | |
| | | .flex .flex_item { |
| | | width: 16%; |
| | | height: 180px; |
| | |
| | | margin-bottom: 10px; |
| | | background: url(img/3-3.png) #02040d no-repeat center top; |
| | | position: relative; |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .flex span { |
| | | position: absolute; |
| | | top: 50%; |
| | | |
| | | |
| | | margin-top: 0; |
| | | font-size: 23px; |
| | | font-family: PingFangSC; |
| | |
| | | width: 100%; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | .flex p { |
| | | |
| | | |
| | | margin-bottom: 5px; |
| | | color: #a5a5a7; |
| | | position: absolute; |
| | |
| | | font-weight: 400; |
| | | width: 100% |
| | | } |
| | | |
| | | |
| | | .title_o { |
| | | margin-top: 15px; |
| | | margin-bottom: 10px; |
| | |
| | | font-weight: 400; |
| | | color: rgba(9, 209, 234, 1); |
| | | } |
| | | |
| | | |
| | | .flex_t li { |
| | | width: 100%; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .content_name { |
| | | font-size: 16px; |
| | | font-family: PingFangSC; |
| | |
| | | color: rgba(255, 255, 255, 1); |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | |
| | | .content_style { |
| | | display: inline-block; |
| | | vertical-align: top; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .w44 { |
| | | width: 44%; |
| | | margin-right: 15px; |
| | | padding: 10px 13px 5px 13px; |
| | | } |
| | | |
| | | |
| | | .w58 { |
| | | width: 53.5%; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .bg_color { |
| | | background: #0C0C18; |
| | | } |
| | | |
| | | |
| | | .icon_style { |
| | | display: inline-block; |
| | | width: 40px; |
| | | height: 40px; |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | |
| | | .icon_n { |
| | | background: url(img/icon_n.png) no-repeat center; |
| | | } |
| | | |
| | | |
| | | .icon_r { |
| | | background: url(img/icon_r.png) no-repeat center; |
| | | } |
| | | |
| | | |
| | | .icon_c { |
| | | background: url(img/icon_c.png) no-repeat center; |
| | | } |
| | | |
| | | |
| | | .content { |
| | | display: inline-block; |
| | | width: 49.3%; |
| | |
| | | margin-right: 20px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | |
| | | .content:nth-child(2n) { |
| | | margin-right: 0; |
| | | } |
| | | |
| | | |
| | | .content_style span { |
| | | font-size: 14px; |
| | | font-family: PingFangSC; |
| | | font-weight: 400; |
| | | color: rgba(255, 255, 255, 1); |
| | | } |
| | | |
| | | |
| | | .mr { |
| | | margin-right: 35px; |
| | | } |
| | | |
| | | |
| | | .text_s { |
| | | vertical-align: 12px; |
| | | } |
| | | |
| | | |
| | | .content_mod { |
| | | width: 80px; |
| | | height: 60px; |
| | | border-radius: 2px; |
| | | display: inline-block; |
| | | |
| | | |
| | | margin-right: 10px; |
| | | vertical-align: top; |
| | | } |
| | | |
| | | |
| | | .content_mod:nth-child(5n) { |
| | | margin-right: 0px; |
| | | } |
| | | |
| | | |
| | | .content_mod_bg_true { |
| | | background: url(img/new_icon_true.png) no-repeat center; |
| | | border: 1px solid rgba(55, 184, 200, 1); |
| | | } |
| | | |
| | | |
| | | .content_mod_bg_tf { |
| | | background: url(img/new_icon_tf.png) no-repeat center; |
| | | border: 1px solid rgba(124, 87, 255, 1); |
| | | } |
| | | |
| | | |
| | | .content_mod_bg_false { |
| | | background: url(img/new_icon_false.png) no-repeat center; |
| | | } |
| | | |
| | | |
| | | .mt12 { |
| | | margin: 12px 0 0 0; |
| | | } |
| | | |
| | | |
| | | .mb9 { |
| | | margin: 0 0 7px 0; |
| | | } |
| | | |
| | | |
| | | .flex_t { |
| | | height: 680px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | .col-sm-12 { |
| | | position: relative; |
| | | min-height: 1px; |
| | |
| | | var Warehouse = '160'; //毛坯仓库 |
| | | var interval0;//计时器 |
| | | $(document).ready(function () { |
| | | |
| | | |
| | | // 创建两个变量,一个数组中的月和日的名称 |
| | | var monthNames = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"]; |
| | | setInterval(function () { |
| | |
| | | var ss = date1.getSeconds(); |
| | | var dayNames = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); |
| | | var Stamp = new Date(); |
| | | |
| | | |
| | | |
| | | |
| | | $('#Date').html(year + " 年" + " " + monthNames[month] + ' ' + day + " 日 " + ' ' + dayNames[Stamp.getDay()]); |
| | | $("#hours").html((hh < 10 ? ("0" + hh) : hh)); |
| | | $("#min").html((mm < 10 ? ("0" + mm) : mm)); |
| | | $("#sec").html((ss < 10 ? ("0" + ss) : ss)); |
| | | |
| | | |
| | | }, 1000); |
| | | |
| | | |
| | | }); |
| | | $(function () { |
| | | TopMap(); |
| | | DataGrid(); |
| | | // 定时器 |
| | | interval0 = setInterval(function () { |
| | | DataGrid(); |
| | | }, 120000); |
| | | }) |
| | | function DataGrid() { |
| | | var data = { |
| | | "dt": |
| | | [ |
| | | { |
| | | "STOCKQTY": "10", |
| | | "TODAYINQTY": "10", |
| | | "TODAYOUTQTY": "10", |
| | | "THISMONTHINQTY": "10", |
| | | "THISMONTHOUTQTY": "10", |
| | | "TURNOVERDAY": "10" |
| | | } |
| | | ], |
| | | "dt1": |
| | | [ |
| | | { |
| | | "PartName": "#螺纹001", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | "PartName": "#螺纹002", |
| | | "StockQty": "10", |
| | | "InRoomQty": "10", |
| | | "OutRoomQty": "10", |
| | | "list": [ |
| | | { |
| | | "LocationStatus": "Y", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "N", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | }, |
| | | { |
| | | "LocationStatus": "", |
| | | "LocationCode": "#10", |
| | | "LocationQty": "10" |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | } |
| | | console.info(data) |
| | | $("#stockqty").html(data.dt[0].STOCKQTY); |
| | | $("#todayinqty").html(data.dt[0].TODAYINQTY); |
| | | $("#todayoutqty").html(data.dt[0].TODAYOUTQTY); |
| | | $("#thismonthinqty").html(data.dt[0].THISMONTHINQTY); |
| | | $("#thismonthoutqty").html(data.dt[0].THISMONTHOUTQTY); |
| | | $("#turnoverday").html(data.dt[0].TURNOVERDAY); |
| | | $(".hd").html(""); |
| | | var StepHtml = ""; |
| | | StepHtml += "<ul>"; |
| | | var result = []; |
| | | for (var i = 0; i < data.dt1.length; i += 2) { |
| | | result.push(data.dt1.slice(i, i + 2)); |
| | | } |
| | | for (var j = 0; j < result.length; j++) { |
| | | StepHtml += "<li>"; |
| | | for (var m = 0; m < result[j].length; m++) { |
| | | StepHtml += "<div class='content'>"; |
| | | StepHtml += "<div class='content_name'>" + result[j][m].PartName + "</div>"; |
| | | StepHtml += "<div class='content_style bg_color w44'>"; |
| | | StepHtml += "<span class='mr'><i class='icon_style icon_n'></i><span class='text_s'>" + result[j][m].StockQty + "</span></span>"; |
| | | StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InRoomQty + "</span></span>"; |
| | | StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutRoomQty + "</span></span>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "<div class='content_style w58'>"; |
| | | for (var k = 0; k < result[j][m].list.length; k++) { |
| | | if (result[j][m].list[k].LocationStatus == "Y") { |
| | | StepHtml += "<div class='content_mod content_mod_bg_true'>"; |
| | | StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>"; |
| | | StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>"; |
| | | StepHtml += "</div>"; |
| | | } |
| | | else if (result[j][m].list[k].LocationStatus == "N") { |
| | | StepHtml += "<div class='content_mod content_mod_bg_tf'>"; |
| | | StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>"; |
| | | StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>"; |
| | | StepHtml += "</div>"; |
| | | } |
| | | else { |
| | | StepHtml += "<div class='content_mod content_mod_bg_false'>"; |
| | | StepHtml += " </div>"; |
| | | } |
| | | } |
| | | StepHtml += "</div>"; |
| | | StepHtml += "</div>"; |
| | | function TopMap(){ |
| | | $.ajax({ |
| | | url: "http://localhost:12298/api/loaddata/HouseTopData", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | success: function (data) { |
| | | $("#stockqty").html(data.data[0].FQTY); |
| | | $("#todayinqty").html(data.data[1].FQTY); |
| | | $("#todayoutqty").html(data.data[2].FQTY); |
| | | $("#thismonthinqty").html(data.data[3].FQTY); |
| | | $("#thismonthoutqty").html(data.data[4].FQTY); |
| | | $("#turnoverday").html(""); |
| | | }, |
| | | error: function (data) { |
| | | |
| | | } |
| | | StepHtml += "</li>"; |
| | | } |
| | | StepHtml += "</ul>"; |
| | | $(".hd").append(StepHtml); |
| | | var time = 80; |
| | | $(".flex_t").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false }); |
| | | |
| | | |
| | | }) |
| | | } |
| | | </script> |
| | | </head> |
| | | |
| | | <body> |
| | | <div class='title'>成品仓库FIFO看板</div> |
| | | |
| | | <div class="clock"> |
| | | <ul> |
| | | <li id="Date"></li> |
| | | <li id="hours"> </li> |
| | | <li id="point">:</li> |
| | | <li id="min"> </li> |
| | | <li id="point">:</li> |
| | | <li id="sec"> </li> |
| | | </ul> |
| | | |
| | | </div> |
| | | <div class="col-sm-12"> |
| | | <div class='flex'> |
| | | <div class='flex_item'> |
| | | <span id="stockqty"></span> |
| | | <p>当前库存量</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="todayinqty"></span> |
| | | <p>今日入库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="todayoutqty"></span> |
| | | <p>今日出库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="thismonthinqty"></span> |
| | | <p>本月入库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="thismonthoutqty"></span> |
| | | <p>本月出库数</p> |
| | | </div> |
| | | |
| | | |
| | | <div class='flex_item'> |
| | | <span id="turnoverday"></span> |
| | | <p>库存周转天数</p> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | <div class='title_o'>FIFO详情</div> |
| | | <div class='flex_t'> |
| | | <div class='hd'> |
| | | <ul> |
| | | |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | |
| | | </html> |
| | | function DataGrid() { |
| | | $.ajax({ |
| | | url: "http://localhost:12298/api/loaddata/HouseDataTable", |
| | | dataType: "JSON", |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | success: function (data) { |
| | | console.info(data); |
| | | $(".hd").html(""); |
| | | var StepHtml = ""; |
| | | StepHtml += "<ul>"; |
| | | var result = []; |
| | | for (var i = 0; i < data.data.length; i += 2) { |
| | | result.push(data.data.slice(i, i + 2)); |
| | | } |
| | | for (var j = 0; j < result.length; j++) { |
| | | StepHtml += "<li>"; |
| | | for (var m = 0; m < result[j].length; m++) { |
| | | StepHtml += "<div class='content'>"; |
| | | StepHtml += "<div class='content_name'>" + result[j][m].FNAME + "</div>"; |
| | | StepHtml += "<div class='content_style bg_color w44'>"; |
| | | StepHtml += "<span class='mr'><i class='icon_style icon_n'></i><span class='text_s'>" + result[j][m].FQTY + "</span></span>"; |
| | | StepHtml += "<span class='mr'><i class='icon_style icon_r'></i><span class='text_s'>" + result[j][m].InQty + "</span></span>"; |
| | | StepHtml += "<span><i class='icon_style icon_c'></i><span class=text_s>" + result[j][m].OutQty + "</span></span>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "<div class='content_style w58'>"; |
| | | StepHtml += "<div class='content_mod content_mod_bg_true'>"; |
| | | StepHtml += "<p class='mt12'>固定库位1</p>"; |
| | | StepHtml += "<p class='mb9'>" + result[j][m].FQTY + "</p>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "<div class='content_mod content_mod_bg_tf'>"; |
| | | StepHtml += "<p class='mt12'>" + result[j][m].list[k].LocationCode + "</p>"; |
| | | StepHtml += "<p class='mb9'>" + result[j][m].list[k].LocationQty + "</p>"; |
| | | StepHtml += "</div>"; |
| | | StepHtml += "<div class='content_mod content_mod_bg_false'>"; |
| | | StepHtml += " </div>"; |
| | | } |
| | | StepHtml += "</li>"; |
| | | } |
| | | StepHtml += "</ul>"; |
| | | $(".hd").append(StepHtml); |
| | | var time = 80; |
| | | $(".flex_t").slide({ mainCell: ".hd ul", autoPlay: true, effect: "topMarquee", opp: false, vis: 6, interTime: time, mouseOverStop: false }); |
| | | }, |
| | | error: function (data) { |
| | | |
| | | } |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | </script> |
| | | </head> |
| | | |
| | | <body> |
| | | <div class='title'>成品仓库FIFO看板</div> |
| | | |
| | | <div class="clock"> |
| | | <ul> |
| | | <li id="Date"></li> |
| | | <li id="hours"> </li> |
| | | <li id="point">:</li> |
| | | <li id="min"> </li> |
| | | <li id="point">:</li> |
| | | <li id="sec"> </li> |
| | | </ul> |
| | | |
| | | </div> |
| | | <div class="col-sm-12"> |
| | | <div class='flex'> |
| | | <div class='flex_item'> |
| | | <span id="stockqty"></span> |
| | | <p>当前库存量</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="todayinqty"></span> |
| | | <p>今日入库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="todayoutqty"></span> |
| | | <p>今日出库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="thismonthinqty"></span> |
| | | <p>本月入库数</p> |
| | | </div> |
| | | |
| | | <div class='flex_item'> |
| | | <span id="thismonthoutqty"></span> |
| | | <p>本月出库数</p> |
| | | </div> |
| | | |
| | | |
| | | <div class='flex_item'> |
| | | <span id="turnoverday"></span> |
| | | <p>库存周转天数</p> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | <div class='title_o'>FIFO详情</div> |
| | | <div class='flex_t'> |
| | | <div class='hd'> |
| | | <ul> |
| | | |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | background: #000000; |
| | | } |
| | | |
| | | .pull-right { |
| | | .pull-right,.fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination { |
| | | display: none; |
| | | } |
| | | |
| | |
| | | DataTable(); |
| | | // 定时器 |
| | | interval = setInterval(function () { |
| | | hours = []; |
| | | hoursqty = []; |
| | | CloseProgress = 0; //完工率 |
| | | LineName = []; //流水线数组 |
| | | LineOrderQty = []; //流水线当天订单总任务数量数组 |
| | | LineOrderCloseQty = []; //流水线当天订单总完成数量数组 |
| | | Week = 0; //本周分析 |
| | | Month = 0; //本月分析 |
| | | Chart(mychart1, mychart2, mychart3, mychart4, mychart5); |
| | | }, 120000); |
| | | interval1 = setInterval(function () { |
| | | DataTable(); |
| | | }, 120000); |
| | | }, 20000); |
| | | setInterval(function () { |
| | | //num+=1; |
| | | //$("#tb_order").bootstrapTable('refreshOptions',{offset:num}); // pageNumber:1, 指定页码为第1页 |
| | | $("#tb_order").bootstrapTable('refresh'); |
| | | }, 10000); |
| | | //根据窗口的大小变动图表 --- 重点 |
| | | window.onresize = function () { |
| | | myChart1.resize(); |
| | |
| | | async: false,//使用同步的方式,true为异步方式 |
| | | type: "Get", |
| | | success: function (data) { |
| | | console.log(data); |
| | | |
| | | $.each(data.data[0], function (index, val) { |
| | | hours.push(val.hour + '点'); |
| | | hoursqty.push(parseFloat(val.Count).toFixed(2)); |
| | |
| | | $("#SumDay").html(data.data[1][3].qty.toFixed(2)); //今日订单汇总 |
| | | } |
| | | if (data.data[2].length > 0) { |
| | | if(data.data[2][0].FSTATUS==1){ |
| | | $("#LineStus").html("计划"); |
| | | }if(data.data[2][0].FSTATUS==2){ |
| | | $("#LineStus").html("计划确认"); |
| | | }if(data.data[2][0].FSTATUS==3){ |
| | | $("#LineStus").html("下达"); |
| | | }if(data.data[2][0].FSTATUS==4){ |
| | | $("#LineStus").html("开工"); |
| | | }if(data.data[2][0].FSTATUS==5){ |
| | | $("#LineStus").html("完工"); |
| | | }if(data.data[2][0].FSTATUS==6){ |
| | | $("#LineStus").html("结案"); |
| | | } |
| | | if(data.data[2][0].FSTATUS==7){ |
| | | $("#LineStus").html("结算"); |
| | | } |
| | | $("#OrderWork").html(data.data[2][0].FBILLNO);//当前订单 |
| | | $("#PartName").html(data.data[2][0].FNAME); //当前物料名称 |
| | | $("#PartSpec").html(data.data[2][0].FSPECIFICATION);//当前物料规格 |
| | | |
| | | } |
| | | CloseProgress = parseFloat(data.data[1][1].qty / data.data[1][0].qty).toFixed(2); //完成率 |
| | | |
| | | |
| | | //今日全部流水线产量对比 |
| | | $.each(data.data[3], function (index, val) { |
| | |
| | | }); |
| | | |
| | | //本周分析 |
| | | Week = parseFloat(25000 / data.data[4][0].weekqty).toFixed(2); |
| | | Week = parseFloat(data.data[4][1].weekqty / data.data[4][0].weekqty).toFixed(2); |
| | | //本月分析 |
| | | Month = parseFloat(20000 / data.data[4][2].weekqty).toFixed(2); |
| | | Month = parseFloat(data.data[4][3].weekqty / data.data[4][2].weekqty).toFixed(2); |
| | | }, |
| | | error: function (data) { |
| | | |
| | |
| | | show: false |
| | | }, |
| | | labelLine: { |
| | | show: true |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 3, |
| | |
| | | show: false |
| | | }, |
| | | labelLine: { |
| | | show: true |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 3, |
| | |
| | | show: false |
| | | }, |
| | | labelLine: { |
| | | show: true |
| | | show: false |
| | | }, |
| | | itemStyle: { |
| | | borderWidth: 3, |
| | |
| | | //data: dataJson, |
| | | method: 'get', //请求方式(*) |
| | | dataType: "json", |
| | | queryParams: queryParams,//传递参数(*) |
| | | queryParams :queryParams, |
| | | striped: false, //是否显示行间隔色 |
| | | cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) |
| | | pagination: true, //是否显示分页(*) |
| | |
| | | search: false, //是否启用搜索框 |
| | | sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) |
| | | pageNumber: 1, //初始化加载第一页,默认第一页 |
| | | pageSize: 8, //每页的记录行数(*) |
| | | pageList: [8], //可供选择的每页的行数(*) |
| | | strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索 |
| | | pageSize: 10, //每页的记录行数(*) |
| | | pageList: [10], //可供选择的每页的行数(*) |
| | | strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索 |
| | | clickToSelect: true, //是否启用点击选中行 |
| | | singleSelect: true, //设置True 将禁止多选 |
| | | uniqueId: "ID", //每一行的唯一标识,一般为主键列 |
| | |
| | | break; |
| | | case '6': |
| | | return "结案"; |
| | | break; |
| | | case '7': |
| | | return "结算"; |
| | | default: |
| | | |
| | | } |
| | |
| | | |
| | | }, |
| | | onLoadSuccess: function (row) { |
| | | var a = $('#tb_order').bootstrapTable('getSelections'); |
| | | var num_total = (row.total)/ 10 |
| | | if (num >= num_total) { |
| | | num = 0 |
| | | } |
| | | //var a = $('#tb_order').bootstrapTable('getSelections'); |
| | | } |
| | | |
| | | }) |
| | |
| | | </div> |
| | | <div class="col-sm-3"> |
| | | <ul id="cList"> |
| | | <li>本线状态:<span id="LineStus">执行中aa</span></li> |
| | | <li>本线状态:<span id="LineStus"></span></li> |
| | | <li>总订单:<span id="OrderQty">0</span></li> |
| | | <li>已入库:<span id="OrderInQty">0</span></li> |
| | | <li>返工数:<span id="FGQty">0</span></li> |