加入指令数据统计，指令看板内容

2025-03-18 17:40:59 +08:00
parent 21f8fffca8
commit 1d7ee9f953
23 changed files with 2407 additions and 1 deletions
--- a/plugins/stats_dashboard/templates/plugins.html
+++ b/plugins/stats_dashboard/templates/plugins.html
@@ -0,0 +1,141 @@
+{% extends "base.html" %}
+
+{% block title %}插件统计 - 机器人统计看板{% endblock %}
+
+{% block content %}
+<!-- 插件统计 -->
+<div>
+    <el-row :gutter="20">
+        <el-col :span="24">
+            <el-card shadow="hover">
+                <div slot="header">
+                    <span>插件使用统计</span>
+                </div>
+                <el-table :data="pluginStats" style="width: 100%" border>
+                    <el-table-column prop="plugin_name" label="插件名称"></el-table-column>
+                    <el-table-column prop="total_calls" label="调用次数" sortable></el-table-column>
+                    <el-table-column prop="success_calls" label="成功次数" sortable></el-table-column>
+                    <el-table-column prop="error_calls" label="失败次数" sortable></el-table-column>
+                    <el-table-column label="成功率" sortable>
+                        <template slot-scope="scope">
+                            {{ (scope.row.success_calls / scope.row.total_calls * 100).toFixed(2) }}%
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="平均响应时间" sortable>
+                        <template slot-scope="scope">
+                            {{ scope.row.avg_response_time.toFixed(2) }}ms
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作">
+                        <template slot-scope="scope">
+                            <el-button size="mini" type="primary" @click="viewPluginTrend(scope.row)">查看趋势</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-card>
+        </el-col>
+    </el-row>
+    
+    <!-- 插件趋势对话框 -->
+    <el-dialog title="插件使用趋势" :visible.sync="pluginTrendVisible" width="70%">
+        <div class="chart-container">
+            <h3>{{ selectedPlugin ? selectedPlugin.plugin_name : '' }} 使用趋势</h3>
+            <canvas id="pluginTrendChart" width="800" height="400"></canvas>
+        </div>
+    </el-dialog>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    new Vue({
+        el: '#app',
+        mixins: [baseApp],
+        data() {
+            return {
+                pluginStats: [],
+                pluginTrendVisible: false,
+                selectedPlugin: null
+            }
+        },
+        mounted() {
+            this.currentView = '2';
+            this.loadData();
+        },
+        methods: {
+            loadData() {
+                const days = parseInt(this.timeRange);
+                this.loadPluginStats(days);
+            },
+            loadPluginStats(days) {
+                axios.get(`/api/plugin_stats?days=${days}`)
+                    .then(response => {
+                        if (response.data.success) {
+                            this.pluginStats = response.data.data || [];
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载插件统计数据出错:', error);
+                        this.$message.error('加载插件统计数据出错');
+                    });
+            },
+            viewPluginTrend(plugin) {
+                this.selectedPlugin = plugin;
+                this.pluginTrendVisible = true;
+                
+                // 加载插件趋势数据
+                const days = parseInt(this.timeRange);
+                axios.get(`/api/plugin_trend?days=${days}&plugin_name=${plugin.plugin_name}`)
+                    .then(response => {
+                        if (response.data.success) {
+                            const trendData = response.data.data || [];
+                            this.$nextTick(() => {
+                                this.renderPluginTrendChart(trendData, plugin.plugin_name);
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('加载插件趋势数据出错:', error);
+                        this.$message.error('加载插件趋势数据出错');
+                    });
+            },
+            renderPluginTrendChart(trendData, pluginName) {
+                const ctx = document.getElementById('pluginTrendChart').getContext('2d');
+                
+                // 销毁旧图表
+                if (this.charts.pluginTrendChart) {
+                    this.charts.pluginTrendChart.destroy();
+                }
+                
+                // 准备数据
+                const labels = trendData.map(item => item.stat_date);
+                const data = trendData.map(item => item.total_calls);
+                
+                // 创建新图表
+                this.charts.pluginTrendChart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: `${pluginName} 调用次数`,
+                            data: data,
+                            fill: false,
+                            backgroundColor: 'rgba(153, 102, 255, 0.6)',
+                            borderColor: 'rgba(153, 102, 255, 1)',
+                            tension: 0.1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    });
+</script>
+{% endblock %}