student-analysis-simple.blade.php 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <x-filament-panels::page>
  2. @push('styles')
  3. <style>
  4. .mastery-card {
  5. transition: all 0.3s ease;
  6. }
  7. .mastery-progress {
  8. height: 8px;
  9. border-radius: 4px;
  10. background: #e5e7eb;
  11. }
  12. </style>
  13. @endpush
  14. <div class="space-y-6">
  15. <!-- 页面标题 -->
  16. <div class="flex justify-between items-center">
  17. <div>
  18. <h2 class="text-2xl font-bold text-gray-900">学生掌握度分析</h2>
  19. <p class="mt-1 text-sm text-gray-500">
  20. 基于学生答题数据,分析知识点掌握情况
  21. </p>
  22. </div>
  23. </div>
  24. <!-- 学生选择器 -->
  25. <div class="bg-white p-6 rounded-lg border shadow-sm">
  26. <div class="flex items-center gap-4">
  27. <div class="flex-1">
  28. <select
  29. wire:model.live="selectedStudentId"
  30. class="form-select w-full px-3 py-2 border rounded-lg"
  31. >
  32. <option value="">-- 选择学生 --</option>
  33. @foreach($this->students() as $student)
  34. <option value="{{ $student['student_id'] }}">
  35. {{ $student['name'] ?? $student['student_id'] }}
  36. </option>
  37. @endforeach
  38. </select>
  39. </div>
  40. @if($selectedStudentId)
  41. <div class="text-sm text-gray-600">
  42. 当前分析学生:<span class="font-semibold">{{ $selectedStudentId }}</span>
  43. </div>
  44. @endif
  45. </div>
  46. </div>
  47. @if($selectedStudentId)
  48. <!-- 概览统计 -->
  49. <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
  50. <div class="bg-white p-4 rounded-lg border text-center">
  51. <div class="text-3xl font-bold text-blue-600">{{ count($masteryData) }}</div>
  52. <div class="text-sm text-gray-600 mt-1">已学习知识点</div>
  53. </div>
  54. <div class="bg-white p-4 rounded-lg border text-center">
  55. <div class="text-3xl font-bold text-green-600">
  56. {{ count(array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8)) }}
  57. </div>
  58. <div class="text-sm text-gray-600 mt-1">掌握良好(≥80%)</div>
  59. </div>
  60. <div class="bg-white p-4 rounded-lg border text-center">
  61. <div class="text-3xl font-bold text-red-600">{{ count($weaknesses) }}</div>
  62. <div class="text-sm text-gray-600 mt-1">薄弱知识点</div>
  63. </div>
  64. <div class="bg-white p-4 rounded-lg border text-center">
  65. @php
  66. $avgMastery = count($masteryData) > 0
  67. ? round(array_sum(array_column($masteryData, 'mastery')) / count($masteryData) * 100, 1)
  68. : 0;
  69. @endphp
  70. <div class="text-3xl font-bold text-purple-600">{{ $avgMastery }}%</div>
  71. <div class="text-sm text-gray-600 mt-1">平均掌握度</div>
  72. </div>
  73. </div>
  74. <!-- 掌握度详情 -->
  75. <div class="bg-white p-6 rounded-lg border shadow-sm">
  76. <h3 class="text-lg font-semibold text-gray-900 mb-4">知识点掌握度详情</h3>
  77. @if(count($masteryData) > 0)
  78. <div class="space-y-4 max-h-96 overflow-y-auto">
  79. @foreach($masteryData as $item)
  80. <div class="mastery-card p-4 border rounded-lg">
  81. <div class="flex items-start justify-between mb-2">
  82. <div class="flex-1">
  83. <div class="font-medium text-gray-900">{{ $item['kp_name'] ?? $item['kp_code'] }}</div>
  84. <div class="text-xs text-gray-600 mt-1">{{ $item['kp_code'] }}</div>
  85. </div>
  86. <div class="text-right">
  87. <div class="text-lg font-bold" style="color: {{ getMasteryColor($item['mastery']) }}">
  88. {{ number_format($item['mastery'] * 100, 1) }}%
  89. </div>
  90. <div class="text-xs text-gray-600">{{ $item['mastery_level'] }}</div>
  91. </div>
  92. </div>
  93. <div class="mastery-progress">
  94. <div
  95. style="width: {{ $item['mastery'] * 100 }}%; background: {{ getMasteryColor($item['mastery']) }}; height: 100%;"
  96. ></div>
  97. </div>
  98. @if($item['mastery'] < 0.7)
  99. <div class="mt-2 flex items-center gap-2">
  100. <span class="text-xs px-2 py-0.5 bg-red-200 text-red-700 rounded">需重点关注</span>
  101. <span class="text-xs text-gray-600">
  102. 建议练习{{ ceil((0.8 - $item['mastery']) * 10) }}次
  103. </span>
  104. </div>
  105. @endif
  106. </div>
  107. @endforeach
  108. </div>
  109. @else
  110. <div class="text-center text-gray-500 py-8">暂无掌握度数据</div>
  111. @endif
  112. </div>
  113. <!-- 薄弱点分析 -->
  114. <div class="bg-white p-6 rounded-lg border shadow-sm">
  115. <h3 class="text-lg font-semibold text-gray-900 mb-4">薄弱点分析</h3>
  116. @if(count($weaknesses) > 0)
  117. <div class="space-y-3">
  118. @foreach($weaknesses as $weakness)
  119. <div class="border border-red-200 rounded-lg p-3 bg-red-50">
  120. <div class="flex items-start justify-between">
  121. <div class="flex-1">
  122. <div class="font-medium text-gray-900">
  123. {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
  124. </div>
  125. <div class="text-xs text-gray-600 mt-1">{{ $weakness['kp_code'] }}</div>
  126. </div>
  127. <div class="text-right">
  128. <div class="text-sm font-bold text-red-600">
  129. {{ number_format($weakness['mastery'] * 100, 1) }}%
  130. </div>
  131. </div>
  132. </div>
  133. <div class="mt-3 space-y-2">
  134. <div class="text-xs text-gray-600">
  135. <strong>建议:</strong>
  136. @if($weakness['mastery'] < 0.3)
  137. 重新学习基础知识,从基础题开始练习
  138. @elseif($weakness['mastery'] < 0.5)
  139. 重点练习基础题型,复习相关概念
  140. @elseif($weakness['mastery'] < 0.7)
  141. 加强练习,增加题型熟悉度
  142. @endif
  143. </div>
  144. </div>
  145. </div>
  146. @endforeach
  147. </div>
  148. @else
  149. <div class="text-center text-green-600 py-8">
  150. <svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  151. <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>
  152. </svg>
  153. <div>学生表现优秀,暂无敌弱知识点!</div>
  154. </div>
  155. @endif
  156. </div>
  157. @else
  158. <!-- 未选择学生的提示 -->
  159. <div class="bg-white p-6 rounded-lg border shadow-sm text-center py-12">
  160. <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  161. <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>
  162. </svg>
  163. <div class="text-lg font-medium text-gray-900 mb-2">请选择学生</div>
  164. <div class="text-sm text-gray-500">
  165. 从上方下拉菜单中选择一个学生,查看详细的掌握度分析
  166. </div>
  167. </div>
  168. @endif
  169. </div>
  170. </x-filament-panels::page>