diff --git a/frontend/src/pages/admin/AnalyticsDashboard.tsx b/frontend/src/pages/admin/AnalyticsDashboard.tsx index 28e3249..06f9e59 100644 --- a/frontend/src/pages/admin/AnalyticsDashboard.tsx +++ b/frontend/src/pages/admin/AnalyticsDashboard.tsx @@ -59,6 +59,8 @@ function alignName(name: string) { return name.length === 2 ? name[0] + " " + name[1] : name; } +const CAP_PAGE_SIZE = 20; // 人员视图每页设备数 + export default function AnalyticsDashboard() { const [searchParams, setSearchParams] = useSearchParams(); @@ -90,6 +92,8 @@ export default function AnalyticsDashboard() { const [flowLoading, setFlowLoading] = useState(false); // 📅 设备生产总天数口径:自然天 / 工作日 const [totalDaysMode, setTotalDaysMode] = useState<"natural" | "workdays">("natural"); + // 📄 人员视图分页 + const [capPage, setCapPage] = useState(0); const [error, setError] = useState(null); // ─── 弹窗下钻:设备备注(all=true 表示流转图点击,展示全部) ── @@ -226,11 +230,18 @@ export default function AnalyticsDashboard() { // ─── 柱状图:人员视图(X=设备身份证,系列=人员,居中紧凑,消除幽灵占位) ── const capabilityOption = useMemo(() => { - const categories = capability?.categories ?? []; - const devices = capability?.devices ?? []; + const allCategories = capability?.categories ?? []; + const allDevices = capability?.devices ?? []; + const allSeries = capability?.series ?? []; + // 🔧 分页切片:每页只显示 CAP_PAGE_SIZE 台设备,避免超宽无滚动 + const start = capPage * CAP_PAGE_SIZE; + const end = Math.min(start + CAP_PAGE_SIZE, allCategories.length); + const categories = allCategories.slice(start, end); + const devices = allDevices.slice(start, end); + const series = allSeries.map((s) => ({ ...s, data: s.data.slice(start, end) })); // 每台设备上真正产生耗时的人员 seriesIndex 数组 const activePerDevice = devices.map((_, devIdx) => - (capability?.series ?? []) + series .map((s, sIdx) => (s.data[devIdx] && s.data[devIdx].value != null ? sIdx : -1)) .filter((idx) => idx !== -1), ); @@ -276,7 +287,7 @@ export default function AnalyticsDashboard() { axisLabel: { fontSize: 10, interval: 0, lineHeight: 13 }, }, yAxis: { type: "value", name: "耗时(小时)" }, - series: (capability?.series ?? []).map((s, sIdx) => ({ + series: series.map((s, sIdx) => ({ name: s.name, type: "custom", encode: { x: 0, y: 1 }, @@ -324,7 +335,15 @@ export default function AnalyticsDashboard() { }), })), }; - }, [capability]); + }, [capability, capPage]); + + // 分页信息 + const capTotalPages = capability ? Math.max(1, Math.ceil(capability.devices.length / CAP_PAGE_SIZE)) : 0; + const capViewCount = capability + ? Math.min(CAP_PAGE_SIZE, Math.max(0, capability.devices.length - capPage * CAP_PAGE_SIZE)) + : 0; + // 查询/筛选变化后回到第 1 页 + useEffect(() => { setCapPage(0); }, [capability]); // ─── 有数据的日期集合(用于日历蓝点) ── const activityDates = useMemo(() => { @@ -764,7 +783,7 @@ export default function AnalyticsDashboard() { ) : (
-
+
)} + {/* 分页器:设备多时分页查看,避免超宽无滚动 */} + {capTotalPages > 1 && ( +
+ + {capPage + 1} / {capTotalPages} 页 · 每页 {CAP_PAGE_SIZE} 台 + +
+ )}
), },