369 lines
18 KiB
TypeScript
369 lines
18 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import { ChevronRight, Fuel, Plug, TrendingUp, Truck } from 'lucide-react';
|
||
import { motion, AnimatePresence } from 'motion/react';
|
||
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
|
||
import TrendBadge from './TrendBadge';
|
||
import { fetchHydrogenDaily } from './api';
|
||
import type { CustomerType, DateQuickPick, HydrogenDailyRow } from './types';
|
||
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
||
import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
|
||
|
||
const QUICK_PICK_OPTIONS: Array<{ id: DateQuickPick; label: string }> = [
|
||
{ id: 'thisWeek', label: '本周' },
|
||
{ id: 'thisMonth', label: '本月' },
|
||
{ id: 'last15', label: '近 15 天' },
|
||
];
|
||
|
||
type RangeMode = DateQuickPick | 'custom';
|
||
|
||
function fmtYmd(d: Date): string {
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
function addDays(d: Date, days: number): Date {
|
||
const next = new Date(d);
|
||
next.setDate(next.getDate() + days);
|
||
return next;
|
||
}
|
||
|
||
function getQuickRange(pick: DateQuickPick): { start: string; end: string } {
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
if (pick === 'thisWeek') {
|
||
const day = today.getDay() || 7;
|
||
return { start: fmtYmd(addDays(today, -(day - 1))), end: fmtYmd(today) };
|
||
}
|
||
if (pick === 'thisMonth') {
|
||
return { start: fmtYmd(new Date(today.getFullYear(), today.getMonth(), 1)), end: fmtYmd(today) };
|
||
}
|
||
return { start: fmtYmd(addDays(today, -14)), end: fmtYmd(today) };
|
||
}
|
||
|
||
function normalizeRange(start: string, end: string): { start: string; end: string } {
|
||
return start <= end ? { start, end } : { start: end, end: start };
|
||
}
|
||
|
||
export default function HydrogenDaily() {
|
||
const [pick, setPick] = useState<RangeMode>('last15');
|
||
const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
|
||
const [customer, setCustomer] = useState<CustomerType>('lingniu');
|
||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||
const [rows, setRows] = useState<HydrogenDailyRow[] | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const effectiveRange = useMemo(() => normalizeRange(dateRange.start, dateRange.end), [dateRange.start, dateRange.end]);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
setError(null);
|
||
const query = pick === 'custom'
|
||
? { startDate: effectiveRange.start, endDate: effectiveRange.end }
|
||
: { range: pick };
|
||
fetchHydrogenDaily(query, customer)
|
||
.then(r => { if (!cancelled) setRows(r); })
|
||
.catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
|
||
return () => { cancelled = true; };
|
||
}, [pick, customer, effectiveRange.start, effectiveRange.end]);
|
||
|
||
// 柱图：按日期升序，用于"从左到右时间流"
|
||
const trendData = useMemo(() => (rows ? [...rows].sort((a, b) => a.date.localeCompare(b.date)) : []), [rows]);
|
||
const totalKg = (rows ?? []).reduce((a, r) => a + r.totalKg, 0);
|
||
const activeDays = (rows ?? []).filter(r => r.totalKg > 0).length;
|
||
const stationCount = useMemo(() => {
|
||
const names = new Set<string>();
|
||
(rows ?? []).forEach(r => r.stations.forEach(s => names.add(s.name)));
|
||
return names.size;
|
||
}, [rows]);
|
||
const avgKg = activeDays > 0 ? totalKg / activeDays : 0;
|
||
const scopeLabel = pick === 'custom'
|
||
? '自定义区间'
|
||
: QUICK_PICK_OPTIONS.find(item => item.id === pick)?.label ?? '当前时段';
|
||
const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
|
||
const peakDay = trendData.reduce<HydrogenDailyRow | null>((best, item) => (!best || item.totalKg > best.totalKg ? item : best), null);
|
||
const lowDay = trendData
|
||
.filter(item => item.totalKg > 0)
|
||
.reduce<HydrogenDailyRow | null>((low, item) => (!low || item.totalKg < low.totalKg ? item : low), null);
|
||
const zeroDays = (rows ?? []).filter(r => r.totalKg === 0).length;
|
||
|
||
const toggle = (date: string) => setExpanded(prev => {
|
||
const next = new Set(prev);
|
||
next.has(date) ? next.delete(date) : next.add(date);
|
||
return next;
|
||
});
|
||
|
||
const applyQuickPick = (nextPick: DateQuickPick) => {
|
||
setPick(nextPick);
|
||
setDateRange(getQuickRange(nextPick));
|
||
};
|
||
|
||
const updateDateRange = (field: 'start' | 'end', value: string) => {
|
||
if (!value) return;
|
||
setPick('custom');
|
||
setDateRange(prev => ({ ...prev, [field]: value }));
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col gap-3">
|
||
<SurfaceCard className="p-2 md:p-3">
|
||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
||
{QUICK_PICK_OPTIONS.map(opt => (
|
||
<button
|
||
key={opt.id}
|
||
onClick={() => applyQuickPick(opt.id)}
|
||
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
||
pick === opt.id
|
||
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
||
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
<button
|
||
onClick={() => setPick('custom')}
|
||
className={`min-h-9 shrink-0 rounded-xl border px-3 text-[12px] font-black transition-colors ${
|
||
pick === 'custom'
|
||
? 'border-blue-200 bg-blue-50 text-blue-600 shadow-sm'
|
||
: 'border-slate-100 bg-white text-slate-500 hover:bg-slate-50'
|
||
}`}
|
||
>
|
||
自定义
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-2 grid grid-cols-2 gap-2">
|
||
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
||
<span className="block text-[10px] font-black text-slate-400">开始日期</span>
|
||
<input
|
||
type="date"
|
||
value={dateRange.start}
|
||
onChange={e => updateDateRange('start', e.target.value)}
|
||
onInput={e => updateDateRange('start', e.currentTarget.value)}
|
||
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
||
/>
|
||
</label>
|
||
<label className="min-w-0 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2">
|
||
<span className="block text-[10px] font-black text-slate-400">结束日期</span>
|
||
<input
|
||
type="date"
|
||
value={dateRange.end}
|
||
onChange={e => updateDateRange('end', e.target.value)}
|
||
onInput={e => updateDateRange('end', e.currentTarget.value)}
|
||
className="mt-1 h-6 w-full bg-transparent text-[12px] font-black text-slate-800 outline-none"
|
||
/>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="mt-2 grid grid-cols-2 gap-1 rounded-xl bg-slate-100 p-1">
|
||
{(['lingniu', 'external'] as const).map(c => (
|
||
<button
|
||
key={c}
|
||
onClick={() => setCustomer(c)}
|
||
className={`flex min-h-9 items-center justify-center gap-1.5 rounded-lg text-[12px] font-black transition-all ${
|
||
customer === c ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
|
||
}`}
|
||
>
|
||
<Truck size={14} />
|
||
{c === 'external' ? '外部车辆' : '羚牛车辆'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</SurfaceCard>
|
||
|
||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||
<MetricTile icon={Fuel} label={`${scopeLabel}加氢量`} value={totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="Kg" helper={rangeText} />
|
||
<MetricTile icon={Truck} label="车辆归属" value={customer === 'external' ? '外部' : '羚牛'} helper="当前筛选口径" tone="emerald" />
|
||
<MetricTile icon={TrendingUp} label="有效天数" value={`${activeDays}/${rows?.length ?? 0}`} helper={`日均 ${avgKg.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} Kg`} tone="amber" />
|
||
<MetricTile icon={Plug} label="涉及加氢站" value={stationCount} unit="站" helper="按明细站点去重" tone="slate" />
|
||
</div>
|
||
|
||
{/* 外部车辆：新系统数据还没准备好 */}
|
||
{customer === 'external' && rows !== null && totalKg === 0 && (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 8 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
|
||
>
|
||
<div className="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center mb-3 relative">
|
||
<Plug size={22} className="text-blue-500" />
|
||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-400 animate-ping" />
|
||
<span className="absolute -top-0.5 -right-0.5 w-3 h-3 rounded-full bg-blue-500" />
|
||
</div>
|
||
<div className="text-sm font-bold text-slate-700 mb-1">外部车辆 · 数据未就绪</div>
|
||
<div className="text-[11px] text-slate-400 max-w-[280px] leading-relaxed">
|
||
新系统的外部车辆加氢数据还在准备中
|
||
<br />
|
||
上线后此处将展示完整明细
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{/* 时段加氢量柱图（外部车辆无数据时不渲染） */}
|
||
{!(customer === 'external' && totalKg === 0) && trendData.length > 0 && (
|
||
<SurfaceCard>
|
||
<div className="flex items-center justify-between px-4 pt-4 mb-2">
|
||
<span className="text-sm font-bold text-slate-700">每日加氢量</span>
|
||
<span className="text-[11px] text-slate-400 font-bold">时间单位：日 · 单位 Kg</span>
|
||
</div>
|
||
<div className="mx-4 mb-2 grid grid-cols-3 gap-2 rounded-xl bg-slate-50 p-2">
|
||
<div>
|
||
<div className="text-[10px] font-black text-slate-400">峰值日</div>
|
||
<div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
|
||
{peakDay ? `${peakDay.date.slice(5)} · ${peakDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-[10px] font-black text-slate-400">低谷日</div>
|
||
<div className="mt-0.5 truncate text-[11px] font-black text-slate-800">
|
||
{lowDay ? `${lowDay.date.slice(5)} · ${lowDay.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '—'}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div className="text-[10px] font-black text-slate-400">零数据日</div>
|
||
<div className={`mt-0.5 text-[11px] font-black ${zeroDays > 0 ? 'text-amber-600' : 'text-emerald-600'}`}>
|
||
{zeroDays} 天
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="h-[180px] min-w-0 px-2 pb-2">
|
||
<ResponsiveContainer width="100%" height={180} minWidth={0}>
|
||
<BarChart data={trendData} margin={{ top: 8, right: 8, bottom: 0, left: -16 }}>
|
||
<XAxis
|
||
dataKey="date"
|
||
tickFormatter={(v: string) => v.slice(5)}
|
||
tick={{ fontSize: 10, fill: '#94a3b8' }}
|
||
tickLine={false}
|
||
axisLine={false}
|
||
interval="preserveStartEnd"
|
||
minTickGap={8}
|
||
/>
|
||
<YAxis
|
||
width={42}
|
||
axisLine={false}
|
||
tickLine={false}
|
||
tick={{ fontSize: 9, fill: '#94a3b8' }}
|
||
tickFormatter={(v: number) => v >= 1000 ? `${Math.round(v / 1000)}k` : `${Math.round(v)}`}
|
||
/>
|
||
<Tooltip
|
||
formatter={(v) => [`${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} Kg`, '加氢量']}
|
||
labelFormatter={(d) => `日期 ${d}`}
|
||
contentStyle={{ borderRadius: 12, fontSize: 12 }}
|
||
cursor={{ fill: 'rgba(34, 211, 238, 0.06)' }}
|
||
/>
|
||
{avgKg > 0 && (
|
||
<ReferenceLine
|
||
y={avgKg}
|
||
stroke="#f59e0b"
|
||
strokeDasharray="4 4"
|
||
label={{ value: '均值', position: 'right', fill: '#d97706', fontSize: 10, fontWeight: 700 }}
|
||
/>
|
||
)}
|
||
<Bar dataKey="totalKg" radius={[4, 4, 0, 0]}>
|
||
{trendData.map((_, i) => (
|
||
<Cell key={i} fill="url(#hydrogenBarGrad)" />
|
||
))}
|
||
</Bar>
|
||
<defs>
|
||
<linearGradient id="hydrogenBarGrad" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0%" stopColor="#22d3ee" />
|
||
<stop offset="100%" stopColor="#3b82f6" />
|
||
</linearGradient>
|
||
</defs>
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
</div>
|
||
</SurfaceCard>
|
||
)}
|
||
|
||
{/* 表格（外部车辆 + 全 0 时不渲染，由上方友好空状态替代） */}
|
||
{!(customer === 'external' && rows !== null && totalKg === 0) && (
|
||
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
||
{/* 表头 */}
|
||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
||
<span>日期 / 加氢站</span>
|
||
<span className="hidden md:block text-right">单价 (元/Kg)</span>
|
||
<span className="text-right">加氢量 (Kg)</span>
|
||
<span className="text-right">环比</span>
|
||
</div>
|
||
{/* 合计行 */}
|
||
<div className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 bg-blue-50/50 text-[12px] text-blue-600 font-bold">
|
||
<span>合计</span>
|
||
<span className="hidden md:block" />
|
||
<span className="text-right">{totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}</span>
|
||
<span />
|
||
</div>
|
||
{/* 主行 + 子行 */}
|
||
{error ? (
|
||
<div className="p-3"><ErrorState message={error} /></div>
|
||
) : rows === null ? (
|
||
<div className="p-3"><LoadingState label="正在加载加氢明细" /></div>
|
||
) : rows.length === 0 ? (
|
||
<div className="p-3"><EmptyState title="暂无加氢数据" description="请切换时间范围或车辆归属" /></div>
|
||
) : rows.map(r => {
|
||
const open = expanded.has(r.date);
|
||
const isAbnormal = Math.abs(r.chainPct) >= 0.3;
|
||
const abnormalBg = isAbnormal
|
||
? r.chainPct > 0 ? 'bg-emerald-50/40' : 'bg-red-50/40'
|
||
: '';
|
||
return (
|
||
<div key={r.date} className={`border-t border-slate-100 ${abnormalBg}`}>
|
||
<button
|
||
onClick={() => toggle(r.date)}
|
||
className="w-full grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2.5 text-left hover:bg-slate-50/60 transition-colors"
|
||
>
|
||
<span className="flex items-center gap-1 text-[12px] text-slate-700 font-bold">
|
||
<ChevronRight size={14} className={`transition-transform ${open ? 'rotate-90' : ''} text-slate-400`} />
|
||
{r.date}
|
||
</span>
|
||
<span className="hidden md:block text-right text-[12px] text-slate-300">—</span>
|
||
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
||
{r.totalKg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
||
</span>
|
||
<span className="text-right"><TrendBadge value={r.chainPct} /></span>
|
||
</button>
|
||
<AnimatePresence initial={false}>
|
||
{open && (
|
||
<motion.div
|
||
initial={{ height: 0, opacity: 0 }}
|
||
animate={{ height: 'auto', opacity: 1 }}
|
||
exit={{ height: 0, opacity: 0 }}
|
||
transition={{ duration: 0.15 }}
|
||
className="overflow-hidden bg-slate-50/50"
|
||
>
|
||
{r.stations.map(s => (
|
||
<div
|
||
key={s.name}
|
||
className="grid grid-cols-[minmax(0,1fr)_84px_80px] md:grid-cols-[minmax(0,1fr)_140px_120px_104px] gap-2 md:gap-3 px-3 py-2 pl-6 md:pl-9 border-t border-slate-100 first:border-t-0 items-start"
|
||
>
|
||
<div className="min-w-0">
|
||
<div className="text-[12px] text-slate-700 font-medium whitespace-nowrap leading-snug">
|
||
{s.name}
|
||
</div>
|
||
{s.pricePerKg > 0 && (
|
||
<div className="md:hidden mt-1">
|
||
<span className="inline-flex items-center text-[10px] text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded font-bold whitespace-nowrap">
|
||
单价 {s.pricePerKg} 元/Kg
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<span className="hidden md:block text-right text-[12px] text-slate-500 font-bold tabular-nums">{s.pricePerKg > 0 ? s.pricePerKg : '—'}</span>
|
||
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
||
{s.kg.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
||
</span>
|
||
<span className="text-right"><TrendBadge value={s.chainPct} /></span>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
<RotatingFooterHint />
|
||
</div>
|
||
);
|
||
}
|