From 3e3bc117f72ca83003aec4d56b98efc14af0bcef Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 5 Jul 2026 18:32:19 +0800 Subject: [PATCH] feat(platform): add realtime vehicle snapshot --- .../apps/web/src/pages/Realtime.tsx | 80 +++++++++++++++++++ .../apps/web/src/styles/global.css | 78 ++++++++++++++++++ .../apps/web/src/test/App.test.tsx | 7 ++ 3 files changed, 165 insertions(+) diff --git a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx index 3f59afcb..8fccfac5 100644 --- a/vehicle-data-platform/apps/web/src/pages/Realtime.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Realtime.tsx @@ -1348,6 +1348,56 @@ export function Realtime({ disabled: rows.length === 0 } ]; + const realtimeSingleVehicleItems = [ + { + label: '车辆服务', + value: selectedMapRow?.plate || selectedMapRow?.vin || '未选车辆', + detail: selectedMapRow ? `${vehicleServiceStatus(selectedMapRow).label}，${sourceEvidenceText(selectedMapRow)}` : '先从地图或列表选择车辆。', + color: selectedMapRow ? vehicleServiceStatus(selectedMapRow).color : 'grey' as const, + action: '车辆档案', + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenVehicle(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '轨迹回放', + value: selectedMapRow ? dataFreshness(selectedMapRow).label : '待选车', + detail: selectedMapRow ? `${dataFreshness(selectedMapRow).detail}，回看位置、速度和里程断点。` : '选择车辆后进入轨迹回放。', + color: selectedMapRow ? dataFreshness(selectedMapRow).color : 'grey' as const, + action: '打开轨迹', + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => selectedMapRow && onOpenHistory?.(selectedMapRow.vin, selectedVehicleProtocol) + }, + { + label: '统计查询', + value: selectedMapRow?.totalMileageKm != null ? `${selectedMapRow.totalMileageKm} km` : '无里程', + detail: '核对单车总里程、日里程和区间闭合。', + color: selectedMapRow?.totalMileageKm != null ? 'blue' as const : 'grey' as const, + action: '查里程', + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: () => { + if (!selectedMapRow) return; + window.location.hash = buildAppHash({ page: 'mileage', keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol }); + } + }, + { + label: '历史导出', + value: selectedVehicleProtocol || selectedMapRow?.primaryProtocol || '全部通道', + detail: '进入历史查询导出同一车辆的 RAW、位置和字段证据。', + color: selectedMapRow ? 'blue' as const : 'grey' as const, + action: '导出证据', + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin), + onClick: openSelectedVehicleRaw + }, + { + label: '告警通知', + value: selectedMapRow ? vehicleServiceStatus(selectedMapRow).label : '待选车', + detail: selectedMapRow ? realtimeIssueLabels(selectedMapRow).join('；') : '选择车辆后查看断链、离线和定位异常。', + color: selectedMapRow && hasSourceIssue(selectedMapRow) ? 'orange' as const : selectedMapRow ? 'green' as const : 'grey' as const, + action: '查看告警', + disabled: !selectedMapRow || !canOpenVehicle(selectedMapRow.vin) || !onOpenQuality, + onClick: () => selectedMapRow && onOpenQuality?.({ keyword: selectedMapRow.vin, protocol: selectedVehicleProtocol }) + } + ]; const realtimeNextActions = [ { level: degradedCount > 0 || staleCount > 0 ? '优先' : '巡检', @@ -2073,6 +2123,36 @@ export function Realtime({ ))} +
+
+ + 实时单车服务快照 + {selectedMapRow ? vehicleServiceStatus(selectedMapRow).label : '未选车辆'} + {selectedMapRow ? dataFreshness(selectedMapRow).label : '等待数据'} + + 客户打开实时监控时，直接围绕选中车辆查看在线、位置、里程、新鲜度，并进入轨迹、统计、历史导出和告警通知。 + + {selectedMapRow ? `${selectedMapRow.plate || selectedMapRow.vin} / ${selectedVehicleProtocol || selectedMapRow.primaryProtocol || '全部通道'} / ${selectedMapRow.lastSeen || '无最后时间'}` : '从地图或实时列表选择一辆车后，快照会自动聚焦到单车服务。'} + +
+
+ {realtimeSingleVehicleItems.map((item) => ( + + ))} +
+
{timeWindowMonitorBlock}
{ diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index a52dd17c..822f74cf 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -2324,6 +2324,82 @@ body { align-self: end; } +.vp-realtime-single-snapshot { + margin-bottom: 16px; + border: 1px solid rgba(22, 100, 255, 0.16); + border-radius: var(--vp-radius); + background: #fff; + display: grid; + grid-template-columns: minmax(280px, 0.56fr) minmax(0, 1.44fr); + overflow: hidden; +} + +.vp-realtime-single-summary { + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f8fbff; + display: grid; + gap: 11px; + align-content: start; +} + +.vp-realtime-single-grid { + padding: 16px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-realtime-single-item { + min-height: 146px; + padding: 12px; + border: 1px solid rgba(22, 100, 255, 0.14); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: start; +} + +.vp-realtime-single-item:hover, +.vp-realtime-single-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-realtime-single-item:disabled { + cursor: not-allowed; + opacity: 0.62; +} + +.vp-realtime-single-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + word-break: break-word; +} + +.vp-realtime-single-item span { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-realtime-single-item em { + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-time-window-monitor { margin-bottom: 16px; overflow: hidden; @@ -8590,6 +8666,8 @@ button.vp-realtime-command-item:focus-visible { .vp-realtime-map-dispatch, .vp-realtime-map-dispatch-grid, .vp-realtime-customer-steps, + .vp-realtime-single-snapshot, + .vp-realtime-single-grid, .vp-time-window-monitor .semi-card-body, .vp-time-window-controls, .vp-time-window-actions, diff --git a/vehicle-data-platform/apps/web/src/test/App.test.tsx b/vehicle-data-platform/apps/web/src/test/App.test.tsx index 46e6d8fe..328c74cb 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -9336,6 +9336,13 @@ test('frames realtime page as one vehicle service with source evidence', async ( expect(screen.getByRole('button', { name: '实时监控路径 异常优先 关注车辆' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '实时监控路径 单车复盘 轨迹回放' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '实时监控路径 查询导出 导出 CSV' })).toBeInTheDocument(); + expect(screen.getByText('实时单车服务快照')).toBeInTheDocument(); + expect(screen.getByText('客户打开实时监控时，直接围绕选中车辆查看在线、位置、里程、新鲜度，并进入轨迹、统计、历史导出和告警通知。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '实时单车服务快照 车辆服务 粤ART002 车辆档案' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '实时单车服务快照 轨迹回放 更新超时 打开轨迹' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '实时单车服务快照 统计查询 119925 km 查里程' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '实时单车服务快照 历史导出 GB32960 导出证据' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '实时单车服务快照 告警通知 服务正常 查看告警' })).toBeInTheDocument(); expect(screen.getAllByText('定位有效').length).toBeGreaterThan(0); expect(screen.getByText('车辆核心数据')).toBeInTheDocument(); expect(screen.getByText('实时通道')).toBeInTheDocument();