shishengliang
c2f21a3a8a
ci/woodpecker/push/woodpecker Pipeline was successful
Undo the full-tree rollback in 6ea1b3d and restore the pre-rollback v1.2.0 code. Preserve the new asset flow rules, abnormal inventory separation, range drilldowns and date picker; adapt the regression test to the restored routes layout.
53 lines
2.8 KiB
TypeScript
53 lines
2.8 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { BadgeCheck, CarFront, FileText, ReceiptText, WalletCards } from 'lucide-react';
|
|
import { fetchEtcOverview, type EtcOverviewResponse } from './api';
|
|
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
|
import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';
|
|
|
|
function formatYuan(value: number) {
|
|
return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
|
|
}
|
|
|
|
export default function ETCView() {
|
|
const [data, setData] = useState<EtcOverviewResponse | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
fetchEtcOverview()
|
|
.then(result => { if (!cancelled) setData(result); })
|
|
.catch(reason => { if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason)); });
|
|
return () => { cancelled = true; };
|
|
}, []);
|
|
|
|
if (error) return <ErrorState message="ETC 数据源暂时不可用，请稍后刷新。" />;
|
|
if (!data) return <LoadingState label="正在核对 ETC 台账" />;
|
|
|
|
if (!data.hasData) {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<EmptyState title="暂无 ETC 通行台账" description="当前账单和通行明细均未入库，接入后会自动展示统计数据。" />
|
|
<RotatingFooterHint hints={['ETC 台账状态已按数据库实时核对', '待通行明细入库后自动生成统计']} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
|
<MetricTile icon={ReceiptText} label="通行明细" value={data.tollRecordCount.toLocaleString('zh-CN')} unit="笔" helper={data.latestTollTime ? `最新记录 ${data.latestTollTime}` : '暂无通行时间'} />
|
|
<MetricTile icon={CarFront} label="涉及车辆" value={data.vehicleCount.toLocaleString('zh-CN')} unit="台" helper="按通行明细车牌去重" tone="emerald" />
|
|
<MetricTile icon={WalletCards} label="通行费金额" value={formatYuan(data.totalAmount)} helper="通行费与服务费合计" tone="amber" />
|
|
<MetricTile icon={FileText} label="ETC 账单" value={data.billCount.toLocaleString('zh-CN')} unit="张" helper={`应收 ${formatYuan(data.receivableAmount)} · 已收 ${formatYuan(data.paidAmount)}`} tone="slate" />
|
|
</div>
|
|
<SurfaceCard className="p-4">
|
|
<div className="flex items-start gap-2 text-xs font-bold text-slate-500">
|
|
<BadgeCheck size={17} className="mt-0.5 shrink-0 text-emerald-500" />
|
|
<div>当前统计直接读取 ETC 通行明细与账单台账；金额、应收和已收均不做推算。</div>
|
|
</div>
|
|
</SurfaceCard>
|
|
<RotatingFooterHint />
|
|
</div>
|
|
);
|
|
}
|