From 3fc5433e0c4229cab21de440eb31efa1f173f462 Mon Sep 17 00:00:00 2001
From: zpc <zpc1131@gamil.com>
Date: Sun, 15 Mar 2026 23:33:20 +0800
Subject: [PATCH] 2121

---
 docs/报告页面开发清单.md              |   2 +-
 .../Pages/Report/SubAbilities.cshtml          | 102 +++++++++++++++++-
 .../Pages/Report/SubAbilities.cshtml.cs       |  18 ++++
 .../wwwroot/css/pages/sub-abilities.css       |  40 +++++++
 4 files changed, 158 insertions(+), 4 deletions(-)
 create mode 100644 server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/sub-abilities.css

diff --git a/docs/报告页面开发清单.md b/docs/报告页面开发清单.md
index cb05d7b..c3497a3 100644
--- a/docs/报告页面开发清单.md
+++ b/docs/报告页面开发清单.md
@@ -11,7 +11,7 @@
 | 5 | 较弱智能详情① | `/report/weaker-intelligence?recordId=3&rank=1` | 网页截图 | 绿色模板 rank=1/倒数第1（结论文本） | ✅ 已完成 |
 | 6 | 较弱智能详情② | `/report/weaker-intelligence?recordId=3&rank=2` | 网页截图 | 绿色模板 rank=2/倒数第2（结论文本） | ✅ 已完成 |
 | 7 | 个人特质分析 | `/report/personality-traits` | 网页截图 | CategoryType=2 结果+结论 | ⬜ 骨架 |
-| 8 | 40项细分能力分析 | `/report/sub-abilities` | 网页截图 | CategoryType=3 结果+结论 | ⬜ 骨架 |
+| 8 | 40项细分能力分析 | `/report/sub-abilities?recordId=3` | 网页截图 | CategoryType=3 雷达图（40项分数） | ✅ 已完成 |
 | 9 | 先天学习类型分析 | `/report/learning-types` | 网页截图 | CategoryType=4 结果+结论 | ⬜ 骨架 |
 | 10 | 学习关键能力分析 | `/report/learning-abilities` | 网页截图 | CategoryType=5 结果+结论 | ⬜ 骨架 |
 | 11 | 科学大脑类型分析 | `/report/brain-types` | 网页截图 | CategoryType=6 结果+结论 | ⬜ 骨架 |
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml
index 28abd8a..e342bcb 100644
--- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml
@@ -2,7 +2,8 @@
 @model MiAssessment.Api.Pages.Report.SubAbilitiesModel
 @{
     ViewData["Title"] = "40项细分能力分析";
-    ViewData["PageTitle"] = "40项细分能力分析";
+    ViewData["PageTitle"] = null;
+    ViewData["PageNumber"] = null;
 }
 
 @if (!Model.IsSuccess)
@@ -13,7 +14,102 @@
 }
 else
 {
-    <div class="sub-abilities-content">
-        <p class="no-content">40项细分能力分析占位 - 具体内容后续实现</p>
+    <div class="sa-page">
+        <!-- 板块标题 -->
+        <div class="sa-section-title">3、个人40项细分能力</div>
+
+        <!-- 副标题 -->
+        <div class="sa-subtitle">个人能力情况</div>
+
+        <!-- 雷达图 -->
+        <div class="sa-chart-wrap">
+            <canvas id="radarChart" width="800" height="640"></canvas>
+        </div>
     </div>
 }
+
+@section Styles {
+    <link rel="stylesheet" href="/css/pages/sub-abilities.css" />
+}
+
+@section Scripts {
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+    <script>
+        window.__deferRenderComplete = true;
+
+        // 雷达图数据
+        var labels = [@Html.Raw(string.Join(",", Model.AbilityItems.Select(x => $"\"{x.CategoryName}\"")))];
+        var scores = [@Html.Raw(string.Join(",", Model.AbilityItems.Select(x => x.Score.ToString("F0"))))];
+        var maxScore = 20;
+
+        var ctx = document.getElementById('radarChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'radar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: scores,
+                    backgroundColor: 'rgba(74, 144, 226, 0.12)',
+                    borderColor: 'rgba(74, 144, 226, 0.8)',
+                    borderWidth: 2,
+                    pointBackgroundColor: 'rgba(74, 144, 226, 0.9)',
+                    pointBorderColor: '#fff',
+                    pointRadius: 3,
+                    pointBorderWidth: 1
+                }]
+            },
+            options: {
+                responsive: false,
+                plugins: { legend: { display: false } },
+                scales: {
+                    r: {
+                        beginAtZero: true,
+                        max: maxScore,
+                        ticks: {
+                            stepSize: 5,
+                            font: { size: 10 },
+                            backdropColor: 'transparent',
+                            color: '#999'
+                        },
+                        pointLabels: {
+                            font: { size: 12, weight: '500' },
+                            color: '#333',
+                            padding: 8
+                        },
+                        grid: {
+                            color: 'rgba(0,0,0,0.06)'
+                        },
+                        angleLines: {
+                            color: 'rgba(0,0,0,0.06)'
+                        }
+                    }
+                }
+            },
+            plugins: [{
+                // 在数据点旁显示分数
+                afterDatasetsDraw: function(chart) {
+                    var meta = chart.getDatasetMeta(0);
+                    var ctx2 = chart.ctx;
+                    ctx2.font = 'bold 11px sans-serif';
+                    ctx2.fillStyle = '#4A90E2';
+                    ctx2.textBaseline = 'middle';
+                    meta.data.forEach(function(point, i) {
+                        var val = scores[i];
+                        var cx = chart.scales.r.xCenter;
+                        var cy = chart.scales.r.yCenter;
+                        var dx = point.x - cx;
+                        var dy = point.y - cy;
+                        var dist = Math.sqrt(dx * dx + dy * dy);
+                        if (dist === 0) dist = 1;
+                        var ox = (dx / dist) * 14;
+                        var oy = (dy / dist) * 14;
+                        ctx2.textAlign = 'center';
+                        ctx2.fillText(val, point.x + ox, point.y + oy);
+                    });
+                }
+            }]
+        });
+
+        document.body.setAttribute('data-render-complete', 'true');
+    </script>
+}
diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml.cs b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml.cs
index 83c8b0b..0c25ddd 100644
--- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml.cs
+++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/SubAbilities.cshtml.cs
@@ -1,4 +1,5 @@
 using MiAssessment.Core.Interfaces;
+using MiAssessment.Model.Models.Report;
 
 namespace MiAssessment.Api.Pages.Report;
 
@@ -7,8 +8,25 @@ namespace MiAssessment.Api.Pages.Report;
 /// </summary>
 public class SubAbilitiesModel : ReportPageModelBase
 {
+    /// <summary>
+    /// 40项细分能力数据（按 CategoryId 顺序）
+    /// </summary>
+    public List<CategoryResultDataDto> AbilityItems { get; set; } = new();
+
     public SubAbilitiesModel(IReportDataService reportDataService)
         : base(reportDataService)
     {
     }
+
+    protected override Task OnDataLoadedAsync()
+    {
+        if (ReportData?.ResultsByType != null &&
+            ReportData.ResultsByType.TryGetValue(3, out var items))
+        {
+            // 按 CategoryId 顺序排列
+            AbilityItems = items.OrderBy(x => x.CategoryId).ToList();
+        }
+
+        return Task.CompletedTask;
+    }
 }
diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/sub-abilities.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/sub-abilities.css
new file mode 100644
index 0000000..45de0bf
--- /dev/null
+++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/sub-abilities.css
@@ -0,0 +1,40 @@
+/* ============================================
+   40项细分能力分析页样式
+   页面固定尺寸：1309×926px
+   ============================================ */
+
+.sa-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}
+
+/* 板块标题（左上角） */
+.sa-section-title {
+    align-self: flex-start;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 10px;
+}
+
+/* 红色副标题（居中） */
+.sa-subtitle {
+    font-size: 22px;
+    font-weight: 700;
+    color: #C41A1A;
+    text-align: center;
+    margin-bottom: 6px;
+    letter-spacing: 4px;
+}
+
+/* 雷达图容器 */
+.sa-chart-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+}