调整为表格~~~

This commit is contained in:
liuwei
2025-03-26 14:36:21 +08:00
parent 7dcd0c491f
commit 3372b156bd

View File

@@ -151,8 +151,8 @@
<div v-else>
<div class="chart-container">
<h3>消息数量趋势</h3>
<!-- 使用Vue的条件渲染和循环来显示表格 -->
<div v-if="trendData.dates && trendData.dates.length > 0">
<!-- 添加 v-if 确保 trendData 存在 -->
<div v-if="trendData && trendData.dates && trendData.dates.length > 0">
<table class="el-table" style="width: 100%;">
<thead>
<tr>
@@ -180,8 +180,8 @@
</div>
<div v-else style="text-align: center; padding: 20px;">暂无数据</div>
<!-- 统计摘要 -->
<div v-if="trendData.dates && trendData.dates.length > 0" style="margin-top: 20px; padding: 15px; background-color: #f5f7fa; border-radius: 4px;">
<!-- 统计摘要 - 同样添加 v-if 确保 trendData 存在 -->
<div v-if="trendData && trendData.dates && trendData.dates.length > 0" style="margin-top: 20px; padding: 15px; background-color: #f5f7fa; border-radius: 4px;">
<h4 style="margin: 0 0 10px 0;">统计摘要</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 150px;">
@@ -522,25 +522,40 @@
this.trendLoading = false;
} else {
this.$message.error('加载消息趋势失败');
// 设置默认值
this.trendData = { dates: [], counts: [] };
this.trendLoading = false;
}
})
.catch(error => {
console.error('加载消息趋势失败:', error);
this.$message.error('加载消息趋势失败: ' + error.message);
// 设置默认值
this.trendData = { dates: [], counts: [] };
this.trendLoading = false;
});
},
// 计算百分比的方法
getPercentage(index) {
if (!this.trendData || !this.trendData.counts) return 0;
if (!this.trendData || !this.trendData.counts || !Array.isArray(this.trendData.counts)) return 0;
if (index < 0 || index >= this.trendData.counts.length) return 0;
const count = parseInt(this.trendData.counts[index] || 0);
return this.totalMessages > 0 ?
((count / this.totalMessages) * 100).toFixed(2) : 0;
},
// 确保在打开对话框时重置 trendData
viewMessageTrend(group) {
this.currentGroupId = group.group_id;
this.currentGroupName = group.group_name || group.group_id;
// 重置 trendData 为默认值
this.trendData = { dates: [], counts: [] };
this.trendDialogVisible = true;
}
// ... 保留其他方法 ...
// ... 其他方法保持不变 ...
}
});
</script>