| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <div>
- @push('styles')
- <style>
- .mastery-card {
- transition: all 0.3s ease;
- border-left: 4px solid transparent;
- }
- .mastery-card:hover {
- transform: translateX(4px);
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
- }
- .mastery-progress {
- height: 8px;
- border-radius: 4px;
- overflow: hidden;
- background: #e5e7eb;
- }
- .mastery-progress-bar {
- height: 100%;
- transition: width 0.5s ease;
- }
- .skill-badge {
- display: inline-block;
- padding: 4px 12px;
- margin: 4px;
- border-radius: 16px;
- font-size: 12px;
- font-weight: 500;
- }
- .weakness-tag {
- background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
- color: #991b1b;
- }
- .strength-tag {
- background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
- color: #065f46;
- }
- .chart-container {
- min-height: 300px;
- }
- </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 class="flex gap-3">
- @if($selectedStudentId)
- button
- color="success"
- wire:click="generateStudyPlan"
- >
- <x-heroicon-m-academic-cap class="w-5 h-5 mr-2" />
- 生成学习计划
- /button>
- button
- color="gray"
- wire:click="exportAnalysis"
- >
- <x-heroicon-m-arrow-down-tray class="w-5 h-5 mr-2" />
- 导出报告
- /button>
- @endif
- </div>
- </div>
- <!-- 学生选择器 -->
- <x-filament::card>
- <div class="flex items-center gap-4">
- <div class="flex-1">
- <select
- wire:model.live="selectedStudentId"
- class="select select-bordered w-full"
- >
- <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>
- </x-filament::card>
- @if($selectedStudentId)
- <!-- 概览统计 -->
- <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
- <x-filament::card class="text-center">
- <div class="text-3xl font-bold text-blue-600">
- {{ count($masteryData) }}
- </div>
- <div class="text-sm text-gray-600 mt-1">已学习知识点</div>
- </x-filament::card>
- <x-filament::card class="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>
- </x-filament::card>
- <x-filament::card class="text-center">
- <div class="text-3xl font-bold text-red-600">
- {{ count($weaknesses) }}
- </div>
- <div class="text-sm text-gray-600 mt-1">薄弱知识点</div>
- </x-filament::card>
- <x-filament::card class="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>
- </x-filament::card>
- </div>
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
- <!-- 掌握度详情 -->
- <x-filament::card>
- <x-slot name="header">
- <div class="flex items-center gap-3">
- <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
- <x-heroicon-o-chart-bar class="w-6 h-6 text-blue-600" />
- </div>
- <div>
- <h3 class="text-lg font-semibold text-gray-900">知识点掌握度详情</h3>
- <p class="text-sm text-gray-500">学生各知识点的掌握情况</p>
- </div>
- </div>
- </x-slot>
- @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 {{ getMasteryBgColor($item['mastery']) }}" style="border-left-color: {{ getMasteryColor($item['mastery']) }}">
- <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
- class="mastery-progress-bar"
- style="width: {{ $item['mastery'] * 100 }}%; background: {{ getMasteryColor($item['mastery']) }}"
- ></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
- </x-filament::card>
- <!-- 薄弱点分析 -->
- <x-filament::card>
- <x-slot name="header">
- <div class="flex items-center gap-3">
- <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
- <x-heroicon-o-exclamation-triangle class="w-6 h-6 text-red-600" />
- </div>
- <div>
- <h3 class="text-lg font-semibold text-gray-900">薄弱点分析</h3>
- <p class="text-sm text-gray-500">需要加强练习的知识点</p>
- </div>
- </div>
- </x-slot>
- @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="flex items-center gap-2">
- <span class="text-xs text-gray-600">掌握度:</span>
- <div class="flex-1 bg-gray-200 rounded-full h-2">
- <div
- class="bg-red-500 h-2 rounded-full"
- style="width: {{ $weakness['mastery'] * 100 }}%"
- ></div>
- </div>
- </div>
- <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">
- <x-heroicon-o-check-circle class="w-12 h-12 mx-auto mb-2" />
- <div>学生表现优秀,暂无敌弱知识点!</div>
- </div>
- @endif
- </x-filament::card>
- </div>
- <!-- 优势与建议 -->
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
- <!-- 优势知识点 -->
- <x-filament::card>
- <x-slot name="header">
- <div class="flex items-center gap-3">
- <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
- <x-heroicon-o-star class="w-6 h-6 text-green-600" />
- </div>
- <div>
- <h3 class="text-lg font-semibold text-gray-900">优势知识点</h3>
- <p class="text-sm text-gray-500">掌握良好的知识点</p>
- </div>
- </div>
- </x-slot>
- @php
- $strengths = array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8);
- $strengths = array_slice($strengths, 0, 10);
- @endphp
- @if(count($strengths) > 0)
- <div class="flex flex-wrap gap-2">
- @foreach($strengths as $strength)
- <span class="skill-badge strength-tag">
- {{ $strength['kp_name'] ?? $strength['kp_code'] }}
- ({{ number_format($strength['mastery'] * 100, 0) }}%)
- </span>
- @endforeach
- </div>
- <div class="mt-4 p-3 bg-green-50 rounded-lg">
- <div class="text-sm text-green-800">
- <strong>分析:</strong>学生在这些知识点上表现优秀,可以作为学习其他内容的支撑点。
- </div>
- </div>
- @else
- <div class="text-center text-gray-500 py-4">
- 暂无优势知识点
- </div>
- @endif
- </x-filament::card>
- <!-- 学习建议 -->
- <x-filament::card>
- <x-slot name="header">
- <div class="flex items-center gap-3">
- <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
- <x-heroicon-o-light-bulb class="w-6 h-6 text-purple-600" />
- </div>
- <div>
- <h3 class="text-lg font-semibold text-gray-900">学习建议</h3>
- <p class="text-sm text-gray-500">个性化学习路径</p>
- </div>
- </div>
- </x-slot>
- @if(count($weaknesses) > 0)
- <div class="space-y-4">
- <div class="p-3 bg-amber-50 rounded-lg">
- <div class="text-sm font-medium text-amber-800 mb-2">📚 学习优先级</div>
- <ol class="text-sm text-amber-700 space-y-1 list-decimal list-inside">
- @foreach(array_slice($weaknesses, 0, 5) as $idx => $weakness)
- <li>
- {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
- - 建议练习{{ ceil((0.8 - $weakness['mastery']) * 15) }}道题
- </li>
- @endforeach
- </ol>
- </div>
- <div class="p-3 bg-blue-50 rounded-lg">
- <div class="text-sm font-medium text-blue-800 mb-2">🎯 学习策略</div>
- <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
- <li>先巩固基础知识,再提升难度</li>
- <li>每天练习{{ min(10, ceil(50 / count($weaknesses))) }}道薄弱知识点题目</li>
- <li>定期复习已掌握的知识点</li>
- <li>结合优势知识点,尝试综合性题目</li>
- </ul>
- </div>
- </div>
- @else
- <div class="text-center text-gray-500 py-4">
- 学生掌握情况良好,建议继续提升挑战难度
- </div>
- @endif
- </x-filament::card>
- </div>
- @else
- <!-- 未选择学生的提示 -->
- <x-filament::card class="text-center py-12">
- <x-heroicon-o-users class="w-16 h-16 text-gray-400 mx-auto mb-4" />
- <div class="text-lg font-medium text-gray-900 mb-2">请选择学生</div>
- <div class="text-sm text-gray-500">
- 从上方下拉菜单中选择一个学生,查看详细的掌握度分析
- </div>
- </x-filament::card>
- @endif
- </div>
- </x-filament-pages::page>
|