weight.html 41 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  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. .nav-bar { margin-top: 12px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
  13. .nav-link { background: rgba(255,255,255,0.2); color: white; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 14px; transition: background 0.2s; }
  14. .nav-link:hover { background: rgba(255,255,255,0.35); }
  15. .nav-link.active { background: rgba(255,255,255,0.45); font-weight: bold; }
  16. .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
  17. .panel { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }
  18. .panel h2 { font-size: 18px; color: #333; margin-bottom: 15px; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
  19. .stats { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
  20. .stat-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 15px 20px; border-radius: 8px; min-width: 150px; }
  21. .stat-card.warning { background: linear-gradient(135deg, #f5222d 0%, #cf1322 100%); }
  22. .stat-card .label { font-size: 12px; opacity: 0.8; }
  23. .stat-card .value { font-size: 24px; font-weight: bold; margin-top: 5px; }
  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-pending { background: #f0f5ff; color: #1890ff; }
  54. .btn-retry { padding: 3px 8px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; }
  55. .btn-retry:hover { background: #40a9ff; }
  56. .btn-retry:disabled { background: #d9d9d9; cursor: not-allowed; }
  57. .pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 0; flex-wrap: wrap; }
  58. .pagination button { padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; }
  59. .pagination button:hover:not(:disabled) { background: #f0f5ff; border-color: #667eea; color: #667eea; }
  60. .pagination button:disabled { background: #f5f5f5; color: #d9d9d9; cursor: not-allowed; }
  61. .pagination button.active { background: #667eea; color: white; border-color: #667eea; }
  62. .pagination .info { color: #666; font-size: 13px; padding: 0 4px; }
  63. .pagination-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
  64. .pagination-left, .pagination-right { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #666; }
  65. .pagination-left select, .pagination-right input { padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 13px; width: 65px; }
  66. .pagination-right input { width: 55px; }
  67. .pagination-right button { padding: 5px 12px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; }
  68. .pagination-right button:hover { background: #764ba2; }
  69. .refresh-info { text-align: center; margin-top: 10px; color: #999; font-size: 12px; }
  70. .loading { text-align: center; padding: 20px; color: #666; }
  71. .toast { position: fixed; top: 20px; right: 20px; padding: 12px 20px; border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 9999; display: none; }
  72. .toast.success { background: #52c41a; }
  73. .toast.error { background: #f5222d; }
  74. .toast.show { display: block; }
  75. @media (max-width: 768px) {
  76. .header { padding: 14px; }
  77. .header h1 { font-size: 18px; }
  78. .nav-bar { gap: 6px; }
  79. .nav-link { padding: 6px 12px; font-size: 12px; }
  80. .container { padding: 0 10px; margin: 10px auto; }
  81. .panel { padding: 12px; }
  82. .panel h2 { font-size: 15px; }
  83. .stats { flex-direction: column; gap: 10px; }
  84. .stat-card { min-width: auto; }
  85. .stat-card .value { font-size: 20px; }
  86. .filter-item { min-width: 100px; }
  87. .pagination-bar { flex-direction: column; align-items: stretch; }
  88. .pagination-left, .pagination-right { justify-content: center; }
  89. table { font-size: 11px; }
  90. th, td { padding: 6px 4px; }
  91. .tab-btn { padding: 8px 12px; font-size: 12px; }
  92. }
  93. @media (max-width: 480px) {
  94. .header h1 { font-size: 16px; }
  95. .nav-link { font-size: 11px; padding: 5px 10px; }
  96. .filter-item { min-width: 100%; }
  97. }
  98. </style>
  99. </head>
  100. <body>
  101. <div class="header">
  102. <h1>⚖️ 称重管理系统</h1>
  103. <p>Weight Management System v43.2-fix24-v43</p>
  104. <div class="nav-bar">
  105. <a href="/" class="nav-link">🏠 首页</a>
  106. <a href="/video" class="nav-link">🎥 视频</a>
  107. <a href="/weight" class="nav-link active">⚖️ 称重</a>
  108. <a href="/config" class="nav-link" id="nav-config" style="display:none;">⚙️ 配置</a>
  109. <a href="/locks" class="nav-link">🔒 锁定</a>
  110. <a href="/help" class="nav-link" id="nav-help" style="display:none;">📖 帮助</a>
  111. </div>
  112. </div>
  113. <div class="container">
  114. <div class="stats">
  115. <div class="stat-card">
  116. <div class="label">总记录数</div>
  117. <div class="value" id="stat-total">-</div>
  118. </div>
  119. <div class="stat-card warning">
  120. <div class="label">失败记录</div>
  121. <div class="value" id="stat-failed">-</div>
  122. </div>
  123. </div>
  124. <div class="panel">
  125. <h2>称重记录</h2>
  126. <!-- fix24 v41: Tab 切换 -->
  127. <div class="tab-bar">
  128. <button class="tab-btn active" onclick="switchTab('realtime')">📡 实时称重</button>
  129. <button class="tab-btn" onclick="switchTab('history')">🔍 历史查询</button>
  130. <button class="tab-btn" onclick="switchTab('sync')">🔗 同步视图</button>
  131. </div>
  132. <!-- 实时称重 Tab -->
  133. <div id="tab-realtime" class="tab-content active">
  134. <div style="background:#e6f7ff;border:1px solid #91d5ff;border-radius:6px;padding:10px;margin-bottom:15px;font-size:13px;color:#0050b3;">
  135. 💡 实时称重:显示最新 20 条记录,每 30 秒自动刷新
  136. </div>
  137. <div class="table-container">
  138. <table>
  139. <thead>
  140. <tr>
  141. <th>编号</th>
  142. <th>日期时间</th>
  143. <th>车牌号</th>
  144. <th>联单编号</th>
  145. <th>方向</th>
  146. <th>重量(kg)</th>
  147. <th>重量(吨)</th>
  148. <th>上传状态</th>
  149. <th>重试次数</th>
  150. <th>响应消息</th>
  151. <th>操作</th>
  152. </tr>
  153. </thead>
  154. <tbody id="realtime-body">
  155. <tr><td colspan="11" class="loading">加载中...</td></tr>
  156. </tbody>
  157. </table>
  158. </div>
  159. <div class="refresh-info" id="realtime-refresh-info">数据自动刷新间隔: 30秒</div>
  160. </div>
  161. <!-- 历史查询 Tab -->
  162. <div id="tab-history" class="tab-content">
  163. <div class="filter-bar">
  164. <div class="filter-row">
  165. <div class="filter-item">
  166. <label>车牌号</label>
  167. <input type="text" id="filter-plate" placeholder="如 沪EQ3803">
  168. </div>
  169. <div class="filter-item">
  170. <label>联单编号</label>
  171. <input type="text" id="filter-tbnum" placeholder="联单编号">
  172. </div>
  173. <div class="filter-item">
  174. <label>方向</label>
  175. <select id="filter-station">
  176. <option value="0">全部</option>
  177. <option value="1">进站</option>
  178. <option value="2">出站</option>
  179. </select>
  180. </div>
  181. <div class="filter-item">
  182. <label>上传状态</label>
  183. <select id="filter-upload">
  184. <option value="0">全部</option>
  185. <option value="1">成功</option>
  186. <option value="2">失败</option>
  187. </select>
  188. </div>
  189. </div>
  190. <div class="filter-row">
  191. <div class="filter-item">
  192. <label>开始日期</label>
  193. <input type="date" id="filter-date-from">
  194. </div>
  195. <div class="filter-item">
  196. <label>结束日期</label>
  197. <input type="date" id="filter-date-to">
  198. </div>
  199. <div class="filter-item filter-buttons">
  200. <button class="btn-search" onclick="searchHistory(1)">🔍 查询</button>
  201. <button class="btn-reset" onclick="resetFilters()">重置</button>
  202. </div>
  203. </div>
  204. </div>
  205. <div class="table-container">
  206. <table>
  207. <thead>
  208. <tr>
  209. <th>编号</th>
  210. <th>日期时间</th>
  211. <th>车牌号</th>
  212. <th>联单编号</th>
  213. <th>方向</th>
  214. <th>重量(kg)</th>
  215. <th>重量(吨)</th>
  216. <th>上传状态</th>
  217. <th>重试次数</th>
  218. <th>响应消息</th>
  219. <th>操作</th>
  220. </tr>
  221. </thead>
  222. <tbody id="history-body">
  223. <tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>
  224. </tbody>
  225. </table>
  226. </div>
  227. <div class="pagination-bar">
  228. <div class="pagination-left">
  229. <span>每页</span>
  230. <select id="page-size" onchange="changePageSize()">
  231. <option value="20">20</option>
  232. <option value="50">50</option>
  233. <option value="100">100</option>
  234. </select>
  235. <span>条</span>
  236. </div>
  237. <div class="pagination" id="pagination"></div>
  238. <div class="pagination-right">
  239. <span>跳至</span>
  240. <input type="number" id="jump-page" min="1" value="1">
  241. <span>页</span>
  242. <button onclick="jumpToPage()">GO</button>
  243. </div>
  244. </div>
  245. <div class="refresh-info" id="history-refresh-info">历史查询:手动触发,不自动刷新</div>
  246. </div>
  247. <!-- 同步视图 Tab (fix24 v43 P2) -->
  248. <div id="tab-sync" class="tab-content">
  249. <div style="background:#f0f5ff;border:1px solid #adc6ff;border-radius:6px;padding:10px;margin-bottom:15px;font-size:13px;color:#1d39c4;">
  250. 🔗 同步视图:基于 tb_num + 车牌号 联合匹配,展示抓拍事件与称重记录的同步状态
  251. </div>
  252. <!-- 同步筛选栏 -->
  253. <div class="filter-bar" style="margin-bottom:15px;">
  254. <div class="filter-row">
  255. <div class="filter-item">
  256. <label>车牌号</label>
  257. <input type="text" id="sync-filter-plate" placeholder="模糊匹配">
  258. </div>
  259. <div class="filter-item">
  260. <label>联单号</label>
  261. <input type="text" id="sync-filter-tbnum" placeholder="模糊匹配">
  262. </div>
  263. <div class="filter-item">
  264. <label>起始日期</label>
  265. <input type="date" id="sync-filter-date-from">
  266. </div>
  267. <div class="filter-item">
  268. <label>截止日期</label>
  269. <input type="date" id="sync-filter-date-to">
  270. </div>
  271. <div class="filter-item">
  272. <label>站点</label>
  273. <select id="sync-filter-station">
  274. <option value="0">全部</option>
  275. <option value="1">进站</option>
  276. <option value="2">出站</option>
  277. </select>
  278. </div>
  279. <div class="filter-item">
  280. <label>同步状态</label>
  281. <select id="sync-filter-status">
  282. <option value="0">全部</option>
  283. <option value="1">已匹配</option>
  284. <option value="2">未匹配(无重量)</option>
  285. <option value="3">重量上传失败</option>
  286. </select>
  287. </div>
  288. <div class="filter-item" style="align-self:flex-end;">
  289. <button class="btn-search" onclick="searchSync(1)">🔍 查询</button>
  290. <button class="btn-reset" onclick="resetSyncFilters()" style="margin-left:5px;">重置</button>
  291. </div>
  292. </div>
  293. </div>
  294. <!-- 同步统计卡片 -->
  295. <div class="stats" id="sync-stats-bar" style="margin-bottom:15px;">
  296. <div class="stat-card"><div class="label">同步模式</div><div class="value" id="sync-mode-display">-</div></div>
  297. <div class="stat-card"><div class="label">今日匹配率</div><div class="value" id="sync-today-rate" style="color:#52c41a;">-</div></div>
  298. <div class="stat-card"><div class="label">总匹配率</div><div class="value" id="sync-total-rate">-</div></div>
  299. <div class="stat-card"><div class="label">重量待上传</div><div class="value" id="sync-pending" style="color:#faad14;">-</div></div>
  300. </div>
  301. <!-- 同步结果表格 -->
  302. <div class="table-container">
  303. <table >
  304. <thead>
  305. <tr>
  306. <th>抓拍时间</th>
  307. <th>车牌号</th>
  308. <th>联单号</th>
  309. <th>站点</th>
  310. <th>照片上传</th>
  311. <th>重量匹配</th>
  312. <th>重量(kg)</th>
  313. <th>重量上传状态</th>
  314. </tr>
  315. </thead>
  316. <tbody id="sync-table-body">
  317. <tr><td colspan="8" style="text-align:center;padding:30px;color:#999;">点击"查询"加载同步数据</td></tr>
  318. </tbody>
  319. </table>
  320. </div>
  321. <div class="pagination" id="sync-pagination"></div>
  322. <div class="refresh-info" id="sync-refresh-info">同步视图:手动查询,统计每30秒自动刷新</div>
  323. </div>
  324. </div>
  325. </div>
  326. <div class="toast" id="toast"></div>
  327. <script>
  328. function getCookie(n){let m=document.cookie.match(new RegExp("(^| )"+n+"=([^;]+)"));return m?m[2]:"";}
  329. let currentPage = 1;
  330. let currentPageSize = 20;
  331. let currentTotal = 0;
  332. let currentTotalPages = 0;
  333. let currentFilters = {};
  334. let currentTab = 'realtime';
  335. function showToast(msg, type) {
  336. var t = document.getElementById('toast');
  337. t.textContent = msg;
  338. t.className = 'toast ' + type + ' show';
  339. setTimeout(function() { t.className = 'toast'; }, 3000);
  340. }
  341. // fix24 v41: Tab 切换
  342. function switchTab(tab) {
  343. currentTab = tab;
  344. document.querySelectorAll('.tab-btn').forEach(function(btn) { btn.classList.remove('active'); });
  345. document.querySelectorAll('.tab-content').forEach(function(content) { content.classList.remove('active'); });
  346. if (tab === 'realtime') {
  347. document.querySelector('.tab-btn:nth-child(1)').classList.add('active');
  348. document.getElementById('tab-realtime').classList.add('active');
  349. loadRealtimeData();
  350. } else if (tab === 'history') {
  351. document.querySelector('.tab-btn:nth-child(2)').classList.add('active');
  352. document.getElementById('tab-history').classList.add('active');
  353. } else if (tab === 'sync') {
  354. document.querySelector('.tab-btn:nth-child(3)').classList.add('active');
  355. document.getElementById('tab-sync').classList.add('active');
  356. loadSyncStats();
  357. loadSyncData(1);
  358. }
  359. }
  360. function collectFilters() {
  361. return {
  362. plate: document.getElementById('filter-plate').value.trim(),
  363. tb_num: document.getElementById('filter-tbnum').value.trim(),
  364. date_from: document.getElementById('filter-date-from').value,
  365. date_to: document.getElementById('filter-date-to').value,
  366. station_type: parseInt(document.getElementById('filter-station').value) || 0,
  367. upload_status: parseInt(document.getElementById('filter-upload').value) || 0
  368. };
  369. }
  370. function resetFilters() {
  371. document.getElementById('filter-plate').value = '';
  372. document.getElementById('filter-tbnum').value = '';
  373. document.getElementById('filter-date-from').value = '';
  374. document.getElementById('filter-date-to').value = '';
  375. document.getElementById('filter-station').value = '0';
  376. document.getElementById('filter-upload').value = '0';
  377. currentFilters = {};
  378. document.getElementById('history-body').innerHTML = '<tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">请设置查询条件后点击"查询"按钮</td></tr>';
  379. document.getElementById('pagination').innerHTML = '';
  380. document.getElementById('history-refresh-info').textContent = '历史查询:手动触发,不自动刷新';
  381. }
  382. function hasActiveFilters(f) {
  383. return f.plate || f.tb_num || f.date_from || f.date_to ||
  384. f.station_type !== 0 || f.upload_status !== 0;
  385. }
  386. // fix24 v41: 实时称重数据加载
  387. function loadRealtimeData() {
  388. fetch('/api/weight/records?page=1&page_size=20')
  389. .then(function(r) { return r.json(); })
  390. .then(function(data) {
  391. currentTotal = data.total || 0;
  392. document.getElementById('stat-total').textContent = currentTotal;
  393. document.getElementById('stat-failed').textContent = data.failed;
  394. renderRecords(data, 'realtime-body');
  395. var refreshEl = document.getElementById('realtime-refresh-info');
  396. refreshEl.textContent = '数据自动刷新间隔: 30秒(共 ' + currentTotal + ' 条,显示最新 20 条)';
  397. })
  398. .catch(function(e) {
  399. console.error('实时称重数据加载失败:', e);
  400. document.getElementById('realtime-body').innerHTML = '<tr><td colspan="11" style="text-align:center;color:#f5222d;">加载失败,请刷新页面</td></tr>';
  401. });
  402. }
  403. // fix24 v41: 历史查询
  404. function searchHistory(page) {
  405. var filters = collectFilters();
  406. if (filters.date_from && filters.date_to && filters.date_from > filters.date_to) {
  407. alert('开始日期不能晚于结束日期');
  408. return;
  409. }
  410. currentFilters = filters;
  411. loadHistoryData(page, filters);
  412. }
  413. function loadHistoryData(page, filters) {
  414. currentPage = page;
  415. currentFilters = filters || {};
  416. var params = new URLSearchParams();
  417. params.set('page', page);
  418. params.set('page_size', currentPageSize);
  419. if (currentFilters.plate) params.set('plate', currentFilters.plate);
  420. if (currentFilters.tb_num) params.set('tb_num', currentFilters.tb_num);
  421. if (currentFilters.date_from) params.set('date_from', currentFilters.date_from);
  422. if (currentFilters.date_to) params.set('date_to', currentFilters.date_to);
  423. if (currentFilters.station_type) params.set('station_type', currentFilters.station_type);
  424. if (currentFilters.upload_status) params.set('upload_status', currentFilters.upload_status);
  425. fetch('/api/weight/records?' + params.toString())
  426. .then(function(r) { return r.json(); })
  427. .then(function(data) {
  428. currentTotal = data.total || 0;
  429. currentTotalPages = data.total_pages || 0;
  430. document.getElementById('stat-total').textContent = currentTotal;
  431. document.getElementById('stat-failed').textContent = data.failed;
  432. renderRecords(data, 'history-body');
  433. renderPagination(data.page, currentTotalPages, currentTotal);
  434. document.getElementById('jump-page').value = data.page;
  435. document.getElementById('jump-page').max = currentTotalPages || 1;
  436. var refreshEl = document.getElementById('history-refresh-info');
  437. refreshEl.textContent = '历史查询结果:共 ' + currentTotal + ' 条(手动查询,不自动刷新)';
  438. })
  439. .catch(function(e) {
  440. console.error('历史查询失败:', e);
  441. document.getElementById('history-body').innerHTML = '<tr><td colspan="11" style="text-align:center;color:#f5222d;">查询失败,请重试</td></tr>';
  442. });
  443. }
  444. function renderRecords(data, targetId) {
  445. var html = '';
  446. if (!data.records || data.records.length === 0) {
  447. html = '<tr><td colspan="11" style="text-align:center;padding:30px;color:#999;">暂无数据</td></tr>';
  448. } else {
  449. data.records.forEach(function(rec) {
  450. var direction = rec.station_type === 1 ? '进站' : '出站';
  451. var weightTon = rec.weight_kg > 0 ? (rec.weight_kg / 1000).toFixed(3) : '-';
  452. var weightKg = rec.weight_kg > 0 ? rec.weight_kg.toFixed(0) : '-';
  453. var statusClass, statusText;
  454. if (rec.upload_status === 1) { statusClass = 'status-success'; statusText = '成功'; }
  455. else if (rec.upload_status === 2) { statusClass = 'status-failed'; statusText = '失败'; }
  456. else { statusClass = 'status-pending'; statusText = '待上传'; }
  457. var retryBtn = rec.upload_status === 2 ? '<button class="btn-retry" onclick="retryWeight(' + rec.id + ',event)">重试</button>' : '-';
  458. html += '<tr>';
  459. html += '<td>' + rec.id + '</td>';
  460. html += '<td style="font-size:12px;">' + rec.create_time + '</td>';
  461. html += '<td><b>' + rec.plate_number + '</b></td>';
  462. html += '<td style="font-family:monospace;font-size:12px;">' + (rec.tb_num || '-') + '</td>';
  463. html += '<td>' + direction + '</td>';
  464. html += '<td>' + weightKg + '</td>';
  465. html += '<td>' + weightTon + '</td>';
  466. html += '<td><span class="status ' + statusClass + '">' + statusText + '</span></td>';
  467. html += '<td>' + rec.retry_count + '</td>';
  468. html += '<td style="font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + (rec.response_msg || '') + '">' + (rec.response_msg || '-') + '</td>';
  469. html += '<td>' + retryBtn + '</td>';
  470. html += '</tr>';
  471. });
  472. }
  473. document.getElementById(targetId).innerHTML = html;
  474. }
  475. function renderPagination(page, totalPages, total) {
  476. if (!totalPages || totalPages < 1) totalPages = 1;
  477. var html = '';
  478. html += '<button onclick="searchHistory(1)" ' + (page <= 1 ? 'disabled' : '') + '>首页</button>';
  479. html += '<button onclick="searchHistory(' + (page - 1) + ')" ' + (page <= 1 ? 'disabled' : '') + '>上一页</button>';
  480. var start = Math.max(1, page - 2);
  481. var end = Math.min(totalPages, page + 2);
  482. if (start > 1) {
  483. html += '<button onclick="searchHistory(1)">1</button>';
  484. if (start > 2) html += '<span class="info">…</span>';
  485. }
  486. for (var i = start; i <= end; i++) {
  487. html += '<button onclick="searchHistory(' + i + ')" class="' + (i === page ? 'active' : '') + '">' + i + '</button>';
  488. }
  489. if (end < totalPages) {
  490. if (end < totalPages - 1) html += '<span class="info">…</span>';
  491. html += '<button onclick="searchHistory(' + totalPages + ')">' + totalPages + '</button>';
  492. }
  493. html += '<button onclick="searchHistory(' + (page + 1) + ')" ' + (page >= totalPages ? 'disabled' : '') + '>下一页</button>';
  494. html += '<button onclick="searchHistory(' + totalPages + ')" ' + (page >= totalPages ? 'disabled' : '') + '>末页</button>';
  495. html += '<span class="info">第 ' + page + '/' + totalPages + ' 页 · 共 ' + total + ' 条</span>';
  496. document.getElementById('pagination').innerHTML = html;
  497. }
  498. function changePageSize() {
  499. currentPageSize = parseInt(document.getElementById('page-size').value) || 20;
  500. if (currentTab === 'history' && hasActiveFilters(currentFilters)) {
  501. searchHistory(1);
  502. }
  503. }
  504. function jumpToPage() {
  505. var p = parseInt(document.getElementById('jump-page').value) || 1;
  506. if (p < 1) p = 1;
  507. if (currentTotalPages && p > currentTotalPages) p = currentTotalPages;
  508. searchHistory(p);
  509. }
  510. function retryWeight(id, evt) {
  511. if (!confirm('确定要重新上传此称重记录吗?')) return;
  512. var btn = evt ? evt.target : event.target;
  513. btn.disabled = true;
  514. btn.textContent = '重试中...';
  515. fetch('/api/weight/retry', {
  516. method: 'POST',
  517. headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': getCookie('csrf_token') },
  518. body: JSON.stringify({ id: id })
  519. })
  520. .then(function(r) { return r.json(); })
  521. .then(function(data) {
  522. btn.disabled = false;
  523. btn.textContent = '重试';
  524. if (data.success) {
  525. showToast('✅ ' + data.message, 'success');
  526. if (currentTab === 'realtime') loadRealtimeData();
  527. else if (hasActiveFilters(currentFilters)) loadHistoryData(currentPage, currentFilters);
  528. } else {
  529. showToast('❌ ' + data.message, 'error');
  530. }
  531. })
  532. .catch(function(e) {
  533. btn.disabled = false;
  534. btn.textContent = '重试';
  535. showToast('请求失败: ' + e, 'error');
  536. });
  537. }
  538. // 初始化
  539. loadRealtimeData();
  540. loadSyncStats();
  541. // 自动刷新:实时称重 Tab + 同步统计
  542. setInterval(function() {
  543. if (currentTab === 'realtime') {
  544. loadRealtimeData();
  545. }
  546. // 每30秒刷新同步统计(如果同步视图tab激活)
  547. if (currentTab === 'sync') {
  548. loadSyncStats();
  549. }
  550. }, 30000);
  551. // 回车搜索
  552. document.getElementById('filter-plate').addEventListener('keypress', function(e) {
  553. if (e.key === 'Enter') searchHistory(1);
  554. });
  555. document.getElementById('filter-tbnum').addEventListener('keypress', function(e) {
  556. if (e.key === 'Enter') searchHistory(1);
  557. });
  558. // fix24 v43 P2: 同步视图回车搜索
  559. document.getElementById('sync-filter-plate').addEventListener('keypress', function(e) {
  560. if (e.key === 'Enter') searchSync(1);
  561. });
  562. document.getElementById('sync-filter-tbnum').addEventListener('keypress', function(e) {
  563. if (e.key === 'Enter') searchSync(1);
  564. });
  565. // 角色检查
  566. fetch('/api/auth/status', {credentials:'same-origin'}).then(function(r){return r.json();}).then(function(data){
  567. if(data.authenticated){
  568. if(data.role >= 1){ var c=document.getElementById('nav-config'); if(c) c.style.display=''; }
  569. if(data.role >= 2){ var h=document.getElementById('nav-help'); if(h) h.style.display=''; }
  570. }
  571. }).catch(function(){});
  572. // ==================== fix24 v43 P2: 同步视图 JS ====================
  573. let syncPage = 1;
  574. let syncPageSize = 20;
  575. let syncTotalPages = 1;
  576. function loadSyncStats() {
  577. fetch('/api/sync/stats', { credentials: 'same-origin' })
  578. .then(function(r) { return r.json(); })
  579. .then(function(d) {
  580. document.getElementById('sync-mode-display').textContent = d.parallel_mode ? '✅ 并行模式' : '⏳ 串行模式';
  581. document.getElementById('sync-mode-display').style.color = d.parallel_mode ? '#52c41a' : '#faad14';
  582. document.getElementById('sync-today-rate').textContent = d.today_match_rate.toFixed(1) + '%';
  583. document.getElementById('sync-total-rate').textContent = d.match_rate.toFixed(1) + '%';
  584. document.getElementById('sync-pending').textContent = d.weight_pending;
  585. // 同时更新首页统计卡片(如果有)
  586. var el = document.getElementById('stat-sync-mode');
  587. if (el) el.textContent = d.parallel_mode ? '并行' : '串行';
  588. var el2 = document.getElementById('stat-match-rate');
  589. if (el2) el2.textContent = d.today_match_rate.toFixed(1) + '%';
  590. })
  591. .catch(function() {});
  592. }
  593. function searchSync(page) {
  594. syncPage = page || 1;
  595. loadSyncData(syncPage);
  596. }
  597. function loadSyncData(page) {
  598. syncPage = page || 1;
  599. var params = new URLSearchParams({
  600. page: syncPage,
  601. page_size: syncPageSize,
  602. plate: document.getElementById('sync-filter-plate').value.trim(),
  603. tb_num: document.getElementById('sync-filter-tbnum').value.trim(),
  604. date_from: document.getElementById('sync-filter-date-from').value,
  605. date_to: document.getElementById('sync-filter-date-to').value,
  606. station_type: document.getElementById('sync-filter-station').value,
  607. sync_status: document.getElementById('sync-filter-status').value
  608. });
  609. fetch('/api/sync/events?' + params.toString(), { credentials: 'same-origin' })
  610. .then(function(r) { return r.json(); })
  611. .then(function(data) {
  612. syncTotalPages = data.total_pages || 1;
  613. renderSyncRecords(data.records || []);
  614. renderSyncPagination(data.total, syncTotalPages);
  615. })
  616. .catch(function(e) {
  617. document.getElementById('sync-table-body').innerHTML =
  618. '<tr><td colspan="8" style="color:#f5222d;text-align:center;padding:20px;">加载失败: ' + e + '</td></tr>';
  619. });
  620. }
  621. function renderSyncRecords(records) {
  622. var tbody = document.getElementById('sync-table-body');
  623. if (!records.length) {
  624. tbody.innerHTML = '<tr><td colspan="8" style="text-align:center;padding:30px;color:#999;">无匹配记录</td></tr>';
  625. return;
  626. }
  627. var html = '';
  628. for (var i = 0; i < records.length; i++) {
  629. var rec = records[i];
  630. var stationBadge = rec.station_type === 1
  631. ? '<span style="background:#e6f7ff;color:#0050b3;padding:2px 8px;border-radius:10px;font-size:12px;">进站</span>'
  632. : '<span style="background:#fff7e6;color:#d46b08;padding:2px 8px;border-radius:10px;font-size:12px;">出站</span>';
  633. // 照片上传状态
  634. var photoStatus = '';
  635. if (rec.lo_upload_status === 1 && rec.hi_upload_status === 1) {
  636. photoStatus = '<span style="color:#52c41a;">✅ 双侧成功</span>';
  637. } else if (rec.lo_upload_status === 2 || rec.hi_upload_status === 2) {
  638. photoStatus = '<span style="color:#f5222d;">❌ 有失败</span>';
  639. } else {
  640. photoStatus = '<span style="color:#faad14;">⏳ 待上传</span>';
  641. }
  642. // 重量匹配列
  643. var weightMatch = '';
  644. if (rec.synced) {
  645. weightMatch = '<span style="color:#52c41a;font-weight:bold;">✅ 已匹配</span>';
  646. } else {
  647. weightMatch = '<span style="color:#8c8c8c;">— 未匹配</span>';
  648. }
  649. // 重量值
  650. var weightVal = rec.synced ? rec.weight_kg.toFixed(1) : '<span style="color:#bbb;">—</span>';
  651. // 重量上传状态
  652. var wus = '';
  653. if (!rec.synced) {
  654. wus = '<span style="color:#bbb;">无记录</span>';
  655. } else if (rec.weight_upload_status === 0) {
  656. wus = '<span style="color:#faad14;">⏳ 待上传</span>';
  657. } else if (rec.weight_upload_status === 1) {
  658. wus = '<span style="color:#52c41a;">✅ 成功</span>';
  659. } else if (rec.weight_upload_status === 2) {
  660. wus = '<span style="color:#f5222d;" title="' + (rec.weight_response_msg || '') + '">❌ 失败</span>';
  661. }
  662. html += '<tr>' +
  663. '<td>' + (rec.capture_time || rec.create_time) + '</td>' +
  664. '<td><strong>' + rec.plate_number + '</strong></td>' +
  665. '<td><code style="background:#f5f5f5;padding:2px 6px;border-radius:3px;">' + rec.tb_num + '</code></td>' +
  666. '<td>' + stationBadge + '</td>' +
  667. '<td>' + photoStatus + '</td>' +
  668. '<td>' + weightMatch + '</td>' +
  669. '<td>' + weightVal + '</td>' +
  670. '<td>' + wus + '</td>' +
  671. '</tr>';
  672. }
  673. tbody.innerHTML = html;
  674. }
  675. function renderSyncPagination(total, totalPages) {
  676. var div = document.getElementById('sync-pagination');
  677. if (totalPages <= 1) {
  678. div.innerHTML = '<span style="color:#999;font-size:13px;">共 ' + total + ' 条记录</span>';
  679. return;
  680. }
  681. var html = '<span style="color:#666;font-size:13px;margin-right:10px;">共 ' + total + ' 条,' + totalPages + ' 页</span>';
  682. if (syncPage > 1) {
  683. html += '<button onclick="searchSync(1)">首页</button>';
  684. html += '<button onclick="searchSync(' + (syncPage - 1) + ')">上一页</button>';
  685. }
  686. var start = Math.max(1, syncPage - 2);
  687. var end = Math.min(totalPages, syncPage + 2);
  688. for (var p = start; p <= end; p++) {
  689. if (p === syncPage) {
  690. html += '<button class="active" disabled>' + p + '</button>';
  691. } else {
  692. html += '<button onclick="searchSync(' + p + ')">' + p + '</button>';
  693. }
  694. }
  695. if (syncPage < totalPages) {
  696. html += '<button onclick="searchSync(' + (syncPage + 1) + ')">下一页</button>';
  697. html += '<button onclick="searchSync(' + totalPages + ')">末页</button>';
  698. }
  699. div.innerHTML = html;
  700. }
  701. function resetSyncFilters() {
  702. document.getElementById('sync-filter-plate').value = '';
  703. document.getElementById('sync-filter-tbnum').value = '';
  704. document.getElementById('sync-filter-date-from').value = '';
  705. document.getElementById('sync-filter-date-to').value = '';
  706. document.getElementById('sync-filter-station').value = '0';
  707. document.getElementById('sync-filter-status').value = '0';
  708. searchSync(1);
  709. }
  710. </script>
  711. </body>
  712. </html>