<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>RGV监控管理</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
<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/css/rgv.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>
|
.demoBtn {
|
vertical-align: middle;
|
width: 20%;
|
height: 25px;
|
left: 0;
|
top: 0;
|
text-shadow: inherit;
|
font-size: 15px;
|
margin-left: 5px;
|
margin-right: 5px;
|
display: inline-block;
|
background-color: #FF5722;
|
border: none;
|
color: #FFF;
|
box-shadow: 1px 1px 5px #B6B6B6;
|
border-radius: 3px;
|
cursor: pointer;
|
}
|
|
.demoBtn:hover {
|
opacity: 0.8
|
}
|
.demoBtn:focus {
|
outline: 0;
|
}
|
</style>
|
</head>
|
<body>
|
<div style="padding: 10px;height: 100%;float: left;width: 6%">
|
<div class="button-window"></div>
|
</div>
|
<div style="height: 100%;padding-left: 6%">
|
<div style="padding: 10px;height: 100%">
|
<!-- 日志监控板 -->
|
<div class="log-board">
|
<!-- 执行命令 -->
|
|
<!-- 执行命令 -->
|
<!--<div class="command-log">-->
|
<!-- <h3>执行中的命令</h3>-->
|
<!-- <div class="crn-command-item">-->
|
<!-- <label>1#</label>-->
|
<!-- <button id="demoBtn-1" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
|
<!-- <!– <span> </span>–>-->
|
<!-- <input id="crn1" disabled="disabled">-->
|
<!-- </div>-->
|
<!-- <div class="crn-command-item">-->
|
<!-- <label>2#</label>-->
|
<!-- <button id="demoBtn-2" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
|
<!-- <!– <span> </span>–>-->
|
<!-- <input id="crn2" disabled="disabled">-->
|
<!-- </div>-->
|
<!-- <div class="crn-command-item">-->
|
<!-- <label>3#</label>-->
|
<!-- <button id="demoBtn-3" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
|
<!-- <!– <span> </span>–>-->
|
<!-- <input id="crn3" disabled="disabled">-->
|
<!-- </div>-->
|
<!-- <div class="crn-command-item">-->
|
<!-- <label>4#</label>-->
|
<!-- <button id="demoBtn-4" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
|
<!-- <!– <span> </span>–>-->
|
<!-- <input id="crn4" disabled="disabled">-->
|
<!-- </div>-->
|
<!-- <div class="crn-command-item">-->
|
<!-- <label>5#</label>-->
|
<!-- <button id="demoBtn-5" class="demoBtn" onclick="demoSwitch(this.id)"> - </button>-->
|
<!-- <!– <span> </span>–>-->
|
<!-- <input id="crn5" disabled="disabled">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- RGV状态位信息 -->
|
<div class="rgv-state">
|
<table id="rgv-state-table">
|
<thead>
|
<tr>
|
<th>RGV</th>
|
<th>模式</th>
|
<th>状态</th>
|
<th>任务号1</th>
|
<th>状态1</th>
|
<th>有物1</th>
|
<th>RGV位置</th>
|
<th>走行定位</th>
|
<th>任务号2</th>
|
<th>状态2</th>
|
<th>有物2</th>
|
<th>故障代码</th>
|
<th>故障描述</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<!-- RGV状态 -->
|
<div class="rgv-msg">
|
<table id="rgv-msg-table">
|
<thead>
|
<tr>
|
<th>RGV</th>
|
<th>工作号</th>
|
<th>状态</th>
|
<th>源站</th>
|
<th>目标站</th>
|
<th>源库位</th>
|
<th>目标库位</th>
|
<!-- <th>走行速度（m/min)</th>-->
|
<!-- <th>升降速度（m/min)</th>-->
|
<!-- <th>叉牙速度（m/min)</th>-->
|
<!-- <th>走行距离(Km)</th>-->
|
<!-- <th>升降距离(Km)</th>-->
|
<!-- <th>走行时长(H)</th>-->
|
<!-- <th>升降时长(H)</th>-->
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<!-- 手动操作 -->
|
<div class="rgv-operation">
|
|
<!-- 遮罩层 -->
|
<div class="rgv-operation-shade">
|
<span class="rgv-operation-shade-span">
|
WCS 系统运行中，请停止后操作
|
</span>
|
</div>
|
|
<!-- 设备任务选择 -->
|
<div class="task-select">
|
<!-- 堆垛机选择 -->
|
<div id="rgv-select" class="operator-item" style="width: 55%">
|
<span class="select-title">RGV号</span>
|
<div class="select-container" style="padding: 20px 0;">
|
<label><input type="radio" name="rgvSelect" value="1" checked> 1号RGV</label>
|
<label><input type="radio" name="rgvSelect" value="2"> 2号RGV</label>
|
</div>
|
</div>
|
<!-- 源站/源库位 选择 -->
|
<div id="source-select" class="operator-item">
|
<span class="select-title">源站</span>
|
<div class="select-container">
|
<div class="select-container-item">
|
<span>工位1源站</span>
|
<label><input id="sourceStaNo" type="number" name="points" min="0" /></label>
|
</div>
|
<!-- <div class="select-container-item">-->
|
<!-- <span>排</span>-->
|
<!-- <label><input id="sourceRow" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
|
<!-- </div>-->
|
<div class="select-container-item">
|
<span>工位2源站</span>
|
<label><input id="sourceBay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
|
</div>
|
<!-- <div class="select-container-item">-->
|
<!-- <span>层</span>-->
|
<!-- <label><input id="sourceLev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
<!-- 目标站/目标库位 选择 -->
|
<div id="target-select" class="operator-item">
|
<span class="select-title">目标站</span>
|
<div class="select-container">
|
<div class="select-container-item">
|
<span>工位1目标站</span>
|
<label><input id="staNo" type="number" name="points" min="0" /></label>
|
</div>
|
<!-- <div class="select-container-item">-->
|
<!-- <span>排</span>-->
|
<!-- <label><input id="row" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
|
<!-- </div>-->
|
<div class="select-container-item">
|
<span>工位2目标站</span>
|
<label><input id="bay" type="number" name="points" min="0" style="background-color: #a9eeff" value="0" /></label>
|
</div>
|
<!-- <div class="select-container-item">-->
|
<!-- <span>层</span>-->
|
<!-- <label><input id="lev" type="number" name="points" min="1" style="background-color: #a9eeff" value="1" /></label>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</div>
|
|
<!-- 设备任务操作 -->
|
<div class="task-operator">
|
<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()">暂停</button>-->
|
<!-- <button class="item" onclick="boot()">启动</button>-->
|
<button class="item" onclick="clearCommand()">清除命令</button>
|
<button class="item" onclick="handleReset()">复位</button>
|
</div>
|
</fieldset>
|
</div>
|
|
</div>
|
<!-- 堆垛机日志输出 -->
|
<div class="rgv-output-board">
|
<textarea id="rgv-output"></textarea>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script>
|
// 空白行数
|
var rgvStateTableBlankRows = 0;
|
var rgvMsgTableBlankRows = 0;
|
// 实际行数
|
var rgvStateTableFullRows = 0;
|
var rgvMsgTableFullRows = 0;
|
// 初始化
|
var rgvOutputDom = document.getElementById("rgv-output");
|
$(document).ready(function() {
|
// getCommandLog();
|
initRgvStateTable();
|
getRgvStateInfo();
|
initRgvMsgTable();
|
getRgvMsgInfo();
|
operatorBlockShow();
|
});
|
// 数据更新
|
setInterval(function () {
|
getRgvStateInfo();
|
getRgvMsgInfo();
|
// getCommandLog();
|
},1000);
|
setInterval(function () {
|
getRgvOutput();
|
operatorBlockShow();
|
// initDemo();
|
},500);
|
|
// 判断手动操作模块是否可用
|
function operatorBlockShow() {
|
if (parent.systemRunning) {
|
$('.rgv-operation').css("opacity", "0.5");
|
$('.rgv-operation-shade').show();
|
$('.rgv-operation-shade-span').show();
|
} else {
|
$('.rgv-operation').css("opacity", "1");
|
$('.rgv-operation-shade').hide();
|
$('.rgv-operation-shade-span').hide();
|
}
|
}
|
|
// 获取RGV执行中的命令
|
function getCommandLog() {
|
$.ajax({
|
url: baseUrl + "/rgv/command/ongoing",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
var commands = res.data;
|
for (var i=0; i<commands.length;i++){
|
$("#rgv"+commands[i].rgvNo).val(commands[i].command);
|
}
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
})
|
}
|
|
// 堆垛机信息表获取 ---- 表一
|
function getRgvStateInfo() {
|
var tableEl = $('#rgv-state-table');
|
$.ajax({
|
url: baseUrl+ "/rgv/table/rgv/state",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
console.log(res)
|
if (res.code === 200){
|
var table = res.data;
|
if (table.length > rgvStateTableBlankRows && table.length !== rgvStateTableFullRows) {
|
initRgvStateTable(table.length-rgvStateTableBlankRows);
|
rgvStateTableFullRows = 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].rgvNo);
|
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].workNo1);
|
setVal(tr.children("td").eq(4), table[i-1].status1);
|
setVal(tr.children("td").eq(5), table[i-1].loading1);
|
setVal(tr.children("td").eq(6), table[i-1].rgvPos);
|
setVal(tr.children("td").eq(7), table[i-1].walkPos);
|
setVal(tr.children("td").eq(8), table[i-1].workNo2);
|
setVal(tr.children("td").eq(9), table[i-1].status2);
|
setVal(tr.children("td").eq(10), table[i-1].loading2);
|
setVal(tr.children("td").eq(11), table[i-1].warnCode);
|
setVal(tr.children("td").eq(12), table[i-1].alarm);
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
}
|
|
// 堆垛机数据表获取 ---- 表二
|
function getRgvMsgInfo() {
|
var tableEl = $('#rgv-msg-table');
|
$.ajax({
|
url: baseUrl+ "/rgv/table/rgv/msg",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
var table = res.data;
|
if (table.length > rgvStateTableBlankRows && table.length !== rgvMsgTableFullRows) {
|
initRgvStateTable(table.length-rgvStateTableBlankRows);
|
rgvMsgTableFullRows = 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].rgvNo);
|
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].xspeed);
|
// setVal(tr.children("td").eq(8), table[i-1].yspeed);
|
// setVal(tr.children("td").eq(9), table[i-1].zspeed);
|
// setVal(tr.children("td").eq(10), table[i-1].xdistance);
|
// setVal(tr.children("td").eq(11), table[i-1].ydistance);
|
// setVal(tr.children("td").eq(12), table[i-1].xduration);
|
// setVal(tr.children("td").eq(13), table[i-1].yduration);
|
}
|
} else if (res.code === 403){
|
window.location.href = baseUrl+"/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
});
|
}
|
|
// 堆垛机手动操作区 -----------------------------------------------------------------------
|
|
function getReqParam() {
|
var rgvNo = $('input[name="rgvSelect"]:checked').val();
|
var sourceStaNo = $('#sourceStaNo').val();
|
var sourceRow = $('#sourceRow').val();
|
var sourceBay = $('#sourceBay').val();
|
var sourceLev = $('#sourceLev').val();
|
var staNo = $('#staNo').val();
|
var row = $('#row').val();
|
var bay = $('#bay').val();
|
var lev = $('#lev').val();
|
return {
|
rgvNo: rgvNo,
|
sourceStaNo: sourceStaNo,
|
sourceRow: sourceRow,
|
sourceBay: sourceBay,
|
sourceLev: sourceLev,
|
staNo: staNo,
|
row: row,
|
bay: bay,
|
lev: lev
|
};
|
}
|
|
// 入库
|
function put() {
|
http.post(baseUrl+"/rgv/operator/put", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 出库
|
function take() {
|
http.post(baseUrl+"/rgv/operator/take", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 库位转移
|
function stockMove() {
|
http.post(baseUrl+"/rgv/operator/stockMove", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 站到站
|
function siteMove() {
|
http.post(baseUrl+"/rgv/operator/siteMove", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 坐标移动
|
function coorMove() {
|
http.post(baseUrl+"/rgv/operator/coorMove", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 回原点
|
function bacOrigin() {
|
http.post(baseUrl+"/rgv/operator/bacOrigin", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 回原点
|
function reverseOrigin() {
|
http.post(baseUrl+"/rgv/operator/reverseOrigin", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 任务完成
|
function taskComplete() {
|
http.post(baseUrl+"/rgv/operator/taskComplete", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 暂停
|
function pause() {
|
http.post(baseUrl+"/rgv/operator/pause", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 启动
|
function boot() {
|
http.post(baseUrl+"/rgv/operator/boot", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 清除命令
|
function clearCommand() {
|
http.post(baseUrl+"/rgv/operator/clearCommand", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 手动复位
|
function handleReset() {
|
http.post(baseUrl+"/rgv/operator/handleReset", getReqParam(), function (res) {
|
layer.msg(res.msg);
|
});
|
}
|
|
// 输送设备日志输出 -----------------------------------------------------------------------
|
function getRgvOutput() {
|
$.ajax({
|
url: baseUrl + "/rgv/output/site",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
console.log(res)
|
if (res.code === 200) {
|
rgvOutput(res.data);
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
console.log(res.msg);
|
}
|
}
|
})
|
}
|
|
// ------------------------------------------------------------------------------------------------
|
|
// 堆垛机信息表获取 ----- 表一
|
function initRgvStateTable(row) {
|
var line;
|
if (row === undefined){
|
var one = $('#rgv-state-table thead').height();
|
var total = $('.rgv-state').height();
|
var count = total / one;
|
count = parseInt(count) - 1;
|
rgvStateTableBlankRows = count;
|
line = count;
|
} else {
|
line = row;
|
}
|
var html = "";
|
for (var 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" +
|
" </tr>\n";
|
}
|
$('#rgv-state-table tbody').after(html);
|
}
|
|
// 堆垛机数据表获取 ----- 表二
|
function initRgvMsgTable(row) {
|
var line;
|
if (row === undefined){
|
var one = $('#rgv-msg-table thead').height();
|
var total = $('.rgv-msg').height();
|
var count = total / one;
|
count = parseInt(count) - 1;
|
rgvMsgTableBlankRows = count;
|
line = count;
|
} else {
|
line = row;
|
}
|
var html = "";
|
for (var 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" +
|
" </tr>\n";
|
}
|
$('#rgv-msg-table tbody').after(html);
|
}
|
|
// 日志输出框
|
function rgvOutput(content){
|
rgvOutputDom.value += content;
|
rgvOutputDom.scrollTop = rgvOutputDom.scrollHeight;
|
}
|
|
</script>
|
</html>
|
