<!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>
|
<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>
|
<!-- 堆垛机日志输出 -->
|
<div class="crn-output">
|
|
</div>
|
</body>
|
<script>
|
|
// 空白表格渲染
|
$(document).ready(function() {
|
// 表一
|
var one1 = $('#crn-state-table thead').height();
|
var total1 = $('.crn-state').height();
|
var count1 = total1 / one1;
|
count1 = parseInt(count1);
|
var html1 = "";
|
for (var i = 0; i < count1; i ++){
|
html1 += " <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(html1);
|
|
// 表二
|
var one2 = $('#crn-msg-table thead').height();
|
var total2 = $('.crn-msg').height();
|
var count2 = total2 / one2;
|
count2 = parseInt(count2);
|
var html2 = "";
|
for (var i = 0; i < count2; i ++){
|
html2 += " <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(html2);
|
});
|
|
</script>
|
</html>
|
