| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475 |
- <!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; }
- .search-box { display: flex; gap: 10px; margin-bottom: 15px; }
- .search-box input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; }
- .search-box button { padding: 10px 20px; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; }
- .search-box button:hover { background: #764ba2; }
- .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-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: 10px; margin-top: 15px; }
- .pagination button { padding: 8px 15px; border: 1px solid #ddd; background: white; border-radius: 5px; cursor: pointer; }
- .pagination button:hover { background: #f0f5ff; }
- .pagination button:disabled { background: #f5f5f5; color: #d9d9d9; cursor: not-allowed; }
- .pagination .info { color: #666; font-size: 14px; }
- .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: space-between; align-items: center; font-size: 13px; }
- .user-bar a { color: rgba(255,255,255,0.85); text-decoration: none; margin-left: 12px; padding: 3px 8px; 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; }
- /* 连接状态面板 */
- .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%; }
- }
- </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" style="display:none;">🔒 锁定</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>
- </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>
- <div class="search-box">
- <input type="text" id="search-input" placeholder="搜索车牌号/联单编号/日期时间">
- <button onclick="searchMessages(1)">搜索</button>
- </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="messages-body">
- <tr><td colspan="10" class="loading">加载中...</td></tr>
- </tbody>
- </table>
- </div>
- <div class="pagination" id="pagination"></div>
- <div class="refresh-info">数据自动刷新间隔: 30秒</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 currentKeyword = '';
- function getCookie(n){let m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}
-
- 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));
- }
-
- function loadMessages(page, keyword) {
- let url = '/api/messages?page=' + page;
- if (keyword) url += '&keyword=' + encodeURIComponent(keyword);
-
- fetch(url)
- .then(r => r.json())
- .then(data => {
- let html = '';
- if (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 uploadStatus = rec.lo_upload_status === 1 && rec.hi_upload_status === 1 ? '成功' : '失败';
- const uploadClass = rec.lo_upload_status === 1 && rec.hi_upload_status === 1 ? 'status-success' : 'status-failed';
- const feishuClass = rec.feishu_status === 1 ? 'status-success' : rec.feishu_status === 2 ? 'status-failed' : 'status-pending';
- const feishuText = rec.feishu_status === 1 ? '已发送' : rec.feishu_status === 2 ? '失败' : '未发送';
- 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)">' : '-') + '</td>';
- html += '<td>' + (rec.hi_photo_path ? '<img class="photo-thumb" src="/photo?path=' + encodeURIComponent(rec.hi_photo_path) + '" onclick="showPhoto(this.src)">' : '-') + '</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 + ')" ' + retryDisabled + '>重试(' + rec.retry_count + '/5)</button></td>';
- html += '</tr>';
- });
- }
- document.getElementById('messages-body').innerHTML = html;
-
- // 分页
- let pageHtml = '<button onclick="searchMessages(' + (data.page - 1) + ')" ' + (data.page <= 1 ? 'disabled' : '') + '>上一页</button>';
- pageHtml += '<span class="info">第 ' + data.page + ' 页</span>';
- pageHtml += '<button onclick="searchMessages(' + (data.page + 1) + ')">下一页</button>';
- document.getElementById('pagination').innerHTML = pageHtml;
- })
- .catch(e => {
- console.error('消息列表加载失败:', e);
- document.getElementById('messages-body').innerHTML = '<tr><td colspan="10" style="text-align:center;color:#f5222d;">加载失败,请刷新页面</td></tr>';
- });
- }
-
- function searchMessages(page) {
- currentPage = page;
- currentKeyword = document.getElementById('search-input').value;
- loadMessages(currentPage, currentKeyword);
- }
-
- function retryRecord(id) {
- if (!confirm('确定要重试此记录吗?')) return;
-
- var btn = 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 || '未知错误'));
- }
- loadMessages(currentPage, currentKeyword);
- 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 loadUserInfo() {
- fetch('/api/auth/status')
- .then(r => r.json())
- .then(data => {
- const area = document.getElementById('user-info-area');
- if (data.authenticated) {
- 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>';
- // 根据角色显示导航栏项目
- // role=0: 首页、视频、称重(已默认显示)
- // role=1: + 配置、锁定
- // role=2: + 监控、隧道、SSH、日志
- if (data.role >= 1) {
- show('nav-config');
- show('nav-locks');
- }
- if (data.role >= 2) {
- show('nav-system');
- show('nav-frpc');
- show('nav-ssh');
- show('nav-logs');
- }
- } 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 loadConnections() {
- fetch('/api/connections')
- .then(r => r.json())
- .then(data => {
- let html = '';
- // RTSP 摄像头
- 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>';
- });
- }
- // MQTT
- 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>';
- }
- // frpc
- if (data.frpc) {
- let dot = data.frpc.running ? 'online' : 'offline';
- let detail = data.frpc.running ? (data.frpc.tunnels + ' 条隧道活跃') : '未运行';
- html += '<div class="conn-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>';
- }
- // Web 服务器
- 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>';
- });
- }
- // 初始化
- loadMonitorReport();
- loadMessages(1, '');
- loadUserInfo();
- loadConnections();
-
- // 自动刷新
- setInterval(() => {
- loadMonitorReport();
- if (currentPage === 1 && !currentKeyword) {
- loadMessages(1, '');
- }
- }, 30000);
-
- // 回车搜索
- document.getElementById('search-input').addEventListener('keypress', e => {
- if (e.key === 'Enter') searchMessages(1);
- });
- </script>
- </body>
- </html>
|