diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index 7f11fe06..28561811 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -774,6 +774,40 @@ export function Dashboard({ const range = scope.dateFrom || scope.dateTo ? `${scope.dateFrom || '-'} 至 ${scope.dateTo || '-'}` : '全部时间'; return `${vehicle} / ${source} / ${range}`; })(); + const timeMonitorWorkbench = [ + { + label: '轨迹回放', + value: `${formatCount(summary?.activeToday)} 活跃`, + detail: '查看时间窗内车辆位置、速度、里程和断点。', + action: '打开轨迹', + color: 'blue' as const, + onClick: openTimeMonitorHistory + }, + { + label: '里程核对', + value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`, + detail: '用同一范围核对区间里程和日统计闭合。', + action: '核对里程', + color: 'green' as const, + onClick: openTimeMonitorMileage + }, + { + label: '历史证据', + value: `${formatCount(summary?.frameToday)} 帧`, + detail: '按车辆、时间和字段裁剪导出 RAW 与解析字段。', + action: '导出证据', + color: 'blue' as const, + onClick: openTimeMonitorRaw + }, + { + label: '告警复盘', + value: `${formatCount(summary?.issueVehicles)} 告警`, + detail: '查看该车辆或来源在当前范围内的风险事件。', + action: '查看告警', + color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + onClick: openTimeMonitorAlerts + } + ]; const dataFlowStages = [ { stage: '01', @@ -1274,6 +1308,34 @@ export function Dashboard({ 同一时间窗会带入轨迹回放、里程统计和历史数据导出,避免跨页面重复输入。 +
+
+ + 当前时间窗 + {timeMonitorScope().keyword ? '单车' : '全域'} + + {timeMonitorSummary} + + 这个范围会同步带入轨迹、里程、历史证据和告警复盘,适合客户问询、BI 核对和异常解释。 + +
+
+ {timeMonitorWorkbench.map((item) => ( + + ))} +
+
{[ { title: '今天车辆轨迹', detail: '查看当天活跃车辆的轨迹、速度和里程断点。', action: '查今天', onClick: openTimeMonitorHistory }, diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index 98e470f7..7bb6996f 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -518,6 +518,81 @@ body { outline: none; } +.vp-time-monitor-workbench { + margin-top: 14px; + display: grid; + grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1.32fr); + gap: 12px; +} + +.vp-time-monitor-scope { + min-height: 168px; + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.24); + border-radius: 8px; + background: #f6f9ff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-time-monitor-scope strong { + color: var(--vp-text); + font-size: 20px; + line-height: 26px; + word-break: break-word; +} + +.vp-time-monitor-work-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.vp-time-monitor-work-item { + min-height: 168px; + padding: 14px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #fbfcff; + display: grid; + gap: 10px; + align-content: start; + text-align: left; + font: inherit; + cursor: pointer; +} + +.vp-time-monitor-work-item:hover, +.vp-time-monitor-work-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f7fbff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-time-monitor-work-item strong { + color: var(--vp-text); + font-size: 20px; + line-height: 26px; + font-weight: 700; + word-break: break-word; +} + +.vp-time-monitor-work-item span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-time-monitor-work-item em { + color: var(--vp-primary); + font-style: normal; + font-size: 13px; + font-weight: 600; + line-height: 20px; +} + .vp-result-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); @@ -3391,6 +3466,8 @@ button.vp-realtime-command-item:focus-visible { .vp-map-workspace, .vp-runbook-grid, .vp-workbench-grid, + .vp-time-monitor-workbench, + .vp-time-monitor-work-grid, .vp-focus-service, .vp-focus-service-evidence, .vp-scenario-grid, 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 ca9a188d..bda789b4 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -810,9 +810,17 @@ test('dashboard exposes vehicle data center capability matrix', async () => { expect(screen.getByText('自定义时间监控')).toBeInTheDocument(); expect(screen.getByText('应用时间窗')).toBeInTheDocument(); expect(screen.getByText('重置最近一天')).toBeInTheDocument(); + expect(screen.getByText('当前时间窗')).toBeInTheDocument(); + expect(screen.getByText('这个范围会同步带入轨迹、里程、历史证据和告警复盘,适合客户问询、BI 核对和异常解释。')).toBeInTheDocument(); expect(screen.getByText('查看轨迹')).toBeInTheDocument(); expect(screen.getByText('统计里程')).toBeInTheDocument(); expect(screen.getByText('导出原始记录')).toBeInTheDocument(); + expect(screen.getAllByText('轨迹回放').length).toBeGreaterThanOrEqual(1); + expect(screen.getByText('里程核对')).toBeInTheDocument(); + expect(screen.getAllByText('历史证据').length).toBeGreaterThanOrEqual(1); + expect(screen.getAllByText('告警复盘').length).toBeGreaterThanOrEqual(1); + expect(screen.getByRole('button', { name: '时间窗作业 轨迹回放 打开轨迹' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '时间窗作业 历史证据 导出证据' })).toBeInTheDocument(); expect(screen.getByText('今天车辆轨迹')).toBeInTheDocument(); expect(screen.getByText('历史时间窗')).toBeInTheDocument(); expect(screen.getByText('区间里程')).toBeInTheDocument();