feat: 总览数据联调

src/views/TeacherDashboardView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dashboard-page page-stack">
+  <div v-loading="loading" class="dashboard-page page-stack">
     <section class="hero-strip dashboard-hero">
       <div>
         <span class="eyebrow">教学数据中心</span>
@@ -8,12 +8,12 @@
       </div>
       <div class="hero-actions">
         <el-button :icon="Download">导出教学报告</el-button>
-        <el-button :icon="Plus" type="primary">新建任务</el-button>
+        <el-button :icon="Refresh" :loading="loading" @click="loadOverview">刷新数据</el-button>
       </div>
     </section>
 
     <section class="stats-grid">
-      <article v-for="item in teacherDashboard.kpis" :key="item.label" class="stat-card">
+      <article v-for="item in dashboard.kpis" :key="item.label" class="stat-card">
         <div :class="['stat-mark', item.tone]">{{ item.label.slice(0, 1) }}</div>
         <div>
           <span>{{ item.label }}</span>
@@ -27,23 +27,23 @@
       <div class="section-header">
         <div>
           <h2>我的学生列表</h2>
-          <p>可替换为学生训练情况表、学习画像表和师生关系表聚合数据</p>
+          <p>当前带教关系下学生训练概览</p>
         </div>
         <div class="toolbar-actions">
-          <el-input class="compact-search" :prefix-icon="Search" placeholder="搜索学生" />
-          <el-button :icon="Search">筛选</el-button>
+          <el-input v-model="searchKeyword" class="compact-search" :prefix-icon="Search" clearable placeholder="搜索学生" />
         </div>
       </div>
-      <el-table :data="teacherDashboard.students" row-key="id">
+      <el-table :data="filteredStudents" row-key="id">
         <el-table-column prop="id" label="学生ID" width="110" />
         <el-table-column prop="name" label="姓名" width="100" />
+        <el-table-column prop="username" label="账号" width="130" />
         <el-table-column prop="department" label="科室" width="110" />
         <el-table-column prop="trainings" label="累计训练" width="100" />
         <el-table-column prop="completion" label="完成率" width="90" />
         <el-table-column prop="avgScore" label="平均分" width="90" />
         <el-table-column prop="weakDimension" label="薄弱维度" width="100">
           <template #default="{ row }">
-            <el-tag type="warning">{{ row.weakDimension }}</el-tag>
+            <el-tag :type="row.weakDimension === '-' ? 'info' : 'warning'">{{ row.weakDimension }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="favoriteType" label="最常训练类型" width="130" />
@@ -59,33 +59,25 @@
     <section class="overview-grid">
       <ChartPanel title="整体薄弱维度" subtitle="问诊、诊断、治疗、沟通、检查平均得分率" :option="weakRadarOption" />
       <ChartPanel class="wide-chart" title="整体训练次数趋势" subtitle="近6个月所带学生训练总次数" :option="trainingTrendOption" />
-      <ChartPanel class="wide-chart" title="任务完成情况" subtitle="一周内下发任务的已完成与未完成人数" :option="taskCompletionOption" />
-      <ChartPanel title="当前任务得分分布" subtitle="已完成学生的分数分布" :option="scoreDistributionOption" />
+      <ChartPanel class="wide-chart" title="学生待完成任务" subtitle="按学生展示待完成任务数量" :option="taskCompletionOption" />
+      <ChartPanel title="学生平均分分布" subtitle="按学生训练平均分分段统计" :option="scoreDistributionOption" />
     </section>
 
     <section class="data-section">
       <div class="section-header">
         <div>
-          <h2>任务列表</h2>
-          <p>展示已下发任务的完成进度与训练情况</p>
+          <h2>学生待完成任务</h2>
+          <p>接口返回任务摘要为空时，按学生维度展示待完成数量</p>
         </div>
-        <el-button :icon="Plus" type="primary">新建任务</el-button>
       </div>
-      <el-table :data="teacherDashboard.taskRows" row-key="id">
-        <el-table-column prop="id" label="任务ID" width="130" />
-        <el-table-column prop="name" label="任务名称" min-width="180" />
-        <el-table-column prop="type" label="类型" min-width="150" />
-        <el-table-column prop="expected" label="应完成人数" width="110" />
-        <el-table-column prop="finished" label="实际完成" width="100" />
-        <el-table-column prop="startedAt" label="开始时间" width="120" />
-        <el-table-column prop="deadline" label="截止时间" width="120" />
-        <el-table-column prop="avgScore" label="平均分" width="90" />
-        <el-table-column prop="highestScore" label="最高成绩" width="100" />
-        <el-table-column label="操作" width="160" fixed="right">
-          <template #default>
-            <el-button link type="primary">修改</el-button>
-            <el-button link type="primary">详情</el-button>
-            <el-button link type="danger">删除</el-button>
+      <el-table :data="dashboard.pendingRows" row-key="id" empty-text="暂无待完成任务数据">
+        <el-table-column prop="id" label="学生ID" width="110" />
+        <el-table-column prop="name" label="姓名" min-width="120" />
+        <el-table-column prop="department" label="科室" width="120" />
+        <el-table-column prop="trainings" label="累计训练" width="100" />
+        <el-table-column prop="pendingTasks" label="待完成任务" width="120">
+          <template #default="{ row }">
+            <el-tag :type="row.pendingTasks > 0 ? 'danger' : 'success'">{{ row.pendingTasks }}</el-tag>
           </template>
         </el-table-column>
       </el-table>
@@ -94,26 +86,91 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import type { EChartsOption } from 'echarts'
-import { Download, Plus, Search } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import { Download, Refresh, Search } from '@element-plus/icons-vue'
 import ChartPanel from '@/components/ChartPanel.vue'
-import { teacherDashboard } from '@/mock/dashboard'
+import { fetchTeachingOverview, type TeachingOverview } from '@/api/stats'
+import { useAppStore } from '@/stores/app'
+
+interface StatCard {
+  label: string
+  value: string
+  change: string
+  tone: 'blue' | 'green' | 'purple' | 'orange'
+}
 
 const axisLine = { lineStyle: { color: '#dce3eb' } }
 const splitLine = { lineStyle: { color: '#eef2f7' } }
+const appStore = useAppStore()
+const loading = ref(false)
+const searchKeyword = ref('')
+const overview = ref<TeachingOverview | null>(null)
+
+const dashboard = computed(() => {
+  const data = overview.value
+  const summary = data?.overview || { radar: [], train_months: [], train_monthly: [] }
+  const students = (data?.students || []).map(item => ({
+    id: String(item.id),
+    name: item.real_name || item.username || '-',
+    username: item.username || '-',
+    department: item.department || '-',
+    trainings: item.train_total,
+    completion: `${item.complete_rate}%`,
+    avgScore: item.avg_score,
+    weakDimension: item.weak_dimensions?.length ? item.weak_dimensions.join('、') : '-',
+    favoriteType: caseTypeLabel(item.most_trained_type),
+    lastTraining: formatDateTime(item.last_trained_at),
+    pendingTasks: item.pending_tasks || 0
+  }))
+  const pendingTotal = students.reduce((total, item) => total + item.pendingTasks, 0)
+
+  return {
+    kpis: [
+      stat('我的学生数', numberText(summary.student_count), '带教范围', 'blue'),
+      stat('学生整体平均分', scoreText(summary.students_avg), `医院 ${scoreText(summary.institution_avg)}`, 'green'),
+      stat('近6月训练次数', numberText((summary.train_monthly || []).reduce((total, item) => total + item, 0)), '学生训练合计', 'purple'),
+      stat('待完成任务数', numberText(pendingTotal), '学生未完成任务', 'orange')
+    ],
+    students,
+    weakRadar: summary.radar.map(item => ({ name: item.dimension, value: item.score })),
+    months: summary.train_months || [],
+    trainingTrend: summary.train_monthly || [],
+    pendingRows: students.map(item => ({
+      id: item.id,
+      name: item.name,
+      department: item.department,
+      trainings: item.trainings,
+      pendingTasks: item.pendingTasks
+    })),
+    scoreDistribution: createScoreDistribution(students.map(item => item.avgScore))
+  }
+})
+
+const filteredStudents = computed(() => {
+  const keyword = searchKeyword.value.trim()
+  if (!keyword) {
+    return dashboard.value.students
+  }
+  return dashboard.value.students.filter(item =>
+    item.name.includes(keyword) ||
+    item.username.includes(keyword) ||
+    item.department.includes(keyword)
+  )
+})
 
 const weakRadarOption = computed<EChartsOption>(() => ({
   color: ['#dc2626'],
   radar: {
     radius: 94,
-    indicator: teacherDashboard.weakRadar.map(item => ({ name: item.name, max: 100 }))
+    indicator: dashboard.value.weakRadar.map(item => ({ name: item.name, max: 100 }))
   },
   series: [
     {
       type: 'radar',
       areaStyle: { color: 'rgba(220, 38, 38, 0.12)' },
-      data: [{ value: teacherDashboard.weakRadar.map(item => item.value), name: '平均得分率' }]
+      data: [{ value: dashboard.value.weakRadar.map(item => item.value), name: '平均得分率' }]
     }
   ]
 }))
@@ -122,23 +179,21 @@ const trainingTrendOption = computed<EChartsOption>(() => ({
   color: ['#2563eb'],
   tooltip: { trigger: 'axis' },
   grid: { left: 42, right: 20, top: 28, bottom: 32 },
-  xAxis: { type: 'category', data: teacherDashboard.months, axisLine },
+  xAxis: { type: 'category', data: dashboard.value.months, axisLine },
   yAxis: { type: 'value', splitLine },
   series: [
-    { name: '训练次数', type: 'line', smooth: true, areaStyle: { color: 'rgba(37, 99, 235, 0.12)' }, data: teacherDashboard.trainingTrend }
+    { name: '训练次数', type: 'line', smooth: true, areaStyle: { color: 'rgba(37, 99, 235, 0.12)' }, data: dashboard.value.trainingTrend }
   ]
 }))
 
 const taskCompletionOption = computed<EChartsOption>(() => ({
-  color: ['#0f766e', '#f59e0b'],
+  color: ['#f59e0b'],
   tooltip: { trigger: 'axis' },
-  legend: { top: 0 },
-  grid: { left: 42, right: 20, top: 42, bottom: 40 },
-  xAxis: { type: 'category', data: teacherDashboard.taskCompletion.map(item => item.name), axisLine },
+  grid: { left: 42, right: 20, top: 28, bottom: 40 },
+  xAxis: { type: 'category', data: dashboard.value.pendingRows.map(item => item.name), axisLine },
   yAxis: { type: 'value', splitLine },
   series: [
-    { name: '已完成', type: 'bar', barWidth: 20, data: teacherDashboard.taskCompletion.map(item => item.done), itemStyle: { borderRadius: [5, 5, 0, 0] } },
-    { name: '未完成', type: 'bar', barWidth: 20, data: teacherDashboard.taskCompletion.map(item => item.undone), itemStyle: { borderRadius: [5, 5, 0, 0] } }
+    { name: '待完成任务', type: 'bar', barWidth: 20, data: dashboard.value.pendingRows.map(item => item.pendingTasks), itemStyle: { borderRadius: [5, 5, 0, 0] } }
   ]
 }))
 
@@ -152,9 +207,74 @@ const scoreDistributionOption = computed<EChartsOption>(() => ({
       type: 'pie',
       radius: ['42%', '70%'],
       center: ['50%', '45%'],
-      data: teacherDashboard.scoreDistribution,
+      data: dashboard.value.scoreDistribution,
       label: { formatter: '{b}\n{d}%' }
     }
   ]
 }))
+
+async function loadOverview() {
+  if (!appStore.token) {
+    ElMessage.warning('缺少登录信息，请重新登录')
+    return
+  }
+
+  try {
+    loading.value = true
+    overview.value = await fetchTeachingOverview(appStore.token)
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '获取教学概览失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+function stat(label: string, value: string, change: string, tone: StatCard['tone']): StatCard {
+  return { label, value, change, tone }
+}
+
+function numberText(value: number | null | undefined) {
+  return typeof value === 'number' && Number.isFinite(value) ? value.toLocaleString('zh-CN') : '-'
+}
+
+function scoreText(value: number | null | undefined) {
+  return typeof value === 'number' && Number.isFinite(value) ? value.toFixed(1) : '-'
+}
+
+function caseTypeLabel(type: string) {
+  const labels: Record<string, string> = {
+    diagnosis_treatment: '诊疗病例',
+    traditional: '传统病例',
+    teaching: '教学病例',
+    script: '脚本病例'
+  }
+  return labels[type] || type || '-'
+}
+
+function formatDateTime(value: string) {
+  if (!value) {
+    return '-'
+  }
+  return value.replace('T', ' ').replace('Z', '').slice(0, 19)
+}
+
+function createScoreDistribution(scores: number[]) {
+  const buckets = [
+    { name: '90分以上', value: 0 },
+    { name: '80-89分', value: 0 },
+    { name: '70-79分', value: 0 },
+    { name: '60-69分', value: 0 },
+    { name: '60分以下', value: 0 }
+  ]
+  scores.forEach(score => {
+    if (score >= 90) buckets[0].value += 1
+    else if (score >= 80) buckets[1].value += 1
+    else if (score >= 70) buckets[2].value += 1
+    else if (score >= 60) buckets[3].value += 1
+    else buckets[4].value += 1
+  })
+  return buckets
+}
+
+onMounted(loadOverview)
 </script>