diff --git a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx index cdfeaab2..9c289dc2 100644 --- a/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Dashboard.tsx @@ -1386,6 +1386,34 @@ export function Dashboard({ onClick: () => onOpenQuality() } ]; + const customerNextActions = [ + { + level: (summary?.issueVehicles ?? 0) > 0 ? '优先' : '巡检', + title: (summary?.issueVehicles ?? 0) > 0 ? '先处理告警车辆' : '先查看在线车辆地图', + detail: (summary?.issueVehicles ?? 0) > 0 + ? (highPriorityIssue ? `${qualityIssueLabel(highPriorityIssue.issueType)} / ${priorityIssueVehicleLabel(highPriorityIssue)}` : '存在告警车辆,建议先进入告警事件。') + : `${formatCount(serviceSummary?.onlineVehicles ?? summary?.onlineVehicles)} 辆在线,${commandLocatedCount.toLocaleString()} 辆有定位。`, + action: (summary?.issueVehicles ?? 0) > 0 ? '进入告警' : '打开地图', + color: (summary?.issueVehicles ?? 0) > 0 ? 'orange' as const : 'green' as const, + onClick: () => (summary?.issueVehicles ?? 0) > 0 ? onOpenQuality(highPriorityIssue?.issueType ? { issueType: highPriorityIssue.issueType } : {}) : onOpenMap({ online: 'online' }) + }, + { + level: focusVehicle ? '单车' : '范围', + title: focusVehicle ? '复盘重点车辆' : '选择一辆车复盘', + detail: focusVehicle ? `${focusVehicle.label},${focusVehicle.reason}` : '从车辆中心或地图选择车辆后,进入轨迹、里程和历史证据。', + action: focusVehicle ? '车辆服务' : '车辆中心', + color: focusVehicle?.statusColor ?? 'blue' as const, + onClick: () => focusVehicle?.lookupKey ? onOpenVehicle(focusVehicle.lookupKey, focusVehicle.protocol) : onOpenVehicles({}) + }, + { + level: '时间窗', + title: '按同一范围交付数据', + detail: `${dayRangeText(timeMonitorScopeValue.dateFrom, timeMonitorScopeValue.dateTo)},同步轨迹、里程、历史和告警。`, + action: '复制复盘包', + color: 'blue' as const, + onClick: copyTimeMonitorReviewPackage + } + ]; const customerTrustSignals = [ { label: '数据来源', @@ -1418,7 +1446,7 @@ export function Dashboard({ 先看车在哪里,再处理轨迹、里程、告警和导出 - 32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。 + 客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。接入来源只作为追溯证据。 - 客户工作流 + 下一步建议 复制说明 + + {customerNextActions.map((item) => ( + + {item.level} + {item.title} + {item.detail} + {item.action} + + ))} + + 客户工作流 {customerCockpitWorkflows.map((item) => ( diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index e5bee194..9a032727 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -460,6 +460,57 @@ body { gap: 12px; } +.vp-fleet-next-actions { + display: grid; + gap: 9px; +} + +.vp-fleet-next-action { + min-height: 98px; + padding: 12px; + border: 1px solid rgba(22, 100, 255, 0.18); + border-radius: var(--vp-radius); + background: #ffffff; + color: inherit; + text-align: left; + cursor: pointer; + font: inherit; + display: grid; + grid-template-columns: 70px minmax(0, 1fr); + gap: 7px 10px; + align-content: start; +} + +.vp-fleet-next-action:hover, +.vp-fleet-next-action:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + outline: none; +} + +.vp-fleet-next-action strong { + color: var(--vp-text); + font-size: 15px; + line-height: 22px; + font-weight: 700; +} + +.vp-fleet-next-action span { + grid-column: 1 / -1; + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; +} + +.vp-fleet-next-action em { + grid-column: 1 / -1; + color: var(--vp-primary); + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-fleet-monitor-actions { display: grid; gap: 8px; 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 e8f17895..74ad1572 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -799,9 +799,13 @@ test('dashboard exposes vehicle data center capability matrix', async () => { expect(screen.getByText('车辆服务工作台')).toBeInTheDocument(); expect(screen.getByText('车辆监控中心')).toBeInTheDocument(); expect(screen.getByText('先看车在哪里,再处理轨迹、里程、告警和导出')).toBeInTheDocument(); - expect(screen.getByText('32960、808、宇通 MQTT 只是数据证据。客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。')).toBeInTheDocument(); + expect(screen.getByText('客户主流程围绕车辆本身:地图看车、实时状态、时间窗复盘、里程统计、历史数据导出和告警通知。接入来源只作为追溯证据。')).toBeInTheDocument(); expect(screen.getByRole('button', { name: '车辆监控指标 车辆总数 1,033' })).toBeInTheDocument(); expect(screen.getByRole('button', { name: '车辆监控指标 在线车辆 208' })).toBeInTheDocument(); + expect(screen.getByText('下一步建议')).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(); expect(screen.getByRole('button', { name: '客户车辆工作流 里程核对 里程统计' })).toBeInTheDocument();