zy-wcs.git - Gitblit

			@@ -2,9 +2,227 @@
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>Title</title>
			<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>
			<h1>LED</h1>
			<!-- 日志监控板 -->
			<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 crnOutputDom = document.getElementById("crn-output");

			// 空白表格渲染
			$(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);
			});

			// 日志输出框
			function crnOutput(content){
			crnOutputDom.value += content;
			crnOutputDom.scrollTop = crnOutputDom.scrollHeight;
			}
			setInterval(function () {
			crnOutput("\n" +new Date().toLocaleString() + "【2020-5-29 13:14:22】扫描plcA 目标站--273283723728327636432343234323422732837237283276364323432343234227328372372832763643234323432342");
			},500);


			</script>
			</html>