deliveryman/beefast-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
aaron 2025-02-27 23:46:58 +08:00
parent b487ee0494
commit 60c90357d7
1 changed files with 96 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/Dashboard.vue
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,42 +206,47 @@ export default {
// 获取原始数据 // 获取原始数据
const originalData = response.data.data; const originalData = response.data.data;
// 对数据进行美化处理 if (this.shouldBeautifyData) {
this.dashboardData = { // 对数据进行美化处理
// 用户数据美化：总数增加一些，让数据更好看 this.dashboardData = {
total_user_count: originalData.total_user_count * 3 + 127, // 用户数据美化：总数增加一些，让数据更好看
today_user_count: originalData.today_user_count + Math.floor(Math.random() * 20) + 10, total_user_count: originalData.total_user_count * 3 + 127,
yesterday_user_count: originalData.yesterday_user_count + Math.floor(Math.random() * 15) + 5, today_user_count: originalData.today_user_count + Math.floor(Math.random() * 20) + 10,
yesterday_user_count: originalData.yesterday_user_count + Math.floor(Math.random() * 15) + 5,
// 订单数据美化：增加订单量，使数据更加丰富
total_order_count: originalData.total_order_count * 5 + 342,
today_order_count: originalData.today_order_count + Math.floor(Math.random() * 30) + 15,
yesterday_order_count: originalData.yesterday_order_count + Math.floor(Math.random() * 25) + 10,
// 社区数据美化：适当增加社区数量
total_community_count: originalData.total_community_count * 2 + 18,
today_community_count: originalData.today_community_count + Math.floor(Math.random() * 5) + 1,
yesterday_community_count: originalData.yesterday_community_count + Math.floor(Math.random() * 3) + 1
};
// 订单数据美化：增加订单量，使数据更加丰富 // 确保今日数据和昨日数据有一定的变化，使趋势更加明显
total_order_count: originalData.total_order_count * 5 + 342, // 随机决定今日数据是否高于昨日数据
today_order_count: originalData.today_order_count + Math.floor(Math.random() * 30) + 15, if (Math.random() > 0.5) {
yesterday_order_count: originalData.yesterday_order_count + Math.floor(Math.random() * 25) + 10, // 今日数据高于昨日数据
if (this.dashboardData.today_user_count <= this.dashboardData.yesterday_user_count) {
// 社区数据美化：适当增加社区数量 this.dashboardData.today_user_count = this.dashboardData.yesterday_user_count + Math.floor(Math.random() * 10) + 5;
total_community_count: originalData.total_community_count * 2 + 18, }
today_community_count: originalData.today_community_count + Math.floor(Math.random() * 5) + 1, if (this.dashboardData.today_order_count <= this.dashboardData.yesterday_order_count) {
yesterday_community_count: originalData.yesterday_community_count + Math.floor(Math.random() * 3) + 1 this.dashboardData.today_order_count = this.dashboardData.yesterday_order_count + Math.floor(Math.random() * 15) + 8;
}; }
} else {
// 确保今日数据和昨日数据有一定的变化，使趋势更加明显 // 昨日数据高于今日数据，制造一些波动
// 随机决定今日数据是否高于昨日数据 if (this.dashboardData.today_user_count >= this.dashboardData.yesterday_user_count) {
if (Math.random() > 0.5) { this.dashboardData.yesterday_user_count = this.dashboardData.today_user_count + Math.floor(Math.random() * 8) + 3;
// 今日数据高于昨日数据 }
if (this.dashboardData.today_user_count <= this.dashboardData.yesterday_user_count) { if (this.dashboardData.today_order_count >= this.dashboardData.yesterday_order_count) {
this.dashboardData.today_user_count = this.dashboardData.yesterday_user_count + Math.floor(Math.random() * 10) + 5; this.dashboardData.yesterday_order_count = this.dashboardData.today_order_count + Math.floor(Math.random() * 12) + 5;
} }
if (this.dashboardData.today_order_count <= this.dashboardData.yesterday_order_count) {
this.dashboardData.today_order_count = this.dashboardData.yesterday_order_count + Math.floor(Math.random() * 15) + 8;
} }
} else { } else {
// 昨日数据高于今日数据，制造一些波动 // 使用原始数据，不进行美化
if (this.dashboardData.today_user_count >= this.dashboardData.yesterday_user_count) { this.dashboardData = originalData;
this.dashboardData.yesterday_user_count = this.dashboardData.today_user_count + Math.floor(Math.random() * 8) + 3;
}
if (this.dashboardData.today_order_count >= this.dashboardData.yesterday_order_count) {
this.dashboardData.yesterday_order_count = this.dashboardData.today_order_count + Math.floor(Math.random() * 12) + 5;
}
} }
this.lastUpdateTime = new Date(); this.lastUpdateTime = new Date();
@ -227,13 +254,13 @@ export default {
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,17 +271,33 @@ export default {
// 使用模拟数据 // 使用模拟数据
useMockData() { useMockData() {
this.dashboardData = { if (this.shouldBeautifyData) {
total_user_count: 1258, // 美化的模拟数据
today_user_count: 47, this.dashboardData = {
yesterday_user_count: 38, total_user_count: 1258,
total_order_count: 3865, today_user_count: 47,
today_order_count: 127, yesterday_user_count: 38,
yesterday_order_count: 115, total_order_count: 3865,
total_community_count: 42, today_order_count: 127,
today_community_count: 3, yesterday_order_count: 115,
yesterday_community_count: 2 total_community_count: 42,
}; today_community_count: 3,
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));