feat(assets): 完善故障风险多维分析与管理总览

src/modules/assets/faults/FaultTrendCard.tsx

@@ -1,3 +1,4 @@
+import type { FaultDashboardFilters } from '../../../shared/assets/faults';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { CalendarDays, ChevronDown, RefreshCw } from 'lucide-react';
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
@@ -14,9 +15,11 @@ function initialRange() {
 }
 const statusLabels = { all: '新增故障', closed: '其中已闭环', unclosed: '其中未闭环' };
 const countKeys = { all: 'reported', closed: 'closed', unclosed: 'unclosed' } as const;
-export function FaultTrendCard({ refresh }: { refresh: number }) {
-  const [range, setRange] = useState(initialRange);
+export function FaultTrendCard({ refresh, scope = {}, scopeLabel = '', period }: { refresh: number; scope?: FaultDashboardFilters; scopeLabel?: string; period?: { start: string; end: string } }) {
+  const [range, setRange] = useState(() => period || initialRange());
   const [granularity, setGranularity] = useState<'day' | 'month'>('day');
+  const scopeKey = new URLSearchParams(scope).toString();
+  useEffect(() => { if (period) setRange(period); }, [period?.start, period?.end]);
   const [data, setData] = useState<FaultTrendResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -28,22 +31,22 @@ export function FaultTrendCard({ refresh }: { refresh: number }) {
   useEffect(() => {
     const controller = new AbortController();
     setLoading(true); setError(''); setData(null);
-    const params = new URLSearchParams({ ...range, granularity });
+    const params = new URLSearchParams({ ...range, granularity, ...scope });
     fetchJson<FaultTrendResponse>(`/api/asset-faults/trend?${params}`, { signal: controller.signal })
       .then(result => { if (!controller.signal.aborted) setData(result); })
       .catch(e => { if (!controller.signal.aborted) setError(e instanceof Error ? e.message : '加载失败'); })
       .finally(() => { if (!controller.signal.aborted) setLoading(false); });
     return () => controller.abort();
-  }, [range.start, range.end, granularity, revision, refresh]);
+  }, [range.start, range.end, granularity, revision, refresh, scopeKey]);
   const drill = (status: FaultTrendStatus, period?: string) => {
     if (!data || loading) return;
-    const params = new URLSearchParams({ start: data.start, end: data.end, granularity: data.granularity, status });
+    const params = new URLSearchParams({ start: data.start, end: data.end, granularity: data.granularity, status, ...scope });
     if (period) params.set('period', period);
     setSource({ url: `/api/asset-faults/trend-analysis?${params}`, title: `故障处理趋势 · ${statusLabels[status]}`, defaultDimensions: ['handler', 'faultStatus'],
       periodLabel: `${data.start} 至 ${data.end}${period ? ` · ${period}` : ''} · 按提报日期` });
   };
   return <section className="fault-trend fault-summary" aria-label="故障处理趋势" aria-busy={loading}>
-    <div className="fault-trend-heading"><h2><CalendarDays size={16} />故障处理趋势</h2><div className="fault-report-actions"><AnalysisExportButton disabled={loading || !data || !!error} onExport={() => data ? downloadFaultReport({ kind: 'trend', data }, chartRef.current?.querySelector<SVGSVGElement>('svg.recharts-surface[role=application]') || undefined) : undefined} /><div role="group" aria-label="趋势时间粒度">{(['day', 'month'] as const).map(value => <button key={value} aria-pressed={granularity === value} onClick={() => setGranularity(value)}>{value === 'day' ? '按日' : '按月'}</button>)}</div></div></div>
+    <div className="fault-trend-heading"><h2><CalendarDays size={16} />故障处理趋势</h2><div className="fault-report-actions"><AnalysisExportButton disabled={loading || !data || !!error} onExport={() => data ? downloadFaultReport({ kind: 'trend', data, filterLabel: scopeLabel }, chartRef.current?.querySelector<SVGSVGElement>('svg.recharts-surface[role=application]') || undefined) : undefined} /><div role="group" aria-label="趋势时间粒度">{(['day', 'month'] as const).map(value => <button key={value} aria-pressed={granularity === value} onClick={() => setGranularity(value)}>{value === 'day' ? '按日' : '按月'}</button>)}</div></div></div>
     <p className="fault-trend-definition">按提报日期统计新增故障，展示这批故障截至当前的闭环情况。新增 = 已闭环 + 未闭环。点击柱内色块，可按运维处置人、故障工单状态查看对应日期的故障。</p>
     <FlowDateRangePicker dateLabel="故障提报时间" value={range} onChange={setRange} />
     {error ? <div className="fault-message" role="alert">故障趋势加载失败，请稍后重试。<button onClick={() => setRevision(v => v + 1)}>重试</button></div> : loading || !data ? <div className="fault-trend-loading" role="status"><RefreshCw size={16} className="animate-spin" />正在加载故障趋势…</div> : <>
@@ -56,8 +59,8 @@ export function FaultTrendCard({ refresh }: { refresh: number }) {
             <YAxis allowDecimals={false} tick={{ fontSize: 10, fill: '#64748b' }} axisLine={false} tickLine={false} />
             <Tooltip cursor={{ fill: '#f1f5f9', opacity: 0.7 }} contentStyle={{ border: '1px solid #e2e8f0', borderRadius: 12, boxShadow: '0 8px 24px rgb(15 23 42 / .08)', fontSize: 12 }} labelFormatter={(_, payload) => { const point = payload?.[0]?.payload; return point ? `${point.period} · 新增 ${point.reported} 单` : ''; }} formatter={(value, name) => [`${value} 单`, name]} />
             <Legend iconType="circle" iconSize={8} wrapperStyle={{ fontSize: 11 }} />
-            <Bar dataKey="closed" name="已闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.closed) drill('closed', period.period); }} fill="#10b981" stackId="faults" maxBarSize={34} isAnimationActive={false} />
-            <Bar dataKey="unclosed" name="未闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.unclosed) drill('unclosed', period.period); }} fill="#f59e0b" stackId="faults" maxBarSize={34} isAnimationActive={false} />
+            <Bar dataKey="closed" name="已闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.closed) drill('closed', period.period); }} fill="#2475ff" stackId="faults" maxBarSize={34} isAnimationActive={false} />
+            <Bar dataKey="unclosed" name="未闭环" cursor="pointer" onClick={bar => { const period = data.periods.find(row => row.period === bar.payload?.period); if (period?.unclosed) drill('unclosed', period.period); }} fill="#ff981a" stackId="faults" maxBarSize={34} isAnimationActive={false} />
           </BarChart>
         </ResponsiveContainer>
       </div> : <p className="fault-empty">所选时间范围暂无新增故障</p>}