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

发布于:2025-07-16 ⋅ 阅读:(22) ⋅ 点赞:(0)

前言

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

在这里插入图片描述

本文目标:

重构仪表盘页面,展示以下关键信息:

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

准备工作

  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'

网站公告

今日签到

点亮在社区的每一天
去签到