+
中高风险 (0.6-0.8)
+
{riskStats.mediumHigh}
+
+
0 ? (riskStats.mediumHigh / total) * 100 : 0}%` }} />
+
+
+
+
中风险 (0.4-0.6)
+
{riskStats.medium}
+
+
0 ? (riskStats.medium / total) * 100 : 0}%` }} />
+
+
+
+
平均风险
+
{(riskStats.avgRisk * 100).toFixed(1)}%
+
+ 高风险区域: {riskStats.topDistricts.slice(0, 2).map(([d, n]) => `${d}(${n})`).join(', ')}
+
+
+
+ );
+});
+
+interface AlertCardProps {
+ alert: ExtendedAlert;
+ isSelected?: boolean;
+ alertId: string;
+ onCardClick: (id: string) => void;
+}
+
+const AlertCard = React.memo(function AlertCard({ alert, isSelected, alertId, onCardClick }: AlertCardProps) {
+ const isP1 = alert.priority === 'P1';
+ const riskPercent = Math.round(alert.risk_value * 100);
+
+ const handleClick = useCallback(() => {
+ onCardClick(alertId);
+ }, [alertId, onCardClick]);
+
+ return (
+
+
+
+
+
+
+ {alert.priority}
+
+
+ {HORIZON_LABELS[alert.forecast_horizon] || '未知'}
+
+
+
+ {riskPercent}%
+
+
+
+
+
+
+
+ {alert.region} - {alert.street}
+
+
+ 网格：{alert.grid_id}
+
+
+
+
+ {alert.reason}
+
+
+
+ 预测时间：{alert.forecast_time}
+ 生成：{alert.timestamp}
+
+
+
+ );
+});
+
+interface AlertsListProps {
+ filteredAlerts: ExtendedAlert[];
+ selectedAlert: string | null;
+ onCardClick: (id: string) => void;
+}
+
+export const AlertsList = React.memo(function AlertsList({ filteredAlerts, selectedAlert, onCardClick }: AlertsListProps) {
+ return (
+
+ {filteredAlerts.slice(0, 50).map((alert) => (
+
+ ))}
+ {filteredAlerts.length > 50 && (
+
+ 还有 {filteredAlerts.length - 50} 条预警未显示
+
+ )}
+
+ );
+});
diff --git a/frontend/src/components/alerts/AlertsListTab.tsx b/frontend/src/components/alerts/AlertsListTab.tsx
new file mode 100644
index 0000000..ce502e5
--- /dev/null
+++ b/frontend/src/components/alerts/AlertsListTab.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { LoadingState } from '@/components/ui';
+import type { CellInfo } from '@/components/AlertMap';
+import { AlertsToolbar } from './AlertsToolbar';
+import { AlertsFilterBar } from './AlertsFilterBar';
+import { AlertsMapPanel } from './AlertsMapPanel';
+import { AlertsList, RiskDistributionSummary } from './AlertsList';
+import type { ExtendedAlert, RiskStats } from './types';
+
+interface AlertsListTabProps {
+ // toolbar
+ forecastDay: 1 | 3 | 7;
+ onForecastDayChange: (day: 1 | 3 | 7) => void;
+ isFullscreen: boolean;
+ onToggleFullscreen: () => void;
+ onExportCsv: () => void;
+ onExportJson: () => void;
+ // filter bar
+ selectedHorizon: number | 'all';
+ onHorizonChange: (horizon: number | 'all') => void;
+ selectedPriority: 'all' | 'P1' | 'P2';
+ onPriorityChange: (priority: 'all' | 'P1' | 'P2') => void;
+ riskRange: [number, number];
+ onRiskRangeChange: (range: [number, number]) => void;
+ showMap: boolean;
+ onToggleMap: () => void;
+ showAlertMarkers: boolean;
+ onToggleAlertMarkers: () => void;
+ showGrid: boolean;
+ onToggleGrid: () => void;
+ sortBy: 'risk' | 'time';
+ onSortByChange: (sortBy: 'risk' | 'time') => void;
+ // data
+ riskStats: RiskStats;
+ filteredAlerts: ExtendedAlert[];
+ isLoading: boolean;
+ selectedGridId: string | null;
+ selectedAlert: string | null;
+ onGridClick: (gridId: string) => void;
+ onCellInfo: (info: CellInfo) => void;
+ onCardClick: (id: string) => void;
+ // privacy/role results (computed by orchestrator)
+ effectiveShowAlertMarkers: boolean;
+ isCluster: boolean;
+ isOfficial: boolean;
+}
+
+export const AlertsListTab = React.memo(function AlertsListTab(props: AlertsListTabProps) {
+ const {
+ filteredAlerts,
+ isLoading,
+ isCluster,
+ isFullscreen,
+ showMap,
+ riskStats,
+ } = props;
+
+ return (
+ <>
+
+
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : filteredAlerts.length === 0 && !isCluster ? (
+ // 聚类（医生）视角即使没有个体预警，也要展示聚合密度栅格——故不走空状态分支。
+
+ ) : (
+
+ {showMap && (
+
+ )}
+ {!isFullscreen && (
+
+ )}
+
+ )}
+
+ );
+});
diff --git a/frontend/src/components/alerts/AlertsMapPanel.tsx b/frontend/src/components/alerts/AlertsMapPanel.tsx
new file mode 100644
index 0000000..8fff684
--- /dev/null
+++ b/frontend/src/components/alerts/AlertsMapPanel.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { TESTIDS } from '@/utils/testids';
+import { AlertMap } from '@/components/AlertMap';
+import type { CellInfo } from '@/components/AlertMap';
+import type { ExtendedAlert } from './types';
+
+interface AlertsMapPanelProps {
+ selectedGridId: string | null;
+ onGridClick: (gridId: string) => void;
+ onCellInfo: (info: CellInfo) => void;
+ forecastDay: 1 | 3 | 7;
+ // effectiveShowAlertMarkers：唯一真值，cluster 模式恒为 false（隐私不变量），由 orchestrator 计算。
+ effectiveShowAlertMarkers: boolean;
+ showGrid: boolean;
+ filteredAlerts: ExtendedAlert[];
+ isFullscreen: boolean;
+ isCluster: boolean;
+ isOfficial: boolean;
+}
+
+export const AlertsMapPanel = React.memo(function AlertsMapPanel({
+ selectedGridId,
+ onGridClick,
+ onCellInfo,
+ forecastDay,
+ effectiveShowAlertMarkers,
+ showGrid,
+ filteredAlerts,
+ isFullscreen,
+ isCluster,
+ isOfficial,
+}: AlertsMapPanelProps) {
+ return (
+
+
+ {/*
+ 隐私不变量的「数据级」可断言点：每渲染一个个体病例点标记，就在此输出一个
+ data-testid="patient-point" 的隐藏标记。Leaflet 的 CircleMarker 是 canvas/SVG
+ 内部对象、不带 testid，无法被 e2e 直接计数；这里把「实际会显示的个体点集合」
+ 镜像成 DOM，使测试可断言医生/聚类视角下 patient-point 计数恒为 0，
+ 而无需窥探 Leaflet 内部。effectiveShowAlertMarkers 在 cluster 模式恒为 false，
+ 故该集合为空。
+ */}
+ {effectiveShowAlertMarkers &&
+ filteredAlerts.map((a) => (
+
+ ))}
+
+ );
+});
diff --git a/frontend/src/components/alerts/AlertsRiskPanel.tsx b/frontend/src/components/alerts/AlertsRiskPanel.tsx
new file mode 100644
index 0000000..99d2128
--- /dev/null
+++ b/frontend/src/components/alerts/AlertsRiskPanel.tsx
@@ -0,0 +1,130 @@
+import React, { useMemo } from 'react';
+import { LoadingState } from '@/components/ui';
+import { StatCard } from '@/components/StatCard';
+import { StatisticalCharts } from '@/components/StatisticalCharts';
+import { PieChart, Pie, Cell, Tooltip as RechartsTooltip, Legend, ResponsiveContainer } from 'recharts';
+import type { RiskStats } from './types';
+
+interface AlertsRiskPanelProps {
+ riskStats: RiskStats;
+ trendData: Array<{ date: string; cases: number; risk: number }>;
+ trendLoading: boolean;
+ trendError: string | null;
+}
+
+export const AlertsRiskPanel = React.memo(function AlertsRiskPanel({
+ riskStats,
+ trendData,
+ trendLoading,
+ trendError,
+}: AlertsRiskPanelProps) {
+ // Severity donut data (P1/P2)
+ const alertPie = useMemo(() => ([
+ { name: 'P1 (紧急)', value: riskStats.p1, color: '#ef4444' },
+ { name: 'P2 (关注)', value: riskStats.p2, color: '#f59e0b' },
+ ]), [riskStats.p1, riskStats.p2]);
+
+ const topDistrictMax = useMemo(
+ () => riskStats.topDistricts.reduce((m, [, n]) => Math.max(m, n), 0),
+ [riskStats.topDistricts],
+ );
+
+ return (
+
+ {/* Risk distribution as StatCards */}
+
+
+
+
+
+
+
+ {/* Risk trend chart (real data from /api/analysis/trend) */}
+ {trendLoading ? (
+
+ ) : trendError ? (
+
{trendError}
+ ) : trendData.length === 0 ? (
+
暂无风险趋势数据
+ ) : (
+
+ )}
+
+
+ {/* Top high-risk districts bar */}
+
+
+ 高风险区域 Top 5
+
+ {riskStats.topDistricts.length > 0 ? (
+
+ {riskStats.topDistricts.map(([district, count]) => (
+
+
+ {district}
+ {count} 条
+
+
+
0 ? (count / topDistrictMax) * 100 : 0}%` }}
+ />
+
+
+ ))}
+
+ ) : (
+
暂无区域数据
+ )}
+
+
+ {/* Alert severity donut (P1/P2) */}
+
+
+ 预警严重度分布
+
+ {riskStats.p1 > 0 || riskStats.p2 > 0 ? (
+
+
+
+ {alertPie.map((entry) => (
+ |
+ ))}
+
+ [value, name]}
+ />
+
+
+ ) : (
+
暂无预警数据
+ )}
+
+
+
+ );
+});
diff --git a/frontend/src/components/alerts/AlertsToolbar.tsx b/frontend/src/components/alerts/AlertsToolbar.tsx
new file mode 100644
index 0000000..3a4b214
--- /dev/null
+++ b/frontend/src/components/alerts/AlertsToolbar.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+interface AlertsToolbarProps {
+ forecastDay: 1 | 3 | 7;
+ onForecastDayChange: (day: 1 | 3 | 7) => void;
+ isFullscreen: boolean;
+ onToggleFullscreen: () => void;
+ onExportCsv: () => void;
+ onExportJson: () => void;
+}
+
+// Toolbar Row 1: 网格预测时效 + 全屏 + 导出.
+export const AlertsToolbar = React.memo(function AlertsToolbar({
+ forecastDay,
+ onForecastDayChange,
+ isFullscreen,
+ onToggleFullscreen,
+ onExportCsv,
+ onExportJson,
+}: AlertsToolbarProps) {
+ return (
+
+
+
+
网格预测：
+
+ {([1, 3, 7] as const).map((day) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/frontend/src/components/alerts/types.ts b/frontend/src/components/alerts/types.ts
new file mode 100644
index 0000000..6ac271d
--- /dev/null
+++ b/frontend/src/components/alerts/types.ts
@@ -0,0 +1,32 @@
+// Shared types for the alerts dashboard subcomponents.
+export interface ExtendedAlert {
+ alert_id: string;
+ grid_id: string;
+ region: string;
+ street: string;
+ latitude: number;
+ longitude: number;
+ risk_value: number;
+ risk_level: 'high' | 'medium_high' | 'medium' | 'medium_low' | 'low';
+ priority: 'P1' | 'P2';
+ forecast_horizon: number;
+ forecast_time: string;
+ reason: string;
+ timestamp: string;
+}
+
+export const HORIZON_LABELS: Record
= {
+ 1: '1 天后',
+ 3: '3 天后',
+ 7: '7 天后',
+};
+
+export interface RiskStats {
+ p1: number;
+ p2: number;
+ high: number;
+ mediumHigh: number;
+ medium: number;
+ avgRisk: number;
+ topDistricts: [string, number][];
+}
diff --git a/frontend/src/components/alerts/useAlertsData.ts b/frontend/src/components/alerts/useAlertsData.ts
new file mode 100644
index 0000000..47a5842
--- /dev/null
+++ b/frontend/src/components/alerts/useAlertsData.ts
@@ -0,0 +1,163 @@
+import { useState, useMemo, useEffect, useCallback } from 'react';
+import { useRiskStore } from '@/stores';
+import { analysisApi } from '@/services/api';
+import type { ExtendedAlert, RiskStats } from './types';
+
+interface UseAlertsDataParams {
+ selectedHorizon: number | 'all';
+ selectedPriority: 'all' | 'P1' | 'P2';
+ sortBy: 'risk' | 'time';
+ debouncedRiskRange: [number, number];
+ activeTab: 'list' | 'stats';
+}
+
+interface TrendPoint { date: string; cases: number; risk: number }
+
+// 预警仪表盘的数据层：派生 extendedAlerts/filteredAlerts/riskStats、按需拉取风险趋势、
+// 以及 CSV/JSON 导出辅助。角色/隐私计算保留在 orchestrator，不在此处。
+export function useAlertsData({
+ selectedHorizon,
+ selectedPriority,
+ sortBy,
+ debouncedRiskRange,
+ activeTab,
+}: UseAlertsDataParams) {
+ const alerts = useRiskStore((s) => s.alerts);
+
+ // Risk-trend data for the 风险统计 tab, fetched on demand
+ const [trendData, setTrendData] = useState([]);
+ const [trendLoading, setTrendLoading] = useState(false);
+ const [trendError, setTrendError] = useState(null);
+ const [trendLoaded, setTrendLoaded] = useState(false);
+
+ // Fetch real risk-trend data when the 风险统计 tab is first opened
+ useEffect(() => {
+ if (activeTab !== 'stats' || trendLoaded) return;
+ let cancelled = false;
+ setTrendLoading(true);
+ setTrendError(null);
+ analysisApi
+ .getTrend(14)
+ .then((res: { dates?: string[]; values?: number[] }) => {
+ if (cancelled) return;
+ const dates = res?.dates ?? [];
+ const values = res?.values ?? [];
+ setTrendData(dates.map((date, i) => ({ date, cases: 0, risk: values[i] ?? 0 })));
+ setTrendLoaded(true);
+ })
+ .catch((err: unknown) => {
+ if (cancelled) return;
+ setTrendError(err instanceof Error ? err.message : '加载风险趋势失败');
+ })
+ .finally(() => {
+ if (!cancelled) setTrendLoading(false);
+ });
+ return () => { cancelled = true; };
+ }, [activeTab, trendLoaded]);
+
+ const extendedAlerts: ExtendedAlert[] = useMemo(() => {
+ const now = Date.now();
+ return (alerts || []).map((alert) => {
+ const forecastDate = new Date(alert.forecast_time);
+ const diffDays = Math.ceil((forecastDate.getTime() - now) / (1000 * 60 * 60 * 24));
+ const horizon = diffDays <= 1 ? 1 : diffDays <= 3 ? 3 : 7;
+
+ return {
+ ...alert,
+ latitude: alert.latitude || 0,
+ longitude: alert.longitude || 0,
+ forecast_horizon: horizon,
+ };
+ });
+ }, [alerts]);
+
+ const filteredAlerts = useMemo(() => {
+ return extendedAlerts
+ .filter((alert) => {
+ const horizonMatch = selectedHorizon === 'all' || alert.forecast_horizon === selectedHorizon;
+ const priorityMatch = selectedPriority === 'all' || alert.priority === selectedPriority;
+ const riskMatch = alert.risk_value >= debouncedRiskRange[0] && alert.risk_value <= debouncedRiskRange[1];
+ return horizonMatch && priorityMatch && riskMatch;
+ })
+ .sort((a, b) => {
+ if (sortBy === 'risk') {
+ return b.risk_value - a.risk_value;
+ }
+ return new Date(b.forecast_time).getTime() - new Date(a.forecast_time).getTime();
+ });
+ }, [extendedAlerts, selectedHorizon, selectedPriority, sortBy, debouncedRiskRange]);
+
+ // Risk distribution stats (includes p1/p2 counts) — single pass over each array
+ const riskStats: RiskStats = useMemo(() => {
+ // p1/p2 reflect the full (unfiltered) alert set
+ let p1 = 0;
+ let p2 = 0;
+ for (const a of extendedAlerts) {
+ if (a.priority === 'P1') p1++;
+ else if (a.priority === 'P2') p2++;
+ }
+
+ // Single pass over filteredAlerts: counters + sum + district map
+ let high = 0;
+ let mediumHigh = 0;
+ let medium = 0;
+ let sum = 0;
+ const byDistrict: Record = {};
+ for (const a of filteredAlerts) {
+ const v = a.risk_value;
+ if (v >= 0.8) high++;
+ else if (v >= 0.6) mediumHigh++;
+ else if (v >= 0.4) medium++;
+ sum += v;
+ const d = a.region || '未知';
+ byDistrict[d] = (byDistrict[d] || 0) + 1;
+ }
+ const avgRisk = filteredAlerts.length > 0 ? sum / filteredAlerts.length : 0;
+
+ const topDistricts = Object.entries(byDistrict)
+ .sort((a, b) => b[1] - a[1])
+ .slice(0, 5);
+
+ return { p1, p2, high, mediumHigh, medium, avgRisk, topDistricts };
+ }, [extendedAlerts, filteredAlerts]);
+
+ // Export utilities
+ const exportToCsv = useCallback(() => {
+ const headers = ['alert_id', 'grid_id', 'region', 'street', 'latitude', 'longitude', 'risk_value', 'priority', 'forecast_horizon', 'reason', 'timestamp'];
+ const rows = filteredAlerts.map(a => [
+ a.alert_id, a.grid_id, a.region, a.street,
+ a.latitude, a.longitude, a.risk_value, a.priority,
+ a.forecast_horizon, `"${a.reason}"`, a.timestamp,
+ ]);
+ const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
+ const blob = new Blob(['' + csv], { type: 'text/csv;charset=utf-8;' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `alerts_${new Date().toISOString().split('T')[0]}.csv`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }, [filteredAlerts]);
+
+ const exportToJson = useCallback(() => {
+ const json = JSON.stringify(filteredAlerts, null, 2);
+ const blob = new Blob([json], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `alerts_${new Date().toISOString().split('T')[0]}.json`;
+ a.click();
+ URL.revokeObjectURL(url);
+ }, [filteredAlerts]);
+
+ return {
+ extendedAlerts,
+ filteredAlerts,
+ riskStats,
+ trendData,
+ trendLoading,
+ trendError,
+ exportToCsv,
+ exportToJson,
+ };
+}
diff --git a/frontend/src/components/monitoring/CaseStatsTab.tsx b/frontend/src/components/monitoring/CaseStatsTab.tsx
new file mode 100644
index 0000000..9cdb9ce
--- /dev/null
+++ b/frontend/src/components/monitoring/CaseStatsTab.tsx
@@ -0,0 +1,145 @@
+import { memo } from 'react';
+import {
+ LineChart,
+ Line,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from 'recharts';
+import { ErrorBanner } from '@/components/ErrorBanner';
+import { CalendarHeatmap } from '@/components/CalendarHeatmap';
+import type { TopDiagnosis } from './types';
+
+function formatDateLabel(dateStr: string): string {
+ const d = new Date(dateStr);
+ return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+interface CaseStatsTabProps {
+ loading: boolean;
+ loaded: boolean;
+ error: string | null;
+ currentDate: string;
+ topDiagnoses: TopDiagnosis[];
+ caseTrend: Array<{ date: string; cases: number; aqi: number }>;
+ heatmapData: Array<{ date: string; value: number }>;
+ heatmapYear: number | null;
+ onRetry: () => void;
+ onDismissError: () => void;
+}
+
+// 病例统计 tab —— 诊断分布 / 病例与AQI趋势 / 日历热力图。纯展示，数据由父级按需加载。
+export const CaseStatsTab = memo(function CaseStatsTab({
+ loading,
+ loaded,
+ error,
+ currentDate,
+ topDiagnoses,
+ caseTrend,
+ heatmapData,
+ heatmapYear,
+ onRetry,
+ onDismissError,
+}: CaseStatsTabProps) {
+ if (loading && !loaded) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {error && (
+
+ )}
+
+ {/* Top 5 诊断分布 */}
+
+
Top 5 诊断分布
+ {topDiagnoses.length > 0 ? (
+
+
+
+
+
+ [value.toLocaleString(), '病例数']}
+ />
+
+
+
+
+
+ ) : (
+
暂无数据
+ )}
+
+
+ {/* 近30日病例与AQI趋势 (driven off Monitoring timeline currentDate) */}
+
+
病例与AQI趋势
+
截至 {currentDate} 的近30日窗口
+ {caseTrend.length > 0 ? (
+
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
暂无数据
+ )}
+
+
+ {/* 日历热力图 (year derived from data) */}
+
+
+ {heatmapYear ? `${heatmapYear}年 ` : ''}每日病例日历
+
+ {heatmapYear && heatmapData.length > 0 ? (
+
+ ) : (
+
暂无数据
+ )}
+
+
+ {error && (
+
+ )}
+
+
+
区域指标热力表
+
点击列标题排序
+ {rows.length > 0 ? (
+
+ ) : (
+
暂无数据
+ )}
+
+
+
}
+ label="当日病例"
+ value={stats.todayCases !== null ? stats.todayCases.toLocaleString() : '--'}
+ />
+
}
+ label="7日均值"
+ value={stats.avg7d.toLocaleString()}
+ sparkline={sparkline7d.length >= 2 ? { data: sparkline7d, color: '#6366F1' } : undefined}
+ />
+
:
+ stats.trend === 'down' ?
:
+
+ }
+ label="趋势"
+ value={stats.trend === 'up' ? '上升' : stats.trend === 'down' ? '下降' : '平稳'}
+ trend={{
+ direction: stats.trend === 'up' ? 'up' : stats.trend === 'down' ? 'down' : 'stable',
+ value: stats.trend === 'up' ? '上升' : stats.trend === 'down' ? '下降' : '平稳',
+ }}
+ />
+
}
+ label="峰值日"
+ value={`${stats.maxDay.cases.toLocaleString()} (${stats.maxDay.date.slice(5)})`}
+ />
+
}
+ label="标准差"
+ value={stats.stdDev.toLocaleString()}
+ />
+
}
+ label="门诊 / 住院"
+ value={`${stats.totalOutpatient.toLocaleString()} / ${stats.totalInpatient.toLocaleString()}`}
+ />
+
+ {/* Case Location Map */}
+
+
病例分布地图
+
+
+
+ {/* Statistical Charts */}
+
+
+ {/* District breakdown — 区域 roll-up（URL 粒度真相来源） */}
+
+
+
区县病例分布
+
+ testid={TESTIDS.granularityControl}
+ size="sm"
+ options={[
+ { value: 'city', label: '全市' },
+ { value: 'district', label: '区域' },
+ { value: 'street', label: '街道' },
+ ]}
+ value={granularity}
+ onChange={onGranularityChange}
+ />
+
+
+
+
+
+
+
handleDistrictClick(d.district)}
+ >
+
{d.district}
+
+
+ {d.total.toLocaleString()}
+
+
+
{error && (
)}
- {/* Header */}
-
-
-
风险预警
-
- 100m网格风险预测 · 多时间尺度预警 · 病例-气象关联分析
-
-
-
- 共 {filteredAlerts.length} 条预警
- P1: {riskStats.p1}
- P2: {riskStats.p2}
-
-
-
- {/* Tab strip — in-page, no router */}
-
- {([
- { key: 'list', label: '预警列表' },
- { key: 'stats', label: '风险统计' },
- ] as const).map((tab) => (
-
- ))}
-
+
{activeTab === 'list' && (
- <>
- {/* Toolbar Row 1: Forecast + Fullscreen + Export */}
-
-
-
-
网格预测：
-
- {([1, 3, 7] as const).map((day) => (
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Toolbar Row 2: Filters */}
-
-
-
-
预测时效：
-
- {(['all', 1, 3, 7] as const).map((horizon) => (
-
- ))}
-
-
-
-
-
-
-
优先级：
-
- {(['all', 'P1', 'P2'] as const).map((priority) => (
-
- ))}
-
-
-
-
-
-
-
-
-
-
-
- {/* 预警标记切换：聚类（医生）视角隐藏整块——个体病例点不可开启（隐私不变量）。 */}
- {!isCluster && (
-
- )}
- {/* 网格切换：官员视角隐藏整块（100m 网格对其无意义/太超前）。 */}
- {!isOfficial && (
-
-
-
- )}
- {/* 聚类（医生）视角：病种过滤是其核心工具，挂载于此。 */}
- {isCluster &&
}
-
-
-
-
-
-
排序：
-
-
-
-
-
-
-
-
- {/* Risk distribution summary */}
-
-
-
高风险 (≥0.8)
-
{riskStats.high}
-
-
0 ? (riskStats.high / filteredAlerts.length) * 100 : 0}%` }} />
-
-
-
-
中高风险 (0.6-0.8)
-
{riskStats.mediumHigh}
-
-
0 ? (riskStats.mediumHigh / filteredAlerts.length) * 100 : 0}%` }} />
-
-
-
-
中风险 (0.4-0.6)
-
{riskStats.medium}
-
-
0 ? (riskStats.medium / filteredAlerts.length) * 100 : 0}%` }} />
-
-
-
-
平均风险
-
{(riskStats.avgRisk * 100).toFixed(1)}%
-
- 高风险区域: {riskStats.topDistricts.slice(0, 2).map(([d, n]) => `${d}(${n})`).join(', ')}
-
-
-
-
- {isLoading ? (
-
-
-
- ) : filteredAlerts.length === 0 && !isCluster ? (
- // 聚类（医生）视角即使没有个体预警，也要展示聚合密度栅格——故不走空状态分支。
-
- ) : (
-
- {showMap && (
-
-
- {/*
- 隐私不变量的「数据级」可断言点：每渲染一个个体病例点标记，就在此输出一个
- data-testid="patient-point" 的隐藏标记。Leaflet 的 CircleMarker 是 canvas/SVG
- 内部对象、不带 testid，无法被 e2e 直接计数；这里把「实际会显示的个体点集合」
- 镜像成 DOM，使测试可断言医生/聚类视角下 patient-point 计数恒为 0，
- 而无需窥探 Leaflet 内部。effectiveShowAlertMarkers 在 cluster 模式恒为 false，
- 故该集合为空。
- */}
- {effectiveShowAlertMarkers &&
- filteredAlerts.map((a) => (
-
- ))}
-
- )}
- {!isFullscreen && (
-
- {filteredAlerts.slice(0, 50).map((alert) => (
-
- ))}
- {filteredAlerts.length > 50 && (
-
- 还有 {filteredAlerts.length - 50} 条预警未显示
-
- )}
-
- )}
-
- )}
-
+
setIsFullscreen(!isFullscreen)}
+ onExportCsv={exportToCsv}
+ onExportJson={exportToJson}
+ selectedHorizon={selectedHorizon}
+ onHorizonChange={setSelectedHorizon}
+ selectedPriority={selectedPriority}
+ onPriorityChange={setSelectedPriority}
+ riskRange={riskRange}
+ onRiskRangeChange={setRiskRange}
+ showMap={showMap}
+ onToggleMap={() => setShowMap(!showMap)}
+ showAlertMarkers={showAlertMarkers}
+ onToggleAlertMarkers={() => setShowAlertMarkers(!showAlertMarkers)}
+ showGrid={showGrid}
+ onToggleGrid={() => setShowGrid(!showGrid)}
+ sortBy={sortBy}
+ onSortByChange={setSortBy}
+ riskStats={riskStats}
+ filteredAlerts={filteredAlerts}
+ isLoading={isLoading}
+ selectedGridId={selectedGridId}
+ selectedAlert={selectedAlert}
+ onGridClick={handleGridClick}
+ onCellInfo={handleCellInfo}
+ onCardClick={handleAlertCardClick}
+ effectiveShowAlertMarkers={effectiveShowAlertMarkers}
+ isCluster={isCluster}
+ isOfficial={isOfficial}
+ />
)}
{activeTab === 'stats' && (
-
- {/* Risk distribution as StatCards */}
-
-
-
-
-
-
-
- {/* Risk trend chart (real data from /api/analysis/trend) */}
- {trendLoading ? (
-
- ) : trendError ? (
-
{trendError}
- ) : trendData.length === 0 ? (
-
暂无风险趋势数据
- ) : (
-
- )}
-
-
- {/* Top high-risk districts bar */}
-
-
- 高风险区域 Top 5
-
- {riskStats.topDistricts.length > 0 ? (
-
- {riskStats.topDistricts.map(([district, count]) => (
-
-
- {district}
- {count} 条
-
-
-
0 ? (count / topDistrictMax) * 100 : 0}%` }}
- />
-
-
- ))}
-
- ) : (
-
暂无区域数据
- )}
-
-
- {/* Alert severity donut (P1/P2) */}
-
-
- 预警严重度分布
-
- {riskStats.p1 > 0 || riskStats.p2 > 0 ? (
-
-
-
- {alertPie.map((entry) => (
- |
- ))}
-
- [value, name]}
- />
-
-
- ) : (
-
暂无预警数据
- )}
-
-
-
+
)}
{/* Cell info panel - shown when clicking grid cell without alert */}
{cellInfo && !selectedAlertData && (
-
-
- 网格详情 (100m)
-
-
-
-
- 网格
- {cellInfo.grid_id}
-
-
- 坐标
- {cellInfo.lat.toFixed(4)}, {cellInfo.lon.toFixed(4)}
-
-
- 当前风险
- = 0.8 ? 'text-danger' : cellInfo.risk >= 0.6 ? 'text-warning' : cellInfo.risk >= 0.4 ? 'text-primary' : 'text-success'}`}>
- {(cellInfo.risk * 100).toFixed(1)}%
-
-
-
-
-
1天
-
{(cellInfo.risk_1d * 100).toFixed(0)}%
-
-
-
3天
-
{(cellInfo.risk_3d * 100).toFixed(0)}%
-
-
-
7天
-
{(cellInfo.risk_7d * 100).toFixed(0)}%
-
-
- {cellInfo.nearestAlertId && (
-
- 最近预警距离
- {(cellInfo.nearestAlertDist * 111).toFixed(1)} km
-
- )}
- {!cellInfo.nearestAlertId && (
-
- 该区域无预警
-
- )}
-
-
+
)}
{/* Alert detail modal */}
{selectedAlertData && (
-
-
e.stopPropagation()}>
-
预警详情
-
-
- 优先级
-
- {selectedAlertData.priority}
-
-
-
- 风险值
- {Math.round(selectedAlertData.risk_value * 100)}%
-
-
- 预测时效
- {HORIZON_LABELS[selectedAlertData.forecast_horizon]}
-
-
- 位置
- {selectedAlertData.region}
-
-
-
预警原因
-
{selectedAlertData.reason}
-
-
-
-
-
+
)}
-
-
-
-
-
- {alert.priority}
-
-
- {HORIZON_LABELS[alert.forecast_horizon] || '未知'}
-
-
-
- {riskPercent}%
-
-
-
-
-
-
-
- {alert.region} - {alert.street}
-
-
- 网格：{alert.grid_id}
-
-
-
-
- {alert.reason}
-
-
-
- 预测时间：{alert.forecast_time}
- 生成：{alert.timestamp}
-
-
-
)}
+
0 ? uniqueMonths : 12}, 1fr)`,
}}
@@ -198,6 +199,7 @@ function SeasonalityHeatmap({ data }: { data: DiseaseSeasonalityPoint[] }) {
))}
+
);
}
diff --git a/frontend/src/pages/DistrictComparison.tsx b/frontend/src/pages/DistrictComparison.tsx
index a357c60..69b2606 100644
--- a/frontend/src/pages/DistrictComparison.tsx
+++ b/frontend/src/pages/DistrictComparison.tsx
@@ -128,7 +128,7 @@ export function DistrictComparison() {
};
return (
-
+
{error && (
-
+
{sortedData.map((district, index) => (
diff --git a/frontend/src/pages/Insights.tsx b/frontend/src/pages/Insights.tsx
index 3abdcdf..7bddc90 100644
--- a/frontend/src/pages/Insights.tsx
+++ b/frontend/src/pages/Insights.tsx
@@ -187,7 +187,7 @@ export function Insights() {
: [];
return (
-
+
{error && (
+
{stats.map((stat) => (
@@ -232,7 +232,7 @@ export function Insights() {
)}
{insights && (
-
+
{(insights.cards || []).map((card) => {
const config = TYPE_CONFIG[card.type];
const Icon = config.icon;
diff --git a/frontend/src/pages/MonitoringDashboard.tsx b/frontend/src/pages/MonitoringDashboard.tsx
index 662c78b..9c655d0 100644
--- a/frontend/src/pages/MonitoringDashboard.tsx
+++ b/frontend/src/pages/MonitoringDashboard.tsx
@@ -1,57 +1,21 @@
-import { useEffect, useState, useMemo, useRef, useCallback, memo } from 'react';
+import { useEffect, useState, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';
-import {
- LineChart,
- Line,
- BarChart,
- Bar,
- XAxis,
- YAxis,
- CartesianGrid,
- Tooltip,
- Legend,
- ResponsiveContainer,
-} from 'recharts';
-import { Calendar, Activity, TrendingUp, TrendingDown, Stethoscope, Zap, BarChart3 } from 'lucide-react';
import { useTimelineStore, useMonitoringStore } from '@/stores';
-import { useDiseaseStore } from '@/stores/diseaseStore';
import { useDrilldownStore } from '@/stores/drilldownStore';
-import { gridApi, caseApi, envApi } from '@/services/api';
import { ErrorBanner } from '@/components/ErrorBanner';
import { TimelinePlayer } from '@/components/TimelinePlayer';
-import { StatisticalCharts } from '@/components/StatisticalCharts';
-import { CaseLocationMap } from '@/components/CaseLocationMap';
import { DiseaseFilter } from '@/components/DiseaseFilter';
import { AdminBreadcrumb } from '@/components/AdminBreadcrumb';
-import { StatCard } from '@/components/StatCard';
-import { CalendarHeatmap } from '@/components/CalendarHeatmap';
-import { MetricHeatmapTable } from '@/components/MetricHeatmapTable';
-import { Segmented } from '@/components/ui';
-import { TESTIDS } from '@/utils/testids';
-import type { DistrictCaseData } from '@/types';
+import { MonitoringStatsBar } from '@/components/monitoring/MonitoringStatsBar';
+import { OverviewTab } from '@/components/monitoring/OverviewTab';
+import { CaseStatsTab } from '@/components/monitoring/CaseStatsTab';
+import { DistrictStatsTab } from '@/components/monitoring/DistrictStatsTab';
+import { useMonitoringData } from '@/components/monitoring/useMonitoringData';
+import { parseGranularity } from '@/components/monitoring/types';
+import type { Granularity } from '@/components/monitoring/types';
type MonitoringTab = 'overview' | 'cases' | 'districts';
-// URL 粒度参数取值 —— 监测页的「真相来源」(source of truth)。
-// drilldownStore 由 URL 派生，不再自行持有真相。
-type Granularity = 'city' | 'district' | 'street';
-const GRANULARITY_VALUES: readonly Granularity[] = ['city', 'district', 'street'] as const;
-function parseGranularity(raw: string | null): Granularity {
- return GRANULARITY_VALUES.includes(raw as Granularity) ? (raw as Granularity) : 'city';
-}
-
-interface TopDiagnosis {
- diagnosis: string;
- outpatient: number;
- inpatient: number;
- total: number;
-}
-
-function formatDateLabel(dateStr: string): string {
- const d = new Date(dateStr);
- return `${d.getMonth() + 1}/${d.getDate()}`;
-}
-
interface MonitoringDashboardProps {
defaultStartDate?: string;
defaultEndDate?: string;
@@ -61,27 +25,9 @@ export function MonitoringDashboard({
defaultStartDate = '2022-12-01',
defaultEndDate = '2024-12-30',
}: MonitoringDashboardProps) {
- const [chartData, setChartData] = useState
>([]);
-
// In-page tab strip (local state, no router — mirrors the existing activePage pattern)
const [activeTab, setActiveTab] = useState('overview');
- // --- 病例统计 tab state (fetched on demand) ---
- const [topDiagnoses, setTopDiagnoses] = useState([]);
- const [caseTrend, setCaseTrend] = useState>([]);
- const [heatmapData, setHeatmapData] = useState>([]);
- const [heatmapYear, setHeatmapYear] = useState(null);
- const [casesTabLoaded, setCasesTabLoaded] = useState(false);
- const [casesTabLoading, setCasesTabLoading] = useState(false);
- const [casesTabError, setCasesTabError] = useState(null);
-
- // --- 区域统计 tab state (fetched on demand) ---
- const [districtMetrics, setDistrictMetrics] = useState([]);
- const [districtSortKey, setDistrictSortKey] = useState('total');
- const [districtTabLoaded, setDistrictTabLoaded] = useState(false);
- const [districtTabLoading, setDistrictTabLoading] = useState(false);
- const [districtTabError, setDistrictTabError] = useState(null);
-
const {
currentDate,
isPlaying,
@@ -92,16 +38,13 @@ export function MonitoringDashboard({
setDateRange,
} = useTimelineStore();
- const districtCases = useMonitoringStore((s) => s.districtCases);
const error = useMonitoringStore((s) => s.error);
const clearError = useMonitoringStore((s) => s.clearError);
- const fetchDistrictCases = useMonitoringStore((s) => s.fetchDistrictCases);
const isLoading = useMonitoringStore((s) => s.isLoading);
const { selectedDistrict, selectedStreet } = useDrilldownStore();
const drillDown = useDrilldownStore((s) => s.drillDown);
const resetDrillDown = useDrilldownStore((s) => s.resetDrillDown);
- const { selectedDiagnoses } = useDiseaseStore();
// --- URL 是粒度的真相来源；drilldownStore 由 URL 派生 ---
const [searchParams, setSearchParams] = useSearchParams();
@@ -169,243 +112,9 @@ export function MonitoringDashboard({
setCurrentDate(defaultEndDate);
}, [defaultStartDate, defaultEndDate, setDateRange, setCurrentDate]);
- const debounceRef = useRef | null>(null);
-
- // Load chart data for 90-day window ending at the given reference date
- const loadChartData = useCallback((refDate: string, district?: string) => {
- const end = new Date(refDate);
- const start = new Date(refDate);
- start.setDate(start.getDate() - 90);
- const startStr = start.toISOString().split('T')[0];
- const endStr = end.toISOString().split('T')[0];
-
- if (selectedDiagnoses.length > 0 && selectedDiagnoses.length <= 3) {
- caseApi.getTrend({
- start_date: startStr,
- end_date: endStr,
- group_by: 'day',
- diagnosis: selectedDiagnoses.join(','),
- }).then((data) => {
- const trend = data.trend || [];
- setChartData(
- trend.map((t: { date: string; total: number }) => ({ date: t.date, cases: t.total }))
- );
- }).catch((e) => { console.error('Failed to load chart data:', e); });
- } else {
- gridApi.getHistoricalAggregated(startStr, endStr, 'daily', district)
- .then((data) => {
- const rows = data.aggregations || [];
- const dailyCases: Record = {};
- rows.forEach((item: { date: string; total_cases: number }) => {
- dailyCases[item.date] = (dailyCases[item.date] || 0) + item.total_cases;
- });
- setChartData(
- Object.entries(dailyCases)
- .map(([date, cases]) => ({ date, cases }))
- .sort((a, b) => a.date.localeCompare(b.date))
- );
- }).catch((e) => { console.error('Failed to load chart data:', e); });
- }
-
- // Fetch districtCases with date filter (single day = currentDate)
- const diagnosisParam = selectedDiagnoses.length > 0 ? selectedDiagnoses.join(',') : undefined;
- fetchDistrictCases(diagnosisParam, undefined, refDate);
- }, [fetchDistrictCases, selectedDiagnoses]);
-
- // Re-fetch when currentDate, district, or diagnoses change
- useEffect(() => {
- if (debounceRef.current) clearTimeout(debounceRef.current);
- debounceRef.current = setTimeout(() => {
- loadChartData(currentDate, selectedDistrict || undefined);
- }, 300);
- return () => {
- if (debounceRef.current) clearTimeout(debounceRef.current);
- };
- }, [currentDate, selectedDistrict, loadChartData]);
-
- // Enhanced stats: window stats + current-date snapshot
- const stats = useMemo(() => {
- const noData = chartData.length === 0;
-
- const totalCases = noData ? 0 : chartData.reduce((sum, d) => sum + d.cases, 0);
- const avgCases = noData ? 0 : Math.round(totalCases / chartData.length);
-
- let maxDay = { date: '--', cases: 0 };
- let minDay = { date: '--', cases: 0 };
- let stdDev = 0;
- let trend: 'up' | 'down' | 'stable' = 'stable';
-
- if (!noData) {
- maxDay = chartData.reduce((max, d) => d.cases > max.cases ? d : max, chartData[0]);
- minDay = chartData.reduce((min, d) => d.cases < min.cases ? d : min, chartData[0]);
- const variance = chartData.reduce((sum, d) => sum + (d.cases - avgCases) ** 2, 0) / chartData.length;
- stdDev = Math.round(Math.sqrt(variance));
-
- const halfIdx = Math.floor(chartData.length / 2);
- const firstHalf = chartData.slice(0, halfIdx);
- const secondHalf = chartData.slice(halfIdx);
- const firstAvg = firstHalf.reduce((s, d) => s + d.cases, 0) / firstHalf.length;
- const secondAvg = secondHalf.reduce((s, d) => s + d.cases, 0) / secondHalf.length;
- trend = secondAvg > firstAvg * 1.1 ? 'up' : secondAvg < firstAvg * 0.9 ? 'down' : 'stable';
- }
-
- // 7-day moving average (last 7 days of the window)
- const last7 = chartData.slice(-7);
- const avg7d = last7.length > 0 ? Math.round(last7.reduce((s, d) => s + d.cases, 0) / last7.length) : 0;
-
- // Current date snapshot: find the data point matching currentDate
- const todaySnapshot = chartData.find((d) => d.date === currentDate);
- const todayCases = todaySnapshot?.cases ?? null;
-
- // Case type breakdown from districtCases
- const totalOutpatient = districtCases.reduce((s, d) => s + d.outpatient, 0);
- const totalInpatient = districtCases.reduce((s, d) => s + d.inpatient, 0);
-
- return {
- totalCases, avgCases, maxDay, minDay,
- stdDev, trend, totalOutpatient, totalInpatient,
- avg7d, todayCases, noData,
- };
- }, [chartData, districtCases, currentDate]);
-
- // 7-day sparkline for the StatCard bar (last 7 days of the loaded window)
- const sparkline7d = useMemo(() => chartData.slice(-7).map((d) => d.cases), [chartData]);
-
- // --- On-demand loader: 病例统计 tab ---
- // Drives the trend off the Monitoring timeline (30-day window ending at currentDate),
- // NOT a fixed now-30d window. Year for the heatmap is derived from the data.
- const loadCasesTab = useCallback(async (refDate: string) => {
- setCasesTabLoading(true);
- setCasesTabError(null);
-
- const end = new Date(refDate);
- const start = new Date(refDate);
- start.setDate(start.getDate() - 30);
- const startStr = start.toISOString().split('T')[0];
- const endStr = end.toISOString().split('T')[0];
-
- const yearStart = `${end.getFullYear()}-01-01`;
- const yearEnd = `${end.getFullYear()}-12-31`;
-
- const [statsR, trendR, pollutantsR, yearTrendR] = await Promise.allSettled([
- caseApi.getStats(),
- caseApi.getTrend({ start_date: startStr, end_date: endStr, group_by: 'day' }),
- envApi.getPollutants(30),
- caseApi.getTrend({ start_date: yearStart, end_date: yearEnd, group_by: 'day' }),
- ]);
-
- const errs: string[] = [];
-
- if (statsR.status === 'fulfilled') {
- const topDiag = statsR.value.top_diagnoses || [];
- setTopDiagnoses(
- topDiag.slice(0, 5).map((d) => ({
- diagnosis: d.diagnosis,
- outpatient: d.outpatient,
- inpatient: d.inpatient,
- total: d.outpatient + d.inpatient,
- }))
- );
- } else {
- errs.push('诊断分布加载失败');
- }
-
- const aqiMap: Record = {};
- if (pollutantsR.status === 'fulfilled') {
- for (const p of pollutantsR.value.data || []) {
- aqiMap[p.date] = p.AQI || 0;
- }
- }
-
- if (trendR.status === 'fulfilled') {
- const trend = trendR.value.trend || [];
- setCaseTrend(
- trend.map((t) => ({ date: t.date, cases: t.total, aqi: aqiMap[t.date] || 0 }))
- );
- } else {
- errs.push('趋势数据加载失败');
- }
-
- // Calendar heatmap: daily cases for the data's actual year (derived from trend data)
- if (yearTrendR.status === 'fulfilled') {
- const yearTrend = yearTrendR.value.trend || [];
- if (yearTrend.length > 0) {
- const derivedYear = new Date(yearTrend[0].date).getFullYear();
- setHeatmapYear(derivedYear);
- setHeatmapData(yearTrend.map((t) => ({ date: t.date, value: t.total })));
- } else {
- setHeatmapYear(end.getFullYear());
- setHeatmapData([]);
- }
- } else {
- errs.push('日历热力图加载失败');
- }
-
- setCasesTabError(errs.length > 0 ? errs.join('；') : null);
- setCasesTabLoading(false);
- setCasesTabLoaded(true);
- }, []);
-
- // --- On-demand loader: 区域统计 tab ---
- const loadDistrictTab = useCallback(async () => {
- setDistrictTabLoading(true);
- setDistrictTabError(null);
- try {
- const res = await caseApi.getDistricts();
- setDistrictMetrics(res.districts || []);
- setDistrictTabError(null);
- } catch {
- setDistrictTabError('区域统计加载失败');
- } finally {
- setDistrictTabLoading(false);
- setDistrictTabLoaded(true);
- }
- }, []);
-
- // Fetch tab data the first time a tab is opened (avoids loading everything upfront)
- useEffect(() => {
- if (activeTab === 'cases' && !casesTabLoaded && !casesTabLoading) {
- loadCasesTab(currentDate);
- }
- if (activeTab === 'districts' && !districtTabLoaded && !districtTabLoading) {
- loadDistrictTab();
- }
- }, [activeTab, casesTabLoaded, casesTabLoading, districtTabLoaded, districtTabLoading, currentDate, loadCasesTab, loadDistrictTab]);
-
- // When the timeline date moves, refresh an already-opened 病例统计 tab so its
- // trend window tracks the Monitoring timeline rather than going stale.
- useEffect(() => {
- if (activeTab === 'cases' && casesTabLoaded) {
- loadCasesTab(currentDate);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentDate]);
-
- // 区域统计 table: sortable district rows + heatmap columns
- const districtTableRows = useMemo(() => {
- const sorted = [...districtMetrics].sort((a, b) => {
- switch (districtSortKey) {
- case 'outpatient': return b.outpatient - a.outpatient;
- case 'inpatient': return b.inpatient - a.inpatient;
- case 'inpatient_ratio': return (b.inpatient_ratio ?? 0) - (a.inpatient_ratio ?? 0);
- default: return b.total - a.total;
- }
- });
- return sorted.map((d) => d.district);
- }, [districtMetrics, districtSortKey]);
-
- const districtTableData = useMemo(() => {
- const map: Record> = {};
- for (const d of districtMetrics) {
- map[d.district] = {
- total: d.total,
- outpatient: d.outpatient,
- inpatient: d.inpatient,
- inpatient_ratio: Math.round((d.inpatient_ratio ?? 0) * 1000) / 10,
- };
- }
- return map;
- }, [districtMetrics]);
+ // 数据层：图表窗口 + 病例统计/区域统计两个按需 tab 的加载与派生。
+ // 不持有 URL/drilldown 真相来源，只消费 currentDate 与 selectedDistrict。
+ const data = useMonitoringData({ activeTab, currentDate, selectedDistrict });
const handleDateChange = useCallback((date: string) => {
setCurrentDate(date);
@@ -423,7 +132,7 @@ export function MonitoringDashboard({
error={error}
onRetry={() => {
clearError();
- loadChartData(currentDate, selectedDistrict || undefined);
+ data.loadChartData(currentDate, selectedDistrict || undefined);
}}
onDismiss={clearError}
/>
@@ -432,59 +141,14 @@ export function MonitoringDashboard({
{/* Top stats bar — standardized with StatCard */}
-
-
}
- label="当日病例"
- value={stats.todayCases !== null ? stats.todayCases.toLocaleString() : '--'}
- />
-
}
- label="7日均值"
- value={stats.avg7d.toLocaleString()}
- sparkline={sparkline7d.length >= 2 ? { data: sparkline7d, color: '#6366F1' } : undefined}
- />
-
:
- stats.trend === 'down' ?
:
-
- }
- label="趋势"
- value={stats.trend === 'up' ? '上升' : stats.trend === 'down' ? '下降' : '平稳'}
- trend={{
- direction: stats.trend === 'up' ? 'up' : stats.trend === 'down' ? 'down' : 'stable',
- value: stats.trend === 'up' ? '上升' : stats.trend === 'down' ? '下降' : '平稳',
- }}
- />
-
}
- label="峰值日"
- value={`${stats.maxDay.cases.toLocaleString()} (${stats.maxDay.date.slice(5)})`}
- />
-
}
- label="标准差"
- value={stats.stdDev.toLocaleString()}
- />
-
}
- label="门诊 / 住院"
- value={`${stats.totalOutpatient.toLocaleString()} / ${stats.totalInpatient.toLocaleString()}`}
- />
-
+
{/* Disease filter */}
- {stats.noData && (
+ {data.stats.noData && (
该时段暂无数据
)}
-
{
- if (debounceRef.current) clearTimeout(debounceRef.current);
- debounceRef.current = setTimeout(() => {
- loadChartData(currentDate, selectedDistrict || undefined);
- }, 300);
- }} />
+
@@ -515,195 +179,47 @@ export function MonitoringDashboard({
{/* 概览 tab — unchanged Monitoring content */}
{activeTab === 'overview' && (
- isLoading ? (
-
- ) : (
-
- {/* Case Location Map */}
-
-
病例分布地图
-
-
-
- {/* Statistical Charts */}
-
-
- {/* District breakdown — 区域 roll-up（URL 粒度真相来源） */}
-
-
-
区县病例分布
-
- testid={TESTIDS.granularityControl}
- size="sm"
- options={[
- { value: 'city', label: '全市' },
- { value: 'district', label: '区域' },
- { value: 'street', label: '街道' },
- ]}
- value={granularity}
- onChange={handleGranularityChange}
- />
-
-
-
-
-
-
-
- )
+
)}
{/* 病例统计 tab */}
{activeTab === 'cases' && (
- casesTabLoading && !casesTabLoaded ? (
-
- ) : (
-
- {casesTabError && (
-
loadCasesTab(currentDate)}
- onDismiss={() => setCasesTabError(null)}
- />
- )}
-
- {/* Top 5 诊断分布 */}
-
-
Top 5 诊断分布
- {topDiagnoses.length > 0 ? (
-
-
-
-
-
- [value.toLocaleString(), '病例数']}
- />
-
-
-
-
-
- ) : (
-
暂无数据
- )}
-
-
病例与AQI趋势
-
截至 {currentDate} 的近30日窗口
- {caseTrend.length > 0 ? (
-
-
-
-
-
-
-
-
-
-
-
-
- ) : (
-
暂无数据
- )}
-
-
- {heatmapYear ? `${heatmapYear}年 ` : ''}每日病例日历
-
- {heatmapYear && heatmapData.length > 0 ? (
-
- ) : (
-
暂无数据
- )}
-
- )
+
data.loadCasesTab(currentDate)}
+ onDismissError={() => data.setCasesTabError(null)}
+ />
)}
{/* 区域统计 tab */}
{activeTab === 'districts' && (
- districtTabLoading && !districtTabLoaded ? (
-
- ) : (
-
- {districtTabError && (
-
loadDistrictTab()}
- onDismiss={() => setDistrictTabError(null)}
- />
- )}
-
-
-
区域指标热力表
-
点击列标题排序
- {districtTableRows.length > 0 ? (
-
setDistrictSortKey(col)}
- />
- ) : (
- 暂无数据
- )}
-
@@ -721,55 +237,3 @@ export function MonitoringDashboard({
);
}
-
-interface DistrictBreakdownProps {
- districtCases: Array<{ district: string; total: number; outpatient: number; inpatient: number }>;
- selectedDistrict: string | null;
- // 点击区域条目时上抛——由父组件驱动 URL（粒度真相来源），不在此处 mutate store。
- onDistrictSelect: (district: string) => void;
-}
-
-const DistrictBreakdown = memo(function DistrictBreakdown({ districtCases, selectedDistrict, onDistrictSelect }: DistrictBreakdownProps) {
- const sortedCases = useMemo(() => [...districtCases].sort((a, b) => b.total - a.total), [districtCases]);
- const maxTotal = useMemo(() => sortedCases.length > 0 ? sortedCases[0].total : 1, [sortedCases]);
-
- const handleDistrictClick = useCallback((district: string) => {
- onDistrictSelect(district);
- }, [onDistrictSelect]);
-
- return (
- <>
- {sortedCases.map((d) => {
- const outPct = d.total > 0 ? (d.outpatient / d.total) * 100 : 0;
- const inPct = d.total > 0 ? (d.inpatient / d.total) * 100 : 0;
- const barWidth = (d.total / maxTotal) * 100;
- return (
- handleDistrictClick(d.district)}
- >
-
{d.district}
-
-
- {d.total.toLocaleString()}
-
-
) : (
+
@@ -135,6 +136,7 @@ function ReportList({ onSelect }: { onSelect: (id: string) => void }) {
))}
+
)}
@@ -171,7 +173,7 @@ function ReportDetail({ reportId, onBack }: { reportId: string; onBack: () => vo
返回列表
-
+
{metadata.title}
@@ -208,7 +210,7 @@ function ReportDetail({ reportId, onBack }: { reportId: string; onBack: () => vo
{/* Summary cards */}
-
+
{[
{ label: '总病例数', value: summary.total_cases.toLocaleString(), icon: Activity, color: 'text-blue-600', bg: 'bg-blue-50' },
{ label: '平均风险', value: (summary.avg_risk * 100).toFixed(1) + '%', icon: AlertTriangle, color: 'text-orange-600', bg: 'bg-orange-50' },
@@ -234,7 +236,7 @@ function ReportDetail({ reportId, onBack }: { reportId: string; onBack: () => vo
{/* Sections and charts in 2-column layout */}
-
+
{sections.map((section, idx) => (
{section.title}
@@ -330,7 +332,7 @@ export function ReportsCenter() {
}, [fetchReportsList]);
return (
-
+
{error && view === 'list' && (
{ clearError(); fetchReportsList(); }} onDismiss={clearError} />
)}
diff --git a/frontend/src/pages/TrendAnalysis.tsx b/frontend/src/pages/TrendAnalysis.tsx
index 2272165..c301dab 100644
--- a/frontend/src/pages/TrendAnalysis.tsx
+++ b/frontend/src/pages/TrendAnalysis.tsx
@@ -149,7 +149,7 @@ export function TrendAnalysis() {
};
return (
-
+
{error && (
+
{POLLUTANT_OPTIONS.filter((p) => selectedPollutants.includes(p.key)).slice(0, 4).map((p) => {
const value = latestData[p.key as keyof typeof latestData] as number;
const change = getChange(p.key);