|  |  | 
 |  |  |     <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/pipeline.css"> | 
 |  |  |     <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" media="all"> | 
 |  |  |     <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> | 
 |  |  |  | 
 |  |  |         .io-mode-box { | 
 |  |  |             float: left; | 
 |  |  |             width: 16%; | 
 |  |  |             text-align: center; | 
 |  |  |             margin-top: 10px; | 
 |  |  |         } | 
 |  |  |         .io-mode-box label { | 
 |  |  |             font-weight: bolder; | 
 |  |  |         } | 
 |  |  |         .ioModeBtn { | 
 |  |  |             vertical-align: middle; | 
 |  |  |             width: 50%; | 
 |  |  |             height: 30px; | 
 |  |  |             left: 0; | 
 |  |  |             top: 0; | 
 |  |  |             text-shadow: inherit; | 
 |  |  |             font-size: 15px; | 
 |  |  |             margin-left: 5px; | 
 |  |  |             margin-right: 5px; | 
 |  |  |             display: inline-block; | 
 |  |  |             background-color: #FF5722; | 
 |  |  |             border: none; | 
 |  |  |             color: #FFF; | 
 |  |  |             box-shadow: 1px 1px 5px #B6B6B6; | 
 |  |  |             border-radius: 3px; | 
 |  |  |             cursor: pointer; | 
 |  |  |         } | 
 |  |  |     </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-body"> | 
 |  |  |                     <div> | 
 |  |  |                         <span style="color: #1E9FFF">PLC异常信息表:</span> | 
 |  |  |                     </div> | 
 |  |  |                     <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> | 
 |  |  |                         <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>需求1</th> | 
 |  |  |                     <th>空板信号</th> | 
 |  |  |                     <th>目标站</th> | 
 |  |  |                 </tr> | 
 |  |  |             </thead> | 
 |  |  |             <!-- 表格内容 --> | 
 |  |  |             <tbody></tbody> | 
 |  |  |         </table> | 
 |  |  |     </div> | 
 |  |  | </main> | 
 |  |  | <footer> | 
 |  |  |     <textarea id="output"></textarea> | 
 |  |  | </footer> | 
 |  |  |  | 
 |  |  | <div id="site-detl" style="display: none"> | 
 |  |  |     <div class="layui-form"> | 
 |  |  |         <div class="layui-form-item"> | 
 |  |  |             <label class="layui-form-label layui-form-required">站点:</label> | 
 |  |  |             <div class="layui-input-block"> | 
 |  |  |                 <input id="siteId" name="siteId" placeholder="请输入站点编号" class="layui-input" lay-verify="required|number" autocomplete="off"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="layui-form-item"> | 
 |  |  |             <label class="layui-form-label layui-form-required">工作号:</label> | 
 |  |  |             <div class="layui-input-block"> | 
 |  |  |                 <input id="workNo" name="workNo" type="number" placeholder="请输入工作号" class="layui-input" lay-verify="number" autocomplete="off"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="layui-form-item"> | 
 |  |  |             <label class="layui-form-label layui-form-required">目标站:</label> | 
 |  |  |             <div class="layui-input-block"> | 
 |  |  |                 <input id="staNo" name="staNo" type="number" placeholder="请输入目标站" class="layui-input" lay-verify="number" autocomplete="off"> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="layui-form-item cool-button-contain"> | 
 |  |  |             <button class="layui-btn layui-btn-normal" id="print" lay-filter="print" lay-submit="">打印</button> | 
 |  |  |             <button class="layui-btn layui-btn-primary" id="cancel">取消</button> | 
 |  |  |         </div> | 
 |  |  |     </div> | 
 |  |  | </div> | 
 |  |  | </body> | 
 |  |  | <script> | 
 |  |  |     // 初始化 | 
 |  |  |     // 空白行数 | 
 |  |  |     var stop = false | 
 |  |  |     var plcErrorTableBlankRows = 0; | 
 |  |  |     var siteTableBlankRows = 0; | 
 |  |  |     // 实际行数 | 
 |  |  | 
 |  |  |     var siteTableFullRows = 0; | 
 |  |  |     var outputDom = document.getElementById("output"); | 
 |  |  |     $(document).ready(function() { | 
 |  |  |         getIoModeInfo(); | 
 |  |  |         initPlcErrorTable(); | 
 |  |  |         getPlcError(); | 
 |  |  |         initSiteTable(); | 
 |  |  | 
 |  |  |     // 实时访问 | 
 |  |  |     setInterval(function () { | 
 |  |  |         getPlcError(); | 
 |  |  |         getSite(); | 
 |  |  |         starGetSite(); | 
 |  |  |         getIoModeInfo(); | 
 |  |  |     }, 1000); | 
 |  |  |     setInterval(function () { | 
 |  |  |         getSiteOutput(); | 
 |  |  |     },500); | 
 |  |  |  | 
 |  |  |     $(document).on('click','#site-table tr', function () { | 
 |  |  |         var siteId = $(this).children("td").eq(0).html(); | 
 |  |  |         if (siteId !== null && siteId !== "") { | 
 |  |  |             layer.open({ | 
 |  |  |                 type: 1, | 
 |  |  |                 title: false, | 
 |  |  |                 shadeClose: true, | 
 |  |  |                 offset: 'rt', | 
 |  |  |                 anim: 5, | 
 |  |  |                 shade: [0], | 
 |  |  |                 area: ['340px', '215px'], | 
 |  |  |                 closeBtn: 0, | 
 |  |  |                 content: $("#site-detl"), | 
 |  |  |                 success: function(layero, index){ | 
 |  |  |  | 
 |  |  |                 } | 
 |  |  |             }) | 
 |  |  |     function starGetSite() { | 
 |  |  |         if (stop) { | 
 |  |  |             return | 
 |  |  |         } else { | 
 |  |  |             getSite(); | 
 |  |  |         } | 
 |  |  |     }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     var ioModeData; | 
 |  |  |     function getIoModeInfo() { | 
 |  |  |         $.ajax({ | 
 |  |  |             url: baseUrl+ "/site/io/mode/info/site", | 
 |  |  |             headers: {'token': localStorage.getItem('token')}, | 
 |  |  |             method: 'GET', | 
 |  |  |             success: function (res) { | 
 |  |  |                 if (res.code === 200){ | 
 |  |  |                     ioModeData = res.data; | 
 |  |  |                     ioModeData.forEach(function (e) { | 
 |  |  |                         $("#io-mode-"+e.floor).html(e.modeDesc); | 
 |  |  |                     }) | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     /** | 
 |  |  |      * 强制切换入出库模式 | 
 |  |  |      */ | 
 |  |  |     function ioModeSwitch(el) { | 
 |  |  |         var floor = el.split("-")[2]; | 
 |  |  |         if (ioModeData != null && ioModeData.length > 1) { | 
 |  |  |             ioModeData.forEach(function(e) { | 
 |  |  |                 if (e.floor === Number(floor)) { | 
 |  |  |                     if (e.modeVal === 3 || e.modeVal === 4) { | 
 |  |  |                         layer.confirm('确定切换为入库模式吗?',function () { | 
 |  |  |                             $.ajax({ | 
 |  |  |                                 url: baseUrl+ "/site/io/mode/action/site", | 
 |  |  |                                 headers: {'token': localStorage.getItem('token')}, | 
 |  |  |                                 data: {floor: e.floor}, | 
 |  |  |                                 method: 'POST', | 
 |  |  |                                 success: function (res) { | 
 |  |  |                                     if (res.code === 200){ | 
 |  |  |                                         layer.msg("暂时不能切换!", {icon: 1}) | 
 |  |  |                                     } else if (res.code === 403){ | 
 |  |  |                                         window.location.href = baseUrl+"/login"; | 
 |  |  |                                     }  else { | 
 |  |  |                                         console.log(res.msg); | 
 |  |  |                                     } | 
 |  |  |                                 } | 
 |  |  |                             }); | 
 |  |  |                             layer.closeAll(); | 
 |  |  |                         }) | 
 |  |  |                     } | 
 |  |  |                 } | 
 |  |  |             }); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     // plc异常信息表获取 | 
 |  |  |     function getPlcError() { | 
 |  |  | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  | 
 |  |  |                         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].inreq1); | 
 |  |  |                         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(9), table[i-1].staNo); | 
 |  |  |                         setVal(tr.children("td").eq(8), table[i-1].staNo); | 
 |  |  |                         setVal(tr.children("td").eq(9), table[i-1].locType1); | 
 |  |  |                         setVal(tr.children("td").eq(10), table[i-1].autoOut); | 
 |  |  |                         setVal(tr.children("td").eq(11), table[i-1].autoIn); | 
 |  |  |                     } | 
 |  |  |                 } else if (res.code === 403){ | 
 |  |  |                     window.location.href = baseUrl+"/login"; | 
 |  |  |                 }  else { | 
 |  |  |                     alert(res.msg); | 
 |  |  |                     console.log(res.msg); | 
 |  |  |                 } | 
 |  |  |             } | 
 |  |  |         }); | 
 |  |  | 
 |  |  |                 "       <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> |