| | |
| | | <link rel="stylesheet" type="text/css" href="../static/css/pipeline.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> |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <main> |
| | | <!-- plc异常日志监控版 --> |
| | | <div id="plc-error" class="main-board" style="padding-left: 10px"> |
| | | <!-- 头部 --> |
| | | <div class="plc-log-header"> |
| | | <div style="height: 40%"> |
| | | <span>东侧PLC执行指令</span> |
| | | <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%"> |
| | | <main> |
| | | |
| | | <!-- plc异常日志监控版 --> |
| | | <div id="plc-error" class="main-board" style="padding-left: 10px"> |
| | | <!-- 头部 --> |
| | | <div class="plc-log-header"> |
| | | <!-- <div style="height: 40%">--> |
| | | <!-- <span>东侧PLC执行指令</span>--> |
| | | <!-- </div>--> |
| | | <!-- <div style="height: 40%">--> |
| | | <!-- <span>西侧PLC执行指令</span>--> |
| | | <!-- </div>--> |
| | | <div> |
| | | <span style="color: #1E9FFF">PLC异常信息表:</span> |
| | | </div> |
| | | </div> |
| | | <!-- 主体 --> |
| | | <div class="plc-log-body"> |
| | | <table id="plc-error-table"> |
| | | <thead> |
| | | <tr> |
| | | <th style="width: 200px">序号</th> |
| | | <th style="width: 400px">PLC错误描述</th> |
| | | <th style="width: 400px">异常</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | <div style="height: 40%"> |
| | | <span>西侧PLC执行指令</span> |
| | | </div> |
| | | <div> |
| | | <span style="color: #1E9FFF">PLC异常信息表:</span> |
| | | </div> |
| | | </div> |
| | | <!-- 主体 --> |
| | | <div class="plc-log-body"> |
| | | <table id="plc-error-table"> |
| | | <thead> |
| | | |
| | | <!-- 站点状态数据监控版 --> |
| | | <div id="site-monitor" class="main-board"> |
| | | <!-- 表格 --> |
| | | <!--固定表头 table 加table-layout: fixed; th 加 position:sticky;top: 0;--> |
| | | <table id="site-table" style="table-layout: fixed;"> |
| | | <!-- 表头 --> |
| | | <thead style="position:sticky;top: 0;"> |
| | | <tr> |
| | | <th style="width: 200px">序号</th> |
| | | <th style="width: 400px">PLC错误描述</th> |
| | | <th style="width: 400px">异常</th> |
| | | <th>站号</th> |
| | | <th>工作号</th> |
| | | <th>自动</th> |
| | | <th>有物</th> |
| | | <th>可入</th> |
| | | <th>可出</th> |
| | | <th>入库标记</th> |
| | | <th>空板信号</th> |
| | | <th>目标站</th> |
| | | <th>高低库位</th> |
| | | </tr> |
| | | </thead> |
| | | <tbody> |
| | | </thead> |
| | | <!-- 表格内容 --> |
| | | <tbody></tbody> |
| | | </table> |
| | | </div> |
| | | </main> |
| | | <footer> |
| | | <textarea id="output"></textarea> |
| | | </footer> |
| | | |
| | | </tbody> |
| | | </table> |
| | | <div id="site-detl" style="display: none"> |
| | | <form> |
| | | <div class="form-item"> |
| | | <label class="form-label">站号:</label> |
| | | <div class="form-input"> |
| | | <input id="siteId" name="siteId" class="layui-input" lay-verify="required|number" autocomplete="off" disabled="disabled"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">工作号:</label> |
| | | <div class="form-input"> |
| | | <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">目标站:</label> |
| | | <div class="form-input"> |
| | | <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item"> |
| | | <label class="form-label">入库标记:</label> |
| | | <div class="form-input"> |
| | | <input id="pakMk" name="pakMk" type="text" class="layui-input" autocomplete="off"> |
| | | </div> |
| | | </div> |
| | | <div class="form-item form-button-container"> |
| | | <button class="form-button" id="save">保存</button> |
| | | <button class="form-button" id="cancel" style="background-color: #D0D0D0">取消</button> |
| | | </div> |
| | | </form> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 站点状态数据监控版 --> |
| | | <div id="site-monitor" class="main-board"> |
| | | <!-- 表格 --> |
| | | <table id="site-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> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | <tr> |
| | | <td>12</td> |
| | | <td>2223</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>Y</td> |
| | | <td>N</td> |
| | | <td>1</td> |
| | | <td>1204</td> |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | </div> |
| | | </main> |
| | | <footer> |
| | | <textarea id="output"></textarea> |
| | | </footer> |
| | | </div> |
| | | </body> |
| | | <script> |
| | | // 初始化 |
| | | var plcErrorTableFieldCount = 0; |
| | | // 空白行数 |
| | | var stop = false |
| | | var plcErrorTableBlankRows = 0; |
| | | var siteTableBlankRows = 0; |
| | | // 实际行数 |
| | | var plcErrorTableFullRows = 0; |
| | | var siteTableFullRows = 0; |
| | | var outputDom = document.getElementById("output"); |
| | | $(document).ready(function() { |
| | | initPlcErrorTable(); |
| | | getPlcError(); |
| | | initSiteTable(); |
| | | getSite(); |
| | | }); |
| | | // 实时访问 |
| | | setInterval(function () { |
| | | getPlcError(); |
| | | starGetSite(); |
| | | }, 1000); |
| | | |
| | | // 空白表格渲染 |
| | | $(document).ready(function() { |
| | | var one = $('#plc-error-table thead').height(); |
| | | var total = $('.plc-log-body').height(); |
| | | var count = total / one; |
| | | count = parseInt(count); |
| | | plcErrorTableFieldCount = count - 1; |
| | | var html = ""; |
| | | for (var i = 0; i < count-1; i ++){ |
| | | html += " <tr>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " <td></td>\n" + |
| | | " </tr>\n"; |
| | | setInterval(function () { |
| | | getSiteOutput(); |
| | | },500); |
| | | function starGetSite() { |
| | | if (stop) { |
| | | return |
| | | } else { |
| | | getSite(); |
| | | } |
| | | $('#plc-error-table tbody').after(html); |
| | | |
| | | getPlcError(); |
| | | }); |
| | | |
| | | } |
| | | // plc异常信息表获取 |
| | | function getPlcError() { |
| | | var tableEl = $('#plc-error-table'); |
| | |
| | | tr.children("td").eq(2).html(table[i-1].error); |
| | | } |
| | | } else if (res.code === 403){ |
| | | top.location.href = baseUrl+"/login"; |
| | | window.location.href = baseUrl+"/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 站点信息表获取 |
| | | function getSite() { |
| | | var tableEl = $('#site-table'); |
| | | $.ajax({ |
| | | url: baseUrl+ "/site/table/site", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | var table = res.data; |
| | | if (table.length > siteTableBlankRows && table.length !== siteTableFullRows) { |
| | | initSiteTable(table.length-siteTableBlankRows); |
| | | siteTableFullRows = 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].devNo); |
| | | setVal(tr.children("td").eq(1), table[i-1].workNo); |
| | | setVal(tr.children("td").eq(2), table[i-1].autoing); |
| | | setVal(tr.children("td").eq(3), table[i-1].loading); |
| | | setVal(tr.children("td").eq(4), table[i-1].inEnable); |
| | | setVal(tr.children("td").eq(5), table[i-1].outEnable); |
| | | setVal(tr.children("td").eq(6), table[i-1].pakMk); |
| | | setVal(tr.children("td").eq(7), table[i-1].emptyMk); |
| | | setVal(tr.children("td").eq(8), table[i-1].staNo); |
| | | setVal(tr.children("td").eq(9), table[i-1].locType1); |
| | | } |
| | | } else if (res.code === 403){ |
| | | window.location.href = baseUrl+"/login"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 输送设备日志输出 |
| | | function getSiteOutput() { |
| | | $.ajax({ |
| | | url: baseUrl + "/site/output/site", |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | method: 'POST', |
| | | success: function (res) { |
| | | if (res.code === 200) { |
| | | output(res.data); |
| | | } else if (res.code === 403) { |
| | | window.location.href = baseUrl + "/login"; |
| | | } else { |
| | | alert(res.msg); |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 日志输出框 |
| | |
| | | outputDom.value += content; |
| | | outputDom.scrollTop = outputDom.scrollHeight; |
| | | } |
| | | setInterval(function () { |
| | | output("\n" +new Date().toLocaleString() + "【2020-5-29 13:14:22】扫描plcA 目标站--27328372372832763643234323432342"); |
| | | },500); |
| | | |
| | | // ------------------------------------------------------------------------------------------------ |
| | | |
| | | // plc异常空白表格渲染 |
| | | function initPlcErrorTable(row) { |
| | | var line; |
| | | if (row === undefined){ |
| | | var one = $('#plc-error-table thead').height(); |
| | | var total = $('.plc-log-body').height(); |
| | | var count = total / one; |
| | | count = parseInt(count) - 1; |
| | | plcErrorTableBlankRows = 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" + |
| | | " </tr>\n"; |
| | | } |
| | | $('#plc-error-table tbody').after(html); |
| | | } |
| | | |
| | | // 站点空白表格渲染 |
| | | function initSiteTable(row) { |
| | | var line; |
| | | if (row === undefined){ |
| | | var one = $('#site-table thead').height(); |
| | | var total = $('#site-monitor').height(); |
| | | var count = total / one; |
| | | count = parseInt(count) - 1; |
| | | siteTableBlankRows = 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"; |
| | | } |
| | | $('#site-table tbody').after(html); |
| | | } |
| | | |
| | | // 详情操作 ------------------------------------------------------------------------- |
| | | var layerDetl; |
| | | $(document).on('dblclick ','#site-table tr', function () { |
| | | stop = true |
| | | var siteId = $(this).children("td").eq(0).html(); |
| | | if (siteId !== null && siteId !== "") { |
| | | layerDetl = layer.open({ |
| | | type: 1, |
| | | title: false, |
| | | shadeClose: true, |
| | | offset: 'rt', |
| | | anim: 5, |
| | | shade: [0], |
| | | area: ['340px', '255px'], |
| | | closeBtn: 0, |
| | | content: $("#site-detl"), |
| | | success: function(layero, index){ |
| | | http.get(baseUrl+ "/site/detl/"+siteId, null, function (res) { |
| | | $('#siteId').val(siteId); |
| | | $('#workNo').val(res.data.workNo); |
| | | $('#staNo').val(res.data.staNo); |
| | | $('#pakMk').val(res.data.pakMk); |
| | | }) |
| | | }, |
| | | end: function () { |
| | | $('#siteId').val(""); |
| | | $('#workNo').val(""); |
| | | $('#staNo').val(""); |
| | | $('#pakMk').val(""); |
| | | stop = false |
| | | } |
| | | }) |
| | | } |
| | | |
| | | }); |
| | | |
| | | $(document).on('click ','#save', function () { |
| | | http.post(baseUrl+ "/site//detl/update", { |
| | | siteId: $('#siteId').val(), |
| | | workNo: $('#workNo').val(), |
| | | staNo: $('#staNo').val(), |
| | | pakMk: $('#pakMk').val() |
| | | }, function (res) { |
| | | layer.msg("修改成功",{icon: 1,}); |
| | | }) |
| | | }) |
| | | $(document).on('click ','#cancel', function () { |
| | | $('#siteId').val(""); |
| | | $('#workNo').val(""); |
| | | $('#staNo').val(""); |
| | | $('#pakMk').val(""); |
| | | layer.close(layerDetl); |
| | | }) |
| | | |
| | | </script> |
| | | </html> |