PlateRecApp/assets/web/index.bak3.html

<!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; }
        @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-fix19</p>
        <style>.video-link:hover{background:rgba(255,255,255,0.35)!important;}</style>
        <div class="video-links" style="margin-top:12px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;">
            <a href="/video?stream=in-low" class="video-link" style="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;">🎥 低位进站</a>
            <a href="/video?stream=in-high" class="video-link" style="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;">🎥 高位进站</a>
            <a href="/video?stream=out-low" class="video-link" style="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;">🎥 低位出站</a>
            <a href="/video?stream=out-high" class="video-link" style="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;">🎥 高位出站</a>
        </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">&times;</span>
        <img id="photo-modal-img" src="" alt="照片">
    </div>
    
    <script>
        let currentPage = 1;
        let currentKeyword = '';
        
        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;">' + rec.tb_num.substring(0, 22) + '</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' }
            })
            .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');
        }
        
        // 初始化
        loadMonitorReport();
        loadMessages(1, '');
        
        // 自动刷新
        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>