2121
This commit is contained in:
zpc
parent
c987037c82
commit
3fc5433e0c
|
|
@ -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 结果+结论 | ⬜ 骨架 |
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user