| | |
| | | height: auto ; |
| | | white-space: normal; |
| | | } |
| | | .barcode { |
| | | position: absolute; |
| | | color: #a19c9c; |
| | | border: 1px solid rgb(108,167,168); |
| | | cursor: pointer; |
| | | text-align: center; |
| | | background-color: rgb(157, 217, 162); |
| | | font-size: 10px; |
| | | } |
| | | .barcode1{ |
| | | position: absolute; |
| | | width: 100px; |
| | |
| | | track = '', |
| | | tracks = '', |
| | | stn = '', |
| | | barcode = '', |
| | | stns = '', |
| | | stnArr = [], |
| | | barcodeArr = [], |
| | | floorBtn = '', |
| | | floorBtns = '', |
| | | floorBtnss = '', |
| | |
| | | for (let i = 0;i < rackss.length;i++) { |
| | | let bay ='' // 单个库位 |
| | | let bays = '' // 库位集合 |
| | | let bayWidth = rackss[i].width / (rackss[i].maxBayNo / rackss[i].minBayNo) |
| | | let maxBayNo = rackss[i].maxBayNo // 最大库位号 |
| | | let minBayNo = rackss[i].minBayNo // 最小库位号 |
| | | let bLen = maxBayNo / minBayNo // 库位个数 |
| | | let bLen |
| | | let interval // 间隔数 |
| | | |
| | | if (maxBayNo<35) { |
| | | interval = 1 |
| | | bLen = maxBayNo / interval // 库位个数 |
| | | } else { |
| | | interval = 2 |
| | | bLen = maxBayNo / interval // 库位个数 |
| | | } |
| | | let bayWidth // 单个库位宽度 |
| | | let bNum // 库位号码 |
| | | // hpPosition 0 表示货架序号 左->右 1 表示货架序号 右->左 |
| | | |
| | | if (minBayNo % 2 == 0) { // 从2开始 |
| | | if(interval == 1) { |
| | | bLen = bLen - 1 |
| | | } else if (interval == 2) { |
| | | if (maxBayNo % 2 == 0) { // 偶数 |
| | | bLen = bLen |
| | | } else { // 奇数 |
| | | maxBayNo = maxBayNo + 1 |
| | | bLen = maxBayNo / interval // 库位个数 |
| | | } |
| | | } |
| | | } else { // 从1开始 |
| | | if(interval == 1) { |
| | | bLen = bLen |
| | | } else if (interval == 2) { |
| | | if (maxBayNo % 2 == 0) { // 偶数 |
| | | bLen = bLen |
| | | } else { // 奇数 |
| | | bLen = bLen + 1 |
| | | } |
| | | } |
| | | } |
| | | bayWidth = rackss[i].width / bLen |
| | | // hpPosition 0 表示货架序号 左->右 1 表示货架序号 左<-右 |
| | | if (mapInfo.hpPosition == 1) { |
| | | bNum = maxBayNo |
| | | for (let j = bLen; j > 0; j--) { |
| | | bay = "<button class='item' style='width: "+ bayWidth +"px'>" + bNum + "</button>" |
| | | bays = bays + bay |
| | | bNum = bNum - minBayNo; |
| | | bNum = bNum - interval; |
| | | } |
| | | }else { |
| | | bNum = minBayNo |
| | | for (let j = 0; j < bLen; j++) { |
| | | |
| | | bay = "<button class='item' style='width: "+ bayWidth +"px'>" + bNum + "</button>" |
| | | bays = bays + bay |
| | | bNum = bNum + minBayNo; |
| | | bNum = bNum + interval; |
| | | } |
| | | } |
| | | |
| | |
| | | for (let i = 0; i < areas.length;i++) { |
| | | |
| | | let stnss = areas[i].stns |
| | | let barcodes = areas[i].barcode |
| | | let floor = areas[i].text |
| | | console.log(areas[i].top) |
| | | floorId = areas[i].id |
| | | var position = (i+1)*100 |
| | | floorBtn = |
| | | "<button class='floorBtn btn-16' onclick='changFloor("+i+")' style='top: "+position+"px;'>" + floor +"</button>" |
| | | console.log(mapInfo.areas[0].floors.length) |
| | | if (mapInfo.areas[0].floors.length == 1) { |
| | | floorBtnss = '' |
| | | } else { |
| | |
| | | var index = i |
| | | var n = 1 |
| | | stnArr[index] = '' |
| | | barcodeArr[index] = '' |
| | | total[index] = '' |
| | | for (let j = 0; j < stnss.length; j++) { |
| | | if (stnss[j].type == "stn") { |
| | |
| | | "px'>" + stnss[j].text + "</div>" |
| | | stnArr[i] = stnArr[i] + stn |
| | | } |
| | | |
| | | } |
| | | |
| | | for (let k = 0; k < barcodes.length; k++) { |
| | | barcode = "<div class='barcode' id='" + barcodes[k].id + |
| | | "'style='width:" + barcodes[k].width + |
| | | "px;height: " + barcodes[k].height + |
| | | "px;line-height: " + barcodes[k].height + |
| | | "px;top: "+ barcodes[k].top + |
| | | "px;left: "+ barcodes[k].left + "px'>" + "</div>" |
| | | barcodeArr[i] = barcodeArr[i] + barcode |
| | | } |
| | | floorInfo = racks + rackDescs + tracks + crns + stnArr[0] + floorBtnss |
| | | } |
| | | floorInfo = racks + rackDescs + tracks + crns + stnArr[0] + floorBtnss + barcodeArr[0] |
| | | |
| | | $(".main-part").append(floorInfo) |
| | | $("#line-total").html(total[0]) |
| | |
| | | } |
| | | function changFloor(e) { |
| | | $(".main-part").empty() // 清空节点 |
| | | floorInfo = racks + stnArr[e] +rackDescs + crns + tracks + floorBtnss |
| | | floorInfo = racks + stnArr[e] +rackDescs + crns + tracks + floorBtnss + barcodeArr[e] |
| | | $(".main-part").append(floorInfo) |
| | | $("#line-total").empty() |
| | | $("#line-total").html(total[e]) |
| | | // listenChange(); |
| | | } |
| | | |
| | | |
| | | layui.config({ |
| | | base: baseUrl + "/static/wms/layui/lay/modules/" |
| | | }).use(['table', 'form'], function () { |
| | | var table = layui.table; |
| | | var $ = layui.jquery; |
| | | var cache; |
| | | |
| | | // 数据渲染 |
| | | tableIns = table.render({ |
| | | elem: '#deviceInfo', |
| | | headers: {token: localStorage.getItem('token')}, |
| | | url: baseUrl + '/console/deviceInfo', |
| | | page: false, |
| | | limit: 16, |
| | | limits: [16, 30, 50, 100, 200, 500], |
| | | even: true, |
| | | cellMinWidth: 50, |
| | | cols: [[ |
| | | {field: 'device', align: 'center', title: '设备'} |
| | | , {field: 'deviceId', align: 'center', title: '编号'} |
| | | , {field: 'battery', align: 'center', title: '电量'} |
| | | , {field: 'error', align: 'center', title: '异常', templet: '#errorTpl'} |
| | | , {field: 'status', align: 'center', title: '状态', width: 150} |
| | | ]], |
| | | request: { |
| | | pageName: 'curr', |
| | | pageSize: 'limit' |
| | | }, |
| | | parseData: function (res) { |
| | | return { |
| | | 'code': res.code, |
| | | 'msg': res.msg, |
| | | 'count': res.data.total, |
| | | 'data': res.data.records |
| | | } |
| | | }, |
| | | response: { |
| | | statusCode: 200 |
| | | }, |
| | | done: function (res, curr, count) { |
| | | $(".layui-table-tool").hide() |
| | | $(".layui-table-view").css({"margin":"0px"}) |
| | | $(".layui-table-box").css({"padding-bottom":"0px"}) |
| | | |
| | | cache = table.cache['deviceInfo']; |
| | | } |
| | | }); |
| | | |
| | | setInterval(() => { |
| | | tableReload() |
| | | },10000) |
| | | |
| | | function tableReload() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/deviceInfo", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | contentType: 'application/json;charset=UTF-8', |
| | | method: 'GET', |
| | | traditional: true, |
| | | success: function (res) { |
| | | cache = res.data.records |
| | | table.reload('deviceInfo',{ |
| | | data: cache |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }); |
| | | |
| | |
| | | "left": 1656, |
| | | "width": 49, |
| | | "height": 20 |
| | | }] |
| | | }], |
| | | "barcode": [ |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-1", |
| | | "text": "", |
| | | "top": 136, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | }, |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-2", |
| | | "text": "", |
| | | "top": 229, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | }, |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-3", |
| | | "text": "", |
| | | "top": 320, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | }, |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-4", |
| | | "text": "", |
| | | "top": 435, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | }, |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-5", |
| | | "text": "", |
| | | "top": 550, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | }, |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-6", |
| | | "text": "", |
| | | "top": 663, |
| | | "left": 355, |
| | | "width": 80, |
| | | "height": 20 |
| | | } |
| | | , |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-7", |
| | | "text": "", |
| | | "top": 455, |
| | | "left": 1590, |
| | | "width": 80, |
| | | "height": 20 |
| | | } |
| | | , |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-8", |
| | | "text": "", |
| | | "top": 570, |
| | | "left": 1590, |
| | | "width": 80, |
| | | "height": 20 |
| | | } |
| | | ] |
| | | }, { |
| | | "type": "floor", |
| | | "id": "page_floor2", |
| | |
| | | "left": 1489, |
| | | "width": 40, |
| | | "height": 20 |
| | | }] |
| | | }], |
| | | "barcode": [ |
| | | { |
| | | "type": "barcode", |
| | | "id": "barcode-10", |
| | | "text": "", |
| | | "top": 153, |
| | | "left": 1153, |
| | | "width": 80, |
| | | "height": 0 |
| | | } |
| | | |
| | | ] |
| | | }] |
| | | }] |
| | | } |
| | |
| | | <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> |
| | | </div> |
| | | </div> |
| | | <div class="barcode1"> |
| | | <span style="color: red" id="code1">1</span> |
| | | </div> |
| | | <div class="barcode2"> |
| | | <span style="color: red" id="code2">2</span> |
| | | </div> |
| | | <div class="barcode3"> |
| | | <span style="color: red" id="code3">3</span> |
| | | </div> |
| | | <div class="barcode4"> |
| | | <span style="color: red" id="code4">4</span> |
| | | </div> |
| | | <div class="barcode5"> |
| | | <span style="color: red" id="code5">5</span> |
| | | </div> |
| | | <div class="barcode6"> |
| | | <span style="color: red" id="code6">6</span> |
| | | </div> |
| | | <div class="barcode7"> |
| | | <span style="color: red" id="code7">7</span> |
| | | </div> |
| | | <div class="barcode8"> |
| | | <span style="color: red" id="code8">8</span> |
| | | </div> |
| | | |
| | | <!-- 货架 + 堆垛机 + 入库站点 --> |
| | | <div class="main-part"> |
| | |
| | | if (res.code === 200) { |
| | | var barcodes = res.data; |
| | | for (var i = 0; i < barcodes.length; i++) { |
| | | $("#code" + barcodes[i].barcodeId).html(barcodes[i].codeValue); |
| | | $("#barcode-"+barcodes[i].barcodeId).html(barcodes[i].codeValue ? barcodes[i].codeValue : "--"); |
| | | } |
| | | } else if (res.code === 403) { |
| | | parent.location.href = baseUrl + "/login"; |
| | |
| | | function carAnimate(id, target) { |
| | | var targetTop = 0; |
| | | var targetLeft = 1489; |
| | | console.log(id+" ....>>>"+target) |
| | | // console.log(id+" ....>>>"+target) |
| | | switch (target) { |
| | | case 3: |
| | | targetTop += 67; |