776 lines
36 KiB
TypeScript
776 lines
36 KiB
TypeScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import {
|
|
BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList, Legend,
|
|
} from 'recharts';
|
|
import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp, RefreshCw, Gauge, AlertTriangle, Building2, ChevronRight, UserRound } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
|
|
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
|
import { buildHydrogenDrillUrl } from './hydrogen-drill-context';
|
|
|
|
const REGION_COLORS = [
|
|
'#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
|
|
'#10b981', '#ef4444', '#6366f1', '#14b8a6',
|
|
'#94a3b8',
|
|
];
|
|
|
|
interface YAxisTickProps {
|
|
x?: number;
|
|
y?: number;
|
|
index?: number;
|
|
payload?: { value: string };
|
|
}
|
|
|
|
function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
|
|
return (
|
|
<g transform={`translate(${x},${y})`}>
|
|
<circle cx={-172} cy={0} r={9} fill="#3b82f6" />
|
|
<text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
|
|
{index + 1}
|
|
</text>
|
|
<text x={-154} y={4} textAnchor="start" fontSize={11} fill="#475569">
|
|
{payload?.value}
|
|
</text>
|
|
</g>
|
|
);
|
|
}
|
|
|
|
// ---------- 数字格式化 ----------
|
|
function fmtKg(kg: number): { value: string; unit: string } {
|
|
if (kg >= 1000) return { value: (kg / 1000).toFixed(2), unit: 'T' };
|
|
return { value: kg.toFixed(2), unit: 'Kg' };
|
|
}
|
|
function fmtYuan(yuan: number): { value: string; unit: string } {
|
|
const abs = Math.abs(yuan);
|
|
if (abs >= 100_000_000) return { value: (yuan / 100_000_000).toFixed(2), unit: '亿元' };
|
|
if (abs >= 10_000) {
|
|
const w = yuan / 10_000;
|
|
return { value: w.toLocaleString('zh-CN', { maximumFractionDigits: 2 }), unit: '万元' };
|
|
}
|
|
return { value: yuan.toLocaleString('zh-CN', { maximumFractionDigits: 0 }), unit: '元' };
|
|
}
|
|
|
|
// ---------- KPI 卡 ----------
|
|
interface KpiCardProps {
|
|
icon: React.ReactNode;
|
|
label: string;
|
|
hero: { value: string; unit: string };
|
|
rows: { label: string; value: string; valueClass?: string }[];
|
|
accentClass: string;
|
|
iconBg: string;
|
|
}
|
|
function KpiCard({ icon, label, hero, rows, accentClass, iconBg }: KpiCardProps) {
|
|
return (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`w-7 h-7 rounded-xl flex items-center justify-center ${iconBg}`}>
|
|
{icon}
|
|
</div>
|
|
<span className="text-[11px] font-bold text-slate-500">{label}</span>
|
|
</div>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className={`text-xl md:text-2xl font-black tabular-nums leading-none ${accentClass}`}>{hero.value}</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">{hero.unit}</span>
|
|
</div>
|
|
<div className="space-y-0.5 pt-1 border-t border-slate-50">
|
|
{rows.map((r, i) => (
|
|
<div key={i} className="flex items-center justify-between text-[11px] font-bold">
|
|
<span className="text-slate-400">{r.label}</span>
|
|
<span className={`tabular-nums ${r.valueClass ?? 'text-slate-700'}`}>{r.value}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================================
|
|
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 k = data.kpi;
|
|
const top5 = data.top5;
|
|
const regions = data.regions;
|
|
const monthly = data.monthly;
|
|
const customers = data.customers;
|
|
const stations = data.stations;
|
|
const availableYears = data.availableYears;
|
|
const activeYear = data.year;
|
|
|
|
const yearKgFmt = fmtKg(k.yearKg);
|
|
const yearFeeFmt = fmtYuan(k.yearFee);
|
|
const yearProfitFmt = fmtYuan(k.yearProfit);
|
|
const ourYearKgFmt = fmtKg(k.ourYearKg);
|
|
const customerYearKgFmt = fmtKg(k.customerYearKg);
|
|
const monthKgFmt = fmtKg(k.monthKg);
|
|
const monthFeeFmt = fmtYuan(k.monthFee);
|
|
const todayKgFmt = fmtKg(k.todayKg);
|
|
const todayFeeFmt = fmtYuan(k.todayFee);
|
|
const customerYearFee = Math.max(0, k.yearFee - k.ourYearFee);
|
|
const customerYearFeeFmt = fmtYuan(customerYearFee);
|
|
const yearRevenueFmt = fmtYuan(k.yearRevenue);
|
|
|
|
const profitColor = k.yearProfit >= 0 ? 'text-emerald-600' : 'text-red-600';
|
|
const monthAvgKg = monthly.length > 0 ? monthly.reduce((sum, m) => sum + m.kg, 0) / monthly.length : 0;
|
|
const bestMonth = monthly.reduce<typeof monthly[number] | null>((best, item) => (!best || item.kg > best.kg ? item : best), null);
|
|
const latestMonth = monthly[monthly.length - 1];
|
|
const prevMonth = monthly[monthly.length - 2];
|
|
const monthMomentum = latestMonth && prevMonth && prevMonth.kg > 0 ? (latestMonth.kg - prevMonth.kg) / prevMonth.kg * 100 : null;
|
|
const top5Share = top5.reduce((sum, item) => sum + item.kg, 0) / Math.max(1, k.yearKg) * 100;
|
|
const profitYield = k.yearRevenue > 0 ? k.yearProfit / k.yearRevenue * 100 : 0;
|
|
const stationAvgKg = stations.length > 0 ? k.yearKg / stations.length : 0;
|
|
const openStation = (station: typeof stations[number]) => {
|
|
const now = new Date();
|
|
const endDate = activeYear === now.getFullYear()
|
|
? `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
|
: `${activeYear}-12-31`;
|
|
const url = buildHydrogenDrillUrl(
|
|
{ pathname: window.location.pathname, search: window.location.search, hash: '#hydrogen' },
|
|
{
|
|
level: 'station',
|
|
year: activeYear,
|
|
stationId: station.id,
|
|
stationName: station.name,
|
|
vehicleScope: 'lingniu',
|
|
startDate: `${activeYear}-01-01`,
|
|
endDate,
|
|
},
|
|
);
|
|
window.history.pushState(null, '', url);
|
|
window.dispatchEvent(new HashChangeEvent('hashchange'));
|
|
};
|
|
const openCustomer = (customer: typeof customers[number]) => {
|
|
const now = new Date();
|
|
const endDate = activeYear === now.getFullYear()
|
|
? `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
|
: `${activeYear}-12-31`;
|
|
const url = buildHydrogenDrillUrl(
|
|
{ pathname: window.location.pathname, search: window.location.search, hash: '#hydrogen' },
|
|
{
|
|
level: 'customer',
|
|
year: activeYear,
|
|
customerName: customer.name,
|
|
vehicleScope: 'lingniu',
|
|
startDate: `${activeYear}-01-01`,
|
|
endDate,
|
|
},
|
|
);
|
|
window.history.pushState(null, '', url);
|
|
window.dispatchEvent(new HashChangeEvent('hashchange'));
|
|
};
|
|
|
|
// 月度收支组合数据（推算"年内每月"图）
|
|
const monthlyDual = monthly.map(m => ({
|
|
...m,
|
|
monthLabel: m.month.slice(5).replace(/^0/, '') + '月',
|
|
}));
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3 relative">
|
|
{/* 顶部说明条 + 年份切换 + 刷新按钮 */}
|
|
<div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400 flex items-center justify-between gap-2">
|
|
<span className="truncate">{lastRefreshAt ? `更新于 ${formatRefreshTime(lastRefreshAt)}` : '数据自 2025-01-01 起'}</span>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<div className="flex items-center gap-1 bg-slate-50 rounded-lg p-0.5">
|
|
{availableYears.map(y => {
|
|
const active = y === activeYear;
|
|
return (
|
|
<button
|
|
key={y}
|
|
onClick={() => setYear(y)}
|
|
className={`px-2 py-0.5 text-[11px] font-bold rounded-md transition-all ${
|
|
active ? 'bg-white text-blue-600 shadow-sm' : 'text-slate-400 hover:text-slate-600'
|
|
}`}
|
|
>
|
|
{y}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<button
|
|
onClick={() => void load(year, true)}
|
|
disabled={refreshing}
|
|
className="flex items-center gap-1 px-2 py-0.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
|
|
title="手动刷新（绕过缓存）"
|
|
>
|
|
<RefreshCw size={11} className={refreshing ? 'animate-spin' : ''} strokeWidth={2.6} />
|
|
<span className="text-[11px] font-bold">刷新</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* KPI 5 卡 */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
|
|
<KpiCard
|
|
icon={<Fuel size={14} className="text-cyan-600" strokeWidth={2.4} />}
|
|
iconBg="bg-cyan-50"
|
|
accentClass="text-slate-800"
|
|
label="累计加氢量"
|
|
hero={yearKgFmt}
|
|
rows={[
|
|
{ label: '我司', value: `${ourYearKgFmt.value} ${ourYearKgFmt.unit}` },
|
|
{ label: '客户', value: `${customerYearKgFmt.value} ${customerYearKgFmt.unit}` },
|
|
]}
|
|
/>
|
|
<KpiCard
|
|
icon={<Wallet size={14} className="text-blue-600" strokeWidth={2.4} />}
|
|
iconBg="bg-blue-50"
|
|
accentClass="text-slate-800"
|
|
label="累计加氢成本"
|
|
hero={{ value: `¥${yearFeeFmt.value}`, unit: yearFeeFmt.unit }}
|
|
rows={[
|
|
{ label: '公司单成本', value: `¥${fmtYuan(k.ourYearFee).value} ${fmtYuan(k.ourYearFee).unit}` },
|
|
{ label: '客户单成本', value: `¥${customerYearFeeFmt.value} ${customerYearFeeFmt.unit}` },
|
|
]}
|
|
/>
|
|
<KpiCard
|
|
icon={<TrendingUp size={14} className="text-emerald-600" strokeWidth={2.4} />}
|
|
iconBg="bg-emerald-50"
|
|
accentClass={profitColor}
|
|
label="客户单毛利"
|
|
hero={{ value: `¥${yearProfitFmt.value}`, unit: yearProfitFmt.unit }}
|
|
rows={[
|
|
{ label: '收入', value: `¥${yearRevenueFmt.value} ${yearRevenueFmt.unit}` },
|
|
{ label: '客户单成本', value: `¥${customerYearFeeFmt.value} ${customerYearFeeFmt.unit}` },
|
|
]}
|
|
/>
|
|
<KpiCard
|
|
icon={<CalendarDays size={14} className="text-amber-600" strokeWidth={2.4} />}
|
|
iconBg="bg-amber-50"
|
|
accentClass="text-amber-600"
|
|
label="本月加氢"
|
|
hero={monthKgFmt}
|
|
rows={[
|
|
{ label: '加氢费', value: `¥${monthFeeFmt.value} ${monthFeeFmt.unit}` },
|
|
{ label: '占年比', value: `${k.yearKg > 0 ? (k.monthKg / k.yearKg * 100).toFixed(1) : '0.0'}%` },
|
|
]}
|
|
/>
|
|
<KpiCard
|
|
icon={<Sparkles size={14} className="text-violet-600" strokeWidth={2.4} />}
|
|
iconBg="bg-violet-50"
|
|
accentClass="text-violet-600"
|
|
label="本日加氢"
|
|
hero={todayKgFmt}
|
|
rows={[
|
|
{ label: '加氢费', value: `¥${todayFeeFmt.value} ${todayFeeFmt.unit}` },
|
|
{ label: '占月比', value: `${k.monthKg > 0 ? (k.todayKg / k.monthKg * 100).toFixed(1) : '0.0'}%` },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 md:gap-3">
|
|
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div>
|
|
<div className="text-[11px] font-black text-slate-400">月度动能</div>
|
|
<div className="mt-1 text-lg font-black text-slate-900">
|
|
{monthMomentum === null ? '暂无对比' : `${monthMomentum >= 0 ? '+' : ''}${monthMomentum.toFixed(1)}%`}
|
|
</div>
|
|
</div>
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50 text-blue-600 ring-1 ring-blue-100">
|
|
<Gauge size={18} />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
|
{latestMonth ? `${latestMonth.month} 加氢 ${fmtKg(latestMonth.kg).value}${fmtKg(latestMonth.kg).unit}` : '暂无月度数据'}
|
|
{bestMonth ? ` · 峰值 ${bestMonth.month}` : ''}
|
|
{monthAvgKg > 0 ? ` · 月均 ${fmtKg(monthAvgKg).value}${fmtKg(monthAvgKg).unit}` : ''}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div>
|
|
<div className="text-[11px] font-black text-slate-400">站点集中度</div>
|
|
<div className="mt-1 text-lg font-black text-slate-900">Top5 {top5Share.toFixed(1)}%</div>
|
|
</div>
|
|
<span className="flex h-9 w-9 items-center justify-center rounded-xl bg-cyan-50 text-cyan-600 ring-1 ring-cyan-100">
|
|
<Building2 size={18} />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
|
共 {stations.length} 站 · 单站年均 {fmtKg(stationAvgKg).value}{fmtKg(stationAvgKg).unit}
|
|
{top5Share >= 70 ? ' · 头部站点依赖偏高' : ' · 分布相对健康'}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div>
|
|
<div className="text-[11px] font-black text-slate-400">客户单毛利率</div>
|
|
<div className={`mt-1 text-lg font-black ${profitYield >= 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
|
|
{profitYield.toFixed(1)}%
|
|
</div>
|
|
</div>
|
|
<span className={`flex h-9 w-9 items-center justify-center rounded-xl ring-1 ${profitYield >= 0 ? 'bg-emerald-50 text-emerald-600 ring-emerald-100' : 'bg-rose-50 text-rose-600 ring-rose-100'}`}>
|
|
<AlertTriangle size={18} />
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 text-[11px] font-bold leading-relaxed text-slate-500">
|
|
客户单毛利 {yearProfitFmt.value}{yearProfitFmt.unit} · 客户收入 {yearRevenueFmt.value}{yearRevenueFmt.unit}
|
|
{profitYield < 0 ? ' · 需关注亏损站点与客户价格' : ' · 当前保持正向收益'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 月度趋势：年内每月加氢量 */}
|
|
{monthly.length > 0 && (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-bold text-slate-700">{activeYear} 年月度加氢量</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={140}>
|
|
<BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
|
|
<XAxis
|
|
dataKey="monthLabel"
|
|
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
interval={0}
|
|
/>
|
|
<YAxis hide />
|
|
<Tooltip
|
|
formatter={(v) => [`${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })} Kg`, '加氢量']}
|
|
labelFormatter={(d) => `${d}`}
|
|
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
|
cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
|
|
/>
|
|
<Bar dataKey="kg" radius={[4, 4, 0, 0]}>
|
|
{monthlyDual.map((_, i) => (
|
|
<Cell key={i} fill="url(#monthlyBarGrad)" />
|
|
))}
|
|
</Bar>
|
|
<defs>
|
|
<linearGradient id="monthlyBarGrad" x1="0" x2="0" y1="0" y2="1">
|
|
<stop offset="0%" stopColor="#22d3ee" />
|
|
<stop offset="100%" stopColor="#3b82f6" />
|
|
</linearGradient>
|
|
</defs>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
|
|
{/* 月度收支对比 */}
|
|
{monthly.length > 0 && (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-bold text-slate-700">{activeYear} 年月度收支对比</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">单位 元</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={180}>
|
|
<BarChart data={monthlyDual} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
|
|
<XAxis
|
|
dataKey="monthLabel"
|
|
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
interval={0}
|
|
/>
|
|
<YAxis hide />
|
|
<Legend
|
|
verticalAlign="top"
|
|
height={20}
|
|
iconSize={8}
|
|
wrapperStyle={{ fontSize: 11, paddingBottom: 4 }}
|
|
/>
|
|
<Tooltip
|
|
formatter={(v, name) => {
|
|
const f = fmtYuan(Number(v ?? 0));
|
|
return [`¥${f.value} ${f.unit}`, name];
|
|
}}
|
|
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
|
cursor={{ fill: 'rgba(148, 163, 184, 0.06)' }}
|
|
/>
|
|
<Bar dataKey="fee" name="成本支出" fill="#f59e0b" radius={[3, 3, 0, 0]} />
|
|
<Bar dataKey="revenue" name="客户收入" fill="#10b981" radius={[3, 3, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)}
|
|
|
|
{/* Top5 + 区域占比 */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{/* Top5 加氢站 */}
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
|
|
</div>
|
|
<ResponsiveContainer width="100%" height={260}>
|
|
<BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
|
|
<XAxis type="number" hide />
|
|
<YAxis
|
|
type="category"
|
|
dataKey="name"
|
|
width={188}
|
|
tick={<RankYAxisTick />}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
/>
|
|
<Tooltip
|
|
formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
|
|
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
|
/>
|
|
<Bar dataKey="kg" radius={[6, 6, 6, 6]}>
|
|
{top5.map((_, i) => (
|
|
<Cell key={i} fill="url(#topBarGrad)" />
|
|
))}
|
|
<LabelList
|
|
dataKey="kg"
|
|
position="right"
|
|
formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
|
|
fill="#475569"
|
|
fontSize={11}
|
|
fontWeight={700}
|
|
/>
|
|
</Bar>
|
|
<defs>
|
|
<linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
|
|
<stop offset="0%" stopColor="#3b82f6" />
|
|
<stop offset="100%" stopColor="#22d3ee" />
|
|
</linearGradient>
|
|
</defs>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
|
|
{/* 区域占比 */}
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
|
|
<span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
|
|
<div className="flex items-center gap-2">
|
|
<div className="relative w-1/2 h-[200px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={regions}
|
|
dataKey="kg"
|
|
nameKey="region"
|
|
innerRadius={48}
|
|
outerRadius={80}
|
|
paddingAngle={1}
|
|
>
|
|
{regions.map((_, i) => (
|
|
<Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
|
<div className="text-[10px] text-slate-400 font-bold">年合计</div>
|
|
<div className="text-base font-bold text-slate-700 leading-tight">{(k.yearKg / 1000).toFixed(2)}T</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
|
|
{regions.map((r, i) => (
|
|
<div key={r.region} className="flex items-center gap-1.5">
|
|
<span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
|
|
<span className="text-slate-600 truncate">{r.region}</span>
|
|
<span className="text-slate-400 ml-auto font-bold flex-shrink-0">{(r.share * 100).toFixed(1)}%</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 加氢站加氢汇总（全量） */}
|
|
{stations.length > 0 && (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-bold text-slate-700">加氢站加氢汇总</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">共 {stations.length} 站</span>
|
|
</div>
|
|
<div className="overflow-x-auto -mx-1 px-1">
|
|
<table className="w-full text-[11px]">
|
|
<thead>
|
|
<tr className="text-slate-400 font-bold border-b border-slate-100">
|
|
<th className="text-left py-1.5 pl-1 w-8">#</th>
|
|
<th className="text-left py-1.5">加氢站</th>
|
|
<th className="text-right py-1.5 w-20">加氢量</th>
|
|
<th className="text-right py-1.5 pl-2 hidden sm:table-cell">占比</th>
|
|
<th className="text-right py-1.5 pl-2 w-24">氢费收入</th>
|
|
<th className="text-right py-1.5 pr-1 hidden md:table-cell">收入占比</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{stations.map((s, i) => {
|
|
const kgFmt = fmtKg(s.kg);
|
|
const revFmt = fmtYuan(s.revenue);
|
|
return (
|
|
<tr key={s.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
|
|
<td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
|
|
<td className="py-1.5 max-w-[180px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => openStation(s)}
|
|
className="flex max-w-full items-center gap-1 text-left font-bold text-slate-700 hover:text-blue-600"
|
|
title={`查看 ${s.name} 每日明细`}
|
|
>
|
|
<span className="truncate">{s.name}</span>
|
|
<ChevronRight size={12} className="shrink-0 text-slate-300" />
|
|
</button>
|
|
</td>
|
|
<td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
|
|
{kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
|
|
</td>
|
|
<td className="py-1.5 pl-2 text-right hidden sm:table-cell">
|
|
<div className="inline-flex items-center gap-1.5">
|
|
<div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-cyan-400 to-blue-500" style={{ width: `${Math.min(100, s.share * 100)}%` }} />
|
|
</div>
|
|
<span className="text-slate-500 tabular-nums">{(s.share * 100).toFixed(1)}%</span>
|
|
</div>
|
|
</td>
|
|
<td className="py-1.5 pl-2 text-right tabular-nums font-bold text-emerald-600">
|
|
¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
|
|
</td>
|
|
<td className="py-1.5 pr-1 text-right hidden md:table-cell">
|
|
<div className="inline-flex items-center gap-1.5">
|
|
<div className="w-12 h-1 bg-slate-100 rounded-full overflow-hidden">
|
|
<div className="h-full bg-gradient-to-r from-emerald-400 to-emerald-600" style={{ width: `${Math.min(100, s.revenueShare * 100)}%` }} />
|
|
</div>
|
|
<span className="text-slate-500 tabular-nums">{(s.revenueShare * 100).toFixed(1)}%</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 客户账单汇总 Top */}
|
|
{customers.length > 0 && (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-sm font-bold text-slate-700">客户账单汇总</span>
|
|
<span className="text-[11px] text-slate-400 font-bold">Top {customers.length}</span>
|
|
</div>
|
|
<div className="overflow-x-auto -mx-1 px-1">
|
|
<table className="w-full text-[11px]">
|
|
<thead>
|
|
<tr className="text-slate-400 font-bold border-b border-slate-100">
|
|
<th className="text-left py-1.5 pl-1 w-8">#</th>
|
|
<th className="text-left py-1.5">客户</th>
|
|
<th className="text-center py-1.5 w-14 hidden sm:table-cell">承担方</th>
|
|
<th className="text-right py-1.5 w-20">加氢量</th>
|
|
<th className="text-right py-1.5 pl-2 w-24">成本支出</th>
|
|
<th className="text-right py-1.5 pr-1 w-24 hidden md:table-cell">应收</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{customers.map((c2, i) => {
|
|
const kgFmt = fmtKg(c2.kg);
|
|
const costFmt = fmtYuan(c2.cost);
|
|
const revFmt = fmtYuan(c2.revenue);
|
|
return (
|
|
<tr key={c2.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
|
|
<td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
|
|
<td className="py-1.5 max-w-[200px]">
|
|
<button
|
|
type="button"
|
|
onClick={() => openCustomer(c2)}
|
|
className="flex max-w-full items-center gap-1 text-left font-bold text-slate-700 hover:text-blue-600"
|
|
title={`查看 ${c2.name} 每日明细`}
|
|
>
|
|
<UserRound size={12} className="shrink-0 text-slate-300" />
|
|
<span className="truncate">{c2.name}</span>
|
|
<ChevronRight size={12} className="shrink-0 text-slate-300" />
|
|
</button>
|
|
</td>
|
|
<td className="py-1.5 text-center hidden sm:table-cell">
|
|
{c2.payer === 'lingniu' ? (
|
|
<span className="px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 text-[10px] font-bold">羚牛</span>
|
|
) : (
|
|
<span className="px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 text-[10px] font-bold">客户</span>
|
|
)}
|
|
</td>
|
|
<td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
|
|
{kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
|
|
</td>
|
|
<td className="py-1.5 pl-2 text-right tabular-nums text-amber-600 font-bold">
|
|
¥{costFmt.value}<span className="text-slate-400 font-normal ml-0.5">{costFmt.unit}</span>
|
|
</td>
|
|
<td className="py-1.5 pr-1 text-right tabular-nums text-emerald-600 font-bold hidden md:table-cell">
|
|
¥{revFmt.value}<span className="text-slate-400 font-normal ml-0.5">{revFmt.unit}</span>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<RotatingFooterHint />
|
|
|
|
{/* 刷新中：透明遮罩 + 顶部进度条（不替换内容，避免闪烁） */}
|
|
<AnimatePresence>
|
|
{refreshing && data && (
|
|
<motion.div
|
|
key="refresh-overlay"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="fixed top-0 left-0 right-0 h-0.5 z-50 pointer-events-none overflow-hidden"
|
|
>
|
|
<motion.div
|
|
className="h-full bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400"
|
|
initial={{ x: '-100%' }}
|
|
animate={{ x: '100%' }}
|
|
transition={{ duration: 1.2, repeat: Infinity, ease: 'linear' }}
|
|
style={{ width: '40%' }}
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function formatRelative(ts: number): string {
|
|
const s = Math.max(0, Math.floor((Date.now() - ts) / 1000));
|
|
if (s < 5) return '刚刚';
|
|
if (s < 60) return `${s} 秒前`;
|
|
const m = Math.floor(s / 60);
|
|
if (m < 60) return `${m} 分钟前`;
|
|
const h = Math.floor(m / 60);
|
|
if (h < 24) return `${h} 小时前`;
|
|
return new Date(ts).toLocaleString('zh-CN', { hour12: false });
|
|
}
|
|
|
|
function formatRefreshTime(ts: number): string {
|
|
const exactTime = new Date(ts).toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
});
|
|
return `${formatRelative(ts)} · ${exactTime.replace(/\//g, '-')}`;
|
|
}
|
|
|
|
function HydrogenOverviewSkeleton() {
|
|
return (
|
|
<div className="flex flex-col gap-3 animate-pulse">
|
|
<div className="bg-white rounded-xl border border-slate-100 px-3 py-2">
|
|
<div className="h-3 w-44 bg-slate-100 rounded" />
|
|
</div>
|
|
|
|
{/* 5 卡占位 */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 md:gap-3">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-7 h-7 rounded-xl bg-slate-100" />
|
|
<div className="h-3 w-16 bg-slate-100 rounded" />
|
|
</div>
|
|
<div className="h-7 w-24 bg-slate-200 rounded" />
|
|
<div className="space-y-1.5 pt-1 border-t border-slate-50">
|
|
<div className="flex justify-between"><div className="h-2.5 w-10 bg-slate-100 rounded" /><div className="h-2.5 w-16 bg-slate-100 rounded" /></div>
|
|
<div className="flex justify-between"><div className="h-2.5 w-10 bg-slate-100 rounded" /><div className="h-2.5 w-16 bg-slate-100 rounded" /></div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 月度柱图占位 */}
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="h-4 w-32 bg-slate-100 rounded" />
|
|
<div className="h-3 w-12 bg-slate-100 rounded" />
|
|
</div>
|
|
<div className="flex items-end gap-2 h-[120px]">
|
|
{[60, 75, 50, 80, 35, 90, 45].map((h, i) => (
|
|
<div key={i} className="flex-1 bg-slate-100 rounded-t" style={{ height: `${h}%` }} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="h-4 w-32 bg-slate-100 rounded" />
|
|
<div className="h-3 w-12 bg-slate-100 rounded" />
|
|
</div>
|
|
<div className="space-y-3">
|
|
{[100, 78, 56, 40, 28].map((w, i) => (
|
|
<div key={i} className="flex items-center gap-3">
|
|
<div className="w-5 h-5 rounded-full bg-slate-200" />
|
|
<div className="h-3 w-32 bg-slate-100 rounded" />
|
|
<div className="flex-1 h-4 rounded-md bg-gradient-to-r from-slate-200 to-slate-100" style={{ maxWidth: `${w}%` }} />
|
|
<div className="h-3 w-12 bg-slate-100 rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 flex flex-col gap-3">
|
|
<div className="h-4 w-28 bg-slate-100 rounded" />
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-1/2 h-[200px] flex items-center justify-center">
|
|
<div className="w-32 h-32 rounded-full border-[18px] border-slate-100" />
|
|
</div>
|
|
<div className="flex-1 space-y-2">
|
|
{Array.from({ length: 5 }).map((_, i) => (
|
|
<div key={i} className="flex items-center gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-slate-200" />
|
|
<div className="h-3 w-16 bg-slate-100 rounded" />
|
|
<div className="h-3 w-10 bg-slate-100 rounded ml-auto" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center text-[11px] text-slate-400 font-bold flex items-center justify-center gap-1.5">
|
|
<span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
|
|
正在加载氢能总览…
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|