TechHelper/TechHelper.Client/Pages/Common/Exam/SubmissionInfoCard.razor

@using Entities.DTO
@using TechHelper.Client.Services
<MudPaper Class="rounded-xl w-100 px-10 ma-3 pt-5" Elevation="5" Height="170px" Style="background-color:#6bc6be">

	<MudGrid Class="h-100">

		<MudItem sm="2" Class="h-100 pa-1 mt-1">
			<MudStack Class="h-100">
				<MudText Style="color:white"> BETA版本 </MudText>
				<MudText Style="color:white" Typo="Typo.h3"><b> @StudentSubmissionDetail.AverageScore </b></MudText>

				<MudPaper Elevation=0 Class="h-100 w-100" Style="background-color:transparent">
					<MudStack Class="h-100" Row=true>
						<MudPaper Elevation=0 Height="100%" Width="100%" Style="background-color:transparent">
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									总数:
									<span style="color: #fefefe;"> @StudentSubmissionDetail.TotalQuestions </span>
								</MudText>
							</MudPaper>
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									总分:
									<span style="color: #fefefe;"> 150 </span>
								</MudText>
							</MudPaper>
						</MudPaper>

						<MudPaper Elevation=0 Height="100%" Width="100%" Style="background-color:transparent">
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									排名:
									<span style="color: #fefefe;"> @StudentSubmissionDetail.TotalRank </span>
								</MudText>
							</MudPaper>
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									平均:
									<span style="color: #fefefe;"> @StudentSubmissionDetail.ClassAverageScore </span>
								</MudText>
							</MudPaper>
						</MudPaper>
					</MudStack>
				</MudPaper>
			</MudStack>
		</MudItem>


		<MudItem sm="9">
			<MudPaper Style="background-color:transparent" Class="w-100 mt-n3" Height="100%" Elevation="0">
				<MudChart ChartType="ChartType.Line" Class="pt-0" ChartSeries="@Series" XAxisLabels="@XAxisLabels" CanHideSeries
						  Height="150px" Width="100%" AxisChartOptions="_axisChartOptions" ChartOptions="options">
					<CustomGraphics>
						<style>
							.heavy {
								font: normal 12px helvetica;
								fill: rgb(255,255,255);
								letter-spacing: 2px;
							}
						</style>

						<text x="60" y="15" class="heavy"> 成绩的整体分布情况 </text>
					</CustomGraphics>
				</MudChart>
			</MudPaper>

		</MudItem>
		<MudItem xs="12" sm="1">
			<MudChipSet T="string" SelectedValuesChanged="HandleSelectedValuesChanged" SelectedValues="@_selected" SelectionMode="SelectionMode.MultiSelection" CheckMark="true">
				<MudChip Size="Size.Small" Text="类型错误数量分布" Variant="Variant.Text" Color="Color.Default">类型分布</MudChip>
				<MudChip Size="Size.Small" Text="类型错误成绩分布" Variant="Variant.Text" Color="Color.Primary">课时分布</MudChip>
			</MudChipSet>
		</MudItem>
	</MudGrid>
</MudPaper>

@* 				<MudChip Size="Size.Small" Text="pink" Variant="Variant.Text" Color="Color.Secondary">成绩趋势</MudChip>
				<MudChip Size="Size.Small" Text="blue" Variant="Variant.Text" Color="Color.Info">分值区间</MudChip>
				<MudChip Size="Size.Small" Text="green" Variant="Variant.Text" Color="Color.Success">Success</MudChip>
				<MudChip Size="Size.Small" Text="orange" Variant="Variant.Text" Color="Color.Warning">Warning</MudChip>
				<MudChip Size="Size.Small" Text="red" Variant="Variant.Text" Color="Color.Error">Error</MudChip>
				<MudChip Size="Size.Small" Text="black" Variant="Variant.Text" Color="Color.Dark">Dark</MudChip> *@

@code {
	private AxisChartOptions _axisChartOptions = new AxisChartOptions
	{
	};
	private ChartOptions options = new ChartOptions
	{
		InterpolationOption = InterpolationOption.NaturalSpline,
		YAxisFormat = "c2",
		ShowLegend = false,
		YAxisLines = false,
		XAxisLines = false,
		XAxisLabelPosition = XAxisLabelPosition.None,
		YAxisLabelPosition = YAxisLabelPosition.None,
		YAxisTicks = 100,
		ShowLabels = false,
		ShowLegendLabels = false

	};
	public List<ChartSeries> Series = new List<ChartSeries>()
	{
		new ChartSeries() { Name = "类型错误数量分布", Data = new double[] { 35, 41, 35, 51, 49, 62, 69, 91, 148 } },
	};
	public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };

	Random random = new Random();
	protected override void OnInitialized()
	{
		options.InterpolationOption = InterpolationOption.NaturalSpline;
		options.YAxisFormat = "c2";
		options.ShowLegend = false;
		options.YAxisLines = false;
		options.XAxisLines = false;
		options.XAxisLabelPosition = XAxisLabelPosition.None;
		options.YAxisLabelPosition = YAxisLabelPosition.None;
		options.ShowLabels = false;
		options.ShowLegendLabels = false;
		options.LineStrokeWidth = 1;
		_axisChartOptions.MatchBoundsToSize = true;

		Series[0].LineDisplayType = LineDisplayType.Area;

	}

	[Parameter]
	public Guid SubmissionID { get; set; } = Guid.Empty;

	private StudentSubmissionDetailDto StudentSubmissionDetail { get; set; } = new StudentSubmissionDetailDto();
	private IReadOnlyCollection<string> _selected;
#pragma warning restore 1998
#nullable restore
#line (82, 8) - (143, 1) "D:\AllWX\AllC\TechHelper\TechHelper.Client\Pages\Common\Exam\SubmissionInfoCard.razor"



	[Inject]
	public IStudentSubmissionDetailService StudentSubmissionDetailService { get; set; }
	[Inject]
	public ISnackbar Snackbar { get; set; }
	protected override async Task OnInitializedAsync()
	{
		if (SubmissionID != Guid.Empty)
		{

			StudentSubmissionDetailDto result;
			try
			{
				result = await StudentSubmissionDetailService.GetSubmissionDetailAsync(SubmissionID);

				if (result != null)
				{
					StudentSubmissionDetail = result;
					XAxisLabels = result.ErrorTypeDistribution.Keys.ToArray();
					Series.Clear();
					Series.Add(new ChartSeries
					{
						Name = "类型错误数量分布",
						Data = result.ErrorTypeDistribution.Values.Select(d => (double)d).ToArray()
					});
					Series.Add(new ChartSeries
					{
						Name = "类型错误成绩分布",
						Data = result.ErrorTypeScoreDistribution.Values.Select(d => (double)d).ToArray()
					});

				}
			}
			catch (Exception ex)
			{
				Snackbar.Add($"获取提交错误, 请重试, {ex.Message}", Severity.Warning);
			}
		}

	}

	private void HandleSelectedValuesChanged(IReadOnlyCollection<string> selected)
	{
		Series.ForEach(x => x.Visible = false);

		foreach (var item in selected)
		{
			var sv = Series.FirstOrDefault(predicate: x => x.Name == item);
			if (sv != null)
			{
				sv.Visible = true;
			}
		}
	}
}