From 2cdad00f86414af5e8078e1ca71e0576eb4b9b22 Mon Sep 17 00:00:00 2001 From: zpc Date: Mon, 16 Mar 2026 01:30:53 +0800 Subject: [PATCH] 21 --- docs/报告页面开发清单.md | 1 + .../Pages/Report/CharacterTypes.cshtml | 112 ++----------- .../Pages/Report/CharacterTypes.cshtml.cs | 2 +- .../Pages/Report/CharacterTypesChart.cshtml | 152 ++++++++++++++++++ .../Report/CharacterTypesChart.cshtml.cs | 48 ++++++ .../css/pages/character-types-chart.css | 40 +++++ .../wwwroot/css/pages/character-types.css | 15 +- 7 files changed, 256 insertions(+), 114 deletions(-) create mode 100644 server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml create mode 100644 server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml.cs create mode 100644 server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types-chart.css diff --git a/docs/报告页面开发清单.md b/docs/报告页面开发清单.md index a75c16b..4cb056b 100644 --- a/docs/报告页面开发清单.md +++ b/docs/报告页面开发清单.md @@ -20,6 +20,7 @@ | 10.1 | 学习关键能力结论 | `/report/learning-abilities-conclusion?recordId=3` | 网页截图 | CategoryType=5 最弱能力结论详情（全页文本卡片） | ✅ 已完成 | | 11 | 科学大脑类型分析 | `/report/brain-types?recordId=3` | 网页截图 | CategoryType=6 环形图+雷达图+竖向柱状图+结论 | ✅ 已完成 | | 12 | 性格类型分析 | `/report/character-types?recordId=3` | 网页截图 | CategoryType=7 环形图+雷达图+竖向柱状图+结论 | ✅ 已完成 | +| 12.1 | 性格类型-图表页 | `/report/character-types-chart?recordId=3` | 网页截图 | CategoryType=7 雷达图+横向柱状图（无结论） | ✅ 已完成 | | 13 | 未来关键发展能力分析 | `/report/future-abilities?recordId=3` | 网页截图 | CategoryType=8 雷达图+横向柱状图+结论 | ✅ 已完成 | ## 静态资源目录 diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml index 30d5f02..ba88234 100644 --- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml @@ -15,21 +15,18 @@ else {
-
7、性格类型分析
+
7、性格类型
-
性格类型
-
性格类型
-
性格类型排名
@@ -79,14 +76,12 @@ else var labels = [@Html.Raw(string.Join(",", Model.Items.Select(x => $"\"{x.CategoryName}\"")))]; var scores = [@Html.Raw(string.Join(",", Model.Items.Select(x => x.Score.ToString("F0"))))]; - var totalScore = @Model.TotalScore.ToString("F0"); var maxScore = Math.ceil(Math.max(...scores) / 2) * 2 + 2; var barLabels = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => $"\"{x.CategoryName}\"")))]; var barScores = [@Html.Raw(string.Join(",", Model.ItemsByScore.Select(x => x.Score.ToString("F0"))))]; var barMax = Math.ceil(Math.max(...barScores) / 2) * 2 + 2; - // 5种颜色 var colors = ['#4A90E2', '#52A06A', '#F5A623', '#E88B9C', '#2ABFBF']; var colorsAlpha = ['rgba(74,144,226,0.7)', 'rgba(82,160,106,0.7)', 'rgba(245,166,35,0.7)', 'rgba(232,139,156,0.7)', 'rgba(42,191,191,0.7)']; @@ -117,23 +112,8 @@ else var ctxDonut = document.getElementById('donutChart').getContext('2d'); new Chart(ctxDonut, { type: 'doughnut', - data: { - labels: labels, - datasets: [{ - data: scores, - backgroundColor: colors, - borderWidth: 2, - borderColor: '#fff' - }] - }, - options: { - responsive: false, - cutout: '50%', - plugins: { - legend: { display: false } - }, - layout: { padding: 40 } - }, + data: { labels: labels, datasets: [{ data: scores, backgroundColor: colors, borderWidth: 2, borderColor: '#fff' }] }, + options: { responsive: false, cutout: '50%', plugins: { legend: { display: false } }, layout: { padding: 40 } }, plugins: [donutLabelPlugin] }); @@ -142,93 +122,19 @@ else var ctxRadar = document.getElementById('radarChart').getContext('2d'); new Chart(ctxRadar, { type: 'radar', - data: { - labels: labels, - datasets: [{ - data: scores, - backgroundColor: 'rgba(232,139,156,0.12)', - borderColor: 'rgba(232,139,156,0.8)', - borderWidth: 2, - pointBackgroundColor: 'rgba(232,139,156,0.9)', - pointBorderColor: '#fff', - pointRadius: 4, - pointBorderWidth: 1 - }] - }, - options: { - responsive: false, - plugins: { legend: { display: false } }, - scales: { - r: { - beginAtZero: true, - max: maxScore, - ticks: { stepSize: 2, 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 = radarColor; - 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, dy = point.y - cy; - var dist = Math.sqrt(dx*dx+dy*dy) || 1; - ctx2.textAlign = 'center'; - ctx2.fillText(val, point.x + (dx/dist)*14, point.y + (dy/dist)*14); - }); - } - }] + data: { labels: labels, datasets: [{ data: scores, backgroundColor: 'rgba(232,139,156,0.12)', borderColor: 'rgba(232,139,156,0.8)', borderWidth: 2, pointBackgroundColor: 'rgba(232,139,156,0.9)', pointBorderColor: '#fff', pointRadius: 4, pointBorderWidth: 1 }] }, + options: { responsive: false, plugins: { legend: { display: false } }, scales: { r: { beginAtZero: true, max: maxScore, ticks: { stepSize: 2, 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 = radarColor; 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, dy = point.y - cy; var dist = Math.sqrt(dx*dx+dy*dy) || 1; ctx2.textAlign = 'center'; ctx2.fillText(val, point.x + (dx/dist)*14, point.y + (dy/dist)*14); }); } }] }); // ---- 竖向柱状图 ---- - var barDataLabelPlugin = { - id: 'barDataLabels', - afterDatasetsDraw: function(chart) { - var ctx = chart.ctx; - var meta = chart.getDatasetMeta(0); - var dataset = chart.data.datasets[0]; - ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; - ctx.textAlign = 'center'; - ctx.textBaseline = 'bottom'; - meta.data.forEach(function(bar, i) { - ctx.fillStyle = '#333'; - ctx.fillText(dataset.data[i], bar.x, bar.y - 4); - }); - } - }; + var barDataLabelPlugin = { id: 'barDataLabels', afterDatasetsDraw: function(chart) { var ctx = chart.ctx; var meta = chart.getDatasetMeta(0); var dataset = chart.data.datasets[0]; ctx.font = 'bold 12px "Microsoft YaHei", sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; meta.data.forEach(function(bar, i) { ctx.fillStyle = '#333'; ctx.fillText(dataset.data[i], bar.x, bar.y - 4); }); } }; var ctxBar = document.getElementById('barChart').getContext('2d'); new Chart(ctxBar, { type: 'bar', - data: { - labels: barLabels, - datasets: [{ - data: barScores, - backgroundColor: colorsAlpha, - borderColor: colors, - borderWidth: 0, - borderRadius: 3, - barThickness: 40 - }] - }, - options: { - responsive: false, - plugins: { legend: { display: false } }, - scales: { - y: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 10 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, - x: { ticks: { font: { size: 11 }, color: '#666' }, grid: { display: false } } - }, - layout: { padding: { top: 20 } } - }, + data: { labels: barLabels, datasets: [{ data: barScores, backgroundColor: colorsAlpha, borderColor: colors, borderWidth: 0, borderRadius: 3, barThickness: 40 }] }, + options: { responsive: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, max: barMax, ticks: { stepSize: 2, font: { size: 10 }, color: '#999' }, grid: { color: 'rgba(0,0,0,0.05)' } }, x: { ticks: { font: { size: 11 }, color: '#666' }, grid: { display: false } } }, layout: { padding: { top: 20 } } }, plugins: [barDataLabelPlugin] }); diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml.cs b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml.cs index 3f78ee1..4c1d5ee 100644 --- a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml.cs +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypes.cshtml.cs @@ -6,7 +6,7 @@ using MiAssessment.Model.Models.Report; namespace MiAssessment.Api.Pages.Report; /// -/// 性格类型分析页 PageModel +/// 性格类型分析页 PageModel（三图+结论卡片版） /// 路由：/report/character-types?recordId=3 /// CategoryType=7：孔雀（表达型）、老虎（支配型）、猫头鹰（精准型）、变色龙（整合型）、考拉（耐心型） /// diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml new file mode 100644 index 0000000..62fdc60 --- /dev/null +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml @@ -0,0 +1,152 @@ +@page "/report/character-types-chart" +@model MiAssessment.Api.Pages.Report.CharacterTypesChartModel +@{ + ViewData["Title"] = "性格类型"; + ViewData["PageTitle"] = null; + ViewData["PageNumber"] = null; +} + +@if (!Model.IsSuccess) +{ +
+

@Model.ErrorMessage

+
+} +else +{ +
+
7、性格类型
+ +
+ +
+
性格类型
+ +
+ +
+
性格类型排名
+ +
+
+
+} + +@section Styles { + +} + +@section Scripts { + + +} diff --git a/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml.cs b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml.cs new file mode 100644 index 0000000..303b2c5 --- /dev/null +++ b/server/MiAssessment/src/MiAssessment.Api/Pages/Report/CharacterTypesChart.cshtml.cs @@ -0,0 +1,48 @@ +using MiAssessment.Core.Interfaces; +using MiAssessment.Model.Data; +using MiAssessment.Model.Models.Report; + +namespace MiAssessment.Api.Pages.Report; + +/// +/// 性格类型分析-图表页 PageModel（雷达图+横向柱状图，无结论卡片） +/// 路由：/report/character-types-chart?recordId=3 +/// CategoryType=7 +/// +public class CharacterTypesChartModel : ReportPageModelBase +{ + /// + /// 按 CategoryId 排序（雷达图用） + /// + public List Items { get; set; } = new(); + + /// + /// 按分数降序（柱状图用） + /// + public List ItemsByScore { get; set; } = new(); + + public CharacterTypesChartModel(IReportDataService reportDataService) + : base(reportDataService) + { + } + + protected override Task OnDataLoadedAsync() + { + if (ReportData?.ResultsByType == null || + !ReportData.ResultsByType.TryGetValue(7, out var allItems)) + { + ErrorMessage = "缺少性格类型数据"; + return Task.CompletedTask; + } + + Items = allItems.OrderBy(x => x.CategoryId).ToList(); + if (Items.Count == 0) + { + ErrorMessage = "未找到性格类型数据"; + return Task.CompletedTask; + } + + ItemsByScore = Items.OrderByDescending(x => x.Score).ToList(); + return Task.CompletedTask; + } +} diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types-chart.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types-chart.css new file mode 100644 index 0000000..3d1a75b --- /dev/null +++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types-chart.css @@ -0,0 +1,40 @@ +/* ============================================ + 性格类型-图表页（雷达图+横向柱状图） + 页面固定尺寸：1309×926px + ============================================ */ + +.ctc-page { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 12px; +} + +.ctc-section-title { + font-size: 22px; + font-weight: 700; + color: #E67E73; +} + +.ctc-charts { + display: flex; + gap: 20px; + flex: 1; + align-items: flex-start; +} + +.ctc-chart-panel { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +.ctc-chart-title { + font-size: 16px; + font-weight: 700; + color: #E67E73; + margin-bottom: 4px; + text-align: center; +} diff --git a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css index d906b2e..a74867c 100644 --- a/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css +++ b/server/MiAssessment/src/MiAssessment.Api/wwwroot/css/pages/character-types.css @@ -1,7 +1,6 @@ /* ============================================ - 性格类型分析页 + 性格类型分析页（三图+结论卡片版） 页面固定尺寸：1309×926px - 三图（环形+雷达+柱状）+ 两结论卡片 ============================================ */ .ct-page { @@ -18,7 +17,6 @@ color: #E67E73; } -/* ---- 上半部分：三图并排 ---- */ .ct-charts { display: flex; gap: 20px; @@ -32,9 +30,7 @@ align-items: center; } -.ct-panel-donut { - flex: 0.9; -} +.ct-panel-donut { flex: 0.9; } .ct-chart-title { font-size: 16px; @@ -44,7 +40,6 @@ text-align: center; } -/* ---- 下半部分：结论卡片 ---- */ .ct-conclusions { display: flex; gap: 30px; @@ -68,8 +63,8 @@ } .ct-card-weak { - border-color: #999999; - background: #F8F8F8; + border-color: #E67E73; + background: #FFF5F5; } .ct-badge { @@ -87,7 +82,7 @@ } .ct-badge-strong { background: #C0392B; } -.ct-badge-weak { background: #999999; } +.ct-badge-weak { background: #C0392B; } .ct-conclusion-content { font-size: 13px;