1650 lines
53 KiB
TypeScript
1650 lines
53 KiB
TypeScript
import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||
import {
|
||
Activity,
|
||
CalendarDays,
|
||
ChevronDown,
|
||
ChevronLeft,
|
||
Download,
|
||
Fuel,
|
||
RefreshCw,
|
||
Search,
|
||
Shield,
|
||
TrendingDown,
|
||
TrendingUp,
|
||
Truck,
|
||
Wallet,
|
||
X,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import {
|
||
Bar,
|
||
BarChart,
|
||
CartesianGrid,
|
||
Legend,
|
||
ResponsiveContainer,
|
||
Tooltip,
|
||
XAxis,
|
||
YAxis,
|
||
} from "recharts";
|
||
import {
|
||
fetchH2BiDaily,
|
||
fetchH2BiDrill,
|
||
fetchH2BiMeta,
|
||
fetchH2BiOverview,
|
||
} from "./api";
|
||
import type {
|
||
H2BiDailyResponse,
|
||
H2BiDrillMetric,
|
||
H2BiDrillRecord,
|
||
H2BiDrillResponse,
|
||
H2BiKpis,
|
||
H2BiMetaResponse,
|
||
H2BiOverviewResponse,
|
||
H2BiQuery,
|
||
H2BiScope,
|
||
H2BiStationRow,
|
||
H2BiVerifyScope,
|
||
H2BiVehicleScope,
|
||
H2BiView,
|
||
} from "./types";
|
||
import "../styles/energy-bi-board.css";
|
||
|
||
const now = new Date();
|
||
const isoDate = (date: Date) => date.toISOString().slice(0, 10);
|
||
const defaultEndDate = isoDate(now);
|
||
const defaultStart = new Date(now);
|
||
defaultStart.setDate(defaultStart.getDate() - 14);
|
||
const defaultStartDate = isoDate(defaultStart);
|
||
|
||
function number(value: number | null | undefined, digits = 0) {
|
||
return Number(value ?? 0).toLocaleString("zh-CN", {
|
||
minimumFractionDigits: digits,
|
||
maximumFractionDigits: digits,
|
||
});
|
||
}
|
||
|
||
function kg(value: number | null | undefined) {
|
||
return `${number(value, 2)} Kg`;
|
||
}
|
||
|
||
function yuan(value: number | null | undefined) {
|
||
return `¥${number(value, 2)}`;
|
||
}
|
||
|
||
function toT(value: number | null | undefined) {
|
||
return number((value ?? 0) / 1000, 2);
|
||
}
|
||
|
||
function toWan(value: number | null | undefined) {
|
||
return number((value ?? 0) / 10000, 2);
|
||
}
|
||
|
||
function rangeText(range?: {
|
||
startDate: string | null;
|
||
endDate: string | null;
|
||
}) {
|
||
if (!range) return "加载中…";
|
||
return (
|
||
[range.startDate, range.endDate].filter(Boolean).join(" 至 ") ||
|
||
"暂无时间范围"
|
||
);
|
||
}
|
||
|
||
function apiError(error: unknown) {
|
||
return error instanceof Error ? error.message : "数据加载失败，请刷新后重试";
|
||
}
|
||
|
||
function emptyKpis(): H2BiKpis {
|
||
return {
|
||
totalKg: 0,
|
||
totalCost: 0,
|
||
customerBearingKg: 0,
|
||
companyBearingKg: 0,
|
||
otherBearingKg: 0,
|
||
customerRevenue: 0,
|
||
customerCost: 0,
|
||
companyCost: 0,
|
||
otherCost: 0,
|
||
totalRevenue: 0,
|
||
customerGrossProfit: 0,
|
||
monthKg: 0,
|
||
monthCost: 0,
|
||
todayKg: 0,
|
||
todayCost: 0,
|
||
monthShareOfRange: 0,
|
||
todayShareOfMonth: 0,
|
||
recordCount: 0,
|
||
stationCount: 0,
|
||
};
|
||
}
|
||
|
||
interface DataState<T> {
|
||
data: T | null;
|
||
error: string | null;
|
||
loading: boolean;
|
||
}
|
||
|
||
function useRemoteData<T>(key: string, load: () => Promise<T>) {
|
||
const [state, setState] = useState<DataState<T>>({
|
||
data: null,
|
||
error: null,
|
||
loading: true,
|
||
});
|
||
useEffect(() => {
|
||
let active = true;
|
||
setState((previous) => ({ ...previous, error: null, loading: true }));
|
||
void load()
|
||
.then((data) => active && setState({ data, error: null, loading: false }))
|
||
.catch(
|
||
(error: unknown) =>
|
||
active &&
|
||
setState((previous) => ({
|
||
...previous,
|
||
error: apiError(error),
|
||
loading: false,
|
||
})),
|
||
);
|
||
return () => {
|
||
active = false;
|
||
};
|
||
}, [key]); // caller supplies the query-derived key deliberately
|
||
return state;
|
||
}
|
||
|
||
function KpiCard({
|
||
label,
|
||
value,
|
||
prefix,
|
||
unit,
|
||
left,
|
||
right,
|
||
icon,
|
||
tone,
|
||
onClick,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
prefix?: string;
|
||
unit: string;
|
||
left: string;
|
||
right: string;
|
||
icon: ReactNode;
|
||
tone: "blue" | "green" | "amber" | "purple" | "cyan";
|
||
onClick: () => void;
|
||
}) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
className="ehb-kpi-dual"
|
||
onClick={onClick}
|
||
title={`查看${label}明细`}
|
||
>
|
||
<span className="ehb-kpi-dual__head">
|
||
<span className="ehb-kpi-dual__label">{label}</span>
|
||
<span className={`ehb-kpi-dual__badge is-${tone}`}>{icon}</span>
|
||
</span>
|
||
<span className="ehb-kpi-dual__val">
|
||
{prefix ? <span className="ehb-kpi-dual__symbol">{prefix}</span> : null}
|
||
<span className="ehb-kpi-dual__num">{value}</span>
|
||
<span className="ehb-kpi-dual__unit">{unit}</span>
|
||
</span>
|
||
<span className="ehb-kpi-dual__deck">
|
||
<span title={left}>{left}</span>
|
||
<span title={right}>{right}</span>
|
||
</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
function PrototypeYearSelect({
|
||
value,
|
||
years,
|
||
onChange,
|
||
}: {
|
||
value: number;
|
||
years: number[];
|
||
onChange: (year: number) => void;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
useEffect(() => {
|
||
const close = (event: MouseEvent) => {
|
||
if (ref.current && !ref.current.contains(event.target as Node))
|
||
setOpen(false);
|
||
};
|
||
if (open) document.addEventListener("mousedown", close);
|
||
return () => document.removeEventListener("mousedown", close);
|
||
}, [open]);
|
||
return (
|
||
<div className="ehb-year-select-wrapper" ref={ref}>
|
||
<button
|
||
type="button"
|
||
className={`ehb-year-select-btn ${open ? "is-active" : ""}`}
|
||
onClick={() => setOpen((shown) => !shown)}
|
||
aria-label="年份选择"
|
||
>
|
||
<span className="ehb-year-text">{value} 年</span>
|
||
<ChevronDown
|
||
size={13}
|
||
style={{
|
||
transition: "transform 0.2s ease",
|
||
transform: open ? "rotate(180deg)" : "none",
|
||
color: "#64748b",
|
||
}}
|
||
/>
|
||
</button>
|
||
{open ? (
|
||
<div className="ehb-year-dropdown">
|
||
<div className="ehb-year-dropdown__header">切换数据年份</div>
|
||
<div className="ehb-year-dropdown__list">
|
||
{years.map((year) => (
|
||
<button
|
||
type="button"
|
||
key={year}
|
||
className={`ehb-year-dropdown__item ${year === value ? "is-selected" : ""}`}
|
||
onClick={() => {
|
||
onChange(year);
|
||
setOpen(false);
|
||
}}
|
||
>
|
||
<span>{year} 年</span>
|
||
{year === value ? (
|
||
<span className="ehb-year-check">✓</span>
|
||
) : null}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function EmptyTable({ children }: { children: ReactNode }) {
|
||
return (
|
||
<div className="ehb-empty">
|
||
<div className="ehb-empty__title">{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TableCard({
|
||
title,
|
||
children,
|
||
hint,
|
||
}: {
|
||
title: string;
|
||
children: ReactNode;
|
||
hint?: string;
|
||
}) {
|
||
return (
|
||
<section className="ehb-table-card">
|
||
<div className="ehb-table-card__head">
|
||
<h2 className="ehb-table-card__title">{title}</h2>
|
||
{hint ? <span className="ehb-table-card__hint">{hint}</span> : null}
|
||
</div>
|
||
<div className="ehb-table-scroll">{children}</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function OverviewRankings({
|
||
overview,
|
||
onDrill,
|
||
}: {
|
||
overview: H2BiOverviewResponse;
|
||
onDrill: (
|
||
metric: H2BiDrillMetric,
|
||
stationId?: string | number | null,
|
||
) => void;
|
||
}) {
|
||
const [granularity, setGranularity] = useState<"province" | "city">("city");
|
||
const total = overview.kpis.totalKg || 1;
|
||
const source =
|
||
granularity === "city"
|
||
? overview.stations.reduce<Record<string, number>>(
|
||
(acc, station) => ({
|
||
...acc,
|
||
[station.city || "未归属区域"]:
|
||
(acc[station.city || "未归属区域"] || 0) + station.kg,
|
||
}),
|
||
{},
|
||
)
|
||
: overview.stations.reduce<Record<string, number>>(
|
||
(acc, station) => ({
|
||
...acc,
|
||
[station.province || "未归属"]:
|
||
(acc[station.province || "未归属"] || 0) + station.kg,
|
||
}),
|
||
{},
|
||
);
|
||
const colors = [
|
||
"#0284c7",
|
||
"#38bdf8",
|
||
"#10b981",
|
||
"#f59e0b",
|
||
"#8b5cf6",
|
||
"#ec4899",
|
||
"#06b6d4",
|
||
"#84cc16",
|
||
"#94a3b8",
|
||
];
|
||
const regions = Object.entries(source)
|
||
.sort((a, b) => b[1] - a[1])
|
||
.slice(0, 8)
|
||
.map(([region, kg], index) => ({ region, kg, color: colors[index] }));
|
||
const rest = total - regions.reduce((sum, region) => sum + region.kg, 0);
|
||
if (rest > 0)
|
||
regions.push({
|
||
region: `其他${granularity === "city" ? "城市" : "省份"}`,
|
||
kg: rest,
|
||
color: "#94a3b8",
|
||
});
|
||
let offset = 0;
|
||
return (
|
||
<div className="ehb-two-charts-row">
|
||
<div className="ehb-chart-box">
|
||
<div className="ehb-chart-box-head">
|
||
<div className="ehb-chart-box-title">加氢站加氢量 Top5</div>
|
||
<div className="ehb-chart-legend-inline">
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq" style={{ background: "#0284c7" }} />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq" style={{ background: "#f59e0b" }} />
|
||
外部客户
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-top-stations-list">
|
||
{overview.topStations.map((station, index) => {
|
||
const ratio = station.kg
|
||
? (station.lingniuKg / station.kg) * 100
|
||
: 0;
|
||
return (
|
||
<button
|
||
type="button"
|
||
key={`${station.id}-${station.name}`}
|
||
className="ehb-top-station-item"
|
||
onClick={() => onDrill("station", station.id)}
|
||
title="点击钻取该加氢站明细"
|
||
>
|
||
<span className={`ehb-top-rank ${index > 1 ? "is-sub" : ""}`}>
|
||
{index + 1}
|
||
</span>
|
||
<span className="ehb-top-station-name">{station.name}</span>
|
||
<span className="ehb-top-bar-bg">
|
||
<span
|
||
className="ehb-top-bar-fill"
|
||
style={{
|
||
width: `${overview.topStations[0]?.kg ? (station.kg / overview.topStations[0].kg) * 100 : 0}%`,
|
||
}}
|
||
>
|
||
<i
|
||
className="ehb-top-bar-seg is-own"
|
||
style={{ width: `${ratio}%` }}
|
||
/>
|
||
<i
|
||
className="ehb-top-bar-seg is-ext"
|
||
style={{ width: `${100 - ratio}%` }}
|
||
/>
|
||
</span>
|
||
</span>
|
||
<span className="ehb-top-station-val">
|
||
{number(station.kg)}
|
||
</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
<div className="ehb-chart-box">
|
||
<div className="ehb-chart-box-head">
|
||
<div className="ehb-chart-box-title">各区域加氢占比</div>
|
||
<div className="ehb-mini-tabs">
|
||
<button
|
||
type="button"
|
||
className={`ehb-mini-tab ${granularity === "province" ? "is-active" : ""}`}
|
||
onClick={() => setGranularity("province")}
|
||
>
|
||
按省
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-mini-tab ${granularity === "city" ? "is-active" : ""}`}
|
||
onClick={() => setGranularity("city")}
|
||
>
|
||
按市
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-donut-section">
|
||
<div className="ehb-donut-chart-wrap">
|
||
<svg width="130" height="130" viewBox="0 0 100 100">
|
||
<circle
|
||
cx="50"
|
||
cy="50"
|
||
r="38"
|
||
fill="none"
|
||
stroke="#f1f5f9"
|
||
strokeWidth="16"
|
||
/>
|
||
{regions.map((region) => {
|
||
const dash = (region.kg / total) * 238.76;
|
||
const current = offset;
|
||
offset += dash;
|
||
return (
|
||
<circle
|
||
key={region.region}
|
||
cx="50"
|
||
cy="50"
|
||
r="38"
|
||
fill="none"
|
||
stroke={region.color}
|
||
strokeWidth="16"
|
||
strokeDasharray={`${dash} ${238.76 - dash}`}
|
||
strokeDashoffset={-current}
|
||
transform="rotate(-90 50 50)"
|
||
/>
|
||
);
|
||
})}
|
||
</svg>
|
||
<div className="ehb-donut-center-text">
|
||
<div className="title">年合计</div>
|
||
<div className="val">{toT(total)}T</div>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-region-legend-grid">
|
||
{regions.map((region) => (
|
||
<button
|
||
type="button"
|
||
className="ehb-region-legend-item"
|
||
key={region.region}
|
||
onClick={() => onDrill("station")}
|
||
>
|
||
<span className="ehb-region-legend-left">
|
||
<i
|
||
className="ehb-region-dot"
|
||
style={{ background: region.color }}
|
||
/>
|
||
{region.region}
|
||
</span>
|
||
<strong className="ehb-region-legend-val">
|
||
{number((region.kg / total) * 100, 1)}%
|
||
</strong>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MonthlyRevenueComparison({
|
||
overview,
|
||
onDrill,
|
||
}: {
|
||
overview: H2BiOverviewResponse;
|
||
onDrill: (metric: H2BiDrillMetric) => void;
|
||
}) {
|
||
const max = Math.max(
|
||
...overview.monthly.flatMap((row) => [
|
||
row.customerRevenue,
|
||
row.customerCost,
|
||
]),
|
||
1,
|
||
);
|
||
const year = overview.range.startDate?.slice(0, 4) || "当前";
|
||
return (
|
||
<section className="ehb-overview-charts">
|
||
<div className="ehb-chart-box">
|
||
<div className="ehb-chart-box-head">
|
||
<div className="ehb-chart-box-title">{year} 年月度收支对比</div>
|
||
<div className="ehb-chart-legend-inline">
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq is-income" />
|
||
对客金额
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq is-cost" />
|
||
客户承担成本金额
|
||
</span>
|
||
<span className="ehb-chart-box-meta">
|
||
统计范围：{rangeText(overview.range)} · 单位 元
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-rev-chart">
|
||
{overview.monthly.map((row) => (
|
||
<div key={row.month} className="ehb-rev-col-group">
|
||
<div className="ehb-rev-bars">
|
||
<button
|
||
type="button"
|
||
className="ehb-rev-bar is-income"
|
||
onClick={() => onDrill("customerGrossProfit")}
|
||
style={{
|
||
height: `${Math.max(row.customerRevenue ? 3 : 0, (row.customerRevenue / max) * 100)}%`,
|
||
}}
|
||
title={`${row.month} 对客金额 ${yuan(row.customerRevenue)}`}
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="ehb-rev-bar is-cost"
|
||
onClick={() => onDrill("customerGrossProfit")}
|
||
style={{
|
||
height: `${Math.max(row.customerCost ? 3 : 0, (row.customerCost / max) * 100)}%`,
|
||
}}
|
||
title={`${row.month} 客户承担成本金额 ${yuan(row.customerCost)}`}
|
||
/>
|
||
</div>
|
||
<div className="ehb-rev-label">{row.month}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function OverviewTables({
|
||
overview,
|
||
onDrill,
|
||
}: {
|
||
overview: H2BiOverviewResponse;
|
||
onDrill: (
|
||
metric: H2BiDrillMetric,
|
||
stationId?: string | number | null,
|
||
) => void;
|
||
}) {
|
||
const [province, setProvince] = useState("全国");
|
||
const provinces = [
|
||
"全国",
|
||
...Array.from(
|
||
new Set(
|
||
overview.stations
|
||
.map((station) => station.province)
|
||
.filter((value): value is string => Boolean(value)),
|
||
),
|
||
),
|
||
];
|
||
const stations =
|
||
province === "全国"
|
||
? overview.stations
|
||
: overview.stations.filter((station) => station.province === province);
|
||
const totalKg = overview.kpis.totalKg || 1;
|
||
const totalRevenue = overview.kpis.customerRevenue || 1;
|
||
return (
|
||
<>
|
||
<section className="ehb-sum-table-card">
|
||
<div
|
||
className="ehb-sum-table-card__head"
|
||
style={{ flexWrap: "wrap", gap: 12 }}
|
||
>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 12,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<div className="ehb-sum-table-card__title">加氢站加氢汇总</div>
|
||
<div className="ehb-mini-tabs">
|
||
{provinces.map((item) => (
|
||
<button
|
||
type="button"
|
||
className={`ehb-mini-tab ${province === item ? "is-active" : ""}`}
|
||
key={item}
|
||
onClick={() => setProvince(item)}
|
||
>
|
||
{item}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="ehb-sum-table-card__meta">
|
||
统计范围：{rangeText(overview.range)} · 共 {stations.length} 站
|
||
</div>
|
||
</div>
|
||
<div className="ehb-sum-table-wrap">
|
||
<table className="ehb-sum-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>加氢站（点击钻取）</th>
|
||
<th>所属省份</th>
|
||
<th>加氢量</th>
|
||
<th>占比</th>
|
||
<th>对客金额</th>
|
||
<th>收入占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{stations.map((row, index) => (
|
||
<tr
|
||
key={`${row.id}-${row.name}`}
|
||
onClick={() => onDrill("station", row.id)}
|
||
style={{ cursor: "pointer" }}
|
||
>
|
||
<td>{index + 1}</td>
|
||
<td style={{ fontWeight: 600, color: "#0284c7" }}>
|
||
{row.name}{" "}
|
||
<span className="ehb-kpi-drill-hint">钻取 ›</span>
|
||
</td>
|
||
<td>
|
||
<span
|
||
className="ehb-region-dot"
|
||
style={{ background: "#e0f2fe" }}
|
||
/>
|
||
{row.province || "未归属"}
|
||
</td>
|
||
<td className="col-bold-kg">{toT(row.kg)} T</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<i className="ehb-mini-bar-track">
|
||
<i
|
||
className="ehb-mini-bar-fill is-blue"
|
||
style={{ width: `${(row.kg / totalKg) * 100}%` }}
|
||
/>
|
||
</i>
|
||
{number((row.kg / totalKg) * 100, 1)}%
|
||
</div>
|
||
</td>
|
||
<td className="col-green-fee">¥{toWan(row.customerRevenue)} 万元</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<i className="ehb-mini-bar-track">
|
||
<i
|
||
className="ehb-mini-bar-fill is-green"
|
||
style={{
|
||
width: `${(row.customerRevenue / totalRevenue) * 100}%`,
|
||
}}
|
||
/>
|
||
</i>
|
||
{number((row.customerRevenue / totalRevenue) * 100, 1)}%
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<section className="ehb-sum-table-card">
|
||
<div className="ehb-sum-table-card__head">
|
||
<div className="ehb-sum-table-card__title">客户账单汇总</div>
|
||
<div className="ehb-sum-table-card__meta">
|
||
统计范围：{rangeText(overview.range)} · Top{" "}
|
||
{overview.customers.length}
|
||
</div>
|
||
</div>
|
||
<div className="ehb-sum-table-wrap">
|
||
<table className="ehb-sum-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>客户（点击钻取）</th>
|
||
<th>加氢量</th>
|
||
<th>客户承担成本</th>
|
||
<th>对客金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{overview.customers.map((row, index) => (
|
||
<tr
|
||
key={`${row.id}-${row.name}`}
|
||
onClick={() => onDrill("customer")}
|
||
style={{ cursor: "pointer" }}
|
||
>
|
||
<td>{index + 1}</td>
|
||
<td style={{ fontWeight: 600, color: "#0284c7" }}>
|
||
{row.name}{" "}
|
||
<span className="ehb-kpi-drill-hint">钻取 ›</span>
|
||
</td>
|
||
<td className="col-bold-kg">{toT(row.kg)} T</td>
|
||
<td className="col-orange-cost">¥{toWan(row.customerCost)} 万元</td>
|
||
<td className="col-green-fee">¥{toWan(row.customerRevenue)} 万元</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|
||
|
||
function OverviewPage({
|
||
overview,
|
||
onDrill,
|
||
}: {
|
||
overview: H2BiOverviewResponse;
|
||
onDrill: (
|
||
metric: H2BiDrillMetric,
|
||
stationId?: string | number | null,
|
||
) => void;
|
||
}) {
|
||
const kpis = overview.kpis || emptyKpis();
|
||
const firstStation = overview.topStations[0] as H2BiStationRow | undefined;
|
||
const top5Share = overview.topStations.reduce(
|
||
(sum, station) => sum + station.share,
|
||
0,
|
||
);
|
||
const profitRate = kpis.customerRevenue
|
||
? (kpis.customerGrossProfit / kpis.customerRevenue) * 100
|
||
: 0;
|
||
return (
|
||
<>
|
||
<section className="ehb-host" aria-label="氢能经营总览">
|
||
<div className="ehb-host-kpi">
|
||
<KpiCard
|
||
label="累计加氢量"
|
||
value={toT(kpis.totalKg)}
|
||
unit="T"
|
||
left={`羚牛 ${toT(overview.monthly.reduce((sum, row) => sum + row.lingniuKg, 0))} T`}
|
||
right={`外部 ${toT(overview.monthly.reduce((sum, row) => sum + row.externalKg, 0))} T`}
|
||
icon={<Fuel size={14} />}
|
||
tone="blue"
|
||
onClick={() => onDrill("totalKg")}
|
||
/>
|
||
<KpiCard
|
||
label="累计成本金额"
|
||
value={toWan(kpis.totalCost)}
|
||
prefix="¥"
|
||
unit="万"
|
||
left={`我司 ¥${toWan(kpis.companyCost)} 万`}
|
||
right={`客户 ¥${toWan(kpis.customerCost)} 万 · 其他 ¥${toWan(kpis.otherCost)} 万`}
|
||
icon={<Wallet size={14} />}
|
||
tone="blue"
|
||
onClick={() => onDrill("totalCost")}
|
||
/>
|
||
<KpiCard
|
||
label="加氢利润"
|
||
value={toWan(kpis.customerGrossProfit)}
|
||
prefix="¥"
|
||
unit="万"
|
||
left={`对客 ¥${toWan(kpis.customerRevenue)} 万`}
|
||
right={`成本 ¥${toWan(kpis.customerCost)} 万`}
|
||
icon={<Activity size={14} />}
|
||
tone="green"
|
||
onClick={() => onDrill("customerGrossProfit")}
|
||
/>
|
||
<KpiCard
|
||
label="本月加氢"
|
||
value={toT(kpis.monthKg)}
|
||
unit="T"
|
||
left={`加氢费 ¥${toWan(kpis.monthCost)} 万`}
|
||
right={`占年比 ${number(kpis.monthShareOfRange, 2)}%`}
|
||
icon={<Truck size={14} />}
|
||
tone="amber"
|
||
onClick={() => onDrill("monthKg")}
|
||
/>
|
||
<KpiCard
|
||
label="本日加氢"
|
||
value={number(kpis.todayKg, 2)}
|
||
unit="Kg"
|
||
left={`加氢费 ${yuan(kpis.todayCost)}`}
|
||
right={`占月比 ${number(kpis.todayShareOfMonth, 2)}%`}
|
||
icon={<Zap size={14} />}
|
||
tone="purple"
|
||
onClick={() => onDrill("todayKg")}
|
||
/>
|
||
</div>
|
||
<div className="ehb-insight" aria-label="经营洞察">
|
||
<div className="ehb-insight__card">
|
||
<div className="ehb-insight__icon is-down">
|
||
<TrendingDown size={18} />
|
||
</div>
|
||
<div>
|
||
<div className="ehb-insight__title">月度加氢异常波动</div>
|
||
<div className="ehb-insight__value is-neg">
|
||
占年 {number(kpis.monthShareOfRange, 2)}%
|
||
</div>
|
||
<div className="ehb-insight__desc">
|
||
当月 {toT(kpis.monthKg)} T ·{" "}
|
||
{overview.range.endDate?.slice(0, 7) || "当前月"} 当前统计口径
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-insight__card ehb-insight__card--rank"
|
||
onClick={() => onDrill("station")}
|
||
>
|
||
<span className="ehb-insight__icon">
|
||
<Shield size={18} />
|
||
</span>
|
||
<span className="ehb-insight__rank-body">
|
||
<span className="ehb-insight__title">头部加氢站占比</span>
|
||
<span className="ehb-insight__value">
|
||
Top5 {number(top5Share, 1)}%
|
||
</span>
|
||
<span className="ehb-insight__desc">
|
||
累计 {toT(kpis.totalKg)} T · 点击展开加氢量排名
|
||
</span>
|
||
</span>
|
||
<ChevronDown
|
||
size={14}
|
||
className="ehb-insight__rank-chevron"
|
||
aria-hidden
|
||
/>
|
||
</button>
|
||
<div className="ehb-insight__card">
|
||
<div className="ehb-insight__icon is-ok">
|
||
<Activity size={18} />
|
||
</div>
|
||
<div>
|
||
<div className="ehb-insight__title">加氢利润率</div>
|
||
<div
|
||
className={`ehb-insight__value ${profitRate >= 0 ? "is-pos" : "is-neg"}`}
|
||
>
|
||
{number(profitRate, 2)}%
|
||
</div>
|
||
<div className="ehb-insight__desc">
|
||
加氢利润 ¥{toWan(kpis.customerGrossProfit)} 万 · 对客金额 ¥
|
||
{toWan(kpis.customerRevenue)} 万
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section className="ehb-overview-charts">
|
||
<div className="ehb-chart-box">
|
||
<div className="ehb-chart-box-head">
|
||
<div className="ehb-chart-box-title">
|
||
{overview.range.startDate?.slice(0, 4) || "当前"} 年月度加氢量
|
||
</div>
|
||
<div className="ehb-chart-legend-inline">
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq is-income" />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<i className="ehb-legend-sq is-cost" />
|
||
外部客户
|
||
</span>
|
||
<span className="ehb-chart-box-meta">
|
||
统计范围：{rangeText(overview.range)} · 单位 Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-chart-box-body">
|
||
{overview.monthly.length === 0 ? (
|
||
<EmptyTable>当前筛选暂无月度趋势数据</EmptyTable>
|
||
) : (
|
||
<ResponsiveContainer
|
||
width="100%"
|
||
height="100%"
|
||
minWidth={0}
|
||
initialDimension={{ width: 900, height: 220 }}
|
||
>
|
||
<BarChart
|
||
data={overview.monthly}
|
||
margin={{ top: 6, right: 10, left: 0, bottom: 0 }}
|
||
>
|
||
<CartesianGrid
|
||
strokeDasharray="3 3"
|
||
vertical={false}
|
||
stroke="#e2e8f0"
|
||
/>
|
||
<XAxis
|
||
dataKey="month"
|
||
tick={{ fill: "#64748b", fontSize: 11 }}
|
||
axisLine={false}
|
||
tickLine={false}
|
||
/>
|
||
<YAxis
|
||
tick={{ fill: "#94a3b8", fontSize: 10 }}
|
||
width={56}
|
||
axisLine={false}
|
||
tickLine={false}
|
||
tickFormatter={(v) => number(Number(v))}
|
||
/>
|
||
<Tooltip
|
||
formatter={(value: unknown, name: unknown) => [
|
||
kg(Number(value)),
|
||
name === "lingniuKg" ? "内部客户" : "外部客户",
|
||
]}
|
||
/>
|
||
<Legend
|
||
formatter={(v) =>
|
||
v === "lingniuKg" ? "内部客户" : "外部客户"
|
||
}
|
||
/>
|
||
<Bar
|
||
dataKey="lingniuKg"
|
||
stackId="kg"
|
||
fill="#3b82f6"
|
||
radius={[4, 4, 0, 0]}
|
||
/>
|
||
<Bar
|
||
dataKey="externalKg"
|
||
stackId="kg"
|
||
fill="#fbbf24"
|
||
radius={[4, 4, 0, 0]}
|
||
/>
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<MonthlyRevenueComparison overview={overview} onDrill={onDrill} />
|
||
<OverviewRankings overview={overview} onDrill={onDrill} />
|
||
<OverviewTables overview={overview} onDrill={onDrill} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
function DailyPage({
|
||
daily,
|
||
onDrill,
|
||
}: {
|
||
daily: H2BiDailyResponse;
|
||
onDrill: (metric: H2BiDrillMetric) => void;
|
||
}) {
|
||
const kpis = daily.kpis;
|
||
return (
|
||
<div className="ehb-daily-container">
|
||
<section className="ehb-daily-kpi-grid" aria-label="按日经营指标">
|
||
<button
|
||
type="button"
|
||
className="ehb-daily-kpi-card"
|
||
onClick={() => onDrill("totalKg")}
|
||
>
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">区间加氢量</span>
|
||
<span className="ehb-kpi-dual__badge is-blue">
|
||
<Fuel size={14} />
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-val">
|
||
<span className="ehb-kpi-dual__num">{number(kpis.totalKg, 2)}</span>
|
||
<span className="ehb-kpi-dual__unit">Kg</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">{rangeText(daily.range)}</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ehb-daily-kpi-card"
|
||
onClick={() => onDrill("totalCost")}
|
||
>
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">区间成本</span>
|
||
<span className="ehb-kpi-dual__badge is-green">
|
||
<Wallet size={14} />
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-val">
|
||
<span className="ehb-kpi-dual__num">{yuan(kpis.totalCost)}</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">真实成本台账汇总</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ehb-daily-kpi-card"
|
||
onClick={() => onDrill("day")}
|
||
>
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">有效天数</span>
|
||
<span className="ehb-kpi-dual__badge is-amber">
|
||
<TrendingUp size={14} />
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-val">
|
||
<span className="ehb-kpi-dual__num">{number(kpis.activeDays)}</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">
|
||
日均 {number(kpis.averageDailyKg, 2)} Kg
|
||
</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ehb-daily-kpi-card"
|
||
onClick={() => onDrill("station")}
|
||
>
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">涉及加氢站</span>
|
||
<span className="ehb-kpi-dual__badge is-purple">
|
||
<Zap size={14} />
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-val">
|
||
<span className="ehb-kpi-dual__num">
|
||
{number(kpis.stationCount)}
|
||
</span>
|
||
<span className="ehb-kpi-dual__unit">站</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">按明细站点去重</div>
|
||
</button>
|
||
</section>
|
||
<section className="ehb-daily-chart-section">
|
||
<div className="ehb-daily-chart-head">
|
||
<div className="ehb-daily-chart-title">
|
||
<span>每日加氢量</span>
|
||
<span className="ehb-title-sub">
|
||
（点击柱体下锚定位到对应日期明细）
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-chart-meta-group">
|
||
<div className="ehb-daily-chart-legend">
|
||
<span className="ehb-legend-item">
|
||
<span className="ehb-legend-dot is-own" />
|
||
加氢量
|
||
</span>
|
||
</div>
|
||
<span className="ehb-daily-chart-meta">时间单位：日 · 单位 Kg</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-daily-bar-container">
|
||
{daily.trend.length === 0 ? (
|
||
<EmptyTable>当前日期范围暂无按日数据</EmptyTable>
|
||
) : (
|
||
<ResponsiveContainer
|
||
width="100%"
|
||
height="100%"
|
||
minWidth={0}
|
||
initialDimension={{ width: 900, height: 220 }}
|
||
>
|
||
<BarChart
|
||
data={daily.trend}
|
||
margin={{ top: 6, right: 10, left: 0, bottom: 0 }}
|
||
>
|
||
<CartesianGrid
|
||
strokeDasharray="3 3"
|
||
vertical={false}
|
||
stroke="#e2e8f0"
|
||
/>
|
||
<XAxis
|
||
dataKey="date"
|
||
tick={{ fill: "#64748b", fontSize: 10 }}
|
||
tickFormatter={(value) => String(value).slice(5)}
|
||
axisLine={false}
|
||
tickLine={false}
|
||
/>
|
||
<YAxis
|
||
tick={{ fill: "#94a3b8", fontSize: 10 }}
|
||
width={54}
|
||
axisLine={false}
|
||
tickLine={false}
|
||
tickFormatter={(v) => number(Number(v))}
|
||
/>
|
||
<Tooltip
|
||
formatter={(value: unknown) => [kg(Number(value)), "加氢量"]}
|
||
/>
|
||
<Bar dataKey="kg" fill="#3b82f6" radius={[4, 4, 0, 0]} />
|
||
</BarChart>
|
||
</ResponsiveContainer>
|
||
)}
|
||
</div>
|
||
</section>
|
||
<section className="ehb-daily-table-card">
|
||
<div className="ehb-daily-table-head">
|
||
<div className="ehb-daily-table-title">
|
||
每日加氢数据明细{" "}
|
||
<span className="ehb-title-sub">
|
||
（可多层下钻：按日 → 加氢站 → 客户 → 车辆及数据源）
|
||
</span>
|
||
</div>
|
||
</div>
|
||
{daily.days.length === 0 ? (
|
||
<EmptyTable>当前日期范围暂无按日明细</EmptyTable>
|
||
) : (
|
||
<table className="ehb-table">
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th>
|
||
<th className="is-num">加氢量</th>
|
||
<th className="is-num">成本</th>
|
||
<th className="is-num">流水笔数</th>
|
||
<th className="is-num">站点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{daily.days.map((row) => (
|
||
<tr
|
||
key={row.date}
|
||
className="is-clickable"
|
||
onClick={() => onDrill("day")}
|
||
>
|
||
<td>
|
||
<strong>{row.date}</strong>{" "}
|
||
<span className="ehb-kpi-drill-hint">钻取 ›</span>
|
||
</td>
|
||
<td className="is-num is-mono">{kg(row.kg)}</td>
|
||
<td className="is-num is-mono">{yuan(row.cost)}</td>
|
||
<td className="is-num">{number(row.recordCount)}</td>
|
||
<td className="is-num">{number(row.stationCount)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function DrillModal({
|
||
query,
|
||
title,
|
||
onClose,
|
||
}: {
|
||
query: H2BiQuery & { metric: H2BiDrillMetric };
|
||
title: string;
|
||
onClose: () => void;
|
||
}) {
|
||
const [search, setSearch] = useState("");
|
||
const state = useRemoteData(`drill:${JSON.stringify(query)}`, () =>
|
||
fetchH2BiDrill({ ...query, groupBy: "record", page: 1, pageSize: 100 }),
|
||
);
|
||
const data: H2BiDrillResponse | null = state.data;
|
||
const records = useMemo(
|
||
() =>
|
||
(data?.records || []).filter((record) =>
|
||
JSON.stringify(record)
|
||
.toLocaleLowerCase()
|
||
.includes(search.trim().toLocaleLowerCase()),
|
||
),
|
||
[data, search],
|
||
);
|
||
const columns = useMemo(
|
||
() =>
|
||
[
|
||
"time",
|
||
"orderNo",
|
||
"stationName",
|
||
"customerName",
|
||
"plateNo",
|
||
"vehicleScope",
|
||
"source",
|
||
"verifyStatus",
|
||
"kg",
|
||
"unitPrice",
|
||
"cost",
|
||
"revenue",
|
||
].filter((column) =>
|
||
records.some((record) => record[column] !== undefined),
|
||
),
|
||
[records],
|
||
);
|
||
const fieldLabel: Record<string, string> = {
|
||
time: "加氢时间",
|
||
orderNo: "订单号",
|
||
stationName: "加氢站",
|
||
customerName: "客户",
|
||
plateNo: "车牌号",
|
||
vehicleScope: "车辆归属",
|
||
source: "数据源",
|
||
verifyStatus: "核对状态",
|
||
kg: "加氢量 (Kg)",
|
||
unitPrice: "单价 (元/Kg)",
|
||
cost: "成本 (元)",
|
||
revenue: "收入 (元)",
|
||
};
|
||
return (
|
||
<div
|
||
className="ehb-modal-overlay"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-label={`${title}明细`}
|
||
>
|
||
<section className="ehb-modal-card">
|
||
<header className="ehb-modal-head">
|
||
<div className="ehb-modal-head__title-group">
|
||
<ChevronLeft size={18} />
|
||
<div>
|
||
<div className="ehb-modal-head__title">{title}明细</div>
|
||
<div className="ehb-modal-head__sub">
|
||
真实氢费数据下钻 · 跟随当前筛选条件
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-head__actions">
|
||
<button
|
||
type="button"
|
||
className="ehb-modal-close-btn"
|
||
onClick={onClose}
|
||
aria-label="关闭"
|
||
>
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div className="ehb-modal-body">
|
||
{state.loading ? (
|
||
<EmptyTable>正在加载真实明细数据…</EmptyTable>
|
||
) : state.error ? (
|
||
<EmptyTable>{state.error}</EmptyTable>
|
||
) : (
|
||
<>
|
||
<div className="ehb-modal-meta-bar">
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">筛选范围</span>
|
||
<strong className="ehb-modal-meta-val">
|
||
{query.startDate && query.endDate
|
||
? `${query.startDate} 至 ${query.endDate}`
|
||
: `${query.year} 年`}
|
||
</strong>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">记录数</span>
|
||
<strong className="ehb-modal-meta-val">
|
||
{number(
|
||
typeof data?.summary.recordCount === "number"
|
||
? data.summary.recordCount
|
||
: 0,
|
||
)}
|
||
</strong>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢量</span>
|
||
<strong className="ehb-modal-meta-val">
|
||
{number(
|
||
typeof data?.summary.kg === "number"
|
||
? data.summary.kg
|
||
: 0,
|
||
2,
|
||
)}{" "}
|
||
Kg
|
||
</strong>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<span className="ehb-modal-hint-text">
|
||
下钻结果使用当前真实数据源，不回填或补齐任何业务数值。
|
||
</span>
|
||
</div>
|
||
<label className="ehb-modal-search-input">
|
||
<Search size={14} />
|
||
<input
|
||
value={search}
|
||
onChange={(event) => setSearch(event.target.value)}
|
||
placeholder="搜索明细"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div className="ehb-modal-table-wrap is-v-scroll">
|
||
{records.length === 0 ? (
|
||
<EmptyTable>暂无匹配的下钻记录</EmptyTable>
|
||
) : (
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
{columns.map((column) => (
|
||
<th key={column}>{fieldLabel[column] || column}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{records.map((record, index) => (
|
||
<tr key={String(record.id || record.orderId || index)}>
|
||
{columns.map((column) => (
|
||
<td key={column}>{formatRecord(record[column])}</td>
|
||
))}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function formatRecord(value: H2BiDrillRecord[string]) {
|
||
if (value === null || value === undefined || value === "") return "—";
|
||
if (value === "lingniu") return "羚牛车辆";
|
||
if (value === "external") return "外部车辆";
|
||
if (value === "verified") return "已核对";
|
||
if (value === "unverified") return "未核对";
|
||
if (typeof value === "number") return number(value, 2);
|
||
return String(value);
|
||
}
|
||
|
||
function boardQuery(query: H2BiQuery) {
|
||
return JSON.stringify(query);
|
||
}
|
||
|
||
export default function HydrogenBiV2App() {
|
||
const [scope, setScope] = useState<H2BiScope>("global");
|
||
const [view, setView] = useState<H2BiView>("overview");
|
||
const [year, setYear] = useState(now.getFullYear());
|
||
const [stationId, setStationId] = useState<string | number | null>(null);
|
||
const [vehicleScope, setVehicleScope] = useState<H2BiVehicleScope>("all");
|
||
const [verifyScope, setVerifyScope] = useState<H2BiVerifyScope>("all");
|
||
const [startDate, setStartDate] = useState(defaultStartDate);
|
||
const [endDate, setEndDate] = useState(defaultEndDate);
|
||
const [reload, setReload] = useState(0);
|
||
const [drill, setDrill] = useState<{
|
||
metric: H2BiDrillMetric;
|
||
title: string;
|
||
stationId?: string | number | null;
|
||
} | null>(null);
|
||
const metaState = useRemoteData("meta", fetchH2BiMeta);
|
||
const meta: H2BiMetaResponse | null = metaState.data;
|
||
|
||
useEffect(() => {
|
||
if (meta?.years.length && !meta.years.some((item) => item.value === year))
|
||
setYear(meta.years[0].value);
|
||
}, [meta, year]);
|
||
|
||
const query = useMemo<H2BiQuery>(
|
||
() => ({
|
||
year,
|
||
startDate: view === "daily" ? startDate : undefined,
|
||
endDate: view === "daily" ? endDate : undefined,
|
||
stationId: scope === "station" ? stationId : null,
|
||
vehicleScope,
|
||
verifyScope,
|
||
}),
|
||
[
|
||
year,
|
||
startDate,
|
||
endDate,
|
||
stationId,
|
||
scope,
|
||
vehicleScope,
|
||
verifyScope,
|
||
view,
|
||
],
|
||
);
|
||
const overviewState = useRemoteData(
|
||
`overview:${boardQuery(query)}:${reload}`,
|
||
() => fetchH2BiOverview(query),
|
||
);
|
||
const dailyState = useRemoteData(`daily:${boardQuery(query)}:${reload}`, () =>
|
||
fetchH2BiDaily(query),
|
||
);
|
||
const activeState = view === "overview" ? overviewState : dailyState;
|
||
const activeRange =
|
||
view === "overview" ? overviewState.data?.range : dailyState.data?.range;
|
||
const stationName = meta?.stations.find(
|
||
(station) => station.id === stationId,
|
||
)?.name;
|
||
|
||
const openDrill = (
|
||
metric: H2BiDrillMetric,
|
||
targetStationId?: string | number | null,
|
||
) => {
|
||
const titles: Record<H2BiDrillMetric, string> = {
|
||
totalKg: "加氢量",
|
||
totalCost: "成本",
|
||
totalRevenue: "氢费收入",
|
||
customerGrossProfit: "客户毛利",
|
||
monthKg: "本月加氢",
|
||
todayKg: "本日加氢",
|
||
station: "加氢站",
|
||
customer: "客户账单",
|
||
day: "按日加氢",
|
||
};
|
||
setDrill({ metric, title: titles[metric], stationId: targetStationId });
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-shell" data-annotation-id="energy-h2-bi-board">
|
||
<div className="ehb-body">
|
||
<header className="ehb-chrome">
|
||
<div className="ehb-chrome__lead">
|
||
<div className="ehb-crumb">羚牛氢能 BI / 氢能</div>
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 12,
|
||
marginTop: 2,
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
<h1>氢能经营看板</h1>
|
||
{scope === "global" ? (
|
||
<span className="ehb-time-range-pill">
|
||
📅 统计时间范围：{rangeText(activeRange)}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
<div className="ehb-chrome__tools">
|
||
<div
|
||
className="ehb-seg ehb-seg--wrap"
|
||
role="tablist"
|
||
aria-label="范围"
|
||
>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={scope === "global" ? "is-active" : ""}
|
||
aria-selected={scope === "global"}
|
||
onClick={() => setScope("global")}
|
||
>
|
||
全局
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={scope === "station" ? "is-active" : ""}
|
||
aria-selected={scope === "station"}
|
||
onClick={() => setScope("station")}
|
||
>
|
||
单站
|
||
</button>
|
||
</div>
|
||
{scope === "global" ? (
|
||
<div
|
||
className="ehb-seg ehb-seg--wrap"
|
||
role="tablist"
|
||
aria-label="视图"
|
||
>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={view === "daily" ? "is-active" : ""}
|
||
aria-selected={view === "daily"}
|
||
onClick={() => setView("daily")}
|
||
>
|
||
按日
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={view === "overview" ? "is-active" : ""}
|
||
aria-selected={view === "overview"}
|
||
onClick={() => setView("overview")}
|
||
>
|
||
总览
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</header>
|
||
<div className="ehb-related-modules" aria-label="关联模块">
|
||
<button
|
||
type="button"
|
||
className="ehb-related-card"
|
||
onClick={() => {
|
||
setScope("station");
|
||
setView("daily");
|
||
}}
|
||
>
|
||
<span className="ehb-related-card__title">加氢站日报</span>
|
||
<span className="ehb-related-card__body">
|
||
也可从顶栏「单站」进入；独立页便于外链
|
||
</span>
|
||
<span className="ehb-related-card__cta">打开独立站日报 ›</span>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="ehb-related-card"
|
||
onClick={() => {
|
||
window.location.hash = "hydrogen/settlement";
|
||
}}
|
||
>
|
||
<span className="ehb-related-card__title">站日现结登记</span>
|
||
<span className="ehb-related-card__body">
|
||
真实付款台账入口，按站日登记与核对
|
||
</span>
|
||
<span className="ehb-related-card__cta">去登记 ›</span>
|
||
</button>
|
||
</div>
|
||
<section
|
||
className="ehb-daily-filter-card"
|
||
style={{ marginBottom: 12 }}
|
||
aria-label="数据筛选"
|
||
>
|
||
<div className="ehb-daily-filter-row">
|
||
<div className="ehb-daily-filter-group">
|
||
<PrototypeYearSelect
|
||
value={year}
|
||
years={(meta?.years ?? []).map((item) => item.value)}
|
||
onChange={setYear}
|
||
/>
|
||
{scope === "station" ? (
|
||
<select
|
||
className="ehb-modal-select"
|
||
value={stationId ?? ""}
|
||
onChange={(event) => setStationId(event.target.value || null)}
|
||
aria-label="加氢站"
|
||
>
|
||
<option value="">全部加氢站</option>
|
||
{(meta?.stations || []).map((station) => (
|
||
<option key={station.id} value={station.id}>
|
||
{station.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
) : null}
|
||
<div className="ehb-pill-tabs">
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${verifyScope === "all" ? "is-active" : ""}`}
|
||
onClick={() => setVerifyScope("all")}
|
||
>
|
||
全量订单
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${verifyScope === "verified" ? "is-active" : ""}`}
|
||
onClick={() => setVerifyScope("verified")}
|
||
>
|
||
仅已核对
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-daily-filter-group">
|
||
{view === "daily" ? (
|
||
<>
|
||
<input
|
||
className="ehb-modal-select"
|
||
type="date"
|
||
value={startDate}
|
||
onChange={(event) => setStartDate(event.target.value)}
|
||
aria-label="开始日期"
|
||
/>
|
||
<input
|
||
className="ehb-modal-select"
|
||
type="date"
|
||
value={endDate}
|
||
onChange={(event) => setEndDate(event.target.value)}
|
||
aria-label="结束日期"
|
||
/>
|
||
</>
|
||
) : null}
|
||
<div className="ehb-fleet-segmented">
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${vehicleScope === "all" ? "is-active" : ""}`}
|
||
onClick={() => setVehicleScope("all")}
|
||
>
|
||
全部车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${vehicleScope === "lingniu" ? "is-active" : ""}`}
|
||
onClick={() => setVehicleScope("lingniu")}
|
||
>
|
||
<Truck size={14} />
|
||
仅羚牛车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${vehicleScope === "external" ? "is-active" : ""}`}
|
||
onClick={() => setVehicleScope("external")}
|
||
>
|
||
<Truck size={14} />
|
||
仅外部车辆
|
||
</button>
|
||
</div>
|
||
<span className="ehb-chrome__clock">
|
||
{activeState.data?.watermark.ledgerAt || "加载中…"}
|
||
</span>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--ghost"
|
||
onClick={() => setReload((value) => value + 1)}
|
||
title="数据刷新"
|
||
>
|
||
<RefreshCw size={14} />
|
||
刷新
|
||
</button>
|
||
{stationName ? (
|
||
<span className="ehb-chrome__clock">
|
||
当前单站：{stationName}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{metaState.error ? (
|
||
<div className="ehb-empty">
|
||
<div className="ehb-empty__title">
|
||
筛选元数据加载失败：{metaState.error}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{activeState.loading && !activeState.data ? (
|
||
<div className="ehb-empty">
|
||
<RefreshCw className="ehb-empty__icon" size={22} />
|
||
<div className="ehb-empty__title">正在加载真实氢能数据…</div>
|
||
</div>
|
||
) : null}
|
||
{activeState.error ? (
|
||
<div className="ehb-empty">
|
||
<div className="ehb-empty__title">{activeState.error}</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn"
|
||
onClick={() => setReload((value) => value + 1)}
|
||
>
|
||
重新加载
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
{view === "overview" && overviewState.data ? (
|
||
<OverviewPage overview={overviewState.data} onDrill={openDrill} />
|
||
) : null}
|
||
{view === "daily" && dailyState.data ? (
|
||
<DailyPage daily={dailyState.data} onDrill={openDrill} />
|
||
) : null}
|
||
</div>
|
||
{drill ? (
|
||
<DrillModal
|
||
query={{
|
||
...query,
|
||
metric: drill.metric,
|
||
stationId: drill.stationId ?? query.stationId,
|
||
}}
|
||
title={drill.title}
|
||
onClose={() => setDrill(null)}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|