5279 lines
233 KiB
TypeScript
5279 lines
233 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||
import {
|
||
Activity,
|
||
Calendar,
|
||
ChevronDown,
|
||
ChevronLeft,
|
||
ChevronRight,
|
||
Download,
|
||
Fuel,
|
||
RefreshCw,
|
||
Search,
|
||
Shield,
|
||
TrendingDown,
|
||
TrendingUp,
|
||
Truck,
|
||
Wallet,
|
||
X,
|
||
Zap,
|
||
} from 'lucide-react';
|
||
import { downloadExcelAoa } from '../../common/download-xls';
|
||
import {
|
||
SOURCE_LABEL,
|
||
companyRowsForStats,
|
||
computeHostKpi,
|
||
costDimCards,
|
||
costDimLabel,
|
||
customerAttrAgg,
|
||
filterOrders,
|
||
formatKg,
|
||
formatYuan,
|
||
pendingAmount,
|
||
stationMonthAgg,
|
||
type DimFilter,
|
||
unverified,
|
||
} from './data/aggregates';
|
||
import { DEFAULT_YEAR, HOST_KPI, MOCK_ORDERS } from './data/mockBoard';
|
||
import {
|
||
DAILY_VERIFY_LABEL,
|
||
MOCK_DAILY_15DAYS,
|
||
SOURCE_TYPE_LABEL,
|
||
STATION_TYPE_LABEL,
|
||
calculateDailyKpis,
|
||
filterDailyDataByFleet,
|
||
getDailyDataForRange,
|
||
type FleetCategory,
|
||
type FleetCategoryFilter,
|
||
} from './data/mockDaily';
|
||
import type { FleetScope, HostView, H2OrderRow } from './types';
|
||
import { StationDailyApp } from '../energy-h2-station-daily/StationDailyApp';
|
||
import '../energy-h2-station-daily/styles.css';
|
||
import './styles/energy-bi-board.css';
|
||
|
||
type BoardScope = 'global' | 'station';
|
||
type StatsTab = 'siteMonth' | 'customer';
|
||
|
||
interface BiYearSelectProps {
|
||
value: number;
|
||
onChange: (year: number) => void;
|
||
}
|
||
|
||
function BiYearSelect({ value, onChange }: BiYearSelectProps) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
|
||
// 提供从 2026 到 2020 年份列表，满足历史多年数据查阅诉求
|
||
const years = [2026, 2025, 2024, 2023, 2022, 2021, 2020];
|
||
|
||
useEffect(() => {
|
||
function handleClickOutside(e: MouseEvent) {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) {
|
||
setIsOpen(false);
|
||
}
|
||
}
|
||
if (isOpen) {
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
}
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}, [isOpen]);
|
||
|
||
return (
|
||
<div className="ehb-year-select-wrapper" ref={ref}>
|
||
<button
|
||
type="button"
|
||
className={`ehb-year-select-btn ${isOpen ? 'is-active' : ''}`}
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
aria-label="年份选择"
|
||
>
|
||
<span className="ehb-year-text">{value} 年</span>
|
||
<ChevronDown
|
||
size={13}
|
||
style={{
|
||
transition: 'transform 0.2s ease',
|
||
transform: isOpen ? 'rotate(180deg)' : 'none',
|
||
color: '#64748b',
|
||
}}
|
||
/>
|
||
</button>
|
||
|
||
{isOpen && (
|
||
<div className="ehb-year-dropdown">
|
||
<div className="ehb-year-dropdown__header">切换数据年份</div>
|
||
<div className="ehb-year-dropdown__list">
|
||
{years.map((y) => (
|
||
<button
|
||
key={y}
|
||
type="button"
|
||
className={`ehb-year-dropdown__item ${y === value ? 'is-selected' : ''}`}
|
||
onClick={() => {
|
||
onChange(y);
|
||
setIsOpen(false);
|
||
}}
|
||
>
|
||
<span>{y} 年</span>
|
||
{y === value && <span className="ehb-year-check">✓</span>}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** BI 皮 · 可搜索选择器（禁 V2；穿透筛专用） */
|
||
interface BiSearchSelectOption {
|
||
value: string;
|
||
label: string;
|
||
}
|
||
|
||
function BiSearchSelect({
|
||
value,
|
||
onChange,
|
||
options,
|
||
allLabel,
|
||
placeholder = '搜索…',
|
||
width = 180,
|
||
disabled = false,
|
||
}: {
|
||
value: string;
|
||
onChange: (next: string) => void;
|
||
options: BiSearchSelectOption[];
|
||
allLabel: string;
|
||
placeholder?: string;
|
||
width?: number;
|
||
disabled?: boolean;
|
||
}) {
|
||
const [open, setOpen] = useState(false);
|
||
const [query, setQuery] = useState('');
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
||
useEffect(() => {
|
||
function onDoc(e: MouseEvent) {
|
||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||
}
|
||
if (open) document.addEventListener('mousedown', onDoc);
|
||
return () => document.removeEventListener('mousedown', onDoc);
|
||
}, [open]);
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
setQuery('');
|
||
requestAnimationFrame(() => inputRef.current?.focus());
|
||
}
|
||
}, [open]);
|
||
|
||
const selectedLabel =
|
||
value === 'all' ? allLabel : options.find((o) => o.value === value)?.label || allLabel;
|
||
|
||
const filtered = useMemo(() => {
|
||
const q = query.trim().toLowerCase();
|
||
if (!q) return options;
|
||
return options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
|
||
}, [options, query]);
|
||
|
||
return (
|
||
<div className={`ehb-bi-search-select ${disabled ? 'is-disabled' : ''}`} ref={ref} style={{ width }}>
|
||
<button
|
||
type="button"
|
||
className={`ehb-bi-search-select__trigger ${open ? 'is-open' : ''} ${value !== 'all' ? 'has-value' : ''}`}
|
||
onClick={() => !disabled && setOpen((v) => !v)}
|
||
disabled={disabled}
|
||
title={selectedLabel}
|
||
>
|
||
<span className="ehb-bi-search-select__label">{selectedLabel}</span>
|
||
<ChevronDown size={13} className="ehb-bi-search-select__chevron" />
|
||
</button>
|
||
{open && !disabled && (
|
||
<div className="ehb-bi-search-select__dropdown">
|
||
<div className="ehb-bi-search-select__search">
|
||
<Search size={13} />
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder={placeholder}
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
</div>
|
||
<div className="ehb-bi-search-select__list">
|
||
<button
|
||
type="button"
|
||
className={`ehb-bi-search-select__item ${value === 'all' ? 'is-selected' : ''}`}
|
||
onClick={() => {
|
||
onChange('all');
|
||
setOpen(false);
|
||
}}
|
||
>
|
||
{allLabel}
|
||
</button>
|
||
{filtered.map((o) => (
|
||
<button
|
||
key={o.value}
|
||
type="button"
|
||
className={`ehb-bi-search-select__item ${value === o.value ? 'is-selected' : ''}`}
|
||
onClick={() => {
|
||
onChange(o.value);
|
||
setOpen(false);
|
||
}}
|
||
title={o.label}
|
||
>
|
||
{o.label}
|
||
</button>
|
||
))}
|
||
{filtered.length === 0 && <div className="ehb-bi-search-select__empty">无匹配项</div>}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 站加氢汇总假数据 (带省份归属，与用户截图高保真100%对齐)
|
||
const MOCK_STATION_SUMMARY_LIST = [
|
||
{ rank: 1, name: '嘉兴中石化滨海加氢站', province: '浙江省', kgT: '243.66', kgPct: 35.0, incomeWan: '52.66', incomePct: 7.1 },
|
||
{ rank: 2, name: '嘉兴嘉锦加氢站', province: '浙江省', kgT: '182.89', kgPct: 26.2, incomeWan: '119.53', incomePct: 16.1 },
|
||
{ rank: 3, name: '嘉兴嘉燃加氢站', province: '浙江省', kgT: '28.23', kgPct: 4.0, incomeWan: '61.47', incomePct: 8.3 },
|
||
{ rank: 4, name: '桐乡中石化绿能加氢站', province: '浙江省', kgT: '26.08', kgPct: 3.7, incomeWan: '35.76', incomePct: 4.8 },
|
||
{ rank: 5, name: '成都中石化天府机场高速北站加氢站', province: '四川省', kgT: '22.93', kgPct: 3.3, incomeWan: '68.62', incomePct: 9.2 },
|
||
{ rank: 6, name: '花桥中石油加氢站', province: '江苏省', kgT: '19.71', kgPct: 2.8, incomeWan: '35.15', incomePct: 4.7 },
|
||
{ rank: 7, name: '常熟嘉化加氢站', province: '江苏省', kgT: '15.56', kgPct: 2.2, incomeWan: '25.81', incomePct: 3.5 },
|
||
{ rank: 8, name: '嘉善中石化站前路加氢站', province: '浙江省', kgT: '14.61', kgPct: 2.1, incomeWan: '25.34', incomePct: 3.4 },
|
||
{ rank: 9, name: '嘉兴东方港湾加氢站', province: '浙江省', kgT: '13.45', kgPct: 1.9, incomeWan: '7.01', incomePct: 0.9 },
|
||
{ rank: 10, name: '成都中石化天府机场高速南站加氢站', province: '四川省', kgT: '12.86', kgPct: 1.8, incomeWan: '38.46', incomePct: 5.2 },
|
||
{ rank: 11, name: '成都国氢华通加氢站', province: '四川省', kgT: '12.09', kgPct: 1.7, incomeWan: '36.26', incomePct: 4.9 },
|
||
{ rank: 12, name: '广州新锋交通联新加氢站', province: '广东省', kgT: '9.33', kgPct: 1.3, incomeWan: '13.49', incomePct: 1.8 },
|
||
{ rank: 13, name: '乌鲁木齐隆盛达沙坪加氢站', province: '新疆维吾尔自治区', kgT: '9.33', kgPct: 1.3, incomeWan: '21.12', incomePct: 2.8 },
|
||
{ rank: 14, name: '佛山豪石油加氢站', province: '广东省', kgT: '8.96', kgPct: 1.3, incomeWan: '26.6', incomePct: 3.6 },
|
||
{ rank: 15, name: '佛南海羚牛加氢站', province: '广东省', kgT: '7.10', kgPct: 1.0, incomeWan: '3.29', incomePct: 0.4 },
|
||
{ rank: 16, name: '佛山中石化佛西加氢站', province: '广东省', kgT: '5.83', kgPct: 0.8, incomeWan: '20.32', incomePct: 2.7 },
|
||
{ rank: 17, name: '广州中石化东明三路加氢站', province: '广东省', kgT: '5.62', kgPct: 0.8, incomeWan: '5.73', incomePct: 0.8 },
|
||
{ rank: 18, name: '常熟AP银河路加氢站', province: '江苏省', kgT: '4.98', kgPct: 0.7, incomeWan: '20.06', incomePct: 2.7 },
|
||
{ rank: 19, name: '武汉中石化革新加氢站', province: '湖北省', kgT: '3.95', kgPct: 0.6, incomeWan: '9.45', incomePct: 1.3 },
|
||
{ rank: 20, name: '韶关韶钢加氢站', province: '广东省', kgT: '3.72', kgPct: 0.5, incomeWan: '10.81', incomePct: 1.5 },
|
||
{ rank: 21, name: '成都博能加氢站', province: '四川省', kgT: '3.49', kgPct: 0.5, incomeWan: '10.21', incomePct: 1.4 },
|
||
{ rank: 22, name: '无锡润硕氢能加氢站', province: '江苏省', kgT: '3.22', kgPct: 0.5, incomeWan: '11.98', incomePct: 1.6 },
|
||
{ rank: 23, name: '上海安亭加氢站', province: '上海市', kgT: '3.10', kgPct: 0.4, incomeWan: '9.82', incomePct: 1.3 },
|
||
{ rank: 24, name: '昆山千灯加氢站', province: '江苏省', kgT: '2.88', kgPct: 0.4, incomeWan: '8.90', incomePct: 1.2 },
|
||
{ rank: 25, name: '宁波港区示范加氢站', province: '浙江省', kgT: '2.45', kgPct: 0.3, incomeWan: '7.65', incomePct: 1.0 },
|
||
];
|
||
|
||
// 客户账单汇总假数据 (Top 30 与用户截图高保真100%对齐)
|
||
const MOCK_CUSTOMER_SUMMARY_LIST = [
|
||
{ rank: 1, name: '嘉兴市乍浦港口经营有限公司', bearer: 'cust' as const, kgT: '288.37', costWan: '807.94', receivable: '¥1,987 元' },
|
||
{ rank: 2, name: '嘉兴益顺冷链物流有限公司', bearer: 'cust' as const, kgT: '38.93', costWan: '136.83', receivable: '¥66.25 万元' },
|
||
{ rank: 3, name: '嘉兴智奇供应链管理有限公司', bearer: 'cust' as const, kgT: '35.45', costWan: '101.73', receivable: '¥14.44 万元' },
|
||
{ rank: 4, name: '车辆异动', bearer: 'cust' as const, kgT: '28.10', costWan: '92.96', receivable: '¥2,503 元' },
|
||
{ rank: 5, name: '四川群彬物流有限公司', bearer: 'cust' as const, kgT: '23.35', costWan: '69.98', receivable: '¥69.98 万元' },
|
||
{ rank: 6, name: '浙江洋井供应链管理有限公司', bearer: 'cust' as const, kgT: '18.62', costWan: '61.08', receivable: '¥321 元' },
|
||
{ rank: 7, name: '无锡铭康物流有限公司-1', bearer: 'lingniu' as const, kgT: '16.89', costWan: '58.38', receivable: '¥0 元' },
|
||
{ rank: 8, name: '上海明纳物流有限公司', bearer: 'lingniu' as const, kgT: '12.44', costWan: '41.4', receivable: '¥0 元' },
|
||
{ rank: 9, name: '嘉兴中外运物流有限公司', bearer: 'lingniu' as const, kgT: '11.39', costWan: '31.94', receivable: '¥0 元' },
|
||
{ rank: 10, name: '重庆金时源供应链有限公司', bearer: 'cust' as const, kgT: '11.18', costWan: '27.96', receivable: '¥27.96 万元' },
|
||
{ rank: 11, name: '四川拱照物流有限公司', bearer: 'cust' as const, kgT: '10.34', costWan: '31', receivable: '¥31 万元' },
|
||
{ rank: 12, name: '无锡铭康物流有限公司', bearer: 'lingniu' as const, kgT: '9.21', costWan: '31.72', receivable: '¥0 元' },
|
||
{ rank: 13, name: '嘉兴羚利供应链科技有限公司', bearer: 'cust' as const, kgT: '8.62', costWan: '24.13', receivable: '¥25.85 万元' },
|
||
{ rank: 14, name: '宁波港集装箱运输有限公司嘉兴分公司', bearer: 'cust' as const, kgT: '8.09', costWan: '22.66', receivable: '¥23.01 万元' },
|
||
{ rank: 15, name: '成都诺和物流有限公司', bearer: 'cust' as const, kgT: '6.67', costWan: '19.99', receivable: '¥19.99 万元' },
|
||
{ rank: 16, name: '嘉兴市飞宇物流有限公司', bearer: 'cust' as const, kgT: '6.49', costWan: '18.22', receivable: '¥6,483 元' },
|
||
{ rank: 17, name: '嘉兴港区众通快递有限公司', bearer: 'cust' as const, kgT: '6.27', costWan: '17.55', receivable: '¥18.81 万元' },
|
||
{ rank: 18, name: '浙江集佑供应链有限公司', bearer: 'cust' as const, kgT: '6.20', costWan: '17.35', receivable: '¥18.59 万元' },
|
||
{ rank: 19, name: '日邮物流(中国)有限公司', bearer: 'cust' as const, kgT: '5.90', costWan: '22.11', receivable: '¥22.2 万元' },
|
||
{ rank: 20, name: '四川邦达蜀运供应链管理有限公司', bearer: 'cust' as const, kgT: '5.21', costWan: '15.63', receivable: '¥15.65 万元' },
|
||
{ rank: 21, name: '嘉兴古道物流有限公司', bearer: 'cust' as const, kgT: '5.18', costWan: '14.49', receivable: '¥15.53 万元' },
|
||
{ rank: 22, name: '宁波乐驰物流有限公司', bearer: 'cust' as const, kgT: '5.01', costWan: '14.01', receivable: '¥14.1 万元' },
|
||
{ rank: 23, name: '广东清运物流专线', bearer: 'cust' as const, kgT: '4.82', costWan: '13.50', receivable: '¥13.50 万元' },
|
||
{ rank: 24, name: '顺丰冷运嘉兴分线', bearer: 'cust' as const, kgT: '4.21', costWan: '11.78', receivable: '¥11.80 万元' },
|
||
{ rank: 25, name: '极兔速递冷链事业部', bearer: 'cust' as const, kgT: '3.95', costWan: '11.06', receivable: '¥11.06 万元' },
|
||
{ rank: 26, name: '武汉捷运货运有限公司', bearer: 'cust' as const, kgT: '3.62', costWan: '10.13', receivable: '¥10.15 万元' },
|
||
{ rank: 27, name: '成都天府物流二部', bearer: 'cust' as const, kgT: '3.11', costWan: '8.70', receivable: '¥8.70 万元' },
|
||
{ rank: 28, name: '广州黄埔冷链车队', bearer: 'cust' as const, kgT: '2.85', costWan: '7.98', receivable: '¥8.00 万元' },
|
||
{ rank: 29, name: '常熟物流储运中心', bearer: 'cust' as const, kgT: '2.40', costWan: '6.72', receivable: '¥6.72 万元' },
|
||
{ rank: 30, name: '无锡灵通运输公司', bearer: 'cust' as const, kgT: '2.10', costWan: '5.88', receivable: '¥5.90 万元' },
|
||
];
|
||
|
||
interface OverviewTrendsProps {
|
||
year: number;
|
||
fleetScope: FleetScope;
|
||
verifyScope: 'all' | 'verified';
|
||
onOpenDrill: (label: string) => void;
|
||
onOpenCustomerBill: (custName: string) => void;
|
||
onOpenStationBill: (stName: string, province: string) => void;
|
||
}
|
||
|
||
function OverviewTrendsDashboard({ year, fleetScope, verifyScope, onOpenDrill, onOpenCustomerBill, onOpenStationBill }: OverviewTrendsProps) {
|
||
// 月度加氢量数据 (根据年份、车辆范围、核对范围加权)
|
||
const monthlyData = useMemo(() => {
|
||
const is2026 = year === 2026;
|
||
const is2025 = year === 2025;
|
||
const factor = is2026 ? 1 : is2025 ? 0.85 : 0.7;
|
||
// 仅已核对：外部车在示意数据中不参与核对 → 外部归零；羚牛约 3/4 已核
|
||
const ownVerifyFactor = verifyScope === 'verified' ? 0.75 : 1;
|
||
const extVerifyFactor = verifyScope === 'verified' ? 0 : 1;
|
||
|
||
const baseMonths = [
|
||
{ m: '1月', own: 56800, ext: 28400 },
|
||
{ m: '2月', own: 34600, ext: 17400 },
|
||
{ m: '3月', own: 75200, ext: 37600 },
|
||
{ m: '4月', own: 90000, ext: 45000 },
|
||
{ m: '5月', own: 85300, ext: 42700 },
|
||
{ m: '6月', own: 78600, ext: 39400 },
|
||
{ m: '7月', own: 81300, ext: 40700 },
|
||
{ m: '8月', own: 18600, ext: 9400 },
|
||
];
|
||
|
||
return baseMonths.map((item) => {
|
||
let ownKg = Math.round(item.own * factor * ownVerifyFactor);
|
||
let extKg = Math.round(item.ext * factor * extVerifyFactor);
|
||
if (fleetScope === 'own') extKg = 0;
|
||
if (fleetScope === 'external') ownKg = 0;
|
||
const totalKg = ownKg + extKg;
|
||
return { month: item.m, ownKg, extKg, totalKg };
|
||
});
|
||
}, [year, fleetScope, verifyScope]);
|
||
|
||
const maxMonthlyKg = useMemo(() => {
|
||
return Math.max(...monthlyData.map((d) => d.totalKg), 1);
|
||
}, [monthlyData]);
|
||
|
||
// 基础客户列表池，用于计算月度客户加氢金额排行
|
||
const baseCustomers = [
|
||
{ name: '嘉兴市乍浦港口经营有限公司', ratio: 0.408 },
|
||
{ name: '嘉兴益顺冷链物流有限公司', ratio: 0.176 },
|
||
{ name: '嘉兴智奇供应链管理有限公司', ratio: 0.118 },
|
||
{ name: '四川群彬物流有限公司', ratio: 0.078 },
|
||
{ name: '浙江洋井供应链管理有限公司', ratio: 0.053 },
|
||
{ name: '重庆金时源供应链有限公司', ratio: 0.039 },
|
||
{ name: '四川拱照物流有限公司', ratio: 0.030 },
|
||
{ name: '嘉兴羚利供应链科技有限公司', ratio: 0.027 },
|
||
{ name: '宁波港集装箱运输嘉兴分公司', ratio: 0.023 },
|
||
{ name: '成都诺和物流有限公司', ratio: 0.015 },
|
||
{ name: '嘉兴市飞宇物流有限公司', ratio: 0.012 },
|
||
{ name: '嘉兴港区众通快递有限公司', ratio: 0.010 },
|
||
{ name: '浙江集佑供应链有限公司', ratio: 0.008 },
|
||
{ name: '日邮物流(中国)有限公司', ratio: 0.003 },
|
||
];
|
||
|
||
// 月度收支对比数据及客户加氢金额明细 & 成本支出结构明细
|
||
const monthlyRevenueData = useMemo(() => {
|
||
const is2026 = year === 2026;
|
||
const factor = is2026 ? 1 : 0.8;
|
||
const fleetFactor = fleetScope === 'all' ? 1 : fleetScope === 'own' ? 0.67 : 0.33;
|
||
const verifyFactor = verifyScope === 'verified' ? (fleetScope === 'external' ? 0 : 0.75) : 1;
|
||
const scale = factor * fleetFactor * verifyFactor;
|
||
const base = [
|
||
{ m: '1月', income: 82000, cost: 78000 },
|
||
{ m: '2月', income: 38000, cost: 36000 },
|
||
{ m: '3月', income: 98000, cost: 92000 },
|
||
{ m: '4月', income: 105000, cost: 99000 },
|
||
{ m: '5月', income: 112000, cost: 104000 },
|
||
{ m: '6月', income: 118000, cost: 109000 },
|
||
{ m: '7月', income: 115000, cost: 108000 },
|
||
{ m: '8月', income: 16500, cost: 15800 },
|
||
];
|
||
|
||
return base.map((b) => {
|
||
const income = Math.round(b.income * scale);
|
||
const cost = Math.round(b.cost * scale);
|
||
|
||
// 计算每个客户当月收入金额
|
||
const rawList = baseCustomers.map((c) => ({
|
||
name: c.name,
|
||
amount: Math.round(income * c.ratio),
|
||
}));
|
||
|
||
// 按从高到低排序
|
||
rawList.sort((x, y) => y.amount - x.amount);
|
||
|
||
// 截取 TOP9
|
||
const top9 = rawList.slice(0, 9);
|
||
const restList = rawList.slice(9);
|
||
const restAmount = restList.reduce((sum, item) => sum + item.amount, 0);
|
||
|
||
// 计算成本支出结构细项 (包氢、我司承担、物流、运维异动、运维调拨)
|
||
const costDetails = [
|
||
{ label: '包氢项目', amount: Math.round(cost * 0.36) },
|
||
{ label: '我司承担', amount: Math.round(cost * 0.32) },
|
||
{ label: '物流成本', amount: Math.round(cost * 0.18) },
|
||
{ label: '运维异动', amount: Math.round(cost * 0.08) },
|
||
{ label: '运维调拨', amount: Math.round(cost * 0.06) },
|
||
];
|
||
|
||
return {
|
||
m: b.m,
|
||
income,
|
||
cost,
|
||
top9,
|
||
restAmount,
|
||
restCount: restList.length,
|
||
costDetails,
|
||
};
|
||
});
|
||
}, [year, fleetScope, verifyScope]);
|
||
|
||
const maxRevenueVal = useMemo(() => {
|
||
return Math.max(...monthlyRevenueData.flatMap((d) => [d.income, d.cost]), 1);
|
||
}, [monthlyRevenueData]);
|
||
|
||
// Top5 站列表 (带内部 vs 外部堆积；跟随车辆/核对筛选)
|
||
const topStations = useMemo(() => {
|
||
const ownVerifyFactor = verifyScope === 'verified' ? 0.75 : 1;
|
||
const extVerifyFactor = verifyScope === 'verified' ? 0 : 1;
|
||
const raw = [
|
||
{ rank: 1, name: '嘉兴中石化滨海加氢站', ownKg: 163250, extKg: 80411 },
|
||
{ rank: 2, name: '嘉兴嘉锦加氢站', ownKg: 128020, extKg: 54869 },
|
||
{ rank: 3, name: '嘉兴嘉燃加氢站', ownKg: 18350, extKg: 9884 },
|
||
{ rank: 4, name: '桐乡中石化绿能加氢站', ownKg: 15648, extKg: 10432 },
|
||
{ rank: 5, name: '成都中石化天府机场北站', ownKg: 16050, extKg: 6879 },
|
||
];
|
||
return raw
|
||
.map((st) => {
|
||
let ownKg = Math.round(st.ownKg * ownVerifyFactor);
|
||
let extKg = Math.round(st.extKg * extVerifyFactor);
|
||
if (fleetScope === 'own') extKg = 0;
|
||
if (fleetScope === 'external') ownKg = 0;
|
||
const val = ownKg + extKg;
|
||
return { ...st, ownKg, extKg, val, pct: 100 };
|
||
})
|
||
.map((st, _, arr) => {
|
||
const maxVal = Math.max(...arr.map((x) => x.val), 1);
|
||
return { ...st, pct: Math.round((st.val / maxVal) * 100) };
|
||
});
|
||
}, [fleetScope, verifyScope]);
|
||
|
||
// 区域维度控制: 按市 ('city') | 按省 ('province')
|
||
const [regionGranularity, setRegionGranularity] = useState<'province' | 'city'>('city');
|
||
|
||
// 省份筛选控制: 'all' | '浙江省' | '四川省' | '广东省' | '江苏省' | '湖北省' 等
|
||
const [selectedProvince, setSelectedProvince] = useState<string>('all');
|
||
|
||
// 已有加氢站的省份去重列表
|
||
const availableProvinces = useMemo(() => {
|
||
const list: string[] = ['all'];
|
||
MOCK_STATION_SUMMARY_LIST.forEach((st) => {
|
||
if (st.province && !list.includes(st.province)) {
|
||
list.push(st.province);
|
||
}
|
||
});
|
||
return list;
|
||
}, []);
|
||
|
||
// 根据选定省份精准过滤加氢站列表
|
||
const filteredStationList = useMemo(() => {
|
||
if (selectedProvince === 'all') return MOCK_STATION_SUMMARY_LIST;
|
||
return MOCK_STATION_SUMMARY_LIST.filter((st) => st.province === selectedProvince);
|
||
}, [selectedProvince]);
|
||
|
||
// 根据过滤结果计算总站数 (全国 65 站基准，按比例联动)
|
||
const stationCountDisplay = useMemo(() => {
|
||
if (selectedProvince === 'all') return '共 65 站';
|
||
if (selectedProvince === '浙江省') return '共 28 站';
|
||
if (selectedProvince === '广东省') return '共 16 站';
|
||
if (selectedProvince === '四川省') return '共 11 站';
|
||
if (selectedProvince === '江苏省') return '共 7 站';
|
||
return `共 ${filteredStationList.length} 站`;
|
||
}, [selectedProvince, filteredStationList]);
|
||
|
||
// 按市区域占比数据 (规范地级市名称)
|
||
const cityRegions = [
|
||
{ label: '嘉兴市', pct: '65.2%', color: '#0284c7', dashArray: '155 238', dashOffset: '0' },
|
||
{ label: '成都市', pct: '7.4%', color: '#38bdf8', dashArray: '18 238', dashOffset: '-156' },
|
||
{ label: '佛山市', pct: '3.7%', color: '#10b981', dashArray: '9 238', dashOffset: '-175' },
|
||
{ label: '昆山市', pct: '2.8%', color: '#f59e0b', dashArray: '7 238', dashOffset: '-185' },
|
||
{ label: '常熟市', pct: '2.2%', color: '#8b5cf6', dashArray: '5 238', dashOffset: '-193' },
|
||
{ label: '广州市', pct: '2.1%', color: '#ec4899', dashArray: '5 238', dashOffset: '-199' },
|
||
{ label: '深圳市', pct: '1.9%', color: '#06b6d4', dashArray: '4 238', dashOffset: '-205' },
|
||
{ label: '无锡市', pct: '1.9%', color: '#84cc16', dashArray: '4 238', dashOffset: '-210' },
|
||
{ label: '其他城市', pct: '12.7%', color: '#94a3b8', dashArray: '30 238', dashOffset: '-215' },
|
||
];
|
||
|
||
// 按省区域占比数据
|
||
const provinceRegions = [
|
||
{ label: '浙江省', pct: '73.2%', color: '#0284c7', dashArray: '175 238', dashOffset: '0' },
|
||
{ label: '四川省', pct: '11.8%', color: '#38bdf8', dashArray: '28 238', dashOffset: '-176' },
|
||
{ label: '广东省', pct: '7.5%', color: '#10b981', dashArray: '18 238', dashOffset: '-205' },
|
||
{ label: '江苏省', pct: '5.4%', color: '#f59e0b', dashArray: '13 238', dashOffset: '-224' },
|
||
{ label: '其他省份', pct: '2.1%', color: '#94a3b8', dashArray: '5 238', dashOffset: '-238' },
|
||
];
|
||
|
||
const activeRegions = regionGranularity === 'province' ? provinceRegions : cityRegions;
|
||
|
||
return (
|
||
<div className="ehb-overview-charts">
|
||
{/* 1. 月度加氢量趋势柱图 */}
|
||
<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">
|
||
<span className="ehb-legend-sq" style={{ background: '#0284c7' }} />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<span className="ehb-legend-sq" style={{ background: '#f59e0b' }} />
|
||
外部客户
|
||
</span>
|
||
<span className="ehb-chart-box-meta">
|
||
统计范围：{year === 2026 ? '2026-01-01 至 2026-08-08' : `${year}-01-01 至 ${year}-12-31`} · 单位 Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-mbar-chart">
|
||
{monthlyData.map((d) => {
|
||
const heightPct = Math.min(100, Math.round((d.totalKg / maxMonthlyKg) * 100));
|
||
const ownRatio = d.totalKg > 0 ? Math.round((d.ownKg / d.totalKg) * 100) : 60;
|
||
const extRatio = Math.max(0, 100 - ownRatio);
|
||
|
||
return (
|
||
<div
|
||
key={d.month}
|
||
className="ehb-mbar-col"
|
||
onClick={() => onOpenDrill(`${year}年${d.month}加氢量`)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="点击钻取该月各加氢站内部/外部客户加氢量"
|
||
>
|
||
{/* 悬浮柱状图时显示内部客户、外部客户加氢量卡片 */}
|
||
<div className="ehb-mbar-tooltip">
|
||
<div className="ehb-mbar-tooltip__head">
|
||
{year}年{d.month}
|
||
</div>
|
||
<div className="ehb-mbar-tooltip__row">
|
||
<span className="ehb-mbar-tooltip__left">
|
||
<span className="ehb-mbar-tooltip__dot is-own" />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-mbar-tooltip__val">
|
||
{d.ownKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-mbar-tooltip__row">
|
||
<span className="ehb-mbar-tooltip__left">
|
||
<span className="ehb-mbar-tooltip__dot is-ext" />
|
||
外部客户
|
||
</span>
|
||
<span className="ehb-mbar-tooltip__val">
|
||
{d.extKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div
|
||
className="ehb-mbar-tooltip__row"
|
||
style={{
|
||
marginTop: 2,
|
||
paddingTop: 3,
|
||
borderTop: '1px dashed rgba(255, 255, 255, 0.15)',
|
||
}}
|
||
>
|
||
<span
|
||
className="ehb-mbar-tooltip__left"
|
||
style={{ color: '#ffffff', fontWeight: 600 }}
|
||
>
|
||
月度合计
|
||
</span>
|
||
<span className="ehb-mbar-tooltip__val" style={{ color: '#38bdf8' }}>
|
||
{d.totalKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-mbar-val">{(d.totalKg / 1000).toFixed(1)}k</div>
|
||
<div
|
||
className="ehb-mbar-fill"
|
||
style={{
|
||
height: `${heightPct}%`,
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
overflow: 'hidden',
|
||
background: 'transparent',
|
||
borderRadius: '4px 4px 0 0',
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
height: `${extRatio}%`,
|
||
background: 'linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%)',
|
||
}}
|
||
/>
|
||
<div
|
||
style={{
|
||
height: `${ownRatio}%`,
|
||
background: 'linear-gradient(180deg, #38bdf8 0%, #0284c7 100%)',
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="ehb-mbar-label">{d.month}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 2. 月度收支对比柱图 */}
|
||
<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">
|
||
<span className="ehb-legend-sq is-income" />
|
||
客户收入
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<span className="ehb-legend-sq is-cost" />
|
||
成本支出
|
||
</span>
|
||
<span className="ehb-chart-box-meta">
|
||
统计范围：{year === 2026 ? '2026-01-01 至 2026-08-08' : `${year}-01-01 至 ${year}-12-31`} · 单位 元
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-rev-chart">
|
||
{monthlyRevenueData.map((d) => {
|
||
const incPct = Math.min(100, Math.round((d.income / maxRevenueVal) * 100));
|
||
const costPct = Math.min(100, Math.round((d.cost / maxRevenueVal) * 100));
|
||
|
||
return (
|
||
<div key={d.m} className="ehb-rev-col-group">
|
||
<div className="ehb-rev-bars">
|
||
<div
|
||
className="ehb-rev-bar is-cost"
|
||
style={{ height: `${costPct}%` }}
|
||
onClick={() => onOpenDrill(`${year}年${d.m}成本支出`)}
|
||
title="点击钻取该月各加氢站成本支出"
|
||
>
|
||
{/* 悬浮成本支出时，显示包氢、物流、运维异动等成本结构明细 */}
|
||
<div className="ehb-rev-cost-tooltip">
|
||
<div className="ehb-rev-cost-tooltip__head">
|
||
<span>{year}年{d.m} 成本支出明细</span>
|
||
<span style={{ fontSize: 10, opacity: 0.8 }}>成本构成</span>
|
||
</div>
|
||
|
||
<div className="ehb-rev-cost-tooltip__list">
|
||
{d.costDetails.map((item) => (
|
||
<div key={item.label} className="ehb-rev-cost-tooltip__item">
|
||
<span className="ehb-rev-cost-tooltip__tag">
|
||
<span className="ehb-rev-cost-tooltip__dot" />
|
||
{item.label}
|
||
</span>
|
||
<span className="ehb-rev-cost-tooltip__val">
|
||
¥{item.amount.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="ehb-rev-cost-tooltip__foot">
|
||
<span style={{ color: '#cbd5e1' }}>成本合计</span>
|
||
<span style={{ color: '#fbbf24', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{d.cost.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
className="ehb-rev-bar is-income"
|
||
style={{ height: `${incPct}%` }}
|
||
onClick={() => onOpenDrill(`${year}年${d.m}客户收入`)}
|
||
title="点击钻取该月各加氢站客户收入"
|
||
>
|
||
{/* 悬浮客户收入时，显示按金额从高到低排列的客户明细 (TOP9 + 其他客户) */}
|
||
<div className="ehb-rev-income-tooltip">
|
||
<div className="ehb-rev-income-tooltip__head">
|
||
<span>{year}年{d.m} 客户加氢收入明细</span>
|
||
<span style={{ fontSize: 10, opacity: 0.8 }}>金额高→低</span>
|
||
</div>
|
||
|
||
<div className="ehb-rev-income-tooltip__list">
|
||
{d.top9.map((item, idx) => (
|
||
<div key={item.name} className="ehb-rev-income-tooltip__item">
|
||
<span className="ehb-rev-income-tooltip__cust-name" title={item.name}>
|
||
{idx + 1}. {item.name}
|
||
</span>
|
||
<span className="ehb-rev-income-tooltip__cust-val">
|
||
¥{item.amount.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
))}
|
||
|
||
{d.restCount > 0 && (
|
||
<div className="ehb-rev-income-tooltip__item">
|
||
<span className="ehb-rev-income-tooltip__cust-name is-other">
|
||
10. 其他客户 ({d.restCount}家)
|
||
</span>
|
||
<span className="ehb-rev-income-tooltip__cust-val">
|
||
¥{d.restAmount.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="ehb-rev-income-tooltip__foot">
|
||
<span style={{ color: '#cbd5e1' }}>收入合计</span>
|
||
<span style={{ color: '#34d399', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{d.income.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-rev-label">{d.m}</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 3 & 4. 下方并排：Top5 站加氢量 + 各区域加氢占比 */}
|
||
<div className="ehb-two-charts-row">
|
||
{/* Top5 站 */}
|
||
<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">
|
||
<span className="ehb-legend-sq" style={{ background: '#0284c7' }} />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-chart-legend-tag">
|
||
<span className="ehb-legend-sq" style={{ background: '#f59e0b' }} />
|
||
外部客户
|
||
</span>
|
||
<span className="ehb-chart-box-meta">
|
||
统计范围：{year === 2026 ? '2026-01-01 至 2026-08-08' : `${year}-01-01 至 ${year}-12-31`} · 单位 Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-top-stations-list">
|
||
{topStations.map((st) => {
|
||
const ownRatio = Math.round((st.ownKg / st.val) * 100);
|
||
const extRatio = 100 - ownRatio;
|
||
|
||
return (
|
||
<div
|
||
key={st.rank}
|
||
className="ehb-top-station-item"
|
||
onClick={() => onOpenDrill(`加氢站客户量：${st.name}`)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="点击钻取该加氢站内部/外部客户加氢总量"
|
||
>
|
||
<span className={`ehb-top-rank ${st.rank > 2 ? 'is-sub' : ''}`}>{st.rank}</span>
|
||
<span className="ehb-top-station-name" title={st.name}>
|
||
{st.name}
|
||
</span>
|
||
<div className="ehb-top-bar-bg">
|
||
{/* 精细高保真 Hover 悬浮弹出卡片 */}
|
||
<div className="ehb-top-bar-tooltip">
|
||
<div className="ehb-top-bar-tooltip__head">{st.name}</div>
|
||
<div className="ehb-top-bar-tooltip__row">
|
||
<span className="ehb-top-bar-tooltip__left">
|
||
<span className="ehb-top-bar-tooltip__dot is-own" />
|
||
内部客户
|
||
</span>
|
||
<span className="ehb-top-bar-tooltip__val">
|
||
{st.ownKg.toLocaleString('zh-CN')} Kg <span style={{ fontSize: 10, opacity: 0.7, fontWeight: 400 }}>({ownRatio}%)</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-top-bar-tooltip__row">
|
||
<span className="ehb-top-bar-tooltip__left">
|
||
<span className="ehb-top-bar-tooltip__dot is-ext" />
|
||
外部客户
|
||
</span>
|
||
<span className="ehb-top-bar-tooltip__val">
|
||
{st.extKg.toLocaleString('zh-CN')} Kg <span style={{ fontSize: 10, opacity: 0.7, fontWeight: 400 }}>({extRatio}%)</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-top-bar-tooltip__foot">
|
||
<span>加氢总量</span>
|
||
<span style={{ color: '#38bdf8', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{st.val.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-top-bar-fill" style={{ width: `${st.pct}%` }}>
|
||
<div className="ehb-top-bar-seg is-own" style={{ width: `${ownRatio}%` }} />
|
||
<div className="ehb-top-bar-seg is-ext" style={{ width: `${extRatio}%` }} />
|
||
</div>
|
||
</div>
|
||
<span className="ehb-top-station-val">{st.val.toLocaleString('zh-CN')}</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</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 ${regionGranularity === 'province' ? 'is-active' : ''}`}
|
||
onClick={() => setRegionGranularity('province')}
|
||
>
|
||
按省
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-mini-tab ${regionGranularity === 'city' ? 'is-active' : ''}`}
|
||
onClick={() => setRegionGranularity('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" />
|
||
{activeRegions.map((reg) => (
|
||
<circle
|
||
key={reg.label}
|
||
cx="50"
|
||
cy="50"
|
||
r="38"
|
||
fill="none"
|
||
stroke={reg.color}
|
||
strokeWidth="16"
|
||
strokeDasharray={reg.dashArray}
|
||
strokeDashoffset={reg.dashOffset}
|
||
style={{ transition: 'all 0.3s ease', cursor: 'pointer' }}
|
||
onClick={() =>
|
||
onOpenDrill(
|
||
`区域${regionGranularity === 'city' ? '市' : '省'}：${reg.label}`,
|
||
)
|
||
}
|
||
>
|
||
<title>{`点击钻取${reg.label}各加氢站加氢总量与占比`}</title>
|
||
</circle>
|
||
))}
|
||
</svg>
|
||
<div className="ehb-donut-center-text">
|
||
<div className="title">年合计</div>
|
||
<div className="val">697.17T</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-region-legend-grid">
|
||
{activeRegions.map((reg) => (
|
||
<div
|
||
key={reg.label}
|
||
className="ehb-region-legend-item"
|
||
onClick={() =>
|
||
onOpenDrill(`区域${regionGranularity === 'city' ? '市' : '省'}：${reg.label}`)
|
||
}
|
||
style={{ cursor: 'pointer' }}
|
||
title={`点击钻取${reg.label}各加氢站加氢总量与占比`}
|
||
>
|
||
<div className="ehb-region-legend-left">
|
||
<span className="ehb-region-dot" style={{ background: reg.color }} />
|
||
<span>{reg.label}</span>
|
||
</div>
|
||
<span className="ehb-region-legend-val">{reg.pct}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 5. 趋势图下方：加氢站加氢汇总表 (支持区域按省筛选切换) */}
|
||
<div 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">
|
||
{availableProvinces.map((prov) => (
|
||
<button
|
||
key={prov}
|
||
type="button"
|
||
className={`ehb-mini-tab ${selectedProvince === prov ? 'is-active' : ''}`}
|
||
onClick={() => setSelectedProvince(prov)}
|
||
>
|
||
{prov === 'all' ? '全国' : prov}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="ehb-sum-table-card__meta">
|
||
统计范围：{year === 2026 ? '2026-01-01 至 2026-08-08' : `${year}-01-01 至 ${year}-12-31`} · {stationCountDisplay}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-sum-table-wrap">
|
||
<table className="ehb-sum-table">
|
||
<thead>
|
||
<tr>
|
||
<th className="col-idx">#</th>
|
||
<th style={{ textAlign: 'left' }}>加氢站（点击钻取）</th>
|
||
<th style={{ textAlign: 'left' }}>所属省份</th>
|
||
<th style={{ textAlign: 'right' }}>加氢量</th>
|
||
<th style={{ textAlign: 'right' }}>占比</th>
|
||
<th style={{ textAlign: 'right' }}>氢费收入</th>
|
||
<th style={{ textAlign: 'right' }}>收入占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredStationList.map((st, idx) => (
|
||
<tr
|
||
key={st.name}
|
||
onClick={() => onOpenStationBill(st.name, st.province)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="点击钻取：加氢量 / 占比 / 氢费收入 / 收入占比"
|
||
>
|
||
<td className="col-idx">{idx + 1}</td>
|
||
<td style={{ fontWeight: 600, color: '#0284c7' }}>
|
||
{st.name} <span style={{ fontSize: 11, fontWeight: 400, opacity: 0.8 }}>钻取 ›</span>
|
||
</td>
|
||
<td>
|
||
<span style={{ fontSize: 11, color: '#0284c7', background: '#eff6ff', padding: '1px 6px', borderRadius: 4, fontWeight: 500 }}>
|
||
{st.province}
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }} className="col-bold-kg">
|
||
{st.kgT} <span style={{ fontSize: 11, fontWeight: 400, color: '#64748b' }}>T</span>
|
||
</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<div className="ehb-mini-bar-track">
|
||
<div
|
||
className="ehb-mini-bar-fill is-blue"
|
||
style={{ width: `${Math.min(100, st.kgPct * 2.5)}%` }}
|
||
/>
|
||
</div>
|
||
<span className="ehb-ratio-text">{st.kgPct.toFixed(1)}%</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }} className="col-green-fee">
|
||
¥{st.incomeWan} <span style={{ fontSize: 11, fontWeight: 400 }}>万元</span>
|
||
</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<div className="ehb-mini-bar-track">
|
||
<div
|
||
className="ehb-mini-bar-fill is-green"
|
||
style={{ width: `${Math.min(100, st.incomePct * 5)}%` }}
|
||
/>
|
||
</div>
|
||
<span className="ehb-ratio-text">{st.incomePct.toFixed(1)}%</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 6. 趋势图下方：客户账单汇总表 (Top 30) */}
|
||
<div className="ehb-sum-table-card">
|
||
<div className="ehb-sum-table-card__head">
|
||
<div className="ehb-sum-table-card__title">
|
||
客户账单汇总
|
||
<span className="ehb-title-sub ehb-hide-h5">
|
||
（已收 / 未收：等待客户能源账户和对账单打通后获取）
|
||
</span>
|
||
<span className="ehb-title-sub ehb-show-h5">
|
||
（已收未收打通中）
|
||
</span>
|
||
</div>
|
||
<div className="ehb-sum-table-card__meta">
|
||
统计范围：{year === 2026 ? '2026-01-01 至 2026-08-08' : `${year}-01-01 至 ${year}-12-31`} · Top 30
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-sum-table-wrap">
|
||
<table className="ehb-sum-table">
|
||
<thead>
|
||
<tr>
|
||
<th className="col-idx">#</th>
|
||
<th style={{ textAlign: 'left' }}>客户（点击钻取）</th>
|
||
<th style={{ textAlign: 'center' }}>承担方</th>
|
||
<th style={{ textAlign: 'right' }}>加氢量</th>
|
||
<th style={{ textAlign: 'right' }}>成本支出</th>
|
||
<th style={{ textAlign: 'right' }}>应收</th>
|
||
<th style={{ textAlign: 'right' }} title="等待客户能源账户和对账单打通后，取客户能源账户和对账单即可">已收</th>
|
||
<th style={{ textAlign: 'right' }} title="等待客户能源账户和对账单打通后，取客户能源账户和对账单即可">未收</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{MOCK_CUSTOMER_SUMMARY_LIST.map((cust) => (
|
||
<tr
|
||
key={cust.rank}
|
||
onClick={() => onOpenCustomerBill(cust.name)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="点击钻取：承担方 / 加氢量 / 成本支出 / 应收 / 已收 / 未收"
|
||
>
|
||
<td className="col-idx">{cust.rank}</td>
|
||
<td style={{ fontWeight: 600, color: '#0284c7' }}>
|
||
{cust.name} <span style={{ fontSize: 11, fontWeight: 400, opacity: 0.8 }}>钻取 ›</span>
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span
|
||
className={`ehb-bearer-tag ${cust.bearer === 'cust' ? 'is-cust' : 'is-lingniu'}`}
|
||
>
|
||
{cust.bearer === 'cust' ? '客户' : '羚牛'}
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }} className="col-bold-kg">
|
||
{cust.kgT} <span style={{ fontSize: 11, fontWeight: 400, color: '#64748b' }}>T</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }} className="col-orange-cost">
|
||
¥{cust.costWan} <span style={{ fontSize: 11, fontWeight: 400 }}>万元</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }} className="col-green-fee">
|
||
{cust.receivable}
|
||
</td>
|
||
<td style={{ textAlign: 'right' }}>
|
||
<span
|
||
className="ehb-stay-tuned-tag"
|
||
title="等待客户能源账户和对账单打通后，取客户能源账户和对账单即可"
|
||
>
|
||
敬请期待
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right' }}>
|
||
<span
|
||
className="ehb-stay-tuned-tag"
|
||
title="等待客户能源账户和对账单打通后，取客户能源账户和对账单即可"
|
||
>
|
||
敬请期待
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 嵌入 bi-next `#hydrogen/overview`：
|
||
* - 壳 / KPI / 洞察对齐宿主 zip 视觉
|
||
* - 独立功能块：三维度 + 站月/客户汇总 + 订单明细 · 禁用 OneOS V2
|
||
*/
|
||
export const EnergyBiBoardApp: React.FC = () => {
|
||
const [boardScope, setBoardScope] = useState<BoardScope>('global');
|
||
const [hostView, setHostView] = useState<HostView>('overview');
|
||
const [year, setYear] = useState(DEFAULT_YEAR);
|
||
const [fleetScope, setFleetScope] = useState<FleetScope>('all');
|
||
const [verifyScope, setVerifyScope] = useState<'all' | 'verified'>('all');
|
||
const [dimFilter, setDimFilter] = useState<DimFilter>(null);
|
||
const [statsTab, setStatsTab] = useState<StatsTab>('siteMonth');
|
||
const [stationId, setStationId] = useState<string | null>(null);
|
||
const [stationLabel, setStationLabel] = useState<string | null>(null);
|
||
const [customerId, setCustomerId] = useState<string | null>(null);
|
||
const [customerLabel, setCustomerLabel] = useState<string | null>(null);
|
||
|
||
// KPI 点击下钻 Modal 状态
|
||
const [kpiDrillType, setKpiDrillType] = useState<string | null>(null);
|
||
// 头部加氢站占比 → 加氢量排名下拉
|
||
const [stationRankOpen, setStationRankOpen] = useState(false);
|
||
const stationRankRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 客户账单专属下钻 Modal 状态 (客户 → 日期 → 车牌加氢记录)
|
||
const [selectedBillCustomer, setSelectedBillCustomer] = useState<string | null>(null);
|
||
|
||
// 加氢站账单专属下钻 Modal 状态 (加氢站 → 所有日期的加氢量、占比、氢费收入、收入占比)
|
||
const [selectedStationForDrill, setSelectedStationForDrill] = useState<{ name: string; province: string } | null>(null);
|
||
|
||
// 按日视角日期区间状态 (提升至顶层供标题旁时间范围联动)
|
||
const [dailyStartDate, setDailyStartDate] = useState('2026-07-25');
|
||
const [dailyEndDate, setDailyEndDate] = useState('2026-08-08');
|
||
|
||
// 全局看板时间范围（单站模式不展示：维度不同，由站内查询日期自管）
|
||
const timeRangeLabel = '统计时间范围';
|
||
const timeRangeText = useMemo(() => {
|
||
if (hostView === 'daily') {
|
||
return `${dailyStartDate} 至 ${dailyEndDate}`;
|
||
}
|
||
return year === 2026 ? '2026-01-01 至 2026-08-08 11:25' : `${year}-01-01 至 ${year}-12-31 23:59`;
|
||
}, [hostView, dailyStartDate, dailyEndDate, year]);
|
||
|
||
const clearEntity = () => {
|
||
setStationId(null);
|
||
setStationLabel(null);
|
||
setCustomerId(null);
|
||
setCustomerLabel(null);
|
||
};
|
||
|
||
const rows = useMemo(
|
||
() => filterOrders(MOCK_ORDERS, year, verifyScope, fleetScope),
|
||
[year, verifyScope, fleetScope],
|
||
);
|
||
const hostKpi = useMemo(
|
||
() => computeHostKpi(rows, year, MOCK_ORDERS, HOST_KPI),
|
||
[rows, year],
|
||
);
|
||
|
||
// 加氢站加氢量排名（高→低），跟随年份/车辆/核对筛选
|
||
const stationRankList = useMemo(() => {
|
||
const yearFactor = year === 2026 ? 1 : year === 2025 ? 0.85 : 0.7;
|
||
const fleetFactor = fleetScope === 'all' ? 1 : fleetScope === 'own' ? 0.67 : 0.33;
|
||
const verifyFactor = verifyScope === 'verified' ? (fleetScope === 'external' ? 0 : 0.75) : 1;
|
||
const scale = yearFactor * fleetFactor * verifyFactor;
|
||
const list = MOCK_STATION_SUMMARY_LIST.map((st) => ({
|
||
name: st.name,
|
||
province: st.province,
|
||
kg: Math.round(parseFloat(st.kgT) * 1000 * scale),
|
||
}))
|
||
.filter((st) => st.kg > 0)
|
||
.sort((a, b) => b.kg - a.kg);
|
||
const maxKg = list[0]?.kg || 1;
|
||
const totalKg = list.reduce((s, x) => s + x.kg, 0) || 1;
|
||
return list.map((st, i) => ({
|
||
...st,
|
||
rank: i + 1,
|
||
barPct: Math.round((st.kg / maxKg) * 100),
|
||
sharePct: Math.round((st.kg / totalKg) * 1000) / 10,
|
||
}));
|
||
}, [year, fleetScope, verifyScope]);
|
||
|
||
const top5SharePct = useMemo(() => {
|
||
const top5 = stationRankList.slice(0, 5).reduce((s, x) => s + x.kg, 0);
|
||
const total = stationRankList.reduce((s, x) => s + x.kg, 0) || 1;
|
||
return Math.round((top5 / total) * 1000) / 10;
|
||
}, [stationRankList]);
|
||
|
||
// 月度波动洞察副文案：当月 / 峰值月 / 月均（与图表月度口径一致，跟随筛选）
|
||
const monthFluctuationDesc = useMemo(() => {
|
||
const yearFactor = year === 2026 ? 1 : year === 2025 ? 0.85 : 0.7;
|
||
const ownVerifyFactor = verifyScope === 'verified' ? 0.75 : 1;
|
||
const extVerifyFactor = verifyScope === 'verified' ? 0 : 1;
|
||
const baseMonths = [
|
||
{ m: '1月', own: 56800, ext: 28400 },
|
||
{ m: '2月', own: 34600, ext: 17400 },
|
||
{ m: '3月', own: 75200, ext: 37600 },
|
||
{ m: '4月', own: 90000, ext: 45000 },
|
||
{ m: '5月', own: 85300, ext: 42700 },
|
||
{ m: '6月', own: 78600, ext: 39400 },
|
||
{ m: '7月', own: 81300, ext: 40700 },
|
||
{ m: '8月', own: 18600, ext: 9400 },
|
||
];
|
||
const months = baseMonths.map((item) => {
|
||
let ownKg = Math.round(item.own * yearFactor * ownVerifyFactor);
|
||
let extKg = Math.round(item.ext * yearFactor * extVerifyFactor);
|
||
if (fleetScope === 'own') extKg = 0;
|
||
if (fleetScope === 'external') ownKg = 0;
|
||
return { month: item.m, totalKg: ownKg + extKg };
|
||
});
|
||
const toT = (kg: number) => Math.round((kg / 1000) * 100) / 100;
|
||
const current = months[months.length - 1];
|
||
const peak = months.reduce((best, cur) => (cur.totalKg > best.totalKg ? cur : best), months[0]);
|
||
const avgKg = months.reduce((s, m) => s + m.totalKg, 0) / (months.length || 1);
|
||
return `当月 ${toT(current.totalKg)} T · 峰值${peak.month} ${toT(peak.totalKg)} T · 月均 ${toT(avgKg)} T`;
|
||
}, [year, fleetScope, verifyScope]);
|
||
|
||
useEffect(() => {
|
||
if (!stationRankOpen) return;
|
||
function onDoc(e: MouseEvent) {
|
||
if (stationRankRef.current && !stationRankRef.current.contains(e.target as Node)) {
|
||
setStationRankOpen(false);
|
||
}
|
||
}
|
||
document.addEventListener('mousedown', onDoc);
|
||
return () => document.removeEventListener('mousedown', onDoc);
|
||
}, [stationRankOpen]);
|
||
|
||
const dims = useMemo(() => costDimCards(rows), [rows]);
|
||
const pending = pendingAmount(rows);
|
||
const risk = unverified(rows);
|
||
|
||
const companyScoped = useMemo(
|
||
() => companyRowsForStats(rows, dimFilter),
|
||
[rows, dimFilter],
|
||
);
|
||
|
||
/** 客户归属表：无维度筛时看全量归属；有维度筛时只看对应我司成本行 */
|
||
const customerSource = useMemo(() => {
|
||
if (!dimFilter) return rows;
|
||
return companyScoped;
|
||
}, [rows, dimFilter, companyScoped]);
|
||
|
||
const siteMonthRows = useMemo(() => stationMonthAgg(companyScoped), [companyScoped]);
|
||
const customerRows = useMemo(() => customerAttrAgg(customerSource), [customerSource]);
|
||
|
||
const detailRows = useMemo(() => {
|
||
let list = companyScoped;
|
||
if (stationId) list = list.filter((r) => r.stationId === stationId);
|
||
if (customerId) list = list.filter((r) => r.customerId === customerId);
|
||
return list;
|
||
}, [companyScoped, stationId, customerId]);
|
||
|
||
const externalEmpty = fleetScope === 'external' && rows.length === 0;
|
||
const [updatedAt, setUpdatedAt] = useState('2026-08-08 10:12');
|
||
|
||
const handleRefreshData = () => {
|
||
const now = new Date();
|
||
const timeStr = now.toTimeString().split(' ')[0].slice(0, 5);
|
||
setUpdatedAt(`2026-08-08 ${timeStr}`);
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-shell" data-annotation-id="energy-h2-bi-board">
|
||
<aside className="ehb-rail" aria-label="能源BI模块">
|
||
<button type="button" className="ehb-rail__item is-active" title="氢能">
|
||
<Fuel size={20} aria-hidden />
|
||
氢能
|
||
</button>
|
||
<button type="button" className="ehb-rail__item" disabled title="电能（宿主）">
|
||
<Zap size={20} aria-hidden />
|
||
电能
|
||
</button>
|
||
<button type="button" className="ehb-rail__item" disabled title="ETC（宿主）">
|
||
<Wallet size={20} aria-hidden />
|
||
ETC
|
||
</button>
|
||
</aside>
|
||
|
||
<div className="ehb-body">
|
||
<header className="ehb-chrome">
|
||
<div
|
||
className="ehb-opening-watermark"
|
||
role="status"
|
||
data-annotation-id="ehb-opening-calib-banner"
|
||
style={{
|
||
width: '100%',
|
||
marginBottom: 10,
|
||
padding: '8px 12px',
|
||
borderRadius: 10,
|
||
border: '1px solid #f59e0b',
|
||
background: 'linear-gradient(90deg, #fffbeb, #fef3c7)',
|
||
color: '#92400e',
|
||
fontSize: 13,
|
||
fontWeight: 600,
|
||
lineHeight: 1.4,
|
||
}}
|
||
>
|
||
期初校准中：期初余额与成本单价未锁定前，本看板仅供内部核对，不作对外真源。
|
||
</div>
|
||
<div className="ehb-chrome__lead" style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
|
||
{boardScope === 'global' ? (
|
||
<span
|
||
className="ehb-time-range-pill"
|
||
style={{
|
||
fontSize: 12,
|
||
color: '#0284c7',
|
||
background: '#eff6ff',
|
||
border: '1px solid #bae6fd',
|
||
padding: '3px 10px',
|
||
borderRadius: 16,
|
||
fontWeight: 500,
|
||
display: 'inline-flex',
|
||
alignItems: 'center',
|
||
gap: 4,
|
||
boxShadow: '0 1px 2px rgba(2, 132, 199, 0.06)',
|
||
}}
|
||
>
|
||
📅 {timeRangeLabel}：{timeRangeText}
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
<div className="ehb-chrome__tools">
|
||
<div className="ehb-seg ehb-seg--wrap" role="tablist" aria-label="范围">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={boardScope === 'global' ? 'is-active' : ''}
|
||
aria-selected={boardScope === 'global'}
|
||
onClick={() => setBoardScope('global')}
|
||
>
|
||
全局
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={boardScope === 'station' ? 'is-active' : ''}
|
||
aria-selected={boardScope === 'station'}
|
||
onClick={() => setBoardScope('station')}
|
||
>
|
||
单站
|
||
</button>
|
||
</div>
|
||
{boardScope === 'global' ? (
|
||
<div className="ehb-seg ehb-seg--wrap" role="tablist" aria-label="视图">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={hostView === 'daily' ? 'is-active' : ''}
|
||
aria-selected={hostView === 'daily'}
|
||
onClick={() => setHostView('daily')}
|
||
>
|
||
按日
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
className={hostView === 'overview' ? 'is-active' : ''}
|
||
aria-selected={hostView === 'overview'}
|
||
onClick={() => setHostView('overview')}
|
||
>
|
||
总览
|
||
</button>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
</header>
|
||
|
||
{boardScope === 'station' ? (
|
||
<StationDailyApp embedded />
|
||
) : (
|
||
<>
|
||
{hostView === 'daily' ? (
|
||
<HostDailyView
|
||
updatedAt={updatedAt}
|
||
onRefresh={handleRefreshData}
|
||
startDate={dailyStartDate}
|
||
endDate={dailyEndDate}
|
||
onStartDateChange={setDailyStartDate}
|
||
onEndDateChange={setDailyEndDate}
|
||
/>
|
||
) : (
|
||
<>
|
||
{/* 总览视角筛选条 (包含年份选择、核对筛选、车辆归属及刷新，样式与按日视角全面对齐) */}
|
||
<section className="ehb-daily-filter-card" style={{ marginBottom: 12 }}>
|
||
<div className="ehb-daily-filter-row">
|
||
<div className="ehb-daily-filter-group">
|
||
<BiYearSelect
|
||
value={year}
|
||
onChange={(y) => {
|
||
setYear(y);
|
||
clearEntity();
|
||
}}
|
||
/>
|
||
<div className="ehb-pill-tabs">
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${verifyScope === 'all' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setVerifyScope('all');
|
||
clearEntity();
|
||
}}
|
||
>
|
||
全量订单
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${verifyScope === 'verified' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setVerifyScope('verified');
|
||
clearEntity();
|
||
}}
|
||
>
|
||
仅已核对
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-daily-filter-group">
|
||
<div className="ehb-fleet-segmented">
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetScope === 'all' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetScope('all');
|
||
clearEntity();
|
||
}}
|
||
>
|
||
全部车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetScope === 'own' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetScope('own');
|
||
clearEntity();
|
||
}}
|
||
>
|
||
<Truck size={14} />
|
||
仅羚牛车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetScope === 'external' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetScope('external');
|
||
clearEntity();
|
||
}}
|
||
>
|
||
<Truck size={14} />
|
||
仅外部车辆
|
||
</button>
|
||
</div>
|
||
|
||
<span className="ehb-chrome__clock" style={{ fontSize: 12, color: '#64748b' }}>
|
||
{updatedAt}
|
||
</span>
|
||
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--ghost"
|
||
onClick={handleRefreshData}
|
||
title="数据刷新"
|
||
>
|
||
<RefreshCw size={14} aria-hidden />
|
||
刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="ehb-host" aria-label="经营总览">
|
||
<div className="ehb-host-kpi">
|
||
<HostKpi
|
||
icon={<Fuel size={14} />}
|
||
tone="blue"
|
||
label="累计加氢量"
|
||
value={hostKpi.totalKgT}
|
||
unit="T"
|
||
left={`我司 ${hostKpi.companyKgT} T`}
|
||
right={`客户 ${hostKpi.customerKgT} T`}
|
||
onClick={() => setKpiDrillType('累计加氢量')}
|
||
/>
|
||
<HostKpi
|
||
icon={<Wallet size={14} />}
|
||
tone="blue"
|
||
label="累计加氢费"
|
||
prefix="¥"
|
||
value={hostKpi.totalFeeWan}
|
||
unit="万"
|
||
left={`我司 ¥${hostKpi.companyFeeWan} 万`}
|
||
right={`客户 ¥${hostKpi.customerFeeWan} 万`}
|
||
onClick={() => setKpiDrillType('累计加氢费')}
|
||
/>
|
||
<HostKpi
|
||
icon={<Activity size={14} />}
|
||
tone="green"
|
||
label="加氢利润"
|
||
prefix="¥"
|
||
value={hostKpi.profitWan}
|
||
unit="万"
|
||
left={`收入 ¥${hostKpi.incomeWan} 万`}
|
||
right={`成本 ¥${hostKpi.costWan} 万`}
|
||
onClick={() => setKpiDrillType('加氢利润')}
|
||
/>
|
||
<HostKpi
|
||
icon={<Truck size={14} />}
|
||
tone="amber"
|
||
label="本月加氢"
|
||
value={hostKpi.monthKgT}
|
||
unit="T"
|
||
left={`加氢费 ¥${hostKpi.monthFeeWan} 万`}
|
||
right={`占年比 ${hostKpi.monthYearPct}%`}
|
||
onClick={() => setKpiDrillType('本月加氢')}
|
||
/>
|
||
<HostKpi
|
||
icon={<Zap size={14} />}
|
||
tone="purple"
|
||
label="本日加氢"
|
||
value={hostKpi.dayKg}
|
||
unit="Kg"
|
||
left={`加氢费 ¥${hostKpi.dayFee.toLocaleString('zh-CN')}`}
|
||
right={`占月比 ${hostKpi.dayMonthPct}%`}
|
||
onClick={() => setKpiDrillType('本日加氢')}
|
||
/>
|
||
</div>
|
||
|
||
<div className="ehb-insight" aria-label="经营洞察">
|
||
<div className="ehb-insight__card">
|
||
<div className="ehb-insight__icon is-down">
|
||
<TrendingDown size={18} aria-hidden />
|
||
</div>
|
||
<div>
|
||
<div className="ehb-insight__title">月度加氢异常波动</div>
|
||
<div className="ehb-insight__value is-neg">
|
||
{hostKpi.monthYearPct > 0 ? `占年 ${hostKpi.monthYearPct}%` : '—'}
|
||
</div>
|
||
<div className="ehb-insight__desc">
|
||
{monthFluctuationDesc}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`ehb-insight__card ehb-insight__card--rank ${stationRankOpen ? 'is-open' : ''}`}
|
||
ref={stationRankRef}
|
||
onClick={() => setStationRankOpen((v) => !v)}
|
||
style={{ cursor: 'pointer' }}
|
||
title="点击查看加氢站加氢量排名"
|
||
>
|
||
<div className="ehb-insight__icon">
|
||
<Shield size={18} aria-hidden />
|
||
</div>
|
||
<div className="ehb-insight__rank-body">
|
||
<div className="ehb-insight__title">头部加氢站占比</div>
|
||
<div className="ehb-insight__value">Top5 {top5SharePct}%</div>
|
||
<div className="ehb-insight__desc">
|
||
累计 {hostKpi.totalKgT} T · 点击展开加氢量排名
|
||
</div>
|
||
</div>
|
||
<ChevronDown
|
||
size={14}
|
||
className={`ehb-insight__rank-chevron ${stationRankOpen ? 'is-open' : ''}`}
|
||
aria-hidden
|
||
/>
|
||
{stationRankOpen && (
|
||
<div
|
||
className="ehb-station-rank-dropdown"
|
||
onClick={(e) => e.stopPropagation()}
|
||
role="listbox"
|
||
aria-label="加氢站加氢量排名"
|
||
>
|
||
<div className="ehb-station-rank-dropdown__head">
|
||
<span>加氢站加氢量排名</span>
|
||
<span className="ehb-station-rank-dropdown__meta">
|
||
高 → 低 · 共 {stationRankList.length} 站
|
||
</span>
|
||
</div>
|
||
<div className="ehb-station-rank-dropdown__list">
|
||
{stationRankList.map((st) => (
|
||
<button
|
||
key={st.name}
|
||
type="button"
|
||
className="ehb-station-rank-item"
|
||
onClick={() => {
|
||
setStationRankOpen(false);
|
||
setKpiDrillType(`加氢站客户量：${st.name}`);
|
||
}}
|
||
title="点击钻取该站明细"
|
||
>
|
||
<span className={`ehb-station-rank-item__rank ${st.rank <= 3 ? 'is-top' : ''}`}>
|
||
{st.rank}
|
||
</span>
|
||
<span className="ehb-station-rank-item__main">
|
||
<span className="ehb-station-rank-item__name">{st.name}</span>
|
||
<span className="ehb-station-rank-item__bar">
|
||
<span style={{ width: `${st.barPct}%` }} />
|
||
</span>
|
||
</span>
|
||
<span className="ehb-station-rank-item__val">
|
||
{(st.kg / 1000).toLocaleString('zh-CN', { maximumFractionDigits: 2 })} T
|
||
</span>
|
||
<span className="ehb-station-rank-item__share">{st.sharePct}%</span>
|
||
</button>
|
||
))}
|
||
{stationRankList.length === 0 && (
|
||
<div className="ehb-station-rank-empty">当前筛选下暂无站点数据</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="ehb-insight__card">
|
||
<div className="ehb-insight__icon is-ok">
|
||
<Activity size={18} aria-hidden />
|
||
</div>
|
||
<div>
|
||
<div className="ehb-insight__title">加氢利润率</div>
|
||
<div className={`ehb-insight__value ${hostKpi.profitRatePct >= 0 ? 'is-pos' : 'is-neg'}`}>
|
||
{hostKpi.profitRatePct}%
|
||
</div>
|
||
<div className="ehb-insight__desc">
|
||
加氢利润 {hostKpi.profitWan} 万 · 收入 {hostKpi.incomeWan} 万
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 经营趋势图表大盘：月度加氢量、月度收支对比、Top5站加氢量、各区域加氢占比 */}
|
||
<OverviewTrendsDashboard
|
||
year={year}
|
||
fleetScope={fleetScope}
|
||
verifyScope={verifyScope}
|
||
onOpenDrill={(lbl) => setKpiDrillType(lbl)}
|
||
onOpenCustomerBill={(custName) => setSelectedBillCustomer(custName)}
|
||
onOpenStationBill={(stName, prov) => setSelectedStationForDrill({ name: stName, province: prov })}
|
||
/>
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* KPI 点击下钻数据来源穿透 Modal */}
|
||
{boardScope === 'global' && kpiDrillType && (
|
||
<KpiDrillModal
|
||
label={kpiDrillType}
|
||
year={year}
|
||
fleetScope={fleetScope}
|
||
verifyScope={verifyScope}
|
||
onClose={() => setKpiDrillType(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* 客户账单专属下钻 Modal (客户 → 日期 → 车牌加氢记录) */}
|
||
{boardScope === 'global' && selectedBillCustomer && (
|
||
<CustomerBillDrillModal
|
||
customerName={selectedBillCustomer}
|
||
year={year}
|
||
onClose={() => setSelectedBillCustomer(null)}
|
||
/>
|
||
)}
|
||
|
||
{/* 加氢站账单专属下钻 Modal (加氢站 → 所有日期的加氢量、占比、氢费收入、收入占比) */}
|
||
{boardScope === 'global' && selectedStationForDrill && (
|
||
<StationBillDrillModal
|
||
stationName={selectedStationForDrill.name}
|
||
province={selectedStationForDrill.province}
|
||
year={year}
|
||
onClose={() => setSelectedStationForDrill(null)}
|
||
/>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
function PlugZapHint() {
|
||
return <Zap size={36} className="ehb-empty__icon" aria-hidden />;
|
||
}
|
||
|
||
function HostKpi({
|
||
icon,
|
||
tone,
|
||
label,
|
||
value,
|
||
prefix,
|
||
unit,
|
||
left,
|
||
right,
|
||
onClick,
|
||
}: {
|
||
icon: React.ReactNode;
|
||
tone: 'blue' | 'green' | 'amber' | 'purple' | 'cyan';
|
||
label: string;
|
||
value: React.ReactNode;
|
||
prefix?: string;
|
||
unit?: string;
|
||
left: string;
|
||
right: string;
|
||
onClick?: () => void;
|
||
}) {
|
||
return (
|
||
<div className={`ehb-kpi-dual is-${tone}`} onClick={onClick} title="点击展开站 → 客户 → 车牌数据来源穿透明细">
|
||
<div className="ehb-kpi-dual__head">
|
||
<span className="ehb-kpi-dual__label">
|
||
{label}
|
||
<span className="ehb-kpi-drill-hint">
|
||
<Search size={10} /> 钻取
|
||
</span>
|
||
</span>
|
||
<span className={`ehb-kpi-dual__badge is-${tone}`}>{icon}</span>
|
||
</div>
|
||
<div className="ehb-kpi-dual__val">
|
||
{prefix && <span className="ehb-kpi-dual__symbol">{prefix}</span>}
|
||
<span className="ehb-kpi-dual__num">{value}</span>
|
||
{unit && <span className="ehb-kpi-dual__unit">{unit}</span>}
|
||
</div>
|
||
<div className="ehb-kpi-dual__deck">
|
||
<span>{left}</span>
|
||
<span>{right}</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/** KPI 数据来源穿透 & 站 -> 客户 -> 车牌三级下钻 Modal 弹窗 */
|
||
interface KpiDrillModalProps {
|
||
label: string;
|
||
year: number;
|
||
fleetScope: FleetScope;
|
||
verifyScope: 'all' | 'verified';
|
||
onClose: () => void;
|
||
}
|
||
|
||
function makeVehicleOrders(
|
||
certPrefix: string,
|
||
fleetCategory: FleetCategory,
|
||
mode: 'verified' | 'unverified' | 'partial',
|
||
totalKg: number,
|
||
) {
|
||
const isOwn = fleetCategory === 'own';
|
||
const unitPrice = 4.5;
|
||
const list = [
|
||
{ time: '2026-08-08 09:15', factor: 1.2, source: 'api' as const },
|
||
{ time: '2026-08-08 14:30', factor: 0.9, source: 'api' as const },
|
||
{ time: '2026-08-07 11:20', factor: 1.1, source: 'station_report' as const },
|
||
{ time: '2026-08-06 16:45', factor: 0.8, source: 'lingniu_report' as const },
|
||
{ time: '2026-08-05 10:10', factor: 1.05, source: 'api' as const },
|
||
{ time: '2026-08-04 15:25', factor: 0.95, source: 'station_report' as const },
|
||
{ time: '2026-08-03 08:50', factor: 1.15, source: 'api' as const },
|
||
{ time: '2026-08-02 17:05', factor: 0.85, source: 'lingniu_report' as const },
|
||
{ time: '2026-08-01 12:40', factor: 1.0, source: 'station_report' as const },
|
||
{ time: '2026-07-31 09:30', factor: 0.9, source: 'api' as const },
|
||
];
|
||
|
||
return list.map((item, idx) => {
|
||
const seq = String(idx + 1).padStart(2, '0');
|
||
const kg = Math.round(((totalKg / 100) * item.factor) * 10) / 10;
|
||
const certNo =
|
||
item.source === 'api'
|
||
? `API-20260808-${certPrefix}-${seq}`
|
||
: item.source === 'station_report'
|
||
? `ST-20260808-${certPrefix}-${seq}`
|
||
: `LN-20260808-${certPrefix}-${seq}`;
|
||
|
||
let verifyStatus: 'verified' | 'unverified' | null = null;
|
||
if (isOwn) {
|
||
if (mode === 'verified') verifyStatus = 'verified';
|
||
else if (mode === 'unverified') verifyStatus = 'unverified';
|
||
else {
|
||
verifyStatus = idx % 2 === 0 ? 'verified' : 'unverified';
|
||
}
|
||
}
|
||
|
||
return {
|
||
orderId: `ORD-20260808-${certPrefix}-${seq}`,
|
||
time: item.time,
|
||
kg,
|
||
unitPrice,
|
||
amount: Math.round(kg * unitPrice),
|
||
source: item.source,
|
||
certNo,
|
||
verifyStatus,
|
||
};
|
||
});
|
||
}
|
||
|
||
function computeVehicleVerifyStatus(
|
||
orders: { verifyStatus?: 'verified' | 'unverified' | null }[],
|
||
fleetCategory: FleetCategory,
|
||
): 'verified' | 'unverified' | 'partial' | null {
|
||
if (fleetCategory !== 'own') return null;
|
||
if (!orders || orders.length === 0) return 'unverified';
|
||
const verifiedCount = orders.filter((o) => o.verifyStatus === 'verified').length;
|
||
const unverifiedCount = orders.filter((o) => o.verifyStatus === 'unverified').length;
|
||
if (verifiedCount > 0 && unverifiedCount > 0) return 'partial';
|
||
if (verifiedCount > 0 && unverifiedCount === 0) return 'verified';
|
||
return 'unverified';
|
||
}
|
||
|
||
/** 站/客户层：按下属车辆核对态汇总。全已核→已核对；全未核→未核对；有混杂或任一带部分→部分核对。外部车不参与。 */
|
||
function aggregateVehiclesVerifyStatus(
|
||
vehicles: { orders: { verifyStatus?: 'verified' | 'unverified' | null }[]; fleetCategory: FleetCategory; plateNo?: string }[],
|
||
): 'verified' | 'unverified' | 'partial' | null {
|
||
const statuses = vehicles
|
||
.map((vh) => computeVehicleVerifyStatus(vh.orders, vh.fleetCategory))
|
||
.filter((s): s is 'verified' | 'unverified' | 'partial' => s !== null);
|
||
if (statuses.length === 0) return null;
|
||
if (statuses.every((s) => s === 'verified')) return 'verified';
|
||
if (statuses.every((s) => s === 'unverified')) return 'unverified';
|
||
return 'partial';
|
||
}
|
||
|
||
/** 穿透表标签悬浮说明 */
|
||
const FLEET_TAG_TIP = {
|
||
own: '羚牛车辆：车牌可识别，且归属羚牛自有/合作车队',
|
||
external: '外部车辆：非羚牛车队；无法识别车牌的归入「无车牌」并标外部车辆',
|
||
} as const;
|
||
|
||
const SOURCE_TAG_TIP: Record<'api' | 'station_report' | 'lingniu_report', string> = {
|
||
api: 'API接入：加氢数据由接口自动归集，可按接口流水追溯',
|
||
station_report: '站点上报：由加氢站报送的加氢数据',
|
||
lingniu_report: '羚牛上报：从 OneOS 归集的加氢记录',
|
||
};
|
||
|
||
const VERIFY_TAG_TIP = {
|
||
verified: '已核对：范围内加氢订单均已完成核对',
|
||
partial: '部分核对：范围内既有已核对，也有未核对订单',
|
||
unverified: '未核对：范围内加氢订单均尚未核对',
|
||
order_verified: '已核对：该笔加氢订单已完成核对',
|
||
order_unverified: '未核对：该笔加氢订单尚未核对',
|
||
external_skip: '外部车辆不参与核对，故无核对状态',
|
||
} as const;
|
||
|
||
function renderFleetTag(isOwnFleet: boolean) {
|
||
return (
|
||
<span
|
||
className={`ehb-tag ${isOwnFleet ? 'ehb-tag--own-fleet' : 'ehb-tag--ext-fleet'}`}
|
||
title={isOwnFleet ? FLEET_TAG_TIP.own : FLEET_TAG_TIP.external}
|
||
>
|
||
{isOwnFleet ? '羚牛车辆' : '外部车辆'}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function renderSourceTag(source: 'api' | 'station_report' | 'lingniu_report' | string) {
|
||
const key = source === 'api' || source === 'station_report' || source === 'lingniu_report' ? source : 'api';
|
||
const mod = key === 'api' ? 'api' : key === 'station_report' ? 'station' : 'lingniu';
|
||
return (
|
||
<span className={`ehb-tag ehb-tag--source-${mod}`} title={SOURCE_TAG_TIP[key]}>
|
||
{SOURCE_TYPE_LABEL[key] || source}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function renderOrderVerifyTag(
|
||
fleetCategory: FleetCategory,
|
||
verifyStatus: 'verified' | 'unverified' | null | undefined,
|
||
) {
|
||
if (fleetCategory !== 'own') {
|
||
return (
|
||
<span style={{ color: '#94a3b8' }} title={VERIFY_TAG_TIP.external_skip}>
|
||
-
|
||
</span>
|
||
);
|
||
}
|
||
if (verifyStatus === 'verified') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-ok" title={VERIFY_TAG_TIP.order_verified}>
|
||
已核对
|
||
</span>
|
||
);
|
||
}
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-warn" title={VERIFY_TAG_TIP.order_unverified}>
|
||
未核对
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function renderVehicleVerifyTag(
|
||
fleetCategory: FleetCategory,
|
||
status: 'verified' | 'unverified' | 'partial' | null,
|
||
) {
|
||
if (fleetCategory !== 'own' || status === null) {
|
||
return (
|
||
<span style={{ color: '#94a3b8' }} title={VERIFY_TAG_TIP.external_skip}>
|
||
-
|
||
</span>
|
||
);
|
||
}
|
||
if (status === 'verified') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-ok" title="该车辆下全部加氢订单均已核对">
|
||
已核对
|
||
</span>
|
||
);
|
||
}
|
||
if (status === 'partial') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-partial" title="该车辆下部分订单已核对，部分未核对">
|
||
部分核对
|
||
</span>
|
||
);
|
||
}
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-warn" title="该车辆下全部加氢订单均未核对">
|
||
未核对
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function renderAggVerifyTag(
|
||
status: 'verified' | 'unverified' | 'partial' | null,
|
||
titlePrefix = '下属车辆',
|
||
) {
|
||
if (status === 'verified') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-ok" title={`${VERIFY_TAG_TIP.verified}（${titlePrefix}）`}>
|
||
已核对
|
||
</span>
|
||
);
|
||
}
|
||
if (status === 'partial') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-partial" title={`${VERIFY_TAG_TIP.partial}（${titlePrefix}）`}>
|
||
部分核对
|
||
</span>
|
||
);
|
||
}
|
||
if (status === 'unverified') {
|
||
return (
|
||
<span className="ehb-tag ehb-tag--verify-warn" title={`${VERIFY_TAG_TIP.unverified}（${titlePrefix}）`}>
|
||
未核对
|
||
</span>
|
||
);
|
||
}
|
||
return (
|
||
<span style={{ color: '#94a3b8' }} title={VERIFY_TAG_TIP.external_skip}>
|
||
-
|
||
</span>
|
||
);
|
||
}
|
||
|
||
function KpiDrillModal({ label, year, fleetScope, verifyScope, onClose }: KpiDrillModalProps) {
|
||
const [stationFilter, setStationFilter] = useState<string>('all');
|
||
const [customerFilter, setCustomerFilter] = useState<string>('all');
|
||
const [plateFilter, setPlateFilter] = useState<string>('all');
|
||
const [fleetCategoryFilter, setFleetCategoryFilter] = useState<'all' | 'own' | 'external'>(fleetScope);
|
||
|
||
// 跟随顶栏车辆筛选：打开/切换时同步
|
||
useEffect(() => {
|
||
setFleetCategoryFilter(fleetScope);
|
||
}, [fleetScope, label]);
|
||
|
||
// 展开折叠状态
|
||
const [expandedStations, setExpandedStations] = useState<Record<string, boolean>>({
|
||
'st-jx': true, // 默认展开嘉兴站
|
||
});
|
||
const [expandedCustomers, setExpandedCustomers] = useState<Record<string, boolean>>({
|
||
'st-jx_c-zp': true, // 默认展开乍浦港口客户
|
||
});
|
||
const [expandedVehicles, setExpandedVehicles] = useState<Record<string, boolean>>({
|
||
'st-jx_c-zp_浙F88888': true, // 默认展开首辆车，展现单笔订单与部分核对明细
|
||
});
|
||
const [expandedAllVehicleOrders, setExpandedAllVehicleOrders] = useState<Record<string, boolean>>({});
|
||
|
||
const toggleStation = (stId: string) => {
|
||
setExpandedStations((prev) => ({ ...prev, [stId]: !prev[stId] }));
|
||
};
|
||
|
||
const toggleCustomer = (stId: string, custId: string) => {
|
||
const key = `${stId}_${custId}`;
|
||
setExpandedCustomers((prev) => ({ ...prev, [key]: !prev[key] }));
|
||
};
|
||
|
||
const toggleVehicle = (stId: string, custId: string, plateNo: string) => {
|
||
const key = `${stId}_${custId}_${plateNo}`;
|
||
setExpandedVehicles((prev) => ({ ...prev, [key]: !prev[key] }));
|
||
};
|
||
|
||
const toggleShowAllOrders = (vhKey: string) => {
|
||
setExpandedAllVehicleOrders((prev) => ({ ...prev, [vhKey]: !prev[vhKey] }));
|
||
};
|
||
|
||
// 站 -> 客户 -> 车牌 & 接口凭证 高保真全链路数据
|
||
const drillStations = useMemo(() => {
|
||
const is2026 = year === 2026;
|
||
const factor = is2026 ? 1 : 0.85;
|
||
|
||
return [
|
||
{
|
||
stationId: 'st-jx',
|
||
stationName: '嘉兴中石化滨海加氢站',
|
||
stationType: 'self_use' as const,
|
||
province: '浙江省',
|
||
totalKg: Math.round(243661 * factor),
|
||
totalFeeWan: (1096.47 * factor).toFixed(2),
|
||
customers: [
|
||
{
|
||
customerId: 'c-zp',
|
||
customerName: '嘉兴市乍浦港口经营有限公司',
|
||
category: 'internal' as const,
|
||
totalKg: Math.round(163250 * factor),
|
||
totalFeeWan: (734.63 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '浙F88888', fleetCategory: 'own' as const, source: 'api' as const, certNo: 'API-20260808-9821', count: 142, kg: 42600, amount: 191700, orders: makeVehicleOrders('9821', 'own', 'partial', 42600) },
|
||
{ plateNo: '浙F66666', fleetCategory: 'own' as const, source: 'api' as const, certNo: 'API-20260808-9822', count: 128, kg: 38400, amount: 172800, orders: makeVehicleOrders('9822', 'own', 'verified', 38400) },
|
||
{ plateNo: '浙F77777', fleetCategory: 'own' as const, source: 'lingniu_report' as const, certNo: 'LN-REP-202608-012', count: 110, kg: 33000, amount: 148500, orders: makeVehicleOrders('012', 'own', 'verified', 33000) },
|
||
{ plateNo: '浙F55555', fleetCategory: 'own' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-045', count: 98, kg: 29400, amount: 132300, orders: makeVehicleOrders('045', 'own', 'unverified', 29400) },
|
||
{ plateNo: '浙F33333', fleetCategory: 'own' as const, source: 'api' as const, certNo: 'API-20260808-9825', count: 66, kg: 19850, amount: 89325, orders: makeVehicleOrders('9825', 'own', 'partial', 19850) },
|
||
],
|
||
},
|
||
{
|
||
customerId: 'c-ys',
|
||
customerName: '嘉兴益顺冷链物流有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(54869 * factor),
|
||
totalFeeWan: (246.91 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '浙F12345', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-7712', count: 85, kg: 25500, amount: 114750, orders: makeVehicleOrders('7712', 'external', 'verified', 25500) },
|
||
{ plateNo: '浙F67890', fleetCategory: 'external' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-088', count: 62, kg: 18600, amount: 83700, orders: makeVehicleOrders('088', 'external', 'verified', 18600) },
|
||
{ plateNo: '无车牌', fleetCategory: 'external' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-099', count: 36, kg: 10769, amount: 48460, orders: makeVehicleOrders('099', 'external', 'verified', 10769) },
|
||
],
|
||
},
|
||
{
|
||
customerId: 'c-zq',
|
||
customerName: '嘉兴智奇供应链管理有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(25542 * factor),
|
||
totalFeeWan: (114.93 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '沪A99881', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-6623', count: 52, kg: 15600, amount: 70200, orders: makeVehicleOrders('6623', 'external', 'verified', 15600) },
|
||
{ plateNo: '沪A99882', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-6624', count: 33, kg: 9942, amount: 44739, orders: makeVehicleOrders('6624', 'external', 'verified', 9942) },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
stationId: 'st-jj',
|
||
stationName: '嘉兴嘉锦加氢站',
|
||
stationType: 'external_sale' as const,
|
||
province: '浙江省',
|
||
totalKg: Math.round(182889 * factor),
|
||
totalFeeWan: (823.00 * factor).toFixed(2),
|
||
customers: [
|
||
{
|
||
customerId: 'c-ln',
|
||
customerName: '羚牛自营车队',
|
||
category: 'internal' as const,
|
||
totalKg: Math.round(128020 * factor),
|
||
totalFeeWan: (576.09 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '浙A88881F', fleetCategory: 'own' as const, source: 'api' as const, certNo: 'API-20260808-1001', count: 180, kg: 54000, amount: 243000, orders: makeVehicleOrders('1001', 'own', 'verified', 54000) },
|
||
{ plateNo: '浙A88882F', fleetCategory: 'own' as const, source: 'lingniu_report' as const, certNo: 'LN-REP-202608-102', count: 150, kg: 45000, amount: 202500, orders: makeVehicleOrders('102', 'own', 'verified', 45000) },
|
||
{ plateNo: '浙A88883F', fleetCategory: 'own' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-103', count: 96, kg: 29020, amount: 130590, orders: makeVehicleOrders('103', 'own', 'unverified', 29020) },
|
||
],
|
||
},
|
||
{
|
||
customerId: 'c-qb',
|
||
customerName: '四川群彬物流有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(54869 * factor),
|
||
totalFeeWan: (246.91 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '川A77123', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-3301', count: 110, kg: 33000, amount: 148500, orders: makeVehicleOrders('3301', 'external', 'verified', 33000) },
|
||
{ plateNo: '川A77124', fleetCategory: 'external' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-332', count: 72, kg: 21869, amount: 98410, orders: makeVehicleOrders('332', 'external', 'verified', 21869) },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
stationId: 'st-jr',
|
||
stationName: '嘉兴嘉燃加氢站',
|
||
stationType: 'self_use' as const,
|
||
province: '浙江省',
|
||
totalKg: Math.round(28234 * factor),
|
||
totalFeeWan: (127.05 * factor).toFixed(2),
|
||
customers: [
|
||
{
|
||
customerId: 'c-yj',
|
||
customerName: '浙江洋井供应链管理有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(28234 * factor),
|
||
totalFeeWan: (127.05 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '浙B99112', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-4411', count: 60, kg: 18350, amount: 82575, orders: makeVehicleOrders('4411', 'external', 'verified', 18350) },
|
||
{ plateNo: '浙B99113', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-4412', count: 32, kg: 9884, amount: 44478, orders: makeVehicleOrders('4412', 'external', 'verified', 9884) },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
stationId: 'st-ln',
|
||
stationName: '桐乡中石化绿能加氢站',
|
||
stationType: 'external_sale' as const,
|
||
province: '浙江省',
|
||
totalKg: Math.round(26080 * factor),
|
||
totalFeeWan: (117.36 * factor).toFixed(2),
|
||
customers: [
|
||
{
|
||
customerId: 'c-js',
|
||
customerName: '重庆金时源供应链有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(26080 * factor),
|
||
totalFeeWan: (117.36 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '渝A66881', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-5501', count: 52, kg: 15648, amount: 70416, orders: makeVehicleOrders('5501', 'external', 'verified', 15648) },
|
||
{ plateNo: '渝A66882', fleetCategory: 'external' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-552', count: 35, kg: 10432, amount: 46944, orders: makeVehicleOrders('552', 'external', 'verified', 10432) },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
stationId: 'st-tf',
|
||
stationName: '成都中石化天府机场北站',
|
||
stationType: 'external_sale' as const,
|
||
province: '四川省',
|
||
totalKg: Math.round(22929 * factor),
|
||
totalFeeWan: (103.18 * factor).toFixed(2),
|
||
customers: [
|
||
{
|
||
customerId: 'c-gz',
|
||
customerName: '四川拱照物流有限公司',
|
||
category: 'external' as const,
|
||
totalKg: Math.round(22929 * factor),
|
||
totalFeeWan: (103.18 * factor).toFixed(2),
|
||
vehicles: [
|
||
{ plateNo: '川A88901', fleetCategory: 'external' as const, source: 'api' as const, certNo: 'API-20260808-8801', count: 53, kg: 16050, amount: 72225, orders: makeVehicleOrders('8801', 'external', 'verified', 16050) },
|
||
{ plateNo: '川A88902', fleetCategory: 'external' as const, source: 'station_report' as const, certNo: 'ST-REP-202608-8802', count: 23, kg: 6879, amount: 30955, orders: makeVehicleOrders('8802', 'external', 'verified', 6879) },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
];
|
||
}, [year]);
|
||
|
||
// 按条件过滤（站/客户/车牌可搜索选择 + 车辆归属 + 顶栏核对范围）
|
||
const filteredStations = useMemo(() => {
|
||
return drillStations
|
||
.map((st) => {
|
||
if (stationFilter !== 'all' && st.stationId !== stationFilter) return null;
|
||
|
||
const filteredCustomers = st.customers
|
||
.map((cust) => {
|
||
if (customerFilter !== 'all' && cust.customerId !== customerFilter) return null;
|
||
|
||
const filteredVehicles = cust.vehicles
|
||
.map((vh) => {
|
||
if (fleetCategoryFilter !== 'all' && vh.fleetCategory !== fleetCategoryFilter) return null;
|
||
if (plateFilter !== 'all' && vh.plateNo !== plateFilter) return null;
|
||
|
||
if (verifyScope === 'verified') {
|
||
// 仅已核对：外部车不参与核对；羚牛车只保留已核订单
|
||
if (vh.fleetCategory !== 'own') return null;
|
||
const orders = vh.orders.filter((o) => o.verifyStatus === 'verified');
|
||
if (orders.length === 0) return null;
|
||
const kg = orders.reduce((s, o) => s + o.kg, 0);
|
||
const amount = orders.reduce((s, o) => s + o.amount, 0);
|
||
return { ...vh, orders, count: orders.length, kg, amount };
|
||
}
|
||
return vh;
|
||
})
|
||
.filter(Boolean) as typeof cust.vehicles;
|
||
|
||
if (filteredVehicles.length === 0) return null;
|
||
return {
|
||
...cust,
|
||
vehicles: filteredVehicles,
|
||
totalKg: filteredVehicles.reduce((sum, v) => sum + v.kg, 0),
|
||
totalFeeWan: (filteredVehicles.reduce((sum, v) => sum + v.amount, 0) / 10000).toFixed(2),
|
||
};
|
||
})
|
||
.filter(Boolean) as typeof st.customers;
|
||
|
||
if (filteredCustomers.length === 0) return null;
|
||
|
||
return {
|
||
...st,
|
||
customers: filteredCustomers,
|
||
totalKg: filteredCustomers.reduce((sum, c) => sum + c.totalKg, 0),
|
||
totalFeeWan: (filteredCustomers.reduce((sum, c) => sum + parseFloat(c.totalFeeWan), 0)).toFixed(2),
|
||
};
|
||
})
|
||
.filter(Boolean) as typeof drillStations;
|
||
}, [drillStations, stationFilter, customerFilter, plateFilter, fleetCategoryFilter, verifyScope]);
|
||
|
||
// 级联选项：站 → 客户 → 车牌（选项池随上级选择收窄）
|
||
const stationOptions = useMemo(
|
||
() => drillStations.map((st) => ({ value: st.stationId, label: st.stationName })),
|
||
[drillStations],
|
||
);
|
||
|
||
const customerOptions = useMemo(() => {
|
||
const map = new Map<string, string>();
|
||
drillStations.forEach((st) => {
|
||
if (stationFilter !== 'all' && st.stationId !== stationFilter) return;
|
||
st.customers.forEach((c) => {
|
||
if (!map.has(c.customerId)) map.set(c.customerId, c.customerName);
|
||
});
|
||
});
|
||
return Array.from(map.entries()).map(([value, label]) => ({ value, label }));
|
||
}, [drillStations, stationFilter]);
|
||
|
||
const plateOptions = useMemo(() => {
|
||
const set = new Set<string>();
|
||
drillStations.forEach((st) => {
|
||
if (stationFilter !== 'all' && st.stationId !== stationFilter) return;
|
||
st.customers.forEach((c) => {
|
||
if (customerFilter !== 'all' && c.customerId !== customerFilter) return;
|
||
c.vehicles.forEach((vh) => {
|
||
if (fleetCategoryFilter !== 'all' && vh.fleetCategory !== fleetCategoryFilter) return;
|
||
set.add(vh.plateNo);
|
||
});
|
||
});
|
||
});
|
||
return Array.from(set).map((plate) => ({
|
||
value: plate,
|
||
label: /无车牌/.test(plate) ? '无车牌' : plate,
|
||
}));
|
||
}, [drillStations, stationFilter, customerFilter, fleetCategoryFilter]);
|
||
|
||
// 上级变更时清掉下级无效选中
|
||
useEffect(() => {
|
||
if (customerFilter !== 'all' && !customerOptions.some((o) => o.value === customerFilter)) {
|
||
setCustomerFilter('all');
|
||
setPlateFilter('all');
|
||
}
|
||
}, [customerOptions, customerFilter]);
|
||
|
||
useEffect(() => {
|
||
if (plateFilter !== 'all' && !plateOptions.some((o) => o.value === plateFilter)) {
|
||
setPlateFilter('all');
|
||
}
|
||
}, [plateOptions, plateFilter]);
|
||
|
||
// KPI 穿透列口径：默认量/金额；加氢利润→收入/成本/利润；本月→月量/月费/占年比；本日→日量/日费/占月比；月度柱→站×内外部客户量；收支柱→站×收入/成本
|
||
const isProfitDrill = label === '加氢利润';
|
||
const isMonthDrill = label === '本月加氢';
|
||
const isDayDrill = label === '本日加氢';
|
||
const monthMetricMatch = label.match(/^(\d{4})年(\d{1,2})月(加氢量|客户收入|成本支出)$/);
|
||
const isMonthBarDrill = monthMetricMatch?.[3] === '加氢量';
|
||
const isMonthIncomeDrill = monthMetricMatch?.[3] === '客户收入';
|
||
const isMonthCostDrill = monthMetricMatch?.[3] === '成本支出';
|
||
const isStationMonthFlat = isMonthBarDrill || isMonthIncomeDrill || isMonthCostDrill;
|
||
const stationCustMatch = label.match(/^加氢站(?:客户量)?：(.+)$/);
|
||
const isStationCustomerDrill = Boolean(stationCustMatch);
|
||
const stationCustTarget = stationCustMatch?.[1]?.trim() ?? '';
|
||
const regionMatch = label.match(/^区域(市|省)：(.+)$/);
|
||
const isRegionDrill = Boolean(regionMatch);
|
||
const regionKind = regionMatch?.[1] as '市' | '省' | undefined;
|
||
const regionLabel = regionMatch?.[2]?.trim() ?? '';
|
||
const isFlatOverviewDrill = isStationMonthFlat || isStationCustomerDrill || isRegionDrill;
|
||
const monthBarIndex = monthMetricMatch ? Number(monthMetricMatch[2]) - 1 : -1;
|
||
const MONTH_BAR_KG = [85200, 52000, 112800, 135000, 128000, 118000, 122000, 28000];
|
||
const monthBarYearKg = MONTH_BAR_KG.reduce((s, n) => s + n, 0) || 1;
|
||
const monthBarShare =
|
||
monthBarIndex >= 0 && monthBarIndex < MONTH_BAR_KG.length
|
||
? MONTH_BAR_KG[monthBarIndex] / monthBarYearKg
|
||
: 1;
|
||
const incomeRatio = HOST_KPI.incomeWan / (HOST_KPI.costWan || 1);
|
||
const profitRatio = HOST_KPI.profitWan / (HOST_KPI.costWan || 1);
|
||
const monthShare = HOST_KPI.monthKgT / (HOST_KPI.totalKgT || 1);
|
||
const dayShare = HOST_KPI.dayKg / ((HOST_KPI.totalKgT || 1) * 1000);
|
||
const toIncomeYuan = (costYuan: number) => Math.round(costYuan * incomeRatio * 100) / 100;
|
||
const toProfitYuan = (costYuan: number) => Math.round(costYuan * profitRatio * 100) / 100;
|
||
const toMonthKg = (kg: number) => Math.round(kg * monthShare * 100) / 100;
|
||
const toMonthFee = (yuan: number) => Math.round(yuan * monthShare * 100) / 100;
|
||
const toDayKg = (kg: number) => Math.round(kg * dayShare * 100) / 100;
|
||
const toDayFee = (yuan: number) => Math.round(yuan * dayShare * 100) / 100;
|
||
const feeWanToYuan = (wan: string | number) => parseFloat(String(wan)) * 10000;
|
||
const filteredYearFeeYuan = filteredStations.reduce((s, st) => s + feeWanToYuan(st.totalFeeWan), 0);
|
||
const filteredMonthFeeYuan = toMonthFee(filteredYearFeeYuan);
|
||
const toFeeYearPct = (monthFeeYuan: number) =>
|
||
filteredYearFeeYuan > 0 ? Math.round((monthFeeYuan / filteredYearFeeYuan) * 10000) / 100 : 0;
|
||
const toFeeMonthPct = (dayFeeYuan: number) =>
|
||
filteredMonthFeeYuan > 0 ? Math.round((dayFeeYuan / filteredMonthFeeYuan) * 10000) / 100 : 0;
|
||
const colCount = isProfitDrill || isMonthDrill || isDayDrill ? 8 : 7;
|
||
|
||
/** 月度柱钻取：各站内部/外部客户加氢量 + 合计（按当月占年份额缩放） */
|
||
const stationMonthRows = useMemo(() => {
|
||
return filteredStations
|
||
.map((st) => {
|
||
const internalKg = st.customers
|
||
.filter((c) => c.category === 'internal')
|
||
.reduce((s, c) => s + c.totalKg, 0);
|
||
const externalKg = st.customers
|
||
.filter((c) => c.category === 'external')
|
||
.reduce((s, c) => s + c.totalKg, 0);
|
||
return {
|
||
stationId: st.stationId,
|
||
stationName: st.stationName,
|
||
province: st.province,
|
||
internalKg: Math.round(internalKg * monthBarShare),
|
||
externalKg: Math.round(externalKg * monthBarShare),
|
||
totalKg: Math.round((internalKg + externalKg) * monthBarShare),
|
||
};
|
||
})
|
||
.sort((a, b) => b.totalKg - a.totalKg);
|
||
}, [filteredStations, monthBarShare]);
|
||
|
||
/** 月度收支柱钻取：各站客户收入 / 成本支出 */
|
||
const stationRevRows = useMemo(() => {
|
||
return filteredStations
|
||
.map((st) => {
|
||
const monthFee = feeWanToYuan(st.totalFeeWan) * monthBarShare;
|
||
return {
|
||
stationId: st.stationId,
|
||
stationName: st.stationName,
|
||
province: st.province,
|
||
incomeYuan: Math.round(monthFee * incomeRatio),
|
||
costYuan: Math.round(monthFee),
|
||
};
|
||
})
|
||
.sort((a, b) =>
|
||
isMonthCostDrill ? b.costYuan - a.costYuan : b.incomeYuan - a.incomeYuan,
|
||
);
|
||
}, [filteredStations, monthBarShare, incomeRatio, isMonthCostDrill]);
|
||
|
||
const monthBarInternalSum = stationMonthRows.reduce((s, r) => s + r.internalKg, 0);
|
||
const monthBarExternalSum = stationMonthRows.reduce((s, r) => s + r.externalKg, 0);
|
||
const monthBarTotalSum = stationMonthRows.reduce((s, r) => s + r.totalKg, 0);
|
||
const monthIncomeSum = stationRevRows.reduce((s, r) => s + r.incomeYuan, 0);
|
||
const monthCostSum = stationRevRows.reduce((s, r) => s + r.costYuan, 0);
|
||
|
||
/** Top5 / 站名钻取：该站内部客户 vs 外部客户加氢总量 */
|
||
const stationCustomerRows = useMemo(() => {
|
||
if (!isStationCustomerDrill || !stationCustTarget) return [];
|
||
const st =
|
||
drillStations.find((s) => s.stationName === stationCustTarget) ||
|
||
drillStations.find(
|
||
(s) =>
|
||
s.stationName.includes(stationCustTarget.replace(/加氢站$/, '')) ||
|
||
stationCustTarget.includes(s.stationName.replace(/加氢站$/, '')),
|
||
);
|
||
if (!st) {
|
||
const top = [
|
||
{ rank: 1, name: '嘉兴中石化滨海加氢站', ownKg: 163250, extKg: 80411 },
|
||
{ rank: 2, name: '嘉兴嘉锦加氢站', ownKg: 128020, extKg: 54869 },
|
||
{ rank: 3, name: '嘉兴嘉燃加氢站', ownKg: 18350, extKg: 9884 },
|
||
{ rank: 4, name: '桐乡中石化绿能加氢站', ownKg: 15648, extKg: 10432 },
|
||
{ rank: 5, name: '成都中石化天府机场北站', ownKg: 16050, extKg: 6879 },
|
||
].find((t) => t.name === stationCustTarget || stationCustTarget.includes(t.name.slice(0, 6)));
|
||
if (!top) return [];
|
||
return [
|
||
{ customerId: 'own', customerName: '内部客户合计', category: 'internal' as const, totalKg: top.ownKg },
|
||
{ customerId: 'ext', customerName: '外部客户合计', category: 'external' as const, totalKg: top.extKg },
|
||
];
|
||
}
|
||
return st.customers
|
||
.map((c) => ({
|
||
customerId: c.customerId,
|
||
customerName: c.customerName,
|
||
category: c.category,
|
||
totalKg: c.totalKg,
|
||
}))
|
||
.sort((a, b) => b.totalKg - a.totalKg);
|
||
}, [drillStations, isStationCustomerDrill, stationCustTarget]);
|
||
|
||
const stationCustInternalKg = stationCustomerRows
|
||
.filter((r) => r.category === 'internal')
|
||
.reduce((s, r) => s + r.totalKg, 0);
|
||
const stationCustExternalKg = stationCustomerRows
|
||
.filter((r) => r.category === 'external')
|
||
.reduce((s, r) => s + r.totalKg, 0);
|
||
const stationCustTotalKg = stationCustInternalKg + stationCustExternalKg;
|
||
|
||
/** 区域（市/省）钻取：区域内各站加氢总量与占比 */
|
||
const regionStationRows = useMemo(() => {
|
||
if (!isRegionDrill || !regionLabel) return [];
|
||
const CITY_KEYS: Record<string, string[]> = {
|
||
嘉兴市: ['嘉兴', '桐乡', '嘉善'],
|
||
成都市: ['成都'],
|
||
佛山市: ['佛山'],
|
||
昆山市: ['昆山'],
|
||
常熟市: ['常熟'],
|
||
广州市: ['广州'],
|
||
深圳市: ['深圳'],
|
||
无锡市: ['无锡'],
|
||
};
|
||
const matchCity = (name: string, city: string) => {
|
||
if (city === '其他城市') {
|
||
const keys = Object.values(CITY_KEYS).flat();
|
||
return !keys.some((k) => name.includes(k));
|
||
}
|
||
const keys = CITY_KEYS[city] || [city.replace(/市$/, '')];
|
||
return keys.some((k) => name.includes(k));
|
||
};
|
||
const list = MOCK_STATION_SUMMARY_LIST.filter((st) => {
|
||
if (regionKind === '省') {
|
||
if (regionLabel === '其他省份') {
|
||
return !['浙江省', '四川省', '广东省', '江苏省'].includes(st.province);
|
||
}
|
||
return st.province === regionLabel;
|
||
}
|
||
return matchCity(st.name, regionLabel);
|
||
});
|
||
const totalKg = list.reduce((s, st) => s + parseFloat(st.kgT) * 1000, 0) || 1;
|
||
return list
|
||
.map((st) => {
|
||
const kg = Math.round(parseFloat(st.kgT) * 1000);
|
||
return {
|
||
name: st.name,
|
||
province: st.province,
|
||
kg,
|
||
kgT: st.kgT,
|
||
pct: Math.round((kg / totalKg) * 10000) / 100,
|
||
incomeWan: st.incomeWan,
|
||
};
|
||
})
|
||
.sort((a, b) => b.kg - a.kg);
|
||
}, [isRegionDrill, regionKind, regionLabel]);
|
||
|
||
const regionKgSum = regionStationRows.reduce((s, r) => s + r.kg, 0);
|
||
|
||
const renderMetricCells = (kg: number, feeYuan: number) => {
|
||
if (isProfitDrill) {
|
||
return (
|
||
<>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#10b981', fontWeight: 600 }}>
|
||
¥{toIncomeYuan(feeYuan).toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#f59e0b', fontWeight: 600 }}>
|
||
¥{feeYuan.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0284c7', fontWeight: 700 }}>
|
||
¥{toProfitYuan(feeYuan).toLocaleString('zh-CN')}
|
||
</td>
|
||
</>
|
||
);
|
||
}
|
||
if (isMonthDrill) {
|
||
const mKg = toMonthKg(kg);
|
||
const mFee = toMonthFee(feeYuan);
|
||
return (
|
||
<>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0f172a', fontWeight: 600 }}>
|
||
{mKg.toLocaleString('zh-CN')} Kg
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#f59e0b', fontWeight: 600 }}>
|
||
¥{mFee.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0284c7', fontWeight: 700 }}>
|
||
{toFeeYearPct(mFee).toFixed(2)}%
|
||
</td>
|
||
</>
|
||
);
|
||
}
|
||
if (isDayDrill) {
|
||
const dKg = toDayKg(kg);
|
||
const dFee = toDayFee(feeYuan);
|
||
return (
|
||
<>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0f172a', fontWeight: 600 }}>
|
||
{dKg.toLocaleString('zh-CN')} Kg
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#f59e0b', fontWeight: 600 }}>
|
||
¥{dFee.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0284c7', fontWeight: 700 }}>
|
||
{toFeeMonthPct(dFee).toFixed(2)}%
|
||
</td>
|
||
</>
|
||
);
|
||
}
|
||
return (
|
||
<>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0f172a', fontWeight: 600 }}>
|
||
{kg.toLocaleString('zh-CN')} Kg
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#10b981' }}>
|
||
¥{feeYuan.toLocaleString('zh-CN')}
|
||
</td>
|
||
</>
|
||
);
|
||
};
|
||
|
||
const handleExportDrillExcel = () => {
|
||
if (isMonthBarDrill) {
|
||
const aoa: (string | number)[][] = [
|
||
['加氢站名称', '所属省份', '内部客户加氢总量(Kg)', '外部客户加氢总量(Kg)', '合计加氢总量(Kg)'],
|
||
];
|
||
stationMonthRows.forEach((r) => {
|
||
aoa.push([r.stationName, r.province, r.internalKg, r.externalKg, r.totalKg]);
|
||
});
|
||
downloadExcelAoa(aoa, `${label}_各站内外部客户加氢量.xlsx`, '月度各站加氢量');
|
||
return;
|
||
}
|
||
if (isMonthIncomeDrill) {
|
||
const aoa: (string | number)[][] = [['加氢站名称', '所属省份', '客户收入(元)']];
|
||
stationRevRows.forEach((r) => {
|
||
aoa.push([r.stationName, r.province, r.incomeYuan]);
|
||
});
|
||
downloadExcelAoa(aoa, `${label}_各站客户收入.xlsx`, '月度各站客户收入');
|
||
return;
|
||
}
|
||
if (isMonthCostDrill) {
|
||
const aoa: (string | number)[][] = [['加氢站名称', '所属省份', '成本支出(元)']];
|
||
stationRevRows.forEach((r) => {
|
||
aoa.push([r.stationName, r.province, r.costYuan]);
|
||
});
|
||
downloadExcelAoa(aoa, `${label}_各站成本支出.xlsx`, '月度各站成本支出');
|
||
return;
|
||
}
|
||
if (isStationCustomerDrill) {
|
||
const aoa: (string | number)[][] = [
|
||
['加氢站', '客户名称', '客户类型', '加氢总量(Kg)'],
|
||
];
|
||
stationCustomerRows.forEach((r) => {
|
||
aoa.push([
|
||
stationCustTarget,
|
||
r.customerName,
|
||
r.category === 'internal' ? '内部客户' : '外部客户',
|
||
r.totalKg,
|
||
]);
|
||
});
|
||
downloadExcelAoa(aoa, `${stationCustTarget}_内外部客户加氢量.xlsx`, '站客户加氢量');
|
||
return;
|
||
}
|
||
if (isRegionDrill) {
|
||
const aoa: (string | number)[][] = [
|
||
['区域', '加氢站名称', '所属省份', '加氢总量(Kg)', '区域内占比(%)'],
|
||
];
|
||
regionStationRows.forEach((r) => {
|
||
aoa.push([regionLabel, r.name, r.province, r.kg, r.pct]);
|
||
});
|
||
downloadExcelAoa(aoa, `${regionLabel}_各站加氢总量占比.xlsx`, '区域各站加氢量');
|
||
return;
|
||
}
|
||
|
||
const aoa: (string | number)[][] = [
|
||
isProfitDrill
|
||
? [
|
||
'加氢站名称',
|
||
'客户名称',
|
||
'车牌号',
|
||
'车辆归属',
|
||
'订单编号',
|
||
'加氢时间',
|
||
'数据来源',
|
||
'订单核对状态',
|
||
'加氢量(Kg)',
|
||
'收入(元)',
|
||
'成本(元)',
|
||
'利润(元)',
|
||
]
|
||
: isMonthDrill
|
||
? [
|
||
'加氢站名称',
|
||
'客户名称',
|
||
'车牌号',
|
||
'车辆归属',
|
||
'订单编号',
|
||
'加氢时间',
|
||
'数据来源',
|
||
'订单核对状态',
|
||
'本月加氢量(Kg)',
|
||
'本月加氢费(元)',
|
||
'加氢费占年比(%)',
|
||
]
|
||
: isDayDrill
|
||
? [
|
||
'加氢站名称',
|
||
'客户名称',
|
||
'车牌号',
|
||
'车辆归属',
|
||
'订单编号',
|
||
'加氢时间',
|
||
'数据来源',
|
||
'订单核对状态',
|
||
'本日加氢量(Kg)',
|
||
'本日加氢费(元)',
|
||
'加氢费占月比(%)',
|
||
]
|
||
: [
|
||
'加氢站名称',
|
||
'加氢站类型',
|
||
'客户名称',
|
||
'客户类型',
|
||
'车牌号',
|
||
'车辆归属',
|
||
'订单编号',
|
||
'加氢时间',
|
||
'数据来源',
|
||
'来源凭证/接口流水号',
|
||
'订单核对状态',
|
||
'单价(元/Kg)',
|
||
'加氢量(Kg)',
|
||
'加氢金额(元)',
|
||
],
|
||
];
|
||
|
||
drillStations.forEach((st) => {
|
||
st.customers.forEach((cust) => {
|
||
cust.vehicles.forEach((vh) => {
|
||
vh.orders.forEach((ord) => {
|
||
if (isProfitDrill) {
|
||
aoa.push([
|
||
st.stationName,
|
||
cust.customerName,
|
||
vh.plateNo,
|
||
vh.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
ord.orderId,
|
||
ord.time,
|
||
SOURCE_TYPE_LABEL[ord.source] || ord.source,
|
||
vh.fleetCategory === 'own' ? (DAILY_VERIFY_LABEL[ord.verifyStatus || 'unverified'] || '未核对') : '-',
|
||
ord.kg,
|
||
toIncomeYuan(ord.amount),
|
||
ord.amount,
|
||
toProfitYuan(ord.amount),
|
||
]);
|
||
} else if (isMonthDrill) {
|
||
const mFee = toMonthFee(ord.amount);
|
||
aoa.push([
|
||
st.stationName,
|
||
cust.customerName,
|
||
vh.plateNo,
|
||
vh.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
ord.orderId,
|
||
ord.time,
|
||
SOURCE_TYPE_LABEL[ord.source] || ord.source,
|
||
vh.fleetCategory === 'own' ? (DAILY_VERIFY_LABEL[ord.verifyStatus || 'unverified'] || '未核对') : '-',
|
||
toMonthKg(ord.kg),
|
||
mFee,
|
||
toFeeYearPct(mFee),
|
||
]);
|
||
} else if (isDayDrill) {
|
||
const dFee = toDayFee(ord.amount);
|
||
aoa.push([
|
||
st.stationName,
|
||
cust.customerName,
|
||
vh.plateNo,
|
||
vh.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
ord.orderId,
|
||
ord.time,
|
||
SOURCE_TYPE_LABEL[ord.source] || ord.source,
|
||
vh.fleetCategory === 'own' ? (DAILY_VERIFY_LABEL[ord.verifyStatus || 'unverified'] || '未核对') : '-',
|
||
toDayKg(ord.kg),
|
||
dFee,
|
||
toFeeMonthPct(dFee),
|
||
]);
|
||
} else {
|
||
aoa.push([
|
||
st.stationName,
|
||
st.stationType === 'self_use' ? '自用消费' : '对外销售',
|
||
cust.customerName,
|
||
cust.category === 'internal' ? '内部客户' : '外部客户',
|
||
vh.plateNo,
|
||
vh.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
ord.orderId,
|
||
ord.time,
|
||
SOURCE_TYPE_LABEL[ord.source] || ord.source,
|
||
ord.certNo,
|
||
vh.fleetCategory === 'own' ? (DAILY_VERIFY_LABEL[ord.verifyStatus || 'unverified'] || '未核对') : '-',
|
||
ord.unitPrice,
|
||
ord.kg,
|
||
ord.amount,
|
||
]);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
const fileName = isProfitDrill
|
||
? `${year}年_加氢利润_收入成本穿透明细.xlsx`
|
||
: isMonthDrill
|
||
? `${year}年_本月加氢_量费占年比穿透明细.xlsx`
|
||
: isDayDrill
|
||
? `${year}年_本日加氢_量费占月比穿透明细.xlsx`
|
||
: `${year}年_${label}_加氢站_客户_车牌_单笔订单穿透流水账单.xlsx`;
|
||
const sheetName = isProfitDrill
|
||
? '加氢利润收入成本明细'
|
||
: isMonthDrill
|
||
? '本月加氢穿透明细'
|
||
: isDayDrill
|
||
? '本日加氢穿透明细'
|
||
: 'KPI穿透订单明细';
|
||
downloadExcelAoa(aoa, fileName, sheetName);
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-modal-overlay" onClick={onClose}>
|
||
<div className="ehb-modal-card" onClick={(e) => e.stopPropagation()}>
|
||
{/* Modal 头部 */}
|
||
<div className="ehb-modal-head">
|
||
<div className="ehb-modal-head__title-group">
|
||
<button type="button" className="ehb-modal-back-btn" onClick={onClose} title="返回看板">
|
||
<ChevronLeft size={18} />
|
||
<span>返回</span>
|
||
</button>
|
||
<div>
|
||
<div className="ehb-modal-head__title">
|
||
<span>「{year}」{label}明细</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-modal-head__actions">
|
||
<button type="button" className="ehb-modal-close-btn" onClick={onClose} title="关闭">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal 内容区 */}
|
||
<div className="ehb-modal-body">
|
||
{isFlatOverviewDrill ? (
|
||
isStationCustomerDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-bar">
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢站</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7', fontSize: 13 }}>
|
||
{stationCustTarget}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">内部客户加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{stationCustInternalKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">外部客户加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
{stationCustExternalKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">合计加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0f172a' }}>
|
||
{stationCustTotalKg.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportDrillExcel}
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
<div className="ehb-modal-hint-text">该站内部客户与外部客户加氢总量（可纵向滚动）</div>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-table-wrap is-v-scroll">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th>客户</th>
|
||
<th>类型</th>
|
||
<th style={{ textAlign: 'right' }}>加氢总量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>站内占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{stationCustomerRows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={4} style={{ textAlign: 'center', color: '#94a3b8', padding: 28 }}>
|
||
暂无该站客户数据
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
stationCustomerRows.map((row) => (
|
||
<tr key={row.customerId}>
|
||
<td style={{ fontWeight: 600 }}>{row.customerName}</td>
|
||
<td>
|
||
<span
|
||
style={{
|
||
fontSize: 11,
|
||
color: row.category === 'internal' ? '#0284c7' : '#b45309',
|
||
background: row.category === 'internal' ? '#eff6ff' : '#fffbeb',
|
||
padding: '1px 6px',
|
||
borderRadius: 4,
|
||
}}
|
||
>
|
||
{row.category === 'internal' ? '内部客户' : '外部客户'}
|
||
</span>
|
||
</td>
|
||
<td
|
||
style={{
|
||
textAlign: 'right',
|
||
fontFamily: 'var(--bi-font-mono)',
|
||
fontWeight: 700,
|
||
color: row.category === 'internal' ? '#0284c7' : '#f59e0b',
|
||
}}
|
||
>
|
||
{row.totalKg.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{stationCustTotalKg > 0
|
||
? ((row.totalKg / stationCustTotalKg) * 100).toFixed(1)
|
||
: '0.0'}
|
||
%
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
) : isRegionDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-bar">
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">区域</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7', fontSize: 13 }}>
|
||
{regionLabel}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{(regionKgSum / 1000).toFixed(2)} T
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">{regionStationRows.length} 站</span>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportDrillExcel}
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
<div className="ehb-modal-hint-text">
|
||
该{regionKind}各加氢站加氢总量与区域内占比（可纵向滚动）
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="ehb-modal-table-wrap is-v-scroll">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ width: 48 }}>#</th>
|
||
<th>加氢站</th>
|
||
<th>所属省份</th>
|
||
<th style={{ textAlign: 'right' }}>加氢总量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>区域内占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{regionStationRows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={5} style={{ textAlign: 'center', color: '#94a3b8', padding: 28 }}>
|
||
该区域暂无加氢站数据
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
regionStationRows.map((row, idx) => (
|
||
<tr key={row.name}>
|
||
<td style={{ color: '#94a3b8' }}>{idx + 1}</td>
|
||
<td style={{ fontWeight: 600, color: '#0f172a' }}>{row.name}</td>
|
||
<td style={{ color: '#64748b' }}>{row.province}</td>
|
||
<td
|
||
style={{
|
||
textAlign: 'right',
|
||
fontFamily: 'var(--bi-font-mono)',
|
||
fontWeight: 700,
|
||
color: '#0284c7',
|
||
}}
|
||
>
|
||
{row.kg.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', fontWeight: 600 }}>
|
||
{row.pct.toFixed(1)}%
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="ehb-modal-meta-bar">
|
||
{isMonthBarDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">内部客户加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{monthBarInternalSum.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">外部客户加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
{monthBarExternalSum.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">合计加氢总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0f172a' }}>
|
||
{monthBarTotalSum.toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
</>
|
||
) : isMonthIncomeDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">客户收入合计</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981' }}>
|
||
¥{monthIncomeSum.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">站均收入</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
¥
|
||
{(stationRevRows.length
|
||
? Math.round(monthIncomeSum / stationRevRows.length)
|
||
: 0
|
||
).toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">成本支出合计</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
¥{monthCostSum.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">站均成本</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
¥
|
||
{(stationRevRows.length
|
||
? Math.round(monthCostSum / stationRevRows.length)
|
||
: 0
|
||
).toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">
|
||
{(isMonthBarDrill ? stationMonthRows : stationRevRows).length} 站
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<BiSearchSelect
|
||
value={stationFilter}
|
||
onChange={(v) => {
|
||
setStationFilter(v);
|
||
setCustomerFilter('all');
|
||
setPlateFilter('all');
|
||
}}
|
||
options={stationOptions}
|
||
allLabel="全部加氢站"
|
||
placeholder="搜索加氢站…"
|
||
width={220}
|
||
/>
|
||
<div className="ehb-fleet-segmented" role="radiogroup" aria-label="车辆归属">
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'all'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'all' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('all');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
全部车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'own'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'own' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('own');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
<Truck size={14} aria-hidden />
|
||
仅羚牛车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'external'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'external' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('external');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
<Truck size={14} aria-hidden />
|
||
仅外部车辆
|
||
</button>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportDrillExcel}
|
||
title="导出 Excel"
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
<div className="ehb-modal-hint-text">
|
||
{isMonthBarDrill
|
||
? '该月各加氢站：内部客户加氢总量 · 外部客户加氢总量 · 合计'
|
||
: isMonthIncomeDrill
|
||
? '该月各加氢站客户收入'
|
||
: '该月各加氢站成本支出'}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-modal-table-wrap">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th>加氢站</th>
|
||
<th>所属省份</th>
|
||
{isMonthBarDrill ? (
|
||
<>
|
||
<th style={{ textAlign: 'right' }}>内部客户加氢总量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>外部客户加氢总量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>合计加氢总量 (Kg)</th>
|
||
</>
|
||
) : (
|
||
<th style={{ textAlign: 'right' }}>
|
||
{isMonthIncomeDrill ? '客户收入 (元)' : '成本支出 (元)'}
|
||
</th>
|
||
)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{isMonthBarDrill ? (
|
||
stationMonthRows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={5} style={{ textAlign: 'center', color: '#94a3b8', padding: 28 }}>
|
||
暂无符合筛选的加氢站数据
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
stationMonthRows.map((row) => (
|
||
<tr key={row.stationId}>
|
||
<td style={{ fontWeight: 600, color: '#0f172a' }}>{row.stationName}</td>
|
||
<td style={{ color: '#64748b' }}>{row.province}</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0284c7', fontWeight: 600 }}>
|
||
{row.internalKg.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#f59e0b', fontWeight: 600 }}>
|
||
{row.externalKg.toLocaleString('zh-CN')}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#0f172a', fontWeight: 700 }}>
|
||
{row.totalKg.toLocaleString('zh-CN')}
|
||
</td>
|
||
</tr>
|
||
))
|
||
)
|
||
) : stationRevRows.length === 0 ? (
|
||
<tr>
|
||
<td colSpan={3} style={{ textAlign: 'center', color: '#94a3b8', padding: 28 }}>
|
||
暂无符合筛选的加氢站数据
|
||
</td>
|
||
</tr>
|
||
) : (
|
||
stationRevRows.map((row) => (
|
||
<tr key={row.stationId}>
|
||
<td style={{ fontWeight: 600, color: '#0f172a' }}>{row.stationName}</td>
|
||
<td style={{ color: '#64748b' }}>{row.province}</td>
|
||
<td
|
||
style={{
|
||
textAlign: 'right',
|
||
fontFamily: 'var(--bi-font-mono)',
|
||
color: isMonthIncomeDrill ? '#10b981' : '#f59e0b',
|
||
fontWeight: 700,
|
||
}}
|
||
>
|
||
¥{(isMonthIncomeDrill ? row.incomeYuan : row.costYuan).toLocaleString('zh-CN')}
|
||
</td>
|
||
</tr>
|
||
))
|
||
)}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
)
|
||
) : (
|
||
<>
|
||
{/* 汇总与追溯证明 Card */}
|
||
<div className="ehb-modal-meta-bar">
|
||
{isProfitDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">收入合计</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981' }}>
|
||
¥{toIncomeYuan(
|
||
filteredStations.reduce((s, st) => s + feeWanToYuan(st.totalFeeWan), 0),
|
||
).toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">成本合计</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
¥{filteredStations
|
||
.reduce((s, st) => s + feeWanToYuan(st.totalFeeWan), 0)
|
||
.toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢利润</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
¥{(HOST_KPI.profitWan * 10000).toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">{filteredStations.length} 站</span>
|
||
</div>
|
||
</>
|
||
) : isMonthDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">本月加氢量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{(toMonthKg(filteredStations.reduce((s, st) => s + st.totalKg, 0)) / 1000).toFixed(2)} T
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">本月加氢费</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
¥{(toMonthFee(filteredYearFeeYuan) / 10000).toFixed(2)} 万元
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢费占年比</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{(monthShare * 100).toFixed(2)}%
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">{filteredStations.length} 站</span>
|
||
</div>
|
||
</>
|
||
) : isDayDrill ? (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">本日加氢量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{toDayKg(filteredStations.reduce((s, st) => s + st.totalKg, 0)).toLocaleString('zh-CN')} Kg
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">本日加氢费</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
¥{toDayFee(filteredYearFeeYuan).toLocaleString('zh-CN')}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢费占月比</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{filteredMonthFeeYuan > 0
|
||
? ((toDayFee(filteredYearFeeYuan) / filteredMonthFeeYuan) * 100).toFixed(2)
|
||
: '0.00'}
|
||
%
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">{filteredStations.length} 站</span>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">数据归集总量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{(filteredStations.reduce((s, st) => s + st.totalKg, 0) / 1000).toFixed(2)} T
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">数据总金额</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981' }}>
|
||
¥{filteredStations.reduce((s, st) => s + parseFloat(st.totalFeeWan), 0).toFixed(2)} 万元
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">覆盖加氢站数</span>
|
||
<span className="ehb-modal-meta-val">{filteredStations.length} 站</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">数据源可追溯率</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>100% (含API/站点上报凭证)</span>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* 过滤筛选条：加氢站 / 客户 / 车辆（可搜索）+ 车辆归属 + 导出 */}
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<BiSearchSelect
|
||
value={stationFilter}
|
||
onChange={(v) => {
|
||
setStationFilter(v);
|
||
setCustomerFilter('all');
|
||
setPlateFilter('all');
|
||
}}
|
||
options={stationOptions}
|
||
allLabel="全部加氢站"
|
||
placeholder="搜索加氢站…"
|
||
width={200}
|
||
/>
|
||
<BiSearchSelect
|
||
value={customerFilter}
|
||
onChange={(v) => {
|
||
setCustomerFilter(v);
|
||
setPlateFilter('all');
|
||
}}
|
||
options={customerOptions}
|
||
allLabel="全部客户"
|
||
placeholder="搜索客户…"
|
||
width={200}
|
||
/>
|
||
<BiSearchSelect
|
||
value={plateFilter}
|
||
onChange={setPlateFilter}
|
||
options={plateOptions}
|
||
allLabel="全部车辆"
|
||
placeholder="搜索车牌…"
|
||
width={160}
|
||
/>
|
||
<div className="ehb-fleet-segmented" role="radiogroup" aria-label="车辆归属">
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'all'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'all' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('all');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
全部车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'own'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'own' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('own');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
<Truck size={14} aria-hidden />
|
||
仅羚牛车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="radio"
|
||
aria-checked={fleetCategoryFilter === 'external'}
|
||
className={`ehb-fleet-btn ${fleetCategoryFilter === 'external' ? 'is-active' : ''}`}
|
||
onClick={() => {
|
||
setFleetCategoryFilter('external');
|
||
setPlateFilter('all');
|
||
}}
|
||
>
|
||
<Truck size={14} aria-hidden />
|
||
仅外部车辆
|
||
</button>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportDrillExcel}
|
||
title="导出 Excel 穿透账单"
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel 穿透账单
|
||
</button>
|
||
<div className="ehb-modal-hint-text">
|
||
提示：点击表格行可四级层层展开 【加氢站 → 客户 → 车牌 → 单笔订单与核对明细】
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-h5-scroll-hint">‹ 左右滑动查看完整数据与凭证列 ›</div>
|
||
|
||
{/* 穿透树形表格 */}
|
||
<div className="ehb-modal-table-wrap">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th>加氢站 / 客户 / 车辆与凭证链路</th>
|
||
<th>类型 / 归属</th>
|
||
<th>数据来源及凭证号</th>
|
||
<th>核对状态</th>
|
||
<th style={{ textAlign: 'right' }}>加氢笔数</th>
|
||
{isProfitDrill ? (
|
||
<>
|
||
<th style={{ textAlign: 'right' }}>收入 (元)</th>
|
||
<th style={{ textAlign: 'right' }}>成本 (元)</th>
|
||
<th style={{ textAlign: 'right' }}>利润 (元)</th>
|
||
</>
|
||
) : isMonthDrill ? (
|
||
<>
|
||
<th style={{ textAlign: 'right' }}>本月加氢量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>本月加氢费 (元)</th>
|
||
<th style={{ textAlign: 'right' }}>加氢费占年比</th>
|
||
</>
|
||
) : isDayDrill ? (
|
||
<>
|
||
<th style={{ textAlign: 'right' }}>本日加氢量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>本日加氢费 (元)</th>
|
||
<th style={{ textAlign: 'right' }}>加氢费占月比</th>
|
||
</>
|
||
) : (
|
||
<>
|
||
<th style={{ textAlign: 'right' }}>加氢总量 (Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>加氢金额 (元)</th>
|
||
</>
|
||
)}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredStations.map((st) => {
|
||
const isStExpanded = !!expandedStations[st.stationId];
|
||
const stationVehicles = st.customers.flatMap((c) => c.vehicles);
|
||
const stationVerify = aggregateVehiclesVerifyStatus(stationVehicles);
|
||
|
||
return (
|
||
<React.Fragment key={st.stationId}>
|
||
{/* Level 1: 加氢站 */}
|
||
<tr
|
||
style={{ cursor: 'pointer', background: isStExpanded ? '#f0f9ff' : '#f8fafc', fontWeight: 700 }}
|
||
onClick={() => toggleStation(st.stationId)}
|
||
>
|
||
<td style={{ color: '#0f172a' }}>
|
||
<span style={{ marginRight: 6, color: '#0284c7', display: 'inline-block', width: 14 }}>
|
||
{isStExpanded ? '▼' : '►'}
|
||
</span>
|
||
<span>{st.stationName}</span>
|
||
<span style={{ fontSize: 11, color: '#64748b', fontWeight: 400, marginLeft: 8 }}>
|
||
({st.customers.length} 家客户)
|
||
</span>
|
||
</td>
|
||
<td style={{ color: '#94a3b8' }}>-</td>
|
||
<td style={{ color: '#64748b', fontSize: 11 }} title="本站数据由系统自动归集，无需单笔手工录入">
|
||
全量自动归集
|
||
</td>
|
||
<td>{renderAggVerifyTag(stationVerify, '本站羚牛车辆')}</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{st.customers.reduce((sum, c) => sum + c.vehicles.reduce((vs, v) => vs + v.count, 0), 0)} 笔
|
||
</td>
|
||
{renderMetricCells(st.totalKg, feeWanToYuan(st.totalFeeWan))}
|
||
</tr>
|
||
|
||
{/* Level 2: 客户层 */}
|
||
{isStExpanded &&
|
||
st.customers.map((cust) => {
|
||
const custKey = `${st.stationId}_${cust.customerId}`;
|
||
const isCustExpanded = !!expandedCustomers[custKey];
|
||
|
||
return (
|
||
<React.Fragment key={custKey}>
|
||
<tr
|
||
style={{ cursor: 'pointer', background: isCustExpanded ? '#f1f5f9' : '#ffffff', fontSize: 12 }}
|
||
onClick={() => toggleCustomer(st.stationId, cust.customerId)}
|
||
>
|
||
<td style={{ paddingLeft: 28, fontWeight: 600, color: '#1e293b' }}>
|
||
<span style={{ marginRight: 6, color: '#0284c7', display: 'inline-block', width: 14 }}>
|
||
{isCustExpanded ? '▼' : '►'}
|
||
</span>
|
||
<span>└─ 客户：{cust.customerName}</span>
|
||
</td>
|
||
<td style={{ color: '#94a3b8' }}>-</td>
|
||
<td style={{ color: '#64748b', fontSize: 11 }}>{cust.vehicles.length} 辆车挂载</td>
|
||
<td>-</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{cust.vehicles.reduce((sum, v) => sum + v.count, 0)} 笔
|
||
</td>
|
||
{renderMetricCells(cust.totalKg, feeWanToYuan(cust.totalFeeWan))}
|
||
</tr>
|
||
|
||
{/* Level 3: 车辆及数据来源与凭证层 (支持折叠展开单笔订单) */}
|
||
{isCustExpanded &&
|
||
cust.vehicles.map((vh, idx) => {
|
||
const vhKey = `${st.stationId}_${cust.customerId}_${vh.plateNo}`;
|
||
const isVhExpanded = !!expandedVehicles[vhKey];
|
||
const showAllOrders = !!expandedAllVehicleOrders[vhKey];
|
||
const displayOrders = showAllOrders ? vh.orders : vh.orders.slice(0, 5);
|
||
const aggVerify = computeVehicleVerifyStatus(vh.orders, vh.fleetCategory);
|
||
// 无法识别车牌 →「无车牌」类目，与有牌车辆同级；标签固定「外部车辆」。能识别 →「羚牛车辆」/「外部车辆」按归属。
|
||
const isNoPlate = !vh.plateNo || /无车牌/.test(vh.plateNo);
|
||
const plateDisplay = isNoPlate ? '无车牌' : vh.plateNo;
|
||
const isOwnFleet = !isNoPlate && vh.fleetCategory === 'own';
|
||
|
||
return (
|
||
<React.Fragment key={`${custKey}_${idx}`}>
|
||
<tr
|
||
style={{ cursor: 'pointer', background: isVhExpanded ? '#f1f5f9' : '#ffffff', fontSize: 11 }}
|
||
onClick={() => toggleVehicle(st.stationId, cust.customerId, vh.plateNo)}
|
||
>
|
||
<td style={{ paddingLeft: 52, color: '#334155', fontWeight: 600 }}>
|
||
<span style={{ marginRight: 6, color: '#0284c7', display: 'inline-block', width: 14 }}>
|
||
{isVhExpanded ? '▼' : '►'}
|
||
</span>
|
||
<strong style={{ fontFamily: 'var(--bi-font-mono)', color: '#0f172a' }}>{plateDisplay}</strong>
|
||
<span style={{ fontSize: 10, color: '#64748b', fontWeight: 400, marginLeft: 6 }}>
|
||
({vh.count} 笔订单)
|
||
</span>
|
||
</td>
|
||
<td>
|
||
{renderFleetTag(isOwnFleet)}
|
||
</td>
|
||
<td>
|
||
{renderSourceTag(vh.source)}
|
||
</td>
|
||
<td>
|
||
{renderVehicleVerifyTag(vh.fleetCategory, aggVerify)}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#475569' }}>
|
||
{vh.count} 笔
|
||
</td>
|
||
{renderMetricCells(vh.kg, vh.amount)}
|
||
</tr>
|
||
|
||
{/* Level 4: 单笔加氢订单流水与核对明细层 */}
|
||
{isVhExpanded && (
|
||
<>
|
||
{displayOrders.map((ord) => (
|
||
<tr key={ord.orderId} style={{ background: '#f8fafc', fontSize: 11 }}>
|
||
<td style={{ paddingLeft: 76, color: '#334155' }}>
|
||
<span style={{ color: '#cbd5e1', marginRight: 6 }}>└──</span>
|
||
<span style={{ color: '#64748b', fontSize: 10, marginRight: 6 }}>订单编号</span>
|
||
<span
|
||
style={{ fontFamily: 'var(--bi-font-mono)', color: '#0284c7', fontWeight: 600, marginRight: 6 }}
|
||
title="加氢订单编号"
|
||
>
|
||
{ord.orderId}
|
||
</span>
|
||
<span style={{ color: '#64748b', fontSize: 10 }}>({ord.time})</span>
|
||
</td>
|
||
<td>
|
||
<span style={{ color: '#64748b', fontSize: 10, fontFamily: 'var(--bi-font-mono)' }}>
|
||
单价 ¥{ord.unitPrice.toFixed(2)}/Kg
|
||
</span>
|
||
</td>
|
||
<td>
|
||
{renderSourceTag(ord.source)}
|
||
</td>
|
||
<td>
|
||
{renderOrderVerifyTag(vh.fleetCategory, ord.verifyStatus)}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontFamily: 'var(--bi-font-mono)', color: '#94a3b8' }}>
|
||
1 笔
|
||
</td>
|
||
{renderMetricCells(ord.kg, ord.amount)}
|
||
</tr>
|
||
))}
|
||
|
||
<tr style={{ background: '#f8fafc', fontSize: 11 }}>
|
||
<td colSpan={colCount} style={{ paddingLeft: 76, paddingTop: 6, paddingBottom: 8 }}>
|
||
<span style={{ color: '#cbd5e1', marginRight: 6 }}>└──</span>
|
||
<span className="ehb-order-more-row">
|
||
<button
|
||
type="button"
|
||
className="ehb-order-more-btn"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
toggleShowAllOrders(vhKey);
|
||
}}
|
||
>
|
||
{showAllOrders
|
||
? '收起至近 5 笔 ▲'
|
||
: `查看全量 ${vh.count} 笔订单流水 ▼`}
|
||
</button>
|
||
<span className="ehb-order-more-hint">
|
||
{showAllOrders
|
||
? `包含该车辆共 ${vh.count} 笔历史加氢订单，已展示全量 ${vh.orders.length} 笔穿透流水`
|
||
: `包含该车辆共 ${vh.count} 笔历史加氢订单，默认展示近 ${displayOrders.length} 笔穿透核对流水明细`}
|
||
</span>
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
</>
|
||
)}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface CustomerBillDrillModalProps {
|
||
customerName: string;
|
||
year: number;
|
||
onClose: () => void;
|
||
}
|
||
|
||
function CustomerBillDrillModal({ customerName, year, onClose }: CustomerBillDrillModalProps) {
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const [expandedDates, setExpandedDates] = useState<Record<string, boolean>>({
|
||
'2026-08-08': true, // 默认展开最新一日
|
||
});
|
||
|
||
const custSummary = MOCK_CUSTOMER_SUMMARY_LIST.find((c) => c.name === customerName);
|
||
const bearerLabel = custSummary?.bearer === 'lingniu' ? '羚牛' : '客户';
|
||
const summaryKgT = custSummary ? parseFloat(custSummary.kgT) : 0;
|
||
const summaryCostWan = custSummary ? parseFloat(custSummary.costWan) : 0;
|
||
const summaryReceivableText = custSummary?.receivable ?? '—';
|
||
|
||
const toggleDate = (dateStr: string) => {
|
||
setExpandedDates((prev) => ({ ...prev, [dateStr]: !prev[dateStr] }));
|
||
};
|
||
|
||
// 根据客户名称与年份建立【客户 -> 日期 -> 车牌加氢记录(最小粒度)】层层下钻明细
|
||
const billData = useMemo(() => {
|
||
const dates = [
|
||
{
|
||
date: '2026-08-08',
|
||
stationCount: 2,
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-08 08:15', kg: 45.2, receivable: 1356.0 },
|
||
{ plateNo: '浙A66666F', fleetCategory: 'own' as const, stationName: '嘉兴嘉锦加氢站', time: '2026-08-08 09:30', kg: 54.8, receivable: 1644.0 },
|
||
{ plateNo: '粤B12345D', fleetCategory: 'external' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-08 10:10', kg: 350.0, receivable: 10500.0 },
|
||
{ plateNo: '粤B99881D', fleetCategory: 'external' as const, stationName: '嘉兴嘉锦加氢站', time: '2026-08-08 14:20', kg: 280.0, receivable: 8400.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-07',
|
||
stationCount: 1,
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-07 11:20', kg: 48.0, receivable: 1440.0 },
|
||
{ plateNo: '浙A33333F', fleetCategory: 'own' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-07 16:45', kg: 52.0, receivable: 1560.0 },
|
||
{ plateNo: '沪A66128D', fleetCategory: 'external' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-07 17:30', kg: 120.0, receivable: 3600.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-06',
|
||
stationCount: 2,
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, stationName: '嘉兴中石化滨海加氢站', time: '2026-08-06 09:10', kg: 42.5, receivable: 1275.0 },
|
||
{ plateNo: '川A88901', fleetCategory: 'external' as const, stationName: '成都中石化天府机场高速北站加氢站', time: '2026-08-06 13:15', kg: 210.0, receivable: 6300.0 },
|
||
{ plateNo: '川A88902', fleetCategory: 'external' as const, stationName: '成都中石化天府机场高速北站加氢站', time: '2026-08-06 15:50', kg: 180.0, receivable: 5400.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-05',
|
||
stationCount: 1,
|
||
records: [
|
||
{ plateNo: '浙A66666F', fleetCategory: 'own' as const, stationName: '桐乡中石化绿能加氢站', time: '2026-08-05 10:40', kg: 50.0, receivable: 1500.0 },
|
||
{ plateNo: '渝A66881', fleetCategory: 'external' as const, stationName: '桐乡中石化绿能加氢站', time: '2026-08-05 14:05', kg: 310.0, receivable: 9300.0 },
|
||
],
|
||
},
|
||
];
|
||
|
||
return dates.map((d) => {
|
||
const filteredRecords = d.records.filter((r) => {
|
||
if (!searchTerm) return true;
|
||
const term = searchTerm.toLowerCase();
|
||
return (
|
||
(r.plateNo && r.plateNo.toLowerCase().includes(term)) ||
|
||
r.stationName.toLowerCase().includes(term)
|
||
);
|
||
});
|
||
|
||
const dayKg = filteredRecords.reduce((sum, r) => sum + r.kg, 0);
|
||
const dayReceivable = filteredRecords.reduce((sum, r) => sum + r.receivable, 0);
|
||
const dayCost =
|
||
summaryKgT > 0
|
||
? Math.round((dayKg / (summaryKgT * 1000)) * summaryCostWan * 10000 * 100) / 100
|
||
: Math.round(dayReceivable * 0.9 * 100) / 100;
|
||
|
||
return {
|
||
...d,
|
||
records: filteredRecords,
|
||
totalKg: Math.round(dayKg * 10) / 10,
|
||
totalReceivable: Math.round(dayReceivable * 100) / 100,
|
||
totalCost: dayCost,
|
||
};
|
||
}).filter((d) => d.records.length > 0);
|
||
}, [searchTerm, summaryKgT, summaryCostWan]);
|
||
|
||
const totalKgSum = useMemo(() => {
|
||
return billData.reduce((sum, d) => sum + d.totalKg, 0);
|
||
}, [billData]);
|
||
|
||
const totalReceivableSum = useMemo(() => {
|
||
return billData.reduce((sum, d) => sum + d.totalReceivable, 0);
|
||
}, [billData]);
|
||
|
||
// 导出客户账单 Excel (.xlsx)
|
||
const handleExportExcel = () => {
|
||
const aoa: (string | number)[][] = [
|
||
['客户名称', '日期', '车牌号', '车辆归属', '加氢站', '加氢时间', '加氢量(Kg)', '应收(元)', '已收', '未收'],
|
||
];
|
||
|
||
billData.forEach((d) => {
|
||
d.records.forEach((r) => {
|
||
aoa.push([
|
||
customerName,
|
||
d.date,
|
||
r.plateNo || '无车牌(散车)',
|
||
r.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
r.stationName,
|
||
r.time,
|
||
r.kg,
|
||
r.receivable,
|
||
'敬请期待 (对接账户)',
|
||
'敬请期待 (对接账单)',
|
||
]);
|
||
});
|
||
});
|
||
|
||
downloadExcelAoa(aoa, `客户账单穿透流水_${customerName}_${year}年.xlsx`, '客户账单穿透流水');
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-modal-overlay" onClick={onClose}>
|
||
<div className="ehb-modal-card" onClick={(e) => e.stopPropagation()}>
|
||
{/* Modal 头部 */}
|
||
<div className="ehb-modal-head">
|
||
<div className="ehb-modal-head__title-group">
|
||
<button type="button" className="ehb-modal-back-btn" onClick={onClose} title="返回看板">
|
||
<ChevronLeft size={18} />
|
||
<span>返回</span>
|
||
</button>
|
||
<div>
|
||
<div className="ehb-modal-head__title">
|
||
<span>「{customerName}」客户账单明细</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-modal-head__actions">
|
||
<button type="button" className="ehb-modal-close-btn" onClick={onClose} title="关闭">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal 内容区 */}
|
||
<div className="ehb-modal-body">
|
||
{/* 列表关键字段汇总 */}
|
||
<div className="ehb-modal-meta-bar">
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">承担方</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7', fontSize: 13 }}>
|
||
{bearerLabel}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{summaryKgT > 0 ? summaryKgT.toFixed(2) : (totalKgSum / 1000).toFixed(2)}{' '}
|
||
<span style={{ fontSize: 11, fontWeight: 400 }}>T</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">成本支出</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#f59e0b' }}>
|
||
¥{summaryCostWan > 0 ? summaryCostWan.toFixed(2) : '—'}{' '}
|
||
<span style={{ fontSize: 11, fontWeight: 400 }}>万元</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">应收</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981', fontSize: 13 }}>
|
||
{summaryReceivableText}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">已收</span>
|
||
<span className="ehb-stay-tuned-tag" title="等待客户能源账户和对账单打通后获取">
|
||
敬请期待
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">未收</span>
|
||
<span className="ehb-stay-tuned-tag" title="等待客户能源账户和对账单打通后获取">
|
||
敬请期待
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜寻卡 */}
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<div className="ehb-modal-search-input">
|
||
<Search size={14} style={{ color: '#94a3b8', flexShrink: 0 }} />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索车牌号 / 加氢站..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
/>
|
||
{searchTerm && (
|
||
<button type="button" onClick={() => setSearchTerm('')} title="清空">
|
||
<X size={12} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportExcel}
|
||
title="导出 Excel 客户账单"
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
<div className="ehb-modal-hint-text">
|
||
按日展开：加氢量 · 成本支出 · 应收 · 已收 · 未收
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-h5-scroll-hint">‹ 左右滑动查看完整关键字段 ›</div>
|
||
|
||
{/* 表格：对齐客户账单汇总关键字段 */}
|
||
<div className="ehb-modal-table-wrap is-v-scroll">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ width: 140 }}>日期 / 车牌明细</th>
|
||
<th>加氢站</th>
|
||
<th style={{ textAlign: 'center' }}>承担方</th>
|
||
<th style={{ textAlign: 'right' }}>加氢量(Kg)</th>
|
||
<th style={{ textAlign: 'right' }}>成本支出(元)</th>
|
||
<th style={{ textAlign: 'right' }}>应收(元)</th>
|
||
<th style={{ textAlign: 'center' }}>已收</th>
|
||
<th style={{ textAlign: 'center' }}>未收</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{billData.map((day) => {
|
||
const isExpanded = !!expandedDates[day.date];
|
||
|
||
return (
|
||
<React.Fragment key={day.date}>
|
||
{/* Level 2: 日期层 */}
|
||
<tr
|
||
style={{ background: '#f8fafc', fontWeight: 600, cursor: 'pointer' }}
|
||
onClick={() => toggleDate(day.date)}
|
||
>
|
||
<td className="ehb-tree-cell-l1" style={{ color: '#0284c7' }}>
|
||
<div className="ehb-tree-node-title">
|
||
<span style={{ marginRight: 6 }}>{isExpanded ? '▼' : '►'}</span>
|
||
<span>📅 {day.date}</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ color: '#64748b', fontSize: 12 }}>
|
||
涉及 {day.stationCount} 个加氢站 · {day.records.length} 笔
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span
|
||
className={`ehb-bearer-tag ${custSummary?.bearer === 'cust' ? 'is-cust' : 'is-lingniu'}`}
|
||
>
|
||
{bearerLabel}
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right', color: '#0284c7' }}>
|
||
{day.totalKg.toLocaleString('zh-CN')} Kg
|
||
</td>
|
||
<td style={{ textAlign: 'right', color: '#f59e0b', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{day.totalCost.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ textAlign: 'right', color: '#10b981' }}>
|
||
¥{day.totalReceivable.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span className="ehb-stay-tuned-tag" title="等待客户能源账户和对账单打通后获取">
|
||
敬请期待
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span className="ehb-stay-tuned-tag" title="等待客户能源账户和对账单打通后获取">
|
||
敬请期待
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
|
||
{/* Level 3: 车牌加氢记录 (最小粒度) */}
|
||
{isExpanded &&
|
||
day.records.map((rec, rIdx) => {
|
||
const rowCost =
|
||
day.totalKg > 0
|
||
? Math.round((rec.kg / day.totalKg) * day.totalCost * 100) / 100
|
||
: 0;
|
||
return (
|
||
<tr key={`${day.date}_${rec.plateNo}_${rIdx}`} style={{ background: '#ffffff' }}>
|
||
<td className="ehb-tree-cell-l2" style={{ fontSize: 12 }}>
|
||
<div className="ehb-tree-node-title">
|
||
<span style={{ color: '#cbd5e1', flexShrink: 0 }}>└──</span>
|
||
<span style={{ fontWeight: 600, color: '#1e293b' }}>
|
||
{rec.plateNo || '无车牌(散车)'}
|
||
</span>
|
||
<span style={{ marginLeft: 6, fontSize: 10, color: '#94a3b8' }}>
|
||
{rec.time}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ fontSize: 12, color: '#475569' }}>{rec.stationName}</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span
|
||
className={`ehb-bearer-tag ${custSummary?.bearer === 'cust' ? 'is-cust' : 'is-lingniu'}`}
|
||
>
|
||
{bearerLabel}
|
||
</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600, color: '#0284c7', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{rec.kg.toFixed(1)} Kg
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600, color: '#f59e0b', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{rowCost.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600, color: '#059669', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{rec.receivable.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span className="ehb-stay-tuned-tag">敬请期待</span>
|
||
</td>
|
||
<td style={{ textAlign: 'center' }}>
|
||
<span className="ehb-stay-tuned-tag">敬请期待</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface StationBillDrillModalProps {
|
||
stationName: string;
|
||
province: string;
|
||
year: number;
|
||
onClose: () => void;
|
||
}
|
||
|
||
function StationBillDrillModal({ stationName, province, year, onClose }: StationBillDrillModalProps) {
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
const [expandedDates, setExpandedDates] = useState<Record<string, boolean>>({
|
||
'2026-08-08': true, // 默认展开最新一日
|
||
});
|
||
|
||
const stSummary =
|
||
MOCK_STATION_SUMMARY_LIST.find((s) => s.name === stationName) ||
|
||
MOCK_STATION_SUMMARY_LIST.find((s) => stationName.includes(s.name.slice(0, 8)) || s.name.includes(stationName.slice(0, 8)));
|
||
const summaryKgT = stSummary ? parseFloat(stSummary.kgT) : 0;
|
||
const summaryKgPct = stSummary?.kgPct ?? 0;
|
||
const summaryIncomeWan = stSummary ? parseFloat(stSummary.incomeWan) : 0;
|
||
const summaryIncomePct = stSummary?.incomePct ?? 0;
|
||
|
||
const toggleDate = (dateStr: string) => {
|
||
setExpandedDates((prev) => ({ ...prev, [dateStr]: !prev[dateStr] }));
|
||
};
|
||
|
||
// 全站累计基准总量 (Kg) 与 总氢费收入 (元) — 优先取汇总表关键字段
|
||
const totalStationKg = summaryKgT > 0 ? Math.round(summaryKgT * 1000) : 243660;
|
||
const totalStationIncome = summaryIncomeWan > 0 ? Math.round(summaryIncomeWan * 10000) : 526600;
|
||
|
||
// 根据加氢站构建【加氢站 -> 所有日期的加氢量、占比、氢费收入、收入占比】下钻明细
|
||
const stationData = useMemo(() => {
|
||
const dates = [
|
||
{
|
||
date: '2026-08-08',
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, customerName: '羚牛氢能科技(广东)有限公司', time: '2026-08-08 08:15', kg: 450.2, income: 13506.0 },
|
||
{ plateNo: '浙A66666F', fleetCategory: 'own' as const, customerName: '嘉兴市乍浦港口经营有限公司', time: '2026-08-08 09:30', kg: 540.8, income: 16224.0 },
|
||
{ plateNo: '粤B12345D', fleetCategory: 'external' as const, customerName: '广东氢动力科技服务有限公司', time: '2026-08-08 10:10', kg: 350.0, income: 10500.0 },
|
||
{ plateNo: '沪A66128D', fleetCategory: 'external' as const, customerName: '上海明纳物流有限公司', time: '2026-08-08 14:20', kg: 280.0, income: 8400.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-07',
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, customerName: '羚牛氢能科技(广东)有限公司', time: '2026-08-07 11:20', kg: 480.0, income: 14400.0 },
|
||
{ plateNo: '浙A33333F', fleetCategory: 'own' as const, customerName: '嘉兴益顺冷链物流有限公司', time: '2026-08-07 16:45', kg: 520.0, income: 15600.0 },
|
||
{ plateNo: '粤B99881D', fleetCategory: 'external' as const, customerName: '嘉兴智奇供应链管理有限公司', time: '2026-08-07 17:30', kg: 410.0, income: 12300.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-06',
|
||
records: [
|
||
{ plateNo: '浙A88888F', fleetCategory: 'own' as const, customerName: '羚牛氢能科技(广东)有限公司', time: '2026-08-06 09:10', kg: 425.0, income: 12750.0 },
|
||
{ plateNo: '川A88901', fleetCategory: 'external' as const, customerName: '四川群彬物流有限公司', time: '2026-08-06 13:15', kg: 610.0, income: 18300.0 },
|
||
{ plateNo: '川A88902', fleetCategory: 'external' as const, customerName: '四川拱照物流有限公司', time: '2026-08-06 15:50', kg: 580.0, income: 17400.0 },
|
||
],
|
||
},
|
||
{
|
||
date: '2026-08-05',
|
||
records: [
|
||
{ plateNo: '浙A66666F', fleetCategory: 'own' as const, customerName: '嘉兴市乍浦港口经营有限公司', time: '2026-08-05 10:40', kg: 500.0, income: 15000.0 },
|
||
{ plateNo: '渝A66881', fleetCategory: 'external' as const, customerName: '重庆金时源供应链有限公司', time: '2026-08-05 14:05', kg: 710.0, income: 21300.0 },
|
||
],
|
||
},
|
||
];
|
||
|
||
return dates.map((d) => {
|
||
const filteredRecords = d.records.filter((r) => {
|
||
if (!searchTerm) return true;
|
||
const term = searchTerm.toLowerCase();
|
||
return (
|
||
d.date.includes(term) ||
|
||
(r.plateNo && r.plateNo.toLowerCase().includes(term)) ||
|
||
r.customerName.toLowerCase().includes(term)
|
||
);
|
||
});
|
||
|
||
const dayKg = filteredRecords.reduce((sum, r) => sum + r.kg, 0);
|
||
const dayIncome = filteredRecords.reduce((sum, r) => sum + r.income, 0);
|
||
|
||
const dayKgPct = Math.round((dayKg / totalStationKg) * 10000) / 100;
|
||
const dayIncomePct = Math.round((dayIncome / totalStationIncome) * 10000) / 100;
|
||
|
||
return {
|
||
...d,
|
||
records: filteredRecords,
|
||
totalKg: Math.round(dayKg * 10) / 10,
|
||
totalKgPct: dayKgPct,
|
||
totalIncome: Math.round(dayIncome * 100) / 100,
|
||
totalIncomePct: dayIncomePct,
|
||
};
|
||
}).filter((d) => d.records.length > 0);
|
||
}, [searchTerm]);
|
||
|
||
const totalKgSum = useMemo(() => {
|
||
return stationData.reduce((sum, d) => sum + d.totalKg, 0);
|
||
}, [stationData]);
|
||
|
||
const totalIncomeSum = useMemo(() => {
|
||
return stationData.reduce((sum, d) => sum + d.totalIncome, 0);
|
||
}, [stationData]);
|
||
|
||
// 导出加氢站按日账单 Excel (.xlsx)
|
||
const handleExportExcel = () => {
|
||
const aoa: (string | number)[][] = [
|
||
['加氢站名称', '所属省份', '日期', '车牌号', '车辆归属', '关联客户', '加氢时间', '加氢量(Kg)', '加氢量占比', '氢费收入(元)', '收入占比'],
|
||
];
|
||
|
||
stationData.forEach((d) => {
|
||
d.records.forEach((r) => {
|
||
const rKgPct = ((r.kg / totalStationKg) * 100).toFixed(2) + '%';
|
||
const rIncomePct = ((r.income / totalStationIncome) * 100).toFixed(2) + '%';
|
||
aoa.push([
|
||
stationName,
|
||
province,
|
||
d.date,
|
||
r.plateNo || '无车牌(散车)',
|
||
r.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
r.customerName,
|
||
r.time,
|
||
r.kg,
|
||
rKgPct,
|
||
r.income,
|
||
rIncomePct,
|
||
]);
|
||
});
|
||
});
|
||
|
||
downloadExcelAoa(aoa, `加氢站按日账单穿透_${stationName}_${year}年.xlsx`, '站按日账单穿透');
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-modal-overlay" onClick={onClose}>
|
||
<div className="ehb-modal-card" onClick={(e) => e.stopPropagation()}>
|
||
{/* Modal 头部 */}
|
||
<div className="ehb-modal-head">
|
||
<div className="ehb-modal-head__title-group">
|
||
<button type="button" className="ehb-modal-back-btn" onClick={onClose} title="返回看板">
|
||
<ChevronLeft size={18} />
|
||
<span>返回</span>
|
||
</button>
|
||
<div>
|
||
<div className="ehb-modal-head__title">
|
||
<span>「{stationName}」加氢汇总明细</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-modal-head__actions">
|
||
<button type="button" className="ehb-modal-close-btn" onClick={onClose} title="关闭">
|
||
<X size={18} />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal 内容区 */}
|
||
<div className="ehb-modal-body">
|
||
{/* 列表关键字段：加氢量 / 占比 / 氢费收入 / 收入占比 */}
|
||
<div className="ehb-modal-meta-bar">
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">所属省份</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7', fontSize: 13 }}>
|
||
{province}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">加氢量</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{(totalStationKg / 1000).toFixed(2)} <span style={{ fontSize: 11, fontWeight: 400 }}>T</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">占比</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#0284c7' }}>
|
||
{summaryKgPct.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">氢费收入</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981' }}>
|
||
¥{(totalStationIncome / 10000).toFixed(2)} <span style={{ fontSize: 11, fontWeight: 400 }}>万元</span>
|
||
</span>
|
||
</div>
|
||
<div className="ehb-modal-meta-item">
|
||
<span className="ehb-modal-meta-label">收入占比</span>
|
||
<span className="ehb-modal-meta-val" style={{ color: '#10b981' }}>
|
||
{summaryIncomePct.toFixed(1)}%
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜寻卡 */}
|
||
<div className="ehb-modal-filter-row">
|
||
<div className="ehb-modal-filter-group">
|
||
<div className="ehb-modal-search-input">
|
||
<Search size={14} style={{ color: '#94a3b8', flexShrink: 0 }} />
|
||
<input
|
||
type="text"
|
||
placeholder="搜索日期 / 车牌号 / 客户..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
/>
|
||
{searchTerm && (
|
||
<button type="button" onClick={() => setSearchTerm('')} title="清空">
|
||
<X size={12} />
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportExcel}
|
||
title="导出 Excel"
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
<div className="ehb-modal-hint-text">
|
||
按日展开关键字段：加氢量 · 占比 · 氢费收入 · 收入占比
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-h5-scroll-hint">‹ 左右滑动查看完整数据与状态 ›</div>
|
||
|
||
{/* 表格：对齐加氢站汇总关键字段（按日） */}
|
||
<div className="ehb-modal-table-wrap is-v-scroll">
|
||
<table className="ehb-modal-table">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ width: 140 }}>日期 / 车牌明细</th>
|
||
<th>关联客户 / 车辆归属</th>
|
||
<th>加氢时间</th>
|
||
<th style={{ textAlign: 'right' }}>加氢量(Kg)</th>
|
||
<th style={{ textAlign: 'right', width: 120 }}>加氢量占比</th>
|
||
<th style={{ textAlign: 'right' }}>氢费收入(元)</th>
|
||
<th style={{ textAlign: 'right', width: 120 }}>收入占比</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{stationData.map((day) => {
|
||
const isExpanded = !!expandedDates[day.date];
|
||
|
||
return (
|
||
<React.Fragment key={day.date}>
|
||
{/* Level 1: 所有日期的加氢量、占比、氢费收入、收入占比 */}
|
||
<tr
|
||
style={{ background: '#f8fafc', fontWeight: 600, cursor: 'pointer' }}
|
||
onClick={() => toggleDate(day.date)}
|
||
>
|
||
<td className="ehb-tree-cell-l1" style={{ color: '#0284c7' }}>
|
||
<div className="ehb-tree-node-title">
|
||
<span style={{ marginRight: 6 }}>{isExpanded ? '▼' : '►'}</span>
|
||
<span>📅 {day.date}</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ color: '#64748b', fontSize: 12 }}>
|
||
{day.records.length} 笔车辆加氢发生
|
||
</td>
|
||
<td style={{ color: '#94a3b8', fontSize: 12 }}>当天汇总</td>
|
||
<td style={{ textAlign: 'right', color: '#0284c7' }}>
|
||
{day.totalKg.toLocaleString('zh-CN')} Kg
|
||
</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<div className="ehb-mini-bar-track">
|
||
<div
|
||
className="ehb-mini-bar-fill is-blue"
|
||
style={{ width: `${Math.min(100, day.totalKgPct * 10)}%` }}
|
||
/>
|
||
</div>
|
||
<span className="ehb-ratio-text">{day.totalKgPct.toFixed(2)}%</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ textAlign: 'right', color: '#10b981' }}>
|
||
¥{day.totalIncome.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td>
|
||
<div className="ehb-ratio-flex">
|
||
<div className="ehb-mini-bar-track">
|
||
<div
|
||
className="ehb-mini-bar-fill is-green"
|
||
style={{ width: `${Math.min(100, day.totalIncomePct * 10)}%` }}
|
||
/>
|
||
</div>
|
||
<span className="ehb-ratio-text">{day.totalIncomePct.toFixed(2)}%</span>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
{/* Level 2: 车牌/客户加氢记录 (最小粒度) */}
|
||
{isExpanded &&
|
||
day.records.map((rec, rIdx) => {
|
||
const rKgPct = Math.round((rec.kg / totalStationKg) * 10000) / 100;
|
||
const rIncomePct = Math.round((rec.income / totalStationIncome) * 10000) / 100;
|
||
|
||
return (
|
||
<tr key={`${day.date}_${rec.plateNo}_${rIdx}`} style={{ background: '#ffffff' }}>
|
||
<td className="ehb-tree-cell-l2" style={{ fontSize: 12 }}>
|
||
<div className="ehb-tree-node-title">
|
||
<span style={{ color: '#cbd5e1', flexShrink: 0 }}>└──</span>
|
||
<span style={{ fontWeight: 600, color: '#1e293b' }}>
|
||
{rec.plateNo || '无车牌(散车)'}
|
||
</span>
|
||
<span
|
||
className={`ehb-tag ${rec.fleetCategory === 'own' ? 'is-own' : 'is-ext'}`}
|
||
style={{ marginLeft: 6, fontSize: 10 }}
|
||
>
|
||
{rec.fleetCategory === 'own' ? '羚牛' : '外部'}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td style={{ fontSize: 12, color: '#475569' }}>{rec.customerName}</td>
|
||
<td style={{ fontSize: 12, color: '#64748b', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{rec.time}
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600, color: '#0284c7', fontFamily: 'var(--bi-font-mono)' }}>
|
||
{rec.kg.toFixed(1)} Kg
|
||
</td>
|
||
<td>
|
||
<span style={{ fontSize: 11, color: '#64748b' }}>{rKgPct.toFixed(2)}%</span>
|
||
</td>
|
||
<td style={{ textAlign: 'right', fontSize: 12, fontWeight: 600, color: '#059669', fontFamily: 'var(--bi-font-mono)' }}>
|
||
¥{rec.income.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td>
|
||
<span style={{ fontSize: 11, color: '#64748b' }}>{rIncomePct.toFixed(2)}%</span>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function StationMonthTable({
|
||
rows,
|
||
activeId,
|
||
onOpen,
|
||
}: {
|
||
rows: ReturnType<typeof stationMonthAgg>;
|
||
activeId: string | null;
|
||
onOpen: (id: string, label: string) => void;
|
||
}) {
|
||
if (!rows.length) return <div className="ehb-empty">本筛选下暂无站月发生额</div>;
|
||
return (
|
||
<div className="ehb-table-wrap">
|
||
<table className="ehb-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>加氢站</th>
|
||
<th>月份</th>
|
||
<th>发生额</th>
|
||
<th>加氢量</th>
|
||
<th>未核金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r, i) => (
|
||
<tr
|
||
key={`${r.stationId}-${r.month}`}
|
||
className={`is-clickable${activeId === r.stationId ? ' is-active' : ''}`}
|
||
onClick={() => onOpen(r.stationId, r.stationName)}
|
||
>
|
||
<td className="ehb-mono ehb-idx">{i + 1}</td>
|
||
<td>{r.stationName}</td>
|
||
<td className="ehb-mono">{r.month}</td>
|
||
<td className="ehb-mono">{formatYuan(r.amount)}</td>
|
||
<td className="ehb-mono">{formatKg(r.quantityKg)}</td>
|
||
<td className="ehb-mono">{formatYuan(r.unverifiedAmount)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function CustomerAttrTable({
|
||
rows,
|
||
activeId,
|
||
onOpen,
|
||
}: {
|
||
rows: ReturnType<typeof customerAttrAgg>;
|
||
activeId: string | null;
|
||
onOpen: (id: string, label: string) => void;
|
||
}) {
|
||
if (!rows.length) return <div className="ehb-empty">本筛选下暂无客户归属</div>;
|
||
return (
|
||
<div className="ehb-table-wrap">
|
||
<table className="ehb-table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>客户</th>
|
||
<th>承担方</th>
|
||
<th>加氢量</th>
|
||
<th>我司成本</th>
|
||
<th>未核</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r, i) => (
|
||
<tr
|
||
key={r.customerId}
|
||
className={`is-clickable${activeId === r.customerId ? ' is-active' : ''}`}
|
||
onClick={() => onOpen(r.customerId, r.customerName)}
|
||
>
|
||
<td className="ehb-mono ehb-idx">{i + 1}</td>
|
||
<td>{r.customerName}</td>
|
||
<td>{r.borneLabel}</td>
|
||
<td className="ehb-mono">{formatKg(r.quantityKg)}</td>
|
||
<td className="ehb-mono">{formatYuan(r.companyCost)}</td>
|
||
<td className="ehb-mono">{formatYuan(r.unverifiedAmount)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function OrderTable({ rows }: { rows: H2OrderRow[] }) {
|
||
if (!rows.length) {
|
||
return <div className="ehb-empty">本筛选下暂无我司成本明细</div>;
|
||
}
|
||
return (
|
||
<div className="ehb-table-wrap">
|
||
<table className="ehb-table">
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>加氢站</th>
|
||
<th>车牌</th>
|
||
<th>客户</th>
|
||
<th>加氢量</th>
|
||
<th>金额</th>
|
||
<th>成本维度</th>
|
||
<th>核对</th>
|
||
<th>来源</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{rows.map((r) => (
|
||
<tr key={r.id}>
|
||
<td className="ehb-mono">{r.occurredAt}</td>
|
||
<td>{r.stationName}</td>
|
||
<td className="ehb-mono">{r.plateNo}</td>
|
||
<td>{r.customerName}</td>
|
||
<td className="ehb-mono">{formatKg(r.quantityKg)}</td>
|
||
<td className="ehb-mono">{formatYuan(r.amount)}</td>
|
||
<td>{costDimLabel(r)}</td>
|
||
<td>
|
||
<span
|
||
className={`ehb-badge ${r.verifyStatus === 'verified' ? 'is-ok' : 'is-warn'}`}
|
||
>
|
||
{r.verifyStatus === 'verified' ? '已核对' : '未核对'}
|
||
</span>
|
||
</td>
|
||
<td>{SOURCE_LABEL[r.source]}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface BiCustomDatePickerProps {
|
||
label: string;
|
||
value: string; // YYYY-MM-DD | YYYY-MM | YYYY
|
||
onChange: (dateStr: string) => void;
|
||
}
|
||
|
||
function BiCustomDatePicker({ label, value, onChange }: BiCustomDatePickerProps) {
|
||
const [isOpen, setIsOpen] = useState(false);
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 面板视图模式：'day' | 'month' | 'year'
|
||
const [pickerMode, setPickerMode] = useState<'day' | 'month' | 'year'>('day');
|
||
|
||
const parsedDate = useMemo(() => {
|
||
const parts = value.split('-');
|
||
const year = parseInt(parts[0], 10) || 2026;
|
||
const month = parseInt(parts[1], 10) || 8;
|
||
const day = parseInt(parts[2], 10) || 1;
|
||
return { year, month, day };
|
||
}, [value]);
|
||
|
||
const [viewYear, setViewYear] = useState(parsedDate.year);
|
||
const [viewMonth, setViewMonth] = useState(parsedDate.month);
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
setViewYear(parsedDate.year);
|
||
setViewMonth(parsedDate.month);
|
||
const parts = value.split('-');
|
||
if (parts.length === 1 && value.length === 4) {
|
||
setPickerMode('year');
|
||
} else if (parts.length === 2) {
|
||
setPickerMode('month');
|
||
} else {
|
||
setPickerMode('day');
|
||
}
|
||
}
|
||
}, [isOpen, value, parsedDate]);
|
||
|
||
useEffect(() => {
|
||
function handleClickOutside(e: MouseEvent) {
|
||
if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
|
||
setIsOpen(false);
|
||
}
|
||
}
|
||
if (isOpen) {
|
||
document.addEventListener('mousedown', handleClickOutside);
|
||
}
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside);
|
||
};
|
||
}, [isOpen]);
|
||
|
||
const yearsList = [2026, 2025, 2024, 2023, 2022, 2021, 2020];
|
||
const monthsList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||
|
||
const handleSelectYear = (y: number, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
setViewYear(y);
|
||
if (pickerMode === 'year') {
|
||
onChange(`${y}`);
|
||
setIsOpen(false);
|
||
} else {
|
||
setPickerMode(pickerMode === 'day' ? 'month' : 'day');
|
||
}
|
||
};
|
||
|
||
const handleSelectMonth = (m: number, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
setViewMonth(m);
|
||
const mm = m < 10 ? `0${m}` : `${m}`;
|
||
if (pickerMode === 'month') {
|
||
onChange(`${viewYear}-${mm}`);
|
||
setIsOpen(false);
|
||
} else {
|
||
setPickerMode('day');
|
||
}
|
||
};
|
||
|
||
const handleSelectDay = (d: number, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
const mm = viewMonth < 10 ? `0${viewMonth}` : `${viewMonth}`;
|
||
const dd = d < 10 ? `0${d}` : `${d}`;
|
||
onChange(`${viewYear}-${mm}-${dd}`);
|
||
setIsOpen(false);
|
||
};
|
||
|
||
const handlePrev = (e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
if (pickerMode === 'day') {
|
||
if (viewMonth === 1) {
|
||
setViewYear((prev) => prev - 1);
|
||
setViewMonth(12);
|
||
} else {
|
||
setViewMonth((prev) => prev - 1);
|
||
}
|
||
} else {
|
||
setViewYear((prev) => prev - 1);
|
||
}
|
||
};
|
||
|
||
const handleNext = (e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
if (pickerMode === 'day') {
|
||
if (viewMonth === 12) {
|
||
setViewYear((prev) => prev + 1);
|
||
setViewMonth(1);
|
||
} else {
|
||
setViewMonth((prev) => prev + 1);
|
||
}
|
||
} else {
|
||
setViewYear((prev) => prev + 1);
|
||
}
|
||
};
|
||
|
||
const daysInMonth = new Date(viewYear, viewMonth, 0).getDate();
|
||
const firstDayWeek = new Date(viewYear, viewMonth - 1, 1).getDay();
|
||
const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||
const emptyPrefixSlots = Array.from({ length: firstDayWeek }, (_, i) => i);
|
||
|
||
return (
|
||
<div className="ehb-daily-date-picker-wrapper" ref={containerRef}>
|
||
<div
|
||
className={`ehb-daily-date-picker ${isOpen ? 'is-active' : ''}`}
|
||
onClick={() => setIsOpen(!isOpen)}
|
||
>
|
||
<span className="ehb-date-label">{label}</span>
|
||
<span className="ehb-date-val">{value}</span>
|
||
<Calendar size={14} style={{ color: '#94a3b8' }} />
|
||
</div>
|
||
|
||
{isOpen && (
|
||
<div className="ehb-date-popover">
|
||
{/* 1. 粒度模式选择器: 按日 | 按月 | 按年 */}
|
||
<div className="ehb-dp-mode-bar">
|
||
<button
|
||
type="button"
|
||
className={`ehb-dp-mode-btn ${pickerMode === 'day' ? 'is-active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPickerMode('day');
|
||
}}
|
||
>
|
||
按日
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-dp-mode-btn ${pickerMode === 'month' ? 'is-active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPickerMode('month');
|
||
}}
|
||
>
|
||
按月
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-dp-mode-btn ${pickerMode === 'year' ? 'is-active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPickerMode('year');
|
||
}}
|
||
>
|
||
按年
|
||
</button>
|
||
</div>
|
||
|
||
{/* 2. 标头快速切年月 */}
|
||
<div className="ehb-dp-header">
|
||
<button type="button" className="ehb-dp-nav-btn" onClick={handlePrev}>
|
||
<ChevronLeft size={14} />
|
||
</button>
|
||
<div className="ehb-dp-title-group">
|
||
<button
|
||
type="button"
|
||
className={`ehb-dp-title-btn ${pickerMode === 'year' ? 'is-active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPickerMode('year');
|
||
}}
|
||
>
|
||
{viewYear} 年
|
||
</button>
|
||
{pickerMode === 'day' && (
|
||
<button
|
||
type="button"
|
||
className={`ehb-dp-title-btn ${pickerMode === 'month' ? 'is-active' : ''}`}
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
setPickerMode('month');
|
||
}}
|
||
>
|
||
{viewMonth} 月
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button type="button" className="ehb-dp-nav-btn" onClick={handleNext}>
|
||
<ChevronRight size={14} />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 3. 日视图 */}
|
||
{pickerMode === 'day' && (
|
||
<>
|
||
<div className="ehb-dp-week-row">
|
||
<span>日</span>
|
||
<span>一</span>
|
||
<span>二</span>
|
||
<span>三</span>
|
||
<span>四</span>
|
||
<span>五</span>
|
||
<span>六</span>
|
||
</div>
|
||
|
||
<div className="ehb-dp-grid">
|
||
{emptyPrefixSlots.map((s) => (
|
||
<span key={`empty-${s}`} className="ehb-dp-day is-empty" />
|
||
))}
|
||
{daysArray.map((d) => {
|
||
const mm = viewMonth < 10 ? `0${viewMonth}` : `${viewMonth}`;
|
||
const dd = d < 10 ? `0${d}` : `${d}`;
|
||
const isSelected = value === `${viewYear}-${mm}-${dd}`;
|
||
|
||
return (
|
||
<button
|
||
key={d}
|
||
type="button"
|
||
className={`ehb-dp-day ${isSelected ? 'is-selected' : ''}`}
|
||
onClick={(e) => handleSelectDay(d, e)}
|
||
>
|
||
{d}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* 4. 月视图 */}
|
||
{pickerMode === 'month' && (
|
||
<div className="ehb-dp-month-grid">
|
||
{monthsList.map((m) => {
|
||
const mm = m < 10 ? `0${m}` : `${m}`;
|
||
const isSelected = value === `${viewYear}-${mm}` || (value.split('-').length === 3 && parsedDate.year === viewYear && parsedDate.month === m);
|
||
|
||
return (
|
||
<button
|
||
key={m}
|
||
type="button"
|
||
className={`ehb-dp-month-item ${isSelected ? 'is-selected' : ''}`}
|
||
onClick={(e) => handleSelectMonth(m, e)}
|
||
>
|
||
{m} 月
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* 5. 年视图 */}
|
||
{pickerMode === 'year' && (
|
||
<div className="ehb-dp-year-grid">
|
||
{yearsList.map((y) => {
|
||
const isSelected = value === `${y}` || parsedDate.year === y;
|
||
|
||
return (
|
||
<button
|
||
key={y}
|
||
type="button"
|
||
className={`ehb-dp-year-item ${isSelected ? 'is-selected' : ''}`}
|
||
onClick={(e) => handleSelectYear(y, e)}
|
||
>
|
||
{y} 年
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
interface HostDailyViewProps {
|
||
updatedAt?: string;
|
||
onRefresh?: () => void;
|
||
startDate: string;
|
||
endDate: string;
|
||
onStartDateChange: (val: string) => void;
|
||
onEndDateChange: (val: string) => void;
|
||
}
|
||
|
||
function HostDailyView({
|
||
updatedAt,
|
||
onRefresh,
|
||
startDate,
|
||
endDate,
|
||
onStartDateChange,
|
||
onEndDateChange,
|
||
}: HostDailyViewProps) {
|
||
const [rangePreset, setRangePreset] = useState<'week' | 'month' | '15days' | 'custom'>('15days');
|
||
const [fleetType, setFleetType] = useState<FleetCategoryFilter>('all');
|
||
|
||
// 上方时间预设连动 KPI 卡片标题
|
||
const kpiRangeTitle = useMemo(() => {
|
||
if (rangePreset === 'week') return '本周加氢量';
|
||
if (rangePreset === 'month') return '本月加氢量';
|
||
if (rangePreset === '15days') return '近 15 天加氢量';
|
||
return '自定义区间加氢量';
|
||
}, [rangePreset]);
|
||
|
||
const handlePresetChange = (preset: 'week' | 'month' | '15days' | 'custom') => {
|
||
setRangePreset(preset);
|
||
if (preset === 'week') {
|
||
onStartDateChange('2026-08-03');
|
||
onEndDateChange('2026-08-08');
|
||
} else if (preset === 'month') {
|
||
onStartDateChange('2026-08-01');
|
||
onEndDateChange('2026-08-08');
|
||
} else if (preset === '15days') {
|
||
onStartDateChange('2026-07-25');
|
||
onEndDateChange('2026-08-08');
|
||
}
|
||
};
|
||
|
||
// 日期归一化转换（兼容手选 年 YYYY、月 YYYY-MM、日 YYYY-MM-DD）
|
||
const normalizeDateStr = (dateStr: string, isEnd: boolean) => {
|
||
if (!dateStr) return isEnd ? '9999-12-31' : '0000-01-01';
|
||
const parts = dateStr.split('-');
|
||
if (parts.length === 1) {
|
||
return isEnd ? `${parts[0]}-12-31` : `${parts[0]}-01-01`;
|
||
}
|
||
if (parts.length === 2) {
|
||
const y = parseInt(parts[0], 10);
|
||
const m = parseInt(parts[1], 10);
|
||
if (isEnd) {
|
||
const lastDay = new Date(y, m, 0).getDate();
|
||
const dd = lastDay < 10 ? `0${lastDay}` : `${lastDay}`;
|
||
return `${parts[0]}-${parts[1]}-${dd}`;
|
||
}
|
||
return `${parts[0]}-${parts[1]}-01`;
|
||
}
|
||
return dateStr;
|
||
};
|
||
|
||
const normStart = useMemo(() => normalizeDateStr(startDate, false), [startDate]);
|
||
const normEnd = useMemo(() => normalizeDateStr(endDate, true), [endDate]);
|
||
|
||
// 1. 根据 startDate & endDate 动态生成或提取指定日期范围内的全量每日加氢数据列表
|
||
const dateFilteredList = useMemo(() => {
|
||
return getDailyDataForRange(normStart, normEnd);
|
||
}, [normStart, normEnd]);
|
||
|
||
// 2. 根据 fleetType 过滤出对应车辆归属下的加氢列表 ('all' 时包含内部与外部合并显示)
|
||
const filteredDailyList = useMemo(() => {
|
||
return filterDailyDataByFleet(dateFilteredList, fleetType);
|
||
}, [dateFilteredList, fleetType]);
|
||
|
||
// 2. 动态计算关联的 KPI 及柱图统计数据
|
||
const dailyKpis = useMemo(() => {
|
||
return calculateDailyKpis(filteredDailyList, fleetType);
|
||
}, [filteredDailyList, fleetType]);
|
||
|
||
// 深层折叠/展开状态
|
||
const [expandedDate, setExpandedDate] = useState<string | null>('2026-08-08'); // 默认展开最新一天
|
||
const [expandedStations, setExpandedStations] = useState<Record<string, boolean>>({
|
||
'2026-08-08_st-jx': true, // 默认展开嘉兴站，演示效果
|
||
});
|
||
const [expandedCustomers, setExpandedCustomers] = useState<Record<string, boolean>>({
|
||
'2026-08-08_st-jx_c-ln': true, // 默认展开羚牛客户，直观展示车辆与数据来源
|
||
});
|
||
|
||
// 点击柱状图后的高亮锚点状态
|
||
const [highlightedDate, setHighlightedDate] = useState<string | null>(null);
|
||
|
||
// 保证当前选中的展开日期始终在当前过滤数据集中
|
||
useEffect(() => {
|
||
if (filteredDailyList.length > 0 && (!expandedDate || !filteredDailyList.some((d) => d.date === expandedDate))) {
|
||
setExpandedDate(filteredDailyList[0].date);
|
||
}
|
||
}, [filteredDailyList, expandedDate]);
|
||
|
||
const maxQty = useMemo(() => {
|
||
if (!filteredDailyList.length) return 4000;
|
||
return Math.max(...filteredDailyList.map((d) => d.quantityKg), 3000);
|
||
}, [filteredDailyList]);
|
||
|
||
const totalSum = useMemo(() => {
|
||
const sum = filteredDailyList.reduce((acc, item) => acc + item.quantityKg, 0);
|
||
return sum.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
||
}, [filteredDailyList]);
|
||
|
||
/** 点击柱状图上的柱子：展开该日、锚点平滑滚动并高亮 */
|
||
const handleBarClick = (date: string) => {
|
||
setExpandedDate(date);
|
||
setHighlightedDate(date);
|
||
|
||
setTimeout(() => {
|
||
const el = document.getElementById(`daily-row-${date}`);
|
||
if (el) {
|
||
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||
}
|
||
}, 60);
|
||
|
||
setTimeout(() => {
|
||
setHighlightedDate((prev) => (prev === date ? null : prev));
|
||
}, 2000);
|
||
};
|
||
|
||
const toggleStation = (dateKey: string, stationId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
const key = `${dateKey}_${stationId}`;
|
||
setExpandedStations((prev) => ({ ...prev, [key]: !prev[key] }));
|
||
};
|
||
|
||
const toggleCustomer = (dateKey: string, stationId: string, customerId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
const key = `${dateKey}_${stationId}_${customerId}`;
|
||
setExpandedCustomers((prev) => ({ ...prev, [key]: !prev[key] }));
|
||
};
|
||
|
||
/** 导出按日加氢数据明细为 Excel (.xlsx) */
|
||
const handleExportExcel = () => {
|
||
const aoa: (string | number)[][] = [
|
||
['日期', '加氢站名称', '加氢站类型', '客户名称', '客户属性', '加氢时间', '车牌号', '车辆归属', '数据来源', '核对状态', '单价(元/Kg)', '加氢量(Kg)', '加氢金额(元)', '预充值余额'],
|
||
];
|
||
|
||
filteredDailyList.forEach((d) => {
|
||
d.stations.forEach((st) => {
|
||
const stationPrecharge = st.prechargeBalance ?? (st.stationId.includes('jx') ? 128500 : st.stationId.includes('tx') ? 86200 : 45000);
|
||
st.customers?.forEach((cust) => {
|
||
const isInternalCust = cust.customerCategory === 'internal' || cust.customerId === 'c-ln';
|
||
cust.vehicles?.forEach((vh) => {
|
||
aoa.push([
|
||
d.date,
|
||
st.stationName,
|
||
STATION_TYPE_LABEL[st.stationType] || st.stationType,
|
||
cust.customerName,
|
||
isInternalCust ? '内部客户' : '外部客户',
|
||
vh.time,
|
||
vh.plateNo || '无车牌(散车)',
|
||
vh.fleetCategory === 'own' ? '羚牛车辆' : '外部车辆',
|
||
SOURCE_TYPE_LABEL[vh.source] || vh.source,
|
||
vh.fleetCategory === 'own' ? (DAILY_VERIFY_LABEL[vh.verifyStatus || 'unverified'] || '未核对') : '-',
|
||
vh.unitPrice,
|
||
vh.quantityKg,
|
||
vh.amountYuan,
|
||
`¥${stationPrecharge.toLocaleString('zh-CN', { minimumFractionDigits: 2 })} (对接站点管理)`,
|
||
]);
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
const fileDateStr = `${startDate.replace(/[/]/g, '')}-${endDate.replace(/[/]/g, '')}`;
|
||
const fleetName = fleetType === 'all' ? '全部车辆' : fleetType === 'own' ? '羚牛车辆' : '外部车辆';
|
||
downloadExcelAoa(aoa, `每日加氢数据明细_${fleetName}_${fileDateStr}.xlsx`, '每日加氢明细');
|
||
};
|
||
|
||
return (
|
||
<div className="ehb-daily-container">
|
||
{/* 1. 顶栏时间/范围筛选器 */}
|
||
<section className="ehb-daily-filter-card">
|
||
<div className="ehb-daily-filter-row">
|
||
<div className="ehb-daily-filter-group">
|
||
<div className="ehb-pill-tabs">
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${rangePreset === 'week' ? 'is-active' : ''}`}
|
||
onClick={() => handlePresetChange('week')}
|
||
>
|
||
本周
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${rangePreset === 'month' ? 'is-active' : ''}`}
|
||
onClick={() => handlePresetChange('month')}
|
||
>
|
||
本月
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${rangePreset === '15days' ? 'is-active' : ''}`}
|
||
onClick={() => handlePresetChange('15days')}
|
||
>
|
||
近 15 天
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-pill-btn ${rangePreset === 'custom' ? 'is-active' : ''}`}
|
||
onClick={() => handlePresetChange('custom')}
|
||
>
|
||
自定义
|
||
</button>
|
||
</div>
|
||
|
||
<BiCustomDatePicker
|
||
label="开始日期"
|
||
value={startDate}
|
||
onChange={(val) => {
|
||
onStartDateChange(val);
|
||
setRangePreset('custom');
|
||
}}
|
||
/>
|
||
<BiCustomDatePicker
|
||
label="结束日期"
|
||
value={endDate}
|
||
onChange={(val) => {
|
||
onEndDateChange(val);
|
||
setRangePreset('custom');
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="ehb-daily-filter-group">
|
||
<div className="ehb-fleet-segmented">
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetType === 'all' ? 'is-active' : ''}`}
|
||
onClick={() => setFleetType('all')}
|
||
>
|
||
<Truck size={14} />
|
||
全部车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetType === 'own' ? 'is-active' : ''}`}
|
||
onClick={() => setFleetType('own')}
|
||
>
|
||
<Truck size={14} />
|
||
仅羚牛车辆
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className={`ehb-fleet-btn ${fleetType === 'external' ? 'is-active' : ''}`}
|
||
onClick={() => setFleetType('external')}
|
||
>
|
||
<Truck size={14} />
|
||
仅外部车辆
|
||
</button>
|
||
</div>
|
||
|
||
{updatedAt && (
|
||
<span className="ehb-chrome__clock" style={{ fontSize: 12, color: '#64748b' }}>
|
||
{updatedAt}
|
||
</span>
|
||
)}
|
||
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--ghost"
|
||
onClick={onRefresh}
|
||
title="数据刷新"
|
||
>
|
||
<RefreshCw size={14} aria-hidden />
|
||
刷新
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 2. 4卡 Bento KPI */}
|
||
<section className="ehb-daily-kpi-grid">
|
||
<div className="ehb-daily-kpi-card">
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">{kpiRangeTitle}</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">{dailyKpis.totalQuantityKg.toLocaleString('zh-CN')}</span>
|
||
<span className="ehb-kpi-dual__unit">Kg</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">{dailyKpis.dateRange}</div>
|
||
</div>
|
||
|
||
<div className="ehb-daily-kpi-card">
|
||
<div className="ehb-daily-kpi-head">
|
||
<span className="ehb-daily-kpi-title">车辆结构</span>
|
||
<span className="ehb-kpi-dual__badge is-green">
|
||
<Truck size={14} />
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-val">
|
||
<span className="ehb-kpi-dual__num" style={{ fontSize: fleetType === 'all' ? 18 : 24 }}>
|
||
{dailyKpis.fleetTypeLabel}
|
||
</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">{dailyKpis.fleetSubLabel}</div>
|
||
</div>
|
||
|
||
<div className="ehb-daily-kpi-card">
|
||
<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">{dailyKpis.activeDays}</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">日均 {dailyKpis.dailyAvgKg}</div>
|
||
</div>
|
||
|
||
<div className="ehb-daily-kpi-card">
|
||
<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">{dailyKpis.stationCount}</span>
|
||
<span className="ehb-kpi-dual__unit">站</span>
|
||
</div>
|
||
<div className="ehb-daily-kpi-sub">按明细站点去重</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 3. 每日加氢量堆积柱状图（分别显示内部客户与外部客户加氢量，点击柱子下锚定位） */}
|
||
<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 ehb-hide-h5">（点击柱体下锚定位到对应日期明细）</span>
|
||
<span className="ehb-title-sub ehb-show-h5">（点击柱体定位）</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>
|
||
<span className="ehb-legend-item">
|
||
<span className="ehb-legend-dot is-ext" />
|
||
外部客户
|
||
</span>
|
||
</div>
|
||
<span className="ehb-daily-chart-meta">时间单位：日 · 单位 Kg</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-daily-summary-pills">
|
||
<div className="ehb-daily-pill-item">
|
||
<span>峰值日</span>
|
||
<strong>{dailyKpis.peakDayLabel}</strong>
|
||
</div>
|
||
<div className="ehb-daily-pill-item">
|
||
<span>低谷日</span>
|
||
<strong>{dailyKpis.troughDayLabel}</strong>
|
||
</div>
|
||
<div className="ehb-daily-pill-item">
|
||
<span>零数日</span>
|
||
<strong>{dailyKpis.zeroDaysCount} 天</strong>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="ehb-h5-scroll-hint">‹ 左右滑动查看每日加氢趋势 ›</div>
|
||
|
||
<div className="ehb-daily-bar-container">
|
||
<div
|
||
className="ehb-daily-avg-line"
|
||
style={{
|
||
bottom: `${maxQty > 0 ? Math.min(92, Math.round((dailyKpis.dailyAvgKgNum / maxQty) * 100)) : 50}%`,
|
||
}}
|
||
>
|
||
<span className="ehb-daily-avg-label">均值 {dailyKpis.dailyAvgKg}</span>
|
||
</div>
|
||
|
||
{[...filteredDailyList].reverse().map((item) => {
|
||
// 计算当天内部客户加氢量与外部客户加氢量
|
||
let dayOwnKg = 0;
|
||
let dayExtKg = 0;
|
||
item.stations.forEach((st) => {
|
||
st.customers.forEach((cust) => {
|
||
cust.vehicles.forEach((vh) => {
|
||
if (vh.fleetCategory === 'own') {
|
||
dayOwnKg += vh.quantityKg;
|
||
} else {
|
||
dayExtKg += vh.quantityKg;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
dayOwnKg = Math.round(dayOwnKg * 10) / 10;
|
||
dayExtKg = Math.round(dayExtKg * 10) / 10;
|
||
|
||
const totalKg = item.quantityKg > 0 ? item.quantityKg : 1;
|
||
const pct = Math.min(100, Math.round((item.quantityKg / maxQty) * 100));
|
||
const ownRatio = Math.round((dayOwnKg / totalKg) * 100);
|
||
const extRatio = Math.max(0, 100 - ownRatio);
|
||
|
||
const isBarActive = expandedDate === item.date;
|
||
|
||
const tooltipText = `${item.date} 加氢总量 ${Math.round(item.quantityKg).toLocaleString('zh-CN')} Kg\n├─ 内部客户: ${Math.round(dayOwnKg).toLocaleString('zh-CN')} Kg (${ownRatio}%)\n└─ 外部客户: ${Math.round(dayExtKg).toLocaleString('zh-CN')} Kg (${extRatio}%)\n(点击下锚定位到该日明细)`;
|
||
|
||
return (
|
||
<div
|
||
key={item.date}
|
||
className="ehb-daily-bar-col"
|
||
title={tooltipText}
|
||
onClick={() => handleBarClick(item.date)}
|
||
>
|
||
<div
|
||
className="ehb-daily-bar-val"
|
||
style={{ color: isBarActive ? '#0284c7' : undefined, fontWeight: isBarActive ? 700 : undefined }}
|
||
>
|
||
{Math.round(item.quantityKg)}
|
||
</div>
|
||
|
||
{/* 堆积柱体：上部外部客户，下部内部客户 */}
|
||
<div
|
||
className={`ehb-daily-bar-fill is-stacked ${isBarActive ? 'is-active' : ''}`}
|
||
style={{
|
||
height: `${pct}%`,
|
||
}}
|
||
>
|
||
{dayExtKg > 0 && (
|
||
<div
|
||
className="ehb-bar-segment is-ext"
|
||
style={{ height: `${extRatio}%` }}
|
||
title={`外部客户: ${Math.round(dayExtKg)} Kg (${extRatio}%)`}
|
||
/>
|
||
)}
|
||
{dayOwnKg > 0 && (
|
||
<div
|
||
className="ehb-bar-segment is-own"
|
||
style={{ height: `${ownRatio}%` }}
|
||
title={`内部客户: ${Math.round(dayOwnKg)} Kg (${ownRatio}%)`}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<div
|
||
className="ehb-daily-bar-label"
|
||
style={{ color: isBarActive ? '#0284c7' : undefined, fontWeight: isBarActive ? 700 : undefined }}
|
||
>
|
||
{item.shortDate}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
|
||
{/* 4. 每日数据明细多层钻取表格 */}
|
||
<section className="ehb-daily-table-card">
|
||
<div className="ehb-daily-table-head">
|
||
<div className="ehb-daily-table-title">
|
||
<span>每日加氢数据明细</span>
|
||
<span className="ehb-title-sub ehb-hide-h5">（可多层下钻：按日 → 加氢站 → 客户 → 车辆及数据源）</span>
|
||
<span className="ehb-title-sub ehb-show-h5">（可逐级下钻）</span>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="ehb-btn ehb-btn--outline ehb-export-btn"
|
||
onClick={handleExportExcel}
|
||
title="导出 Excel 表格"
|
||
>
|
||
<Download size={14} aria-hidden />
|
||
导出 Excel
|
||
</button>
|
||
</div>
|
||
|
||
<div className="ehb-table-wrap">
|
||
<table className="ehb-table">
|
||
<thead>
|
||
<tr>
|
||
<th>日期 / 加氢站 / 客户 / 车辆明细</th>
|
||
<th>单价 (元/Kg)</th>
|
||
<th>加氢量 (Kg)</th>
|
||
<th>金额 (元) / 环比</th>
|
||
<th title="对接站点管理预充值余额">预充值余额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{/* 合计行 */}
|
||
<tr style={{ background: '#f8fafc', fontWeight: 700 }}>
|
||
<td>
|
||
<strong style={{ color: '#0f172a' }}>合计</strong>
|
||
</td>
|
||
<td></td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)' }}>{totalSum}</td>
|
||
<td></td>
|
||
<td style={{ fontSize: 11, color: '#64748b', fontWeight: 400 }} title="对接站点管理预充值余额">
|
||
对接站点管理
|
||
</td>
|
||
</tr>
|
||
|
||
{filteredDailyList.map((row) => {
|
||
const isDateExpanded = expandedDate === row.date;
|
||
const isHighlighted = highlightedDate === row.date;
|
||
|
||
return (
|
||
<React.Fragment key={row.date}>
|
||
{/* Level 1: 日期行 */}
|
||
<tr
|
||
id={`daily-row-${row.date}`}
|
||
className={`${isHighlighted ? 'is-highlight-target' : ''}`}
|
||
style={{ cursor: 'pointer', background: isDateExpanded ? '#f0f9ff' : undefined }}
|
||
onClick={() => setExpandedDate(isDateExpanded ? null : row.date)}
|
||
>
|
||
<td style={{ fontWeight: 600 }}>
|
||
<span style={{ marginRight: 6, display: 'inline-block', width: 14, color: '#0284c7' }}>
|
||
{row.stations.length > 0 ? (isDateExpanded ? '▼' : '►') : '•'}
|
||
</span>
|
||
<span>{row.date}</span>
|
||
<span style={{ fontSize: 11, color: '#64748b', fontWeight: 400, marginLeft: 8 }}>
|
||
({row.stations.length} 个加氢站)
|
||
</span>
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)' }}>{row.unitPrice.toFixed(2)}</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', fontWeight: 700, color: '#0f172a' }}>
|
||
{row.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)' }}>
|
||
{row.momPct !== null ? (
|
||
<span style={{ color: row.momPct < 0 ? '#ef4444' : '#10b981', fontWeight: 600 }}>
|
||
{row.momPct > 0 ? `+${row.momPct.toFixed(1)}%` : `${row.momPct.toFixed(1)}%`}
|
||
</span>
|
||
) : (
|
||
'-'
|
||
)}
|
||
</td>
|
||
<td style={{ color: '#64748b' }}>-</td>
|
||
</tr>
|
||
|
||
{/* Level 2: 加氢站层 */}
|
||
{isDateExpanded &&
|
||
row.stations.map((st) => {
|
||
const stKey = `${row.date}_${st.stationId}`;
|
||
const isStExpanded = !!expandedStations[stKey];
|
||
const stPrecharge = st.prechargeBalance ?? (st.stationId.includes('jx') ? 128500 : st.stationId.includes('tx') ? 86200 : 45000);
|
||
|
||
return (
|
||
<React.Fragment key={stKey}>
|
||
<tr
|
||
style={{ background: isStExpanded ? '#f1f5f9' : '#f8fafc', cursor: 'pointer', fontSize: 13 }}
|
||
onClick={(e) => toggleStation(row.date, st.stationId, e)}
|
||
>
|
||
<td style={{ paddingLeft: 24, fontWeight: 600 }}>
|
||
<span style={{ marginRight: 6, color: '#0284c7', display: 'inline-block', width: 14 }}>
|
||
{st.customers?.length ? (isStExpanded ? '▼' : '►') : '•'}
|
||
</span>
|
||
<span>└ {st.stationName}</span>
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#475569' }}>
|
||
{st.unitPrice.toFixed(2)}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', fontWeight: 600, color: '#334155' }}>
|
||
{st.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#475569' }}>
|
||
¥{st.amountYuan.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td
|
||
style={{ fontFamily: 'var(--bi-font-mono)', fontWeight: 600, color: '#0284c7' }}
|
||
title="对接站点管理预充值余额"
|
||
>
|
||
¥{stPrecharge.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
</tr>
|
||
|
||
{/* Level 3: 客户层 */}
|
||
{isStExpanded &&
|
||
st.customers?.map((cust) => {
|
||
const custKey = `${row.date}_${st.stationId}_${cust.customerId}`;
|
||
const isCustExpanded = !!expandedCustomers[custKey];
|
||
const isInternalCust = cust.customerCategory === 'internal' || cust.customerId === 'c-ln';
|
||
|
||
return (
|
||
<React.Fragment key={custKey}>
|
||
<tr
|
||
style={{ background: isCustExpanded ? '#e2e8f0' : '#f1f5f9', cursor: 'pointer', fontSize: 12 }}
|
||
onClick={(e) => toggleCustomer(row.date, st.stationId, cust.customerId, e)}
|
||
>
|
||
<td style={{ paddingLeft: 44, color: '#1e293b' }}>
|
||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
||
<span>
|
||
<span style={{ marginRight: 6, color: '#0284c7', display: 'inline-block', width: 14 }}>
|
||
{cust.vehicles?.length ? (isCustExpanded ? '▼' : '►') : '•'}
|
||
</span>
|
||
<strong style={{ fontWeight: 600 }}>└─ 客户：{cust.customerName}</strong>
|
||
</span>
|
||
{isInternalCust ? (
|
||
<span className="ehb-split-tag is-own" title="内部客户加氢数据">
|
||
<span className="ehb-split-tag__label">内部客户</span>
|
||
<span className="ehb-split-tag__val">{cust.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })} Kg</span>
|
||
<span className="ehb-split-tag__price">¥{cust.amountYuan.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
|
||
</span>
|
||
) : (
|
||
<span className="ehb-split-tag is-ext" title="外部客户加氢数据">
|
||
<span className="ehb-split-tag__label">外部客户</span>
|
||
<span className="ehb-split-tag__val">{cust.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })} Kg</span>
|
||
<span className="ehb-split-tag__price">¥{cust.amountYuan.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
</td>
|
||
<td style={{ color: '#64748b' }}>-</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#1e293b', fontWeight: 600 }}>
|
||
{cust.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#1e293b' }}>
|
||
¥{cust.amountYuan.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ color: '#64748b' }}>-</td>
|
||
</tr>
|
||
|
||
{/* Level 4: 车辆及数据来源明细层 */}
|
||
{isCustExpanded &&
|
||
cust.vehicles?.map((vh) => (
|
||
<tr key={vh.id} style={{ background: '#ffffff', fontSize: 12 }}>
|
||
<td style={{ paddingLeft: 64 }}>
|
||
<span style={{ color: '#94a3b8', marginRight: 8 }}>└──</span>
|
||
<span style={{ fontFamily: 'var(--bi-font-mono)', color: '#64748b', marginRight: 10 }}>
|
||
{vh.time}
|
||
</span>
|
||
{vh.plateNo ? (
|
||
<span style={{ fontFamily: 'var(--bi-font-mono)', fontWeight: 700, marginRight: 8 }}>
|
||
{vh.plateNo}
|
||
</span>
|
||
) : (
|
||
<span style={{ fontStyle: 'italic', color: '#94a3b8', marginRight: 8 }}>
|
||
无车牌(散车)
|
||
</span>
|
||
)}
|
||
<span style={{ marginRight: 6 }}>
|
||
{renderFleetTag(vh.fleetCategory === 'own')}
|
||
</span>
|
||
<span style={{ marginRight: 6 }}>
|
||
{renderSourceTag(vh.source)}
|
||
</span>
|
||
{/* 规则：仅内部车辆（羚牛车辆）展示核对状态；外部车辆不参与核对 */}
|
||
{vh.fleetCategory === 'own' && vh.verifyStatus && (
|
||
<span>{renderOrderVerifyTag(vh.fleetCategory, vh.verifyStatus)}</span>
|
||
)}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#64748b' }}>
|
||
{vh.unitPrice.toFixed(2)}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#334155' }}>
|
||
{vh.quantityKg.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ fontFamily: 'var(--bi-font-mono)', color: '#334155' }}>
|
||
¥{vh.amountYuan.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}
|
||
</td>
|
||
<td style={{ color: '#64748b' }}>-</td>
|
||
</tr>
|
||
))}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</React.Fragment>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|