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

src/modules/assets/faults/FaultOverview.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
+import { ArrowUpRight, CheckCircle2, ClipboardList, Clock3, PlusCircle, RefreshCw } from 'lucide-react';
+import { fetchJson } from '../../../auth/api-client';
+import { FAULT_OVERVIEW_METRICS, type FaultOverview, type FaultOverviewMetric } from '../../../shared/assets/faults';
+import { FaultAnalysisModal } from './FaultAnalysisModal';
+import { FaultWeeklyReport } from './FaultWeeklyReport';
+import { FaultTrendCard } from './FaultTrendCard';
+import './fault-management.css';
+
+export const FAULT_DEFINITIONS = {
+  reported: '按今日提报时间统计', closed: '按今日解决时间统计',
+  open: '当前在办 = 待处理 + 处理中', ledger: '全部有效故障台账',
+};
+const icons = { reported: PlusCircle, closed: CheckCircle2, open: Clock3, ledger: ClipboardList };
+const metrics = ['reported', 'closed', 'open', 'ledger'] as const;
+export function FaultOverview({ navigation }: { navigation: ReactNode }) {
+  const [data, setData] = useState<FaultOverview | null>(null);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [revision, setRevision] = useState(0);
+  const [metric, setMetric] = useState<FaultOverviewMetric | null>(null);
+  const close = useCallback(() => setMetric(null), []);
+  useEffect(() => {
+    const controller = new AbortController();
+    setLoading(true); setError('');
+    fetchJson<FaultOverview>('/api/asset-faults/overview', { 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();
+  }, [revision]);
+  return <div className="fault-page fault-overview-page">
+    <header className="fd-header">
+      <div><p className="fd-breadcrumb">羚牛氢能 BI / 故障分析</p><div className="fd-heading-line"><h1>羚牛氢能-故障管理</h1><p>实时掌握故障数量、闭环趋势与运维进展。</p></div></div>
+      <div className="fd-header-actions"><span>{data ? `更新时间：${new Date(data.updatedAt).toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false })}` : '正在读取故障台账'}</span><button aria-label="刷新故障统计" disabled={loading} onClick={() => setRevision(v => v + 1)}><RefreshCw size={14} className={loading ? 'animate-spin' : ''} />刷新</button></div>
+    </header>
+    {navigation}
+    {error && <div className="fault-message" role="alert">{error}<button onClick={() => setRevision(v => v + 1)}>重试</button></div>}
+    <section className="fault-summary" aria-label="故障总统计" aria-busy={loading}>
+      <div className="fault-summary-heading"><h2>故障数据实时汇总</h2><span>{data?.date || '—'} · 北京时间</span></div>
+      <div className="fault-metrics">{metrics.map(key => {
+        const Icon = icons[key];
+        return <article key={key} className={`fault-metric fault-metric-${key}`}><button className="fault-metric-main" disabled={!data || loading || !!error} onClick={() => setMetric(key)} aria-label={`${FAULT_OVERVIEW_METRICS[key]} ${data?.totals[key] ?? '加载中'} 单，查看分析`}>
+          <div className="fault-metric-label"><span className="fault-metric-icon"><Icon size={19} /></span><span>{FAULT_OVERVIEW_METRICS[key]}</span><ArrowUpRight size={15} /></div>
+          <div className="fault-metric-count"><strong>{loading ? '—' : data?.totals[key].toLocaleString('zh-CN') ?? '—'}</strong><span>单</span></div>
+          <p>{FAULT_DEFINITIONS[key]}</p><span className="fault-metric-link">查看分析与明细 →</span>
+        </button>
+          {key === 'open' && <>
+            <button className="fault-overdue-subset" disabled={!data || loading || !!error} onClick={() => setMetric('overdue')} aria-label={`其中逾期 ${data?.totals.overdue ?? '加载中'} 单，查看分析`}>
+              <span><span className="fault-overdue-prefix">其中</span>逾期</span><strong>{loading ? '—' : data?.totals.overdue?.toLocaleString('zh-CN') ?? '—'}</strong><small>单</small>
+            </button>
+            <div className="fault-open-breakdown" aria-label="当前在办等于待处理加处理中">
+              {(['waiting', 'processing'] as const).map((part, index) => <Fragment key={part}>
+                {index > 0 && <span className="fault-composition-plus" aria-hidden="true">＋</span>}
+                <button className={`fault-submetric fault-submetric-${part}`} disabled={!data || loading || !!error} onClick={() => setMetric(part)} aria-label={`${FAULT_OVERVIEW_METRICS[part]} ${data?.totals[part] ?? '加载中'} 单，查看分析`}>
+                  <span>{FAULT_OVERVIEW_METRICS[part]}</span><strong>{loading ? '—' : data?.totals[part]?.toLocaleString('zh-CN') ?? '—'}</strong>
+                </button>
+              </Fragment>)}
+            </div>
+          </>}
+        </article>;
+      })}</div>
+      <p className="fault-summary-note">当前在办 = 待处理 + 处理中，其中逾期不重复累加；按处置截止时间统计，挂起停表，未设置截止时间不计入逾期。</p>
+    </section>
+    <FaultTrendCard refresh={revision} />
+    <FaultWeeklyReport refresh={revision} />
+    {metric && <FaultAnalysisModal key={metric} metric={metric} onClose={close} />}
+  </div>;
+}