| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>称重管理</title>
- <style>
- * { box-sizing: border-box; margin: 0; padding: 0; }
- body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
- .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; text-align: center; }
- .header h1 { font-size: 24px; margin-bottom: 5px; }
- .nav-bar { margin-top: 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
- .nav-link { background: rgba(255,255,255,0.2); color: white; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; transition: background 0.2s; }
- .nav-link:hover { background: rgba(255,255,255,0.35); }
- .nav-link.active { background: rgba(255,255,255,0.45); font-weight: bold; }
- .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
- .panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
- .panel h2 { font-size: 18px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
- .stats { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
- .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 20px; border-radius: 8px; min-width: 150px; }
- .stat-card.warning { background: linear-gradient(135deg, #f5222d 0%, #cf1322 100%); }
- .stat-card .label { font-size: 12px; opacity: 0.8; }
- .stat-card .value { font-size: 24px; font-weight: bold; margin-top: 5px; }
- /* fix24 v41: Tab 切换样式 */
- .tab-bar { display: flex; gap: 0; margin-bottom: 15px; border-bottom: 2px solid #e9ecef; }
- .tab-btn { padding: 10px 20px; background: transparent; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 14px; color: #666; transition: all 0.2s; }
- .tab-btn:hover { color: #667eea; background: #f8f9fa; }
- .tab-btn.active { color: #667eea; border-bottom-color: #667eea; font-weight: 600; }
- .tab-content { display: none; }
- .tab-content.active { display: block; }
- /* fix24 v41: 分类查询样式 */
- .filter-bar { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; margin-bottom: 15px; }
- .filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
- .filter-row + .filter-row { margin-top: 8px; }
- .filter-item { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 130px; }
- .filter-item label { font-size: 12px; color: #666; font-weight: 500; }
- .filter-item input, .filter-item select { padding: 7px 9px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; background: white; }
- .filter-item input:focus, .filter-item select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,0.15); }
- .filter-buttons { flex: 0 0 auto; flex-direction: row !important; gap: 8px !important; }
- .btn-search, .btn-reset { padding: 7px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
- .btn-search { background: #667eea; color: white; }
- .btn-search:hover { background: #764ba2; }
- .btn-reset { background: white; color: #666; border: 1px solid #d9d9d9; }
- .btn-reset:hover { border-color: #667eea; color: #667eea; }
- .table-container { overflow-x: auto; }
- table { width: 100%; border-collapse: collapse; font-size: 13px; }
- th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #eee; }
- th { background: #f8f9fa; font-weight: 600; color: #333; white-space: nowrap; }
- tr:hover { background: #f8f9fa; }
- .status { padding: 3px 8px; border-radius: 3px; font-size: 12px; display: inline-block; }
- .status-success { background: #d9f7be; color: #52c41a; }
- .status-failed { background: #fff1f0; color: #f5222d; }
- .status-pending { background: #f0f5ff; color: #1890ff; }
- .btn-retry { padding: 3px 8px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; }
- .btn-retry:hover { background: #40a9ff; }
- .btn-retry:disabled { background: #d9d9d9; cursor: not-allowed; }
- .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 0; flex-wrap: wrap; }
- .pagination button { padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; }
- .pagination button:hover:not(:disabled) { background: #f0f5ff; border-color: #667eea; color: #667eea; }
- .pagination button:disabled { background: #f5f5f5; color: #d9d9d9; cursor: not-allowed; }
- .pagination button.active { background: #667eea; color: white; border-color: #667eea; }
- .pagination .info { color: #666; font-size: 13px; padding: 0 4px; }
- .pagination-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
- .pagination-left, .pagination-right { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; }
- .pagination-left select, .pagination-right input { padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; width: 65px; }
- .pagination-right input { width: 55px; }
- .pagination-right button { padding: 5px 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
- .pagination-right button:hover { background: #764ba2; }
- .refresh-info { text-align: center; margin-top: 10px; color: #999; font-size: 12px; }
- .loading { text-align: center; padding: 20px; color: #666; }
- .toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 9999; display: none; }
- .toast.success { background: #52c41a; }
- .toast.error { background: #f5222d; }
- .toast.show { display: block; }
- @media (max-width: 768px) {
- .header { padding: 14px; }
- .header h1 { font-size: 18px; }
- .nav-bar { gap: 6px; }
- .nav-link { padding: 6px 12px; font-size: 12px; }
- .container { padding: 0 10px; margin: 10px auto; }
- .panel { padding: 12px; }
- .panel h2 { font-size: 15px; }
- .stats { flex-direction: column; gap: 10px; }
- .stat-card { min-width: auto; }
- .stat-card .value { font-size: 20px; }
- .filter-item { min-width: 100px; }
- .pagination-bar { flex-direction: column; align-items: stretch; }
- .pagination-left, .pagination-right { justify-content: center; }
- table { font-size: 11px; }
- th, td { padding: 6px 4px; }
- .tab-btn { padding: 8px 12px; font-size: 12px; }
- }
- @media (max-width: 480px) {
- .header h1 { font-size: 16px; }
- .nav-link { font-size: 11px; padding: 5px 10px; }
- .filter-item { min-width: 100%; }
- }
- </style>
- </head>
- <body>
- <div class="header">
- <h1>⚖️ 称重管理系统</h1>
- <p>Weight Management System v43.2-fix24-v43</p>
- <div class="nav-bar">
- <a href="/" class="nav-link">🏠 首页</a>
- <a href="/video" class="nav-link">🎥 视频</a>
- <a href="/weight" class="nav-link active">⚖️ 称重</a>
- <a href="/config" class="nav-link" id="nav-config" style="display:none;">⚙️ 配置</a>
- <a href="/locks" class="nav-link">🔒 锁定</a>
- <a href="/help" class="nav-link" id="nav-help" style="display:none;">📖 帮助</a>
- </div>
- </div>
- <div class="container">
- <div class="stats">
- <div class="stat-card">
- <div class="label">总记录数</div>
- <div class="value" id="stat-total">-</div>
- </div>
- <div class="stat-card warning">
- <div class="label">失败记录</div>
- <div class="value" id="stat-failed">-</div>
- </div>
- </div>
- <div class="panel">
- <h2>称重记录</h2>
-
- <!-- fix24 v41: Tab 切换 -->
- <div class="tab-bar">
- <button class="tab-btn active" onclick="switchTab('realtime')">📡 实时称重</button>
- <button class="tab-btn" onclick="switchTab('history')">🔍 历史查询</button>
- <button class="tab-btn" onclick="switchTab('sync')">🔗 同步视图</button>
- </div>
-
- <!-- 实时称重 Tab -->
- <div id="tab-realtime" class="tab-content active">
- <div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:6px;padding:10px;margin-bottom:15px;font-size:13px;color:#0050b3;">
- 💡 实时称重:显示最新 20 条记录,每 30 秒自动刷新
- </div>
- <div class="table-container">
- <table>
- <thead>
- <tr>
- <th>编号</th>
- <th>日期时间</th>
- <th>车牌号</th>
- <th>联单编号</th>
- <th>方向</th>
- <th>重量(kg)</th>
- <th>重量(吨)</th>
- <th>上传状态</th>
- <th>重试次数</th>
- <th>响应消息</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="realtime-body">
- <tr><td colspan="11" class="loading">加载中...</td></tr>
- </tbody>
- </table>
- </div>
- <div class="refresh-info" id="realtime-refresh-info">数据自动刷新间隔: 30秒</div>
- </div>
-
- <!-- 历史查询 Tab -->
- <div id="tab-history" class="tab-content">
- <div class="filter-bar">
- <div class="filter-row">
- <div class="filter-item">
- <label>车牌号</label>
- <input type="text" id="filter-plate" placeholder="如 沪EQ3803">
- </div>
- <div class="filter-item">
- <label>联单编号</label>
- <input type="text" id="filter-tbnum" placeholder="联单编号">
- </div>
- <div class="filter-item">
- <label>方向</label>
- <select id="filter-station">
- <option value="0">全部</option>
- <option value="1">进站</option>
- <option value="2">出站</option>
- </select>
- </div>
- <div class="filter-item">
- <label>上传状态</label>
- <select id="filter-upload">
- <option value="0">全部</option>
- <option value="1">成功</option>
- <option value="2">失败</option>
- </select>
- </div>
- </div>
- <div class="filter-row">
- <div class="filter-item">
- <label>开始日期</label>
- <input type="date" id="filter-date-from">
- </div>
- <div class="filter-item">
- <label>结束日期</label>
- <input type="date" id="filter-date-to">
- </div>
- <div class="filter-item filter-buttons">
- <button class="btn-search" onclick="searchHistory(1)">🔍 查询</button>
- <button class="btn-reset" onclick="resetFilters()">重置</button>
- </div>
- </div>
- </div>
- <div class="table-container">
- <table>
- <thead>
- <tr>
- <th>编号</th>
- <th>日期时间</th>
- <th>车牌号</th>
- <th>联单编号</th>
- <th>方向</th>
- <th>重量(kg)</th>
- <th>重量(吨)</th>
- <th>上传状态</th>
- <th>重试次数</th>
- <th>响应消息</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="history-body">
- <tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>
- </tbody>
- </table>
- </div>
- <div class="pagination-bar">
- <div class="pagination-left">
- <span>每页</span>
- <select id="page-size" onchange="changePageSize()">
- <option value="20">20</option>
- <option value="50">50</option>
- <option value="100">100</option>
- </select>
- <span>条</span>
- </div>
- <div class="pagination" id="pagination"></div>
- <div class="pagination-right">
- <span>跳至</span>
- <input type="number" id="jump-page" min="1" value="1">
- <span>页</span>
- <button onclick="jumpToPage()">GO</button>
- </div>
- </div>
- <div class="refresh-info" id="history-refresh-info">历史查询:手动触发,不自动刷新</div>
- </div>
- <!-- 同步视图 Tab (fix24 v43 P2) -->
- <div id="tab-sync" class="tab-content">
- <div style="background:#f0f5ff;border:1px solid #adc6ff;border-radius:6px;padding:10px;margin-bottom:15px;font-size:13px;color:#1d39c4;">
- 🔗 同步视图:基于 tb_num + 车牌号 联合匹配,展示抓拍事件与称重记录的同步状态
- </div>
- <!-- 同步筛选栏 -->
- <div class="filter-bar" style="margin-bottom:15px;">
- <div class="filter-row">
- <div class="filter-item">
- <label>车牌号</label>
- <input type="text" id="sync-filter-plate" placeholder="模糊匹配">
- </div>
- <div class="filter-item">
- <label>联单号</label>
- <input type="text" id="sync-filter-tbnum" placeholder="模糊匹配">
- </div>
- <div class="filter-item">
- <label>起始日期</label>
- <input type="date" id="sync-filter-date-from">
- </div>
- <div class="filter-item">
- <label>截止日期</label>
- <input type="date" id="sync-filter-date-to">
- </div>
- <div class="filter-item">
- <label>站点</label>
- <select id="sync-filter-station">
- <option value="0">全部</option>
- <option value="1">进站</option>
- <option value="2">出站</option>
- </select>
- </div>
- <div class="filter-item">
- <label>同步状态</label>
- <select id="sync-filter-status">
- <option value="0">全部</option>
- <option value="1">已匹配</option>
- <option value="2">未匹配(无重量)</option>
- <option value="3">重量上传失败</option>
- </select>
- </div>
- <div class="filter-item" style="align-self:flex-end;">
- <button class="btn-search" onclick="searchSync(1)">🔍 查询</button>
- <button class="btn-reset" onclick="resetSyncFilters()" style="margin-left:5px;">重置</button>
- </div>
- </div>
- </div>
- <!-- 同步统计卡片 -->
- <div class="stats" id="sync-stats-bar" style="margin-bottom:15px;">
- <div class="stat-card"><div class="label">同步模式</div><div class="value" id="sync-mode-display">-</div></div>
- <div class="stat-card"><div class="label">今日匹配率</div><div class="value" id="sync-today-rate" style="color:#52c41a;">-</div></div>
- <div class="stat-card"><div class="label">总匹配率</div><div class="value" id="sync-total-rate">-</div></div>
- <div class="stat-card"><div class="label">重量待上传</div><div class="value" id="sync-pending" style="color:#faad14;">-</div></div>
- </div>
- <!-- 同步结果表格 -->
- <div class="table-container">
- <table >
- <thead>
- <tr>
- <th>抓拍时间</th>
- <th>车牌号</th>
- <th>联单号</th>
- <th>站点</th>
- <th>照片上传</th>
- <th>重量匹配</th>
- <th>重量(kg)</th>
- <th>重量上传状态</th>
- </tr>
- </thead>
- <tbody id="sync-table-body">
- <tr><td colspan="8" style="text-align:center;padding:30px;color:#999;">点击"查询"加载同步数据</td></tr>
- </tbody>
- </table>
- </div>
- <div class="pagination" id="sync-pagination"></div>
- <div class="refresh-info" id="sync-refresh-info">同步视图:手动查询,统计每30秒自动刷新</div>
- </div>
- </div>
- </div>
- <div class="toast" id="toast"></div>
- <script>
- function getCookie(n){let m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}
- let currentPage = 1;
- let currentPageSize = 20;
- let currentTotal = 0;
- let currentTotalPages = 0;
- let currentFilters = {};
- let currentTab = 'realtime';
- function showToast(msg, type) {
- var t = document.getElementById('toast');
- t.textContent = msg;
- t.className = 'toast ' + type + ' show';
- setTimeout(function() { t.className = 'toast'; }, 3000);
- }
- // fix24 v41: Tab 切换
- function switchTab(tab) {
- currentTab = tab;
- document.querySelectorAll('.tab-btn').forEach(function(btn) { btn.classList.remove('active'); });
- document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); });
-
- if (tab === 'realtime') {
- document.querySelector('.tab-btn:nth-child(1)').classList.add('active');
- document.getElementById('tab-realtime').classList.add('active');
- loadRealtimeData();
- } else if (tab === 'history') {
- document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
- document.getElementById('tab-history').classList.add('active');
- } else if (tab === 'sync') {
- document.querySelector('.tab-btn:nth-child(3)').classList.add('active');
- document.getElementById('tab-sync').classList.add('active');
- loadSyncStats();
- loadSyncData(1);
- }
- }
- function collectFilters() {
- return {
- plate: document.getElementById('filter-plate').value.trim(),
- tb_num: document.getElementById('filter-tbnum').value.trim(),
- date_from: document.getElementById('filter-date-from').value,
- date_to: document.getElementById('filter-date-to').value,
- station_type: parseInt(document.getElementById('filter-station').value) || 0,
- upload_status: parseInt(document.getElementById('filter-upload').value) || 0
- };
- }
- function resetFilters() {
- document.getElementById('filter-plate').value = '';
- document.getElementById('filter-tbnum').value = '';
- document.getElementById('filter-date-from').value = '';
- document.getElementById('filter-date-to').value = '';
- document.getElementById('filter-station').value = '0';
- document.getElementById('filter-upload').value = '0';
- currentFilters = {};
- document.getElementById('history-body').innerHTML = '<tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>';
- document.getElementById('pagination').innerHTML = '';
- document.getElementById('history-refresh-info').textContent = '历史查询:手动触发,不自动刷新';
- }
- function hasActiveFilters(f) {
- return f.plate || f.tb_num || f.date_from || f.date_to ||
- f.station_type !== 0 || f.upload_status !== 0;
- }
- // fix24 v41: 实时称重数据加载
- function loadRealtimeData() {
- fetch('/api/weight/records?page=1&page_size=20')
- .then(function(r) { return r.json(); })
- .then(function(data) {
- currentTotal = data.total || 0;
- document.getElementById('stat-total').textContent = currentTotal;
- document.getElementById('stat-failed').textContent = data.failed;
- renderRecords(data, 'realtime-body');
- var refreshEl = document.getElementById('realtime-refresh-info');
- refreshEl.textContent = '数据自动刷新间隔: 30秒(共 ' + currentTotal + ' 条,显示最新 20 条)';
- })
- .catch(function(e) {
- console.error('实时称重数据加载失败:', e);
- document.getElementById('realtime-body').innerHTML = '<tr><td colspan="11" style="text-align:center;color:#f5222d;">加载失败,请刷新页面</td></tr>';
- });
- }
- // fix24 v41: 历史查询
- function searchHistory(page) {
- var filters = collectFilters();
- if (filters.date_from && filters.date_to && filters.date_from > filters.date_to) {
- alert('开始日期不能晚于结束日期');
- return;
- }
- currentFilters = filters;
- loadHistoryData(page, filters);
- }
- function loadHistoryData(page, filters) {
- currentPage = page;
- currentFilters = filters || {};
- var params = new URLSearchParams();
- params.set('page', page);
- params.set('page_size', currentPageSize);
- if (currentFilters.plate) params.set('plate', currentFilters.plate);
- if (currentFilters.tb_num) params.set('tb_num', currentFilters.tb_num);
- if (currentFilters.date_from) params.set('date_from', currentFilters.date_from);
- if (currentFilters.date_to) params.set('date_to', currentFilters.date_to);
- if (currentFilters.station_type) params.set('station_type', currentFilters.station_type);
- if (currentFilters.upload_status) params.set('upload_status', currentFilters.upload_status);
- fetch('/api/weight/records?' + params.toString())
- .then(function(r) { return r.json(); })
- .then(function(data) {
- currentTotal = data.total || 0;
- currentTotalPages = data.total_pages || 0;
- document.getElementById('stat-total').textContent = currentTotal;
- document.getElementById('stat-failed').textContent = data.failed;
- renderRecords(data, 'history-body');
- renderPagination(data.page, currentTotalPages, currentTotal);
- document.getElementById('jump-page').value = data.page;
- document.getElementById('jump-page').max = currentTotalPages || 1;
- var refreshEl = document.getElementById('history-refresh-info');
- refreshEl.textContent = '历史查询结果:共 ' + currentTotal + ' 条(手动查询,不自动刷新)';
- })
- .catch(function(e) {
- console.error('历史查询失败:', e);
- document.getElementById('history-body').innerHTML = '<tr><td colspan="11" style="text-align:center;color:#f5222d;">查询失败,请重试</td></tr>';
- });
- }
- function renderRecords(data, targetId) {
- var html = '';
- if (!data.records || data.records.length === 0) {
- html = '<tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">暂无数据</td></tr>';
- } else {
- data.records.forEach(function(rec) {
- var direction = rec.station_type === 1 ? '进站' : '出站';
- var weightTon = rec.weight_kg > 0 ? (rec.weight_kg / 1000).toFixed(3) : '-';
- var weightKg = rec.weight_kg > 0 ? rec.weight_kg.toFixed(0) : '-';
- var statusClass, statusText;
- if (rec.upload_status === 1) { statusClass = 'status-success'; statusText = '成功'; }
- else if (rec.upload_status === 2) { statusClass = 'status-failed'; statusText = '失败'; }
- else { statusClass = 'status-pending'; statusText = '待上传'; }
- var retryBtn = rec.upload_status === 2 ? '<button class="btn-retry" onclick="retryWeight(' + rec.id + ',event)">重试</button>' : '-';
- html += '<tr>';
- html += '<td>' + rec.id + '</td>';
- html += '<td style="font-size:12px;">' + rec.create_time + '</td>';
- html += '<td><b>' + rec.plate_number + '</b></td>';
- html += '<td style="font-family:monospace;font-size:12px;">' + (rec.tb_num || '-') + '</td>';
- html += '<td>' + direction + '</td>';
- html += '<td>' + weightKg + '</td>';
- html += '<td>' + weightTon + '</td>';
- html += '<td><span class="status ' + statusClass + '">' + statusText + '</span></td>';
- html += '<td>' + rec.retry_count + '</td>';
- html += '<td style="font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + (rec.response_msg || '') + '">' + (rec.response_msg || '-') + '</td>';
- html += '<td>' + retryBtn + '</td>';
- html += '</tr>';
- });
- }
- document.getElementById(targetId).innerHTML = html;
- }
- function renderPagination(page, totalPages, total) {
- if (!totalPages || totalPages < 1) totalPages = 1;
- var html = '';
- html += '<button onclick="searchHistory(1)" ' + (page <= 1 ? 'disabled' : '') + '>首页</button>';
- html += '<button onclick="searchHistory(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>上一页</button>';
- var start = Math.max(1, page - 2);
- var end = Math.min(totalPages, page + 2);
- if (start > 1) {
- html += '<button onclick="searchHistory(1)">1</button>';
- if (start > 2) html += '<span class="info">…</span>';
- }
- for (var i = start; i <= end; i++) {
- html += '<button onclick="searchHistory(' + i + ')" class="' + (i === page ? 'active' : '') + '">' + i + '</button>';
- }
- if (end < totalPages) {
- if (end < totalPages - 1) html += '<span class="info">…</span>';
- html += '<button onclick="searchHistory(' + totalPages + ')">' + totalPages + '</button>';
- }
- html += '<button onclick="searchHistory(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>下一页</button>';
- html += '<button onclick="searchHistory(' + totalPages + ')" ' + (page >= totalPages ? 'disabled' : '') + '>末页</button>';
- html += '<span class="info">第 ' + page + '/' + totalPages + ' 页 · 共 ' + total + ' 条</span>';
- document.getElementById('pagination').innerHTML = html;
- }
- function changePageSize() {
- currentPageSize = parseInt(document.getElementById('page-size').value) || 20;
- if (currentTab === 'history' && hasActiveFilters(currentFilters)) {
- searchHistory(1);
- }
- }
- function jumpToPage() {
- var p = parseInt(document.getElementById('jump-page').value) || 1;
- if (p < 1) p = 1;
- if (currentTotalPages && p > currentTotalPages) p = currentTotalPages;
- searchHistory(p);
- }
- function retryWeight(id, evt) {
- if (!confirm('确定要重新上传此称重记录吗?')) return;
- var btn = evt ? evt.target : event.target;
- btn.disabled = true;
- btn.textContent = '重试中...';
- fetch('/api/weight/retry', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCookie('csrf_token') },
- body: JSON.stringify({ id: id })
- })
- .then(function(r) { return r.json(); })
- .then(function(data) {
- btn.disabled = false;
- btn.textContent = '重试';
- if (data.success) {
- showToast('✅ ' + data.message, 'success');
- if (currentTab === 'realtime') loadRealtimeData();
- else if (hasActiveFilters(currentFilters)) loadHistoryData(currentPage, currentFilters);
- } else {
- showToast('❌ ' + data.message, 'error');
- }
- })
- .catch(function(e) {
- btn.disabled = false;
- btn.textContent = '重试';
- showToast('请求失败: ' + e, 'error');
- });
- }
- // 初始化
- loadRealtimeData();
- loadSyncStats();
- // 自动刷新:实时称重 Tab + 同步统计
- setInterval(function() {
- if (currentTab === 'realtime') {
- loadRealtimeData();
- }
- // 每30秒刷新同步统计(如果同步视图tab激活)
- if (currentTab === 'sync') {
- loadSyncStats();
- }
- }, 30000);
- // 回车搜索
- document.getElementById('filter-plate').addEventListener('keypress', function(e) {
- if (e.key === 'Enter') searchHistory(1);
- });
- document.getElementById('filter-tbnum').addEventListener('keypress', function(e) {
- if (e.key === 'Enter') searchHistory(1);
- });
- // fix24 v43 P2: 同步视图回车搜索
- document.getElementById('sync-filter-plate').addEventListener('keypress', function(e) {
- if (e.key === 'Enter') searchSync(1);
- });
- document.getElementById('sync-filter-tbnum').addEventListener('keypress', function(e) {
- if (e.key === 'Enter') searchSync(1);
- });
- // 角色检查
- fetch('/api/auth/status', {credentials:'same-origin'}).then(function(r){return r.json();}).then(function(data){
- if(data.authenticated){
- if(data.role >= 1){ var c=document.getElementById('nav-config'); if(c) c.style.display=''; }
- if(data.role >= 2){ var h=document.getElementById('nav-help'); if(h) h.style.display=''; }
- }
- }).catch(function(){});
- // ==================== fix24 v43 P2: 同步视图 JS ====================
- let syncPage = 1;
- let syncPageSize = 20;
- let syncTotalPages = 1;
- function loadSyncStats() {
- fetch('/api/sync/stats', { credentials: 'same-origin' })
- .then(function(r) { return r.json(); })
- .then(function(d) {
- document.getElementById('sync-mode-display').textContent = d.parallel_mode ? '✅ 并行模式' : '⏳ 串行模式';
- document.getElementById('sync-mode-display').style.color = d.parallel_mode ? '#52c41a' : '#faad14';
- document.getElementById('sync-today-rate').textContent = d.today_match_rate.toFixed(1) + '%';
- document.getElementById('sync-total-rate').textContent = d.match_rate.toFixed(1) + '%';
- document.getElementById('sync-pending').textContent = d.weight_pending;
- // 同时更新首页统计卡片(如果有)
- var el = document.getElementById('stat-sync-mode');
- if (el) el.textContent = d.parallel_mode ? '并行' : '串行';
- var el2 = document.getElementById('stat-match-rate');
- if (el2) el2.textContent = d.today_match_rate.toFixed(1) + '%';
- })
- .catch(function() {});
- }
- function searchSync(page) {
- syncPage = page || 1;
- loadSyncData(syncPage);
- }
- function loadSyncData(page) {
- syncPage = page || 1;
- var params = new URLSearchParams({
- page: syncPage,
- page_size: syncPageSize,
- plate: document.getElementById('sync-filter-plate').value.trim(),
- tb_num: document.getElementById('sync-filter-tbnum').value.trim(),
- date_from: document.getElementById('sync-filter-date-from').value,
- date_to: document.getElementById('sync-filter-date-to').value,
- station_type: document.getElementById('sync-filter-station').value,
- sync_status: document.getElementById('sync-filter-status').value
- });
- fetch('/api/sync/events?' + params.toString(), { credentials: 'same-origin' })
- .then(function(r) { return r.json(); })
- .then(function(data) {
- syncTotalPages = data.total_pages || 1;
- renderSyncRecords(data.records || []);
- renderSyncPagination(data.total, syncTotalPages);
- })
- .catch(function(e) {
- document.getElementById('sync-table-body').innerHTML =
- '<tr><td colspan="8" style="color:#f5222d;text-align:center;padding:20px;">加载失败: ' + e + '</td></tr>';
- });
- }
- function renderSyncRecords(records) {
- var tbody = document.getElementById('sync-table-body');
- if (!records.length) {
- tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;padding:30px;color:#999;">无匹配记录</td></tr>';
- return;
- }
- var html = '';
- for (var i = 0; i < records.length; i++) {
- var rec = records[i];
- var stationBadge = rec.station_type === 1
- ? '<span style="background:#e6f7ff;color:#0050b3;padding:2px 8px;border-radius:10px;font-size:12px;">进站</span>'
- : '<span style="background:#fff7e6;color:#d46b08;padding:2px 8px;border-radius:10px;font-size:12px;">出站</span>';
- // 照片上传状态
- var photoStatus = '';
- if (rec.lo_upload_status === 1 && rec.hi_upload_status === 1) {
- photoStatus = '<span style="color:#52c41a;">✅ 双侧成功</span>';
- } else if (rec.lo_upload_status === 2 || rec.hi_upload_status === 2) {
- photoStatus = '<span style="color:#f5222d;">❌ 有失败</span>';
- } else {
- photoStatus = '<span style="color:#faad14;">⏳ 待上传</span>';
- }
- // 重量匹配列
- var weightMatch = '';
- if (rec.synced) {
- weightMatch = '<span style="color:#52c41a;font-weight:bold;">✅ 已匹配</span>';
- } else {
- weightMatch = '<span style="color:#8c8c8c;">— 未匹配</span>';
- }
- // 重量值
- var weightVal = rec.synced ? rec.weight_kg.toFixed(1) : '<span style="color:#bbb;">—</span>';
- // 重量上传状态
- var wus = '';
- if (!rec.synced) {
- wus = '<span style="color:#bbb;">无记录</span>';
- } else if (rec.weight_upload_status === 0) {
- wus = '<span style="color:#faad14;">⏳ 待上传</span>';
- } else if (rec.weight_upload_status === 1) {
- wus = '<span style="color:#52c41a;">✅ 成功</span>';
- } else if (rec.weight_upload_status === 2) {
- wus = '<span style="color:#f5222d;" title="' + (rec.weight_response_msg || '') + '">❌ 失败</span>';
- }
- html += '<tr>' +
- '<td>' + (rec.capture_time || rec.create_time) + '</td>' +
- '<td><strong>' + rec.plate_number + '</strong></td>' +
- '<td><code style="background:#f5f5f5;padding:2px 6px;border-radius:3px;">' + rec.tb_num + '</code></td>' +
- '<td>' + stationBadge + '</td>' +
- '<td>' + photoStatus + '</td>' +
- '<td>' + weightMatch + '</td>' +
- '<td>' + weightVal + '</td>' +
- '<td>' + wus + '</td>' +
- '</tr>';
- }
- tbody.innerHTML = html;
- }
- function renderSyncPagination(total, totalPages) {
- var div = document.getElementById('sync-pagination');
- if (totalPages <= 1) {
- div.innerHTML = '<span style="color:#999;font-size:13px;">共 ' + total + ' 条记录</span>';
- return;
- }
- var html = '<span style="color:#666;font-size:13px;margin-right:10px;">共 ' + total + ' 条,' + totalPages + ' 页</span>';
- if (syncPage > 1) {
- html += '<button onclick="searchSync(1)">首页</button>';
- html += '<button onclick="searchSync(' + (syncPage - 1) + ')">上一页</button>';
- }
- var start = Math.max(1, syncPage - 2);
- var end = Math.min(totalPages, syncPage + 2);
- for (var p = start; p <= end; p++) {
- if (p === syncPage) {
- html += '<button class="active" disabled>' + p + '</button>';
- } else {
- html += '<button onclick="searchSync(' + p + ')">' + p + '</button>';
- }
- }
- if (syncPage < totalPages) {
- html += '<button onclick="searchSync(' + (syncPage + 1) + ')">下一页</button>';
- html += '<button onclick="searchSync(' + totalPages + ')">末页</button>';
- }
- div.innerHTML = html;
- }
- function resetSyncFilters() {
- document.getElementById('sync-filter-plate').value = '';
- document.getElementById('sync-filter-tbnum').value = '';
- document.getElementById('sync-filter-date-from').value = '';
- document.getElementById('sync-filter-date-to').value = '';
- document.getElementById('sync-filter-station').value = '0';
- document.getElementById('sync-filter-status').value = '0';
- searchSync(1);
- }
- </script>
- </body>
- </html>
|