From 7beb05d90c35c4cffbf171e3cdf7784a6861ecea Mon Sep 17 00:00:00 2001 From: vincent <1341870251@qq.com> Date: 星期一, 01 六月 2020 10:10:12 +0800 Subject: [PATCH] # --- src/main/webapp/views/crn.html | 136 ++++++++++++++++++++++++++ src/main/webapp/views/index.html | 2 src/main/webapp/static/css/crn.css | 123 ++++++++++++++++++++++++ 3 files changed, 258 insertions(+), 3 deletions(-) diff --git a/src/main/webapp/static/css/crn.css b/src/main/webapp/static/css/crn.css new file mode 100644 index 0000000..e749bbc --- /dev/null +++ b/src/main/webapp/static/css/crn.css @@ -0,0 +1,123 @@ +body { + padding: 10px; + background-color: #f1f1f1; +} + +/* 绗竴妯″潡 */ +.log-board { + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 3px rgba(0,0,0,.3); + height: 25%; +} + +/* 宸� */ +.command-log { + float: left; + height: 100%; + width: 20%; + text-align: center; +} +.command-log h2 { + padding: 10px; +} +.crn-command-item { + padding: 20px 0; +} +.crn-command-item label { + font-size: 20px; + font-weight: bold; + vertical-align: middle; +} +.crn-command-item span { + display: inline-block; + width: 20px; + height: 20px; + background-color: #2e9926; + border-radius: 5px; + vertical-align: middle; +} +.crn-command-item input { + vertical-align: middle; + outline: none; + width: 70%; +} + +/* 鍙� */ +.crn-state { + float: left; + height: 100%; + width: 80%; + overflow: hidden; +} +/* 鍫嗗灈鏈虹姸鎬佽〃 */ +#crn-state-table { + font-size: 12px; + border-collapse: collapse; + margin: 0 auto; + text-align: center; +} +#crn-state-table td, #crn-state-table th { + border: 1px solid #cad9ea; + color: #666; + height: 25px; +} +#crn-state-table thead th { + background-color: #CCE8EB; + width: 300px; +} +#crn-state-table tr:nth-child(odd) { + background: #fff; +} +#crn-state-table tr:nth-child(even) { + background: #F5FAFA; +} + +/* 绗簩妯″潡 */ +.crn-msg { + overflow: hidden; + margin-top: 10px; + height: 20%; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 3px rgba(0,0,0,.3); +} +/* 鍫嗗灈鏈虹姸鎬佷俊鎭〃 */ +#crn-msg-table { + font-size: 12px; + border-collapse: collapse; + margin: 0 auto; + text-align: center; +} +#crn-msg-table td, #crn-msg-table th { + border: 1px solid #cad9ea; + color: #666; + height: 25px; +} +#crn-msg-table thead th { + background-color: #CCE8EB; + width: 400px; +} +#crn-msg-table tr:nth-child(odd) { + background: #fff; +} +#crn-msg-table tr:nth-child(even) { + background: #F5FAFA; +} + +/* 绗笁妯″潡 */ +.crn-operation { + margin-top: 10px; + height: 25%; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 3px rgba(0,0,0,.3); +} + +.crn-output { + margin-top: 10px; + height: 23%; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 0 3px rgba(0,0,0,.3); +} diff --git a/src/main/webapp/views/crn.html b/src/main/webapp/views/crn.html index 85a8695..02f6e9d 100644 --- a/src/main/webapp/views/crn.html +++ b/src/main/webapp/views/crn.html @@ -2,9 +2,141 @@ <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> \ No newline at end of file diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html index 3597ce9..8fbdc8e 100644 --- a/src/main/webapp/views/index.html +++ b/src/main/webapp/views/index.html @@ -30,7 +30,7 @@ </ul> <!-- 涓讳綋鍐呭 --> - <iframe id="content" src="pipeline.html"></iframe> + <iframe id="content" src="crn.html"></iframe> <footer class="footer"> Copyright 漏 2015 All Rights Reserved. <a href="http://www.zoneyung.com" target="_blank">娴欐睙涓壃鐗╂祦瑁呭鏈夐檺鍏徃</a> 淇濈暀鎵�鏈夋潈鍒� -- Gitblit v1.9.1