lunanting/cangku
1
0
Fork 1
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'fix: MKH 页面自动刷新实时数据' (#34) from codex/mkh-auto-refresh-0924 into main

Browse Source 
修复 MKH 页面自动刷新实时数据 (#34)
This commit is contained in:
lunanting 2026-09-24 13:17:52 +08:00
commit 1afa99a783
1 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/pages/MkhBomData/index.jsx
View File

@ -33,6 +33,9 @@ const number = (value, digits = 0) => (value === null || value === undefined ||
const text = (value) => (value === null || value === undefined || value === '' ? '--' : value); const text = (value) => (value === null || value === undefined || value === '' ? '--' : value);
const EMPTY_FILTERS = { keyword: '', scope: 'warning' }; const EMPTY_FILTERS = { keyword: '', scope: 'warning' };
// 页面长时打开时定期重读。后端共享 10 分钟索引缓存，因此多个页面的轮询
// 会合并为每个缓存周期一次业务库读取，不会每 2 分钟重复扫远程大表。
const AUTO_REFRESH_MS = 2 * 60 * 1000;
// 预警等级 → 标签配色 // 预警等级 → 标签配色
const WARNING_TONE = { const WARNING_TONE = {
@ -277,6 +280,8 @@ const MkhBomData = () => {
const tableWrapRef = useRef(null); const tableWrapRef = useRef(null);
const listRequestGateRef = useRef(createRequestGate()); const listRequestGateRef = useRef(createRequestGate());
const detailGenerationRef = useRef(0); const detailGenerationRef = useRef(0);
const lastListRefreshAtRef = useRef(0);
const autoRefreshPendingRef = useRef(false);
const [bodyHeight, setBodyHeight] = useState(420); const [bodyHeight, setBodyHeight] = useState(420);
useEffect(() => { useEffect(() => {
@ -313,10 +318,10 @@ const MkhBomData = () => {
return params; return params;
}, [page, pageSize, sorter, filters]); }, [page, pageSize, sorter, filters]);
const load = useCallback(async () => { const load = useCallback(async ({ background = false } = {}) => {
const requestGeneration = listRequestGateRef.current.begin(); const requestGeneration = listRequestGateRef.current.begin();
setLoading(true); if (!background) setLoading(true);
setError(''); if (!background) setError('');
try { try {
const result = await getMkhBomList({ ...query, live: 1, _refresh: Date.now() }); const result = await getMkhBomList({ ...query, live: 1, _refresh: Date.now() });
if (!listRequestGateRef.current.isCurrent(requestGeneration)) return; if (!listRequestGateRef.current.isCurrent(requestGeneration)) return;
@ -325,16 +330,38 @@ const MkhBomData = () => {
return; return;
} }
setData(result?.data || { rows: [], total: 0, page: 1, pageSize: 50 }); setData(result?.data || { rows: [], total: 0, page: 1, pageSize: 50 });
lastListRefreshAtRef.current = Date.now();
setError('');
} catch (requestError) { } catch (requestError) {
if (!listRequestGateRef.current.isCurrent(requestGeneration)) return; if (!listRequestGateRef.current.isCurrent(requestGeneration)) return;
setError(requestError?.response?.data?.error || requestError?.message || '加载 MKH-BOM 资料失败'); setError(requestError?.response?.data?.error || requestError?.message || '加载 MKH-BOM 资料失败');
} finally { } finally {
if (listRequestGateRef.current.isCurrent(requestGeneration)) setLoading(false); if (!background && listRequestGateRef.current.isCurrent(requestGeneration)) setLoading(false);
} }
}, [query]); }, [query]);
useEffect(() => { load(); }, [load]); useEffect(() => { load(); }, [load]);
// 页面保持打开时自动更新；从后台切回且数据已超过轮询周期时立即重读。
// 后台刷新保留当前表格，不显示全页加载态；请求门仍会阻止旧响应覆盖新数据。
useEffect(() => {
const refreshIfStale = () => {
if (document.visibilityState !== 'visible' || syncing || autoRefreshPendingRef.current) return;
if (Date.now() - lastListRefreshAtRef.current < AUTO_REFRESH_MS) return;
autoRefreshPendingRef.current = true;
load({ background: true }).finally(() => {
autoRefreshPendingRef.current = false;
});
};
const timer = window.setInterval(refreshIfStale, AUTO_REFRESH_MS);
document.addEventListener('visibilitychange', refreshIfStale);
return () => {
window.clearInterval(timer);
document.removeEventListener('visibilitychange', refreshIfStale);
};
}, [load, syncing]);
const changeFilter = (key) => (value) => { const changeFilter = (key) => (value) => {
setFilters((old) => ({ ...old, [key]: value || '' })); setFilters((old) => ({ ...old, [key]: value || '' }));
setPage(1); setPage(1);