diff --git a/apps/web-antd/src/views/ops/traffic/index.vue b/apps/web-antd/src/views/ops/traffic/index.vue index 8d77d9033..1444ab1b0 100644 --- a/apps/web-antd/src/views/ops/traffic/index.vue +++ b/apps/web-antd/src/views/ops/traffic/index.vue @@ -79,9 +79,10 @@ const trendDateRange = ref<[dayjs.Dayjs, dayjs.Dayjs]>([ dayjs().subtract(6, 'day'), dayjs(), ]); -// 限制趋势范围最多1个月 +// 限制趋势范围:不能选未来,最早30天前 function disabledTrendDate(current: dayjs.Dayjs) { - return current && current > dayjs().endOf('day'); + if (!current) return false; + return current > dayjs().endOf('day') || current < dayjs().subtract(30, 'day').startOf('day'); } const realtimeData = ref({ @@ -293,10 +294,9 @@ function getTrendChartOptions(): ECOption { async function loadGlobalData() { loading.value = true; try { - const dateStr = hourlyDate.value.format('YYYY-MM-DD'); const [startDate, endDate] = trendDateRange.value; const [realtime, trend] = await Promise.all([ - getTrafficRealtime(dateStr), + getTrafficRealtime(), getTrafficTrend({ startDate: startDate.format('YYYY-MM-DD'), endDate: endDate.format('YYYY-MM-DD'), @@ -319,10 +319,9 @@ async function loadGlobalData() { async function loadAreaData(areaIds: number[]) { loading.value = true; try { - const dateStr = hourlyDate.value.format('YYYY-MM-DD'); const [startDate, endDate] = trendDateRange.value; const [realtime, trend] = await Promise.all([ - getAreaRealtime(areaIds, dateStr), + getAreaRealtime(areaIds), getAreaTrend({ areaIds: areaIds.join(','), startDate: startDate.format('YYYY-MM-DD'), @@ -349,6 +348,29 @@ async function loadData() { : loadGlobalData()); } +/** 仅刷新小时趋势图(不影响统计指标) */ +async function loadHourlyData() { + try { + const dateStr = hourlyDate.value.format('YYYY-MM-DD'); + let realtime: TrafficRealtimeResp; + if (selectedAreaId.value && selectedAreaIds.value.length > 0) { + realtime = await getAreaRealtime(selectedAreaIds.value, dateStr); + } else { + realtime = await getTrafficRealtime(dateStr); + } + // 只更新小时趋势数据,不覆盖统计指标 + realtimeData.value = { + ...realtimeData.value, + hourlyTrend: realtime.hourlyTrend, + yesterdayHourlyTrend: realtime.yesterdayHourlyTrend, + }; + await nextTick(); + renderHourlyChart(getHourlyChartOptions()); + } catch { + // 静默失败 + } +} + // ========== 统计指标 ========== function getStatTotalIn(): number { @@ -424,13 +446,16 @@ const statDailyAvg = computed(() => { return Math.round(totalAll / t.inData.length); }); -// ========== 日期变化时重新加载(防抖避免并发请求) ========== +// ========== 日期变化时重新加载 ========== const debouncedLoadData = useDebounceFn(loadData, 300); +const debouncedLoadHourly = useDebounceFn(loadHourlyData, 300); +// 小时趋势日期变化:仅刷新小时趋势图 watch(hourlyDate, () => { - debouncedLoadData(); + debouncedLoadHourly(); }); +// 趋势日期范围变化:刷新趋势图和统计指标 watch(trendDateRange, () => { debouncedLoadData(); });