| | |
|---|
| | | <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> |
|---|
| | | <!-- 堆垛机日志输出 --> |
|---|
| | | <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> |
|---|
