193 lines
8.6 KiB
TypeScript
193 lines
8.6 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { BatteryCharging, CalendarDays, ChevronRight, Plug, TrendingUp, Wallet } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import TrendBadge from './TrendBadge';
|
|
import { fetchElectricMonthly } from './api';
|
|
import type { CustomerType, DateQuickPick, ElectricMonthGroup } from './types';
|
|
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
|
import { EmptyState, ErrorState, LoadingState, MetricTile } from '../../components/ui/surface';
|
|
import DailyRangeControls from './daily-range/DailyRangeControls';
|
|
import {
|
|
getQuickRange,
|
|
getRangeModeLabel,
|
|
normalizeRange,
|
|
type RangeMode,
|
|
} from './daily-range/model';
|
|
import { summarizeElectricMonths } from './electric-daily/model';
|
|
|
|
export default function ElectricDaily() {
|
|
const [customer, setCustomer] = useState<CustomerType>('lingniu');
|
|
const [pick, setPick] = useState<RangeMode>('last15');
|
|
const [dateRange, setDateRange] = useState(() => getQuickRange('last15'));
|
|
const [months, setMonths] = useState<ElectricMonthGroup[] | null>(null);
|
|
const [openMonths, setOpenMonths] = useState<Set<string>>(new Set());
|
|
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 };
|
|
fetchElectricMonthly(customer, query)
|
|
.then(m => {
|
|
if (cancelled) return;
|
|
setMonths(m);
|
|
// 默认展开最新一个月
|
|
if (m.length > 0) setOpenMonths(new Set([m[0].month]));
|
|
})
|
|
.catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
|
|
return () => { cancelled = true; };
|
|
}, [customer, pick, effectiveRange.start, effectiveRange.end]);
|
|
|
|
const toggleMonth = (m: string) => setOpenMonths(prev => {
|
|
const next = new Set(prev);
|
|
next.has(m) ? next.delete(m) : next.add(m);
|
|
return next;
|
|
});
|
|
|
|
const {
|
|
totalKwh,
|
|
totalFee,
|
|
activeDays,
|
|
abnormalDays,
|
|
avgKwh,
|
|
avgPrice,
|
|
hasFeeDetail,
|
|
} = useMemo(() => summarizeElectricMonths(months), [months]);
|
|
const scopeLabel = getRangeModeLabel(pick);
|
|
const rangeText = `${effectiveRange.start} 至 ${effectiveRange.end}`;
|
|
const showExternalEmpty = customer === 'external' && months !== null && totalKwh === 0;
|
|
|
|
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">
|
|
<DailyRangeControls
|
|
pick={pick}
|
|
dateRange={dateRange}
|
|
customer={customer}
|
|
onQuickPick={applyQuickPick}
|
|
onCustomPick={() => setPick('custom')}
|
|
onDateRangeChange={updateDateRange}
|
|
onCustomerChange={setCustomer}
|
|
/>
|
|
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
|
<MetricTile icon={BatteryCharging} label={`${scopeLabel}充电量`} value={totalKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={rangeText} />
|
|
<MetricTile
|
|
icon={Wallet}
|
|
label="充电费用"
|
|
value={hasFeeDetail ? `¥${totalFee.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}` : '待同步'}
|
|
helper={hasFeeDetail ? `均价 ${avgPrice.toFixed(2)} 元/度` : '当前明细仅返回充电量'}
|
|
tone={hasFeeDetail ? 'emerald' : 'slate'}
|
|
/>
|
|
<MetricTile icon={CalendarDays} label="有效天数" value={`${activeDays}`} unit="天" helper={`日均 ${avgKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度`} tone="amber" />
|
|
<MetricTile icon={TrendingUp} label="波动提醒" value={abnormalDays} unit="天" helper="环比超过 30% 标记" tone={abnormalDays > 0 ? 'rose' : 'slate'} />
|
|
</div>
|
|
|
|
{/* 外部车辆 数据未就绪 */}
|
|
{showExternalEmpty && (
|
|
<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>
|
|
)}
|
|
|
|
{/* 月份分组表 */}
|
|
{!showExternalEmpty && (
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
|
<div className="grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2 bg-slate-50 text-[11px] font-bold text-slate-500">
|
|
<span>月份 / 日期</span>
|
|
<span className="text-right">充电量 (度)</span>
|
|
<span className="text-right">环比</span>
|
|
</div>
|
|
{error ? (
|
|
<div className="p-3"><ErrorState message={error} /></div>
|
|
) : months === null ? (
|
|
<div className="p-3"><LoadingState label="正在加载充电明细" /></div>
|
|
) : months.length === 0 ? (
|
|
<div className="p-3"><EmptyState title="暂无充电数据" description="请切换时间范围或车辆归属" /></div>
|
|
) : months.map(m => {
|
|
const open = openMonths.has(m.month);
|
|
return (
|
|
<div key={m.month} className="border-t border-slate-100 first:border-t-0">
|
|
<button
|
|
onClick={() => toggleMonth(m.month)}
|
|
className={`w-full grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2.5 text-left transition-colors ${
|
|
open ? 'bg-blue-50/30' : 'hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
<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`} />
|
|
{m.month}
|
|
</span>
|
|
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
|
{m.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
|
</span>
|
|
<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"
|
|
>
|
|
{m.rows.map(d => {
|
|
const isAbnormal = Math.abs(d.chainPct) >= 0.3;
|
|
const abnormalBg = isAbnormal
|
|
? d.chainPct > 0 ? 'bg-emerald-50/40' : 'bg-red-50/40'
|
|
: 'bg-slate-50/50';
|
|
return (
|
|
<div
|
|
key={d.date}
|
|
className={`grid grid-cols-[minmax(0,1fr)_120px_88px] md:grid-cols-[minmax(0,1fr)_160px_120px] gap-3 px-3 py-2 pl-9 border-t border-slate-100 ${abnormalBg}`}
|
|
>
|
|
<span className="text-[12px] text-slate-600">{d.date.slice(5)}</span>
|
|
<span className="text-right text-[12px] text-slate-700 font-bold tabular-nums">
|
|
{d.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}
|
|
</span>
|
|
<span className="text-right"><TrendBadge value={d.chainPct} /></span>
|
|
</div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
<RotatingFooterHint />
|
|
</div>
|
|
);
|
|
}
|