48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
|
import { memo } from 'react';
|
|||
|
|
import { Users, CalendarDays, Wallet, HeartPulse, Siren } from 'lucide-react';
|
|||
|
|
import { StatCard } from '@/components/StatCard';
|
|||
|
|
import { TESTIDS } from '@/utils/testids';
|
|||
|
|
import type { InpatientClinicalResponse } from '@/services/api';
|
|||
|
|
|
|||
|
|
interface ClinicalKpiRowProps {
|
|||
|
|
kpis: InpatientClinicalResponse['kpis'];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 住院临床 5 项核心指标。375px 下 2 列，sm 起 5 列。 */
|
|||
|
|
export const ClinicalKpiRow = memo(function ClinicalKpiRow({ kpis }: ClinicalKpiRowProps) {
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
data-testid={TESTIDS.clinicalKpis}
|
|||
|
|
className="grid grid-cols-2 sm:grid-cols-5 gap-3"
|
|||
|
|
>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Users className="w-4 h-4 text-primary" />}
|
|||
|
|
label="住院总人次"
|
|||
|
|
value={kpis.total_admissions.toLocaleString()}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<CalendarDays className="w-4 h-4 text-primary" />}
|
|||
|
|
label="中位住院日"
|
|||
|
|
value={`${kpis.median_los_days} 天`}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Wallet className="w-4 h-4 text-primary" />}
|
|||
|
|
label="人均费用"
|
|||
|
|
value={`¥${Math.round(kpis.mean_cost).toLocaleString()}`}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<HeartPulse className="w-4 h-4 text-success" />}
|
|||
|
|
label="治愈好转率"
|
|||
|
|
value={`${(kpis.cure_rate * 100).toFixed(1)}%`}
|
|||
|
|
color="#16A34A"
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Siren className="w-4 h-4 text-warning" />}
|
|||
|
|
label="急诊入院占比"
|
|||
|
|
value={`${(kpis.emergency_admit_ratio * 100).toFixed(1)}%`}
|
|||
|
|
color="#D97706"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
});
|