| | |
| | | <link rel="stylesheet" type="text/css" href="../static/css/common.css"> |
| | | <link rel="stylesheet" type="text/css" href="../static/css/console.css"> |
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
| | | <script type="text/javascript" src="../static/js/layer/layer.js"></script> |
| | | <style> |
| | | |
| | | /* layer 深蓝色按钮修改 */ |
| | | .layui-layer-lan .layui-layer-btn { |
| | | border-top: none; |
| | | } |
| | | .layui-layer-lan .layui-layer-btn a { |
| | | background: #4476A7; |
| | | border-color: #4476A7; |
| | | color: #fff; |
| | | } |
| | | .layui-layer-lan .layui-layer-btn .layui-layer-btn1 { |
| | | background: #fff; |
| | | color: #333; |
| | | border-color: #E9E7E7; |
| | | } |
| | | .layui-layer-lan .layui-layer-btn .layui-layer-btn1:hover { |
| | | background-color: #f7f7f7; |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <header> |
| | | <!-- 系统运行状态 --> |
| | | <div class="system-state"> |
| | | <div class="system-icon"></div> |
| | | <span>系统运行中...</span> |
| | | <div id="system-icon" class="system-icon-open" onclick="systemSwitch()"></div> |
| | | <span id="system-run-desc">系统运行中...</span> |
| | | </div> |
| | | |
| | | <!-- 信息展示 --> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!--分割线--> |
| | | <hr class="header-hr"> |
| | | </header> |
| | | <main> |
| | | |
| | | <!----------- 工具栏 ----------> |
| | | <!-- 入库口 --> |
| | | <div class="cargo-put"></div> |
| | | <!-- 扫码器 --> |
| | | <div id="code-decoder-1" class="code-decoder"> |
| | | <span id="code-decoder-data-1" class="code-decoder-data">0</span> |
| | | </div> |
| | | |
| | | |
| | | <!-- 左输送线 --> |
| | | <!-- 第一列(宽度 100px)--> |
| | |
| | | <div class="site-row site-row-2"> |
| | | <div id="site-32" class="site" style="width: 80px; height: 50px;line-height: 50px">32</div> |
| | | <div id="site-31" class="site" >31</div> |
| | | <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px; background-color: red;">30</div> |
| | | <div id="site-30" class="site" style="width: 80px; height: 30px;line-height: 30px;">30</div> |
| | | <div id="site-23" class="site" >23</div> |
| | | <div id="site-22" class="site" style="width: 80px; height: 50px;line-height: 50px">22</div> |
| | | <div id="site-20" class="site" >20</div> |
| | |
| | | <span class="row-no">1#</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 右输送线 --> |
| | | <!--<input id="val" type="text">--> |
| | | <!--<button id="animate">animate</button>--> |
| | | </main> |
| | | |
| | | <!-- 弹窗 --> |
| | | <!-- 输送设备弹窗 --> |
| | | <div id="siteWindow" style="display: none"> |
| | | <form> |
| | | <label>设备号<input type="text" name="devpNo" value="12" disabled="disabled"></label> |
| | | <label>工作号<input type="text" name="workNo" value="9998" disabled="disabled"></label> |
| | | <label>工作状态<input type="text" name="workStatus" value="2.设备上移动" disabled="disabled"></label> |
| | | <label>自动<input type="checkbox" name="auto" disabled="disabled" checked></label> |
| | | <label>有物<input type="checkbox" name="loading" disabled="disabled" checked></label> |
| | | <label>能入<input type="checkbox" name="canining" disabled="disabled" checked></label> |
| | | <label>能出<input type="checkbox" name="canouting" disabled="disabled" checked></label> |
| | | <label>出入类型<input type="text" name="ioType" value="1.入库" disabled="disabled"></label> |
| | | <label>源站<input type="text" name="sourceStaNo" value="2303" disabled="disabled"></label> |
| | | <label>目标站<input type="text" name="staNo" value="2410" disabled="disabled"></label> |
| | | <label>源库位<input type="text" name="sourceStock" value="" disabled="disabled"></label> |
| | | <label>目标库位<input type="text" name="stock" value="" disabled="disabled"></label> |
| | | </form> |
| | | </div> |
| | | <!-- 堆垛机弹窗 --> |
| | | <div id="crnWindow" style="display: none"> |
| | | <label>堆垛机号<input type="text" name="crnNo" value="12" disabled="disabled"></label> |
| | | <label>工作号<input type="text" name="workNo" value="9998" disabled="disabled"></label> |
| | | <label>源站<input type="text" name="sourceStaNo" value="2303" disabled="disabled"></label> |
| | | <label>目标站<input type="text" name="staNo" value="2410" disabled="disabled"></label> |
| | | <label>工作状态<input type="text" name="workStatus" value="2.设备上移动" disabled="disabled"></label> |
| | | <label>出入类型<input type="text" name="ioType" value="1.入库" disabled="disabled"></label> |
| | | <label>源库位<input type="text" name="sourceStock" value="" disabled="disabled"></label> |
| | | <label>目标库位<input type="text" name="stock" value="" disabled="disabled"></label> |
| | | <label>堆垛机状态<input type="text" name="crnStatus" disabled="disabled"></label> |
| | | <label>异常<input type="text" name="error" disabled="disabled" checked></label> |
| | | </div> |
| | | |
| | | </body> |
| | | <script> |
| | | var systemRunning = true; |
| | | var crn1Position = 0; |
| | | var crn2Position = 0; |
| | | $('#animate').click(function () { |
| | | crnAnimate(1, $('#val').val()); |
| | | }); |
| | | // 初始化 |
| | | getSitesInfo(); |
| | | getCrnInfo(); |
| | | // 实时访问 |
| | | setInterval(function () { |
| | | getCrnInfo(); |
| | | }, 500); |
| | | setInterval(function () { |
| | | getSitesInfo(); |
| | | }, 3000); |
| | | |
| | | // 系统运行开关 |
| | | function systemSwitch() { |
| | | if (systemRunning){ |
| | | layer.prompt({title: '请输入口令,并停止 WCS 系统', formType: 1}, function(pass, idx){ |
| | | layer.close(idx); |
| | | if ("123"!==pass){ |
| | | alert("口令错误"); |
| | | return; |
| | | } |
| | | var index = null; |
| | | index = layer.load(1, { |
| | | shade: [0.1,'#fff'] |
| | | }); |
| | | setTimeout(function () { |
| | | if (systemRunning){ |
| | | $('#system-icon').attr("class", "system-icon-close"); |
| | | $('#system-run-desc').html("系统已停止!"); |
| | | systemRunning = false; |
| | | } else { |
| | | $('#system-icon').attr("class", "system-icon-open"); |
| | | $('#system-run-desc').html("系统运行中..."); |
| | | systemRunning = true; |
| | | } |
| | | layer.close(index); |
| | | }, 2000); |
| | | }); |
| | | |
| | | } else { |
| | | var index = null; |
| | | index = layer.load(1, { |
| | | shade: [0.1,'#fff'] |
| | | }); |
| | | setTimeout(function () { |
| | | if (systemRunning){ |
| | | $('#system-icon').attr("class", "system-icon-close"); |
| | | $('#system-run-desc').html("系统已停止!"); |
| | | systemRunning = false; |
| | | } else { |
| | | $('#system-icon').attr("class", "system-icon-open"); |
| | | $('#system-run-desc').html("系统运行中..."); |
| | | systemRunning = true; |
| | | } |
| | | layer.close(index); |
| | | }, 2000); |
| | | } |
| | | } |
| | | |
| | | // 输送设备实时数据获取 |
| | | function getSitesInfo(){ |
| | | $.ajax({ |
| | | url: baseUrl+ "/console/latest/data/site", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | var sites = res.data; |
| | | for (var i = 0; i < sites.length; i++){ |
| | | $("#site-"+sites[i].siteId).attr("class", "site " + sites[i].siteStatus); |
| | | } |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 堆垛机实时数据获取 |
| | | function getCrnInfo(){ |
| | | $.ajax({ |
| | | url: baseUrl+ "/console/latest/data/crn", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | var crns = res.data; |
| | | for (var i = 0; i < crns.length; i++){ |
| | | crnAnimate(crns[i].crnId, crns[i].offset); |
| | | } |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 扫码器实时数据获取 |
| | | function getBarcodeInfo(){ |
| | | $.ajax({ |
| | | url: baseUrl+ "/console/latest/data/barcode", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 堆垛机偏移动画 |
| | | function crnAnimate(id, leftVal) { |
| | |
| | | } |
| | | } |
| | | |
| | | $('.item').on('click', function () { |
| | | // 页面点击事件监听 --------------------------------------------------------- |
| | | |
| | | // 输送设备点击事件 |
| | | $('.site').on('click', function () { |
| | | layer.open({ |
| | | title: "1204站点信息", |
| | | closeBtn: 0, |
| | | skin: 'layui-layer-lan', |
| | | offset: '180px', |
| | | type: 1, |
| | | shadeClose: true, //点击遮罩关闭层 |
| | | content: 'text' |
| | | shadeClose: true, |
| | | content: $('#siteWindow'), |
| | | area: ['30rem', '18rem'], |
| | | btn: ['确定', '关闭'] |
| | | }); |
| | | }) |
| | | }); |
| | | |
| | | // 堆垛机点击事件 |
| | | $('.machine').on('click', function () { |
| | | layer.open({ |
| | | title: "1号堆垛机", |
| | | skin: 'layui-layer-lan', |
| | | closeBtn: 0, |
| | | type: 1, |
| | | offset: '180px', |
| | | shadeClose: true, |
| | | content: $("#crnWindow"), |
| | | area: ['30rem', '18rem'], |
| | | btn: ['确定', '关闭'] |
| | | }); |
| | | }); |
| | | |
| | | </script> |
| | | </html> |