Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4430fb75f1 | ||
|
|
df259fc12b |
@@ -1,3 +1,4 @@
|
||||
@import './drill-workspace.css';
|
||||
.ehb-drill-modal--unified .ehb-modal-body { padding: 18px; background: #f6f8fb; }
|
||||
.ehb-drill-modal--unified .ehb-drill-root-tabs { display: flex; justify-content: flex-end; margin: 0 0 12px; }
|
||||
.ehb-drill-modal--unified .ehb-modal-meta-bar {
|
||||
|
||||
@@ -0,0 +1,156 @@
|
||||
/* Shared drill workspace: navigation stays visible, data owns the remaining height. */
|
||||
.ehb-drill-modal--unified .ehb-inline-child-row > td { background: #f8fbff; border-bottom: 1px solid #e2eaf4; }
|
||||
.ehb-drill-modal--unified .ehb-inline-child-row > td:first-child { background: #f8fbff !important; }
|
||||
.ehb-inline-child-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.ehb-inline-child-name > span { overflow-wrap: anywhere; font-weight: 600; }
|
||||
.ehb-inline-child-name small { display: block; color: #64748b; }
|
||||
.ehb-inline-child-toggle { flex: 0 0 32px; width: 32px; height: 36px; border: 0; border-radius: 6px; color: #2563eb; background: #eaf2ff; cursor: pointer; }
|
||||
.ehb-drill-modal--unified .ehb-inline-child-status > td,
|
||||
.ehb-drill-modal--unified .ehb-tree-expanded-row > td { padding: 8px 16px !important; background: #f8fbff; }
|
||||
.ehb-drill-modal--unified .ehb-tree-expanded-all { border: 0; background: transparent; color: #2563eb; font-size: 12px; font-weight: 600; cursor: pointer; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-head__title-group {
|
||||
min-width: 0;
|
||||
gap: 14px;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-head__title-group > div { min-width: 0; }
|
||||
@media (max-width: 767px) {
|
||||
.ehb-modal-card.ehb-drill-modal--unified:not([data-mobile-fullscreen-active="true"]) > .ehb-modal-head {
|
||||
min-height: 68px;
|
||||
padding: 10px 12px !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-head__title-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-back-btn {
|
||||
width: 44px !important;
|
||||
min-width: 44px !important;
|
||||
height: 44px !important;
|
||||
min-height: 44px !important;
|
||||
flex: 0 0 44px;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 6%) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-back-btn > span { display: none; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-head__title {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.4 !important;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-head__sub {
|
||||
margin-top: 3px;
|
||||
font-size: 11px !important;
|
||||
line-height: 1.5;
|
||||
color: #a7b6cc;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-table-wrap > table > thead > tr > th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #f0f3f8;
|
||||
box-shadow: inset 0 -1px 0 #d7e1ed;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-table-wrap > table > thead > tr > th:first-child {
|
||||
z-index: 11;
|
||||
}
|
||||
.ehb-modal-overlay .ehb-modal-card.ehb-drill-modal--unified {
|
||||
width: 96vw !important;
|
||||
max-width: 1800px !important;
|
||||
height: 94dvh !important;
|
||||
max-height: 94dvh !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified > .ehb-modal-head {
|
||||
padding: 10px 16px !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified > .ehb-drill-breadcrumbs { padding: 5px 16px; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified > .ehb-modal-body {
|
||||
flex: 1 1 auto !important;
|
||||
min-height: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
padding: 8px 16px !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-body > * { flex: 0 0 auto; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-body > .ehb-modal-hint-text {
|
||||
flex: 0 0 auto !important;
|
||||
min-width: 0;
|
||||
margin: 0 !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-filter-summary > span {
|
||||
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-drill-root-tabs { margin: 0 !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-bar { margin: 0 !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-item { padding: 6px 12px !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-val { font-size: 18px !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-primary-actions {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-filter-summary {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 40px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d7e1ed;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
color: #334155;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-filter-summary strong {
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-filter-panel:not(.is-open) { display: none !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-real-drill-filter-panel.is-open {
|
||||
display: flex !important;
|
||||
max-height: 30dvh;
|
||||
overflow: auto;
|
||||
margin: 0 !important;
|
||||
padding: 8px !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-drill-usage-guide { font-size: 12px; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-body > .ehb-modal-table-wrap {
|
||||
flex: 1 1 0 !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
margin: 0 !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-drill-page-controls { margin-top: 0 !important; padding: 0; }
|
||||
@media (max-width: 767px), (max-height: 500px) {
|
||||
.ehb-modal-overlay .ehb-modal-card.ehb-drill-modal--unified {
|
||||
width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
|
||||
border-radius: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified > .ehb-modal-head { padding: 6px 10px !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified > .ehb-modal-body {
|
||||
padding: 6px 8px max(6px, env(safe-area-inset-bottom)) !important; gap: 4px !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-bar {
|
||||
display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important;
|
||||
}
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-item { flex: 0 0 auto; width: auto !important; min-width: 120px; padding: 5px 9px !important; }
|
||||
.ehb-modal-card.ehb-drill-modal--unified .ehb-modal-meta-val { font-size: 16px !important; }
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Component, Fragment, useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { ErrorInfo, ReactNode } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { ChevronDown, ChevronLeft, Download, Search, SlidersHorizontal, Truck, X } from "lucide-react";
|
||||
import { MobileListFullscreenButton } from "../../../vendor/lnbi-8113-exact/common/MobileListFullscreenButton";
|
||||
import { fetchAllH2BiDrill, fetchH2BiDrill, fetchH2BiMeta } from "./api";
|
||||
@@ -133,9 +134,35 @@ function DrillSearchSelect({
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const rootRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const menuRef = useRef<HTMLDivElement>(null);
|
||||
const [menuPosition, setMenuPosition] = useState({ left: 0, top: 0, width: 180, maxHeight: 280 });
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const reposition = () => {
|
||||
const rect = rootRef.current?.getBoundingClientRect();
|
||||
if (!rect) return;
|
||||
const width = Math.min(Math.max(rect.width, 260), window.innerWidth - 16);
|
||||
const below = window.innerHeight - rect.bottom - 12;
|
||||
const above = rect.top - 12;
|
||||
const upwards = below < 220 && above > below;
|
||||
const maxHeight = Math.min(280, upwards ? above : below);
|
||||
setMenuPosition({ left: Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)),
|
||||
top: upwards ? rect.top - maxHeight - 4 : rect.bottom + 4, width, maxHeight });
|
||||
};
|
||||
const escape = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); };
|
||||
reposition();
|
||||
window.addEventListener("resize", reposition);
|
||||
document.addEventListener("scroll", reposition, true);
|
||||
document.addEventListener("keydown", escape);
|
||||
return () => {
|
||||
window.removeEventListener("resize", reposition);
|
||||
document.removeEventListener("scroll", reposition, true);
|
||||
document.removeEventListener("keydown", escape);
|
||||
};
|
||||
}, [open]);
|
||||
useEffect(() => {
|
||||
const close = (event: MouseEvent) => {
|
||||
if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
|
||||
if (!rootRef.current?.contains(event.target as Node) && !menuRef.current?.contains(event.target as Node)) setOpen(false);
|
||||
};
|
||||
if (open) document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
@@ -171,13 +198,15 @@ function DrillSearchSelect({
|
||||
onClick={() => !disabled && setOpen((shown) => !shown)}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
aria-expanded={open}
|
||||
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">
|
||||
{open && !disabled ? createPortal(
|
||||
<div ref={menuRef} className="ehb-bi-search-select__dropdown ehb-drill-select-portal"
|
||||
style={{ position: "fixed", ...menuPosition, right: "auto", minWidth: 0, zIndex: 10000, display: "flex", flexDirection: "column" }}>
|
||||
<label className="ehb-bi-search-select__search">
|
||||
<Search size={13} />
|
||||
<input
|
||||
@@ -188,7 +217,7 @@ function DrillSearchSelect({
|
||||
aria-label={`搜索${ariaLabel}`}
|
||||
/>
|
||||
</label>
|
||||
<div className="ehb-bi-search-select__list">
|
||||
<div className="ehb-bi-search-select__list" style={{ minHeight: 0, flex: "1 1 auto", maxHeight: "none" }}>
|
||||
<button
|
||||
type="button"
|
||||
className={`ehb-bi-search-select__item ${value ? "" : "is-selected"}`}
|
||||
@@ -217,7 +246,7 @@ function DrillSearchSelect({
|
||||
<div className="ehb-bi-search-select__empty">无匹配项</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>, document.body
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
@@ -417,6 +446,52 @@ function BearingTags({ row }: { row: { settlementTypes?: unknown; settlementType
|
||||
</span>;
|
||||
}
|
||||
|
||||
function ExpandedChildren({ data, state, query, kind, label, depth = 1 }: {
|
||||
data: H2BiDrillResponse; state: DrillState; query: H2BiQuery; kind: DrillKind; label: string; depth?: number;
|
||||
}) {
|
||||
return <>{data.groups.map((row) => <ExpandedChild key={rowIdentity(row)} row={row} state={state} query={query} kind={kind} label={label} depth={depth} />)}
|
||||
{data.records.map((record, index) => <tr className="ehb-inline-child-row" key={`${record.id}-${index}`}>
|
||||
<td><div className="ehb-inline-child-name" style={{ paddingLeft: depth * 14 }}><span>{String(record.orderNo || record.id)}</span><small>{String(record.time || "")}</small></div></td>
|
||||
<td>{record.vehicleScope === "lingniu" ? "羚牛车辆" : "外部车辆"}</td><td><BearingTags row={record} /></td><td>{sourceLabel(record.source)}</td><td>{verifyLabel(record.verifyStatus)}</td><td style={{textAlign:"right"}}>1 笔</td>
|
||||
<ExpandedMetrics row={record} kind={kind} label={label} amountScope={state.amountScope} />
|
||||
</tr>)}
|
||||
</>;
|
||||
}
|
||||
|
||||
function ExpandedMetrics({ row, kind, label, amountScope }: {
|
||||
row: { kg?: unknown; cost?: unknown; revenue?: unknown }; kind: DrillKind; label: string; amountScope: H2BiAmountScope;
|
||||
}) {
|
||||
const cell = (value: unknown, money = false) => <td style={{textAlign:"right"}}>{money ? "¥" : ""}{formatNumber(value)}</td>;
|
||||
if (label === "加氢利润") return <>{cell(row.revenue, true)}{cell(row.cost, true)}{cell(Number(row.revenue ?? 0) - Number(row.cost ?? 0), true)}</>;
|
||||
if (kind === "customer") return <>{cell(row.cost, true)}{cell(row.revenue, true)}<td>未接入</td><td>未接入</td></>;
|
||||
return <>{cell(row.kg)}{cell(amountScope === "customer" ? row.revenue : row.cost, true)}{label === "本日加氢" || label === "本月加氢" ? <td style={{textAlign:"right"}}>—</td> : null}</>;
|
||||
}
|
||||
|
||||
function ExpandedChild({ row, state, query, kind, label, depth }: {
|
||||
row: H2BiDrillGroupRow; state: DrillState; query: H2BiQuery; kind: DrillKind; label: string; depth: number;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const childState = nextState(state, row);
|
||||
const live = useDrill(query, childState, page, 50, expanded);
|
||||
const columns = label === "加氢利润" || label === "本日加氢" || label === "本月加氢" ? 9 : kind === "customer" ? 10 : 8;
|
||||
return <>
|
||||
<tr className="ehb-inline-child-row">
|
||||
<td><div className="ehb-inline-child-name" style={{ paddingLeft: depth * 14 }}>
|
||||
<button type="button" className="ehb-inline-child-toggle" aria-expanded={expanded} aria-label={`${expanded ? "收起" : "展开"}${row.name}`} onClick={() => { setExpanded(!expanded); setPage(1); }}>{expanded ? "▾" : "▸"}</button>
|
||||
<span>{row.name}</span>
|
||||
</div></td>
|
||||
<td>{titleFor(state.level)}</td><td><BearingTags row={row} /></td><td>账本汇总</td><td>汇总</td><td style={{textAlign:"right"}}>{formatNumber(row.recordCount, 0)} 笔</td>
|
||||
<ExpandedMetrics row={row} kind={kind} label={label} amountScope={state.amountScope} />
|
||||
</tr>
|
||||
{expanded ? live.loading || live.error || !live.data ? <tr className="ehb-inline-child-status"><td colSpan={columns}>{live.error ? `加载失败:${live.error},请收起后重试` : "正在加载子级数据…"}</td></tr> : <>
|
||||
<ExpandedChildren data={live.data} state={childState} query={query} kind={kind} label={label} depth={depth + 1} />
|
||||
{!live.data.groups.length && !live.data.records.length ? <tr className="ehb-inline-child-status"><td colSpan={columns}>当前层暂无子级数据</td></tr> : null}
|
||||
{page > 1 || live.data.page.hasMore ? <tr className="ehb-inline-child-status"><td colSpan={columns}>子级第 {page} 页 <button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</button> <button disabled={!live.data.page.hasMore} onClick={() => setPage(page + 1)}>下一页</button></td></tr> : null}
|
||||
</> : null}
|
||||
</>;
|
||||
}
|
||||
|
||||
function GroupTable({
|
||||
state,
|
||||
data,
|
||||
@@ -428,6 +503,7 @@ function GroupTable({
|
||||
onToggle,
|
||||
kind,
|
||||
label,
|
||||
query,
|
||||
}: {
|
||||
state: DrillState;
|
||||
data: H2BiDrillResponse;
|
||||
@@ -439,6 +515,7 @@ function GroupTable({
|
||||
onToggle: (row: H2BiDrillGroupRow) => void;
|
||||
kind: DrillKind;
|
||||
label: string;
|
||||
query: H2BiQuery;
|
||||
}) {
|
||||
const safeLabel = String(label ?? "");
|
||||
const amountFor = (row: { cost?: unknown; revenue?: unknown }) =>
|
||||
@@ -693,30 +770,14 @@ function GroupTable({
|
||||
<td style={{ textAlign: "right" }}>{formatNumber(row.recordCount, 0)} 笔</td>
|
||||
{isProfit ? <><td className="ehb-key-income" style={{ textAlign: "right" }}>¥{formatNumber(row.revenue)}</td><td className="ehb-key-cost" style={{ textAlign: "right" }}>¥{formatNumber(row.cost)}</td><td className="ehb-key-profit" style={{ textAlign: "right" }}>¥{formatNumber(Number(row.revenue) - Number(row.cost))}</td></> : isMonth || isDay ? <><td className="ehb-key-volume" style={{ textAlign: "right" }}>{formatNumber(row.kg)}</td><td className="ehb-key-cost" style={{ textAlign: "right" }}>¥{formatNumber(amountFor(row))}</td><td className="ehb-key-profit" style={{ textAlign: "right" }}>—</td></> : isCustomerBill ? <><td className="ehb-key-cost" style={{ textAlign: "right" }}>¥{formatNumber(row.cost)}</td><td className="ehb-key-income" style={{ textAlign: "right" }}>¥{formatNumber(row.revenue)}</td><td>未接入</td><td>未接入</td></> : <><td className="ehb-key-volume" style={{ textAlign: "right", fontWeight: 700 }}>{formatNumber(row.kg)}</td><td className="ehb-key-income" style={{ textAlign: "right" }}>¥{formatNumber(amountFor(row))}</td></>}
|
||||
</tr>
|
||||
{expanded && !expandedLoading && !expandedError && expandedData ? <ExpandedChildren data={expandedData} state={nextState(state, row)} query={query} kind={kind} label={label} /> : null}
|
||||
{expanded ? (
|
||||
<tr className="ehb-tree-expanded-row">
|
||||
<td colSpan={12}>
|
||||
<td colSpan={isProfit || isMonth || isDay ? 9 : isCustomerBill ? 10 : 8}>
|
||||
<div className="ehb-tree-expanded-content" role="region" aria-label={`${row.name}的${nextLevel}列表`}>
|
||||
{expandedLoading ? "正在加载子级数据…" : expandedError ? (
|
||||
<span role="alert">子级数据加载失败:{expandedError}。请收起后重新展开。</span>
|
||||
) : nextState(state, row).level === "record" && expandedData?.records.length ? (
|
||||
<ul>
|
||||
{expandedData.records.map((record, recordIndex) => (
|
||||
<li key={`${String(record.id)}-${recordIndex}`}>
|
||||
<span>{String(record.orderNo || record.id || "加氢订单")}</span>
|
||||
<small>{formatNumber(record.kg)} Kg · {String(record.time || "未记录时间")}</small>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : expandedData?.groups.length ? (
|
||||
<ul>
|
||||
{expandedData.groups.map((child, childIndex) => (
|
||||
<li key={`${child.id}-${child.name}-${childIndex}`}>
|
||||
<span>{child.name}</span><small>{formatNumber(child.kg)} Kg · {formatNumber(child.recordCount, 0)} 笔</small>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : "当前层暂无子级数据"}
|
||||
) : expandedData && (expandedData.groups.length || expandedData.records.length) ? null : "当前层暂无子级数据"}
|
||||
{expandedData?.page.hasMore ? (
|
||||
<p className="ehb-modal-hint-text">
|
||||
此处仅预览前 {expandedData.page.itemCount ?? 50} 条;进入完整明细后可继续翻页。
|
||||
@@ -1138,7 +1199,7 @@ export function PrototypeDrillModal({
|
||||
</button>
|
||||
<div>
|
||||
<div className="ehb-modal-head__title">{displayTitle}</div>
|
||||
<div className="ehb-modal-head__sub">统计时间范围:{scope}</div>
|
||||
<div className="ehb-modal-head__sub" aria-label={`统计时间范围:${scope}`}>{scope.replaceAll("-", ".").replace(" 至 ", " — ")}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ehb-modal-head__actions">
|
||||
@@ -1179,6 +1240,7 @@ export function PrototypeDrillModal({
|
||||
</div>
|
||||
) : null}
|
||||
<DrillSummaryCards kind={kind} label={cleanLabel} data={live.data} />
|
||||
{cleanLabel === "待核对订单" ? <div className="ehb-modal-hint-text">核对功能上线期初:2026-05-01(含)。仅统计当前查询范围与上线期初之后的交集;此前订单不计入待核对。</div> : null}
|
||||
{cleanLabel === "加氢利润" && customerBearingScope ? (
|
||||
<div className="ehb-modal-hint-text" style={{ marginBottom: 10 }}>
|
||||
利润口径:客户承担订单的对客总价 ¥
|
||||
@@ -1304,7 +1366,7 @@ export function PrototypeDrillModal({
|
||||
resetKey={`${cleanLabel}|${JSON.stringify(state)}|${search}|${fleetCategoryFilter}`}
|
||||
onRecover={() => resetToRoot()}
|
||||
>
|
||||
<GroupTable state={state} data={data} onOpen={open} expandedRowId={expandedRow ? rowIdentity(expandedRow) : null} expandedData={expandedRow ? expandedLive.data : null} expandedLoading={Boolean(expandedRow && expandedLive.loading)} expandedError={expandedRow ? expandedLive.error : null} onToggle={toggle} kind={kind} label={cleanLabel} />
|
||||
<GroupTable query={liveQuery} state={state} data={data} onOpen={open} expandedRowId={expandedRow ? rowIdentity(expandedRow) : null} expandedData={expandedRow ? expandedLive.data : null} expandedLoading={Boolean(expandedRow && expandedLive.loading)} expandedError={expandedRow ? expandedLive.error : null} onToggle={toggle} kind={kind} label={cleanLabel} />
|
||||
</DrillTableErrorBoundary>
|
||||
) : (
|
||||
<div className="ehb-empty">当前筛选范围暂无数据</div>
|
||||
|
||||
@@ -93,6 +93,15 @@
|
||||
overflow-wrap: anywhere;
|
||||
white-space: normal;
|
||||
}
|
||||
/* Give nested day → station → customer → vehicle rows a viewport-sized workspace. */
|
||||
.ehb-real-daily-detail.ehb-daily-table-card > .ehb-table-wrap {
|
||||
height: 80vh;
|
||||
height: 80dvh;
|
||||
max-height: none;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ehb-real-daily-detail .ehb-table th:first-child {
|
||||
z-index: 4;
|
||||
background-color: #f8fafc;
|
||||
|
||||
@@ -186,6 +186,7 @@ function resolveFilter(query: (key: string) => string | undefined): Filter {
|
||||
if (verifyScope === "unverified")
|
||||
clauses.push(
|
||||
"LOWER(COALESCE(NULLIF(TRIM(b.verify_status), ''), 'unverified')) <> 'verified'",
|
||||
"b.refuel_time >= '2026-05-01'",
|
||||
);
|
||||
return {
|
||||
startDate: safeStart,
|
||||
|
||||
@@ -43,6 +43,25 @@ interface CacheCall {
|
||||
force: boolean | undefined;
|
||||
}
|
||||
|
||||
test("待核对的汇总和下钻统一从核对上线期初起统计,不影响其他核对范围", async () => {
|
||||
for (const scope of ["unverified", "all", "verified"]) {
|
||||
for (const endpoint of ["overview", "drill"]) {
|
||||
const calls: QueryCall[] = [];
|
||||
const app = new Hono();
|
||||
registerHydrogenBiV2Routes(app, {
|
||||
hydrogenPool: { query: createQueryMock([], calls) },
|
||||
} as unknown as HydrogenBiV2Dependencies);
|
||||
const response = await app.request(`/h2/v2/${endpoint}?year=2026&verifyScope=${scope}`);
|
||||
assert.equal(response.status, 200);
|
||||
const ledgerQueries = calls.filter(({ sql }) => sql.includes("FROM hydrogen_fuel_ledger b"));
|
||||
assert.ok(ledgerQueries.length > 0);
|
||||
for (const { sql } of ledgerQueries) {
|
||||
assert.equal(sql.includes("b.refuel_time >= '2026-05-01'"), scope === "unverified");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function createQueryMock(resultSets: unknown[][], calls: QueryCall[]) {
|
||||
return async (sql: string, params?: unknown) => {
|
||||
calls.push({ sql, params });
|
||||
@@ -116,6 +135,10 @@ test("氢能 BI v2 使用独立真实账本合同,并且不让前端拼接旧
|
||||
assert.match(calls[0].sql, /FROM hydrogen_fuel_ledger/);
|
||||
assert.match(calls[1].sql, /FROM new_hydrogen_site/);
|
||||
assert.match(calls[1].sql, /EXISTS\s*\([\s\S]*amount_kg[\s\S]*> 0/);
|
||||
// 所有真实下钻共用此站点选项池:历史加氢量为正,而非仅当前区间活跃。
|
||||
assert.match(calls[1].sql, /b\.station_id = s\.id/);
|
||||
assert.match(calls[1].sql, /external_recharge_manual/);
|
||||
assert.doesNotMatch(calls[1].sql, /refuel_time\s*[<>]/);
|
||||
});
|
||||
|
||||
test("氢能 BI v2 下钻在日期、站点、客户、车辆及区域上下文中复用同一过滤口径", async () => {
|
||||
|
||||
+12
-14
@@ -1382,7 +1382,7 @@ export const EnergyBiBoardApp: React.FC = () => {
|
||||
const [customerId, setCustomerId] = useState<string | null>(null);
|
||||
const [customerLabel, setCustomerLabel] = useState<string | null>(null);
|
||||
const [liveOverview, setLiveOverview] = useState<any>(null);
|
||||
const [liveVerifiedOverview, setLiveVerifiedOverview] = useState<any>(null);
|
||||
const [livePendingOverview, setLivePendingOverview] = useState<any>(null);
|
||||
const [liveMeta, setLiveMeta] = useState<any>(null);
|
||||
const [liveError, setLiveError] = useState<string | null>(null);
|
||||
const [liveLoading, setLiveLoading] = useState(true);
|
||||
@@ -1417,25 +1417,23 @@ export const EnergyBiBoardApp: React.FC = () => {
|
||||
setLiveError(null);
|
||||
setLiveMeta(null);
|
||||
setLiveOverview(null);
|
||||
setLiveVerifiedOverview(null);
|
||||
setLivePendingOverview(null);
|
||||
const vehicleScope = fleetScope === 'own' ? 'lingniu' : fleetScope;
|
||||
Promise.all([
|
||||
fetchH2BiMeta(),
|
||||
fetchH2BiOverview({ year, vehicleScope, verifyScope, regionGranularity: 'city' }),
|
||||
verifyScope === 'all'
|
||||
? fetchH2BiOverview({ year, vehicleScope, verifyScope: 'verified', regionGranularity: 'city' })
|
||||
: Promise.resolve(null),
|
||||
]).then(([meta, overview, verifiedOverview]) => {
|
||||
fetchH2BiOverview({ year, vehicleScope, verifyScope: 'unverified', regionGranularity: 'city' }),
|
||||
]).then(([meta, overview, pendingOverview]) => {
|
||||
if (!active) return;
|
||||
setLiveMeta(meta);
|
||||
setLiveOverview(overview);
|
||||
setLiveVerifiedOverview(verifiedOverview);
|
||||
setLivePendingOverview(pendingOverview);
|
||||
setLiveLoading(false);
|
||||
}).catch((error) => {
|
||||
if (!active) return;
|
||||
setLiveMeta(null);
|
||||
setLiveOverview(null);
|
||||
setLiveVerifiedOverview(null);
|
||||
setLivePendingOverview(null);
|
||||
setLiveError(error instanceof Error ? error.message : String(error));
|
||||
setLiveLoading(false);
|
||||
});
|
||||
@@ -1577,12 +1575,12 @@ export const EnergyBiBoardApp: React.FC = () => {
|
||||
}, [stationRankOpen]);
|
||||
|
||||
const dims = useMemo(() => costDimCards(rows), [rows]);
|
||||
const risk = liveOverview && liveVerifiedOverview
|
||||
const risk = livePendingOverview
|
||||
? {
|
||||
count: Math.max(0, Number(liveOverview.kpis.recordCount || 0) - Number(liveVerifiedOverview.kpis.recordCount || 0)),
|
||||
amount: Math.max(0, Number(liveOverview.kpis.totalCost || 0) - Number(liveVerifiedOverview.kpis.totalCost || 0)),
|
||||
count: Number(livePendingOverview.kpis.recordCount || 0),
|
||||
amount: Number(livePendingOverview.kpis.totalCost || 0),
|
||||
}
|
||||
: unverified(rows);
|
||||
: { count: 0, amount: 0 };
|
||||
const unitProfitYuan = hostKpi.totalKgT > 0
|
||||
? ((hostKpi.profitWan * 10000) / (hostKpi.totalKgT * 1000)).toFixed(2)
|
||||
: '—';
|
||||
@@ -2218,7 +2216,7 @@ export const EnergyBiBoardApp: React.FC = () => {
|
||||
<button type="button" className="ehb-diagnosis__item is-action" onClick={() => setKpiDrillType('待核对订单')} title="查看待核对订单">
|
||||
<span>待核对订单</span>
|
||||
<strong className={risk.count > 0 ? 'is-warning' : ''}>{risk.count}笔 · ¥{unverifiedWan}万</strong>
|
||||
<small>查看待核对订单</small>
|
||||
<small>核对上线期初:2026-05-01(含)· 查看待核对订单</small>
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
@@ -2237,7 +2235,7 @@ export const EnergyBiBoardApp: React.FC = () => {
|
||||
<div><span>月度环比</span><strong className={liveMonthComparison && liveMonthComparison.value < 0 ? 'is-warning' : 'is-positive'}>{liveMonthComparison ? `${liveMonthComparison.value >= 0 ? '+' : ''}${liveMonthComparison.value.toFixed(1)}%` : '—'}</strong><small>{liveMonthComparison?.label ?? '暂无可比月份'}</small></div>
|
||||
<div><span>单公斤毛利</span><strong>¥{unitProfitYuan}<small>/kg</small></strong><small>按累计加氢量计算</small></div>
|
||||
<button type="button" className="ehb-mobile-diagnosis-action" onClick={() => setKpiDrillType('加氢站加氢量排名')}><span>头部站点占比</span><strong>{top5SharePct}%</strong><small>前5站占总量</small></button>
|
||||
<button type="button" className="ehb-mobile-diagnosis-action" onClick={() => setKpiDrillType('待核对订单')}><span>待核对订单</span><strong className={risk.count > 0 ? 'is-warning' : ''}>{risk.count}笔</strong><small>¥{unverifiedWan}万</small></button>
|
||||
<button type="button" className="ehb-mobile-diagnosis-action" onClick={() => setKpiDrillType('待核对订单')}><span>待核对订单</span><strong className={risk.count > 0 ? 'is-warning' : ''}>{risk.count}笔</strong><small>¥{unverifiedWan}万 · 上线期初 2026-05-01(含)</small></button>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
+14
-29
@@ -88,18 +88,6 @@ function StationTrend({ vols }: { vols: StationDailyVolumeRow[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function StationFilter({ value, rows, onChange }: { value: string; rows: StationOverview[]; onChange: (value: string) => void }) {
|
||||
return (
|
||||
<select className="sd-station-filter-select" value={value} onChange={(e) => onChange(e.target.value)} aria-label="选择当前站点">
|
||||
{rows.map((row) => (
|
||||
<option key={row.id} value={row.id}>
|
||||
{row.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
function localIsoDate(date: Date) {
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
@@ -144,11 +132,10 @@ export const StationDailyApp: React.FC<StationDailyAppProps> = ({
|
||||
const [updatedAt, setUpdatedAt] = useState('2026-08-12 10:00');
|
||||
const [tick, setTick] = useState(0);
|
||||
const [kpiDrill, setKpiDrill] = useState<KpiDrill>(null);
|
||||
const [stationFilter, setStationFilter] = useState('');
|
||||
const [liveBoard, setLiveBoard] = useState<HydrogenStationBoardResponse | null>(null);
|
||||
const [liveError, setLiveError] = useState<string | null>(null);
|
||||
const [liveLoading, setLiveLoading] = useState(true);
|
||||
const [stationCashBoard, setStationCashBoard] = useState<HydrogenStationBoardResponse | null>(null);
|
||||
const [stationCashBoard, setStationCashBoard] = useState<HydrogenStationBoardResponse[] | null>(null);
|
||||
const [stationCashError, setStationCashError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -213,26 +200,21 @@ export const StationDailyApp: React.FC<StationDailyAppProps> = ({
|
||||
.sort((a, b) => b.rangeKg - a.rangeKg || a.name.localeCompare(b.name, 'zh-CN'));
|
||||
}, [liveBoard, endDate]);
|
||||
|
||||
// 单站入口只保留一条真实站点记录。首次拿到真实列表时按服务端排序后的首站默认选中。
|
||||
const selectedStationId = overviewRows.some((row) => row.id === stationFilter)
|
||||
? stationFilter
|
||||
: (overviewRows[0]?.id ?? '');
|
||||
const boardRows = selectedStationId ? overviewRows.filter((row) => row.id === selectedStationId) : [];
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedStationId && selectedStationId !== stationFilter) setStationFilter(selectedStationId);
|
||||
}, [selectedStationId, stationFilter]);
|
||||
// 自营站列表完整展示,点击其中一站再进入单站详情。
|
||||
const boardRows = overviewRows;
|
||||
const stationIdsKey = overviewRows.map((row) => row.id).sort().join(',');
|
||||
|
||||
// 总览请求的 summary.daily 是全站口径;单站现结日表必须另以真实 stationId 查询,不能按比例拆分。
|
||||
useEffect(() => {
|
||||
if (!selectedStationId) {
|
||||
if (!stationIdsKey) {
|
||||
setStationCashBoard(null);
|
||||
return;
|
||||
}
|
||||
let active = true;
|
||||
setStationCashBoard(null);
|
||||
setStationCashError(null);
|
||||
fetchHydrogenStationBoard({ startDate, endDate, stationId: Number(selectedStationId), force: tick > 0 })
|
||||
Promise.all(stationIdsKey.split(',').map((id) =>
|
||||
fetchHydrogenStationBoard({ startDate, endDate, stationId: Number(id), force: tick > 0 })))
|
||||
.then((result) => {
|
||||
if (active) setStationCashBoard(result);
|
||||
})
|
||||
@@ -240,7 +222,7 @@ export const StationDailyApp: React.FC<StationDailyAppProps> = ({
|
||||
if (active) setStationCashError(reason instanceof Error ? reason.message : '当前站点现结流水加载失败');
|
||||
});
|
||||
return () => { active = false; };
|
||||
}, [selectedStationId, startDate, endDate, tick]);
|
||||
}, [stationIdsKey, startDate, endDate, tick]);
|
||||
|
||||
const totals = useMemo(() => {
|
||||
return {
|
||||
@@ -266,8 +248,11 @@ export const StationDailyApp: React.FC<StationDailyAppProps> = ({
|
||||
|
||||
/** 当前选中站点的区间日现结;接口成功后才把无进账日期显式为 0。 */
|
||||
const cashDaily = useMemo(() => {
|
||||
if (!stationCashBoard?.selected) return null;
|
||||
const map = new Map(stationCashBoard.selected.daily.map((row) => [row.date, row.paymentAmount]));
|
||||
if (!stationCashBoard || stationCashBoard.some((board) => !board.selected)) return null;
|
||||
const map = new Map<string, number>();
|
||||
for (const board of stationCashBoard) {
|
||||
for (const row of board.selected!.daily) map.set(row.date, (map.get(row.date) ?? 0) + row.paymentAmount);
|
||||
}
|
||||
return calendarDays(startDate, endDate).map((date) => ({ date, amount: map.get(date) || 0 }));
|
||||
}, [stationCashBoard, startDate, endDate]);
|
||||
|
||||
@@ -413,7 +398,7 @@ export const StationDailyApp: React.FC<StationDailyAppProps> = ({
|
||||
<span className="sd-station-board__fullscreen">
|
||||
<MobileListFullscreenButton label="横屏全屏查看站点经营概况" />
|
||||
</span>
|
||||
<StationFilter value={stationFilter} rows={overviewRows} onChange={setStationFilter} />
|
||||
<span className="sd-panel__meta">全部自营站 · {boardRows.length} 站</span>
|
||||
</div>
|
||||
|
||||
<div className="sd-station-single-card">
|
||||
|
||||
Reference in New Issue
Block a user