1

zhang

2026-03-09 7d116115ade208f26ada36806642d2a3a6085c91

 zy-acs-cv/src/main/webapp/views/pipeline.html

@@ -63,31 +63,63 @@
        }



        /* 表格容器 */
        .table-container {
            flex: 1;
            overflow: hidden;
            overflow-x: hidden;
            overflow-y: auto;
            background: rgba(17, 24, 39, 0.5);
            border-radius: 12px;
            border: 1px solid rgba(59, 130, 246, 0.3);
            backdrop-filter: blur(10px);
        }

        /* 表格容器滚动条样式 */
        .table-container::-webkit-scrollbar {
            width: 8px;
        }

        .table-container::-webkit-scrollbar-track {
            background: rgba(30, 41, 59, 0.3);
            border-radius: 4px;
        }

        .table-container::-webkit-scrollbar-thumb {
            background: #3b82f6;
            border-radius: 4px;
        }

        .table-container::-webkit-scrollbar-thumb:hover {
            background: #60a5fa;
        }

        /* 现代化表格样式 */
        .modern-table {
            width: 100%;
            height: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
            background: transparent;
            color: #e2e8f0;
        }

        /* 设置表格列宽，确保适应容器 */
        .modern-table th,
        .modern-table td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .modern-table thead {
            position: sticky;
            top: 0;
            z-index: 10;
        }

        /* 确保表格容器有最大高度，以便滚动 */
        .table-container {
            max-height: calc(100vh - 200px);
        }

        .modern-table th {
@@ -223,15 +255,15 @@
        .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;
        }
@@ -340,14 +372,14 @@

        .output-log {
            width: 100%;
            height: 150px;
            height: 100px;
            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;
            padding: 10px;
            resize: vertical;
        }

@@ -652,9 +684,15 @@
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        /* IO模式按钮样式 */
@@ -702,12 +740,12 @@
                flex-direction: column;
                gap: 20px;
            }
            

            .dashboard-stats {
                width: 100%;
                justify-content: space-around;
            }
            

            .sites-grid {
                grid-template-columns: 1fr;
            }
@@ -730,29 +768,29 @@
        <main>
            <!-- 站点状态数据监控版 -->
            <section id="site-monitor" class="main-board">
                <div class="dashboard-header">
                    <h2 class="dashboard-title">站点实时监控</h2>
                </div>
                
                <!--                <div class="dashboard-header">-->
                <!--                    <h3 class="dashboard-title">站点实时监控</h3>-->
                <!--                </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>
                        <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>
@@ -781,22 +819,22 @@
                    <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" 
                            <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" 
                            <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" 
                            <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" 
                            <input id="pakMk" name="pakMk" type="text" class="form-input"
                                   autocomplete="off">
                        </div>
                    </form>
@@ -828,7 +866,6 @@
        // DOM加载完成后初始化
        $(document).ready(function () {
            // 加载初始数据
            getPlcError();
            getSite();

            // 初始化定时器
@@ -839,7 +876,6 @@
        function initTimers() {
            // 每秒更新PLC错误、站点信息和IO模式
            timers.push(setInterval(() => {
                getPlcError();
                if (!isSiteUpdatePaused) {
                    getSite();
                }
@@ -876,32 +912,11 @@
            }
        }

        // 获取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);
                        }
                    }
                }
            });
        }

        // 获取站点信息表
        function getSite() {
            const tableEl = $('#site-table tbody');
            

            ajaxRequest({
                url: `${baseUrl}/site/table/site`,
                method: 'POST',
@@ -918,7 +933,7 @@
        function renderTable(sites) {
            const tbody = $('#site-table tbody');
            tbody.empty();
            

            sites.forEach(site => {
                const row = createTableRow(site);
                tbody.append(row);
@@ -930,7 +945,7 @@
            const isActive = site.autoing === 'Y';
            const hasLoad = site.loading === 'Y';
            const hasWorkNo = !!site.workNo && site.workNo !== '';
            

            // 根据状态确定行样式类
            let rowClass = '';
            if (isActive) {
@@ -938,14 +953,14 @@
            } 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>
@@ -980,7 +995,6 @@
        }



        // 获取输送设备日志输出
        function getSiteOutput() {
            ajaxRequest({
@@ -1012,10 +1026,10 @@
                // 显示模态框
                const modal = $('#modal-overlay');
                modal.addClass('active');
                

                // 设置标题
                $('.modal-title').text(`站点 #${siteId} 编辑`);
                

                // 加载数据
                http.get(`${baseUrl}/site/detl/${siteId}`, null, (res) => {
                    if (res.data) {
@@ -1038,7 +1052,7 @@
        }

        // 点击遮罩层关闭
        $(document).on('click', '#modal-overlay', function(e) {
        $(document).on('click', '#modal-overlay', function (e) {
            if (e.target.id === 'modal-overlay') {
                closeModal();
            }
@@ -1054,7 +1068,7 @@
            const toast = $('#success-toast');
            $('.toast-message', toast).text(message);
            toast.addClass('show');
            

            // 3秒后自动隐藏
            setTimeout(() => {
                toast.removeClass('show');