130 lines
7.3 KiB
TypeScript
130 lines
7.3 KiB
TypeScript
import { CalendarDays, ChevronDown, Download, Loader2 } from 'lucide-react';
|
|
import { AnimatePresence, motion } from 'motion/react';
|
|
import type { FlowType } from '../../api';
|
|
import { FLOW_META } from '../FlowDetailModal';
|
|
import type { FlowStatisticsCardProps } from './types';
|
|
import { FlowDateRangePicker } from './FlowDateRangePicker';
|
|
|
|
const FLOW_TYPES: FlowType[] = ['delivered', 'returned', 'replaced'];
|
|
|
|
export function FlowStatisticsCard({
|
|
flowRange,
|
|
setFlowRange,
|
|
flowLoading,
|
|
flowStats,
|
|
exportFlowDetails,
|
|
flowDailyExpanded,
|
|
setFlowDailyExpanded,
|
|
setSelectedFlow,
|
|
}: FlowStatisticsCardProps) {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-3 mb-4">
|
|
<div data-testid="asset-flow-card" className="rounded-2xl border border-slate-100 bg-white p-3 shadow-sm">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 text-[13px] font-black text-slate-700">
|
|
<CalendarDays size={14} className="text-blue-500" />
|
|
<span>交还车统计（车次）</span>
|
|
{flowLoading && <Loader2 size={12} className="animate-spin text-slate-400" />}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => exportFlowDetails()}
|
|
disabled={!flowStats?.details.length}
|
|
className="inline-flex h-8 items-center justify-center gap-1 rounded-xl border border-slate-200 bg-slate-50 px-2.5 text-[11px] font-black text-slate-600 transition hover:border-blue-200 hover:bg-blue-50 hover:text-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
<Download size={13} />
|
|
导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p className="mt-1 text-[11px] text-slate-400">按运维签章时间统计；交车包含替换交车，合计＝交车＋还车，同车多笔业务分别计次。</p>
|
|
<FlowDateRangePicker value={flowRange} onChange={setFlowRange} />
|
|
<div className="mt-2 rounded-2xl border border-slate-100 bg-slate-50/70 px-2 py-2.5">
|
|
<div className="grid grid-cols-4 items-center text-center">
|
|
<div className="px-2">
|
|
<div className="text-lg font-black leading-none text-slate-950">{flowStats?.totals.total ?? 0}</div>
|
|
<div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
|
|
</div>
|
|
{FLOW_TYPES.map((type) => (
|
|
<button key={type} type="button"
|
|
data-testid={`asset-flow-total-${type}`}
|
|
disabled={flowLoading || !flowStats?.totals[type]}
|
|
onClick={() => flowStats && setSelectedFlow({ start: flowStats.start, end: flowStats.end, type })}
|
|
className="border-l border-slate-200/70 px-2 transition hover:bg-slate-100 focus-visible:outline-blue-500 disabled:cursor-not-allowed disabled:opacity-35">
|
|
<div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>
|
|
{flowStats?.totals[type] ?? 0}
|
|
</div>
|
|
<div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
data-testid="asset-flow-daily-toggle"
|
|
onClick={() => setFlowDailyExpanded((prev) => !prev)}
|
|
className="mt-2 flex w-full items-center justify-between rounded-xl border border-slate-100 bg-white px-3 py-1.5 text-[12px] font-black text-slate-500 transition hover:border-blue-100 hover:bg-blue-50/50 hover:text-blue-600"
|
|
>
|
|
<span>{flowDailyExpanded ? '收起每日明细' : '展开每日明细'}</span>
|
|
<span className="flex items-center gap-2 text-[11px] text-slate-400">
|
|
{flowStats?.daily.length ?? 0} 天
|
|
<ChevronDown size={15} className={`transition-transform ${flowDailyExpanded ? 'rotate-180' : ''}`} />
|
|
</span>
|
|
</button>
|
|
<AnimatePresence initial={false}>
|
|
{flowDailyExpanded && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="mt-3 max-h-[280px] space-y-2 overflow-y-auto pr-1">
|
|
{flowLoading && (
|
|
<div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">正在加载交还车统计...</div>
|
|
)}
|
|
{!flowLoading && flowStats?.daily.slice().sort((a, b) => b.date.localeCompare(a.date)).map((day) => (
|
|
<div key={day.date} className="rounded-2xl border border-slate-100 bg-white px-3 py-3 shadow-sm">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-[11px] font-black text-slate-400">{day.date}</div>
|
|
<div className="text-[10px] font-bold italic text-slate-300">运维签章时间</div>
|
|
</div>
|
|
<div className="mt-2 grid grid-cols-4 items-center text-center">
|
|
<div className="px-2">
|
|
<div className="text-lg font-black leading-none text-slate-900">{day.total}</div>
|
|
<div className="mt-1 text-[10px] font-black text-slate-400">合计</div>
|
|
</div>
|
|
{FLOW_TYPES.map((type) => {
|
|
const count = day[type];
|
|
return (
|
|
<button
|
|
key={type}
|
|
type="button"
|
|
data-testid={`asset-flow-cell-${day.date}-${type}`}
|
|
disabled={count === 0}
|
|
onClick={() => setSelectedFlow({ date: day.date, type })}
|
|
className="border-l border-slate-100 px-2 text-center transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-35"
|
|
>
|
|
<div className={`text-lg font-black leading-none ${type === 'delivered' ? 'text-blue-600' : type === 'returned' ? 'text-orange-600' : 'text-violet-600'}`}>{count}</div>
|
|
<div className={`mt-1 text-[10px] font-black ${type === 'delivered' ? 'text-blue-500' : type === 'returned' ? 'text-orange-500' : 'text-violet-500'}`}>{type === 'replaced' ? '其中：替换交车' : FLOW_META[type].label}</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!flowLoading && !flowStats?.daily.length && (
|
|
<div className="rounded-xl bg-slate-50 px-3 py-4 text-center text-[11px] font-bold text-slate-400">暂无交换车数据</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|