107 lines
4.1 KiB
TypeScript
107 lines
4.1 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
|
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
|
|
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 { 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';
|
|
|
|
export default function HydrogenOverview() {
|
|
const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [year, setYear] = useState<number | null>(null);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
|
|
const refreshSeq = useRef(0);
|
|
|
|
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);
|
|
setLastRefreshAt(Date.now());
|
|
} catch (e) {
|
|
if (seq !== refreshSeq.current) return;
|
|
setError(e instanceof Error ? e.message : String(e));
|
|
} finally {
|
|
if (seq === refreshSeq.current) setRefreshing(false);
|
|
}
|
|
}, []);
|
|
|
|
// 初始加载 + 年份切换：用 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]);
|
|
|
|
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) {
|
|
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);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 relative">
|
|
<OverviewHeader
|
|
activeYear={activeYear}
|
|
availableYears={availableYears}
|
|
lastRefreshAt={lastRefreshAt}
|
|
refreshing={refreshing}
|
|
onSelectYear={setYear}
|
|
onRefresh={() => void load(year, true)}
|
|
/>
|
|
|
|
<KpiSection kpi={kpi} />
|
|
|
|
<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}
|
|
/>
|
|
|
|
<MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
|
|
<DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
|
|
<StationSummaryTable stations={stations} />
|
|
<CustomerSummaryTable customers={customers} />
|
|
|
|
<RotatingFooterHint />
|
|
<RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
|
|
</div>
|
|
);
|
|
}
|