55 lines
2.8 KiB
TypeScript
55 lines
2.8 KiB
TypeScript
import { FileSpreadsheet } from 'lucide-react';
|
|
import { formatDateTime, formatFixed, KIND_LABEL, KIND_STYLE } from './model';
|
|
import type { ListItem } from './types';
|
|
|
|
interface RecordTableProps {
|
|
items: ListItem[];
|
|
}
|
|
|
|
export function RecordTable({ items }: RecordTableProps) {
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-[11px]">
|
|
<thead className="bg-slate-50/40 text-slate-400 font-bold">
|
|
<tr>
|
|
<th className="px-3 py-2 text-left whitespace-nowrap">充电时间</th>
|
|
<th className="px-3 py-2 text-left whitespace-nowrap">车牌</th>
|
|
<th className="px-3 py-2 text-center whitespace-nowrap">分类</th>
|
|
<th className="px-3 py-2 text-left">电站 / 终端</th>
|
|
<th className="px-3 py-2 text-right whitespace-nowrap">电量(度)</th>
|
|
<th className="px-3 py-2 text-right whitespace-nowrap">费用(元)</th>
|
|
<th className="px-3 py-2 text-right whitespace-nowrap">时长(分)</th>
|
|
<th className="px-3 py-2 text-left whitespace-nowrap">订单编号</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map(item => (
|
|
<tr key={item.id} className="border-t border-slate-100 hover:bg-slate-50/60">
|
|
<td className="px-3 py-2 text-slate-600 whitespace-nowrap font-mono">{formatDateTime(item.start_time, 16)}</td>
|
|
<td className="px-3 py-2 font-bold text-slate-700 font-mono whitespace-nowrap">{item.plate || item.judged_plate || <span className="text-slate-300">—</span>}</td>
|
|
<td className="px-3 py-2 text-center">
|
|
<span className={`px-1.5 py-0.5 rounded text-[10px] font-bold border ${KIND_STYLE[item.vehicle_kind]}`}>
|
|
{KIND_LABEL[item.vehicle_kind]}
|
|
</span>
|
|
</td>
|
|
<td className="px-3 py-2 text-slate-600 truncate max-w-xs">{item.station_name || '—'}{item.terminal_name ? ` · ${item.terminal_name}` : ''}</td>
|
|
<td className="px-3 py-2 text-right text-slate-700 font-bold tabular-nums">{formatFixed(item.kwh, 2)}</td>
|
|
<td className="px-3 py-2 text-right text-slate-700 font-bold tabular-nums">{formatFixed(item.fee, 2)}</td>
|
|
<td className="px-3 py-2 text-right text-slate-500 tabular-nums">{item.duration_min ?? '—'}</td>
|
|
<td className="px-3 py-2 text-slate-400 font-mono text-[10px]">{item.order_no}</td>
|
|
</tr>
|
|
))}
|
|
{items.length === 0 && (
|
|
<tr>
|
|
<td colSpan={8} className="px-3 py-8 text-center text-slate-300 text-[11px] font-bold">
|
|
<FileSpreadsheet size={18} className="mx-auto mb-2 text-slate-200" />
|
|
尚无记录，先上传一份 xlsx 试试
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|