From 432aa30874196937f6250b34c7ef6fb62dbaf984 Mon Sep 17 00:00:00 2001 From: zjj <3272660260@qq.com> Date: 星期六, 29 三月 2025 15:52:14 +0800 Subject: [PATCH] # --- src/main/webapp/views/pipeline.html | 871 +++++++++++++++++++++++++++------------------------------ 1 files changed, 408 insertions(+), 463 deletions(-) diff --git a/src/main/webapp/views/pipeline.html b/src/main/webapp/views/pipeline.html index de76ec4..beffbf3 100644 --- a/src/main/webapp/views/pipeline.html +++ b/src/main/webapp/views/pipeline.html @@ -10,488 +10,326 @@ <link rel="stylesheet" type="text/css" href="../static/css/common.css"> <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> - .plc-log-header { - height: 15%; - } - .plc-log-body { - height: 85%; - overflow: auto; - } - - - /* 绔欑偣琛ㄦ牸 */ - #site-table { - font-size: 12px; - border-collapse: collapse; - margin: 0 auto; + .io-mode-box { + float: left; + width: 16%; text-align: center; } - #site-table td, #site-table th { - border: 1px solid #cad9ea; - color: #666; - height: 25px; + .io-mode-box label { + font-weight: bolder; } - #site-table thead th { - background-color: #CCE8EB; - width: 100px; + .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; } - #site-table tr:nth-child(odd) { - background: #fff; - } - #site-table tr:nth-child(even) { - background: #F5FAFA; - } - - - - /* plc寮傚父琛ㄦ牸 */ - #plc-error-table { - font-size: 12px; - border-collapse: collapse; - margin: 0 auto; - } - #plc-error-table td, #plc-error-table th { - border: 1px solid #cad9ea; - color: #666; - height: 25px; - text-align: left; - padding-left: 5px; - } - #plc-error-table thead th { - background-color: #CCE8EB; - width: 100px; - } - #plc-error-table tr:nth-child(odd) { - background: #fff; - } - #plc-error-table tr:nth-child(even) { - background: #F5FAFA; - } - </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 class="io-mode-oper">--> +<!-- <fieldset>--> +<!-- <legend>鍏ュ嚭搴撴ā寮忥紙IO-Mode锛�</legend>--> +<!-- <div class="io-mode-box">--> +<!-- <label>F2</label>--> +<!-- <button id="io-mode-2" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>--> +<!-- </div>--> +<!-- <div class="io-mode-box">--> +<!-- <label>F4</label>--> +<!-- <button id="io-mode-4" class="ioModeBtn" onclick="ioModeSwitch(this.id)"> - </button>--> +<!-- </div>--> +<!-- </fieldset>--> +<!-- </div>--> +<!-- <!– <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"> + <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 鍔爐able-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> - </tbody> - </table> + </thead> + <!-- 琛ㄦ牸鍐呭 --> + <tbody></tbody> + </table> + </div> + </main> + <footer> + <textarea id="output"></textarea> + </footer> + + <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 stop = false + var plcErrorTableBlankRows = 0; + var siteTableBlankRows = 0; + // 瀹為檯琛屾暟 + var plcErrorTableFullRows = 0; + var siteTableFullRows = 0; var outputDom = document.getElementById("output"); - - // 绌虹櫧琛ㄦ牸娓叉煋 $(document).ready(function() { - var one = $('#plc-error-table thead').height(); - var total = $('.plc-log-body').height(); - var count = total / one; - count = parseInt(count); - var html = ""; - for (var i = 0; i < count-1; i ++){ - html += " <tr>\n" + - " <td></td>\n" + - " <td></td>\n" + - " <td></td>\n" + - " </tr>\n"; - } - $('#plc-error-table tbody').after(html); + getIoModeInfo(); + initPlcErrorTable(); + getPlcError(); + initSiteTable(); + getSite(); }); + // 瀹炴椂璁块棶 + setInterval(function () { + getPlcError(); + starGetSite(); + getIoModeInfo(); + }, 1000); + setInterval(function () { + getSiteOutput(); + },500); + function starGetSite() { + if (stop) { + return + } else { + getSite(); + } + } - // plc寮傚父杈撳叆 - function addPlcError(val) { + 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() { + var tableEl = $('#plc-error-table'); + tableEl.children("tr").children("td").html(""); + $.ajax({ + url: baseUrl+ "/site/table/plc/errors", + headers: {'token': localStorage.getItem('token')}, + method: 'POST', + success: function (res) { + if (res.code === 200){ + var table = res.data; + for (var i=1;i<=table.length;i++){ + var tr = tableEl.find("tr").eq(i); + tr.children("td").eq(0).html(table[i-1].no); + tr.children("td").eq(1).html(table[i-1].plcDesc); + tr.children("td").eq(2).html(table[i-1].error); + } + } else if (res.code === 403){ + window.location.href = baseUrl+"/login"; + } else { + 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].finishWorkNo); + 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); + } + } + }) } // 鏃ュ織杈撳嚭妗� @@ -499,10 +337,117 @@ outputDom.value += content; outputDom.scrollTop = outputDom.scrollHeight; } - setInterval(function () { - output("\n" +new Date().toLocaleString() + "銆�2020-5-29 13:14:22銆戞壂鎻弍lcA 鐩爣绔�--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> \ No newline at end of file -- Gitblit v1.9.1