126 lines
6.2 KiB
TypeScript
126 lines
6.2 KiB
TypeScript
import { Row, Col, Card, Statistic, Tag, Typography, Empty } from 'antd';
|
|
import type { HealthDataStats } from '../../../api/health/points';
|
|
|
|
const { Text } = Typography;
|
|
|
|
interface HealthDataCenterProps {
|
|
data: HealthDataStats | null;
|
|
tab?: string;
|
|
}
|
|
|
|
function DialysisPanel({ data }: { data: HealthDataStats | null }) {
|
|
return (
|
|
<Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>透析记录</span>} style={{ borderRadius: 8 }}>
|
|
<Row gutter={[12, 12]}>
|
|
<Col span={8}><Statistic title="总记录" value={data?.dialysis.total_records ?? 0} valueStyle={{ fontSize: 20 }} /></Col>
|
|
<Col span={8}><Statistic title="本月新增" value={data?.dialysis.this_month ?? 0} valueStyle={{ fontSize: 20, color: '#2563eb' }} /></Col>
|
|
<Col span={8}><Statistic title="待审核" value={data?.dialysis.pending_review ?? 0} valueStyle={{ fontSize: 20, color: '#d97706' }} /></Col>
|
|
</Row>
|
|
<Row gutter={[12, 12]} style={{ marginTop: 12 }}>
|
|
<Col span={8}><Statistic title="并发症率" value={data?.dialysis.complication_rate ?? 0} suffix="%" precision={1} valueStyle={{ fontSize: 18 }} /></Col>
|
|
<Col span={8}><Statistic title="平均超滤(ml)" value={data?.dialysis.avg_ultrafiltration ?? 0} precision={0} valueStyle={{ fontSize: 18 }} /></Col>
|
|
<Col span={8}><Statistic title="平均时长(分)" value={data?.dialysis.avg_duration ?? 0} precision={0} valueStyle={{ fontSize: 18 }} /></Col>
|
|
</Row>
|
|
{(data?.dialysis.type_distribution ?? []).length > 0 && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>类型分布: </Text>
|
|
{data!.dialysis.type_distribution.map((item) => (
|
|
<Tag key={item.name} color="blue" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function LabPanel({ data }: { data: HealthDataStats | null }) {
|
|
return (
|
|
<Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>化验报告</span>} style={{ borderRadius: 8 }}>
|
|
<Row gutter={[12, 12]}>
|
|
<Col span={8}><Statistic title="总报告" value={data?.lab_reports.total_reports ?? 0} valueStyle={{ fontSize: 20 }} /></Col>
|
|
<Col span={8}><Statistic title="本月新增" value={data?.lab_reports.this_month ?? 0} valueStyle={{ fontSize: 20, color: '#2563eb' }} /></Col>
|
|
<Col span={8}><Statistic title="异常项" value={data?.lab_reports.abnormal_items ?? 0} valueStyle={{ fontSize: 20, color: '#dc2626' }} /></Col>
|
|
</Row>
|
|
<Row gutter={[12, 12]} style={{ marginTop: 12 }}>
|
|
<Col span={8}><Statistic title="待审核" value={data?.lab_reports.pending_review ?? 0} valueStyle={{ fontSize: 18, color: '#d97706' }} /></Col>
|
|
<Col span={8}><Statistic title="已审核" value={data?.lab_reports.reviewed ?? 0} valueStyle={{ fontSize: 18, color: '#059669' }} /></Col>
|
|
</Row>
|
|
{(data?.lab_reports.type_distribution ?? []).length > 0 && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>类型分布: </Text>
|
|
{data!.lab_reports.type_distribution.map((item) => (
|
|
<Tag key={item.name} color="green" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function AppointmentsPanel({ data }: { data: HealthDataStats | null }) {
|
|
return (
|
|
<Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>预约统计</span>} style={{ borderRadius: 8 }}>
|
|
<Row gutter={[12, 12]}>
|
|
<Col span={8}><Statistic title="总预约" value={data?.appointments.total_appointments ?? 0} valueStyle={{ fontSize: 20 }} /></Col>
|
|
<Col span={8}><Statistic title="本月" value={data?.appointments.this_month ?? 0} valueStyle={{ fontSize: 20, color: '#2563eb' }} /></Col>
|
|
<Col span={8}><Statistic title="取消率" value={data?.appointments.cancel_rate ?? 0} suffix="%" precision={1} valueStyle={{ fontSize: 20, color: '#dc2626' }} /></Col>
|
|
</Row>
|
|
{(data?.appointments.status_distribution ?? []).length > 0 && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>状态: </Text>
|
|
{data!.appointments.status_distribution.map((item) => (
|
|
<Tag key={item.name} color="purple" style={{ marginTop: 4 }}>{item.name}: {item.value}</Tag>
|
|
))}
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function VitalSignsPanel({ data }: { data: HealthDataStats | null }) {
|
|
return (
|
|
<Card type="inner" title={<span style={{ fontSize: 14, fontWeight: 600 }}>体征上报率</span>} style={{ borderRadius: 8 }}>
|
|
<Row gutter={[12, 12]}>
|
|
<Col span={8}><Statistic title="总患者" value={data?.vital_signs_report_rate.total_patients ?? 0} valueStyle={{ fontSize: 20 }} /></Col>
|
|
<Col span={8}><Statistic title="本月上报" value={data?.vital_signs_report_rate.reported_patients ?? 0} valueStyle={{ fontSize: 20, color: '#059669' }} /></Col>
|
|
<Col span={8}><Statistic title="上报率" value={data?.vital_signs_report_rate.report_rate ?? 0} suffix="%" precision={1} valueStyle={{ fontSize: 20, color: '#7c3aed' }} /></Col>
|
|
</Row>
|
|
{(data?.vital_signs_report_rate.daily_trend ?? []).length > 0 && (
|
|
<div style={{ marginTop: 12 }}>
|
|
<Text type="secondary" style={{ fontSize: 12 }}>近 7 天: </Text>
|
|
<div style={{ display: 'flex', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
|
|
{data!.vital_signs_report_rate.daily_trend.map((d) => (
|
|
<Tag key={d.date} color={d.rate >= 50 ? 'green' : d.rate >= 20 ? 'orange' : 'red'}>
|
|
{d.date.slice(5)} {d.reported}/{d.total}
|
|
</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const TAB_PANELS: Record<string, React.FC<{ data: HealthDataStats | null }>> = {
|
|
dialysis: DialysisPanel,
|
|
lab: LabPanel,
|
|
appointments: AppointmentsPanel,
|
|
'vital-signs': VitalSignsPanel,
|
|
};
|
|
|
|
export default function HealthDataCenter({ data, tab = 'dialysis' }: HealthDataCenterProps) {
|
|
const Panel = TAB_PANELS[tab];
|
|
|
|
if (!Panel) {
|
|
return <Empty description="未知数据面板" />;
|
|
}
|
|
|
|
return (
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={24}>
|
|
<Panel data={data} />
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|