502 lines
17 KiB
TypeScript
502 lines
17 KiB
TypeScript
|
import { useEffect, useState, useMemo } from 'react';
|
|||
|
|
import {
|
|||
|
|
LineChart,
|
|||
|
|
Line,
|
|||
|
|
BarChart,
|
|||
|
|
Bar,
|
|||
|
|
PieChart,
|
|||
|
|
Pie,
|
|||
|
|
Cell,
|
|||
|
|
XAxis,
|
|||
|
|
YAxis,
|
|||
|
|
CartesianGrid,
|
|||
|
|
Tooltip,
|
|||
|
|
Legend,
|
|||
|
|
ResponsiveContainer,
|
|||
|
|
} from 'recharts';
|
|||
|
|
import {
|
|||
|
|
Activity,
|
|||
|
|
AlertTriangle,
|
|||
|
|
Droplets,
|
|||
|
|
Building2,
|
|||
|
|
TrendingUp,
|
|||
|
|
TrendingDown,
|
|||
|
|
Users,
|
|||
|
|
} from 'lucide-react';
|
|||
|
|
import { caseApi, riskApi, alertApi, envApi } from '@/services/api';
|
|||
|
|
import { StatCard } from '@/components/StatCard';
|
|||
|
|
import { ErrorBanner } from '@/components/ErrorBanner';
|
|||
|
|
import type {
|
|||
|
|
CaseTrendPoint,
|
|||
|
|
DistrictCaseData,
|
|||
|
|
PollutantPoint,
|
|||
|
|
DiagnosisBreakdown,
|
|||
|
|
Alert,
|
|||
|
|
} from '@/types';
|
|||
|
|
|
|||
|
|
// --- Types for fetched data ---
|
|||
|
|
interface KpiData {
|
|||
|
|
totalCases: number;
|
|||
|
|
todayCases: number;
|
|||
|
|
changeRatio: number | null;
|
|||
|
|
activeAlerts: number;
|
|||
|
|
highRiskGrids: number;
|
|||
|
|
avgAQI: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface MergedTrendItem {
|
|||
|
|
date: string;
|
|||
|
|
cases: number;
|
|||
|
|
aqi: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatDateLabel(dateStr: string): string {
|
|||
|
|
const d = new Date(dateStr);
|
|||
|
|
return `${d.getMonth() + 1}/${d.getDate()}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function computeChangeRatio(trend: CaseTrendPoint[]): number | null {
|
|||
|
|
if (trend.length < 8) return null;
|
|||
|
|
const recent7 = trend.slice(-7).reduce((s, p) => s + p.total, 0);
|
|||
|
|
const prior7 = trend.slice(-14, -7).reduce((s, p) => s + p.total, 0);
|
|||
|
|
if (prior7 === 0) return null;
|
|||
|
|
return ((recent7 - prior7) / prior7) * 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function OverviewDashboard() {
|
|||
|
|
const [kpi, setKpi] = useState<KpiData | null>(null);
|
|||
|
|
const [mergedTrend, setMergedTrend] = useState<MergedTrendItem[]>([]);
|
|||
|
|
const [topDistricts, setTopDistricts] = useState<DistrictCaseData[]>([]);
|
|||
|
|
const [topDiagnoses, setTopDiagnoses] = useState<DiagnosisBreakdown[]>([]);
|
|||
|
|
const [alertPie, setAlertPie] = useState<{ name: string; value: number; color: string }[]>([]);
|
|||
|
|
const [isLoading, setIsLoading] = useState(true);
|
|||
|
|
const [errors, setErrors] = useState<string[]>([]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false;
|
|||
|
|
|
|||
|
|
const fetchAll = async () => {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
setErrors([]);
|
|||
|
|
|
|||
|
|
const now = new Date();
|
|||
|
|
const endStr = now.toISOString().split('T')[0];
|
|||
|
|
const start14 = new Date(now);
|
|||
|
|
start14.setDate(start14.getDate() - 14);
|
|||
|
|
const start14Str = start14.toISOString().split('T')[0];
|
|||
|
|
const start30 = new Date(now);
|
|||
|
|
start30.setDate(start30.getDate() - 30);
|
|||
|
|
const start30Str = start30.toISOString().split('T')[0];
|
|||
|
|
|
|||
|
|
// KPI sources — Promise.allSettled to survive individual failures
|
|||
|
|
const [statsR, trend14R, alertsR, riskStatsR, pollutantsR] = await Promise.allSettled([
|
|||
|
|
caseApi.getStats(),
|
|||
|
|
caseApi.getTrend({ start_date: start14Str, end_date: endStr, group_by: 'day' }),
|
|||
|
|
alertApi.getAlerts(),
|
|||
|
|
riskApi.getStats(),
|
|||
|
|
envApi.getPollutants(7),
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
// Trend sources
|
|||
|
|
const [trend30R, districtsR, diagStatsR] = await Promise.allSettled([
|
|||
|
|
caseApi.getTrend({ start_date: start30Str, end_date: endStr, group_by: 'day' }),
|
|||
|
|
caseApi.getDistricts(),
|
|||
|
|
caseApi.getStats(), // reuse for top_diagnoses
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
if (cancelled) return;
|
|||
|
|
|
|||
|
|
const newErrors: string[] = [];
|
|||
|
|
|
|||
|
|
// --- Build KPI ---
|
|||
|
|
let totalCases = 0;
|
|||
|
|
if (statsR.status === 'fulfilled') {
|
|||
|
|
const s = statsR.value;
|
|||
|
|
totalCases = (s.total_outpatient || 0) + (s.total_inpatient || 0);
|
|||
|
|
} else {
|
|||
|
|
newErrors.push('累计病例数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let todayCases = 0;
|
|||
|
|
let changeRatio: number | null = null;
|
|||
|
|
if (trend14R.status === 'fulfilled') {
|
|||
|
|
const trend = trend14R.value.trend || [];
|
|||
|
|
if (trend.length > 0) {
|
|||
|
|
todayCases = trend[trend.length - 1].total;
|
|||
|
|
}
|
|||
|
|
changeRatio = computeChangeRatio(trend);
|
|||
|
|
} else {
|
|||
|
|
newErrors.push('今日病例数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let activeAlerts = 0;
|
|||
|
|
let alertList: Alert[] = [];
|
|||
|
|
if (alertsR.status === 'fulfilled') {
|
|||
|
|
alertList = alertsR.value.alerts || [];
|
|||
|
|
activeAlerts = alertList.length;
|
|||
|
|
} else {
|
|||
|
|
newErrors.push('预警数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let highRiskGrids = 0;
|
|||
|
|
if (riskStatsR.status === 'fulfilled') {
|
|||
|
|
highRiskGrids = riskStatsR.value.high_risk_count || 0;
|
|||
|
|
} else {
|
|||
|
|
newErrors.push('风险网格数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let avgAQI = 0;
|
|||
|
|
let pollutantData: PollutantPoint[] = [];
|
|||
|
|
if (pollutantsR.status === 'fulfilled') {
|
|||
|
|
pollutantData = pollutantsR.value.data || [];
|
|||
|
|
if (pollutantData.length > 0) {
|
|||
|
|
const sumAQI = pollutantData.reduce((s, p) => s + (p.AQI || 0), 0);
|
|||
|
|
avgAQI = Math.round(sumAQI / pollutantData.length);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
newErrors.push('AQI数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setKpi({ totalCases, todayCases, changeRatio, activeAlerts, highRiskGrids, avgAQI });
|
|||
|
|
setErrors(newErrors);
|
|||
|
|
|
|||
|
|
// --- Merge case trend + AQI ---
|
|||
|
|
if (trend30R.status === 'fulfilled') {
|
|||
|
|
const trend30 = trend30R.value.trend || [];
|
|||
|
|
const aqiMap: Record<string, number> = {};
|
|||
|
|
if (pollutantsR.status === 'fulfilled') {
|
|||
|
|
for (const p of pollutantData) {
|
|||
|
|
aqiMap[p.date] = p.AQI || 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// Only use data from the last 30 days for display
|
|||
|
|
const merged: MergedTrendItem[] = trend30.map((t) => ({
|
|||
|
|
date: t.date,
|
|||
|
|
cases: t.total,
|
|||
|
|
aqi: aqiMap[t.date] || 0,
|
|||
|
|
}));
|
|||
|
|
setMergedTrend(merged);
|
|||
|
|
} else if (!newErrors.includes('今日病例数据加载失败')) {
|
|||
|
|
newErrors.push('趋势数据加载失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Top 5 Districts ---
|
|||
|
|
if (districtsR.status === 'fulfilled') {
|
|||
|
|
const districts = districtsR.value.districts || [];
|
|||
|
|
const sorted = [...districts].sort((a, b) => b.total - a.total);
|
|||
|
|
setTopDistricts(sorted.slice(0, 5));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Top 5 Diagnoses ---
|
|||
|
|
if (diagStatsR.status === 'fulfilled') {
|
|||
|
|
const topDiag = diagStatsR.value.top_diagnoses || [];
|
|||
|
|
setTopDiagnoses(
|
|||
|
|
topDiag.slice(0, 5).map((d) => ({
|
|||
|
|
diagnosis: d.diagnosis,
|
|||
|
|
outpatient: d.outpatient,
|
|||
|
|
inpatient: d.inpatient,
|
|||
|
|
total: d.outpatient + d.inpatient,
|
|||
|
|
}))
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- Alert severity donut ---
|
|||
|
|
const p1 = alertList.filter((a) => a.priority === 'P1').length;
|
|||
|
|
const p2 = alertList.filter((a) => a.priority === 'P2').length;
|
|||
|
|
setAlertPie([
|
|||
|
|
{ name: 'P1 紧急', value: p1, color: '#EF4444' },
|
|||
|
|
{ name: 'P2 关注', value: p2, color: '#F59E0B' },
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
setIsLoading(false);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
fetchAll();
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
cancelled = true;
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const changeTrend = useMemo(() => {
|
|||
|
|
if (kpi?.changeRatio == null) return undefined;
|
|||
|
|
if (kpi.changeRatio > 0) {
|
|||
|
|
return { direction: 'up' as const, value: `${kpi.changeRatio.toFixed(1)}%` };
|
|||
|
|
}
|
|||
|
|
if (kpi.changeRatio < 0) {
|
|||
|
|
return { direction: 'down' as const, value: `${Math.abs(kpi.changeRatio).toFixed(1)}%` };
|
|||
|
|
}
|
|||
|
|
return { direction: 'stable' as const, value: '0%' };
|
|||
|
|
}, [kpi?.changeRatio]);
|
|||
|
|
|
|||
|
|
// --- Loading state ---
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center h-64">
|
|||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col h-full overflow-auto">
|
|||
|
|
{/* Error banner */}
|
|||
|
|
{errors.length > 0 && (
|
|||
|
|
<div className="px-6 pt-4">
|
|||
|
|
<ErrorBanner
|
|||
|
|
error={errors.join('；')}
|
|||
|
|
onRetry={() => window.location.reload()}
|
|||
|
|
onDismiss={() => setErrors([])}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="p-6 space-y-6">
|
|||
|
|
{/* Page header */}
|
|||
|
|
<div>
|
|||
|
|
<h1 className="font-display text-[18px] font-semibold mb-1 flex items-center gap-2">
|
|||
|
|
<Activity className="w-5 h-5 text-primary" />
|
|||
|
|
综合概览
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-[12px] text-gray-500">病例、环境与预警关键指标总览</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section 1: KPI Row */}
|
|||
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Users className="w-4 h-4 text-blue-600" />}
|
|||
|
|
label="累计病例总数"
|
|||
|
|
value={kpi?.totalCases?.toLocaleString() ?? '--'}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Activity className="w-4 h-4 text-green-600" />}
|
|||
|
|
label="今日病例"
|
|||
|
|
value={kpi?.todayCases?.toLocaleString() ?? '--'}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={
|
|||
|
|
(changeTrend?.direction === 'up' && <TrendingUp className="w-4 h-4 text-red-500" />) ||
|
|||
|
|
(changeTrend?.direction === 'down' && <TrendingDown className="w-4 h-4 text-green-500" />) || (
|
|||
|
|
<Activity className="w-4 h-4 text-gray-400" />
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
label="7日变化率"
|
|||
|
|
value={changeTrend ? changeTrend.value : '--'}
|
|||
|
|
trend={changeTrend}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<AlertTriangle className="w-4 h-4 text-orange-500" />}
|
|||
|
|
label="活跃预警数"
|
|||
|
|
value={kpi?.activeAlerts?.toLocaleString() ?? '--'}
|
|||
|
|
color={kpi && kpi.activeAlerts > 0 ? '#EF4444' : undefined}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Building2 className="w-4 h-4 text-red-500" />}
|
|||
|
|
label="高风险网格"
|
|||
|
|
value={kpi?.highRiskGrids?.toLocaleString() ?? '--'}
|
|||
|
|
/>
|
|||
|
|
<StatCard
|
|||
|
|
icon={<Droplets className="w-4 h-4 text-cyan-500" />}
|
|||
|
|
label="平均AQI"
|
|||
|
|
value={kpi?.avgAQI?.toLocaleString() ?? '--'}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section 2: Case + AQI Mini Trend */}
|
|||
|
|
<div className="card p-4">
|
|||
|
|
<div className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-4">
|
|||
|
|
近30日病例与AQI趋势
|
|||
|
|
</div>
|
|||
|
|
{mergedTrend.length > 0 ? (
|
|||
|
|
<ResponsiveContainer width="100%" height={200}>
|
|||
|
|
<LineChart data={mergedTrend} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
|
|||
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
|
|||
|
|
<XAxis
|
|||
|
|
dataKey="date"
|
|||
|
|
tickFormatter={formatDateLabel}
|
|||
|
|
tick={{ fontSize: 10, fill: '#64748B' }}
|
|||
|
|
interval="preserveStartEnd"
|
|||
|
|
axisLine={{ stroke: '#E2E8F0' }}
|
|||
|
|
/>
|
|||
|
|
<YAxis
|
|||
|
|
yAxisId="left"
|
|||
|
|
tick={{ fontSize: 10, fill: '#64748B' }}
|
|||
|
|
axisLine={{ stroke: '#E2E8F0' }}
|
|||
|
|
/>
|
|||
|
|
<YAxis
|
|||
|
|
yAxisId="right"
|
|||
|
|
orientation="right"
|
|||
|
|
tick={{ fontSize: 10, fill: '#F59E0B' }}
|
|||
|
|
axisLine={{ stroke: '#E2E8F0' }}
|
|||
|
|
/>
|
|||
|
|
<Tooltip
|
|||
|
|
contentStyle={{
|
|||
|
|
backgroundColor: '#FFFFFF',
|
|||
|
|
border: '1px solid #E2E8F0',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
}}
|
|||
|
|
labelStyle={{ color: '#1E293B', fontWeight: 600 }}
|
|||
|
|
/>
|
|||
|
|
<Legend wrapperStyle={{ fontSize: '11px' }} />
|
|||
|
|
<Line
|
|||
|
|
yAxisId="left"
|
|||
|
|
type="monotone"
|
|||
|
|
dataKey="cases"
|
|||
|
|
name="病例数"
|
|||
|
|
stroke="#3B82F6"
|
|||
|
|
strokeWidth={2}
|
|||
|
|
dot={false}
|
|||
|
|
activeDot={{ r: 3 }}
|
|||
|
|
/>
|
|||
|
|
<Line
|
|||
|
|
yAxisId="right"
|
|||
|
|
type="monotone"
|
|||
|
|
dataKey="aqi"
|
|||
|
|
name="AQI"
|
|||
|
|
stroke="#F59E0B"
|
|||
|
|
strokeWidth={2}
|
|||
|
|
strokeDasharray="5 5"
|
|||
|
|
dot={false}
|
|||
|
|
activeDot={{ r: 3 }}
|
|||
|
|
/>
|
|||
|
|
</LineChart>
|
|||
|
|
</ResponsiveContainer>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section 3 + 4: Top Districts + Top Diagnoses side by side */}
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|||
|
|
{/* Section 3: Top 5 Districts */}
|
|||
|
|
<div className="card p-4">
|
|||
|
|
<div className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-4">
|
|||
|
|
Top 5 区县病例分布
|
|||
|
|
</div>
|
|||
|
|
{topDistricts.length > 0 ? (
|
|||
|
|
<ResponsiveContainer width="100%" height={220}>
|
|||
|
|
<BarChart
|
|||
|
|
data={[...topDistricts].reverse()}
|
|||
|
|
layout="vertical"
|
|||
|
|
margin={{ top: 0, right: 10, left: 30, bottom: 0 }}
|
|||
|
|
>
|
|||
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" horizontal={false} />
|
|||
|
|
<XAxis type="number" tick={{ fontSize: 10, fill: '#64748B' }} />
|
|||
|
|
<YAxis
|
|||
|
|
type="category"
|
|||
|
|
dataKey="district"
|
|||
|
|
tick={{ fontSize: 11, fill: '#374151' }}
|
|||
|
|
width={60}
|
|||
|
|
axisLine={false}
|
|||
|
|
tickLine={false}
|
|||
|
|
/>
|
|||
|
|
<Tooltip
|
|||
|
|
contentStyle={{
|
|||
|
|
backgroundColor: '#FFFFFF',
|
|||
|
|
border: '1px solid #E2E8F0',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
}}
|
|||
|
|
formatter={(value: number) => [value.toLocaleString(), '病例数']}
|
|||
|
|
/>
|
|||
|
|
<Bar dataKey="outpatient" stackId="a" fill="#3B82F6" name="门诊" barSize={20} />
|
|||
|
|
<Bar dataKey="inpatient" stackId="a" fill="#EF4444" name="住院" barSize={20} />
|
|||
|
|
</BarChart>
|
|||
|
|
</ResponsiveContainer>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section 4: Top 5 Diagnoses */}
|
|||
|
|
<div className="card p-4">
|
|||
|
|
<div className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-4">
|
|||
|
|
Top 5 诊断分布
|
|||
|
|
</div>
|
|||
|
|
{topDiagnoses.length > 0 ? (
|
|||
|
|
<ResponsiveContainer width="100%" height={220}>
|
|||
|
|
<BarChart
|
|||
|
|
data={[...topDiagnoses].reverse()}
|
|||
|
|
layout="vertical"
|
|||
|
|
margin={{ top: 0, right: 10, left: 60, bottom: 0 }}
|
|||
|
|
>
|
|||
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" horizontal={false} />
|
|||
|
|
<XAxis type="number" tick={{ fontSize: 10, fill: '#64748B' }} />
|
|||
|
|
<YAxis
|
|||
|
|
type="category"
|
|||
|
|
dataKey="diagnosis"
|
|||
|
|
tick={{ fontSize: 11, fill: '#374151' }}
|
|||
|
|
width={100}
|
|||
|
|
axisLine={false}
|
|||
|
|
tickLine={false}
|
|||
|
|
/>
|
|||
|
|
<Tooltip
|
|||
|
|
contentStyle={{
|
|||
|
|
backgroundColor: '#FFFFFF',
|
|||
|
|
border: '1px solid #E2E8F0',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
}}
|
|||
|
|
formatter={(value: number) => [value.toLocaleString(), '病例数']}
|
|||
|
|
/>
|
|||
|
|
<Bar dataKey="outpatient" stackId="a" fill="#3B82F6" name="门诊" barSize={16} />
|
|||
|
|
<Bar dataKey="inpatient" stackId="a" fill="#EF4444" name="住院" barSize={16} />
|
|||
|
|
</BarChart>
|
|||
|
|
</ResponsiveContainer>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-gray-400 text-sm">暂无数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Section 5: Alert Severity Donut */}
|
|||
|
|
<div className="card p-4">
|
|||
|
|
<div className="text-[11px] font-medium text-gray-500 uppercase tracking-wide mb-4">
|
|||
|
|
预警严重度分布
|
|||
|
|
</div>
|
|||
|
|
{alertPie[0].value > 0 || alertPie[1].value > 0 ? (
|
|||
|
|
<div className="flex items-center justify-center">
|
|||
|
|
<ResponsiveContainer width="100%" height={240}>
|
|||
|
|
<PieChart>
|
|||
|
|
<Pie
|
|||
|
|
data={alertPie}
|
|||
|
|
cx="50%"
|
|||
|
|
cy="50%"
|
|||
|
|
innerRadius={50}
|
|||
|
|
outerRadius={80}
|
|||
|
|
paddingAngle={4}
|
|||
|
|
dataKey="value"
|
|||
|
|
nameKey="name"
|
|||
|
|
>
|
|||
|
|
{alertPie.map((entry, idx) => (
|
|||
|
|
<Cell key={idx} fill={entry.color} />
|
|||
|
|
))}
|
|||
|
|
</Pie>
|
|||
|
|
<Tooltip
|
|||
|
|
contentStyle={{
|
|||
|
|
backgroundColor: '#FFFFFF',
|
|||
|
|
border: '1px solid #E2E8F0',
|
|||
|
|
borderRadius: '8px',
|
|||
|
|
fontSize: '12px',
|
|||
|
|
}}
|
|||
|
|
formatter={(value: number, name: string) => [value, name]}
|
|||
|
|
/>
|
|||
|
|
<Legend
|
|||
|
|
wrapperStyle={{ fontSize: '12px' }}
|
|||
|
|
formatter={(value: string) => (
|
|||
|
|
<span className="text-gray-700">{value}</span>
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
</PieChart>
|
|||
|
|
</ResponsiveContainer>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="text-center py-8 text-gray-400 text-sm">暂无预警数据</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|