diff --git a/client/src/pages/SituationalAwarenessPage.tsx b/client/src/pages/SituationalAwarenessPage.tsx index 4fe75e9..226cb91 100644 --- a/client/src/pages/SituationalAwarenessPage.tsx +++ b/client/src/pages/SituationalAwarenessPage.tsx @@ -11,6 +11,7 @@ import { LoadingSpinner } from '@/components/LoadingSpinner' import { Badge } from '@/components/Badge' import { formatCurrency, cn } from '@/lib/utils' import { Activity, AlertTriangle, Link2, TrendingUp } from 'lucide-react' +import { MonthPicker } from '@/components/MonthPicker' const PAGE_SIZE = 20 @@ -48,13 +49,17 @@ const ALERT_TYPE_LABEL: Record = { export function SituationalAwarenessPage() { const [tab, setTab] = useState('health') + const [month, setMonth] = useState('2026-04') const navigate = useNavigate() return (
-
-

态势感知

-

门店健康度 · 自动化预警 · 跨模块关联 · 趋势预测

+
+
+

态势感知

+

门店健康度 · 自动化预警 · 跨模块关联 · 趋势预测 · {month}

+
+
{/* Tab 切换 */} @@ -78,20 +83,20 @@ export function SituationalAwarenessPage() { })}
- {tab === 'health' && } - {tab === 'alerts' && } - {tab === 'correlation' && } - {tab === 'forecast' && } + {tab === 'health' && } + {tab === 'alerts' && } + {tab === 'correlation' && } + {tab === 'forecast' && }
) } // ============ Tab 1: 门店健康度综合评分 ============ -function HealthScoreTab({ navigate }: { navigate: (path: string) => void }) { +function HealthScoreTab({ navigate, month }: { navigate: (path: string) => void; month: string }) { const { data, isLoading } = useQuery({ - queryKey: ['sa-health-score'], - queryFn: () => api.get('/situational-awareness/health-score'), + queryKey: ['sa-health-score', month], + queryFn: () => api.get('/situational-awareness/health-score', { params: { month } }), staleTime: 5 * 60 * 1000, }) @@ -203,10 +208,10 @@ function HealthScoreTab({ navigate }: { navigate: (path: string) => void }) { // ============ Tab 2: 预警中心 ============ -function AlertsTab() { +function AlertsTab({ month }: { month: string }) { const { data, isLoading } = useQuery({ - queryKey: ['sa-alerts'], - queryFn: () => api.get('/situational-awareness/alerts'), + queryKey: ['sa-alerts', month], + queryFn: () => api.get('/situational-awareness/alerts', { params: { month } }), staleTime: 5 * 60 * 1000, }) @@ -335,10 +340,10 @@ function AlertList({ alerts }: { alerts: any[] }) { // ============ Tab 3: 跨模块关联分析 ============ -function CorrelationTab({ navigate }: { navigate: (path: string) => void }) { +function CorrelationTab({ navigate, month }: { navigate: (path: string) => void; month: string }) { const { data, isLoading } = useQuery({ - queryKey: ['sa-correlation'], - queryFn: () => api.get('/situational-awareness/correlation'), + queryKey: ['sa-correlation', month], + queryFn: () => api.get('/situational-awareness/correlation', { params: { month } }), staleTime: 5 * 60 * 1000, }) @@ -549,10 +554,10 @@ function CorrelationTab({ navigate }: { navigate: (path: string) => void }) { // ============ Tab 4: 趋势预测 ============ -function ForecastTab() { +function ForecastTab({ month }: { month: string }) { const { data, isLoading } = useQuery({ - queryKey: ['sa-forecast'], - queryFn: () => api.get('/situational-awareness/forecast'), + queryKey: ['sa-forecast', month], + queryFn: () => api.get('/situational-awareness/forecast', { params: { month } }), staleTime: 5 * 60 * 1000, })