diff --git a/vehicle-data-platform/apps/web/src/pages/Quality.tsx b/vehicle-data-platform/apps/web/src/pages/Quality.tsx index f8779958..022e3a59 100644 --- a/vehicle-data-platform/apps/web/src/pages/Quality.tsx +++ b/vehicle-data-platform/apps/web/src/pages/Quality.tsx @@ -798,6 +798,8 @@ export function Quality({ : impactSeverity.label === '需关注' ? { label: '当日跟进', color: 'orange' as const, detail: '纳入当日数据治理，持续观察来源恢复和车辆证据。' } : { label: '持续观察', color: 'green' as const, detail: '当前没有客户侧高优先级影响，保持常规监控。' }; + const primaryPolicy = policies.find((item) => item.name.startsWith('P0')) ?? policies[0]; + const secondaryPolicy = policies.find((item) => item.name.startsWith('P1')) ?? policies[1] ?? primaryPolicy; const primaryProtocolImpact = summaryProtocols[0]; const primaryIssueImpact = summaryIssueTypes[0]; const impactCards = [ @@ -807,6 +809,40 @@ export function Quality({ { label: '主要问题', value: primaryIssueImpact ? qualityIssueLabel(primaryIssueImpact.name) : '-', detail: primaryIssueImpact ? `${primaryIssueImpact.count.toLocaleString()} 条` : '暂无问题类型', color: primaryIssueImpact ? 'orange' as const : 'green' as const }, { label: '容量与存储', value: storageWritable ? '可写' : '异常', detail: `Kafka Lag ${formatLag(health?.kafkaLag)} / 发现 ${capacityFindingCount} 项`, color: storageWritable && capacityFindingCount === 0 ? 'green' as const : 'red' as const } ]; + const customerNotificationSlaItems = [ + { + label: '客户影响范围', + value: `${issueVehicleCount.toLocaleString()} 辆车`, + detail: `${issueRecordCount.toLocaleString()} 条告警记录，优先判断实时、轨迹和里程是否受影响。`, + color: issueVehicleCount > 0 ? 'orange' as const : 'green' as const, + action: '影响摘要', + onClick: () => copyBusinessImpact() + }, + { + label: '通知负责人', + value: primaryPolicy?.target || '待配置', + detail: primaryPolicy ? `${primaryPolicy.name} / ${primaryPolicy.channel}` : '缺少通知策略，建议先配置责任团队。', + color: primaryPolicy ? 'blue' as const : 'orange' as const, + action: '通知规则', + onClick: () => onOpenNotificationRules?.() + }, + { + label: '升级时限', + value: formatEscalationMinutes(primaryPolicy?.escalationMinutes) || '未配置', + detail: secondaryPolicy && secondaryPolicy !== primaryPolicy ? `P1 参考：${secondaryPolicy.target} / ${formatEscalationMinutes(secondaryPolicy.escalationMinutes) || '未配置'}` : '高优先级事件需要明确超时升级路径。', + color: priorityP0Count > 0 ? 'red' as const : priorityP1Count > 0 ? 'orange' as const : 'green' as const, + action: '复制策略', + onClick: () => copyPolicyRunbook() + }, + { + label: '恢复验收', + value: primaryPolicy?.acceptanceCriteria ? '有标准' : '待补充', + detail: primaryPolicy?.acceptanceCriteria || '车辆服务状态恢复，实时、轨迹、历史和里程证据可查询。', + color: primaryPolicy?.acceptanceCriteria ? 'green' as const : 'orange' as const, + action: '交接包', + onClick: () => copyNotificationHandoff() + } + ]; const loadIssues = (values: Record = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => { setLoadingIssues(true); @@ -1057,6 +1093,44 @@ export function Quality({ + +
+
+ + {customerDecision.label} + 0 ? 'red' : 'green'}>P0 {priorityP0Count.toLocaleString()} + {primaryPolicy?.name || '策略待配置'} + + 把告警翻译成客户能理解的通知、时限和恢复标准 + + 每一条告警都先回答影响哪些车、通知谁、多久升级、恢复后如何验收；链路、协议和原始记录只作为证据附件。 + + + + + {onOpenNotificationRules ? : null} + +
+
+ {customerNotificationSlaItems.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 8253f390..b45fec54 100644 --- a/vehicle-data-platform/apps/web/src/styles/global.css +++ b/vehicle-data-platform/apps/web/src/styles/global.css @@ -3133,6 +3133,82 @@ button.vp-realtime-command-item:focus-visible { line-height: 20px; } +.vp-alert-sla-board { + display: grid; + grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr); + gap: 16px; +} + +.vp-alert-sla-summary { + min-height: 164px; + padding: 12px; + border: 1px solid rgba(255, 176, 31, 0.34); + border-radius: var(--vp-radius); + background: #fffaf0; + display: grid; + gap: 10px; + align-content: start; +} + +.vp-alert-sla-summary strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + word-break: break-word; +} + +.vp-alert-sla-summary span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + +.vp-alert-sla-grid { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 12px; +} + +.vp-alert-sla-item { + min-height: 164px; + padding: 12px; + border: 1px solid var(--vp-border); + border-radius: var(--vp-radius); + background: #fbfcff; + display: grid; + gap: 10px; + align-content: start; + text-align: left; + font: inherit; + cursor: pointer; +} + +.vp-alert-sla-item:hover, +.vp-alert-sla-item:focus-visible { + border-color: rgba(22, 100, 255, 0.42); + background: #f5f9ff; + outline: none; +} + +.vp-alert-sla-item > div { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.vp-alert-sla-item strong { + color: var(--vp-text); + font-size: 18px; + line-height: 24px; + word-break: break-word; +} + +.vp-alert-sla-item span { + color: var(--vp-text-muted); + font-size: 13px; + line-height: 20px; +} + .vp-alert-center-board { display: grid; grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr); @@ -6392,6 +6468,8 @@ button.vp-realtime-command-item:focus-visible { .vp-alert-flow, .vp-alert-decision-board, .vp-alert-decision-grid, + .vp-alert-sla-board, + .vp-alert-sla-grid, .vp-alert-impact-board, .vp-alert-impact-grid, .vp-alert-dispatch-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 f9e05a17..a64215b5 100644 --- a/vehicle-data-platform/apps/web/src/test/App.test.tsx +++ b/vehicle-data-platform/apps/web/src/test/App.test.tsx @@ -3730,7 +3730,7 @@ test('shows alert rule and notification policy workspace on quality page', async expect(screen.getAllByText('P0 实时中断').length).toBeGreaterThan(0); expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThan(0); expect(screen.getByText('站内告警 / 邮件 / 企业微信')).toBeInTheDocument(); - expect(screen.getByText('30 分钟升级')).toBeInTheDocument(); + expect(screen.getAllByText('30 分钟升级').length).toBeGreaterThanOrEqual(1); expect(screen.getByText('验收：来源恢复并持续 10 分钟，车辆服务可查到实时与历史证据')).toBeInTheDocument(); fireEvent.click(screen.getByRole('button', { name: '复制业务影响报告' })); @@ -3962,7 +3962,7 @@ test('uses backend quality notification plan on quality page', async () => { expect(screen.getAllByText('后端建议动作').length).toBeGreaterThan(0); expect(screen.getAllByText('10 分钟确认').length).toBeGreaterThan(0); expect(screen.getByText('后端无来源规则')).toBeInTheDocument(); - expect(screen.getByText('后端 P0 通知策略')).toBeInTheDocument(); + expect(screen.getAllByText('后端 P0 通知策略').length).toBeGreaterThan(0); expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/alert-events/notification-plan?limit=20'), undefined); }); @@ -4600,7 +4600,16 @@ test('copies priority queue notification digest on quality page', async () => { expect(await screen.findByText('处置优先队列')).toBeInTheDocument(); expect(await screen.findByText('platform-20260704153951')).toBeInTheDocument(); - fireEvent.click(screen.getByRole('button', { name: '复制通知交接包' })); + expect(screen.getByText('客户通知 SLA')).toBeInTheDocument(); + expect(screen.getByText('把告警翻译成客户能理解的通知、时限和恢复标准')).toBeInTheDocument(); + expect(screen.getByText('每一条告警都先回答影响哪些车、通知谁、多久升级、恢复后如何验收；链路、协议和原始记录只作为证据附件。')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户通知SLA 客户影响范围 影响摘要' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户通知SLA 通知负责人 通知规则' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户通知SLA 升级时限 复制策略' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '客户通知SLA 恢复验收 交接包' })).toBeInTheDocument(); + expect(screen.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThanOrEqual(1); + expect(screen.getAllByText('30 分钟升级').length).toBeGreaterThanOrEqual(1); + fireEvent.click(screen.getAllByRole('button', { name: '复制通知交接包' })[0]); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【告警通知交接包】')); expect(writeText).toHaveBeenCalledWith(expect.stringContaining('运行版本：platform-20260704153951'));