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/webapp/views/pipeline.html | 1420 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 1,043 insertions(+), 377 deletions(-)
diff --git a/zy-acs-cv/src/main/webapp/views/pipeline.html b/zy-acs-cv/src/main/webapp/views/pipeline.html
index c2de9e0..03140c7 100644
--- a/zy-acs-cv/src/main/webapp/views/pipeline.html
+++ b/zy-acs-cv/src/main/webapp/views/pipeline.html
@@ -1,454 +1,1120 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
<head>
<meta charset="UTF-8">
- <title>WCS杈撻�佽澶囩鐞�</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/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>
+ <meta name="viewport"
+ content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <title>杈撻�佽澶囩鐞�</title>
+ <link rel="stylesheet" href="../static/css/normalize.css">
+ <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%;
text-align: center;
}
+
.io-mode-box label {
font-weight: bolder;
+ color: #e2e8f0;
}
+
.ioModeBtn {
vertical-align: middle;
width: 50%;
height: 30px;
- left: 0;
- top: 0;
- text-shadow: inherit;
font-size: 15px;
- margin-left: 5px;
- margin-right: 5px;
+ 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>
+ <script src="../static/js/common.js"></script>
+ <script src="../static/js/layer/layer.js"></script>
</head>
<body>
-<div style="padding: 10px;height: 100%;float: left;width: 6%">
+<!-- 宸︿晶鎸夐挳鍖哄煙 -->
+<aside class="sidebar" style="padding: 10px; height: 100%; float: left; width: 6%;">
<div class="button-window"></div>
-</div>
+</aside>
-<div style="height: 100%;padding-left: 6%">
- <div 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>
-
- <!-- 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">
+ <!-- 绔欑偣鐘舵�佹暟鎹洃鎺х増 -->
+ <section id="site-monitor" class="main-board">
+ <div class="dashboard-header">
+ <h2 class="dashboard-title">绔欑偣瀹炴椂鐩戞帶</h2>
+ </div>
+
+ <!-- 琛ㄦ牸瀹瑰櫒 -->
+ <div class="table-container">
+ <table id="site-table" class="modern-table">
<thead>
- <tr>
- <th style="width: 200px">搴忓彿</th>
- <th style="width: 400px">PLC閿欒鎻忚堪</th>
- <th style="width: 400px">寮傚父</th>
- </tr>
+ <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>
-
- <!-- 绔欑偣鐘舵�佹暟鎹洃鎺х増 -->
- <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>绔欏彿</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>
+
+ <!-- 椤佃剼鍖哄煙 -->
<footer>
- <textarea id="output"></textarea>
+ <textarea id="output" class="output-log"></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 id="success-toast" class="toast toast-success">
+ <div class="toast-icon">鉁�</div>
+ <div class="toast-message">鎿嶄綔鎴愬姛</div>
+ </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">宸ヤ綔鍙�:</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">鐩爣绔�:</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">鍏ュ簱鏍囪:</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>
-
</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() {
- getIoModeInfo();
- initPlcErrorTable();
- getPlcError();
- initSiteTable();
- getSite();
- });
- // 瀹炴椂璁块棶
- setInterval(function () {
- getPlcError();
- starGetSite();
- getIoModeInfo();
- }, 1000);
- setInterval(function () {
- getSiteOutput();
- },500);
- function starGetSite() {
- if (stop) {
- return
- } else {
+ // 鑷墽琛屽嚱鏁拌〃杈惧紡锛岄伩鍏嶅叏灞�鍙橀噺姹℃煋
+ (function () {
+ // 鍒濆鍖栧彉閲�
+ let isSiteUpdatePaused = false;
+ let plcErrorTableBlankRows = 0;
+ let siteTableBlankRows = 0;
+ let plcErrorTableFullRows = 0;
+ let siteTableFullRows = 0;
+ const outputDom = document.getElementById("output");
+ let ioModeData = [];
+ let layerDetl = null;
+ let timers = [];
+ let sitesData = [];
+
+ // DOM鍔犺浇瀹屾垚鍚庡垵濮嬪寲
+ $(document).ready(function () {
+ // 鍔犺浇鍒濆鏁版嵁
+ getPlcError();
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);
- }
- }
+ // 鍒濆鍖栧畾鏃跺櫒
+ initTimers();
});
- }
- /**
- * 寮哄埗鍒囨崲鍏ュ嚭搴撴ā寮�
- */
- 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();
- })
+ // 鍒濆鍖栧畾鏃跺櫒
+ function initTimers() {
+ // 姣忕鏇存柊PLC閿欒銆佺珯鐐逛俊鎭拰IO妯″紡
+ timers.push(setInterval(() => {
+ getPlcError();
+ if (!isSiteUpdatePaused) {
+ getSite();
+ }
+ getIoModeInfo();
+ }, 1000));
+
+ // 姣�500姣鏇存柊绔欑偣杈撳嚭鏃ュ織
+ timers.push(setInterval(() => {
+ getSiteOutput();
+ }, 500));
+ }
+
+
+ /**
+ * 寮哄埗鍒囨崲鍏ュ嚭搴撴ā寮�
+ * @param {string} el - 鍏冪礌ID
+ */
+ function ioModeSwitch(el) {
+ const floor = el.split("-")[2];
+ const targetFloor = ioModeData.find(e => e.floor === Number(floor));
+
+ if (targetFloor && (targetFloor.modeVal === 3 || targetFloor.modeVal === 4)) {
+ layer.confirm('纭畾鍒囨崲涓哄叆搴撴ā寮忓悧锛�', () => {
+ ajaxRequest({
+ url: `${baseUrl}/site/io/mode/action/site`,
+ method: 'POST',
+ data: {floor: targetFloor.floor},
+ success: (res) => {
+ layer.msg("鏆傛椂涓嶈兘鍒囨崲锛�", {icon: 1});
+ }
+ });
+ layer.closeAll();
+ });
+ }
+ }
+
+ // 鑾峰彇PLC寮傚父淇℃伅琛�
+ function getPlcError() {
+ const tableEl = $('#plc-error-table');
+ tableEl.children("tr").children("td").html("");
+
+ ajaxRequest({
+ url: `${baseUrl}/site/table/plc/errors`,
+ method: 'POST',
+ success: (res) => {
+ if (res.data) {
+ const tableData = res.data;
+ for (let i = 0; i < tableData.length; i++) {
+ const tr = tableEl.find("tr").eq(i + 1);
+ tr.children("td").eq(0).html(tableData[i].no);
+ tr.children("td").eq(1).html(tableData[i].plcDesc);
+ tr.children("td").eq(2).html(tableData[i].error);
+ }
}
}
});
}
- }
-
- // 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);
+ // 鑾峰彇绔欑偣淇℃伅琛�
+ function getSite() {
+ const tableEl = $('#site-table tbody');
+
+ ajaxRequest({
+ url: `${baseUrl}/site/table/site`,
+ method: 'POST',
+ success: (res) => {
+ if (res.data) {
+ sitesData = res.data;
+ renderTable(sitesData);
}
- } 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].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 renderTable(sites) {
+ const tbody = $('#site-table tbody');
+ tbody.empty();
+
+ sites.forEach(site => {
+ const row = createTableRow(site);
+ tbody.append(row);
+ });
+ }
- // 杈撻�佽澶囨棩蹇楄緭鍑�
- 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 {
+ // 鍒涘缓琛ㄦ牸琛�
+ 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() {
+ ajaxRequest({
+ url: `${baseUrl}/site/output/site`,
+ method: 'POST',
+ success: (res) => {
+ if (res.data) {
+ output(res.data);
+ }
+ },
+ error: (res) => {
alert(res.msg);
}
- }
- })
- }
-
- // 鏃ュ織杈撳嚭妗�
- function output(content){
- outputDom.value += content;
- outputDom.scrollTop = outputDom.scrollHeight;
- }
-
- // ------------------------------------------------------------------------------------------------
-
- // 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;
+ // 鏃ュ織杈撳嚭妗�
+ function output(content) {
+ outputDom.value += content;
+ outputDom.scrollTop = outputDom.scrollHeight;
}
- 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) {
+ // 璇︽儏鎿嶄綔 - 鏀逛负鍙屽嚮琛ㄦ牸琛�
+ $(document).on('dblclick', '#site-table tbody tr', function () {
+ isSiteUpdatePaused = true;
+ const siteId = $(this).data('site-id');
+
+ if (siteId) {
+ // 鏄剧ず妯℃�佹
+ 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);
- })
- },
- end: function () {
- $('#siteId').val("");
- $('#workNo').val("");
- $('#staNo').val("");
- $('#pakMk').val("");
- stop = false
- }
- })
+ }
+ });
+ }
+ });
+
+ // 妯℃�佹鍏抽棴鍔熻兘
+ 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 ','#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,});
- layer.close(layerDetl);
- })
- })
- $(document).on('click ','#cancel', function () {
- $('#siteId').val("");
- $('#workNo').val("");
- $('#staNo').val("");
- $('#pakMk').val("");
- layer.close(layerDetl);
- })
+ // 鐐瑰嚮鍏抽棴鎸夐挳
+ $(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 () {
+ http.post(`${baseUrl}/site/detl/update`, {
+ siteId: $('#siteId').val(),
+ workNo: $('#workNo').val(),
+ staNo: $('#staNo').val(),
+ pakMk: $('#pakMk').val()
+ }, (res) => {
+ showSuccessMessage("淇敼鎴愬姛");
+ setTimeout(() => {
+ closeModal();
+ }, 1500);
+ });
+ });
+
+ // 鍙栨秷绔欑偣淇℃伅淇敼
+ $(document).on('click', '#cancel', function () {
+ closeModal();
+ });
+
+ // 閫氱敤AJAX璇锋眰鍑芥暟
+ function ajaxRequest(options) {
+ const defaultOptions = {
+ headers: {'token': localStorage.getItem('token')},
+ success: () => {
+ },
+ error: () => {
+ }
+ };
+
+ const opts = {...defaultOptions, ...options};
+
+ $.ajax({
+ url: opts.url,
+ headers: opts.headers,
+ method: opts.method,
+ data: opts.data,
+ success: (res) => {
+ if (res.code === 200) {
+ opts.success(res);
+ } else if (res.code === 403) {
+ window.location.href = `${baseUrl}/login`;
+ } else {
+ console.log(res.msg);
+ //opts.error(res);
+ }
+ },
+ error: (jqXHR, textStatus, errorThrown) => {
+ console.error('AJAX Error:', textStatus, errorThrown);
+ //opts.error({ msg: '璇锋眰澶辫触锛岃绋嶅悗閲嶈瘯' });
+ }
+ });
+ }
+ })();
</script>
</html>
\ No newline at end of file
--
Gitblit v1.9.1