diff --git a/src/modules/energy/HydrogenOverview.tsx b/src/modules/energy/HydrogenOverview.tsx index e7a26fb..3f2c963 100644 --- a/src/modules/energy/HydrogenOverview.tsx +++ b/src/modules/energy/HydrogenOverview.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import { Fuel, Wallet, Coins, CalendarClock } from 'lucide-react'; import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList } from 'recharts'; import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api'; @@ -30,16 +29,15 @@ const REGION_COLORS = [ '#94a3b8', ]; -function fmtKg(kg: number) { - if (kg >= 1000) return `${(kg / 1000).toFixed(2)}T`; - return `${kg.toFixed(2)}Kg`; -} -function fmtYuanWan(yuan: number) { - return `¥${(yuan / 10_000).toFixed(2)}万`; -} -function fmtYuan(yuan: number) { - return `¥${yuan.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`; -} +// 幽默动态提示词,每 4 秒轮换一条 +const FOOTER_HINTS = [ + '更多统计维度接入中,欢迎您的建议 ~', + '下一个图表,可能就是您建议的那个', + '数据科学家正在深夜挖掘新维度…', + '想看哪个角度的数据?告诉我们一下嘛', + '维度灵感正在路上,钉一下产品同学也行', + '数字背后还有故事,等下一次上线揭晓', +]; export default function HydrogenOverview() { const [data, setData] = useState(null); @@ -67,50 +65,6 @@ export default function HydrogenOverview() {
数据自 2025-01-01 起,每 1 分钟更新
-
- {/* 卡 1:年加氢量 */} -
-
- 年加氢量 -
-
{fmtKg(k.yearKg)}
-
- {/* 卡 2:年加氢费 */} -
-
- 年加氢费 -
-
{fmtYuanWan(k.yearFee)}
-
- {/* 卡 3:累计羚牛承担 */} -
-
- 累计羚牛承担 -
-
{fmtYuanWan(k.lingniuBornFee)}
-
-
{fmtKg(k.lingniuBornKg)}
-
-
- {/* 卡 4:本月 / 今日 */} -
-
- 本月 / 今日 -
-
-
-
本月
-
{fmtKg(k.monthKg)}
-
{fmtYuanWan(k.monthFee)}
-
-
-
今日
-
{fmtKg(k.todayKg)}
-
{fmtYuan(k.todayFee)}
-
-
-
-
{/* Top5 加氢站 */}
@@ -194,6 +148,33 @@ export default function HydrogenOverview() {
+ + + ); +} + +function RotatingFooterHint() { + const [idx, setIdx] = useState(0); + useEffect(() => { + const t = setInterval(() => setIdx(i => (i + 1) % FOOTER_HINTS.length), 4000); + return () => clearInterval(t); + }, []); + return ( +
+ + + {FOOTER_HINTS[idx]} + +
); } @@ -206,20 +187,6 @@ function HydrogenOverviewSkeleton() {
- {/* 4 张 KPI 卡 */} -
- {Array.from({ length: 4 }).map((_, i) => ( -
-
-
-
-
-
-
-
- ))} -
-
{/* Top5 占位 */}