student-dashboard.blade.php 48 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708
  1. <div class="min-h-screen bg-gray-50 p-8">
  2. {{-- 页面标题区域 --}}
  3. <div class="mb-8">
  4. <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
  5. <div class="flex items-center justify-between mb-6">
  6. <div>
  7. <h1 class="text-3xl font-bold text-gray-900 flex items-center">
  8. <svg class="w-8 h-8 mr-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  9. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  10. </svg>
  11. 学生仪表板
  12. </h1>
  13. <p class="mt-2 text-sm text-gray-600 ml-11">
  14. 全面展示学生的学习分析数据,包括掌握度、技能熟练度、提分预测和学习路径
  15. </p>
  16. </div>
  17. </div>
  18. {{-- 选择器区域 --}}
  19. <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
  20. <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
  21. {{-- 选择老师 --}}
  22. <div class="form-control w-full">
  23. <label class="label">
  24. <span class="label-text font-medium">选择老师</span>
  25. </label>
  26. <select
  27. wire:model.live="teacherId"
  28. class="select select-bordered w-full"
  29. >
  30. <option value="">请选择老师...</option>
  31. @foreach($this->teachers as $teacher)
  32. <option value="{{ $teacher->teacher_id }}">
  33. {{ trim($teacher->name ?? $teacher->teacher_id) . ($teacher->subject ? " ({$teacher->subject})" : '') }}
  34. </option>
  35. @endforeach
  36. </select>
  37. <label class="label">
  38. <span class="label-text text-xs text-gray-500">选择要查看的老师</span>
  39. </label>
  40. </div>
  41. {{-- 选择学生 --}}
  42. <div class="form-control w-full">
  43. <label class="label">
  44. <span class="label-text font-medium">选择学生</span>
  45. </label>
  46. <select
  47. wire:model.live="studentId"
  48. class="select select-bordered w-full"
  49. @if(empty($teacherId)) disabled @endif
  50. >
  51. <option value="">
  52. @if(empty($teacherId))
  53. 请先选择老师
  54. @else
  55. 请选择学生...
  56. @endif
  57. </option>
  58. @foreach($this->students as $student)
  59. <option value="{{ $student->student_id }}">
  60. {{ trim($student->name ?? $student->student_id) . " ({$student->grade} - {$student->class_name})" }}
  61. </option>
  62. @endforeach
  63. </select>
  64. <label class="label">
  65. <span class="label-text text-xs text-gray-500">选择要查看的学生</span>
  66. </label>
  67. </div>
  68. </div>
  69. <div class="mt-4 pb-0.5 flex space-x-2">
  70. <button
  71. wire:click="loadDashboardData"
  72. wire:loading.attr="disabled"
  73. class="inline-flex items-center px-6 py-2.5 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
  74. >
  75. <svg wire:loading class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  76. <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  77. <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  78. </svg>
  79. 刷新数据
  80. </button>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. {{-- 错误提示 --}}
  86. @if ($errorMessage)
  87. <div class="mb-8">
  88. <div class="bg-red-50 border border-red-200 rounded-xl p-4">
  89. <div class="flex items-start">
  90. <div class="flex-shrink-0">
  91. <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
  92. <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
  93. </svg>
  94. </div>
  95. <div class="ml-3">
  96. <h3 class="text-sm font-medium text-red-800">加载错误</h3>
  97. <div class="mt-2 text-sm text-red-700">
  98. <p>{{ $errorMessage }}</p>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. @endif
  105. {{-- 加载状态 --}}
  106. @if ($isLoading)
  107. <div class="mb-8">
  108. <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-200">
  109. <div class="flex flex-col items-center justify-center">
  110. <svg class="animate-spin h-12 w-12 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  111. <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  112. <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  113. </svg>
  114. <p class="mt-4 text-sm text-gray-600">正在加载数据,请稍候...</p>
  115. </div>
  116. </div>
  117. </div>
  118. @else
  119. {{-- 加载完成后显示内容 --}}
  120. {{-- 快速概览卡片 --}}
  121. {{-- 快速概览卡片 --}}
  122. <div class="mb-8">
  123. <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
  124. {{-- 掌握度概览 --}}
  125. @if (isset($dashboardData['mastery']['overview']))
  126. <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
  127. <div class="p-6">
  128. <div class="flex items-center justify-between">
  129. <div class="flex items-center">
  130. <div class="flex-shrink-0">
  131. <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
  132. <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  133. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  134. </svg>
  135. </div>
  136. </div>
  137. <div class="ml-4">
  138. <p class="text-sm font-medium text-gray-600">平均掌握度</p>
  139. <p class="text-2xl font-bold text-gray-900 mt-1">
  140. {{ number_format($dashboardData['mastery']['overview']['average_mastery_level'] * 100, 1) }}%
  141. </p>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
  147. <div class="flex justify-between text-xs">
  148. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  149. 已掌握: {{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}
  150. </span>
  151. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
  152. 薄弱: {{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}
  153. </span>
  154. </div>
  155. </div>
  156. </div>
  157. @endif
  158. {{-- 技能熟练度概览 --}}
  159. @if (isset($dashboardData['skill']['summary']))
  160. <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
  161. <div class="p-6">
  162. <div class="flex items-center justify-between">
  163. <div class="flex items-center">
  164. <div class="flex-shrink-0">
  165. <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
  166. <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  167. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  168. </svg>
  169. </div>
  170. </div>
  171. <div class="ml-4">
  172. <p class="text-sm font-medium text-gray-600">技能熟练度</p>
  173. <p class="text-2xl font-bold text-gray-900 mt-1">
  174. {{ number_format($dashboardData['skill']['summary']['average_proficiency_level'] * 100, 1) }}%
  175. </p>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
  181. <div class="flex justify-between text-xs">
  182. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
  183. 技能: {{ $dashboardData['skill']['summary']['total_skills'] }}
  184. </span>
  185. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
  186. 练习: {{ $dashboardData['skill']['summary']['total_questions_attempted'] }}
  187. </span>
  188. </div>
  189. </div>
  190. </div>
  191. @endif
  192. {{-- 提分潜力 --}}
  193. @if (isset($dashboardData['prediction']['quick']))
  194. <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
  195. <div class="p-6">
  196. <div class="flex items-center justify-between">
  197. <div class="flex items-center">
  198. <div class="flex-shrink-0">
  199. <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
  200. <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  201. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
  202. </svg>
  203. </div>
  204. </div>
  205. <div class="ml-4">
  206. <p class="text-sm font-medium text-gray-600">预期提分</p>
  207. <p class="text-2xl font-bold text-gray-900 mt-1">
  208. +{{ $dashboardData['prediction']['quick']['quick_prediction']['improvement_potential'] ?? 0 }}
  209. <span class="text-lg text-gray-500">分</span>
  210. </p>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
  216. <div class="flex justify-between text-xs">
  217. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
  218. 学习: {{ $dashboardData['prediction']['quick']['quick_prediction']['estimated_study_hours'] ?? 0 }}小时
  219. </span>
  220. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
  221. 置信度: {{ number_format(($dashboardData['prediction']['quick']['quick_prediction']['confidence_level'] ?? 0) * 100, 0) }}%
  222. </span>
  223. </div>
  224. </div>
  225. </div>
  226. @endif
  227. {{-- 学习路径 --}}
  228. @if (isset($dashboardData['learning_path']['analytics']))
  229. <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
  230. <div class="p-6">
  231. <div class="flex items-center justify-between">
  232. <div class="flex items-center">
  233. <div class="flex-shrink-0">
  234. <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
  235. <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  236. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
  237. </svg>
  238. </div>
  239. </div>
  240. <div class="ml-4">
  241. <p class="text-sm font-medium text-gray-600">活跃路径</p>
  242. <p class="text-2xl font-bold text-gray-900 mt-1">
  243. {{ $dashboardData['learning_path']['analytics']['active_paths'] ?? 0 }}
  244. </p>
  245. </div>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
  250. <div class="flex justify-between text-xs">
  251. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  252. 已完成: {{ $dashboardData['learning_path']['analytics']['completed_paths'] ?? 0 }}
  253. </span>
  254. <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
  255. 效率: {{ number_format(($dashboardData['learning_path']['analytics']['average_efficiency_score'] ?? 0) * 100, 0) }}%
  256. </span>
  257. </div>
  258. </div>
  259. </div>
  260. @endif
  261. </div>
  262. </div>
  263. {{-- 主要内容区域 --}}
  264. <div class="mb-8">
  265. <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
  266. {{-- 掌握度分析 --}}
  267. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  268. <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
  269. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  270. <svg class="w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  271. <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>
  272. </svg>
  273. 知识点掌握度
  274. </h3>
  275. <button
  276. wire:click="batchUpdateSkills"
  277. class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-150"
  278. >
  279. <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  280. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
  281. </svg>
  282. 刷新
  283. </button>
  284. </div>
  285. <div class="p-6">
  286. @if (isset($dashboardData['mastery']['overview']['total_knowledge_points']))
  287. <div class="space-y-4">
  288. <div class="flex items-center justify-between text-sm">
  289. <span class="text-gray-600">总知识点数</span>
  290. <span class="font-medium text-gray-900">{{ $dashboardData['mastery']['overview']['total_knowledge_points'] }}</span>
  291. </div>
  292. <div class="w-full bg-gray-200 rounded-full h-2">
  293. <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ $dashboardData['mastery']['overview']['average_mastery_level'] * 100 }}%"></div>
  294. </div>
  295. <div class="grid grid-cols-3 gap-4 mt-4">
  296. <div class="text-center">
  297. <div class="text-2xl font-semibold text-green-600">{{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}</div>
  298. <div class="text-xs text-gray-500">已掌握 (≥85%)</div>
  299. </div>
  300. <div class="text-center">
  301. <div class="text-2xl font-semibold text-blue-600">{{ $dashboardData['mastery']['overview']['good_knowledge_points'] }}</div>
  302. <div class="text-xs text-gray-500">良好 (70-85%)</div>
  303. </div>
  304. <div class="text-center">
  305. <div class="text-2xl font-semibold text-red-600">{{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}</div>
  306. <div class="text-xs text-gray-500">薄弱 (<50%)</div>
  307. </div>
  308. </div>
  309. @if (!empty($dashboardData['mastery']['overview']['weak_knowledge_points_list']))
  310. <div class="mt-6">
  311. <h4 class="text-sm font-medium text-gray-900 mb-3">薄弱知识点</h4>
  312. <div class="space-y-2">
  313. @foreach (array_slice($dashboardData['mastery']['overview']['weak_knowledge_points_list'], 0, 5) as $weak)
  314. <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
  315. <div class="flex items-center">
  316. <div class="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
  317. <span class="text-sm font-medium text-gray-900">{{ $weak['kp_code'] ?? $weak['knowledge_point_code'] ?? 'N/A' }}</span>
  318. </div>
  319. <div class="flex items-center space-x-3">
  320. <span class="text-sm text-gray-600">{{ number_format(($weak['mastery_level'] ?? $weak['mastery'] ?? 0) * 100, 1) }}%</span>
  321. <button
  322. wire:click="recalculateMastery('{{ $weak['kp_code'] ?? $weak['knowledge_point_code'] ?? '' }}')"
  323. class="text-xs text-indigo-600 hover:text-indigo-800"
  324. >
  325. 重新计算
  326. </button>
  327. </div>
  328. </div>
  329. @endforeach
  330. </div>
  331. </div>
  332. @endif
  333. </div>
  334. @else
  335. <div class="text-center py-8 text-gray-500">
  336. 暂无掌握度数据
  337. </div>
  338. @endif
  339. </div>
  340. </div>
  341. {{-- 技能熟练度 --}}
  342. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  343. <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
  344. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  345. <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  346. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  347. </svg>
  348. 技能熟练度
  349. </h3>
  350. <button
  351. wire:click="batchUpdateSkills"
  352. class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-green-700 bg-green-100 hover:bg-green-200 transition-colors duration-150"
  353. >
  354. <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  355. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
  356. </svg>
  357. 批量更新
  358. </button>
  359. </div>
  360. <div class="p-6">
  361. @php
  362. $skillData = $dashboardData['skill']['proficiency']['data'] ?? [];
  363. if (!is_array($skillData)) {
  364. $skillData = [];
  365. }
  366. @endphp
  367. @if (!empty($skillData))
  368. <div class="space-y-4">
  369. @foreach (array_slice($skillData, 0, 5) as $skill)
  370. <div class="flex items-center justify-between">
  371. <div class="flex items-center flex-1">
  372. <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
  373. <div class="flex-1">
  374. <div class="text-sm font-medium text-gray-900">{{ $skill['skill_name'] ?? 'N/A' }}</div>
  375. <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
  376. <div class="bg-green-500 h-1.5 rounded-full" style="width: {{ (($skill['proficiency_level'] ?? 0) * 100) }}%"></div>
  377. </div>
  378. </div>
  379. </div>
  380. <div class="ml-4 text-right">
  381. <div class="text-sm font-semibold text-gray-900">{{ number_format(($skill['proficiency_level'] ?? 0) * 100, 1) }}%</div>
  382. <div class="text-xs text-gray-500">{{ $skill['total_questions_attempted'] ?? 0 }}题</div>
  383. </div>
  384. </div>
  385. @endforeach
  386. </div>
  387. @else
  388. <div class="text-center py-8 text-gray-500">
  389. 暂无技能数据
  390. </div>
  391. @endif
  392. </div>
  393. </div>
  394. </div>
  395. {{-- 技能熟练度雷达图 - 已隐藏(功能已实现但暂时隐藏以简化界面) --}}
  396. {{-- <div class="mb-8">
  397. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  398. <div class="px-6 py-5 border-b border-gray-100">
  399. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  400. <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  401. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  402. </svg>
  403. 技能熟练度雷达图
  404. </h3>
  405. </div>
  406. <div class="p-6">
  407. <livewire:skill-proficiency-radar :student-id="$studentId" />
  408. </div>
  409. </div>
  410. </div> --}}
  411. {{-- 提分预测和学习路径 - 已实现 --}}
  412. <div class="mb-8">
  413. <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
  414. {{-- 提分预测 --}}
  415. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  416. <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
  417. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  418. <svg class="w-5 h-5 mr-2 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  419. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
  420. </svg>
  421. 提分预测
  422. </h3>
  423. <button
  424. wire:click="generateQuickPrediction"
  425. class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-yellow-700 bg-yellow-100 hover:bg-yellow-200 transition-colors duration-150"
  426. >
  427. <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  428. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  429. </svg>
  430. 快速预测
  431. </button>
  432. </div>
  433. <div class="p-6">
  434. {{-- 快速预测结果 --}}
  435. @if (isset($dashboardData['prediction']['quick']) && !empty($dashboardData['prediction']['quick']['quick_prediction']))
  436. @php
  437. $quickPrediction = $dashboardData['prediction']['quick']['quick_prediction'];
  438. @endphp
  439. {{-- 主要预测信息卡片 --}}
  440. <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 mb-6 border border-blue-200">
  441. <div class="flex items-center justify-between mb-4">
  442. <div>
  443. <h4 class="text-lg font-semibold text-gray-900">智能提分预测</h4>
  444. <p class="text-sm text-gray-600 mt-1">基于当前学习数据的AI分析</p>
  445. </div>
  446. <div class="text-right">
  447. <div class="text-2xl font-bold text-green-600">
  448. +{{ number_format($quickPrediction['improvement_potential'] ?? 0, 1) }}分
  449. </div>
  450. <div class="text-sm text-gray-500">预期提分</div>
  451. </div>
  452. </div>
  453. <div class="grid grid-cols-3 gap-4 mb-4">
  454. <div class="text-center">
  455. <div class="text-lg font-semibold text-gray-900">
  456. {{ $quickPrediction['current_score'] ?? 0 }}分
  457. </div>
  458. <div class="text-xs text-gray-500">当前分数</div>
  459. </div>
  460. <div class="text-center">
  461. <div class="text-lg font-semibold text-blue-600">
  462. {{ $quickPrediction['predicted_score'] ?? 0 }}分
  463. </div>
  464. <div class="text-xs text-gray-500">预测分数</div>
  465. </div>
  466. <div class="text-center">
  467. <div class="text-lg font-semibold text-purple-600">
  468. {{ $quickPrediction['estimated_study_hours'] ?? 0 }}h
  469. </div>
  470. <div class="text-xs text-gray-500">建议学习时间</div>
  471. </div>
  472. </div>
  473. <div class="flex items-center justify-between">
  474. <div class="flex items-center space-x-2">
  475. <span class="text-sm text-gray-600">置信度:</span>
  476. <div class="flex items-center">
  477. <div class="w-20 bg-gray-200 rounded-full h-2 mr-2">
  478. <div class="bg-blue-600 h-2 rounded-full" style="width: {{ ($quickPrediction['confidence_level'] ?? 0) * 100 }}%"></div>
  479. </div>
  480. <span class="text-sm font-medium text-gray-900">{{ number_format(($quickPrediction['confidence_level'] ?? 0) * 100, 0) }}%</span>
  481. </div>
  482. </div>
  483. <div class="text-xs text-gray-500">
  484. {{ $quickPrediction['weak_knowledge_points_count'] ?? 0 }}个薄弱知识点
  485. </div>
  486. </div>
  487. </div>
  488. {{-- 优先学习主题 --}}
  489. @if (!empty($quickPrediction['priority_topics']))
  490. <div class="mb-6">
  491. <h5 class="text-sm font-medium text-gray-900 mb-3 flex items-center">
  492. <svg class="w-4 h-4 mr-2 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  493. <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>
  494. </svg>
  495. 优先学习主题 (前5个)
  496. </h5>
  497. <div class="space-y-2">
  498. @foreach (array_slice($quickPrediction['priority_topics'], 0, 5) as $topic)
  499. <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200">
  500. <div class="flex items-center space-x-3">
  501. <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
  502. <span class="text-xs font-medium text-yellow-800">{{ substr($topic['kp_code'] ?? '', -2) }}</span>
  503. </div>
  504. <div>
  505. <div class="text-sm font-medium text-gray-900">{{ $topic['kp_code'] ?? 'N/A' }}</div>
  506. <div class="text-xs text-gray-500">掌握度: {{ number_format(($topic['mastery_level'] ?? 0) * 100, 1) }}%</div>
  507. </div>
  508. </div>
  509. <div class="text-right">
  510. <div class="text-sm font-medium text-gray-900">优先级</div>
  511. <div class="text-xs text-gray-500">{{ number_format($topic['priority_score'] ?? 0, 2) }}</div>
  512. </div>
  513. </div>
  514. @endforeach
  515. </div>
  516. </div>
  517. @endif
  518. {{-- 学习建议 --}}
  519. @if (!empty($quickPrediction['recommended_actions']))
  520. <div>
  521. <h5 class="text-sm font-medium text-gray-900 mb-3 flex items-center">
  522. <svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  523. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
  524. </svg>
  525. 个性化学习建议
  526. </h5>
  527. <div class="space-y-3">
  528. @foreach (array_slice($quickPrediction['recommended_actions'], 0, 3) as $recommendation)
  529. <div class="p-3 bg-blue-50 rounded-lg border border-blue-200">
  530. <div class="flex items-center justify-between mb-2">
  531. <span class="text-sm font-medium text-gray-900">{{ $recommendation['kp_code'] ?? 'N/A' }}</span>
  532. <span class="text-xs text-gray-500">
  533. {{ number_format(($recommendation['current_mastery'] ?? 0) * 100, 0) }}% → {{ number_format(($recommendation['target_mastery'] ?? 0) * 100, 0) }}%
  534. </span>
  535. </div>
  536. <div class="flex flex-wrap gap-1">
  537. @foreach (($recommendation['actions'] ?? []) as $action)
  538. <span class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">
  539. {{ $action }}
  540. </span>
  541. @endforeach
  542. </div>
  543. </div>
  544. @endforeach
  545. </div>
  546. </div>
  547. @endif
  548. {{-- 历史预测记录 --}}
  549. @elseif (!empty($dashboardData['prediction']['list']['predictions']))
  550. @php
  551. $historicalPredictions = $dashboardData['prediction']['list']['predictions'];
  552. @endphp
  553. <div class="space-y-4">
  554. <h5 class="text-sm font-medium text-gray-900 mb-3">历史预测记录</h5>
  555. @foreach (array_slice($historicalPredictions, 0, 3) as $prediction)
  556. <div class="p-4 border border-gray-200 rounded-lg">
  557. <div class="flex items-center justify-between mb-2">
  558. <div class="text-sm font-medium text-gray-900">{{ $prediction['target_entity'] ?? 'N/A' }}</div>
  559. <span class="text-xs text-gray-500">{{ $prediction['prediction_date'] ?? date('m-d') }}</span>
  560. </div>
  561. <div class="flex items-center justify-between">
  562. <div class="text-sm text-gray-600">
  563. 当前: {{ $prediction['current_score'] ?? 0 }}分 →
  564. <span class="font-semibold text-gray-900">{{ $prediction['predicted_score'] ?? 0 }}分</span>
  565. </div>
  566. <div class="text-sm font-semibold text-green-600">
  567. +{{ number_format(($prediction['predicted_score'] ?? 0) - ($prediction['current_score'] ?? 0), 1) }}分
  568. </div>
  569. </div>
  570. </div>
  571. @endforeach
  572. </div>
  573. @else
  574. <div class="text-center py-8 text-gray-500">
  575. <div class="mb-4">
  576. <svg class="w-12 h-12 mx-auto text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  577. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
  578. </svg>
  579. </div>
  580. <p class="text-sm font-medium text-gray-900 mb-1">暂无预测数据</p>
  581. <p class="text-xs text-gray-500 mb-4">点击"快速预测"按钮生成AI预测分析</p>
  582. <button
  583. wire:click="generateQuickPrediction"
  584. class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
  585. >
  586. <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  587. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  588. </svg>
  589. 生成快速预测
  590. </button>
  591. </div>
  592. @endif
  593. </div>
  594. </div>
  595. </div>
  596. {{-- 掌握度热力图 - 已隐藏(功能已实现但暂时隐藏以简化界面) --}}
  597. {{-- <div class="mb-8">
  598. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  599. <div class="px-6 py-5 border-b border-gray-100">
  600. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  601. <svg class="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  602. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
  603. </svg>
  604. 知识点掌握度热力图
  605. </h3>
  606. </div>
  607. <div class="p-6">
  608. <livewire:mastery-heatmap :student-id="$studentId" />
  609. </div>
  610. </div>
  611. </div> --}}
  612. {{-- 知识点依赖关系图 - 已隐藏(功能已实现但暂时隐藏以简化界面) --}}
  613. {{-- <div class="mb-8">
  614. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  615. <div class="px-6 py-5 border-b border-gray-100">
  616. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  617. <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  618. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
  619. </svg>
  620. 知识点依赖关系图
  621. </h3>
  622. </div>
  623. <div class="p-6">
  624. <livewire:knowledge-dependency-graph :student-id="$studentId" />
  625. </div>
  626. </div>
  627. </div> --}}
  628. {{-- 推荐学习路径 - 已隐藏(功能已实现但暂时隐藏以简化界面) --}}
  629. {{-- @if (isset($dashboardData['learning_path']['recommendations']['recommendations']))
  630. <div class="mb-8">
  631. <div class="bg-white shadow-sm rounded-xl border border-gray-200">
  632. <div class="px-6 py-5 border-b border-gray-100">
  633. <h3 class="text-lg font-semibold text-gray-900 flex items-center">
  634. <svg class="w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  635. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
  636. </svg>
  637. 推荐学习路径
  638. </h3>
  639. </div>
  640. <div class="p-6">
  641. <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  642. @foreach ($dashboardData['learning_path']['recommendations']['recommendations'] as $recommendation)
  643. <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 transition-colors">
  644. <div class="flex items-center mb-3">
  645. <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
  646. <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  647. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
  648. </svg>
  649. </div>
  650. <div class="flex-1">
  651. <div class="text-sm font-medium text-gray-900">{{ $recommendation['target_kp_name'] }}</div>
  652. <div class="text-xs text-gray-500">{{ $recommendation['target_kp_code'] }}</div>
  653. </div>
  654. </div>
  655. <div class="mb-3">
  656. <div class="flex items-center justify-between text-xs text-gray-600 mb-1">
  657. <span>当前掌握度</span>
  658. <span class="font-medium">{{ number_format($recommendation['current_mastery'] * 100, 1) }}%</span>
  659. </div>
  660. <div class="w-full bg-gray-200 rounded-full h-1.5">
  661. <div class="bg-indigo-500 h-1.5 rounded-full" style="width: {{ $recommendation['current_mastery'] * 100 }}%"></div>
  662. </div>
  663. </div>
  664. <p class="text-xs text-gray-600 mb-3">{{ $recommendation['reason'] }}</p>
  665. <button class="w-full text-xs bg-indigo-600 text-white py-2 px-3 rounded-md hover:bg-indigo-700 transition-colors">
  666. 生成学习路径
  667. </button>
  668. </div>
  669. @endforeach
  670. </div>
  671. </div>
  672. </div>
  673. @endif --}}
  674. </div>
  675. </div>
  676. @endif
  677. {{-- 通知脚本 --}}
  678. <script>
  679. document.addEventListener('notify', (event) => {
  680. const message = event.detail.message;
  681. const type = event.detail.type || 'info';
  682. alert(message);
  683. });
  684. </script>