三十二、【核心功能改造】数据驱动:重构仪表盘与关键指标可视化
前言
仪表盘是用户进入系统后最先看到的页面,它应该能直观地展示系统的核心状态和关键指标。一个设计良好的仪表盘能帮助团队快速把握项目进度、测试覆盖情况和质量趋势。
本文目标:
重构仪表盘页面,展示以下关键信息:
- 概览卡片: 项目总数、功能用例总数、接口用例总数。
- 图表统计:
- 用例类型分布: 通过饼图展示功能用例和接口用例的占比。
- 按项目统计接口用例数: 通过柱状图展示每个项目的接口用例数量。
- 按用户统计用例创建数: 通过柱状图展示不同用户创建的测试用例数量,了解团队成员的贡献度。
准备工作
- 前端项目就绪:
test-platform/frontend
项目可以正常运行 (npm run dev
)。 - 后端 API 运行中: Django 后端服务运行。
- Element Plus 集成完毕。
vue-echarts
图表库已安装: 在前端项目根目录运行npm install echarts vue-echarts --save
。- 拥有一些测试数据: 创建多个项目、不同类型的测试用例(功能/接口),并由不同用户创建,以便统计图表能展示出多样化的数据。
第一部分:后端实现 - 统计 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'