shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(platform): add alert notification channel closure

Browse Source
This commit is contained in:
lingniu
2026-07-05 17:17:53 +08:00
parent 4b84fd8900
commit afbe29b8de
3 changed files with 148 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
vehicle-data-platform/apps/web/src/pages/Quality.tsx
View File

@@ -843,6 +843,17 @@ export function Quality({
onClick: () => copyNotificationHandoff()
}
];
const notificationChannelItems = (primaryPolicy?.channel || '站内告警')
.split('/')
.map((item) => item.trim())
.filter(Boolean)
.map((channel) => ({
channel,
target: primaryPolicy?.target || '待配置责任人',
condition: primaryPolicy?.condition || '告警规则命中',
escalation: formatEscalationMinutes(primaryPolicy?.escalationMinutes) || '未配置升级',
acceptance: primaryPolicy?.acceptanceCriteria || '车辆服务状态恢复，实时、轨迹、历史和里程证据可查询。'
}));
const loadIssues = (values: Record<string, string> = filters, page = pagination.currentPage, pageSize = pagination.pageSize) => {
setLoadingIssues(true);
@@ -1131,6 +1142,47 @@ export function Quality({
</div>
</div>
</Card>
<Card bordered title="客户通知渠道闭环" style={{ marginTop: 16 }}>
<div className="vp-alert-channel-board">
<div className="vp-alert-channel-summary">
<Space wrap>
<Tag color={primaryPolicy ? 'blue' : 'orange'}>{primaryPolicy?.name || '策略待配置'}</Tag>
<Tag color={priorityP0Count > 0 ? 'red' : priorityP1Count > 0 ? 'orange' : 'green'}>
P0 {priorityP0Count.toLocaleString()} / P1 {priorityP1Count.toLocaleString()}
</Tag>
<Tag color={customerDecision.color}>{customerDecision.label}</Tag>
</Space>
<strong>通知不是结束，客户要看到触达、升级和恢复验收</strong>
<span>
把站内、邮件、企业微信这些触达方式按客户能理解的处置路径展示：谁收到、为什么收到、多久升级、恢复后怎么验收。
</span>
<Space wrap>
<Button size="small" theme="solid" type="primary" onClick={copyNotificationHandoff}>复制交接包</Button>
<Button size="small" onClick={copyPolicyRunbook}>复制通知策略</Button>
{onOpenNotificationRules ? <Button size="small" onClick={onOpenNotificationRules}>维护通知规则</Button> : null}
</Space>
</div>
<div className="vp-alert-channel-grid">
{notificationChannelItems.map((item) => (
<button
key={item.channel}
type="button"
className="vp-alert-channel-item"
aria-label={`通知渠道闭环 ${item.channel} 复制交接包`}
onClick={copyNotificationHandoff}
>
<div>
<Tag color="blue">{item.channel}</Tag>
<Tag color={priorityP0Count > 0 ? 'red' : 'orange'}>{item.escalation}</Tag>
</div>
<strong>{item.target}</strong>
<span>{item.condition}</span>
<em>验收：{item.acceptance}</em>
</button>
))}
</div>
</div>
</Card>
<Card bordered title="告警事件与通知中心">
<div className="vp-alert-center-board">
<div className="vp-alert-center-summary">

88
vehicle-data-platform/apps/web/src/styles/global.css
View File

@@ -3796,6 +3796,92 @@ button.vp-realtime-command-item:focus-visible {
line-height: 20px;
}
.vp-alert-channel-board {
display: grid;
grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
gap: 16px;
}
.vp-alert-channel-summary {
min-height: 168px;
padding: 12px;
border: 1px solid rgba(22, 100, 255, 0.2);
border-radius: var(--vp-radius);
background: #f5f9ff;
display: grid;
gap: 10px;
align-content: start;
}
.vp-alert-channel-summary strong {
color: var(--vp-text);
font-size: 18px;
line-height: 24px;
word-break: break-word;
}
.vp-alert-channel-summary span {
color: var(--vp-text-muted);
font-size: 13px;
line-height: 20px;
}
.vp-alert-channel-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.vp-alert-channel-item {
min-height: 168px;
padding: 12px;
border: 1px solid var(--vp-border);
border-radius: var(--vp-radius);
background: #fff;
color: inherit;
cursor: pointer;
font: inherit;
text-align: left;
display: grid;
gap: 9px;
align-content: start;
}
.vp-alert-channel-item:hover,
.vp-alert-channel-item:focus-visible {
border-color: rgba(22, 100, 255, 0.42);
background: #f5f9ff;
outline: none;
}
.vp-alert-channel-item > div {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.vp-alert-channel-item strong {
color: var(--vp-text);
font-size: 16px;
line-height: 22px;
font-weight: 700;
word-break: break-word;
}
.vp-alert-channel-item span {
color: var(--vp-text-muted);
font-size: 13px;
line-height: 20px;
}
.vp-alert-channel-item em {
color: var(--vp-primary);
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px;
}
.vp-alert-center-board {
display: grid;
grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
@@ -7592,6 +7678,8 @@ button.vp-realtime-command-item:focus-visible {
.vp-alert-decision-grid,
.vp-alert-sla-board,
.vp-alert-sla-grid,
.vp-alert-channel-board,
.vp-alert-channel-grid,
.vp-alert-impact-board,
.vp-alert-impact-grid,
.vp-alert-dispatch-grid,

9
vehicle-data-platform/apps/web/src/test/App.test.tsx
View File

@@ -3769,7 +3769,14 @@ 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('30 分钟升级').length).toBeGreaterThanOrEqual(1);
expect(screen.getByText('验收：来源恢复并持续 10 分钟，车辆服务可查到实时与历史证据')).toBeInTheDocument();
expect(screen.getAllByText('验收：来源恢复并持续 10 分钟，车辆服务可查到实时与历史证据').length).toBeGreaterThanOrEqual(1);
expect(screen.getByText('客户通知渠道闭环')).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.getAllByText('接入运维 + 业务责任人').length).toBeGreaterThan(1);
expect(screen.getAllByText('无来源、VIN 缺失、存储不可写').length).toBeGreaterThanOrEqual(1);
fireEvent.click(screen.getByRole('button', { name: '复制业务影响报告' }));
expect(writeText).toHaveBeenCalledWith(expect.stringContaining('【告警业务影响报告】'));