diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index 9f1cc25e..dae61a08 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -2634,6 +2634,53 @@ export function Dashboard({ onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) } ]; + const customerVehicleServicePathItems = [ + { + label: '地图监控', + question: '在线在哪里', + value: `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 在线`, + detail: `${commandLocatedCount.toLocaleString()} 辆有有效坐标,先让客户看到车辆位置和在线状态。`, + action: '打开地图', + color: 'green' as const, + onClick: () => onOpenMap({ online: 'online' }) + }, + { + label: '时间窗', + question: '这段时间怎么跑', + value: dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo), + detail: '用同一时间窗串起轨迹、位置、里程、告警和导出证据。', + action: '开始复盘', + color: 'blue' as const, + onClick: openTimeMonitorHistory + }, + { + label: '里程统计', + question: '里程是否可信', + value: `${formatCount(serviceSummary?.totalVehicles)} 车辆`, + detail: '面向客户核对区间里程、每日汇总和 BI 统计口径。', + action: '核对统计', + color: 'blue' as const, + onClick: openTimeMonitorMileage + }, + { + label: '告警通知', + question: '异常是否通知', + value: `${formatCount(summary?.issueVehicles)} 告警`, + detail: highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '暂无高优先级告警,保持日常巡检。', + action: '查看告警', + color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + onClick: () => onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) + }, + { + label: '数据导出', + question: '数据能否交付', + value: `${formatCount(summary?.frameToday)} 今日数据`, + detail: '按车辆、时间窗和字段裁剪导出位置、原始记录和解析证据。', + action: '导出证据', + color: 'blue' as const, + onClick: openTimeMonitorRaw + } + ]; return (
@@ -2644,6 +2691,46 @@ export function Dashboard({ : '面向客户的车辆地图、实时监控、轨迹回放、统计查询、自定义时间窗复盘、历史查询、告警通知和数据导出'} /> + {focusMode === 'overview' ? ( +
+
+ + 客户车辆服务路径 + {vehicleServiceOnlineText(serviceSummary, summary)} + 0 ? 'orange' : 'green'}>{formatCount(summary?.issueVehicles)} 告警 + + + 客户车辆服务路径 + + + 客户入口只回答车辆问题:在线在哪里、这段时间怎么跑、里程是否可信、异常是否通知、数据能否交付。 + + + 32960 / 808 / MQTT 只是证据通道 + + + 默认沉到车辆可信度、历史明细和运维解释里。 + +
+
+ {customerVehicleServicePathItems.map((item) => ( + + ))} +
+
+ ) : null} {focusMode === 'time-window' ? (
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index afdc285f..a2597179 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -1213,6 +1213,104 @@ body { outline: none; } +.vp-customer-service-path { + margin-bottom: 16px; + border: 1px solid rgba(22, 100, 255, 0.16); + border-radius: 8px; + background: #ffffff; + display: grid; + grid-template-columns: minmax(300px, 0.42fr) minmax(0, 1fr); + overflow: hidden; + box-shadow: var(--vp-shadow-sm); +} + +.vp-customer-service-path-copy { + min-width: 0; + padding: 18px; + border-right: 1px solid var(--vp-border); + background: #f7fbff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-customer-service-path-copy .semi-typography { + max-width: 580px; +} + +.vp-customer-service-path-evidence { + padding: 10px 12px; + border: 1px solid rgba(22, 100, 255, 0.14); + border-radius: 8px; + background: #ffffff; +} + +.vp-customer-service-path-grid { + min-width: 0; + padding: 14px; + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-customer-service-path-item { + min-width: 0; + min-height: 176px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: 8px; + background: #fbfcff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + gap: 8px; + align-content: start; + transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; +} + +.vp-customer-service-path-item:hover, +.vp-customer-service-path-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.08); + outline: none; +} + +.vp-customer-service-path-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + font-weight: 800; + word-break: break-word; +} + +.vp-customer-service-path-item span { + color: var(--vp-primary); + font-size: 13px; + line-height: 18px; + font-weight: 800; + word-break: break-word; +} + +.vp-customer-service-path-item p { + margin: 0; + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-customer-service-path-item em { + align-self: end; + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 800; + line-height: 18px; +} + .vp-vehicle-priority-queue { padding: 12px; border: 1px solid rgba(255, 127, 0, 0.2); @@ -14389,6 +14487,8 @@ button.vp-realtime-command-item:focus-visible { .vp-vehicle-archive-summary-main, .vp-vehicle-archive-summary-grid, .vp-vehicle-question-grid, + .vp-customer-service-path, + .vp-customer-service-path-grid, .vp-unified-service-board, .vp-unified-service-grid, .vp-service-dossier, @@ -14766,6 +14866,7 @@ button.vp-realtime-command-item:focus-visible { .vp-history-export-acceptance-actions, .vp-time-next-action-copy, .vp-time-next-action-actions, + .vp-customer-service-path-copy, .vp-time-monitor-dedicated-copy, .vp-map-layer-control-copy, .vp-map-layer-control-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 699ab912..cbb51b67 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -71,6 +71,90 @@ test('renders vehicle platform shell', () => { expect(getComputedStyle(document.body).minWidth).not.toBe('1280px'); }); +test('dashboard opens with a customer vehicle service path instead of protocol entry points', async () => { + window.history.replaceState(null, '', '/#/dashboard'); + vi.spyOn(globalThis, 'fetch').mockImplementation(async (input) => { + const path = String(input); + if (path.includes('/api/ops/health')) { + return { + ok: true, + json: async () => ({ + data: { + linkHealth: [], + kafkaLag: 0, + activeConnections: 15, + redisOnlineKeys: 92, + tdengineWritable: true, + mysqlWritable: true, + runtime: { requestTimeoutMs: 5000, amapWebJsConfigured: true, amapSecurityProxyEnabled: true, amapSecurityCodeExposed: false } + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/dashboard/summary')) { + return { + ok: true, + json: async () => ({ + data: { + onlineVehicles: 92, + activeToday: 120, + frameToday: 21000, + issueVehicles: 7, + kafkaLag: 0, + protocols: [], + serviceStatuses: [], + linkHealth: [] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + if (path.includes('/api/vehicle-service/summary')) { + return { + ok: true, + json: async () => ({ + data: { + totalVehicles: 1033, + boundVehicles: 988, + onlineVehicles: 92, + singleSourceVehicles: 170, + multiSourceVehicles: 220, + noDataVehicles: 15, + identityRequiredVehicles: 9, + serviceStatuses: [], + protocols: [], + missingSources: [] + }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + } + return { + ok: true, + json: async () => ({ + data: { items: [], total: 0, limit: 8, offset: 0 }, + traceId: 'trace-test', + timestamp: 1783094400000 + }) + } as Response; + }); + + render(); + + expect(await screen.findByRole('heading', { name: '客户车辆服务路径' })).toBeInTheDocument(); + expect(screen.getByText('客户入口只回答车辆问题:在线在哪里、这段时间怎么跑、里程是否可信、异常是否通知、数据能否交付。')).toBeInTheDocument(); + expect(screen.getByText('32960 / 808 / MQTT 只是证据通道')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务路径 地图监控 在线在哪里 打开地图' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务路径 时间窗 这段时间怎么跑 开始复盘' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务路径 里程统计 里程是否可信 核对统计' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务路径 告警通知 异常是否通知 查看告警' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户车辆服务路径 数据导出 数据能否交付 导出证据' })).toBeInTheDocument(); +}); + test('topbar frames customer work as a vehicle service delivery strip', () => { vi.spyOn(globalThis, 'fetch').mockImplementation(async () => ({ ok: true,