| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713 |
- <!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; }
- .container { display: flex; gap: 20px; padding: 20px; max-width: 1400px; margin: 0 auto; }
- .panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
- .report-panel { width: 320px; flex-shrink: 0; }
- .list-panel { flex: 1; min-width: 0; }
- .panel h2 { font-size: 18px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
- .metric { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
- .metric:last-child { border-bottom: none; }
- .metric-label { color: #666; font-size: 14px; }
- .metric-value { font-weight: bold; color: #333; font-size: 14px; }
- .metric-value.success { color: #52c41a; }
- .metric-value.warning { color: #faad14; }
- .metric-value.error { color: #f5222d; }
- /* 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-retry { background: #fff7e6; color: #fa8c16; }
- .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; }
- .photo-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 3px; cursor: pointer; border: 1px solid #ddd; }
- .photo-cleaned { color: #999; font-size: 12px; font-style: italic; }
- .photo-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; }
- .photo-modal.active { display: flex; }
- .photo-modal img { max-width: 90%; max-height: 90%; border-radius: 5px; }
- .photo-modal-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; }
- .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 15px; }
- .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; }
- .user-bar { background: rgba(255,255,255,0.15); padding: 8px 20px; display: flex; justify-content: center; align-items: center; font-size: 13px; position: relative; }
- .user-bar a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 5px 12px; border-radius: 4px; transition: background 0.2s; }
- .user-bar a:hover { background: rgba(255,255,255,0.2); color: white; }
- .user-bar .user-info { color: white; font-weight: 500; }
- .user-bar .role-badge { background: rgba(255,215,0,0.3); color: #ffd700; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 6px; }
- .user-bar .logout-btn { color: rgba(255,255,255,0.7); cursor: pointer; border: 1px solid rgba(255,255,255,0.3); padding: 2px 10px; border-radius: 4px; background: transparent; font-size: 12px; }
- .user-bar .logout-btn:hover { background: rgba(255,255,255,0.15); color: white; }
- #nav-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
- #user-info-area { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
- .conn-panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin: 0 20px 0 20px; max-width: 1360px; }
- .conn-panel h2 { font-size: 16px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 8px; }
- .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
- .conn-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; }
- .conn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
- .conn-dot.online { background: #52c41a; box-shadow: 0 0 6px rgba(82,196,26,0.4); }
- .conn-dot.offline { background: #f5222d; box-shadow: 0 0 6px rgba(245,34,46,0.4); }
- .conn-dot.warn { background: #faad14; box-shadow: 0 0 6px rgba(250,173,20,0.4); }
- .conn-dot.disabled { background: #d9d9d9; }
- .conn-label { font-size: 13px; color: #333; font-weight: 500; }
- .conn-detail { font-size: 11px; color: #999; margin-top: 2px; }
- @media (max-width: 900px) {
- .container { flex-direction: column; }
- .report-panel { width: 100%; }
- }
- @media (max-width: 768px) {
- .header { padding: 12px; }
- .header h1 { font-size: 18px; }
- .header p { font-size: 11px; }
- .user-bar { flex-direction: column; gap: 8px; padding: 8px 12px; }
- #user-info-area { position: static; transform: none; text-align: center; }
- #nav-links { gap: 4px; }
- .user-bar a { padding: 4px 8px; font-size: 12px; }
- .conn-panel { margin: 10px; padding: 0; }
- .conn-grid { grid-template-columns: 1fr 2fr; gap: 8px; }
- .container { flex-direction: column; padding: 10px; gap: 10px; }
- .report-panel { width: 100%; }
- .panel { padding: 12px; }
- .panel h2 { font-size: 15px; }
- table { font-size: 11px; }
- th, td { padding: 6px 4px; }
- .photo-thumb { width: 40px; height: 28px; }
- .tab-btn { padding: 8px 12px; font-size: 12px; }
- }
- @media (max-width: 480px) {
- .conn-grid { grid-template-columns: 1fr; }
- .header h1 { font-size: 16px; }
- #nav-links a { font-size: 11px; padding: 3px 6px; }
- }
- </style>
- </head>
- <body>
- <div class="header">
- <h1>车牌识别监控系统</h1>
- <p>Plate Recognition Monitoring System v43.2-fix24</p>
- <div class="user-bar" id="main-nav">
- <div id="nav-links">
- <a href="/">🏠 首页</a>
- <a href="/video">🎥 视频</a>
- <a href="/weight">⚖️ 称重</a>
- <a href="/config" id="nav-config" style="display:none;">⚙️ 配置</a>
- <a href="/locks" id="nav-locks">🔒 锁定</a>
- <a href="/system" id="nav-system" style="display:none;">📊 监控</a>
- <a href="/frpc" id="nav-frpc" style="display:none;">🔗 隧道</a>
- <a href="/ssh-keys" id="nav-ssh" style="display:none;">🔑 SSH</a>
- <a href="/logs" id="nav-logs" style="display:none;">📋 日志</a>
- <a href="/help" id="nav-help" style="display:none;">📖 帮助</a>
- </div>
- <div id="user-info-area">
- <span class="user-info" id="user-display">未登录</span>
- </div>
- </div>
- </div>
-
- <div class="conn-panel" style="margin:20px auto;max-width:1360px;padding:0 20px;">
- <div style="background:white;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.1);">
- <h2 style="font-size:16px;color:#333;margin-bottom:15px;border-bottom:2px solid #667eea;padding-bottom:8px;">🔌 连接状态</h2>
- <div class="conn-grid" id="connections-grid">
- <div class="conn-item"><div class="conn-dot disabled"></div><div><div class="conn-label">加载中...</div></div></div>
- </div>
- </div>
- </div>
- <div class="container">
- <div class="panel report-panel">
- <h2>监控报告</h2>
- <div id="monitor-report">
- <div class="loading">加载中...</div>
- </div>
- </div>
-
- <div class="panel list-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>
- </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>低位照片</th>
- <th>高位照片</th>
- <th>上传状态</th>
- <th>飞书状态</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="realtime-body">
- <tr><td colspan="10" 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>
- <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">
- <label>上传状态</label>
- <select id="filter-upload">
- <option value="0">全部</option>
- <option value="1">成功</option>
- <option value="2">失败</option>
- </select>
- </div>
- <div class="filter-item">
- <label>飞书状态</label>
- <select id="filter-feishu">
- <option value="0">全部</option>
- <option value="1">已发送</option>
- <option value="2">失败</option>
- <option value="3">未发送</option>
- </select>
- </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>低位照片</th>
- <th>高位照片</th>
- <th>上传状态</th>
- <th>飞书状态</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="history-body">
- <tr><td colspan="10" 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>
- </div>
- </div>
-
- <div class="photo-modal" id="photo-modal" onclick="closePhotoModal()">
- <span class="photo-modal-close">×</span>
- <img id="photo-modal-img" src="" alt="照片">
- </div>
-
- <script>
- let currentPage = 1;
- let currentPageSize = 20;
- let currentTotal = 0;
- let currentTotalPages = 0;
- let currentFilters = {};
- let currentTab = 'realtime';
- function getCookie(n){let m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}
-
- // fix24 v41: Tab 切换
- function switchTab(tab) {
- currentTab = tab;
- document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
- document.querySelectorAll('.tab-content').forEach(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 {
- document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
- document.getElementById('tab-history').classList.add('active');
- }
- }
-
- function loadMonitorReport() {
- fetch('/api/monitor')
- .then(r => r.json())
- .then(data => {
- document.getElementById('monitor-report').innerHTML = `
- <div class="metric"><span class="metric-label">createBill成功率</span><span class="metric-value ${data.createbill_success_rate >= 90 ? 'success' : data.createbill_success_rate >= 70 ? 'warning' : 'error'}">${data.createbill_success_rate.toFixed(1)}%</span></div>
- <div class="metric"><span class="metric-label">createBill总调用</span><span class="metric-value">${data.createbill_total} / 成功 ${data.createbill_success}</span></div>
- <div class="metric"><span class="metric-label">照片平均耗时</span><span class="metric-value">${data.avg_upload_time}ms</span></div>
- <div class="metric"><span class="metric-label">TIME_WINDOW命中</span><span class="metric-value">${data.time_window_hits}</span></div>
- <div class="metric"><span class="metric-label">进站缓存命中率</span><span class="metric-value">${data.in_cache_hit_rate.toFixed(1)}%</span></div>
- <div class="metric"><span class="metric-label">出站缓存命中率</span><span class="metric-value">${data.out_cache_hit_rate.toFixed(1)}%</span></div>
- <div class="metric"><span class="metric-label">进站统计</span><span class="metric-value">${data.in_station_count}</span></div>
- <div class="metric"><span class="metric-label">出站统计</span><span class="metric-value">${data.out_station_count}</span></div>
- <div class="metric"><span class="metric-label">总记录数</span><span class="metric-value">${data.total_records}</span></div>
- <div class="metric"><span class="metric-label">失败记录</span><span class="metric-value ${data.failed_records > 0 ? 'error' : ''}">${data.failed_records}</span></div>
- <div class="metric"><span class="metric-label">飞书成功数</span><span class="metric-value">${data.feishu_success_count}</span></div>
- <div class="metric"><span class="metric-label">系统运行时间</span><span class="metric-value">${data.uptime}</span></div>
- <div class="metric"><span class="metric-label">网络超时</span><span class="metric-value ${data.network_timeouts > 10 ? 'warning' : ''}">${data.network_timeouts}</span></div>
- <div class="metric"><span class="metric-label">服务器错误</span><span class="metric-value ${data.server_errors > 5 ? 'warning' : ''}">${data.server_errors}</span></div>
- <div class="metric"><span class="metric-label">总上传错误</span><span class="metric-value ${data.upload_errors > 0 ? 'error' : ''}">${data.upload_errors}</span></div>
- <div class="metric"><span class="metric-label">交替锁定</span><span class="metric-value ${data.alternating_merge_enabled ? 'success' : ''}">${data.alternating_merge_enabled ? '启用' : '禁用'}</span></div>
- <div class="metric"><span class="metric-label">紧急告警抑制</span><span class="metric-value ${data.emergency_alert_suppressed ? 'warning' : 'success'}">${data.emergency_alert_suppressed ? '已抑制' : '正常'}</span></div>
- <div class="metric"><span class="metric-label">交替锁定间隔</span><span class="metric-value">${data.in_out_interval_sec}秒</span></div>
- `;
- })
- .catch(e => console.error('监控报告加载失败:', e));
- }
-
- // fix24 v41: 实时数据加载(固定page_size=20)
- function loadRealtimeData() {
- fetch('/api/messages?page=1&page_size=20')
- .then(r => r.json())
- .then(data => {
- renderMessages(data, 'realtime-body');
- const refreshEl = document.getElementById('realtime-refresh-info');
- refreshEl.textContent = '数据自动刷新间隔: 30秒(共 ' + (data.total || 0) + ' 条,显示最新 20 条)';
- })
- .catch(e => {
- console.error('实时数据加载失败:', e);
- document.getElementById('realtime-body').innerHTML = '<tr><td colspan="10" style="text-align:center;color:#f5222d;">加载失败,请刷新页面</td></tr>';
- });
- }
-
- // fix24 v41: 历史查询
- function searchHistory(page) {
- const 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 || {};
- let 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);
- if (currentFilters.feishu_status) params.set('feishu_status', currentFilters.feishu_status);
- fetch('/api/messages?' + params.toString())
- .then(r => r.json())
- .then(data => {
- currentTotal = data.total || 0;
- currentTotalPages = data.total_pages || 0;
- renderMessages(data, 'history-body');
- renderPagination(data.page, currentTotalPages, currentTotal);
- document.getElementById('jump-page').value = data.page;
- document.getElementById('jump-page').max = currentTotalPages || 1;
- const refreshEl = document.getElementById('history-refresh-info');
- refreshEl.textContent = '历史查询结果:共 ' + currentTotal + ' 条(手动查询,不自动刷新)';
- })
- .catch(e => {
- console.error('历史查询失败:', e);
- document.getElementById('history-body').innerHTML = '<tr><td colspan="10" style="text-align:center;color:#f5222d;">查询失败,请重试</td></tr>';
- });
- }
-
- function renderMessages(data, targetId) {
- let html = '';
- if (!data.records || data.records.length === 0) {
- html = '<tr><td colspan="10" style="text-align:center;padding:30px;color:#999;">暂无数据</td></tr>';
- } else {
- data.records.forEach(rec => {
- const stationType = rec.station_type === 1 ? '进站' : '出站';
- const uploadOk = rec.lo_upload_status === 1 && rec.hi_upload_status === 1;
- const uploadStatus = uploadOk ? '成功' : '失败';
- const uploadClass = uploadOk ? 'status-success' : 'status-failed';
- let feishuClass, feishuText;
- if (rec.feishu_status === 1) { feishuClass = 'status-success'; feishuText = '已发送'; }
- else if (rec.feishu_status === 2) { feishuClass = 'status-failed'; feishuText = '失败'; }
- else { feishuClass = 'status-pending'; feishuText = '未发送'; }
- const retryDisabled = rec.retry_count >= 5 ? 'disabled' : '';
- html += '<tr>';
- html += '<td>' + rec.id + '</td>';
- html += '<td>' + 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>' + stationType + '</td>';
- html += '<td>' + (rec.lo_photo_path ? '<img class="photo-thumb" src="/photo?path=' + encodeURIComponent(rec.lo_photo_path) + '" onclick="showPhoto(this.src)" onerror="this.outerHTML=\'<span class=photo-cleaned title=照片已被自动清理>已清理</span>\'">' : '<span class="photo-cleaned" title="照片已被自动清理">已清理</span>') + '</td>';
- html += '<td>' + (rec.hi_photo_path ? '<img class="photo-thumb" src="/photo?path=' + encodeURIComponent(rec.hi_photo_path) + '" onclick="showPhoto(this.src)" onerror="this.outerHTML=\'<span class=photo-cleaned title=照片已被自动清理>已清理</span>\'">' : '<span class="photo-cleaned" title="照片已被自动清理">已清理</span>') + '</td>';
- html += '<td><span class="status ' + uploadClass + '">' + uploadStatus + '</span></td>';
- html += '<td><span class="status ' + feishuClass + '">' + feishuText + '</span></td>';
- html += '<td><button class="btn-retry" onclick="retryRecord(' + rec.id + ',event)" ' + retryDisabled + '>重试(' + rec.retry_count + '/5)</button></td>';
- html += '</tr>';
- });
- }
- document.getElementById(targetId).innerHTML = html;
- }
- 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,
- feishu_status: parseInt(document.getElementById('filter-feishu').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';
- document.getElementById('filter-feishu').value = '0';
- currentFilters = {};
- document.getElementById('history-body').innerHTML = '<tr><td colspan="10" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>';
- document.getElementById('pagination').innerHTML = '';
- document.getElementById('history-refresh-info').textContent = '历史查询:手动触发,不自动刷新';
- }
- function renderPagination(page, totalPages, total) {
- if (!totalPages || totalPages < 1) totalPages = 1;
- let html = '';
- html += '<button onclick="searchHistory(1)" ' + (page <= 1 ? 'disabled' : '') + '>首页</button>';
- html += '<button onclick="searchHistory(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>上一页</button>';
- let start = Math.max(1, page - 2);
- let 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 (let 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() {
- let p = parseInt(document.getElementById('jump-page').value) || 1;
- if (p < 1) p = 1;
- if (currentTotalPages && p > currentTotalPages) p = currentTotalPages;
- searchHistory(p);
- }
-
- function retryRecord(id, evt) {
- if (!confirm('确定要重试此记录吗?')) return;
-
- var btn = evt ? evt.target : event.target;
- btn.disabled = true;
- btn.textContent = '重试中...';
-
- fetch('/api/retry', {
- method: 'POST',
- body: 'id=' + id,
- headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-Token': getCookie('csrf_token') }
- })
- .then(r => r.json())
- .then(data => {
- btn.disabled = false;
- btn.textContent = '重试';
- if (data.success) {
- var msg = '✅ 重试成功';
- if (data.tb_num) msg += '\n联单编号: ' + data.tb_num;
- if (data.uploaded_photos > 0) msg += '\n上传照片: ' + data.uploaded_photos + '张';
- alert(msg);
- } else {
- alert('❌ 重试失败: ' + (data.message || '未知错误'));
- }
- if (currentTab === 'realtime') loadRealtimeData();
- else if (hasActiveFilters(currentFilters)) loadHistoryData(currentPage, currentFilters);
- loadMonitorReport();
- })
- .catch(e => {
- btn.disabled = false;
- btn.textContent = '重试';
- alert('重试请求失败: ' + e);
- });
- }
-
- function showPhoto(src) {
- document.getElementById('photo-modal-img').src = src;
- document.getElementById('photo-modal').classList.add('active');
- }
-
- function closePhotoModal() {
- document.getElementById('photo-modal').classList.remove('active');
- }
-
- function hasActiveFilters(f) {
- return f.plate || f.tb_num || f.date_from || f.date_to ||
- f.station_type !== 0 || f.upload_status !== 0 || f.feishu_status !== 0;
- }
-
- // ==================== 用户信息显示 + 导航栏权限控制 ====================
- var _currentUserRole = 0;
- var _lastConnectionsData = null;
- function loadUserInfo() {
- return fetch('/api/auth/status')
- .then(r => r.json())
- .then(data => {
- const area = document.getElementById('user-info-area');
- if (data.authenticated) {
- _currentUserRole = data.role;
- const roles = {0: '普通用户', 1: '管理员', 2: '超级管理员'};
- const roleName = roles[data.role] || '未知角色';
- const roleClass = data.role === 2 ? 'style="background:rgba(255,215,0,0.3);color:#ffd700;"' :
- data.role === 1 ? 'style="background:rgba(64,169,255,0.3);color:#40a9ff;"' : '';
- area.innerHTML = '<span class="user-info">👤 ' + data.username + '</span>' +
- '<span class="role-badge" ' + roleClass + '>' + roleName + '</span>' +
- ' <button class="logout-btn" onclick="logout()">退出</button>';
- if (data.role >= 1) {
- show('nav-config');
- }
- if (data.role >= 2) {
- show('nav-system');
- show('nav-frpc');
- show('nav-ssh');
- show('nav-logs');
- show('nav-help');
- }
- if (data.role >= 2 && _lastConnectionsData) {
- renderConnectionsFrpc(_lastConnectionsData);
- }
- } else {
- area.innerHTML = '<a href="/login" style="color:white;text-decoration:underline;">登录</a>';
- }
- })
- .catch(e => console.error('用户信息加载失败:', e));
- }
- function show(id) {
- var el = document.getElementById(id);
- if (el) el.style.display = '';
- }
- function logout() {
- fetch('/api/auth/logout', {method: 'POST', headers: {'X-CSRF-Token': getCookie('csrf_token')}})
- .then(() => { window.location.href = '/login'; })
- .catch(() => { window.location.href = '/login'; });
- }
- // ==================== 连接状态显示 ====================
- function renderConnectionsFrpc(data) {
- if (!data.frpc || _currentUserRole < 2) return;
- var existing = document.getElementById('conn-frpc-item');
- var dot = data.frpc.running ? 'online' : 'offline';
- var detail = data.frpc.running ? (data.frpc.tunnels + ' 条隧道活跃') : '未运行';
- var frpcHtml = '<div class="conn-item" id="conn-frpc-item"><div class="conn-dot ' + dot + '"></div>' +
- '<div><div class="conn-label">🔗 frpc 隧道</div>' +
- '<div class="conn-detail">' + detail + (data.frpc.version ? ' v' + data.frpc.version : '') + '</div></div></div>';
- if (existing) {
- existing.outerHTML = frpcHtml;
- } else {
- document.getElementById('connections-grid').insertAdjacentHTML('beforeend', frpcHtml);
- }
- }
- function loadConnections() {
- fetch('/api/connections')
- .then(r => r.json())
- .then(data => {
- _lastConnectionsData = data;
- let html = '';
- if (data.rtsp) {
- data.rtsp.forEach(cam => {
- let dot = 'disabled';
- let detail = '未配置';
- if (cam.configured && cam.running) { dot = 'online'; detail = '采集中'; }
- else if (cam.configured && !cam.running) { dot = 'offline'; detail = '已断开'; }
- else { dot = 'disabled'; detail = '未配置'; }
- html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
- '<div><div class="conn-label">📷 ' + cam.name + '</div>' +
- '<div class="conn-detail">' + detail + '</div></div></div>';
- });
- }
- if (data.mqtt) {
- let dot = 'disabled', detail = '未启用';
- if (data.mqtt.enabled) {
- if (data.mqtt.status === 1) { dot = 'online'; detail = data.mqtt.state + ' (' + data.mqtt.host + ')'; }
- else if (data.mqtt.status === 2) { dot = 'warn'; detail = data.mqtt.state + '...'; }
- else { dot = 'offline'; detail = data.mqtt.state; }
- }
- html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
- '<div><div class="conn-label">📨 MQTT</div>' +
- '<div class="conn-detail">' + detail + '</div></div></div>';
- }
- if (data.database) {
- let dot = data.database.connected ? 'online' : 'offline';
- let detail = data.database.connected ? 'SQLite 已连接' : '未连接';
- html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
- '<div><div class="conn-label">🗄️ 数据库</div>' +
- '<div class="conn-detail">' + detail + '</div></div></div>';
- }
- if (data.frpc && _currentUserRole >= 2) {
- html += '<div class="conn-item" id="conn-frpc-item"><div class="conn-dot ' + (data.frpc.running ? 'online' : 'offline') + '"></div>' +
- '<div><div class="conn-label">🔗 frpc 隧道</div>' +
- '<div class="conn-detail">' + (data.frpc.running ? data.frpc.tunnels + ' 条隧道活跃' : '未运行') + (data.frpc.version ? ' v' + data.frpc.version : '') + '</div></div></div>';
- }
- if (data.web) {
- let detail = '端口 ' + data.web.port + (data.web.https ? ' (HTTPS)' : '');
- html += '<div class="conn-item"><div class="conn-dot online"></div>' +
- '<div><div class="conn-label">🌐 Web 服务</div>' +
- '<div class="conn-detail">' + detail + '</div></div></div>';
- }
- document.getElementById('connections-grid').innerHTML = html;
- })
- .catch(e => {
- console.error('连接状态加载失败:', e);
- document.getElementById('connections-grid').innerHTML =
- '<div class="conn-item"><div class="conn-dot offline"></div><div><div class="conn-label">加载失败</div></div></div>';
- });
- }
- loadUserInfo();
- loadConnections();
- loadMonitorReport();
- loadRealtimeData();
-
- // 自动刷新:只刷新实时数据 Tab
- setInterval(() => {
- if (currentTab === 'realtime') {
- loadMonitorReport();
- loadRealtimeData();
- }
- }, 30000);
-
- // 筛选框回车触发查询
- ['filter-plate','filter-tbnum','filter-date-from','filter-date-to'].forEach(id => {
- const el = document.getElementById(id);
- if (el) el.addEventListener('keypress', e => { if (e.key === 'Enter') searchHistory(1); });
- });
- </script>
- </body>
- </html>
|