| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <div>
- @push('styles')
- <style>
- .mastery-card {
- transition: all 0.3s ease;
- }
- .mastery-progress {
- height: 8px;
- border-radius: 4px;
- background: #e5e7eb;
- }
- </style>
- @endpush
- <div class="space-y-6">
- <!-- 页面标题 -->
- <div class="flex justify-between items-center">
- <div>
- <h2 class="text-2xl font-bold text-gray-900">学生掌握度分析</h2>
- <p class="mt-1 text-sm text-gray-500">
- 基于学生答题数据,分析知识点掌握情况
- </p>
- </div>
- </div>
- <!-- 学生选择器 -->
- <div class="bg-white p-6 rounded-lg border shadow-sm">
- <div class="flex items-center gap-4">
- <div class="flex-1">
- <select
- wire:model.live="selectedStudentId"
- class="form-select w-full px-3 py-2 border rounded-lg"
- >
- <option value="">-- 选择学生 --</option>
- @foreach($this->students() as $student)
- <option value="{{ $student['student_id'] }}">
- {{ $student['name'] ?? $student['student_id'] }}
- </option>
- @endforeach
- </select>
- </div>
- @if($selectedStudentId)
- <div class="text-sm text-gray-600">
- 当前分析学生:<span class="font-semibold">{{ $selectedStudentId }}</span>
- </div>
- @endif
- </div>
- </div>
- @if($selectedStudentId)
- <!-- 概览统计 -->
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <div class="bg-white p-4 rounded-lg border text-center">
- <div class="text-3xl font-bold text-blue-600">{{ count($masteryData) }}</div>
- <div class="text-sm text-gray-600 mt-1">已学习知识点</div>
- </div>
- <div class="bg-white p-4 rounded-lg border text-center">
- <div class="text-3xl font-bold text-green-600">
- {{ count(array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8)) }}
- </div>
- <div class="text-sm text-gray-600 mt-1">掌握良好(≥80%)</div>
- </div>
- <div class="bg-white p-4 rounded-lg border text-center">
- <div class="text-3xl font-bold text-red-600">{{ count($weaknesses) }}</div>
- <div class="text-sm text-gray-600 mt-1">薄弱知识点</div>
- </div>
- <div class="bg-white p-4 rounded-lg border text-center">
- @php
- $avgMastery = count($masteryData) > 0
- ? round(array_sum(array_column($masteryData, 'mastery')) / count($masteryData) * 100, 1)
- : 0;
- @endphp
- <div class="text-3xl font-bold text-purple-600">{{ $avgMastery }}%</div>
- <div class="text-sm text-gray-600 mt-1">平均掌握度</div>
- </div>
- </div>
- <!-- 掌握度详情 -->
- <div class="bg-white p-6 rounded-lg border shadow-sm">
- <h3 class="text-lg font-semibold text-gray-900 mb-4">知识点掌握度详情</h3>
- @if(count($masteryData) > 0)
- <div class="space-y-4 max-h-96 overflow-y-auto">
- @foreach($masteryData as $item)
- <div class="mastery-card p-4 border rounded-lg">
- <div class="flex items-start justify-between mb-2">
- <div class="flex-1">
- <div class="font-medium text-gray-900">{{ $item['kp_name'] ?? $item['kp_code'] }}</div>
- <div class="text-xs text-gray-600 mt-1">{{ $item['kp_code'] }}</div>
- </div>
- <div class="text-right">
- <div class="text-lg font-bold" style="color: {{ getMasteryColor($item['mastery']) }}">
- {{ number_format($item['mastery'] * 100, 1) }}%
- </div>
- <div class="text-xs text-gray-600">{{ $item['mastery_level'] }}</div>
- </div>
- </div>
- <div class="mastery-progress">
- <div
- style="width: {{ $item['mastery'] * 100 }}%; background: {{ getMasteryColor($item['mastery']) }}; height: 100%;"
- ></div>
- </div>
- @if($item['mastery'] < 0.7)
- <div class="mt-2 flex items-center gap-2">
- <span class="text-xs px-2 py-0.5 bg-red-200 text-red-700 rounded">需重点关注</span>
- <span class="text-xs text-gray-600">
- 建议练习{{ ceil((0.8 - $item['mastery']) * 10) }}次
- </span>
- </div>
- @endif
- </div>
- @endforeach
- </div>
- @else
- <div class="text-center text-gray-500 py-8">暂无掌握度数据</div>
- @endif
- </div>
- <!-- 薄弱点分析 -->
- <div class="bg-white p-6 rounded-lg border shadow-sm">
- <h3 class="text-lg font-semibold text-gray-900 mb-4">薄弱点分析</h3>
- @if(count($weaknesses) > 0)
- <div class="space-y-3">
- @foreach($weaknesses as $weakness)
- <div class="border border-red-200 rounded-lg p-3 bg-red-50">
- <div class="flex items-start justify-between">
- <div class="flex-1">
- <div class="font-medium text-gray-900">
- {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
- </div>
- <div class="text-xs text-gray-600 mt-1">{{ $weakness['kp_code'] }}</div>
- </div>
- <div class="text-right">
- <div class="text-sm font-bold text-red-600">
- {{ number_format($weakness['mastery'] * 100, 1) }}%
- </div>
- </div>
- </div>
- <div class="mt-3 space-y-2">
- <div class="text-xs text-gray-600">
- <strong>建议:</strong>
- @if($weakness['mastery'] < 0.3)
- 重新学习基础知识,从基础题开始练习
- @elseif($weakness['mastery'] < 0.5)
- 重点练习基础题型,复习相关概念
- @elseif($weakness['mastery'] < 0.7)
- 加强练习,增加题型熟悉度
- @endif
- </div>
- </div>
- </div>
- @endforeach
- </div>
- @else
- <div class="text-center text-green-600 py-8">
- <svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
- </svg>
- <div>学生表现优秀,暂无敌弱知识点!</div>
- </div>
- @endif
- </div>
- @else
- <!-- 未选择学生的提示 -->
- <div class="bg-white p-6 rounded-lg border shadow-sm text-center py-12">
- <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
- </svg>
- <div class="text-lg font-medium text-gray-900 mb-2">请选择学生</div>
- <div class="text-sm text-gray-500">
- 从上方下拉菜单中选择一个学生,查看详细的掌握度分析
- </div>
- </div>
- @endif
- </div>
- </div>
|