| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | | <meta charset="UTF-8" > |
| | | <title>自动仓库wcs系统</title> |
| | | <link rel="stylesheet" href="../static/css/render.css"> |
| | | <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | |
| | | <script src="../static/js/console.map.js"></script> |
| | | <script src="../static/js/console.js"></script> |
| | | <script src="../static/js/common.js"></script> |
| | | |
| | | |
| | | </head> |
| | | <body> |
| | | <div id="main"> |
| | |
| | | <div class="head-left"> |
| | | <h1>自动仓库WCS监控图</h1> |
| | | <h6>AUTOMATIC WAREHOUSE WCS MONITORING DIAGRAM</h6> |
| | | <button class="zoom-btn" id="zoomBtn">缩小网页比例</button> |
| | | </div> |
| | | <div class="head-right"> |
| | | <img src="../static/images/zy-logo.png" alt="中扬" height="44" width="80"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </body> |
| | | |
| | | </html> |
| | |
| | | url: baseUrl + '/console/barcode/output/site', |
| | | method: 'GET', |
| | | success: function (res) { |
| | | // console.log(res) |
| | | if (res.code === 200) { |
| | | tData = eval(res.data); |
| | | if (tData.length <= 5) { |
| | |
| | | </script> |
| | | <script type="text/javascript"> |
| | | // 弹窗站点信息 |
| | | $('.site').on('click', function () { |
| | | $(document).on('click', '.site' ,function () { |
| | | var id = this.id.split("-")[1]; |
| | | $("#siteWindow").attr("style", "display:block;");//显示div |
| | | $("#crnWindow").attr("style", "display:none;"); |
| | | $(".detailed").empty(); |
| | | $('.detailed').append(id + '站点详细信息'); |
| | | $("#siteWindow").css("display", "block");//显示div |
| | | $("#crnWindow").css("display", "none"); |
| | | $(".detailed").empty().append(id + '站点详细信息'); |
| | | $.ajax({ |
| | | url: baseUrl + "/console/site/detail", |
| | | headers: { |
| | |
| | | if (find[0].type === 'text') { |
| | | find.val(res.data[val]); |
| | | } else if (find[0].type === 'checkbox') { |
| | | find.attr("checked", res.data[val] === 'Y'); |
| | | find.prop("checked", res.data[val] === 'Y'); |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | }); |
| | | // 堆垛机信息 |
| | | $('.machine').on('click', function () { |
| | | $(document).on('click', '.machine',function () { |
| | | var id = this.id.split("-")[1]; |
| | | $("#crnWindow").attr('style', 'display:block;'); |
| | | $("#siteWindow").attr("style", "display:none;"); |
| | | $('.detailed').empty(); |
| | | $('.detailed').append(id + '号堆垛机'); |
| | | $("#crnWindow").css("display","block"); |
| | | $("#siteWindow").css("display","none"); |
| | | $(".detailed").empty().append(id + '号堆垛机'); |
| | | $.ajax({ |
| | | url: baseUrl + "/console/crn/detail", |
| | | headers: { |
| | | 'token': localStorage.getItem('token') |
| | | }, |
| | | data: { |
| | | crnNo: id |
| | | }, |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: {crnNo: id}, |
| | | method: 'post', |
| | | success: function (res) { |
| | | for (var val in res.data) { |
| | | var find = $("#crnWindow").find(":input[name='" + val + "']"); |
| | | if (find[0].type === 'text') { |
| | | for(var val in res.data){ |
| | | var find = $("#crnWindow").find(":input[name='"+ val + "']"); |
| | | if(find[0].type === 'text'){ |
| | | find.val(res.data[val]); |
| | | } else if (find[0].type === 'checkbox') { |
| | | find.attr("checked", res.data[val] === 'Y'); |
| | | }else if (find[0].type === 'checkbox'){ |
| | | find.prop("checked", res.data[val] === 'Y') |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | }) |
| | | |
| | | }) |
| | |
| | | }); |
| | | } |
| | | |
| | | // 输送设备实时数据获取 |
| | | // 输送设备实时数据获取csxit |
| | | function getSitesInfo() { |
| | | $.ajax({ |
| | | url: baseUrl + "/console/latest/data/site", |
| | |
| | | } else { |
| | | siteEl.html(sites[i].siteId); |
| | | } |
| | | if (i + 1 === 8) { |
| | | carAnimate(i + 1, Number(sites[i].nearbySta)); |
| | | |
| | | if (sites[i].siteId === '1' || sites[i].siteId === '2' || sites[i].siteId === '3'|| sites[i].siteId === '4') { |
| | | |
| | | carAnimate(Number(sites[i].siteId), Number(sites[i].nearbySta)); |
| | | } |
| | | } |
| | | } else if (res.code === 403) { |
| | |
| | | var crnEl = $("#crn-" + crns[i].crnId); |
| | | crnEl.attr("class", "machine " + crns[i].crnStatus); |
| | | var unit = 0;//($('.item').eq(0).width() + 13) / 2; |
| | | if (crns[i].bay < 0) { |
| | | |
| | | if (crns[i].bay < 0 || crns[i].bay === -2) { |
| | | crns[i].bay = 1 |
| | | } |
| | | // crnEl.animate({left: (crns[i].bay * unit) + 'px'}, 1000); |
| | | // crns[i].bay = 1; |
| | | // crns[i].bay = 15; |
| | | var offSet = 120; |
| | | unit = 15; |
| | | |
| | | var offSet = 0; |
| | | switch (i) { |
| | | case 0: |
| | | unit = 34; |
| | | offSet = 337; |
| | | break; |
| | | case 1: |
| | | unit = 68; |
| | | offSet = 337; |
| | | break; |
| | | case 2: |
| | | unit = 17; |
| | | offSet = 337; |
| | | break; |
| | | } |
| | | |
| | | if(crns[i].bay === 1){ |
| | | crnEl.animate({left: offSet + 'px'}, 1000); |
| | | crnEl.animate({left: offSet + 'px'}, 10); |
| | | } else { |
| | | crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 1000); |
| | | crnEl.animate({left: (offSet - unit + (crns[i].bay * unit)) + 'px'}, 10); |
| | | } |
| | | |
| | | } |
| | |
| | | if (res.code === 200) { |
| | | var barcodes = res.data; |
| | | for (var i = 0; i < barcodes.length; i++) { |
| | | $("#code-decoder-data-" + 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 = 122; |
| | | if (id === 8) { |
| | | // debugger |
| | | var targetTop = 0; |
| | | if (id === 1 || id === '1' || id === '2' || id === 2 || id === '3' || id === 3 ||id === '4' || id === 4) { |
| | | switch (target) { |
| | | case 1: |
| | | targetTop += 160; |
| | | case 1004: |
| | | targetTop += 84; |
| | | break; |
| | | case 2: |
| | | targetTop += 140; |
| | | case 1007: |
| | | targetTop += 128; |
| | | break; |
| | | case 3: |
| | | targetTop += 80; |
| | | case 1010: |
| | | targetTop += 190; |
| | | break; |
| | | case 4: |
| | | targetTop += 40; |
| | | case 1014: |
| | | targetTop += 240; |
| | | break; |
| | | case 7: |
| | | targetTop += 0; |
| | | case 1018: |
| | | targetTop += 300; |
| | | break; |
| | | case 1021: |
| | | targetTop += 350; |
| | | break; |
| | | case 1024: |
| | | targetTop += 415; |
| | | break; |
| | | case 1028: |
| | | targetTop += 465; |
| | | break; |
| | | case 1031: |
| | | targetTop += 530; |
| | | break; |
| | | case 1035: |
| | | targetTop += 580; |
| | | break; |
| | | case 2003: |
| | | targetTop += 84; |
| | | break; |
| | | case 2006: |
| | | targetTop += 128; |
| | | break; |
| | | case 2009: |
| | | targetTop += 19.; |
| | | break; |
| | | case 2012: |
| | | targetTop += 240; |
| | | break; |
| | | case 2015: |
| | | targetTop += 300; |
| | | break; |
| | | case 2018: |
| | | targetTop += 350; |
| | | break; |
| | | case 2021: |
| | | targetTop += 415; |
| | | break; |
| | | case 2024: |
| | | targetTop += 465; |
| | | break; |
| | | case 2027: |
| | | targetTop += 530; |
| | | break; |
| | | case 2030: |
| | | targetTop += 580; |
| | | break; |
| | | default: |
| | | return; |
| | |
| | | } else { |
| | | return; |
| | | } |
| | | $("#site-" + id).animate({top: targetTop + 'px'}, 1000); |
| | | |
| | | $("#site-" + id).animate({top: targetTop + 'px'}, 0); |
| | | } |
| | | |
| | | // 检查 URL 中是否包含 fullscreen=true 参数 |
| | | function checkFullscreen() { |
| | | const urlParams = new URLSearchParams(window.location.search); |
| | | const fullscreen = urlParams.get('fullscreen'); |
| | | if (fullscreen === 'true') { |
| | | enterFullscreen(); |
| | | } |
| | | } |
| | | |
| | | // 进入全屏模式 |
| | | function enterFullscreen() { |
| | | if (!document.fullscreenElement) { |
| | | if (document.documentElement.requestFullscreen) { |
| | | document.documentElement.requestFullscreen(); |
| | | } else if (document.documentElement.mozRequestFullScreen) { // Firefox |
| | | document.documentElement.mozRequestFullScreen(); |
| | | } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, Opera |
| | | document.documentElement.webkitRequestFullscreen(); |
| | | } else if (document.documentElement.msRequestFullscreen) { // IE/Edge |
| | | document.documentElement.msRequestFullscreen(); |
| | | } |
| | | } |
| | | } |
| | | |
| | | // 按钮点击事件,触发缩放 |
| | | document.getElementById('zoomBtn').addEventListener('click', function() { |
| | | simulateCtrlWheelZoomOut(); |
| | | }); |
| | | |
| | | // 模拟 Ctrl + 滚轮下滑来缩小网页 |
| | | function simulateCtrlWheelZoomOut() { |
| | | let scale = 1; // 默认缩放比例 |
| | | |
| | | // 获取当前页面的缩放比例 |
| | | let currentScale = window.getComputedStyle(document.body).transform; |
| | | if (currentScale !== 'none') { |
| | | scale = parseFloat(currentScale.match(/matrix\((.*)\)/)[1].split(',')[0]); |
| | | } |
| | | |
| | | // 计算新的缩放比例,模拟缩小 |
| | | let newScale = scale * 0.9; // 每次点击缩小10% |
| | | |
| | | // 应用新的缩放比例 |
| | | document.body.style.transform = 'scale(' + newScale + ')'; |
| | | document.body.style.transformOrigin = 'top left'; // 设置缩放原点 |
| | | } |
| | | |
| | | |
| | | |
| | | </script> |