三十二、【核心功能改造】数据驱动：重构仪表盘与关键指标可视化

前言

仪表盘是用户进入系统后最先看到的页面，它应该能直观地展示系统的核心状态和关键指标。一个设计良好的仪表盘能帮助团队快速把握项目进度、测试覆盖情况和质量趋势。

本文目标：

重构仪表盘页面，展示以下关键信息：

• 概览卡片： 项目总数、功能用例总数、接口用例总数。
• 图表统计：
  • 用例类型分布： 通过饼图展示功能用例和接口用例的占比。
  • 按项目统计接口用例数： 通过柱状图展示每个项目的接口用例数量。
  • 按用户统计用例创建数： 通过柱状图展示不同用户创建的测试用例数量，了解团队成员的贡献度。

准备工作

1. 前端项目就绪： test-platform/frontend 项目可以正常运行 (npm run dev)。
2. 后端 API 运行中： Django 后端服务运行。
3. Element Plus 集成完毕。
4. vue-echarts 图表库已安装： 在前端项目根目录运行 npm install echarts vue-echarts --save。
5. 拥有一些测试数据： 创建多个项目、不同类型的测试用例（功能/接口），并由不同用户创建，以便统计图表能展示出多样化的数据。

第一部分：后端实现 - 统计 API

新建一个 API 来提供仪表盘所需的所有统计数据，以避免前端多次请求。

1. 创建 DashboardStatsView

打开 test-platform/api/views.py，添加一个新的 APIView：

# test-platform/api/views.py
from django.db.models import Count # 导入 Count
from rest_framework import viewsets, filters, generics, permissions, filters, pagination, status as http_status# ... (其他 ViewSet) ...class DashboardStatsView(APIView):"""提供仪表盘所需的统计数据GET /api/dashboard/stats/"""permission_classes = [permissions.IsAuthenticated] # 只有登录用户才能查看def get(self, request, *args, **kwargs):# 1. 概览统计project_count = Project.objects.count()# 2. 按用例类型统计case_type_stats = TestCase.objects.values('case_type').annotate(count=Count('id'))# 3. 按项目统计接口用例数 (只统计接口用例)project_case_stats = TestCase.objects.filter(case_type='api') \.values('module__project__name') \.annotate(count=Count('id')) \.order_by('-count')# 4. 按用户创建用例统计 (按 maintainer 字段)# 注意: maintainer 是 CharField，如果想按 User 对象统计，TestCase 模型需添加 creator 字段user_case_stats = TestCase.objects.exclude(maintainer__isnull=True).exclude(maintainer__exact='') \.values('maintainer') \.annotate(count=Count('id')) \.order_by('-count'