重新开始!
This commit is contained in:
@@ -14,8 +14,6 @@
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<!-- Axios -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<el-table-column label="操作" width="280">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@@ -59,6 +59,12 @@
|
||||
@click="toggleRobotStatus(scope.row)">
|
||||
{% raw %}{{ scope.row.robot_status === 'enabled' ? '关闭' : '启用' }}{% endraw %}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="info"
|
||||
@click="viewMessageTrend(scope.row)">
|
||||
消息趋势
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -130,6 +136,17 @@
|
||||
<el-button type="primary" @click="submitAddGroup">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 群组消息趋势对话框 -->
|
||||
<el-dialog
|
||||
title="群组消息趋势"
|
||||
:visible.sync="messageTrendDialogVisible"
|
||||
width="70%">
|
||||
<div class="chart-container">
|
||||
<h3>{% raw %}{{ currentGroupName }}{% endraw %} 消息趋势</h3>
|
||||
<canvas id="messageTrendChart" width="800" height="400"></canvas>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -157,6 +174,12 @@
|
||||
{ required: true, message: '请输入群组ID', trigger: 'blur' },
|
||||
{ pattern: /^\S+$/, message: '群组ID不能包含空格', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
// 添加消息趋势相关数据
|
||||
messageTrendDialogVisible: false,
|
||||
messageTrendData: {
|
||||
dates: [],
|
||||
counts: []
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -377,6 +400,72 @@
|
||||
this.$message.error('批量移除失败: ' + error.message);
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 添加查看消息趋势的方法
|
||||
viewMessageTrend(group) {
|
||||
this.currentGroupId = group.group_id;
|
||||
this.currentGroupName = group.group_name || group.group_id;
|
||||
|
||||
// 获取消息趋势数据
|
||||
const days = parseInt(this.timeRange || 7);
|
||||
axios.get(`/api/robot/group/${group.group_id}/message_trend?days=${days}`)
|
||||
.then(response => {
|
||||
if (response.data.success) {
|
||||
this.messageTrendData = response.data.data || { dates: [], counts: [] };
|
||||
this.messageTrendDialogVisible = true;
|
||||
|
||||
// 在下一个DOM更新周期渲染图表
|
||||
this.$nextTick(() => {
|
||||
this.renderMessageTrendChart();
|
||||
});
|
||||
} else {
|
||||
this.$message.error('加载消息趋势失败');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('加载消息趋势失败:', error);
|
||||
this.$message.error('加载消息趋势失败: ' + error.message);
|
||||
});
|
||||
},
|
||||
// 渲染消息趋势图表
|
||||
renderMessageTrendChart() {
|
||||
const ctx = document.getElementById('messageTrendChart').getContext('2d');
|
||||
|
||||
// 销毁旧图表
|
||||
if (this.charts && this.charts.messageTrendChart) {
|
||||
this.charts.messageTrendChart.destroy();
|
||||
}
|
||||
|
||||
// 确保charts对象存在
|
||||
if (!this.charts) {
|
||||
this.charts = {};
|
||||
}
|
||||
|
||||
// 创建新图表
|
||||
this.charts.messageTrendChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: this.messageTrendData.dates,
|
||||
datasets: [
|
||||
{
|
||||
label: '消息数量',
|
||||
data: this.messageTrendData.counts,
|
||||
fill: false,
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.6)',
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
tension: 0.1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user