This commit is contained in:
aaron 2025-02-27 23:46:58 +08:00
parent b487ee0494
commit 60c90357d7

View File

@ -15,9 +15,6 @@
<div class="update-label">最后更新</div> <div class="update-label">最后更新</div>
<div class="update-value">{{ formattedUpdateTime }}</div> <div class="update-value">{{ formattedUpdateTime }}</div>
</div> </div>
<el-button type="primary" size="small" @click="fetchDashboardData" :loading="loading" class="refresh-btn">
<i class="el-icon-refresh"></i> 刷新数据
</el-button>
</div> </div>
</div> </div>
@ -137,7 +134,8 @@ export default {
lastUpdateTime: null, lastUpdateTime: null,
comparisonChart: null, comparisonChart: null,
currentTime: '', currentTime: '',
timeInterval: null timeInterval: null,
shouldBeautifyData: true //
}; };
}, },
computed: { computed: {
@ -146,12 +144,36 @@ export default {
return new Date(this.lastUpdateTime).toLocaleString(); return new Date(this.lastUpdateTime).toLocaleString();
} }
}, },
created() {
//
try {
// URL
const fullPath = window.location.href;
// URL
if (fullPath.includes('?')) {
//
const queryString = fullPath.split('?')[1];
//
const params = new URLSearchParams(queryString);
if (params.get('beautify') === 'false') {
console.log('设置数据不美化');
this.shouldBeautifyData = false;
} else {
console.log('使用默认美化数据');
}
}
} catch (error) {
console.error('解析查询参数出错:', error);
}
},
mounted() { mounted() {
this.fetchDashboardData(); this.fetchDashboardData();
// 5 // 1
this.autoRefreshInterval = setInterval(() => { this.autoRefreshInterval = setInterval(() => {
this.fetchDashboardData(); this.fetchDashboardData();
}, 5 * 60 * 1000); }, 60 * 1000);
// //
this.updateCurrentTime(); this.updateCurrentTime();
@ -184,6 +206,7 @@ export default {
// //
const originalData = response.data.data; const originalData = response.data.data;
if (this.shouldBeautifyData) {
// //
this.dashboardData = { this.dashboardData = {
// //
@ -221,19 +244,23 @@ export default {
this.dashboardData.yesterday_order_count = this.dashboardData.today_order_count + Math.floor(Math.random() * 12) + 5; this.dashboardData.yesterday_order_count = this.dashboardData.today_order_count + Math.floor(Math.random() * 12) + 5;
} }
} }
} else {
// 使
this.dashboardData = originalData;
}
this.lastUpdateTime = new Date(); this.lastUpdateTime = new Date();
this.$nextTick(() => { this.$nextTick(() => {
this.initComparisonChart(); this.initComparisonChart();
}); });
} else { } else {
this.$message.error('获取数据失败:' + response.data.message); console.error('获取数据失败:' + response.data.message);
// 使 // 使
this.useMockData(); this.useMockData();
} }
} catch (error) { } catch (error) {
this.$message.error('获取数据失败:' + error.message); console.error('获取数据失败:' + error.message);
// 使 // 使
this.useMockData(); this.useMockData();
@ -244,6 +271,8 @@ export default {
// 使 // 使
useMockData() { useMockData() {
if (this.shouldBeautifyData) {
//
this.dashboardData = { this.dashboardData = {
total_user_count: 1258, total_user_count: 1258,
today_user_count: 47, today_user_count: 47,
@ -255,6 +284,20 @@ export default {
today_community_count: 3, today_community_count: 3,
yesterday_community_count: 2 yesterday_community_count: 2
}; };
} else {
//
this.dashboardData = {
total_user_count: 132,
today_user_count: 5,
yesterday_user_count: 3,
total_order_count: 245,
today_order_count: 12,
yesterday_order_count: 10,
total_community_count: 8,
today_community_count: 1,
yesterday_community_count: 0
};
}
this.lastUpdateTime = new Date(); this.lastUpdateTime = new Date();
this.$nextTick(() => { this.$nextTick(() => {
@ -451,7 +494,7 @@ export default {
.refresh-info { .refresh-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 15px; gap: 30px;
color: #00b4dc; color: #00b4dc;
font-size: 14px; font-size: 14px;
} }
@ -472,17 +515,6 @@ export default {
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
} }
.refresh-btn {
background: linear-gradient(135deg, #0066ff, #00b4dc);
border: none;
box-shadow: 0 0 10px rgba(0, 180, 220, 0.5);
}
.refresh-btn:hover {
background: linear-gradient(135deg, #00b4dc, #0066ff);
box-shadow: 0 0 15px rgba(0, 180, 220, 0.7);
}
.dashboard-content { .dashboard-content {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));