feat(energy): rebuild hydrogen BI board and drill-through

src/modules/energy/HydrogenOverview.tsx

@@ -1,106 +1,282 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import RotatingFooterHint from '../../components/RotatingFooterHint';
-import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  fetchHydrogenOverview,
+  fetchHydrogenOverviewDetail,
+  type HydrogenOverviewResponse,
+  type HydrogenVehicleScope,
+  type HydrogenVerifyScope,
+} from './api';
+import type { HydrogenBoardScope } from './HydrogenBoardChrome';
 import { DistributionCharts } from './hydrogen-overview/components/DistributionCharts';
 import { HydrogenOverviewSkeleton } from './hydrogen-overview/components/HydrogenOverviewSkeleton';
 import { InsightCards } from './hydrogen-overview/components/InsightCards';
 import { KpiSection } from './hydrogen-overview/components/KpiSection';
 import { MonthlyCharts } from './hydrogen-overview/components/MonthlyCharts';
+import { OverviewDrillTreeDialog } from './hydrogen-overview/components/OverviewDrillTreeDialog';
 import { OverviewHeader } from './hydrogen-overview/components/OverviewHeader';
 import { RefreshOverlay } from './hydrogen-overview/components/RefreshOverlay';
 import { CustomerSummaryTable, StationSummaryTable } from './hydrogen-overview/components/SummaryTables';
-import { deriveOverviewMetrics, formatYuan as fmtYuan } from './hydrogen-overview/model';
+import {
+  deriveOverviewMetrics,
+  formatYuan,
+  type OverviewDrillRequest,
+  type OverviewScope,
+} from './hydrogen-overview/model';
+import type {
+  HydrogenOverviewDetailGroupBy,
+  HydrogenOverviewDetailResponse,
+} from './types';
+import './styles/energy-bi-board.css';
 
-export default function HydrogenOverview() {
+export interface HydrogenOverviewProps {
+  scope?: OverviewScope;
+  selectedStationId?: number | null;
+  onScopeChange?: (scope: HydrogenBoardScope) => void;
+  onSubChange?: (sub: 'daily' | 'overview' | 'settlement') => void;
+  onSelectStation?: (stationId: number | null) => void;
+  onOpenDaily?: () => void;
+  onRangeTextChange?: (rangeText: string) => void;
+}
+
+const DEFAULT_AVAILABLE_YEARS = [2026, 2025, 2024, 2023, 2022, 2021, 2020];
+
+interface DrillSelection {
+  stationId?: number | null;
+  customerId?: number | null;
+  customerName?: string | null;
+  plateNo?: string | null;
+  region?: string | null;
+  month?: string | null;
+  date?: string | null;
+}
+
+export default function HydrogenOverview({
+  scope = 'global',
+  selectedStationId = null,
+  onScopeChange,
+  onSubChange,
+  onSelectStation,
+  onOpenDaily,
+  onRangeTextChange,
+}: HydrogenOverviewProps) {
+  const currentYear = new Date().getFullYear();
+  const [activeYear, setActiveYear] = useState<number>(() => {
+    return DEFAULT_AVAILABLE_YEARS.includes(currentYear) ? currentYear : 2026;
+  });
+  const [vehicleScope, setVehicleScope] = useState<HydrogenVehicleScope>('all');
+  const [verifyScope, setVerifyScope] = useState<HydrogenVerifyScope>('all');
+  const [internalStationId, setInternalStationId] = useState<number | null>(selectedStationId);
   const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [year, setYear] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
-  const refreshSeq = useRef(0);
+  const [error, setError] = useState<string | null>(null);
+
+  const [drillTree, setDrillTree] = useState<{
+    title: string;
+    selection: DrillSelection;
+  } | null>(null);
+
+  const effectiveStationId = scope === 'station' ? (internalStationId ?? selectedStationId) : null;
+
+  const load = useCallback(async (force = false) => {
+    if (force) setRefreshing(true);
+    else setLoading(true);
+    setError(null);
 
-  const load = useCallback(async (selectedYear: number | null, force: boolean) => {
-    const seq = ++refreshSeq.current;
-    setRefreshing(true);
     try {
-      const d = await fetchHydrogenOverview(selectedYear ?? undefined, force);
-      if (seq !== refreshSeq.current) return; // outdated
-      setData(d);
-      setError(null);
+      const result = await fetchHydrogenOverview({
+        year: activeYear,
+        vehicleScope,
+        verifyScope,
+        stationId: effectiveStationId,
+        force,
+      });
+      setData(result);
       setLastRefreshAt(Date.now());
-    } catch (e) {
-      if (seq !== refreshSeq.current) return;
-      setError(e instanceof Error ? e.message : String(e));
+      const rangeEnd = result.latestLedgerTime?.slice(0, 10) ?? (activeYear === currentYear ? '至今' : `${activeYear}-12-31`);
+      onRangeTextChange?.(`${activeYear}-01-01 至 ${rangeEnd}`);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
     } finally {
-      if (seq === refreshSeq.current) setRefreshing(false);
+      setLoading(false);
+      setRefreshing(false);
     }
-  }, []);
+  }, [activeYear, currentYear, effectiveStationId, onRangeTextChange, vehicleScope, verifyScope]);
 
-  // 初始加载 + 年份切换：用 force=false 命中热缓存
-  useEffect(() => { void load(year, false); }, [year, load]);
-
-  // 客户端兜底自动刷新：每 60s 静默拉一次（命中后端热缓存，几乎零成本）
   useEffect(() => {
-    const t = setInterval(() => { void load(year, false); }, 60_000);
-    return () => clearInterval(t);
-  }, [year, load]);
+    void load(false);
+  }, [load]);
 
-  if (error && !data) {
-    return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
-  }
-  if (!data) {
+  const handleDrillRequest = (request: OverviewDrillRequest) => {
+    const selection: DrillSelection = {};
+    if (request.entityId) {
+      if (request.kind === 'station') selection.stationId = request.entityId;
+      if (request.kind === 'customer') selection.customerId = request.entityId;
+    }
+    if (request.kind === 'customer' && !request.entityId) selection.customerName = request.key;
+    if (request.kind === 'month') selection.month = request.key;
+    if (request.kind === 'region') selection.region = request.key;
+
+    setDrillTree({
+      title: request.label || '数据下钻穿透',
+      selection,
+    });
+  };
+
+  const handleDrillLoad = useCallback(async (
+    groupBy: HydrogenOverviewDetailGroupBy | null,
+    selection: DrillSelection,
+    scopeParam: HydrogenVehicleScope,
+    includeAll = false,
+  ): Promise<HydrogenOverviewDetailResponse> => {
+    return fetchHydrogenOverviewDetail({
+      year: activeYear,
+      vehicleScope: scopeParam,
+      verifyScope,
+      stationId: selection.stationId ?? effectiveStationId,
+      customerId: selection.customerId ?? null,
+      customerName: selection.customerName ?? null,
+      plateNo: selection.plateNo ?? null,
+      month: selection.month ?? null,
+      date: selection.date ?? null,
+      region: selection.region ?? null,
+      groupBy,
+      limit: includeAll ? 500 : 50,
+    });
+  }, [activeYear, effectiveStationId, verifyScope]);
+
+  const derived = useMemo(() => {
+    if (!data) return null;
+    return deriveOverviewMetrics(data);
+  }, [data]);
+
+  if (loading && !data) {
     return <HydrogenOverviewSkeleton />;
   }
 
-  const { kpi, top5, regions, monthly, customers, stations, availableYears, year: activeYear } = data;
-  const {
-    monthAvgKg,
-    bestMonth,
-    latestMonth,
-    monthMomentum,
-    top5Share,
-    profitYield,
-    stationAvgKg,
-    monthlyDual,
-  } = deriveOverviewMetrics(data);
-  const yearProfitFmt = fmtYuan(kpi.yearProfit);
-  const yearRevenueFmt = fmtYuan(kpi.yearRevenue);
+  if (error && !data) {
+    return (
+      <div className="rounded-xl border border-red-200 bg-red-50 p-6 text-sm text-red-700">
+        <div className="font-bold">氢能总览数据加载失败</div>
+        <p className="mt-1 text-xs text-red-600">{error}</p>
+        <button
+          type="button"
+          onClick={() => void load(true)}
+          className="mt-3 inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-xs font-bold text-slate-700 shadow-sm hover:bg-slate-50"
+        >
+          重新加载
+        </button>
+      </div>
+    );
+  }
+
+  const selectedStationName = data?.stations.find((s) => s.id === effectiveStationId)?.name ?? null;
+  const yearProfitFmt = data ? formatYuan(data.kpi.yearProfit) : { value: '0', unit: '元' };
+  const yearRevenueFmt = data ? formatYuan(data.kpi.yearRevenue) : { value: '0', unit: '元' };
 
   return (
-    <div className="flex flex-col gap-3 relative">
+    <>
       <OverviewHeader
         activeYear={activeYear}
-        availableYears={availableYears}
+        availableYears={DEFAULT_AVAILABLE_YEARS}
+        vehicleScope={vehicleScope}
+        verifyScope={verifyScope}
+        latestLedgerTime={data?.latestLedgerTime ?? null}
         lastRefreshAt={lastRefreshAt}
         refreshing={refreshing}
-        onSelectYear={setYear}
-        onRefresh={() => void load(year, true)}
+        onSelectYear={(y) => setActiveYear(y)}
+        onVehicleScopeChange={(vs) => setVehicleScope(vs)}
+        onVerifyScopeChange={setVerifyScope}
+        onRefresh={() => void load(true)}
       />
 
-      <KpiSection kpi={kpi} />
+      {data && derived ? (
+        <section className="ehb-host" aria-label="经营总览">
+          <KpiSection
+            kpi={data.kpi}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />
 
-      <InsightCards
-        monthAvgKg={monthAvgKg}
-        bestMonth={bestMonth}
-        latestMonth={latestMonth}
-        monthMomentum={monthMomentum}
-        top5Share={top5Share}
-        profitYield={profitYield}
-        stationAvgKg={stationAvgKg}
-        stationCount={stations.length}
-        yearProfitValue={yearProfitFmt.value}
-        yearProfitUnit={yearProfitFmt.unit}
-        yearRevenueValue={yearRevenueFmt.value}
-        yearRevenueUnit={yearRevenueFmt.unit}
-      />
+          <InsightCards
+            monthAvgKg={derived.monthAvgKg}
+            bestMonth={derived.bestMonth}
+            latestMonth={derived.latestMonth}
+            monthMomentum={derived.monthMomentum}
+            top5Share={derived.top5Share}
+            customerGrossMarginPct={derived.customerGrossMarginPct}
+            stationAvgKg={derived.stationAvgKg}
+            stationCount={data.stations.length}
+            yearProfitValue={yearProfitFmt.value}
+            yearProfitUnit={yearProfitFmt.unit}
+            yearRevenueValue={yearRevenueFmt.value}
+            yearRevenueUnit={yearRevenueFmt.unit}
+            stations={data.stations}
+            onSelectStation={(stId) => {
+              setInternalStationId(stId);
+              onSelectStation?.(stId);
+            }}
+            onDrillRequest={handleDrillRequest}
+          />
 
-      <MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
-      <DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
-      <StationSummaryTable stations={stations} />
-      <CustomerSummaryTable customers={customers} />
+          <div className="ehb-overview-charts">
+            <MonthlyCharts
+              activeYear={activeYear}
+              monthly={data.monthly}
+              monthlyDual={derived.monthlyDual}
+              scope={scope}
+              scopeLabel={selectedStationName}
+              onDrillRequest={handleDrillRequest}
+            />
+
+            <DistributionCharts
+              top5={data.top5}
+              regions={data.regions}
+              stations={data.stations}
+              yearKg={data.kpi.yearKg}
+              onSelectStation={(stId) => {
+                setInternalStationId(stId);
+                onSelectStation?.(stId);
+              }}
+              scope={scope}
+              scopeLabel={selectedStationName}
+              onDrillRequest={handleDrillRequest}
+            />
+          </div>
+
+          <StationSummaryTable
+            stations={data.stations}
+            onSelectStation={(stId) => {
+              setInternalStationId(stId);
+              onSelectStation?.(stId);
+            }}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />
+
+          <CustomerSummaryTable
+            customers={data.customers}
+            scope={scope}
+            scopeLabel={selectedStationName}
+            onDrillRequest={handleDrillRequest}
+          />
+        </section>
+      ) : null}
+
+      {drillTree && (
+        <OverviewDrillTreeDialog
+          title={drillTree.title}
+          initialVehicleScope={vehicleScope}
+          initialSelection={drillTree.selection}
+          load={handleDrillLoad}
+          onClose={() => setDrillTree(null)}
+        />
+      )}
 
-      <RotatingFooterHint />
       <RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
-    </div>
+    </>
   );
 }