index.html 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>车牌识别监控系统</title>
  7. <style>
  8. * { box-sizing: border-box; margin: 0; padding: 0; }
  9. body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; }
  10. .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; text-align: center; }
  11. .header h1 { font-size: 24px; margin-bottom: 5px; }
  12. .container { display: flex; gap: 20px; padding: 20px; max-width: 1400px; margin: 0 auto; }
  13. .panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
  14. .report-panel { width: 320px; flex-shrink: 0; }
  15. .list-panel { flex: 1; min-width: 0; }
  16. .panel h2 { font-size: 18px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
  17. .metric { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
  18. .metric:last-child { border-bottom: none; }
  19. .metric-label { color: #666; font-size: 14px; }
  20. .metric-value { font-weight: bold; color: #333; font-size: 14px; }
  21. .metric-value.success { color: #52c41a; }
  22. .metric-value.warning { color: #faad14; }
  23. .metric-value.error { color: #f5222d; }
  24. /* fix24 v41: Tab 切换样式 */
  25. .tab-bar { display: flex; gap: 0; margin-bottom: 15px; border-bottom: 2px solid #e9ecef; }
  26. .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; }
  27. .tab-btn:hover { color: #667eea; background: #f8f9fa; }
  28. .tab-btn.active { color: #667eea; border-bottom-color: #667eea; font-weight: 600; }
  29. .tab-content { display: none; }
  30. .tab-content.active { display: block; }
  31. /* fix24 v41: 分类查询样式 */
  32. .filter-bar { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 12px; margin-bottom: 15px; }
  33. .filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
  34. .filter-row + .filter-row { margin-top: 8px; }
  35. .filter-item { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 130px; }
  36. .filter-item label { font-size: 12px; color: #666; font-weight: 500; }
  37. .filter-item input, .filter-item select { padding: 7px 9px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; background: white; }
  38. .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); }
  39. .filter-buttons { flex: 0 0 auto; flex-direction: row !important; gap: 8px !important; }
  40. .btn-search, .btn-reset { padding: 7px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
  41. .btn-search { background: #667eea; color: white; }
  42. .btn-search:hover { background: #764ba2; }
  43. .btn-reset { background: white; color: #666; border: 1px solid #d9d9d9; }
  44. .btn-reset:hover { border-color: #667eea; color: #667eea; }
  45. .table-container { overflow-x: auto; }
  46. table { width: 100%; border-collapse: collapse; font-size: 13px; }
  47. th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #eee; }
  48. th { background: #f8f9fa; font-weight: 600; color: #333; white-space: nowrap; }
  49. tr:hover { background: #f8f9fa; }
  50. .status { padding: 3px 8px; border-radius: 3px; font-size: 12px; display: inline-block; }
  51. .status-success { background: #d9f7be; color: #52c41a; }
  52. .status-failed { background: #fff1f0; color: #f5222d; }
  53. .status-retry { background: #fff7e6; color: #fa8c16; }
  54. .status-pending { background: #f0f5ff; color: #1890ff; }
  55. .btn-retry { padding: 3px 8px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; }
  56. .btn-retry:hover { background: #40a9ff; }
  57. .btn-retry:disabled { background: #d9d9d9; cursor: not-allowed; }
  58. .photo-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 3px; cursor: pointer; border: 1px solid #ddd; }
  59. .photo-cleaned { color: #999; font-size: 12px; font-style: italic; }
  60. .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; }
  61. .photo-modal.active { display: flex; }
  62. .photo-modal img { max-width: 90%; max-height: 90%; border-radius: 5px; }
  63. .photo-modal-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; }
  64. .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 15px; }
  65. .pagination button { padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; }
  66. .pagination button:hover:not(:disabled) { background: #f0f5ff; border-color: #667eea; color: #667eea; }
  67. .pagination button:disabled { background: #f5f5f5; color: #d9d9d9; cursor: not-allowed; }
  68. .pagination button.active { background: #667eea; color: white; border-color: #667eea; }
  69. .pagination .info { color: #666; font-size: 13px; padding: 0 4px; }
  70. .pagination-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
  71. .pagination-left, .pagination-right { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; }
  72. .pagination-left select, .pagination-right input { padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; width: 65px; }
  73. .pagination-right input { width: 55px; }
  74. .pagination-right button { padding: 5px 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
  75. .pagination-right button:hover { background: #764ba2; }
  76. .refresh-info { text-align: center; margin-top: 10px; color: #999; font-size: 12px; }
  77. .loading { text-align: center; padding: 20px; color: #666; }
  78. .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; }
  79. .user-bar a { color: rgba(255,255,255,0.85); text-decoration: none; padding: 5px 12px; border-radius: 4px; transition: background 0.2s; }
  80. .user-bar a:hover { background: rgba(255,255,255,0.2); color: white; }
  81. .user-bar .user-info { color: white; font-weight: 500; }
  82. .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; }
  83. .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; }
  84. .user-bar .logout-btn:hover { background: rgba(255,255,255,0.15); color: white; }
  85. #nav-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
  86. #user-info-area { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
  87. .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; }
  88. .conn-panel h2 { font-size: 16px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 8px; }
  89. .conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
  90. .conn-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; }
  91. .conn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  92. .conn-dot.online { background: #52c41a; box-shadow: 0 0 6px rgba(82,196,26,0.4); }
  93. .conn-dot.offline { background: #f5222d; box-shadow: 0 0 6px rgba(245,34,46,0.4); }
  94. .conn-dot.warn { background: #faad14; box-shadow: 0 0 6px rgba(250,173,20,0.4); }
  95. .conn-dot.disabled { background: #d9d9d9; }
  96. .conn-label { font-size: 13px; color: #333; font-weight: 500; }
  97. .conn-detail { font-size: 11px; color: #999; margin-top: 2px; }
  98. @media (max-width: 900px) {
  99. .container { flex-direction: column; }
  100. .report-panel { width: 100%; }
  101. }
  102. @media (max-width: 768px) {
  103. .header { padding: 12px; }
  104. .header h1 { font-size: 18px; }
  105. .header p { font-size: 11px; }
  106. .user-bar { flex-direction: column; gap: 8px; padding: 8px 12px; }
  107. #user-info-area { position: static; transform: none; text-align: center; }
  108. #nav-links { gap: 4px; }
  109. .user-bar a { padding: 4px 8px; font-size: 12px; }
  110. .conn-panel { margin: 10px; padding: 0; }
  111. .conn-grid { grid-template-columns: 1fr 2fr; gap: 8px; }
  112. .container { flex-direction: column; padding: 10px; gap: 10px; }
  113. .report-panel { width: 100%; }
  114. .panel { padding: 12px; }
  115. .panel h2 { font-size: 15px; }
  116. table { font-size: 11px; }
  117. th, td { padding: 6px 4px; }
  118. .photo-thumb { width: 40px; height: 28px; }
  119. .tab-btn { padding: 8px 12px; font-size: 12px; }
  120. }
  121. @media (max-width: 480px) {
  122. .conn-grid { grid-template-columns: 1fr; }
  123. .header h1 { font-size: 16px; }
  124. #nav-links a { font-size: 11px; padding: 3px 6px; }
  125. }
  126. </style>
  127. </head>
  128. <body>
  129. <div class="header">
  130. <h1>车牌识别监控系统</h1>
  131. <p>Plate Recognition Monitoring System v43.2-fix24</p>
  132. <div class="user-bar" id="main-nav">
  133. <div id="nav-links">
  134. <a href="/">🏠 首页</a>
  135. <a href="/video">🎥 视频</a>
  136. <a href="/weight">⚖️ 称重</a>
  137. <a href="/config" id="nav-config" style="display:none;">⚙️ 配置</a>
  138. <a href="/locks" id="nav-locks">🔒 锁定</a>
  139. <a href="/system" id="nav-system" style="display:none;">📊 监控</a>
  140. <a href="/frpc" id="nav-frpc" style="display:none;">🔗 隧道</a>
  141. <a href="/ssh-keys" id="nav-ssh" style="display:none;">🔑 SSH</a>
  142. <a href="/logs" id="nav-logs" style="display:none;">📋 日志</a>
  143. <a href="/help" id="nav-help" style="display:none;">📖 帮助</a>
  144. </div>
  145. <div id="user-info-area">
  146. <span class="user-info" id="user-display">未登录</span>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="conn-panel" style="margin:20px auto;max-width:1360px;padding:0 20px;">
  151. <div style="background:white;border-radius:10px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,0.1);">
  152. <h2 style="font-size:16px;color:#333;margin-bottom:15px;border-bottom:2px solid #667eea;padding-bottom:8px;">🔌 连接状态</h2>
  153. <div class="conn-grid" id="connections-grid">
  154. <div class="conn-item"><div class="conn-dot disabled"></div><div><div class="conn-label">加载中...</div></div></div>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="container">
  159. <div class="panel report-panel">
  160. <h2>监控报告</h2>
  161. <div id="monitor-report">
  162. <div class="loading">加载中...</div>
  163. </div>
  164. </div>
  165. <div class="panel list-panel">
  166. <h2>识别记录</h2>
  167. <!-- fix24 v41: Tab 切换 -->
  168. <div class="tab-bar">
  169. <button class="tab-btn active" onclick="switchTab('realtime')">📡 实时数据</button>
  170. <button class="tab-btn" onclick="switchTab('history')">🔍 历史查询</button>
  171. </div>
  172. <!-- 实时数据 Tab -->
  173. <div id="tab-realtime" class="tab-content active">
  174. <div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:6px;padding:10px;margin-bottom:15px;font-size:13px;color:#0050b3;">
  175. 💡 实时数据:显示最新 20 条记录,每 30 秒自动刷新
  176. </div>
  177. <div class="table-container">
  178. <table>
  179. <thead>
  180. <tr>
  181. <th>编号</th>
  182. <th>日期时间</th>
  183. <th>车牌号</th>
  184. <th>联单编号</th>
  185. <th>类型</th>
  186. <th>低位照片</th>
  187. <th>高位照片</th>
  188. <th>上传状态</th>
  189. <th>飞书状态</th>
  190. <th>操作</th>
  191. </tr>
  192. </thead>
  193. <tbody id="realtime-body">
  194. <tr><td colspan="10" class="loading">加载中...</td></tr>
  195. </tbody>
  196. </table>
  197. </div>
  198. <div class="refresh-info" id="realtime-refresh-info">数据自动刷新间隔: 30秒</div>
  199. </div>
  200. <!-- 历史查询 Tab -->
  201. <div id="tab-history" class="tab-content">
  202. <div class="filter-bar">
  203. <div class="filter-row">
  204. <div class="filter-item">
  205. <label>车牌号</label>
  206. <input type="text" id="filter-plate" placeholder="如 沪EQ3803">
  207. </div>
  208. <div class="filter-item">
  209. <label>联单编号</label>
  210. <input type="text" id="filter-tbnum" placeholder="联单编号">
  211. </div>
  212. <div class="filter-item">
  213. <label>类型</label>
  214. <select id="filter-station">
  215. <option value="0">全部</option>
  216. <option value="1">进站</option>
  217. <option value="2">出站</option>
  218. </select>
  219. </div>
  220. </div>
  221. <div class="filter-row">
  222. <div class="filter-item">
  223. <label>开始日期</label>
  224. <input type="date" id="filter-date-from">
  225. </div>
  226. <div class="filter-item">
  227. <label>结束日期</label>
  228. <input type="date" id="filter-date-to">
  229. </div>
  230. <div class="filter-item">
  231. <label>上传状态</label>
  232. <select id="filter-upload">
  233. <option value="0">全部</option>
  234. <option value="1">成功</option>
  235. <option value="2">失败</option>
  236. </select>
  237. </div>
  238. <div class="filter-item">
  239. <label>飞书状态</label>
  240. <select id="filter-feishu">
  241. <option value="0">全部</option>
  242. <option value="1">已发送</option>
  243. <option value="2">失败</option>
  244. <option value="3">未发送</option>
  245. </select>
  246. </div>
  247. <div class="filter-item filter-buttons">
  248. <button class="btn-search" onclick="searchHistory(1)">🔍 查询</button>
  249. <button class="btn-reset" onclick="resetFilters()">重置</button>
  250. </div>
  251. </div>
  252. </div>
  253. <div class="table-container">
  254. <table>
  255. <thead>
  256. <tr>
  257. <th>编号</th>
  258. <th>日期时间</th>
  259. <th>车牌号</th>
  260. <th>联单编号</th>
  261. <th>类型</th>
  262. <th>低位照片</th>
  263. <th>高位照片</th>
  264. <th>上传状态</th>
  265. <th>飞书状态</th>
  266. <th>操作</th>
  267. </tr>
  268. </thead>
  269. <tbody id="history-body">
  270. <tr><td colspan="10" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>
  271. </tbody>
  272. </table>
  273. </div>
  274. <div class="pagination-bar">
  275. <div class="pagination-left">
  276. <span>每页</span>
  277. <select id="page-size" onchange="changePageSize()">
  278. <option value="20">20</option>
  279. <option value="50">50</option>
  280. <option value="100">100</option>
  281. </select>
  282. <span>条</span>
  283. </div>
  284. <div class="pagination" id="pagination"></div>
  285. <div class="pagination-right">
  286. <span>跳至</span>
  287. <input type="number" id="jump-page" min="1" value="1">
  288. <span>页</span>
  289. <button onclick="jumpToPage()">GO</button>
  290. </div>
  291. </div>
  292. <div class="refresh-info" id="history-refresh-info">历史查询:手动触发,不自动刷新</div>
  293. </div>
  294. </div>
  295. </div>
  296. <div class="photo-modal" id="photo-modal" onclick="closePhotoModal()">
  297. <span class="photo-modal-close">&times;</span>
  298. <img id="photo-modal-img" src="" alt="照片">
  299. </div>
  300. <script>
  301. let currentPage = 1;
  302. let currentPageSize = 20;
  303. let currentTotal = 0;
  304. let currentTotalPages = 0;
  305. let currentFilters = {};
  306. let currentTab = 'realtime';
  307. function getCookie(n){let m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}
  308. // fix24 v41: Tab 切换
  309. function switchTab(tab) {
  310. currentTab = tab;
  311. document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
  312. document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
  313. if (tab === 'realtime') {
  314. document.querySelector('.tab-btn:nth-child(1)').classList.add('active');
  315. document.getElementById('tab-realtime').classList.add('active');
  316. loadRealtimeData();
  317. } else {
  318. document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
  319. document.getElementById('tab-history').classList.add('active');
  320. }
  321. }
  322. function loadMonitorReport() {
  323. fetch('/api/monitor')
  324. .then(r => r.json())
  325. .then(data => {
  326. document.getElementById('monitor-report').innerHTML = `
  327. <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>
  328. <div class="metric"><span class="metric-label">createBill总调用</span><span class="metric-value">${data.createbill_total} / 成功 ${data.createbill_success}</span></div>
  329. <div class="metric"><span class="metric-label">照片平均耗时</span><span class="metric-value">${data.avg_upload_time}ms</span></div>
  330. <div class="metric"><span class="metric-label">TIME_WINDOW命中</span><span class="metric-value">${data.time_window_hits}</span></div>
  331. <div class="metric"><span class="metric-label">进站缓存命中率</span><span class="metric-value">${data.in_cache_hit_rate.toFixed(1)}%</span></div>
  332. <div class="metric"><span class="metric-label">出站缓存命中率</span><span class="metric-value">${data.out_cache_hit_rate.toFixed(1)}%</span></div>
  333. <div class="metric"><span class="metric-label">进站统计</span><span class="metric-value">${data.in_station_count}</span></div>
  334. <div class="metric"><span class="metric-label">出站统计</span><span class="metric-value">${data.out_station_count}</span></div>
  335. <div class="metric"><span class="metric-label">总记录数</span><span class="metric-value">${data.total_records}</span></div>
  336. <div class="metric"><span class="metric-label">失败记录</span><span class="metric-value ${data.failed_records > 0 ? 'error' : ''}">${data.failed_records}</span></div>
  337. <div class="metric"><span class="metric-label">飞书成功数</span><span class="metric-value">${data.feishu_success_count}</span></div>
  338. <div class="metric"><span class="metric-label">系统运行时间</span><span class="metric-value">${data.uptime}</span></div>
  339. <div class="metric"><span class="metric-label">网络超时</span><span class="metric-value ${data.network_timeouts > 10 ? 'warning' : ''}">${data.network_timeouts}</span></div>
  340. <div class="metric"><span class="metric-label">服务器错误</span><span class="metric-value ${data.server_errors > 5 ? 'warning' : ''}">${data.server_errors}</span></div>
  341. <div class="metric"><span class="metric-label">总上传错误</span><span class="metric-value ${data.upload_errors > 0 ? 'error' : ''}">${data.upload_errors}</span></div>
  342. <div class="metric"><span class="metric-label">交替锁定</span><span class="metric-value ${data.alternating_merge_enabled ? 'success' : ''}">${data.alternating_merge_enabled ? '启用' : '禁用'}</span></div>
  343. <div class="metric"><span class="metric-label">紧急告警抑制</span><span class="metric-value ${data.emergency_alert_suppressed ? 'warning' : 'success'}">${data.emergency_alert_suppressed ? '已抑制' : '正常'}</span></div>
  344. <div class="metric"><span class="metric-label">交替锁定间隔</span><span class="metric-value">${data.in_out_interval_sec}秒</span></div>
  345. `;
  346. })
  347. .catch(e => console.error('监控报告加载失败:', e));
  348. }
  349. // fix24 v41: 实时数据加载(固定page_size=20)
  350. function loadRealtimeData() {
  351. fetch('/api/messages?page=1&page_size=20')
  352. .then(r => r.json())
  353. .then(data => {
  354. renderMessages(data, 'realtime-body');
  355. const refreshEl = document.getElementById('realtime-refresh-info');
  356. refreshEl.textContent = '数据自动刷新间隔: 30秒(共 ' + (data.total || 0) + ' 条,显示最新 20 条)';
  357. })
  358. .catch(e => {
  359. console.error('实时数据加载失败:', e);
  360. document.getElementById('realtime-body').innerHTML = '<tr><td colspan="10" style="text-align:center;color:#f5222d;">加载失败,请刷新页面</td></tr>';
  361. });
  362. }
  363. // fix24 v41: 历史查询
  364. function searchHistory(page) {
  365. const filters = collectFilters();
  366. if (filters.date_from && filters.date_to && filters.date_from > filters.date_to) {
  367. alert('开始日期不能晚于结束日期');
  368. return;
  369. }
  370. currentFilters = filters;
  371. loadHistoryData(page, filters);
  372. }
  373. function loadHistoryData(page, filters) {
  374. currentPage = page;
  375. currentFilters = filters || {};
  376. let params = new URLSearchParams();
  377. params.set('page', page);
  378. params.set('page_size', currentPageSize);
  379. if (currentFilters.plate) params.set('plate', currentFilters.plate);
  380. if (currentFilters.tb_num) params.set('tb_num', currentFilters.tb_num);
  381. if (currentFilters.date_from) params.set('date_from', currentFilters.date_from);
  382. if (currentFilters.date_to) params.set('date_to', currentFilters.date_to);
  383. if (currentFilters.station_type) params.set('station_type', currentFilters.station_type);
  384. if (currentFilters.upload_status) params.set('upload_status', currentFilters.upload_status);
  385. if (currentFilters.feishu_status) params.set('feishu_status', currentFilters.feishu_status);
  386. fetch('/api/messages?' + params.toString())
  387. .then(r => r.json())
  388. .then(data => {
  389. currentTotal = data.total || 0;
  390. currentTotalPages = data.total_pages || 0;
  391. renderMessages(data, 'history-body');
  392. renderPagination(data.page, currentTotalPages, currentTotal);
  393. document.getElementById('jump-page').value = data.page;
  394. document.getElementById('jump-page').max = currentTotalPages || 1;
  395. const refreshEl = document.getElementById('history-refresh-info');
  396. refreshEl.textContent = '历史查询结果:共 ' + currentTotal + ' 条(手动查询,不自动刷新)';
  397. })
  398. .catch(e => {
  399. console.error('历史查询失败:', e);
  400. document.getElementById('history-body').innerHTML = '<tr><td colspan="10" style="text-align:center;color:#f5222d;">查询失败,请重试</td></tr>';
  401. });
  402. }
  403. function renderMessages(data, targetId) {
  404. let html = '';
  405. if (!data.records || data.records.length === 0) {
  406. html = '<tr><td colspan="10" style="text-align:center;padding:30px;color:#999;">暂无数据</td></tr>';
  407. } else {
  408. data.records.forEach(rec => {
  409. const stationType = rec.station_type === 1 ? '进站' : '出站';
  410. const uploadOk = rec.lo_upload_status === 1 && rec.hi_upload_status === 1;
  411. const uploadStatus = uploadOk ? '成功' : '失败';
  412. const uploadClass = uploadOk ? 'status-success' : 'status-failed';
  413. let feishuClass, feishuText;
  414. if (rec.feishu_status === 1) { feishuClass = 'status-success'; feishuText = '已发送'; }
  415. else if (rec.feishu_status === 2) { feishuClass = 'status-failed'; feishuText = '失败'; }
  416. else { feishuClass = 'status-pending'; feishuText = '未发送'; }
  417. const retryDisabled = rec.retry_count >= 5 ? 'disabled' : '';
  418. html += '<tr>';
  419. html += '<td>' + rec.id + '</td>';
  420. html += '<td>' + rec.create_time + '</td>';
  421. html += '<td><b>' + rec.plate_number + '</b></td>';
  422. html += '<td style="font-family:monospace;font-size:12px;">' + (rec.tb_num || '-') + '</td>';
  423. html += '<td>' + stationType + '</td>';
  424. 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>';
  425. 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>';
  426. html += '<td><span class="status ' + uploadClass + '">' + uploadStatus + '</span></td>';
  427. html += '<td><span class="status ' + feishuClass + '">' + feishuText + '</span></td>';
  428. html += '<td><button class="btn-retry" onclick="retryRecord(' + rec.id + ',event)" ' + retryDisabled + '>重试(' + rec.retry_count + '/5)</button></td>';
  429. html += '</tr>';
  430. });
  431. }
  432. document.getElementById(targetId).innerHTML = html;
  433. }
  434. function collectFilters() {
  435. return {
  436. plate: document.getElementById('filter-plate').value.trim(),
  437. tb_num: document.getElementById('filter-tbnum').value.trim(),
  438. date_from: document.getElementById('filter-date-from').value,
  439. date_to: document.getElementById('filter-date-to').value,
  440. station_type: parseInt(document.getElementById('filter-station').value) || 0,
  441. upload_status: parseInt(document.getElementById('filter-upload').value) || 0,
  442. feishu_status: parseInt(document.getElementById('filter-feishu').value) || 0
  443. };
  444. }
  445. function resetFilters() {
  446. document.getElementById('filter-plate').value = '';
  447. document.getElementById('filter-tbnum').value = '';
  448. document.getElementById('filter-date-from').value = '';
  449. document.getElementById('filter-date-to').value = '';
  450. document.getElementById('filter-station').value = '0';
  451. document.getElementById('filter-upload').value = '0';
  452. document.getElementById('filter-feishu').value = '0';
  453. currentFilters = {};
  454. document.getElementById('history-body').innerHTML = '<tr><td colspan="10" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>';
  455. document.getElementById('pagination').innerHTML = '';
  456. document.getElementById('history-refresh-info').textContent = '历史查询:手动触发,不自动刷新';
  457. }
  458. function renderPagination(page, totalPages, total) {
  459. if (!totalPages || totalPages < 1) totalPages = 1;
  460. let html = '';
  461. html += '<button onclick="searchHistory(1)" ' + (page <= 1 ? 'disabled' : '') + '>首页</button>';
  462. html += '<button onclick="searchHistory(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>上一页</button>';
  463. let start = Math.max(1, page - 2);
  464. let end = Math.min(totalPages, page + 2);
  465. if (start > 1) {
  466. html += '<button onclick="searchHistory(1)">1</button>';
  467. if (start > 2) html += '<span class="info">…</span>';
  468. }
  469. for (let i = start; i <= end; i++) {
  470. html += '<button onclick="searchHistory(' + i + ')" class="' + (i === page ? 'active' : '') + '">' + i + '</button>';
  471. }
  472. if (end < totalPages) {
  473. if (end < totalPages - 1) html += '<span class="info">…</span>';
  474. html += '<button onclick="searchHistory(' + totalPages + ')">' + totalPages + '</button>';
  475. }
  476. html += '<button onclick="searchHistory(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>下一页</button>';
  477. html += '<button onclick="searchHistory(' + totalPages + ')" ' + (page >= totalPages ? 'disabled' : '') + '>末页</button>';
  478. html += '<span class="info">第 ' + page + '/' + totalPages + ' 页 · 共 ' + total + ' 条</span>';
  479. document.getElementById('pagination').innerHTML = html;
  480. }
  481. function changePageSize() {
  482. currentPageSize = parseInt(document.getElementById('page-size').value) || 20;
  483. if (currentTab === 'history' && hasActiveFilters(currentFilters)) {
  484. searchHistory(1);
  485. }
  486. }
  487. function jumpToPage() {
  488. let p = parseInt(document.getElementById('jump-page').value) || 1;
  489. if (p < 1) p = 1;
  490. if (currentTotalPages && p > currentTotalPages) p = currentTotalPages;
  491. searchHistory(p);
  492. }
  493. function retryRecord(id, evt) {
  494. if (!confirm('确定要重试此记录吗?')) return;
  495. var btn = evt ? evt.target : event.target;
  496. btn.disabled = true;
  497. btn.textContent = '重试中...';
  498. fetch('/api/retry', {
  499. method: 'POST',
  500. body: 'id=' + id,
  501. headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-Token': getCookie('csrf_token') }
  502. })
  503. .then(r => r.json())
  504. .then(data => {
  505. btn.disabled = false;
  506. btn.textContent = '重试';
  507. if (data.success) {
  508. var msg = '✅ 重试成功';
  509. if (data.tb_num) msg += '\n联单编号: ' + data.tb_num;
  510. if (data.uploaded_photos > 0) msg += '\n上传照片: ' + data.uploaded_photos + '张';
  511. alert(msg);
  512. } else {
  513. alert('❌ 重试失败: ' + (data.message || '未知错误'));
  514. }
  515. if (currentTab === 'realtime') loadRealtimeData();
  516. else if (hasActiveFilters(currentFilters)) loadHistoryData(currentPage, currentFilters);
  517. loadMonitorReport();
  518. })
  519. .catch(e => {
  520. btn.disabled = false;
  521. btn.textContent = '重试';
  522. alert('重试请求失败: ' + e);
  523. });
  524. }
  525. function showPhoto(src) {
  526. document.getElementById('photo-modal-img').src = src;
  527. document.getElementById('photo-modal').classList.add('active');
  528. }
  529. function closePhotoModal() {
  530. document.getElementById('photo-modal').classList.remove('active');
  531. }
  532. function hasActiveFilters(f) {
  533. return f.plate || f.tb_num || f.date_from || f.date_to ||
  534. f.station_type !== 0 || f.upload_status !== 0 || f.feishu_status !== 0;
  535. }
  536. // ==================== 用户信息显示 + 导航栏权限控制 ====================
  537. var _currentUserRole = 0;
  538. var _lastConnectionsData = null;
  539. function loadUserInfo() {
  540. return fetch('/api/auth/status')
  541. .then(r => r.json())
  542. .then(data => {
  543. const area = document.getElementById('user-info-area');
  544. if (data.authenticated) {
  545. _currentUserRole = data.role;
  546. const roles = {0: '普通用户', 1: '管理员', 2: '超级管理员'};
  547. const roleName = roles[data.role] || '未知角色';
  548. const roleClass = data.role === 2 ? 'style="background:rgba(255,215,0,0.3);color:#ffd700;"' :
  549. data.role === 1 ? 'style="background:rgba(64,169,255,0.3);color:#40a9ff;"' : '';
  550. area.innerHTML = '<span class="user-info">👤 ' + data.username + '</span>' +
  551. '<span class="role-badge" ' + roleClass + '>' + roleName + '</span>' +
  552. ' <button class="logout-btn" onclick="logout()">退出</button>';
  553. if (data.role >= 1) {
  554. show('nav-config');
  555. }
  556. if (data.role >= 2) {
  557. show('nav-system');
  558. show('nav-frpc');
  559. show('nav-ssh');
  560. show('nav-logs');
  561. show('nav-help');
  562. }
  563. if (data.role >= 2 && _lastConnectionsData) {
  564. renderConnectionsFrpc(_lastConnectionsData);
  565. }
  566. } else {
  567. area.innerHTML = '<a href="/login" style="color:white;text-decoration:underline;">登录</a>';
  568. }
  569. })
  570. .catch(e => console.error('用户信息加载失败:', e));
  571. }
  572. function show(id) {
  573. var el = document.getElementById(id);
  574. if (el) el.style.display = '';
  575. }
  576. function logout() {
  577. fetch('/api/auth/logout', {method: 'POST', headers: {'X-CSRF-Token': getCookie('csrf_token')}})
  578. .then(() => { window.location.href = '/login'; })
  579. .catch(() => { window.location.href = '/login'; });
  580. }
  581. // ==================== 连接状态显示 ====================
  582. function renderConnectionsFrpc(data) {
  583. if (!data.frpc || _currentUserRole < 2) return;
  584. var existing = document.getElementById('conn-frpc-item');
  585. var dot = data.frpc.running ? 'online' : 'offline';
  586. var detail = data.frpc.running ? (data.frpc.tunnels + ' 条隧道活跃') : '未运行';
  587. var frpcHtml = '<div class="conn-item" id="conn-frpc-item"><div class="conn-dot ' + dot + '"></div>' +
  588. '<div><div class="conn-label">🔗 frpc 隧道</div>' +
  589. '<div class="conn-detail">' + detail + (data.frpc.version ? ' v' + data.frpc.version : '') + '</div></div></div>';
  590. if (existing) {
  591. existing.outerHTML = frpcHtml;
  592. } else {
  593. document.getElementById('connections-grid').insertAdjacentHTML('beforeend', frpcHtml);
  594. }
  595. }
  596. function loadConnections() {
  597. fetch('/api/connections')
  598. .then(r => r.json())
  599. .then(data => {
  600. _lastConnectionsData = data;
  601. let html = '';
  602. if (data.rtsp) {
  603. data.rtsp.forEach(cam => {
  604. let dot = 'disabled';
  605. let detail = '未配置';
  606. if (cam.configured && cam.running) { dot = 'online'; detail = '采集中'; }
  607. else if (cam.configured && !cam.running) { dot = 'offline'; detail = '已断开'; }
  608. else { dot = 'disabled'; detail = '未配置'; }
  609. html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
  610. '<div><div class="conn-label">📷 ' + cam.name + '</div>' +
  611. '<div class="conn-detail">' + detail + '</div></div></div>';
  612. });
  613. }
  614. if (data.mqtt) {
  615. let dot = 'disabled', detail = '未启用';
  616. if (data.mqtt.enabled) {
  617. if (data.mqtt.status === 1) { dot = 'online'; detail = data.mqtt.state + ' (' + data.mqtt.host + ')'; }
  618. else if (data.mqtt.status === 2) { dot = 'warn'; detail = data.mqtt.state + '...'; }
  619. else { dot = 'offline'; detail = data.mqtt.state; }
  620. }
  621. html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
  622. '<div><div class="conn-label">📨 MQTT</div>' +
  623. '<div class="conn-detail">' + detail + '</div></div></div>';
  624. }
  625. if (data.database) {
  626. let dot = data.database.connected ? 'online' : 'offline';
  627. let detail = data.database.connected ? 'SQLite 已连接' : '未连接';
  628. html += '<div class="conn-item"><div class="conn-dot ' + dot + '"></div>' +
  629. '<div><div class="conn-label">🗄️ 数据库</div>' +
  630. '<div class="conn-detail">' + detail + '</div></div></div>';
  631. }
  632. if (data.frpc && _currentUserRole >= 2) {
  633. html += '<div class="conn-item" id="conn-frpc-item"><div class="conn-dot ' + (data.frpc.running ? 'online' : 'offline') + '"></div>' +
  634. '<div><div class="conn-label">🔗 frpc 隧道</div>' +
  635. '<div class="conn-detail">' + (data.frpc.running ? data.frpc.tunnels + ' 条隧道活跃' : '未运行') + (data.frpc.version ? ' v' + data.frpc.version : '') + '</div></div></div>';
  636. }
  637. if (data.web) {
  638. let detail = '端口 ' + data.web.port + (data.web.https ? ' (HTTPS)' : '');
  639. html += '<div class="conn-item"><div class="conn-dot online"></div>' +
  640. '<div><div class="conn-label">🌐 Web 服务</div>' +
  641. '<div class="conn-detail">' + detail + '</div></div></div>';
  642. }
  643. document.getElementById('connections-grid').innerHTML = html;
  644. })
  645. .catch(e => {
  646. console.error('连接状态加载失败:', e);
  647. document.getElementById('connections-grid').innerHTML =
  648. '<div class="conn-item"><div class="conn-dot offline"></div><div><div class="conn-label">加载失败</div></div></div>';
  649. });
  650. }
  651. loadUserInfo();
  652. loadConnections();
  653. loadMonitorReport();
  654. loadRealtimeData();
  655. // 自动刷新:只刷新实时数据 Tab
  656. setInterval(() => {
  657. if (currentTab === 'realtime') {
  658. loadMonitorReport();
  659. loadRealtimeData();
  660. }
  661. }, 30000);
  662. // 筛选框回车触发查询
  663. ['filter-plate','filter-tbnum','filter-date-from','filter-date-to'].forEach(id => {
  664. const el = document.getElementById(id);
  665. if (el) el.addEventListener('keypress', e => { if (e.key === 'Enter') searchHistory(1); });
  666. });
  667. </script>
  668. </body>
  669. </html>