fix(prefetch-logs): 优化预拉取订单日志的分页和加载逻辑

- 修改预拉取日志的查询逻辑,首次查询保存实际开始时间
- 实现基于首次查询时间往前递减1分钟分页加载
- 限制最大查询范围为1小时,避免重复加载过多数据
- 优化日志列表倒序显示和追加数据方式
- 修复加载失败时偏移量回滚,保证数据正确性
- 更新环境变量中的API基础URL地址
This commit is contained in:
danial
2025-12-08 15:58:25 +08:00
parent 10a8c21fab
commit 55af9991d1
2 changed files with 91 additions and 52 deletions

View File

@@ -1,2 +1,2 @@
VITE_API_BASE_URL= 'http://127.0.0.1:12401'
VITE_API_BASE_URL= 'http://49.233.216.171:12310'
# VITE_API_BASE_URL='https://partial.kkknametrans.buzz'

View File

@@ -135,8 +135,9 @@ const logsRenderData = ref<KamiApiCamelOilV1PrefetchOrderLogItem[]>([]);
const hasMore = ref(true);
const logContentRef = ref<HTMLElement>();
const loadingMore = ref(false);
const currentStartTime = ref<string | null>(null); // 当前查询的开始时间
const currentEndTime = ref<string | null>(null); // 当前查询的结束时间
const actualQueryStartTime = ref<string | null>(null); // 首次查询返回的实际开始时间
const queryOffsetMinutes = ref(0); // 查询偏移量表示已经往前查询了多少个1分钟段
const maxQueryMinutes = 60; // 最大查询1小时60分钟
const generateFormModel = () => {
const now = dayjs();
@@ -155,14 +156,7 @@ const formatDateTime = (dateTime: string | undefined): string => {
return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
};
const fetchLogs = async (
reset = true,
startTimeOverride?: string,
endTimeOverride?: string
) => {
let queryStartTime: string;
let queryEndTime: string;
const fetchLogs = async (reset = true) => {
if (reset) {
// 初始查询或搜索,使用表单时间
if (!formModel.startTime || !formModel.endTime) {
@@ -173,19 +167,15 @@ const fetchLogs = async (
setLoading(false);
return;
}
queryStartTime = dayjs(formModel.startTime).format('YYYY-MM-DD HH:mm:ss');
queryEndTime = dayjs(formModel.endTime).format('YYYY-MM-DD HH:mm:ss');
setLoading(true);
} else {
// 继续查询使用传入的时间覆盖或当前时间往前倒1分钟
queryStartTime =
startTimeOverride ||
dayjs(currentStartTime.value)
.subtract(1, 'minute')
const queryStartTime = dayjs(formModel.startTime)
.startOf('minute')
.format('YYYY-MM-DD HH:mm:ss');
const queryEndTime = dayjs(formModel.endTime)
.endOf('minute')
.format('YYYY-MM-DD HH:mm:ss');
queryEndTime = endTimeOverride || currentStartTime.value!; // 从当前最早时间开始
loadingMore.value = true;
}
try {
const { data } = await jdV2PrefetchClient.apiJdV2PrefetchLogsGet({
@@ -194,22 +184,16 @@ const fetchLogs = async (
});
const newLogs = data.logs || [];
const actualStartTime = data.actualStartTime;
const actualEndTime = data.actualEndTime;
if (reset) {
// 初始查询
logsRenderData.value = newLogs.reverse(); // 倒序显示,最新的在前面
currentStartTime.value = actualStartTime || queryStartTime;
currentEndTime.value = actualEndTime || queryEndTime;
hasMore.value = newLogs.length > 0 && actualStartTime !== null;
} else {
// 继续查询
logsRenderData.value.push(...newLogs.reverse()); // 倒序显示,追加在后面
currentStartTime.value = actualStartTime || queryStartTime;
// 如果没有返回更多数据或者实际查询时间没有变化,说明没有更多数据了
hasMore.value = newLogs.length > 0 && actualStartTime !== null;
}
// 初始查询,保存实际查询开始时间和重置偏移量
actualQueryStartTime.value = data.actualStartTime || queryStartTime;
queryOffsetMinutes.value = 0;
// 倒序显示,最新的在前面
logsRenderData.value = newLogs.reverse();
// 如果有数据就设置有更多数据可加载
hasMore.value = newLogs.length > 0;
} catch (err) {
console.error('获取预拉取订单日志失败:', err);
Message.error({
@@ -218,8 +202,63 @@ const fetchLogs = async (
});
} finally {
setLoading(false);
}
} else {
// 继续查询:基于首次查询的实际开始时间往前递减
if (!actualQueryStartTime.value) {
hasMore.value = false;
return;
}
// 检查是否已经查询了最大时间范围
if (queryOffsetMinutes.value >= maxQueryMinutes) {
hasMore.value = false;
return;
}
loadingMore.value = true;
queryOffsetMinutes.value++; // 增加偏移量
// 计算查询时间段每次只查询1分钟的数据
// 第N次查询实际开始时间 - N分钟 这一整分钟的数据
const queryMinute = dayjs(actualQueryStartTime.value).subtract(
queryOffsetMinutes.value,
'minute'
);
const queryStartTime = queryMinute
.startOf('minute')
.format('YYYY-MM-DD HH:mm:ss');
const queryEndTime = queryMinute
.endOf('minute')
.format('YYYY-MM-DD HH:mm:ss');
try {
const { data } = await jdV2PrefetchClient.apiJdV2PrefetchLogsGet({
startTime: queryStartTime,
endTime: queryEndTime
});
const newLogs = data.logs || [];
// 将新日志倒序显示,追加到现有日志后面
logsRenderData.value.push(...newLogs.reverse());
// 检查是否达到最大查询范围,决定是否还有更多数据
hasMore.value = queryOffsetMinutes.value < maxQueryMinutes;
} catch (err) {
console.error('获取预拉取订单日志失败:', err);
Message.error({
content: '获取预拉取订单日志失败',
closable: true
});
// 出错时回滚偏移量
queryOffsetMinutes.value--;
} finally {
loadingMore.value = false;
}
}
};
const loadMoreLogs = async () => {