页面先这样

zhang

9 小时以前 b51f97492d47356db65aa8a58b98833d526ac728

 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">
                <!-- 表格 -->
                <!-- 固定表头：table加table-layout: fixed; th加position: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请求函数