三十二、【核心功能改造】數據驅動：重構儀表盤與關鍵指標可視化
- 前言
- 準備工作
- 第一部分：后端實現 - 統計 API
- 1. 創建 `DashboardStatsView`
- 2. 注冊統計 API 路由
- 3. 后端初步測試
- 第二部分：前端實現 - 重構儀表盤頁面
- 1. 創建 `api/dashboard.ts` API 服務
- 2. 重構 `HomeView.vue` (儀表盤頁面)
- 第三部分：全面測試與驗證
- 總結
前言
儀表盤是用戶進入系統后最先看到的頁面，它應該能直觀地展示系統的核心狀態和關鍵指標。一個設計良好的儀表盤能幫助團隊快速把握項目進度、測試覆蓋情況和質量趨勢。
本文目標：
重構儀表盤頁面，展示以下關鍵信息：
- 概覽卡片： 項目總數、功能用例總數、接口用例總數。
- 圖表統計：
- 用例類型分布： 通過餅圖展示功能用例和接口用例的占比。
- 按項目統計接口用例數： 通過柱狀圖展示每個項目的接口用例數量。
- 按用戶統計用例創建數： 通過柱狀圖展示不同用戶創建的測試用例數量，了解團隊成員的貢獻度。
準備工作
- 前端項目就緒：
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'
)