Browse Source

SWR (Stale-While-Revalidate) 策略实现无感刷新;

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
commit
ad79829304
  1. 35
      src/views/PlatformData/UserOverview.vue

35
src/views/PlatformData/UserOverview.vue

@ -251,6 +251,12 @@ const formatDate = (date) => {
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}; };
const isOverviewLoaded = ref(false);
const isDetailLoaded = ref(false);
const chartMemberInstance = ref(null);
const chartNewOldInstance = ref(null);
const fetchData = async () => { const fetchData = async () => {
try { try {
const res = await getUserOverviewList(); const res = await getUserOverviewList();
@ -259,14 +265,21 @@ const fetchData = async () => {
if (res && res.list) { if (res && res.list) {
overviewData.value = res.list; overviewData.value = res.list;
initCharts(); initCharts();
isOverviewLoaded.value = true;
} }
} catch (error) { } catch (error) {
console.error('获取用户概览数据失败:', error); console.error('获取用户概览数据失败:', error);
} }
}; };
const fetchDetailData = async () => {
const fetchDetailData = async (forceUpdate = false) => {
//
const shouldShowLoading = !isDetailLoaded.value || forceUpdate;
if (shouldShowLoading) {
loading.value = true; loading.value = true;
}
let params = {}; let params = {};
if (dateRange.value && dateRange.value.length === 2) { if (dateRange.value && dateRange.value.length === 2) {
params.start_time = formatDate(dateRange.value[0]); params.start_time = formatDate(dateRange.value[0]);
@ -326,21 +339,25 @@ const fetchDetailData = async () => {
updateBarChart(data.chart, data.new_source || [], data.old_source || []); updateBarChart(data.chart, data.new_source || [], data.old_source || []);
}); });
} }
isDetailLoaded.value = true;
} }
} catch(e) { } catch(e) {
console.error('获取数据明细失败:', e); console.error('获取数据明细失败:', e);
} finally { } finally {
if (shouldShowLoading) {
loading.value = false; loading.value = false;
} }
}
}; };
const handleSearch = () => { const handleSearch = () => {
fetchDetailData();
fetchDetailData(true);
}; };
const handleReset = () => { const handleReset = () => {
dateRange.value = ''; dateRange.value = '';
fetchDetailData();
fetchDetailData(true);
}; };
const handleExport = async () => { const handleExport = async () => {
@ -375,7 +392,11 @@ const initCharts = () => {
nextTick(() => { nextTick(() => {
// Chart 1: / // Chart 1: /
if (chartMemberRef.value) { if (chartMemberRef.value) {
const chart1 = echarts.init(chartMemberRef.value);
let chart1 = chartMemberInstance.value;
if (!chart1) {
chart1 = echarts.init(chartMemberRef.value);
chartMemberInstance.value = chart1;
}
chart1.setOption({ chart1.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -399,7 +420,11 @@ const initCharts = () => {
// Chart 2: // Chart 2:
if (chartNewOldRef.value) { if (chartNewOldRef.value) {
const chart2 = echarts.init(chartNewOldRef.value);
let chart2 = chartNewOldInstance.value;
if (!chart2) {
chart2 = echarts.init(chartNewOldRef.value);
chartNewOldInstance.value = chart2;
}
chart2.setOption({ chart2.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',

Loading…
Cancel
Save