diff --git a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx index b73a5129..4d8500e5 100644 --- a/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx +++ b/vehicle-data-platform/apps/web/src/pages/VehicleDetail.tsx @@ -535,6 +535,74 @@ export function VehicleDetail({ ] } ]; + const serviceRunbookSteps = [ + { + title: '确认实时状态', + evidence: evidenceSourceCount > 0 ? `${evidenceOnlineSourceCount}/${evidenceSourceCount} 来源在线，最后上报 ${lastSeen}` : '暂无来源在线证据', + acceptance: '车辆在线状态、最新时间、有效坐标均可解释。', + action: '打开实时', + disabled: !hasResolvedVIN, + onClick: () => onOpenRealtime(resolvedVIN, activeProtocol) + }, + { + title: '回放轨迹断点', + evidence: evidenceLocatedSourceCount > 0 ? `${evidenceLocatedSourceCount} 个来源有位置，时间差 ${formatSeconds(evidenceTimeDeltaSeconds)}` : '暂无可回放位置', + acceptance: '轨迹点、速度和总里程变化连续，异常点可定位到时间段。', + action: '轨迹回放', + disabled: !hasResolvedVIN, + onClick: () => onOpenHistory(resolvedVIN, activeProtocol) + }, + { + title: '核对 RAW 字段', + evidence: `${formatCompactNumber(overview?.rawCount ?? detail?.raw?.total ?? 0)} 帧，最新类型 ${latestRaw?.frameType || '-'}`, + acceptance: '关键字段来自解析字段而不是页面二次推断。', + action: 'RAW 证据', + disabled: !hasResolvedVIN, + onClick: () => onOpenRaw(resolvedVIN, activeProtocol) + }, + { + title: '处理告警闭环', + evidence: priorityQualityIssue ? `${qualityIssueLabel(priorityQualityIssue.issueType)} / ${priorityQualityIssue.lastSeen || '-'}` : '暂无质量告警', + acceptance: '断链、VIN 缺失、字段缺失等问题进入告警队列并有处置结论。', + action: '告警队列', + disabled: !onOpenQuality || (!hasResolvedVIN && qualityCount <= 0), + onClick: () => onOpenQuality?.(qualityFiltersForCurrentVehicle()) + }, + { + title: '复核统计口径', + evidence: `${formatCompactNumber(overview?.mileageCount ?? detail?.mileage?.total ?? 0)} 条统计，来源里程差 ${formatCompactNumber(evidenceMileageDelta, ' km')}`, + acceptance: '区间里程、每日里程和轨迹总里程证据可以互相解释。', + action: '里程统计', + disabled: !hasResolvedVIN, + onClick: () => onOpenMileage(resolvedVIN, activeProtocol) + } + ]; + const copyVehicleRunbook = () => { + if (!detail) { + Toast.warning('当前没有可复制的单车Runbook'); + return; + } + const vehicleName = [archivePlate, displayVIN].filter((item) => item && item !== '-').join(' / ') || displayLookupKey; + const lines = [ + '【单车服务闭环Runbook】', + `车辆：${vehicleName}`, + `当前范围：${scopeText}`, + `服务状态：${serviceStatus?.title ?? serviceConclusion.status}`, + `一致性：${consistencyTitle}`, + ...serviceRunbookSteps.map((item, index) => [ + `${index + 1}. ${item.title}`, + ` 证据：${item.evidence}`, + ` 验收：${item.acceptance}` + ].join('\n')), + `实时监控：${vehicleServiceURL(vehicleServiceHash('realtime'))}`, + `轨迹回放：${vehicleServiceURL(vehicleServiceHash('history'))}`, + `RAW证据：${vehicleServiceURL(vehicleServiceHash('history-query', { tab: 'raw', includeFields: 'true' }))}`, + `告警事件：${vehicleServiceURL(buildAppHash({ page: 'alert-events', keyword: resolvedVIN, protocol: activeProtocol }))}`, + `统计查询：${vehicleServiceURL(vehicleServiceHash('mileage'))}`, + `车辆服务：${vehicleServiceURL(vehicleServiceHash('detail'))}` + ]; + copyText(lines.join('\n'), '单车Runbook'); + }; const qualityTable = ( + 单车服务闭环Runbook} + style={{ marginTop: 16 }} + > +
+ {serviceRunbookSteps.map((item, index) => ( +
+
{index + 1}
+
+ {item.title} + {item.evidence} +
{item.acceptance}
+ +
+
+ ))} +
+ + {overview || consistency ? (
diff --git a/vehicle-data-platform/apps/web/src/styles/global.css b/vehicle-data-platform/apps/web/src/styles/global.css index e977a2f7..ab382bc1 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -1093,6 +1093,56 @@ button.vp-realtime-command-item:focus-visible { min-width: 0; } +.vp-runbook-grid { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 12px; +} + +.vp-runbook-step { + min-height: 210px; + padding: 14px; + border: 1px solid var(--vp-border); + border-radius: var(--vp-radius); + background: #fbfcff; + display: grid; + grid-template-rows: auto 1fr; + gap: 12px; +} + +.vp-runbook-index { + width: 28px; + height: 28px; + border-radius: 7px; + background: rgba(0, 164, 184, 0.1); + color: var(--vp-cyan); + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 700; +} + +.vp-runbook-body { + min-width: 0; + display: grid; + gap: 10px; + align-content: space-between; +} + +.vp-runbook-body .semi-typography { + line-height: 20px; +} + +.vp-runbook-acceptance { + padding: 9px 10px; + border-radius: 6px; + background: rgba(18, 183, 106, 0.08); + color: var(--vp-text); + font-size: 12px; + line-height: 18px; +} + .vp-workbench-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); @@ -1352,6 +1402,7 @@ button.vp-realtime-command-item:focus-visible { .vp-current-service-grid, .vp-realtime-command-board, .vp-realtime-command-grid, + .vp-runbook-grid, .vp-workbench-grid, .vp-scenario-grid, .vp-operation-flow, 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 08ee8470..6c9d92f7 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -10116,11 +10116,18 @@ test('shows unified service overview on vehicle detail', async () => { expect(await screen.findByText('车辆服务概览')).toBeInTheDocument(); expect(screen.getByText('单车服务作业台')).toBeInTheDocument(); + expect(screen.getByText('单车服务闭环Runbook')).toBeInTheDocument(); expect(screen.getByText('实时定位')).toBeInTheDocument(); expect(screen.getAllByText('轨迹回放').length).toBeGreaterThanOrEqual(1); - expect(screen.getByText('RAW 证据')).toBeInTheDocument(); + expect(screen.getAllByText('RAW 证据').length).toBeGreaterThan(0); expect(screen.getByText('告警处置')).toBeInTheDocument(); expect(screen.getByText('里程复核')).toBeInTheDocument(); + expect(screen.getByText('确认实时状态')).toBeInTheDocument(); + expect(screen.getByText('回放轨迹断点')).toBeInTheDocument(); + expect(screen.getByText('核对 RAW 字段')).toBeInTheDocument(); + expect(screen.getByText('处理告警闭环')).toBeInTheDocument(); + expect(screen.getByText('复核统计口径')).toBeInTheDocument(); + expect(screen.getByText('车辆在线状态、最新时间、有效坐标均可解释。')).toBeInTheDocument(); expect(screen.getByText('2026-07-03 20:12:10')).toBeInTheDocument(); expect(screen.getByText('12 条历史')).toBeInTheDocument(); expect(screen.getByText('34 帧')).toBeInTheDocument(); @@ -10658,6 +10665,23 @@ test('copies vehicle service diagnostic summary', async () => { expect(operationsCopied).toContain('轨迹回放：http://localhost:3000/#/history?keyword=VIN-SUMMARY-001&protocol=JT808'); expect(operationsCopied).toContain('RAW证据：http://localhost:3000/#/history-query?keyword=VIN-SUMMARY-001&protocol=JT808&tab=raw&includeFields=true'); expect(operationsCopied).toContain('里程统计：http://localhost:3000/#/mileage?keyword=VIN-SUMMARY-001&protocol=JT808'); + + fireEvent.click(screen.getByRole('button', { name: '复制Runbook' })); + await waitFor(() => { + expect(writeText.mock.calls.some((call) => String(call[0]).includes('【单车服务闭环Runbook】'))).toBe(true); + }); + const runbookCopied = String(writeText.mock.lastCall?.[0] ?? ''); + expect(runbookCopied).toContain('【单车服务闭环Runbook】'); + expect(runbookCopied).toContain('车辆：粤A诊断1 / VIN-SUMMARY-001'); + expect(runbookCopied).toContain('当前范围：单一来源：JT808'); + expect(runbookCopied).toContain('1. 确认实时状态'); + expect(runbookCopied).toContain('2. 回放轨迹断点'); + expect(runbookCopied).toContain('3. 核对 RAW 字段'); + expect(runbookCopied).toContain('4. 处理告警闭环'); + expect(runbookCopied).toContain('5. 复核统计口径'); + expect(runbookCopied).toContain('验收：车辆在线状态、最新时间、有效坐标均可解释。'); + expect(runbookCopied).toContain('告警事件：http://localhost:3000/#/alert-events?keyword=VIN-SUMMARY-001&protocol=JT808'); + expect(runbookCopied).toContain('统计查询：http://localhost:3000/#/mileage?keyword=VIN-SUMMARY-001&protocol=JT808'); }); test('exports vehicle detail service dossier as csv', async () => { @@ -11661,5 +11685,5 @@ test('shows canonical vehicle archive on detail', async () => { expect(screen.getByText('缺手机号')).toBeInTheDocument(); expect(screen.getByText('缺OEM')).toBeInTheDocument(); expect(screen.getByText('归并来源数')).toBeInTheDocument(); - expect(screen.getByText('3')).toBeInTheDocument(); + expect(screen.getAllByText('3').length).toBeGreaterThan(0); });