shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 里程数超过10000显示为xx.xx万KM

Browse Source 
添加 fmtKm() 格式化函数，统计报表中所有里程数值
超过10000时自动转为万单位显示。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-01 21:47:35 +08:00
parent 152935819b
commit ad17803ed1
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/modules/mileage/StatisticsView.tsx
View File

@@ -12,6 +12,11 @@ import {
import type { TargetSummary, TargetVehicle, TrendPoint } from './types'; import type { TargetSummary, TargetVehicle, TrendPoint } from './types';
import { fetchTargets, fetchTargetVehicles, fetchTrend } from './api'; import { fetchTargets, fetchTargetVehicles, fetchTrend } from './api';
function fmtKm(value: number): string {
if (value >= 10000) return (value / 10000).toFixed(2) + '万';
return value.toLocaleString();
}
function shortTargetName(name: string): string { function shortTargetName(name: string): string {
// Extract the number and a short description // Extract the number and a short description
const match = name.match(/(\d+)[辆台](.+)/); const match = name.match(/(\d+)[辆台](.+)/);
@@ -83,14 +88,14 @@ export default function StatisticsView() {
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl"> <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div> <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div>
<div className="text-xl font-black text-white tracking-tighter"> <div className="text-xl font-black text-white tracking-tighter">
{targets.reduce((sum, t) => sum + t.todayTotal, 0).toLocaleString()} {fmtKm(targets.reduce((sum, t) => sum + t.todayTotal, 0))}
<span className="text-blue-400 text-[10px] ml-1">KM</span> <span className="text-blue-400 text-[10px] ml-1">KM</span>
</div> </div>
</div> </div>
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl"> <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div> <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div>
<div className="text-xl font-black text-white tracking-tighter"> <div className="text-xl font-black text-white tracking-tighter">
{targets.reduce((sum, t) => sum + t.cumulativeTotal, 0).toLocaleString()} {fmtKm(targets.reduce((sum, t) => sum + t.cumulativeTotal, 0))}
<span className="text-blue-400 text-[10px] ml-1">KM</span> <span className="text-blue-400 text-[10px] ml-1">KM</span>
</div> </div>
</div> </div>
@@ -234,10 +239,10 @@ export default function StatisticsView() {
<div className="text-right flex-shrink-0 ml-2 flex items-center gap-3"> <div className="text-right flex-shrink-0 ml-2 flex items-center gap-3">
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
<div className="text-sm font-black text-slate-900 landscape:text-white leading-none mb-0.5"> <div className="text-sm font-black text-slate-900 landscape:text-white leading-none mb-0.5">
{target.todayTotal.toLocaleString()} <span className="text-[8px] text-slate-300 font-bold uppercase">KM</span> {fmtKm(target.todayTotal)} <span className="text-[8px] text-slate-300 font-bold uppercase">KM</span>
</div> </div>
<div className="text-[8px] font-bold text-slate-300"> <div className="text-[8px] font-bold text-slate-300">
累计: {target.cumulativeTotal.toLocaleString()} KM 累计: {fmtKm(target.cumulativeTotal)} KM
</div> </div>
</div> </div>
<motion.div <motion.div
@@ -266,11 +271,11 @@ export default function StatisticsView() {
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">总考核里程</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">总考核里程</p>
<p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{(target.totalMileagePerVehicle * target.vehicleCount).toLocaleString()} KM</p> <p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{fmtKm(target.totalMileagePerVehicle * target.vehicleCount)} KM</p>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">年考核任务/辆</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">年考核任务/辆</p>
<p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{target.annualMileagePerVehicle.toLocaleString()} KM</p> <p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{fmtKm(target.annualMileagePerVehicle)} KM</p>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">50%达标数</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">50%达标数</p>
@@ -278,15 +283,15 @@ export default function StatisticsView() {
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">本年需完成</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">本年需完成</p>
<p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{target.currentYearTarget.toLocaleString()} KM</p> <p className="text-[10px] font-black text-slate-700 landscape:text-slate-300">{fmtKm(target.currentYearTarget)} KM</p>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">已完成(截止3.31)</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">已完成(截止3.31)</p>
<p className="text-[10px] font-black text-emerald-600">{target.currentYearCompleted.toLocaleString()} KM</p> <p className="text-[10px] font-black text-emerald-600">{fmtKm(target.currentYearCompleted)} KM</p>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">未完成总数</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">未完成总数</p>
<p className="text-[10px] font-black text-rose-500">{target.remaining.toLocaleString()} KM</p> <p className="text-[10px] font-black text-rose-500">{fmtKm(target.remaining)} KM</p>
</div> </div>
<div className="space-y-0.5"> <div className="space-y-0.5">
<p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">日均需完成</p> <p className="text-[8px] font-bold text-slate-400 uppercase tracking-wider">日均需完成</p>
@@ -372,14 +377,14 @@ export default function StatisticsView() {
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl"> <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div> <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">今日总里程</div>
<div className="text-2xl font-black text-white tracking-tighter"> <div className="text-2xl font-black text-white tracking-tighter">
{targets.reduce((sum, t) => sum + t.todayTotal, 0).toLocaleString()} {fmtKm(targets.reduce((sum, t) => sum + t.todayTotal, 0))}
<span className="text-blue-400 text-xs ml-2">KM</span> <span className="text-blue-400 text-xs ml-2">KM</span>
</div> </div>
</div> </div>
<div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl"> <div className="bg-slate-900/50 border border-slate-800 p-4 rounded-2xl">
<div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div> <div className="text-[10px] font-bold text-slate-500 uppercase mb-1">累计总里程</div>
<div className="text-2xl font-black text-white tracking-tighter"> <div className="text-2xl font-black text-white tracking-tighter">
{targets.reduce((sum, t) => sum + t.cumulativeTotal, 0).toLocaleString()} {fmtKm(targets.reduce((sum, t) => sum + t.cumulativeTotal, 0))}
<span className="text-blue-400 text-xs ml-2">KM</span> <span className="text-blue-400 text-xs ml-2">KM</span>
</div> </div>
</div> </div>
@@ -432,8 +437,8 @@ export default function StatisticsView() {
<tr key={idx} className="hover:bg-slate-800/30 transition-colors"> <tr key={idx} className="hover:bg-slate-800/30 transition-colors">
<td className="p-4 text-sm font-bold text-white sticky left-0 bg-slate-900 z-10 border-r border-slate-800">{target.targetName}</td> <td className="p-4 text-sm font-bold text-white sticky left-0 bg-slate-900 z-10 border-r border-slate-800">{target.targetName}</td>
<td className="p-4 text-xs text-slate-300">{target.vehicleCount}</td> <td className="p-4 text-xs text-slate-300">{target.vehicleCount}</td>
<td className="p-4 text-xs text-slate-300">{(target.totalMileagePerVehicle * target.vehicleCount).toLocaleString()}</td> <td className="p-4 text-xs text-slate-300">{fmtKm(target.totalMileagePerVehicle * target.vehicleCount)}</td>
<td className="p-4 text-xs text-slate-300">{target.cumulativeTotal.toLocaleString()}</td> <td className="p-4 text-xs text-slate-300">{fmtKm(target.cumulativeTotal)}</td>
<td className="p-4"> <td className="p-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden min-w-[60px]"> <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden min-w-[60px]">
@@ -449,10 +454,10 @@ export default function StatisticsView() {
<td className="p-4 text-xs text-slate-300">{target.annualMileagePerVehicle}</td> <td className="p-4 text-xs text-slate-300">{target.annualMileagePerVehicle}</td>
<td className="p-4 text-xs font-bold text-emerald-400">{target.yearQualifiedCount}</td> <td className="p-4 text-xs font-bold text-emerald-400">{target.yearQualifiedCount}</td>
<td className="p-4 text-xs font-bold text-blue-400">{target.halfQualifiedCount}</td> <td className="p-4 text-xs font-bold text-blue-400">{target.halfQualifiedCount}</td>
<td className="p-4 text-xs font-bold text-white">{target.todayTotal.toLocaleString()}</td> <td className="p-4 text-xs font-bold text-white">{fmtKm(target.todayTotal)}</td>
<td className="p-4 text-xs text-slate-300">{target.currentYearTarget.toLocaleString()}</td> <td className="p-4 text-xs text-slate-300">{fmtKm(target.currentYearTarget)}</td>
<td className="p-4 text-xs text-slate-300">{target.currentYearCompleted.toLocaleString()}</td> <td className="p-4 text-xs text-slate-300">{fmtKm(target.currentYearCompleted)}</td>
<td className="p-4 text-xs font-bold text-rose-400">{target.remaining.toLocaleString()}</td> <td className="p-4 text-xs font-bold text-rose-400">{fmtKm(target.remaining)}</td>
<td className="p-4 text-xs text-slate-300">{target.daysLeft}</td> <td className="p-4 text-xs text-slate-300">{target.daysLeft}</td>
<td className="p-4 text-xs font-bold text-blue-400">{target.dailyTarget}</td> <td className="p-4 text-xs font-bold text-blue-400">{target.dailyTarget}</td>
</tr> </tr>
@@ -547,7 +552,7 @@ export default function StatisticsView() {
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="text-sm font-black text-blue-600">{tv.todayMileage} <span className="text-[9px] text-slate-400">KM</span></div> <div className="text-sm font-black text-blue-600">{tv.todayMileage} <span className="text-[9px] text-slate-400">KM</span></div>
<div className="text-[9px] font-bold text-slate-400 mt-0.5">累计: {tv.totalMileage?.toLocaleString()}</div> <div className="text-[9px] font-bold text-slate-400 mt-0.5">累计: {fmtKm(tv.totalMileage || 0)}</div>
</div> </div>
</div> </div>
))} ))}