diff --git a/vehicle-data-platform/apps/web/src/pages/Quality.tsx b/vehicle-data-platform/apps/web/src/pages/Quality.tsx index 6975647a..28a720d1 100644 --- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx @@ -1175,6 +1175,53 @@ export function Quality({ onClick: () => copyAlertRecoveryReceipt() } ]; + const alertClosureTimelineItems = [ + { + step: '1', + label: '告警触发', + value: `${issueRecordCount.toLocaleString()} 条事件`, + detail: primaryIssueImpact ? `主要问题:${qualityIssueLabel(primaryIssueImpact.name)}` : '等待告警规则命中。', + action: '查看事件', + color: issueRecordCount > 0 ? 'orange' as const : 'green' as const, + onClick: () => loadIssues(filters, pagination.currentPage, pagination.pageSize) + }, + { + step: '2', + label: '影响车辆', + value: `${issueVehicleCount.toLocaleString()} 辆车`, + detail: '先判断实时、轨迹、里程和历史导出是否受影响。', + action: '影响摘要', + color: issueVehicleCount > 0 ? 'orange' as const : 'green' as const, + onClick: copyBusinessImpact + }, + { + step: '3', + label: '责任通知', + value: primaryPolicy?.target || '责任人待配置', + detail: primaryPolicy ? `${primaryPolicy.name} / ${formatEscalationMinutes(primaryPolicy.escalationMinutes) || '未配置升级'}` : '需要补充通知策略和升级时限。', + action: '通知策略', + color: primaryPolicy ? 'blue' as const : 'orange' as const, + onClick: () => onOpenNotificationRules?.() + }, + { + step: '4', + label: '证据复核', + value: '实时/轨迹/里程', + detail: '每次通知都要带上可打开的车辆证据入口和筛选范围。', + action: '证据交接', + color: 'blue' as const, + onClick: copyNotificationHandoff + }, + { + step: '5', + label: '恢复验收', + value: primaryPolicy?.acceptanceCriteria ? '有标准' : '待补充', + detail: primaryPolicy?.acceptanceCriteria || '确认车辆服务恢复,实时、轨迹、历史和里程证据可查。', + action: '复制回执', + color: primaryPolicy?.acceptanceCriteria ? 'green' as const : 'orange' as const, + onClick: copyAlertRecoveryReceipt + } + ]; return (
@@ -1211,6 +1258,42 @@ export function Quality({ ))}
+ +
+
+ + {customerDecision.label} + 0 ? 'red' : priorityP1Count > 0 ? 'orange' : 'green'}> + P0 {priorityP0Count.toLocaleString()} / P1 {priorityP1Count.toLocaleString()} + + {primaryPolicy?.name || '策略待配置'} + + 从告警触发、车辆影响、责任通知、证据复核到恢复验收,形成客户可追踪的闭环。 + + 这条时间线把技术告警翻译成客户处理步骤:每一步都有责任、证据和下一步动作,便于值班、交接和复盘。 + +
+
+ {alertClosureTimelineItems.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 b1fe55ec..ae199fb9 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -5329,6 +5329,108 @@ button.vp-realtime-command-item:focus-visible { line-height: 18px; } +.vp-alert-closure-timeline { + display: grid; + grid-template-columns: minmax(280px, 0.58fr) minmax(0, 1.42fr); + gap: 16px; +} + +.vp-alert-closure-summary { + min-height: 178px; + padding: 14px; + border: 1px solid rgba(22, 100, 255, 0.24); + border-radius: var(--vp-radius); + background: #f6f9ff; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-alert-closure-summary strong { + color: var(--vp-text); + font-size: 19px; + line-height: 26px; + word-break: break-word; +} + +.vp-alert-closure-summary span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-alert-closure-steps { + display: grid; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 10px; +} + +.vp-alert-closure-step { + min-height: 178px; + padding: 12px; + border: 1px solid rgba(22, 100, 255, 0.14); + border-radius: 8px; + background: #fff; + color: inherit; + cursor: pointer; + font: inherit; + text-align: left; + display: grid; + grid-template-columns: 32px minmax(0, 1fr); + gap: 10px; + align-content: start; +} + +.vp-alert-closure-step:hover, +.vp-alert-closure-step:focus-visible { + border-color: rgba(22, 100, 255, 0.38); + background: #f6f9ff; + box-shadow: var(--vp-shadow-sm); + outline: none; +} + +.vp-alert-closure-step > span { + width: 30px; + height: 30px; + border-radius: 999px; + background: #eef4ff; + color: #1664ff; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 800; +} + +.vp-alert-closure-step div { + min-width: 0; + display: grid; + gap: 8px; + align-content: start; +} + +.vp-alert-closure-step strong { + color: var(--vp-text); + font-size: 17px; + line-height: 22px; + word-break: break-word; +} + +.vp-alert-closure-step small { + color: var(--vp-text-muted); + font-size: 12px; + line-height: 18px; + word-break: break-word; +} + +.vp-alert-closure-step em { + color: #1664ff; + font-size: 12px; + font-style: normal; + font-weight: 700; + line-height: 18px; +} + .vp-alert-decision-board { display: grid; grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr); @@ -10270,6 +10372,8 @@ button.vp-realtime-command-item:focus-visible { .vp-current-service-grid, .vp-customer-vehicle-service-hub, .vp-customer-vehicle-service-grid, + .vp-alert-closure-timeline, + .vp-alert-closure-steps, .vp-vehicle-asset-console, .vp-vehicle-asset-console-grid, .vp-vehicle-service-desk, 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 ccfa20e7..5f7720b0 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -3923,6 +3923,13 @@ test('shows alert rule and notification policy workspace on quality page', async expect(screen.getAllByText('立即处置').length).toBeGreaterThan(0); expect(screen.getByText('待通知车辆')).toBeInTheDocument(); expect(screen.getAllByText('证据闭环').length).toBeGreaterThanOrEqual(1); + expect(screen.getByText('客户告警闭环时间线')).toBeInTheDocument(); + expect(screen.getByText('从告警触发、车辆影响、责任通知、证据复核到恢复验收,形成客户可追踪的闭环。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户告警闭环时间线 1 告警触发 5 条事件 查看事件' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户告警闭环时间线 2 影响车辆 3 辆车 影响摘要' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户告警闭环时间线 3 责任通知 接入运维 + 业务责任人 通知策略' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户告警闭环时间线 4 证据复核 实时/轨迹/里程 证据交接' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户告警闭环时间线 5 恢复验收 有标准 复制回执' })).toBeInTheDocument(); fireEvent.click(screen.getByRole('button', { name: '复制告警决策' })); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【客户告警决策说明】')); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('决策结论:立即处置')); @@ -3951,7 +3958,7 @@ test('shows alert rule and notification policy workspace on quality page', async expect(screen.getByRole('button', { name: '分派团队 平台接入' })).toHaveTextContent('2 条'); expect(screen.getByRole('button', { name: '分派团队 车辆档案' })).toHaveTextContent('主问题:VIN 缺失'); expect(screen.getByRole('button', { name: '分派团队 基础设施' })).toHaveTextContent('SLA:15 分钟恢复'); - expect(screen.getByText('通知策略')).toBeInTheDocument(); + expect(screen.getAllByText('通知策略').length).toBeGreaterThan(0); expect(screen.getAllByText('P0 实时中断').length).toBeGreaterThan(0); expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThan(0); expect(screen.getByText('站内告警 / 邮件 / 企业微信')).toBeInTheDocument();