| | |
| | | <title>穿梭车监控管理</title> |
| | | <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> |
| | | <link rel="stylesheet" type="text/css" href="../static/css/common.css"> |
| | | <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"> |
| | | <link rel="stylesheet" href="../static/css/ste.css"> |
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script type="text/javascript" src="../static/js/layer/layer.js"></script> |
| | | <script type="text/javascript" src="../static/layui/layui.js"></script> |
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
| | | </head> |
| | | <body> |
| | | <div style="padding: 10px;height: 100%;float: left;width: 6%"> |
| | |
| | | <!-- 日志监控板 --> |
| | | <div class="log-board"> |
| | | <div class="command-log"> |
| | | <h3>执行中的命令</h3> |
| | | <div class="ste-command-item"> |
| | | <div data-steNo="1" class="ste-command-item"> |
| | | <label>1#</label> |
| | | <button id="demoBtn-1" class="demoBtn" onclick="changePosition()">修改位置</button> |
| | | <!-- <span> </span>--> |
| | | <button class="demoBtn" onclick="">所属堆垛机</button> |
| | | </div> |
| | | <div class="ste-command-item" style="margin-top: 25px"> |
| | | <label>2#</label> |
| | | <button id="demoBtn-2" class="demoBtn" onclick="">修改位置</button> |
| | | <!-- <span> </span>--> |
| | | <button class="demoBtn" onclick="">所属堆垛机</button> |
| | | </div> |
| | | <div class="ste-command-item" style="margin-top: 25px"> |
| | | <label>3#</label> |
| | | <button id="demoBtn-3" class="demoBtn" onclick="">修改位置</button> |
| | | <!-- <span> </span>--> |
| | | <button class="demoBtn" onclick="">所属堆垛机</button> |
| | | <button class="demoBtn pos-btn">数据维护</button> |
| | | <button id="mode-1" class="demoBtn mode-btn" > - </button> |
| | | </div> |
| | | </div> |
| | | <!-- 堆垛机状态位信息 --> |
| | |
| | | <th>排</th> |
| | | <th>列</th> |
| | | <th>层</th> |
| | | <th>货叉定位</th> |
| | | <th>载货台定位</th> |
| | | <th>走行在定位</th> |
| | | <th>等待WCS确认</th> |
| | | <th>定位</th> |
| | | <th>充电状态</th> |
| | | <th>报警信息1</th> |
| | | <th>报警信息2</th> |
| | | </tr> |
| | |
| | | </table> |
| | | </div> |
| | | </div> |
| | | <!-- 堆垛机状态 --> |
| | | <!-- 穿梭车状态 --> |
| | | <div class="ste-msg"> |
| | | <table id="ste-msg-table"> |
| | | <thead> |
| | | <tr> |
| | | <th>穿梭车</th> |
| | | <th>任务号</th> |
| | | <th>任务类型</th> |
| | | <th>当前位置</th> |
| | | <th>工作号</th> |
| | | <th>状态</th> |
| | | <th>源站</th> |
| | | <th>目标站</th> |
| | | <th>源库位</th> |
| | | <th>目标库位</th> |
| | | <th>速度</th> |
| | | <th>近点距离</th> |
| | | <th>当前速度</th> |
| | | <th>高低位</th> |
| | | <th>过账指令任务号</th> |
| | | <th>过账指令状态</th> |
| | | <th>盘点数量</th> |
| | | <th>穿梭板就绪</th> |
| | | <th>充电桩号</th> |
| | | <th>堆垛机运行</th> |
| | | <th>堆垛机伸叉</th> |
| | | <th>堆垛机搬移</th> |
| | | <th>作业标记</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | |
| | | <!-- 手动操作 --> |
| | | <div class="ste-operation"> |
| | | <!-- 遮罩层 --> |
| | | <!-- <div class="ste-operation-shade">--> |
| | | <!-- <span class="ste-operation-shade-span">--> |
| | | <!-- WCS 系统运行中,请停止后操作--> |
| | | <!-- </span>--> |
| | | <!-- </div>--> |
| | | <div class="ste-operation-shade"> |
| | | <span class="ste-operation-shade-span"> |
| | | WCS 系统运行中,请停止后操作 |
| | | </span> |
| | | </div> |
| | | <!-- 设备任务选择 --> |
| | | <div class="task-select"> |
| | | <!-- 选择 --> |
| | |
| | | <span class="select-title">穿梭车号</span> |
| | | <div class="select-container"> |
| | | <label><input type="radio" name="steSelect" value="1" checked> 1号穿梭车</label> |
| | | <label><input type="radio" name="steSelect" value="2"> 2号穿梭车</label> |
| | | <label><input type="radio" name="steSelect" value="3"> 3号穿梭车</label> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <fieldset> |
| | | <legend>手动操作</legend> |
| | | <div class="button-group"> |
| | | <button class="item" onclick="put()">左出库</button> |
| | | <button class="item" onclick="take()">右出库</button> |
| | | <button class="item" onclick="stockMove()">左入库</button> |
| | | <button class="item" onclick="siteMove()">右入库</button> |
| | | <button class="item" onclick="bacOrigin()">左移库</button> |
| | | <button class="item" onclick="reverseOrigin()">右移库</button> |
| | | <button class="item" onclick="coorMove()">原点</button> |
| | | <button class="item" onclick="taskComplete()">远点 </button> |
| | | <button class="item" onclick="pause()">A 点</button> |
| | | <button class="item" onclick="boot()">B 点</button> |
| | | <button class="item" onclick="pause()">左搬移</button> |
| | | <button class="item" onclick="boot()">右搬移</button> |
| | | <button class="item" onclick="boot()">充电</button> |
| | | <button class="item" onclick="pause()">左盘点</button> |
| | | <button class="item" onclick="boot()">右盘点</button> |
| | | <button class="item" onclick="boot()">任务完成</button> |
| | | <button class="item" onclick="clearCommand()">清除命令</button> |
| | | <button class="item" onclick="handleReset()">复位</button> |
| | | <button class="item" onclick="steOperator(99)">联机</button> |
| | | <button class="item" onclick="steOperator(100)">脱机</button> |
| | | <button class="item" onclick="steOperator(1)">向右出库</button> |
| | | <button class="item" onclick="steOperator(2)">向左出库</button> |
| | | <button class="item" onclick="steOperator(3)">从右入库</button> |
| | | <button class="item" onclick="steOperator(4)">从左入库</button> |
| | | <button class="item" onclick="steOperator(5)">左移库</button> |
| | | <button class="item" onclick="steOperator(6)">右移库</button> |
| | | <button class="item" onclick="steOperator(7)">去右端</button> |
| | | <button class="item" onclick="steOperator(8)">去左端</button> |
| | | <button class="item" onclick="steOperator(9)">右待机</button> |
| | | <button class="item" onclick="steOperator(10)">左待机</button> |
| | | <!-- <button class="item" onclick="steOperator(11)">左搬移</button>--> |
| | | <!-- <button class="item" onclick="steOperator(12)">右搬移</button>--> |
| | | <!-- <button class="item" onclick="steOperator(13)">左充电</button>--> |
| | | <!-- <button class="item" onclick="steOperator(14)">右充电</button>--> |
| | | <!-- <button class="item" onclick="steOperator(17)">断开充电</button>--> |
| | | <!-- <button class="item" onclick="steOperator(14)">左盘点</button>--> |
| | | <!-- <button class="item" onclick="steOperator(15)">右盘点</button>--> |
| | | <button class="item" onclick="steOperator(16)">任务完成</button> |
| | | |
| | | </div> |
| | | </fieldset> |
| | | </div> |
| | | |
| | | </div> |
| | | <!-- 堆垛机日志输出 --> |
| | | <!-- 穿梭车日志输出 --> |
| | | <div class="ste-output-board"> |
| | | <textarea id="ste-output"></textarea> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div id="ste-detl" style="display: none"> |
| | | <div> |
| | | <div class="form-item"> |
| | | <label class="form-label">穿梭车号:</label> |
| | | <div class="form-input"> |
| | | <input id="steNo" name="steNo" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">工作号:</label> |
| | | <div class="form-input"> |
| | | <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">排:</label> |
| | | <div class="form-input"> |
| | | <input id="row" name="row" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">列:</label> |
| | | <div class="form-input"> |
| | | <input id="bay" name="bay" type="number" class="layui-input" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">层:</label> |
| | | <div class="form-input"> |
| | | <input id="lev" name="lev" type="number" class="layui-input" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">堆垛机:</label> |
| | | <div class="form-input"> |
| | | <input id="crnNo" name="crnNo" type="number" class="layui-input" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">作业标记:</label> |
| | | <div class="form-input"> |
| | | <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item form-button-container"> |
| | | <button class="form-button" id="save">保存</button> |
| | | <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button> |
| | | </div> |
| | | </di> |
| | | </div> |
| | | </body> |
| | | </html> |
| | | <script> |
| | | function changePosition() { |
| | | // 空白行数 |
| | | var steStateTableBlankRows = 0; |
| | | var steMsgTableBlankRows = 0; |
| | | // 实际行数 |
| | | var steStateTableFullRows = 0; |
| | | var steMsgTableFullRows = 0; |
| | | // 初始化 |
| | | var steOutputDom = document.getElementById("ste-output"); |
| | | $(document).ready(function() { |
| | | initSteStateTable(); |
| | | getSteStateInfo(); |
| | | initSteMsgTable(); |
| | | getSteMsgInfo(); |
| | | operatorBlockShow(); |
| | | }); |
| | | |
| | | setInterval(function () { |
| | | getSteStateInfo() |
| | | getSteMsgInfo(); |
| | | },1000) |
| | | setInterval(function () { |
| | | getSteOutput(); |
| | | operatorBlockShow(); |
| | | },500); |
| | | |
| | | // 判断手动操作模块是否可用 |
| | | function operatorBlockShow() { |
| | | if (parent.systemRunning) { |
| | | $('.ste-operation').css("opacity", "0.5"); |
| | | $('.ste-operation-shade').show(); |
| | | $('.ste-operation-shade-span').show(); |
| | | } else { |
| | | $('.ste-operation').css("opacity", "1"); |
| | | $('.ste-operation-shade').hide(); |
| | | $('.ste-operation-shade-span').hide(); |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | var layerIdx; |
| | | $(document).on('click ','.pos-btn', function () { |
| | | let steNo = Number($(this).parent().attr("data-steNo")); |
| | | layerIdx = layer.open({ |
| | | type: 1, |
| | | title: false, |
| | | shadeClose: true, |
| | | offset: [$(this).offset().top + 30 + 'px', $(this).offset().left + 'px'], |
| | | anim: 5, |
| | | shade: [0], |
| | | area: ['310px', '370px'], |
| | | closeBtn: 0, |
| | | content: $("#ste-detl"), |
| | | success: function(layero, index){ |
| | | http.get(baseUrl+ "/ste/detl/"+steNo, null, function (res) { |
| | | $('#steNo').val(steNo); |
| | | $('#workNo').val(res.data.workNo); |
| | | $('#row').val(res.data.row); |
| | | $('#bay').val(res.data.bay); |
| | | $('#lev').val(res.data.lev); |
| | | $('#crnNo').val(res.data.crnNo); |
| | | $('#pakMk').val(res.data.pakMk); |
| | | }) |
| | | }, |
| | | end: function () { |
| | | $('#steNo').val(""); |
| | | $('#workNo').val(""); |
| | | $('#row').val(""); |
| | | $('#bay').val(""); |
| | | $('#lev').val(""); |
| | | $('#crnNo').val(""); |
| | | $('#pakMk').val(""); |
| | | } |
| | | }) |
| | | }) |
| | | |
| | | $(document).on('click ','.mode-btn', function () { |
| | | let steNo = Number($(this).parent().attr("data-steNo")); |
| | | layer.confirm("改变" + steNo + ' 号穿梭车在线状态吗?', function(){ |
| | | var index = layer.load(1, { |
| | | shade: [0.1,'#fff'] |
| | | }); |
| | | $.ajax({ |
| | | url: baseUrl+ "/ste/mode/switch", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | data: { |
| | | steNo: Number(steNo), |
| | | password: 'root' |
| | | }, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | layer.close(index); |
| | | if (res.code === 200){ |
| | | layer.msg(res.msg, {icon: 1}); |
| | | } else if (res.code === 403){ |
| | | window.location.href = baseUrl+"/login"; |
| | | } else { |
| | | layer.msg(res.msg, {icon: 2}); |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | }) |
| | | |
| | | |
| | | |
| | | $(document).on('click ','#save', function () { |
| | | http.post(baseUrl+ "/ste/detl/update", { |
| | | steNo: $('#steNo').val(), |
| | | workNo: $('#workNo').val(), |
| | | row: $('#row').val(), |
| | | bay: $('#bay').val(), |
| | | lev: $('#lev').val(), |
| | | crnNo: $('#crnNo').val(), |
| | | pakMk: $('#pakMk').val(), |
| | | }, function (res) { |
| | | layer.msg("修改成功", {icon: 1,}); |
| | | layer.close(layerIdx); |
| | | }) |
| | | }) |
| | | |
| | | $(document).on('click ','#cancel', function () { |
| | | layer.close(layerIdx); |
| | | }) |
| | | |
| | | // 穿梭车信息表获取 ---- 表一 |
| | | function getSteStateInfo() { |
| | | let tableEl = $('#ste-state-table'); |
| | | $.ajax({ |
| | | url: baseUrl+ "/ste/table/ste/state", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | let table = res.data; |
| | | if (table.length > steStateTableBlankRows && table.length !== steStateTableFullRows) { |
| | | initSteStateTable(table.length-steStateTableBlankRows); |
| | | steStateTableFullRows = table.length; |
| | | } |
| | | for (let i=1;i<=table.length;i++){ |
| | | $("#mode-"+table[i-1].steNo).html(table[i-1].statusVal===0?'联机':'脱机'); |
| | | let tr = tableEl.find("tr").eq(i); |
| | | setVal(tr.children("td").eq(0), table[i-1].steNo); |
| | | setVal(tr.children("td").eq(1), table[i-1].statusType); |
| | | setVal(tr.children("td").eq(2), table[i-1].status); |
| | | setVal(tr.children("td").eq(3), table[i-1].loading); |
| | | setVal(tr.children("td").eq(4), table[i-1].track); |
| | | setVal(tr.children("td").eq(5), table[i-1].charge); |
| | | setVal(tr.children("td").eq(6), table[i-1].row); |
| | | setVal(tr.children("td").eq(7), table[i-1].bay); |
| | | setVal(tr.children("td").eq(8), table[i-1].lev); |
| | | setVal(tr.children("td").eq(9), table[i-1].waiting); |
| | | setVal(tr.children("td").eq(10), table[i-1].loca); |
| | | setVal(tr.children("td").eq(11), table[i-1].chargeStatus); |
| | | setVal(tr.children("td").eq(12), table[i-1].alarm1); |
| | | setVal(tr.children("td").eq(13), table[i-1].alarm2); |
| | | } |
| | | } else if (res.code === 403){ |
| | | window.location.href = baseUrl+"/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 穿梭车数据表获取 ---- 表二 |
| | | function getSteMsgInfo() { |
| | | let tableEl = $('#ste-msg-table'); |
| | | $.ajax({ |
| | | url: baseUrl+ "/ste/table/ste/msg", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | var table = res.data; |
| | | if (table.length > steMsgTableBlankRows && table.length !== steMsgTableFullRows) { |
| | | initSteMsgTable(table.length-steMsgTableBlankRows); |
| | | steMsgTableFullRows = table.length; |
| | | } |
| | | for (var i=1;i<=table.length;i++){ |
| | | var tr = tableEl.find("tr").eq(i); |
| | | setVal(tr.children("td").eq(0), table[i-1].steNo); |
| | | setVal(tr.children("td").eq(1), table[i-1].workNo); |
| | | setVal(tr.children("td").eq(2), table[i-1].status); |
| | | setVal(tr.children("td").eq(3), table[i-1].sourceStaNo); |
| | | setVal(tr.children("td").eq(4), table[i-1].staNo); |
| | | setVal(tr.children("td").eq(5), table[i-1].sourceLocNo); |
| | | setVal(tr.children("td").eq(6), table[i-1].locNo); |
| | | setVal(tr.children("td").eq(7), table[i-1].speed); |
| | | setVal(tr.children("td").eq(8), table[i-1].closer); |
| | | setVal(tr.children("td").eq(9), table[i-1].pakMk); |
| | | } |
| | | } else if (res.code === 403){ |
| | | window.location.href = baseUrl+"/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 穿梭车日志输出 ----------------------------------------------------------------------- |
| | | function getSteOutput() { |
| | | $.ajax({ |
| | | url: baseUrl + "/ste/output/ste", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | steOutput(res.data); |
| | | } else if (res.code === 403) { |
| | | window.location.href = baseUrl + "/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 任务指令下发 |
| | | function steOperator(steTaskMode) { |
| | | http.post(baseUrl+"/ste/operator/ste", { |
| | | steNo: $('input[name="steSelect"]:checked').val(), |
| | | steTaskMode: steTaskMode |
| | | }, function (res) { |
| | | layer.msg(res.msg, {icon: 1}); |
| | | }); |
| | | } |
| | | |
| | | |
| | | // ------------------------------------------------------------------------------------------------ |
| | | |
| | | // 穿梭车信息表获取 ----- 表一 |
| | | function initSteStateTable(row) { |
| | | let line; |
| | | if (row === undefined){ |
| | | let one = $('#ste-state-table thead').height(); |
| | | let total = $('.ste-state').height(); |
| | | let count = total / one; |
| | | count = parseInt(count) - 1; |
| | | steStateTableBlankRows = count; |
| | | line = count; |
| | | } else { |
| | | line = row; |
| | | } |
| | | let html = ""; |
| | | for (let i = 0; i < line; i ++){ |
| | | html += " <tr>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " </tr>\n"; |
| | | } |
| | | $('#ste-state-table tbody').after(html); |
| | | } |
| | | |
| | | // 穿梭车数据表获取 ----- 表二 |
| | | function initSteMsgTable(row) { |
| | | let line; |
| | | if (row === undefined){ |
| | | let one = $('#ste-msg-table thead').height(); |
| | | let total = $('.ste-msg').height(); |
| | | let count = total / one; |
| | | count = parseInt(count) - 1; |
| | | steMsgTableBlankRows = count; |
| | | line = count; |
| | | } else { |
| | | line = row; |
| | | } |
| | | let html = ""; |
| | | for (let i = 0; i < line; i ++){ |
| | | html += " <tr>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " </tr>\n"; |
| | | } |
| | | $('#ste-msg-table tbody').after(html); |
| | | } |
| | | |
| | | // 日志输出框 |
| | | function steOutput(content){ |
| | | steOutputDom.value += content; |
| | | steOutputDom.scrollTop = steOutputDom.scrollHeight; |
| | | } |
| | | |
| | | </script> |