<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>堆垛机监控管理</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/crn.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>
|
<style>
|
|
</style>
|
</head>
|
<body>
|
<!-- 日志监控板 -->
|
<div class="log-board">
|
<!-- 执行命令 -->
|
<div class="command-log">
|
<h2>执行中的命令</h2>
|
<div class="crn-command-item">
|
<label>1#</label>
|
<span> </span>
|
<input id="crn1" disabled="disabled">
|
</div>
|
<div class="crn-command-item">
|
<label>2#</label>
|
<span> </span>
|
<input id="crn2" disabled="disabled">
|
</div>
|
</div>
|
<!-- 堆垛机状态位信息 -->
|
<div class="crn-state">
|
<table id="crn-state-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>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
<!-- 堆垛机状态 -->
|
<div class="crn-msg">
|
<table id="crn-msg-table">
|
<thead>
|
<tr>
|
<th>堆垛机</th>
|
<th>状态</th>
|
<th>工作号</th>
|
<th>源站</th>
|
<th>目标站</th>
|
<th>源库位</th>
|
<th>目标库位</th>
|
<th>异常</th>
|
<th>原点</th>
|
<th>命令</th>
|
</tr>
|
</thead>
|
<tbody>
|
</tbody>
|
</table>
|
</div>
|
<!-- 手动操作 -->
|
<div class="crn-operation">
|
|
<!-- 设备任务选择 -->
|
<div class="task-select">
|
<!-- 堆垛机选择 -->
|
<div id="crn-select" class="operator-item">
|
<span class="select-title">堆垛机号</span>
|
<div class="select-container">
|
<label><input type="radio" name="crn" value="1" checked> 1号堆垛机</label>
|
<label><input type="radio" name="crn" value="2"> 2号堆垛机</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>站</span>
|
<label><input type="number" name="points" min="0" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>排</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>列</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>层</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></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>站</span>
|
<label><input type="number" name="points" min="0" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>排</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>列</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
|
</div>
|
<div class="select-container-item">
|
<span>层</span>
|
<label><input type="number" name="points" min="0" style="background-color: #a9eeff" /></label>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 设备任务操作 -->
|
<div class="task-operator">
|
<fieldset>
|
<legend>手动操作</legend>
|
<div class="button-group">
|
<button class="item">入库</button>
|
<button class="item">出库</button>
|
<button class="item">库位转移</button>
|
<button class="item">站到站</button>
|
<button class="item">坐标移动</button>
|
<button class="item">回原点</button>
|
<button class="item">任务完成</button>
|
<button class="item">暂停</button>
|
<button class="item">启动</button>
|
<button class="item">清除命令</button>
|
</div>
|
</fieldset>
|
</div>
|
|
</div>
|
<!-- 堆垛机日志输出 -->
|
<div class="crn-output-board">
|
<textarea id="crn-output"></textarea>
|
</div>
|
</body>
|
<script>
|
|
// 空白行数
|
var crnStateTableBlankRows = 0;
|
var crnMsgTableBlankRows = 0;
|
// 实际行数
|
var crnStateTableFullRows = 0;
|
var crnMsgTableFullRows = 0;
|
// 初始化
|
var crnOutputDom = document.getElementById("crn-output");
|
$(document).ready(function() {
|
initCrnStateTable();
|
getCrnStateInfo();
|
initCrnMsgTable();
|
});
|
// 数据更新
|
setInterval(function () {
|
getCrnStateInfo();
|
},500);
|
setInterval(function () {
|
getSiteOutput();
|
},500);
|
|
|
// 堆垛机信息表获取 ---- 表一
|
function getCrnStateInfo() {
|
var tableEl = $('#crn-state-table');
|
$.ajax({
|
url: baseUrl+ "/crn/table/crn/state",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200){
|
var table = res.data;
|
if (table.length > crnStateTableBlankRows && table.length !== crnStateTableFullRows) {
|
initCrnStateTable(table.length-crnStateTableBlankRows);
|
crnStateTableFullRows = 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].crnNo);
|
setVal(tr.children("td").eq(1), table[i-1].type);
|
setVal(tr.children("td").eq(2), table[i-1].warn);
|
setVal(tr.children("td").eq(3), table[i-1].loading);
|
setVal(tr.children("td").eq(4), table[i-1].bay);
|
setVal(tr.children("td").eq(5), table[i-1].lev);
|
setVal(tr.children("td").eq(6), table[i-1].forkOffset);
|
setVal(tr.children("td").eq(7), table[i-1].bayCoor);
|
setVal(tr.children("td").eq(8), table[i-1].levCoor);
|
setVal(tr.children("td").eq(9), table[i-1].complete);
|
setVal(tr.children("td").eq(10), table[i-1].workNo);
|
setVal(tr.children("td").eq(11), table[i-1].status);
|
setVal(tr.children("td").eq(12), table[i-1].warnCode);
|
}
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/login";
|
} else {
|
alert(res.msg);
|
}
|
}
|
});
|
}
|
|
// 输送设备日志输出
|
function getSiteOutput() {
|
$.ajax({
|
url: baseUrl + "/crn/output/site",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
crnOutput(res.data);
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/login";
|
} else {
|
alert(res.msg);
|
}
|
}
|
})
|
}
|
|
// ------------------------------------------------------------------------------------------------
|
|
// 堆垛机信息表获取 ----- 表一
|
function initCrnStateTable(row) {
|
var line;
|
if (row === undefined){
|
var one = $('#crn-state-table thead').height();
|
var total = $('.crn-state').height();
|
var count = total / one;
|
count = parseInt(count) - 1;
|
crnStateTableBlankRows = 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";
|
}
|
$('#crn-state-table tbody').after(html);
|
}
|
|
// 堆垛机数据表获取 ----- 表二
|
function initCrnMsgTable(row) {
|
var line;
|
if (row === undefined){
|
var one = $('#crn-msg-table thead').height();
|
var total = $('.crn-msg').height();
|
var count = total / one;
|
count = parseInt(count) - 1;
|
crnMsgTableBlankRows = 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" +
|
" </tr>\n";
|
}
|
$('#crn-msg-table tbody').after(html);
|
}
|
|
// 日志输出框
|
function crnOutput(content){
|
crnOutputDom.value += content;
|
crnOutputDom.scrollTop = crnOutputDom.scrollHeight;
|
}
|
|
|
|
</script>
|
</html>
|
