diff --git a/apps/web/src/pages/health/components/AlertDetailPanel.tsx b/apps/web/src/pages/health/components/AlertDetailPanel.tsx index 1f693fd..3ff4dff 100644 --- a/apps/web/src/pages/health/components/AlertDetailPanel.tsx +++ b/apps/web/src/pages/health/components/AlertDetailPanel.tsx @@ -1,21 +1,18 @@ -import { Descriptions, Tag, Typography, Space, Button, Popconfirm, Tooltip, Collapse, Alert as AntAlert } from 'antd'; +import { Descriptions, Tag, Typography, Space, Button, Popconfirm, Tooltip } from 'antd'; import { CheckOutlined, StopOutlined, SafetyCertificateOutlined, ClockCircleOutlined, ExclamationCircleOutlined, - UserOutlined, - CodeOutlined, - MedicineBoxOutlined, } from '@ant-design/icons'; import type { Alert } from '../../../api/health/alerts'; -const SEVERITY_CONFIG: Record = { - info: { color: 'default', label: '提示', icon: , bannerType: 'info' }, - warning: { color: 'orange', label: '警告', icon: , bannerType: 'warning' }, - critical: { color: 'red', label: '严重', icon: , bannerType: 'error' }, - urgent: { color: 'magenta', label: '紧急', icon: , bannerType: 'error' }, +const SEVERITY_CONFIG: Record = { + info: { color: 'default', label: '提示', icon: }, + warning: { color: 'orange', label: '警告', icon: }, + critical: { color: 'red', label: '严重', icon: }, + urgent: { color: 'magenta', label: '紧急', icon: }, }; const STATUS_CONFIG: Record = { @@ -26,13 +23,6 @@ const STATUS_CONFIG: Record = { dismissed: { color: 'default', label: '已忽略' }, }; -const SEVERITY_GUIDANCE: Record = { - info: '请关注患者状态变化,必要时进行随访。', - warning: '建议尽快确认并安排相关检查或随访。', - critical: '需要立即关注!请确认告警并安排紧急处理。', - urgent: '紧急状况!请立即确认并采取干预措施。', -}; - const DETAIL_LABEL_MAP: Record = { message: '告警描述', value: '监测值', @@ -42,7 +32,6 @@ const DETAIL_LABEL_MAP: Record = { metric_name: '指标名称', indicator_type: '体征类型', recorded_at: '记录时间', - patient_name: '患者', blood_pressure_systolic: '收缩压', blood_pressure_diastolic: '舒张压', heart_rate: '心率', @@ -64,18 +53,17 @@ function formatDetailValue(key: string, value: unknown): string { return JSON.stringify(value); } -function getDetailLabel(key: string): string { - return DETAIL_LABEL_MAP[key] ?? key; -} - interface AlertDetailPanelProps { alert: Alert; onAcknowledge?: (id: string, version: number) => Promise; - onDismiss?: (id: string, version: number, reason?: string) => Promise; + onDismiss?: (id: string, version: number) => Promise; onResolve?: (id: string, version: number) => Promise; loading?: boolean; } +/** + * 告警详情面板 — 展示告警完整信息及操作按钮。 + */ export function AlertDetailPanel({ alert, onAcknowledge, @@ -92,170 +80,126 @@ export function AlertDetailPanel({ ? Object.entries(alert.detail).filter(([, v]) => v !== null && v !== undefined) : []; - const detailMessage = alert.detail?.message as string | undefined; - return (
- {/* 严重程度提示 */} - - {alert.title || severity.label} - {status.label} - - } - description={SEVERITY_GUIDANCE[alert.severity] ?? '请关注此告警并及时处理。'} - /> - - {/* 患者信息 */} -
- - - - - {alert.patient_name || '未知患者'} - - - - (ID: {alert.patient_id.slice(0, 8)}...) - - - + {/* 顶部摘要 */} +
+ + + {severity.label} + + {status.label} - 告警时间:{new Date(alert.created_at).toLocaleString('zh-CN')} + {new Date(alert.created_at).toLocaleString('zh-CN')}
+ {/* 详情 */} + + + {alert.patient_name || '未知患者'} + + + {alert.patient_id.slice(0, 8)}... + + + + + {alert.title || '未知规则'} + + + {alert.rule_id.slice(0, 8)}... + + + + + {severity.label} + + + {status.label} + + {alert.acknowledged_by && ( + + {alert.acknowledged_by} + + )} + {alert.acknowledged_at && ( + + {new Date(alert.acknowledged_at).toLocaleString('zh-CN')} + + )} + {alert.resolved_at && ( + + {new Date(alert.resolved_at).toLocaleString('zh-CN')} + + )} + + {/* 告警详情 */} {detailEntries.length > 0 && ( -
- - - 告警详情 - -
- {detailMessage && ( - 1 ? 8 : 0 }}> - {detailMessage} - - )} - k !== 'message') - .map(([key, value]) => ({ - key, - label: getDetailLabel(key), - children: {formatDetailValue(key, value)}, - })) - } - /> -
-
- )} - - {/* 处理记录 */} - {(alert.acknowledged_by || alert.resolved_at) && ( - - {alert.acknowledged_by && ( - - {alert.acknowledged_by} - - )} - {alert.acknowledged_at && ( - + + {detailEntries.map(([key, value]) => ( + - {new Date(alert.acknowledged_at).toLocaleString('zh-CN')} + {formatDetailValue(key, value)} - )} - {alert.resolved_at && ( - - - {new Date(alert.resolved_at).toLocaleString('zh-CN')} - - - )} + ))} )} - {/* 技术信息(折叠) */} - 技术信息, - children: ( - - - {alert.id} - - - {alert.rule_id} - - - {alert.patient_id} - - {alert.version} - - ), - }]} - /> - {/* 操作按钮 */} -
+
{isPending && onAcknowledge && ( - onAcknowledge(alert.id, alert.version)} - > - - + + onAcknowledge(alert.id, alert.version)} + > + + + )} {isPending && onDismiss && ( - onDismiss(alert.id, alert.version)} - > - - + + onDismiss(alert.id, alert.version)} + > + + + )} {(isPending || isAcknowledged) && onResolve && ( - onResolve(alert.id, alert.version)} - > - - + + onResolve(alert.id, alert.version)} + > + + + )}