refactor: add hydrogen station drilldown
This commit is contained in:
@@ -2,10 +2,11 @@ import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList, Legend,
|
||||
} from 'recharts';
|
||||
import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp, RefreshCw, Gauge, AlertTriangle, Building2 } from 'lucide-react';
|
||||
import { Fuel, Wallet, CalendarDays, Sparkles, TrendingUp, RefreshCw, Gauge, AlertTriangle, Building2, ChevronRight } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'motion/react';
|
||||
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
|
||||
import RotatingFooterHint from '../../components/RotatingFooterHint';
|
||||
import { buildHydrogenDrillUrl } from './hydrogen-drill-context';
|
||||
|
||||
const REGION_COLORS = [
|
||||
'#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
|
||||
@@ -155,6 +156,26 @@ export default function HydrogenOverview() {
|
||||
const top5Share = top5.reduce((sum, item) => sum + item.kg, 0) / Math.max(1, k.yearKg) * 100;
|
||||
const profitYield = k.yearRevenue > 0 ? k.yearProfit / k.yearRevenue * 100 : 0;
|
||||
const stationAvgKg = stations.length > 0 ? k.yearKg / stations.length : 0;
|
||||
const openStation = (station: typeof stations[number]) => {
|
||||
const now = new Date();
|
||||
const endDate = activeYear === now.getFullYear()
|
||||
? `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
||||
: `${activeYear}-12-31`;
|
||||
const url = buildHydrogenDrillUrl(
|
||||
{ pathname: window.location.pathname, search: window.location.search, hash: '#hydrogen' },
|
||||
{
|
||||
level: 'station',
|
||||
year: activeYear,
|
||||
stationId: station.id,
|
||||
stationName: station.name,
|
||||
vehicleScope: 'lingniu',
|
||||
startDate: `${activeYear}-01-01`,
|
||||
endDate,
|
||||
},
|
||||
);
|
||||
window.history.pushState(null, '', url);
|
||||
window.dispatchEvent(new HashChangeEvent('hashchange'));
|
||||
};
|
||||
|
||||
// 月度收支组合数据(推算"年内每月"图)
|
||||
const monthlyDual = monthly.map(m => ({
|
||||
@@ -497,7 +518,17 @@ export default function HydrogenOverview() {
|
||||
return (
|
||||
<tr key={s.name + i} className="border-b border-slate-50 hover:bg-slate-50/60">
|
||||
<td className="py-1.5 pl-1 text-slate-400 tabular-nums">{i + 1}</td>
|
||||
<td className="py-1.5 text-slate-700 truncate max-w-[180px]">{s.name}</td>
|
||||
<td className="py-1.5 max-w-[180px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openStation(s)}
|
||||
className="flex max-w-full items-center gap-1 text-left font-bold text-slate-700 hover:text-blue-600"
|
||||
title={`查看 ${s.name} 每日明细`}
|
||||
>
|
||||
<span className="truncate">{s.name}</span>
|
||||
<ChevronRight size={12} className="shrink-0 text-slate-300" />
|
||||
</button>
|
||||
</td>
|
||||
<td className="py-1.5 text-right tabular-nums font-bold text-slate-700">
|
||||
{kgFmt.value}<span className="text-slate-400 font-normal ml-0.5">{kgFmt.unit}</span>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user