From b51f97492d47356db65aa8a58b98833d526ac728 Mon Sep 17 00:00:00 2001
From: zhang <zc857179121@qq.com>
Date: 星期二, 24 二月 2026 10:14:17 +0800
Subject: [PATCH] 页面先这样
---
zy-acs-cv/src/main/java/com/zy/core/thread/SiemensDevpThread.java | 2
zy-acs-cv/src/main/webapp/static/css/pipeline.css | 207 ---------
zy-acs-cv/src/main/java/com/zy/core/ConveyorBackgroundService.java | 2
zy-acs-cv/src/main/java/com/zy/core/cache/OutputQueue.java | 6
zy-acs-cv/src/main/webapp/views/pipeline.html | 1048 +++++++++++++++++++++++++++++++++++++++-------
5 files changed, 877 insertions(+), 388 deletions(-)
diff --git a/zy-acs-cv/src/main/java/com/zy/core/ConveyorBackgroundService.java b/zy-acs-cv/src/main/java/com/zy/core/ConveyorBackgroundService.java
index 70f2413..736f7c6 100644
--- a/zy-acs-cv/src/main/java/com/zy/core/ConveyorBackgroundService.java
+++ b/zy-acs-cv/src/main/java/com/zy/core/ConveyorBackgroundService.java
@@ -61,7 +61,7 @@
try {
// 鎵ц閰嶇疆鐨勬搷浣滃簭鍒�
for (CtuOperationConfig config : properties.getOperations()) {
- log.info("鎵ц杈撻�佺嚎鎿嶄綔: {}", config.getType());
+ //log.info("鎵ц杈撻�佺嚎鎿嶄綔: {}", config.getType());
operationExecutor.execute(config);
}
diff --git a/zy-acs-cv/src/main/java/com/zy/core/cache/OutputQueue.java b/zy-acs-cv/src/main/java/com/zy/core/cache/OutputQueue.java
index 65df862..4377e94 100644
--- a/zy-acs-cv/src/main/java/com/zy/core/cache/OutputQueue.java
+++ b/zy-acs-cv/src/main/java/com/zy/core/cache/OutputQueue.java
@@ -9,12 +9,10 @@
*/
public class OutputQueue {
- // 鍫嗗灈鏈鸿緭鍑烘棩蹇�
- public static ArrayBlockingQueue<String> CRN = new ArrayBlockingQueue<>(32);
+
// 杈撻�佺嚎杈撳嚭鏃ュ織
public static ArrayBlockingQueue<String> DEVP = new ArrayBlockingQueue<>(32);
// 鏉＄爜鍣ㄨ緭鍑烘棩蹇�
public static ArrayBlockingQueue<JSONObject> BARCODE = new ArrayBlockingQueue<>(32);
- // rgv杈撳嚭鏃ュ織
- public static ArrayBlockingQueue<String> RGV = new ArrayBlockingQueue<>(32);
+
}
diff --git a/zy-acs-cv/src/main/java/com/zy/core/thread/SiemensDevpThread.java b/zy-acs-cv/src/main/java/com/zy/core/thread/SiemensDevpThread.java
index 833976c..31463da 100644
--- a/zy-acs-cv/src/main/java/com/zy/core/thread/SiemensDevpThread.java
+++ b/zy-acs-cv/src/main/java/com/zy/core/thread/SiemensDevpThread.java
@@ -149,7 +149,7 @@
OperateResult connect = siemensS7Net.ConnectServer();
if (connect.IsSuccess) {
result = true;
- OutputQueue.DEVP.offer(MessageFormat.format("銆恵0}銆戣緭閫佺嚎plc杩炴帴鎴愬姛 ===>> [id:{1}] [ip:{2}] [port:{3}] [rack:{4}] [slot:{5}]", DateUtils.convert(new Date()), slave.getId(), slave.getIp(), slave.getPort(), slave.getRack(), slave.getSlot()));
+ //OutputQueue.DEVP.offer(MessageFormat.format("銆恵0}銆戣緭閫佺嚎plc杩炴帴鎴愬姛 ===>> [id:{1}] [ip:{2}] [port:{3}] [rack:{4}] [slot:{5}]", DateUtils.convert(new Date()), slave.getId(), slave.getIp(), slave.getPort(), slave.getRack(), slave.getSlot()));
News.info("SiemensDevp" + " - 1" + " - 杈撻�佺嚎plc杩炴帴鎴愬姛 ===>> [id:{}] [ip:{}] [port:{}]", slave.getId(), slave.getIp(), slave.getPort());
} else {
OutputQueue.DEVP.offer(MessageFormat.format("銆恵0}銆戣緭閫佺嚎plc杩炴帴澶辫触锛侊紒锛� ===>> [id:{1}] [ip:{2}] [port:{3}] [rack:{4}] [slot:{5}]", DateUtils.convert(new Date()), slave.getId(), slave.getIp(), slave.getPort(), slave.getRack(), slave.getSlot()));
diff --git a/zy-acs-cv/src/main/webapp/static/css/pipeline.css b/zy-acs-cv/src/main/webapp/static/css/pipeline.css
index 382ab21..e69de29 100644
--- a/zy-acs-cv/src/main/webapp/static/css/pipeline.css
+++ b/zy-acs-cv/src/main/webapp/static/css/pipeline.css
@@ -1,207 +0,0 @@
-body {
- /*padding: 10px;*/
- background-color: #6CA7A8;
-}
-
-main {
- background-color: #fff;
- height: 85%;
- border-radius: 5px;
- box-shadow: 0 0 3px rgba(0, 0, 0, .3);
- margin-bottom: 8px;
-}
-
-.button-window {
- float: left;
- width: 100%;
- height: 100%;
- padding: 10px;
- border-radius: 5px;
- box-shadow: 0 0 3px rgba(0 0 0 .3);
-}
-
-.main-board {
- padding-left: 1%;
- float: left;
- width: 50%;
- height: 100%;
- overflow: auto;
-}
-
-.main-board:first-child {
- border-right: 1px solid #cad9ea;
-}
-
-/* 琛ㄦ牸 */
-.plc-log-header {
- height: 15%;
-}
-
-.plc-log-body {
- height: 100%;
- overflow: auto;
-}
-
-/* 鍏ュ嚭搴撴ā寮� */
-.io-mode-oper {
- height: 100%;
- /*overflow: hidden;*/
- padding: 10px 20px;
-}
-
-.io-mode-oper fieldset {
- padding: 15px 0 10px 0;
- border-width: 1px;
- border-style: solid;
- height: 100%;
-}
-
-.io-mode-oper legend {
- text-align: center;
- padding: 0 10px;
- font-size: 16px;
- font-weight: 300;
-}
-
-/* 绔欑偣琛ㄦ牸 */
-#site-table {
- font-size: 12px;
- border-collapse: collapse;
- margin: 0 auto;
- text-align: center;
-}
-
-#site-table td, #site-table th {
- border: 1px solid #cad9ea;
- color: #666;
- height: 25px;
-}
-
-#site-table thead th {
- background-color: #CCE8EB;
- width: 100px;
-}
-
-#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 td {
- color: red;
-}
-
-#plc-error-table tr:nth-child(odd) {
- background: #fff;
-}
-
-#plc-error-table tr:nth-child(even) {
- background: #F5FAFA;
-}
-
-
-/* 灏鹃儴 */
-footer {
- height: 11%;
- background-color: #fff;
- border-radius: 5px;
- box-shadow: 0 0 3px rgba(0, 0, 0, .3);
-}
-
-#output {
- color: #666;
- border: 1px solid #b9b9b9;
- width: 100%;
- height: 100%;
- overflow: auto;
- resize: none;
-}
-
-
-/* 璇︽儏寮瑰嚭灞� */
-#site-detl {
- padding: 30px 10px 0 25px;
- overflow: hidden;
-}
-
-#site-detl form {
- overflow: hidden;
-}
-
-.form-item {
- margin-bottom: 10px;
-}
-
-.form-label {
- display: inline-block;
- width: 70px;
- text-align: right;
-}
-
-.form-input {
- display: inline-block;
- padding-left: 15px;
-}
-
-.form-input input {
- outline-style: none;
- border: 1px solid #ccc;
- border-radius: 3px;
- padding: 5px 8px;
- width: 150px;
- font-size: 14px;
- font-weight: bolder;
-}
-
-.form-input input:focus {
- border-color: #66afe9;
- outline: 0;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
-}
-
-.form-button-container {
- text-align: center;
-}
-
-.form-button {
- margin: 10px 10px;
- width: 50px;
- height: 30px;
- color: white;
- background-color: cornflowerblue;
- border-radius: 3px;
- border-width: 0;
- outline: none;
- font-size: 15px;
- text-align: center;
- cursor: pointer;
-}
-
-.form-button:hover {
- opacity: 0.7;
-}
\ No newline at end of file
diff --git a/zy-acs-cv/src/main/webapp/views/pipeline.html b/zy-acs-cv/src/main/webapp/views/pipeline.html
index 4048c97..03140c7 100644
--- a/zy-acs-cv/src/main/webapp/views/pipeline.html
+++ b/zy-acs-cv/src/main/webapp/views/pipeline.html
@@ -11,6 +11,653 @@
<link rel="stylesheet" href="../static/css/common.css">
<link rel="stylesheet" href="../static/css/pipeline.css">
<style>
+ /* 绉戞妧鎰熶富棰樻牱寮� */
+ html, body {
+ background: linear-gradient(135deg, #0f172a, #1e293b);
+ color: #e2e8f0;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ overflow: hidden; /* 绉婚櫎鎵�鏈夋粴鍔ㄦ潯 */
+ }
+
+ .main-content {
+ background: transparent;
+ }
+
+ .container {
+ padding: 20px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ main {
+ flex: 1;
+ overflow: hidden;
+ }
+
+ footer {
+ flex-shrink: 0;
+ }
+
+ /* 浠〃鐩樺ご閮ㄦ牱寮� */
+ .dashboard-header {
+ margin-bottom: 30px;
+ padding: 20px;
+ background: rgba(30, 41, 59, 0.7);
+ border-radius: 12px;
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
+ text-align: center;
+ }
+
+ .dashboard-title {
+ color: #60a5fa;
+ font-size: 2rem;
+ font-weight: 600;
+ margin: 0;
+ text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
+ }
+
+
+
+ /* 琛ㄦ牸瀹瑰櫒 */
+ .table-container {
+ flex: 1;
+ overflow: hidden;
+ background: rgba(17, 24, 39, 0.5);
+ border-radius: 12px;
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ backdrop-filter: blur(10px);
+ }
+
+ /* 鐜颁唬鍖栬〃鏍兼牱寮� */
+ .modern-table {
+ width: 100%;
+ height: 100%;
+ border-collapse: separate;
+ border-spacing: 0;
+ background: transparent;
+ color: #e2e8f0;
+ }
+
+ .modern-table thead {
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ }
+
+ .modern-table th {
+ background: linear-gradient(135deg, #1e293b, #334155);
+ color: #94a3b8;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ padding: 15px 12px;
+ text-align: center;
+ border-bottom: 2px solid #3b82f6;
+ font-size: 0.9rem;
+ }
+
+ .modern-table td {
+ padding: 12px;
+ text-align: center;
+ border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+ transition: all 0.2s ease;
+ }
+
+ .modern-table tbody tr {
+ background: rgba(30, 41, 59, 0.3);
+ }
+
+ .modern-table tbody tr:nth-child(even) {
+ background: rgba(30, 41, 59, 0.5);
+ }
+
+ .modern-table tbody tr:hover {
+ background: rgba(59, 130, 246, 0.15);
+ transform: scale(1.01);
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
+ }
+
+ /* 绔欑偣鐘舵�佽棰滆壊 */
+ .modern-table tbody tr.row-auto-green {
+ border-left: 4px solid #4ade80;
+ background: rgba(74, 222, 128, 0.1);
+ }
+
+ .modern-table tbody tr.row-auto-gray {
+ border-left: 4px solid #94a3b8;
+ background: rgba(148, 163, 184, 0.1);
+ }
+
+ .modern-table tbody tr.row-yellow {
+ border-left: 4px solid #fbbf24;
+ background: rgba(251, 191, 36, 0.15);
+ box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.2);
+ }
+
+ .modern-table tbody tr.row-red {
+ border-left: 4px solid #f87171;
+ background: rgba(248, 113, 113, 0.15);
+ box-shadow: inset 0 0 10px rgba(248, 113, 113, 0.2);
+ }
+
+ /* 鎮仠鏃朵繚鎸佺姸鎬侀鑹� */
+ .modern-table tbody tr.row-auto-green:hover {
+ background: rgba(74, 222, 128, 0.2);
+ box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
+ }
+
+ .modern-table tbody tr.row-auto-gray:hover {
+ background: rgba(148, 163, 184, 0.2);
+ box-shadow: 0 0 15px rgba(148, 163, 184, 0.4);
+ }
+
+ .modern-table tbody tr.row-yellow:hover {
+ background: rgba(251, 191, 36, 0.25);
+ box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
+ }
+
+ .modern-table tbody tr.row-red:hover {
+ background: rgba(248, 113, 113, 0.25);
+ box-shadow: 0 0 15px rgba(248, 113, 113, 0.5);
+ }
+
+ /* 鐘舵�佹寚绀哄櫒鏍峰紡 */
+ .status-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-weight: 600;
+ font-size: 0.85rem;
+ }
+
+ .status-active {
+ background: rgba(74, 222, 128, 0.2);
+ color: #4ade80;
+ border: 1px solid rgba(74, 222, 128, 0.4);
+ }
+
+ .status-standby {
+ background: rgba(251, 191, 36, 0.2);
+ color: #fbbf24;
+ border: 1px solid rgba(251, 191, 36, 0.4);
+ }
+
+ .status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: currentColor;
+ }
+
+ .status-yes {
+ color: #4ade80;
+ font-weight: 600;
+ }
+
+ .status-no {
+ color: #94a3b8;
+ }
+
+ /* 绔欑偣鍗＄墖鏍峰紡 */
+ .site-card {
+ background: rgba(30, 41, 59, 0.7);
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ border-radius: 12px;
+ padding: 20px;
+ backdrop-filter: blur(10px);
+ box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ }
+
+ /* 鏍规嵁鐘舵�佹樉绀轰笉鍚岄鑹茶竟妗� */
+ .site-card.status-normal {
+ border-left: 4px solid #4ade80;
+ }
+
+ .site-card.status-warning {
+ border-left: 4px solid #fbbf24;
+ }
+
+ .site-card.status-error {
+ border-left: 4px solid #f87171;
+ }
+
+ .site-card.status-standby {
+ border-left: 4px solid #94a3b8;
+ }
+
+ .site-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 4px;
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+ }
+
+ .site-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4);
+ border-color: rgba(59, 130, 246, 0.6);
+ }
+
+ .site-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid rgba(59, 130, 246, 0.2);
+ }
+
+ .site-id {
+ font-size: 1.4rem;
+ font-weight: 700;
+ color: #60a5fa;
+ margin: 0;
+ }
+
+ .site-status {
+ padding: 4px 12px;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ .status-active {
+ background: rgba(74, 222, 128, 0.2);
+ color: #4ade80;
+ border: 1px solid rgba(74, 222, 128, 0.4);
+ }
+
+ .status-standby {
+ background: rgba(251, 191, 36, 0.2);
+ color: #fbbf24;
+ border: 1px solid rgba(251, 191, 36, 0.4);
+ }
+
+ .site-info {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 12px;
+ }
+
+ .info-item {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .info-label {
+ font-size: 0.85rem;
+ color: #94a3b8;
+ margin-bottom: 4px;
+ }
+
+ .info-value {
+ font-size: 1rem;
+ font-weight: 500;
+ color: #e2e8f0;
+ }
+
+ .info-value.highlight {
+ color: #4ade80;
+ font-weight: 600;
+ }
+
+ .status-indicator {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ }
+
+ .status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: currentColor;
+ }
+
+ /* 鏃ュ織鍖哄煙鏍峰紡 */
+ footer {
+ margin-top: 30px;
+ padding: 20px;
+ background: rgba(17, 24, 39, 0.7);
+ border-radius: 12px;
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ }
+
+ .output-log {
+ width: 100%;
+ height: 150px;
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ border-radius: 8px;
+ color: #4ade80;
+ font-family: 'Courier New', monospace;
+ font-size: 12px;
+ padding: 15px;
+ resize: vertical;
+ }
+
+ /* 寮圭獥鏍峰紡 */
+ .site-detail-form {
+ background: rgba(30, 41, 59, 0.95);
+ border: 1px solid rgba(59, 130, 246, 0.5);
+ border-radius: 12px;
+ padding: 25px;
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
+ max-height: 90vh;
+ overflow: hidden;
+ }
+
+ .detail-form {
+ max-height: calc(90vh - 50px);
+ overflow-y: auto;
+ scrollbar-width: thin;
+ scrollbar-color: #3b82f6 rgba(30, 41, 59, 0.3);
+ }
+
+ .detail-form::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .detail-form::-webkit-scrollbar-track {
+ background: rgba(30, 41, 59, 0.3);
+ border-radius: 3px;
+ }
+
+ .detail-form::-webkit-scrollbar-thumb {
+ background: #3b82f6;
+ border-radius: 3px;
+ }
+
+ .detail-form::-webkit-scrollbar-thumb:hover {
+ background: #60a5fa;
+ }
+
+ .form-item {
+ margin-bottom: 20px;
+ }
+
+ .form-label {
+ display: block;
+ color: #e2e8f0;
+ margin-bottom: 8px;
+ font-weight: 500;
+ }
+
+ .layui-input {
+ width: 100%;
+ padding: 12px 15px;
+ background: rgba(17, 24, 39, 0.8);
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ border-radius: 6px;
+ color: #e2e8f0;
+ font-size: 14px;
+ transition: all 0.3s ease;
+ }
+
+ .layui-input:focus {
+ outline: none;
+ border-color: #3b82f6;
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+ }
+
+ .form-button {
+ padding: 12px 25px;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-right: 10px;
+ }
+
+ .form-button:first-child {
+ background: linear-gradient(135deg, #3b82f6, #60a5fa);
+ color: white;
+ }
+
+ .form-button:last-child {
+ background: rgba(209, 213, 219, 0.2);
+ color: #94a3b8;
+ }
+
+ .form-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+ }
+
+ /* 鐜颁唬鍖栨ā鎬佹鏍峰紡 */
+ .modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ backdrop-filter: blur(5px);
+ display: none;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .modal-overlay.active {
+ display: flex;
+ opacity: 1;
+ }
+
+ .modal-container {
+ background: rgba(30, 41, 59, 0.95);
+ border: 1px solid rgba(59, 130, 246, 0.5);
+ border-radius: 16px;
+ width: 90%;
+ max-width: 420px;
+ max-height: 90vh;
+ overflow: hidden;
+ box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+ transform: scale(0.9);
+ transition: transform 0.3s ease;
+ }
+
+ .modal-overlay.active .modal-container {
+ transform: scale(1);
+ }
+
+ .modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 25px;
+ background: linear-gradient(90deg, rgba(30, 41, 59, 0.8), rgba(56, 189, 248, 0.1));
+ border-bottom: 1px solid rgba(59, 130, 246, 0.3);
+ }
+
+ .modal-title {
+ color: #60a5fa;
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin: 0;
+ }
+
+ .modal-close {
+ background: rgba(239, 68, 68, 0.2);
+ border: none;
+ color: #ef4444;
+ font-size: 1.5rem;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .modal-close:hover {
+ background: rgba(239, 68, 68, 0.3);
+ transform: rotate(90deg);
+ }
+
+ .modal-body {
+ padding: 25px;
+ max-height: calc(90vh - 140px);
+ overflow-y: auto;
+ }
+
+ .modal-body::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .modal-body::-webkit-scrollbar-track {
+ background: rgba(30, 41, 59, 0.3);
+ border-radius: 3px;
+ }
+
+ .modal-body::-webkit-scrollbar-thumb {
+ background: #3b82f6;
+ border-radius: 3px;
+ }
+
+ .form-group {
+ margin-bottom: 20px;
+ }
+
+ .form-group:last-child {
+ margin-bottom: 0;
+ }
+
+ .form-label {
+ display: block;
+ color: #e2e8f0;
+ margin-bottom: 8px;
+ font-weight: 500;
+ font-size: 0.9rem;
+ }
+
+ .form-input {
+ width: 100%;
+ padding: 12px 15px;
+ background: rgba(17, 24, 39, 0.8);
+ border: 1px solid rgba(59, 130, 246, 0.3);
+ border-radius: 8px;
+ color: #e2e8f0;
+ font-size: 14px;
+ transition: all 0.3s ease;
+ box-sizing: border-box;
+ }
+
+ .form-input:focus {
+ outline: none;
+ border-color: #3b82f6;
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+ }
+
+ .modal-footer {
+ display: flex;
+ gap: 12px;
+ padding: 20px 25px;
+ background: rgba(17, 24, 39, 0.5);
+ border-top: 1px solid rgba(59, 130, 246, 0.2);
+ }
+
+ .btn {
+ flex: 1;
+ padding: 12px 20px;
+ border: none;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ }
+
+ .btn-primary {
+ background: linear-gradient(135deg, #3b82f6, #60a5fa);
+ color: white;
+ }
+
+ .btn-primary:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
+ }
+
+ .btn-secondary {
+ background: rgba(209, 213, 219, 0.2);
+ color: #94a3b8;
+ }
+
+ .btn-secondary:hover {
+ background: rgba(209, 213, 219, 0.3);
+ transform: translateY(-2px);
+ }
+
+ /* 鎴愬姛鎻愮ず鏍峰紡 */
+ .toast {
+ position: fixed;
+ top: 20px;
+ right: 20px;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 16px 24px;
+ border-radius: 12px;
+ background: rgba(30, 41, 59, 0.95);
+ border: 1px solid rgba(74, 222, 128, 0.3);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+ z-index: 2000;
+ transform: translateX(120%);
+ transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+ opacity: 0;
+ }
+
+ .toast.show {
+ transform: translateX(0);
+ opacity: 1;
+ }
+
+ .toast-success {
+ border-left: 4px solid #4ade80;
+ }
+
+ .toast-icon {
+ font-size: 24px;
+ color: #4ade80;
+ font-weight: bold;
+ animation: pulse 1.5s infinite;
+ }
+
+ .toast-message {
+ color: #e2e8f0;
+ font-size: 16px;
+ font-weight: 500;
+ }
+
+ @keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.2); }
+ 100% { transform: scale(1); }
+ }
+
+ /* IO妯″紡鎸夐挳鏍峰紡 */
.io-mode-box {
float: left;
width: 16%;
@@ -19,22 +666,51 @@
.io-mode-box label {
font-weight: bolder;
+ color: #e2e8f0;
}
.ioModeBtn {
vertical-align: middle;
width: 50%;
height: 30px;
- text-shadow: inherit;
font-size: 15px;
margin: 0 5px;
display: inline-block;
- background-color: #FF5722;
+ background: linear-gradient(135deg, #ef4444, #f87171);
border: none;
color: #FFF;
- box-shadow: 1px 1px 5px #B6B6B6;
- border-radius: 3px;
+ border-radius: 6px;
cursor: pointer;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
+ }
+
+ .ioModeBtn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
+ }
+
+ /* 鍝嶅簲寮忚璁� */
+ @media (max-width: 1200px) {
+ .sites-grid {
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ }
+ }
+
+ @media (max-width: 768px) {
+ .dashboard-header {
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ .dashboard-stats {
+ width: 100%;
+ justify-content: space-around;
+ }
+
+ .sites-grid {
+ grid-template-columns: 1fr;
+ }
}
</style>
<script src="../static/js/jquery/jquery-3.3.1.min.js"></script>
@@ -48,33 +724,38 @@
</aside>
<!-- 涓诲唴瀹瑰尯鍩� -->
-<div class="main-content" style="height: 100%; padding-left: 6%;">
- <div class="container" style="padding: 10px; height: 100%;">
+<div class="main-content" style="height: 100vh; padding-left: 6%; overflow: hidden;">
+ <div class="container" style="padding: 10px; height: 100%; overflow-y: auto;">
<!-- 涓昏鍐呭 -->
<main>
<!-- 绔欑偣鐘舵�佹暟鎹洃鎺х増 -->
<section id="site-monitor" class="main-board">
- <!-- 琛ㄦ牸 -->
- <!-- 鍥哄畾琛ㄥご锛歵able鍔爐able-layout: fixed; th鍔爌osition:sticky;top: 0; -->
- <table id="site-table" class="status-table" style="table-layout: fixed;">
- <!-- 琛ㄥご -->
- <thead class="table-header" style="position:sticky;top: 0;">
- <tr>
- <th>绔欏彿</th>
- <th>宸ヤ綔鍙�</th>
- <th>鑷姩</th>
- <th>鏈夌墿</th>
- <th>鍙叆</th>
- <th>鍙嚭</th>
- <th>鍏ュ簱鏍囪</th>
- <th>绌烘澘淇″彿</th>
- <th>鐩爣绔�</th>
- <th>楂樹綆搴撲綅</th>
- </tr>
- </thead>
- <!-- 琛ㄦ牸鍐呭 -->
- <tbody class="table-body"></tbody>
- </table>
+ <div class="dashboard-header">
+ <h2 class="dashboard-title">绔欑偣瀹炴椂鐩戞帶</h2>
+ </div>
+
+ <!-- 琛ㄦ牸瀹瑰櫒 -->
+ <div class="table-container">
+ <table id="site-table" class="modern-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>
</section>
</main>
@@ -83,42 +764,48 @@
<textarea id="output" class="output-log"></textarea>
</footer>
+ <!-- 鎴愬姛鎻愮ず -->
+ <div id="success-toast" class="toast toast-success">
+ <div class="toast-icon">鉁�</div>
+ <div class="toast-message">鎿嶄綔鎴愬姛</div>
+ </div>
+
<!-- 绔欑偣璇︽儏寮圭獥 -->
- <div id="site-detl" class="site-detail-form" style="display: none;">
- <form class="detail-form">
- <div class="form-item">
- <label class="form-label" for="siteId">绔欏彿:</label>
- <div class="form-input">
- <input id="siteId" name="siteId" class="layui-input" type="number" lay-verify="required|number"
- autocomplete="off" disabled="disabled">
- </div>
+ <div id="modal-overlay" class="modal-overlay">
+ <div class="modal-container">
+ <div class="modal-header">
+ <h3 class="modal-title">绔欑偣淇℃伅缂栬緫</h3>
+ <button class="modal-close" id="modal-close">脳</button>
</div>
- <div class="form-item">
- <label class="form-label" for="workNo">宸ヤ綔鍙�:</label>
- <div class="form-input">
- <input id="workNo" name="workNo" type="number" class="layui-input" lay-verify="number"
- autocomplete="off">
- </div>
+ <div class="modal-body">
+ <form class="detail-form" id="site-form">
+ <div class="form-group">
+ <label class="form-label" for="siteId">绔欏彿:</label>
+ <input id="siteId" name="siteId" class="form-input" type="number"
+ autocomplete="off" disabled>
+ </div>
+ <div class="form-group">
+ <label class="form-label" for="workNo">宸ヤ綔鍙�:</label>
+ <input id="workNo" name="workNo" type="number" class="form-input"
+ autocomplete="off">
+ </div>
+ <div class="form-group">
+ <label class="form-label" for="staNo">鐩爣绔�:</label>
+ <input id="staNo" name="staNo" type="number" class="form-input"
+ autocomplete="off">
+ </div>
+ <div class="form-group">
+ <label class="form-label" for="pakMk">鍏ュ簱鏍囪:</label>
+ <input id="pakMk" name="pakMk" type="text" class="form-input"
+ autocomplete="off">
+ </div>
+ </form>
</div>
- <div class="form-item">
- <label class="form-label" for="staNo">鐩爣绔�:</label>
- <div class="form-input">
- <input id="staNo" name="staNo" type="number" class="layui-input" lay-verify="number"
- autocomplete="off">
- </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-primary" id="save">淇濆瓨</button>
+ <button type="button" class="btn btn-secondary" id="cancel">鍙栨秷</button>
</div>
- <div class="form-item">
- <label class="form-label" for="pakMk">鍏ュ簱鏍囪:</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 type="button" class="form-button" id="save">淇濆瓨</button>
- <button type="button" class="form-button" id="cancel" style="background-color: #D0D0D0;">鍙栨秷
- </button>
- </div>
- </form>
+ </div>
</div>
</div>
</div>
@@ -136,13 +823,10 @@
let ioModeData = [];
let layerDetl = null;
let timers = [];
+ let sitesData = [];
// DOM鍔犺浇瀹屾垚鍚庡垵濮嬪寲
$(document).ready(function () {
- // 鍒濆鍖栬〃鏍�
- initPlcErrorTable();
- initSiteTable();
-
// 鍔犺浇鍒濆鏁版嵁
getPlcError();
getSite();
@@ -216,36 +900,86 @@
// 鑾峰彇绔欑偣淇℃伅琛�
function getSite() {
- const tableEl = $('#site-table');
-
+ const tableEl = $('#site-table tbody');
+
ajaxRequest({
url: `${baseUrl}/site/table/site`,
method: 'POST',
success: (res) => {
if (res.data) {
- const tableData = res.data;
- if (tableData.length > siteTableBlankRows && tableData.length !== siteTableFullRows) {
- initSiteTable(tableData.length - siteTableBlankRows);
- siteTableFullRows = tableData.length;
- }
-
- for (let i = 0; i < tableData.length; i++) {
- const tr = tableEl.find("tr").eq(i + 1);
- setVal(tr.children("td").eq(0), tableData[i].devNo);
- setVal(tr.children("td").eq(1), tableData[i].workNo);
- setVal(tr.children("td").eq(2), tableData[i].autoing);
- setVal(tr.children("td").eq(3), tableData[i].loading);
- setVal(tr.children("td").eq(4), tableData[i].inEnable);
- setVal(tr.children("td").eq(5), tableData[i].outEnable);
- setVal(tr.children("td").eq(6), tableData[i].pakMk);
- setVal(tr.children("td").eq(7), tableData[i].emptyMk);
- setVal(tr.children("td").eq(8), tableData[i].staNo);
- setVal(tr.children("td").eq(9), tableData[i].locType1);
- }
+ sitesData = res.data;
+ renderTable(sitesData);
}
}
});
}
+
+ // 娓叉煋琛ㄦ牸鏁版嵁
+ function renderTable(sites) {
+ const tbody = $('#site-table tbody');
+ tbody.empty();
+
+ sites.forEach(site => {
+ const row = createTableRow(site);
+ tbody.append(row);
+ });
+ }
+
+ // 鍒涘缓琛ㄦ牸琛�
+ function createTableRow(site) {
+ const isActive = site.autoing === 'Y';
+ const hasLoad = site.loading === 'Y';
+ const hasWorkNo = !!site.workNo && site.workNo !== '';
+
+ // 鏍规嵁鐘舵�佺‘瀹氳鏍峰紡绫�
+ let rowClass = '';
+ if (isActive) {
+ rowClass = 'row-auto-green'; // 鑷姩涓虹豢鑹�
+ } else {
+ rowClass = 'row-auto-gray'; // 涓嶈嚜鍔ㄤ负鐏拌壊
+ }
+
+ // 鐗规畩鐘舵�佽鐩�
+ if (hasLoad && !hasWorkNo) {
+ rowClass = 'row-yellow'; // 鏈夌墿鏃犲伐浣滃彿涓洪粍鑹�
+ } else if (!hasLoad && hasWorkNo) {
+ rowClass = 'row-red'; // 鏃犵墿鏈夊伐浣滃彿涓虹孩鑹�
+ }
+
+ return `
+ <tr data-site-id="${site.devNo}" class="${rowClass}">
+ <td>${site.devNo}</td>
+ <td>${site.workNo || '--'}</td>
+ <td>
+ <span class="status-indicator ${isActive ? 'status-active' : 'status-standby'}">
+ <span class="status-dot"></span>
+ ${isActive ? '鑷姩' : '闈炶嚜鍔�'}
+ </span>
+ </td>
+ <td>
+ <span class="${hasLoad ? 'status-yes' : 'status-no'}">
+ ${hasLoad ? 'Y' : 'N'}
+ </span>
+ </td>
+ <td>
+ <span class="${site.inEnable === 'Y' ? 'status-yes' : 'status-no'}">
+ ${site.inEnable === 'Y' ? 'Y' : 'N'}
+ </span>
+ </td>
+ <td>
+ <span class="${site.outEnable === 'Y' ? 'status-yes' : 'status-no'}">
+ ${site.outEnable === 'Y' ? 'Y' : 'N'}
+ </span>
+ </td>
+ <td>${site.pakMk || '--'}</td>
+ <td>${site.emptyMk || '--'}</td>
+ <td>${site.staNo || '--'}</td>
+ <td>${site.locType1 || '--'}</td>
+ </tr>
+ `;
+ }
+
+
// 鑾峰彇杈撻�佽澶囨棩蹇楄緭鍑�
function getSiteOutput() {
@@ -269,97 +1003,63 @@
outputDom.scrollTop = outputDom.scrollHeight;
}
- // PLC寮傚父绌虹櫧琛ㄦ牸娓叉煋
- function initPlcErrorTable(row) {
- let line;
- if (row === undefined) {
- const one = $('#plc-error-table thead').height();
- const total = $('.plc-log-body').height();
- const count = parseInt(total / one) - 1;
- plcErrorTableBlankRows = count;
- line = count;
- } else {
- line = row;
- }
-
- let html = "";
- for (let i = 0; i < line; i++) {
- html += ` <tr>
- <td></td>
- <td></td>
- <td></td>
- </tr>`;
- }
- $('#plc-error-table tbody').after(html);
- }
-
- // 绔欑偣绌虹櫧琛ㄦ牸娓叉煋
- function initSiteTable(row) {
- let line;
- if (row === undefined) {
- const one = $('#site-table thead').height();
- const total = $('#site-monitor').height();
- const count = parseInt(total / one) - 1;
- siteTableBlankRows = count;
- line = count;
- } else {
- line = row;
- }
-
- let html = "";
- for (let i = 0; i < line; i++) {
- html += ` <tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>`;
- }
- $('#site-table tbody').after(html);
- }
-
- // 璇︽儏鎿嶄綔
- $(document).on('dblclick', '#site-table tr', function () {
+ // 璇︽儏鎿嶄綔 - 鏀逛负鍙屽嚮琛ㄦ牸琛�
+ $(document).on('dblclick', '#site-table tbody tr', function () {
isSiteUpdatePaused = true;
- const siteId = $(this).children("td").eq(0).html();
+ const siteId = $(this).data('site-id');
if (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: (layero, index) => {
- http.get(`${baseUrl}/site/detl/${siteId}`, null, (res) => {
- if (res.data) {
- $('#siteId').val(siteId);
- $('#workNo').val(res.data.workNo);
- $('#staNo').val(res.data.staNo);
- $('#pakMk').val(res.data.pakMk);
- }
- });
- },
- end: () => {
- $('#siteId').val("");
- $('#workNo').val("");
- $('#staNo').val("");
- $('#pakMk').val("");
- isSiteUpdatePaused = false;
+ // 鏄剧ず妯℃�佹
+ const modal = $('#modal-overlay');
+ modal.addClass('active');
+
+ // 璁剧疆鏍囬
+ $('.modal-title').text(`绔欑偣 #${siteId} 缂栬緫`);
+
+ // 鍔犺浇鏁版嵁
+ http.get(`${baseUrl}/site/detl/${siteId}`, null, (res) => {
+ if (res.data) {
+ $('#siteId').val(siteId);
+ $('#workNo').val(res.data.workNo);
+ $('#staNo').val(res.data.staNo);
+ $('#pakMk').val(res.data.pakMk);
}
});
}
});
+
+ // 妯℃�佹鍏抽棴鍔熻兘
+ function closeModal() {
+ $('#modal-overlay').removeClass('active');
+ // 娓呯┖琛ㄥ崟
+ $('#site-form')[0].reset();
+ $('#siteId').val("");
+ isSiteUpdatePaused = false;
+ }
+
+ // 鐐瑰嚮閬僵灞傚叧闂�
+ $(document).on('click', '#modal-overlay', function(e) {
+ if (e.target.id === 'modal-overlay') {
+ closeModal();
+ }
+ });
+
+ // 鐐瑰嚮鍏抽棴鎸夐挳
+ $(document).on('click', '#modal-close', function () {
+ closeModal();
+ });
+
+ // 鏄剧ず鎴愬姛鎻愮ず
+ function showSuccessMessage(message) {
+ const toast = $('#success-toast');
+ $('.toast-message', toast).text(message);
+ toast.addClass('show');
+
+ // 3绉掑悗鑷姩闅愯棌
+ setTimeout(() => {
+ toast.removeClass('show');
+ }, 3000);
+ }
// 淇濆瓨绔欑偣淇℃伅
$(document).on('click', '#save', function () {
@@ -369,18 +1069,16 @@
staNo: $('#staNo').val(),
pakMk: $('#pakMk').val()
}, (res) => {
- layer.msg("淇敼鎴愬姛", {icon: 1});
- layer.close(layerDetl);
+ showSuccessMessage("淇敼鎴愬姛");
+ setTimeout(() => {
+ closeModal();
+ }, 1500);
});
});
// 鍙栨秷绔欑偣淇℃伅淇敼
$(document).on('click', '#cancel', function () {
- $('#siteId').val("");
- $('#workNo').val("");
- $('#staNo').val("");
- $('#pakMk').val("");
- layer.close(layerDetl);
+ closeModal();
});
// 閫氱敤AJAX璇锋眰鍑芥暟
--
Gitblit v1.9.1