统计报表

web/src/components.d.ts

@@ -17,6 +17,8 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']

web/src/layouts/AdminLayout.vue

@@ -43,6 +43,12 @@ const isTimetableManager = computed(() =>
   ),
 )
 
+const isStatisticsViewer = computed(() =>
+  roles.value.some((role) =>
+    ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Leader'].includes(role),
+  ),
+)
+
 function hasAnyRole(allowedRoles: string[]) {
   return roles.value.some((role) => allowedRoles.includes(role))
 }
@@ -58,6 +64,14 @@ const navigationGroups = computed<NavigationGroup[]>(() => [
     direct: true,
     items: [{ path: '/dashboard', label: '教务总览' }],
   },
+  ...(isStatisticsViewer.value
+    ? [{
+        key: 'statistics',
+        label: '统计报表',
+        direct: true,
+        items: [{ path: '/statistics', label: '统计报表' }],
+      } as NavigationGroup]
+    : []),
   {
     key: 'organization',
     label: '组织与权限',

web/src/router/index.ts

@@ -260,6 +260,14 @@ const router = createRouter({
           component: () => import('../views/UsersView.vue'),
           meta: { roles: ['SuperAdmin'] },
         },
+        {
+          path: 'statistics',
+          name: 'statistics',
+          component: () => import('../views/StatisticsView.vue'),
+          meta: {
+            roles: ['SuperAdmin', 'AcademicAdmin', 'CollegeAdmin', 'Leader'],
+          },
+        },
       ],
     },
     { path: '/:pathMatch(.*)*', redirect: '/dashboard' },

web/src/views/StatisticsView.vue

@@ -0,0 +1,649 @@
+<script setup lang="ts">
+import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { Download, Search } from '@element-plus/icons-vue'
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart, PieChart } from 'echarts/charts'
+import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import { downloadApiFile } from '../api/excel'
+import http from '../api/http'
+
+echarts.use([BarChart, LineChart, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer])
+
+// ── Reference data ──
+const terms = ref<any[]>([])
+const colleges = ref<any[]>([])
+const courseCategories = ref<any[]>([])
+
+// ── Active tab ──
+const activeTab = ref('students')
+
+// ── Chart instance management ──
+const chartMap = new Map<string, echarts.ECharts>()
+function setChart(key: string, inst: echarts.ECharts) {
+  chartMap.get(key)?.dispose()
+  chartMap.set(key, inst)
+}
+function disposeCharts(prefix: string) {
+  for (const [k, v] of chartMap) { if (k.startsWith(prefix)) { v.dispose(); chartMap.delete(k) } }
+}
+
+onUnmounted(() => { for (const v of chartMap.values()) v.dispose(); chartMap.clear() })
+
+window.addEventListener('resize', () => { for (const v of chartMap.values()) v.resize() })
+
+// ── Shared filter state ──
+const globalTermId = ref<string>()
+
+// ── 1. Students ──
+const studentFilter = reactive({ collegeId: undefined as string | undefined, majorId: undefined as string | undefined, classId: undefined as string | undefined, grade: undefined as number | undefined })
+const studentMajors = ref<any[]>([]); const studentClasses = ref<any[]>([])
+const studentStats = ref<any>(null); const studentLoading = ref(false)
+
+async function loadStudentStats() {
+  studentLoading.value = true
+  try {
+    const params: any = {}
+    if (globalTermId.value) params.academicTermId = globalTermId.value
+    if (studentFilter.collegeId) params.collegeId = studentFilter.collegeId
+    if (studentFilter.majorId) params.majorId = studentFilter.majorId
+    if (studentFilter.classId) params.classId = studentFilter.classId
+    if (studentFilter.grade) params.grade = studentFilter.grade
+    const { data } = await http.get('/statistics/students/summary', { params })
+    studentStats.value = data
+    await nextTick()
+    renderStudentCharts(data)
+  } finally { studentLoading.value = false }
+}
+
+function renderStudentCharts(d: any) {
+  const key = 'student-'
+  disposeCharts(key)
+  renderPie(key + 'college', 'student-college-chart', d.byCollege?.map((x: any) => ({ name: x.collegeName, value: x.count })) ?? [], '各学院学生分布')
+  renderPie(key + 'gender', 'student-gender-chart', d.byGender?.map((x: any) => ({ name: x.gender === 'Male' ? '男' : x.gender === 'Female' ? '女' : x.gender, value: x.count })) ?? [], '性别分布')
+  renderBar(key + 'status', 'student-status-chart', d.byStatus?.map((x: any) => x.status) ?? [], d.byStatus?.map((x: any) => x.count) ?? [], '学籍状态')
+  renderLine(key + 'trend', 'student-trend-chart', d.enrollmentTrend?.map((x: any) => `${x.year}年`) ?? [], d.enrollmentTrend?.map((x: any) => x.count) ?? [], '历年招生趋势')
+}
+
+async function loadStudentMajors() {
+  if (studentFilter.collegeId) {
+    const { data } = await http.get('/base-data/majors')
+    studentMajors.value = (data as any[]).filter((m: any) => m.collegeId === studentFilter.collegeId)
+  } else { studentMajors.value = [] }
+}
+async function onStudentCollegeChange() {
+  studentFilter.majorId = undefined; studentFilter.classId = undefined; studentClasses.value = []
+  await loadStudentMajors()
+}
+async function onStudentMajorChange() {
+  studentFilter.classId = undefined; studentClasses.value = []
+  if (studentFilter.majorId) {
+    const { data } = await http.get('/base-data/classes')
+    studentClasses.value = (data as any[]).filter((c: any) => c.majorId === studentFilter.majorId)
+  }
+}
+
+// ── 2. Courses ──
+const courseFilter = reactive({ collegeId: undefined as string | undefined, categoryId: undefined as string | undefined, nature: undefined as string | undefined })
+const courseStats = ref<any>(null); const courseLoading = ref(false)
+
+async function loadCourseStats() {
+  courseLoading.value = true
+  try {
+    const params: any = {}
+    if (courseFilter.collegeId) params.collegeId = courseFilter.collegeId
+    if (courseFilter.categoryId) params.categoryId = courseFilter.categoryId
+    if (courseFilter.nature) params.nature = courseFilter.nature
+    const { data } = await http.get('/statistics/courses/summary', { params })
+    courseStats.value = data
+    await nextTick()
+    renderCourseCharts(data)
+  } finally { courseLoading.value = false }
+}
+
+function renderCourseCharts(d: any) {
+  const key = 'course-'
+  disposeCharts(key)
+  renderBar(key + 'college', 'course-college-chart', d.byCollege?.map((x: any) => x.collegeName) ?? [], d.byCollege?.map((x: any) => x.count) ?? [], '各学院课程数')
+  renderPie(key + 'nature', 'course-nature-chart', d.byNature?.map((x: any) => ({ name: x.natureLabel, value: x.count })) ?? [], '课程性质')
+  renderBar(key + 'credit', 'course-credit-chart', d.creditDistribution?.map((x: any) => x.range) ?? [], d.creditDistribution?.map((x: any) => x.count) ?? [], '学分分布')
+  renderPie(key + 'assessment', 'course-assessment-chart', d.byAssessment?.map((x: any) => ({ name: x.label, value: x.count })) ?? [], '考核方式')
+}
+
+// ── 3. Grades ──
+const gradeFilter = reactive({ collegeId: undefined as string | undefined, majorId: undefined as string | undefined, classId: undefined as string | undefined, courseId: undefined as string | undefined })
+const gradeMajors = ref<any[]>([]); const gradeClasses = ref<any[]>([])
+const gradeStats = ref<any>(null); const gradeLoading = ref(false)
+
+async function loadGradeStats() {
+  gradeLoading.value = true
+  try {
+    const params: any = {}
+    if (globalTermId.value) params.academicTermId = globalTermId.value
+    if (gradeFilter.collegeId) params.collegeId = gradeFilter.collegeId
+    if (gradeFilter.majorId) params.majorId = gradeFilter.majorId
+    if (gradeFilter.classId) params.classId = gradeFilter.classId
+    if (gradeFilter.courseId) params.courseId = gradeFilter.courseId
+    const { data } = await http.get('/statistics/grades/summary', { params })
+    gradeStats.value = data
+    await nextTick()
+    renderGradeCharts(data)
+  } finally { gradeLoading.value = false }
+}
+
+function renderGradeCharts(d: any) {
+  const key = 'grade-'
+  disposeCharts(key)
+  renderBar(key + 'score', 'grade-score-chart', d.scoreDistribution?.map((x: any) => x.label) ?? [], d.scoreDistribution?.map((x: any) => x.count) ?? [], '分数段分布')
+  renderBar(key + 'gpa', 'grade-gpa-chart', d.gpaDistribution?.map((x: any) => x.range) ?? [], d.gpaDistribution?.map((x: any) => x.count) ?? [], 'GPA分布')
+  const prbc = d.passRateByCollege ?? []
+  renderBarHorizontal(key + 'pr-college', 'grade-pr-college-chart', prbc.map((x: any) => x.collegeName), prbc.map((x: any) => +(x.passRate * 100).toFixed(1)), '各学院通过率(%)')
+  const abc = (d.averageByCourse ?? []).slice(0, 15)
+  renderBarHorizontal(key + 'avg-course', 'grade-avg-course-chart', abc.map((x: any) => x.courseName), abc.map((x: any) => x.averageScore), '课程均分Top15')
+}
+
+async function onGradeCollegeChange() {
+  gradeFilter.majorId = undefined; gradeFilter.classId = undefined; gradeMajors.value = []; gradeClasses.value = []
+  if (gradeFilter.collegeId) {
+    const { data } = await http.get('/base-data/majors')
+    gradeMajors.value = (data as any[]).filter((m: any) => m.collegeId === gradeFilter.collegeId)
+  }
+}
+async function onGradeMajorChange() {
+  gradeFilter.classId = undefined; gradeClasses.value = []
+  if (gradeFilter.majorId) {
+    const { data } = await http.get('/base-data/classes')
+    gradeClasses.value = (data as any[]).filter((c: any) => c.majorId === gradeFilter.majorId)
+  }
+}
+
+// ── 4. Pass Rates ──
+const passRateFilter = reactive({ collegeId: undefined as string | undefined, courseId: undefined as string | undefined })
+const passRateStats = ref<any>(null); const passRateLoading = ref(false)
+
+async function loadPassRateStats() {
+  passRateLoading.value = true
+  try {
+    const params: any = {}
+    if (globalTermId.value) params.academicTermId = globalTermId.value
+    if (passRateFilter.collegeId) params.collegeId = passRateFilter.collegeId
+    if (passRateFilter.courseId) params.courseId = passRateFilter.courseId
+    const { data } = await http.get('/statistics/pass-rates/summary', { params })
+    passRateStats.value = data
+    await nextTick()
+    renderPassRateCharts(data)
+  } finally { passRateLoading.value = false }
+}
+
+function renderPassRateCharts(d: any) {
+  const key = 'pr-'
+  disposeCharts(key)
+  const bc = d.byCollege ?? []
+  renderBar(key + 'college', 'pr-college-chart', bc.map((x: any) => x.collegeName), bc.map((x: any) => +(x.passRate * 100).toFixed(1)), '各学院通过率(%)')
+  const bcn = (d.byCourse ?? []).slice(0, 15)
+  renderBar(key + 'course', 'pr-course-chart', bcn.map((x: any) => x.courseName), bcn.map((x: any) => +(x.passRate * 100).toFixed(1)), '课程通过率Top15(%)')
+  renderLine(key + 'trend', 'pr-trend-chart', d.trendByTerm?.map((x: any) => x.termName) ?? [], d.trendByTerm?.map((x: any) => +(x.passRate * 100).toFixed(1)) ?? [], '学期通过率趋势(%)')
+  renderPie(key + 'nature', 'pr-nature-chart', d.passRateByNature?.map((x: any) => ({ name: x.natureLabel, value: x.total })) ?? [], '各性质课程记录数')
+}
+
+// ── 5. Teacher Workload ──
+const workloadFilter = reactive({ collegeId: undefined as string | undefined })
+const workloadStats = ref<any>(null); const workloadLoading = ref(false)
+
+async function loadWorkloadStats() {
+  workloadLoading.value = true
+  try {
+    const params: any = {}
+    if (globalTermId.value) params.academicTermId = globalTermId.value
+    if (workloadFilter.collegeId) params.collegeId = workloadFilter.collegeId
+    const { data } = await http.get('/statistics/teacher-workload/summary', { params })
+    workloadStats.value = data
+    await nextTick()
+    renderWorkloadCharts(data)
+  } finally { workloadLoading.value = false }
+}
+
+function renderWorkloadCharts(d: any) {
+  const key = 'wl-'
+  disposeCharts(key)
+  const bt = (d.byTeacher ?? []).slice(0, 20)
+  renderBarHorizontal(key + 'teacher', 'wl-teacher-chart', bt.map((x: any) => x.teacherName), bt.map((x: any) => x.totalHours), '教师工作量Top20(学时)')
+  const bcol = d.byCollege ?? []
+  renderBar(key + 'college', 'wl-college-chart', bcol.map((x: any) => x.collegeName), bcol.map((x: any) => x.avgHoursPerTeacher), '各学院人均学时')
+  const btit = d.byTitle ?? []
+  renderBar(key + 'title', 'wl-title-chart', btit.map((x: any) => x.title), btit.map((x: any) => x.avgHours), '各职称人均学时')
+  // distribute teachers by workload range
+  const ranges = [
+    { range: '0-50', min: 0, max: 50 },
+    { range: '51-100', min: 51, max: 100 },
+    { range: '101-150', min: 101, max: 150 },
+    { range: '151-200', min: 151, max: 200 },
+    { range: '200+', min: 201, max: 9999 },
+  ]
+  const dist = ranges.map(r => ({
+    name: r.range + '学时',
+    value: (d.byTeacher ?? []).filter((x: any) => x.totalHours >= r.min && x.totalHours <= r.max).length
+  }))
+  renderPie(key + 'dist', 'wl-dist-chart', dist, '工作量分布')
+}
+
+// ── 6. Classroom Utilization ──
+const classroomFilter = reactive({ buildingId: undefined as string | undefined, campusId: undefined as string | undefined })
+const classroomBuildings = ref<any[]>([]); const classroomCampuses = ref<any[]>([])
+const classroomStats = ref<any>(null); const classroomLoading = ref(false)
+
+async function loadClassroomStats() {
+  classroomLoading.value = true
+  try {
+    const params: any = {}
+    if (globalTermId.value) params.academicTermId = globalTermId.value
+    if (classroomFilter.buildingId) params.buildingId = classroomFilter.buildingId
+    if (classroomFilter.campusId) params.campusId = classroomFilter.campusId
+    const { data } = await http.get('/statistics/classroom-utilization/summary', { params })
+    classroomStats.value = data
+    await nextTick()
+    renderClassroomCharts(data)
+  } finally { classroomLoading.value = false }
+}
+
+function renderClassroomCharts(d: any) {
+  const key = 'cr-'
+  disposeCharts(key)
+  const bb = d.byBuilding ?? []
+  renderBar(key + 'building', 'cr-building-chart', bb.map((x: any) => x.buildingName), bb.map((x: any) => +(x.utilizationRate * 100).toFixed(1)), '各教学楼利用率(%)')
+  const bdow = d.byDayOfWeek ?? []
+  renderBar(key + 'dow', 'cr-dow-chart', bdow.map((x: any) => x.dayLabel), bdow.map((x: any) => +(x.utilizationRate * 100).toFixed(1)), '各工作日利用率(%)')
+  const bts = d.byTimeSlot ?? []
+  renderBar(key + 'slot', 'cr-slot-chart', bts.map((x: any) => `第${x.period}节`), bts.map((x: any) => +(x.utilizationRate * 100).toFixed(1)), '各节次利用率(%)')
+  renderBar(key + 'type', 'cr-type-chart', d.byClassroomType?.map((x: any) => x.roomType) ?? [], d.byClassroomType?.map((x: any) => +(x.utilizationRate * 100).toFixed(1)) ?? [], '各教室类型利用率(%)')
+}
+
+// ── Reusable chart renderers ──
+function ensureDom(id: string): HTMLElement | null {
+  return document.getElementById(id)
+}
+
+function renderPie(chartKey: string, domId: string, data: { name: string; value: number }[], title: string) {
+  const dom = ensureDom(domId)
+  if (!dom) return
+  const inst = echarts.init(dom)
+  inst.setOption({
+    title: { text: title, left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+    legend: { bottom: 0, type: 'scroll' },
+    series: [{ type: 'pie', radius: ['35%', '65%'], center: ['50%', '55%'], data, label: { formatter: '{b}\n{d}%' } }]
+  })
+  setChart(chartKey, inst)
+}
+
+function renderBar(chartKey: string, domId: string, categories: string[], values: number[], title: string) {
+  const dom = ensureDom(domId)
+  if (!dom) return
+  const inst = echarts.init(dom)
+  inst.setOption({
+    title: { text: title, left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '12%', containLabel: true },
+    xAxis: { type: 'category', data: categories, axisLabel: { rotate: 30, fontSize: 11 } },
+    yAxis: { type: 'value' },
+    series: [{ type: 'bar', data: values, itemStyle: { color: '#409EFF' } }]
+  })
+  setChart(chartKey, inst)
+}
+
+function renderBarHorizontal(chartKey: string, domId: string, categories: string[], values: number[], title: string) {
+  const dom = ensureDom(domId)
+  if (!dom) return
+  const inst = echarts.init(dom)
+  inst.setOption({
+    title: { text: title, left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    xAxis: { type: 'value' },
+    yAxis: { type: 'category', data: categories.reverse(), axisLabel: { fontSize: 11 } },
+    series: [{ type: 'bar', data: values.reverse(), itemStyle: { color: '#67C23A' } }]
+  })
+  setChart(chartKey, inst)
+}
+
+function renderLine(chartKey: string, domId: string, categories: string[], values: number[], title: string) {
+  const dom = ensureDom(domId)
+  if (!dom) return
+  const inst = echarts.init(dom)
+  inst.setOption({
+    title: { text: title, left: 'center', textStyle: { fontSize: 14 } },
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '12%', containLabel: true },
+    xAxis: { type: 'category', data: categories, axisLabel: { rotate: 30, fontSize: 11 } },
+    yAxis: { type: 'value' },
+    series: [{ type: 'line', data: values, smooth: true, itemStyle: { color: '#E6A23C' }, areaStyle: { color: 'rgba(230,162,60,0.15)' } }]
+  })
+  setChart(chartKey, inst)
+}
+
+// ── Excel export ──
+function buildFilterParams(type: string): any {
+  const p: any = {}
+  if (globalTermId.value) p.academicTermId = globalTermId.value
+  if (type === 'students') { if (studentFilter.collegeId) p.collegeId = studentFilter.collegeId; if (studentFilter.majorId) p.majorId = studentFilter.majorId; if (studentFilter.classId) p.classId = studentFilter.classId; if (studentFilter.grade) p.grade = studentFilter.grade }
+  if (type === 'courses') { if (courseFilter.collegeId) p.collegeId = courseFilter.collegeId; if (courseFilter.categoryId) p.categoryId = courseFilter.categoryId; if (courseFilter.nature) p.nature = courseFilter.nature }
+  if (type === 'grades') { if (gradeFilter.collegeId) p.collegeId = gradeFilter.collegeId; if (gradeFilter.majorId) p.majorId = gradeFilter.majorId; if (gradeFilter.classId) p.classId = gradeFilter.classId; if (gradeFilter.courseId) p.courseId = gradeFilter.courseId }
+  if (type === 'pass-rates') { if (passRateFilter.collegeId) p.collegeId = passRateFilter.collegeId; if (passRateFilter.courseId) p.courseId = passRateFilter.courseId }
+  if (type === 'teacher-workload') { if (workloadFilter.collegeId) p.collegeId = workloadFilter.collegeId }
+  if (type === 'classroom-utilization') { if (classroomFilter.buildingId) p.buildingId = classroomFilter.buildingId; if (classroomFilter.campusId) p.campusId = classroomFilter.campusId }
+  return p
+}
+async function exportStats(type: string) {
+  const labelMap: Record<string, string> = { students: '学生统计', courses: '课程统计', grades: '成绩统计', 'pass-rates': '通过率统计', 'teacher-workload': '教师工作量统计', 'classroom-utilization': '教室利用率统计' }
+  await downloadApiFile(`/statistics/${type}/export`, `${labelMap[type] ?? type}.xlsx`, { params: buildFilterParams(type) })
+}
+
+// ── Tab switching ──
+watch(activeTab, async (tab) => {
+  const loadMap: Record<string, { load: () => Promise<void>; stats: any }> = {
+    'students': { load: loadStudentStats, stats: studentStats },
+    'courses': { load: loadCourseStats, stats: courseStats },
+    'grades': { load: loadGradeStats, stats: gradeStats },
+    'pass-rates': { load: loadPassRateStats, stats: passRateStats },
+    'teacher-workload': { load: loadWorkloadStats, stats: workloadStats },
+    'classroom-utilization': { load: loadClassroomStats, stats: classroomStats },
+  }
+  const entry = loadMap[tab]
+  if (!entry) return
+  if (!entry.stats.value) { await entry.load() } else { await nextTick(); for (const v of chartMap.values()) v.resize() }
+})
+
+// ── Init ──
+onMounted(async () => {
+  const [tRes, cRes, catRes, bRes, campRes] = await Promise.all([
+    http.get('/base-data/terms'),
+    http.get('/base-data/colleges'),
+    http.get('/base-data/course-categories'),
+    http.get('/base-data/buildings').catch(() => ({ data: [] })),
+    http.get('/base-data/campuses').catch(() => ({ data: [] })),
+  ])
+  terms.value = tRes.data
+  colleges.value = cRes.data
+  courseCategories.value = catRes.data
+  classroomBuildings.value = bRes.data
+  classroomCampuses.value = campRes.data
+  if (terms.value.length > 0) {
+    const cur = terms.value.find((t: any) => t.isCurrent) ?? terms.value[terms.value.length - 1]
+    globalTermId.value = cur.id
+  }
+  loadStudentStats()
+})
+</script>
+
+<template>
+  <div class="page-stack">
+    <section class="page-intro">
+      <div>
+        <span class="section-kicker">REPORTS</span>
+        <h2>统计报表</h2>
+        <p>学生、课程、成绩、教师工作量与教室利用率的数据汇总与可视化分析。</p>
+      </div>
+      <div class="page-actions">
+        <el-select v-model="globalTermId" placeholder="选择学期" style="width:220px" clearable @change="() => { loadStudentStats(); loadGradeStats(); loadPassRateStats(); loadWorkloadStats(); loadClassroomStats() }">
+          <el-option v-for="t in terms" :key="t.id" :label="t.name" :value="t.id" />
+        </el-select>
+      </div>
+    </section>
+
+    <el-tabs v-model="activeTab" class="stat-tabs">
+      <!-- ═══ 学生统计 ═══ -->
+      <el-tab-pane label="学生统计" name="students">
+        <section class="data-card" v-loading="studentLoading">
+          <div class="filter-bar">
+            <el-select v-model="studentFilter.collegeId" clearable placeholder="学院" @change="onStudentCollegeChange">
+              <el-option v-for="c in colleges" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-select v-model="studentFilter.majorId" clearable placeholder="专业" @change="onStudentMajorChange">
+              <el-option v-for="m in studentMajors" :key="m.id" :label="m.name" :value="m.id" />
+            </el-select>
+            <el-select v-model="studentFilter.classId" clearable placeholder="班级">
+              <el-option v-for="cl in studentClasses" :key="cl.id" :label="cl.name" :value="cl.id" />
+            </el-select>
+            <el-input-number v-model="studentFilter.grade" :min="2010" :max="2030" placeholder="年级" controls-position="right" style="width:140px" />
+            <el-button type="primary" :icon="Search" @click="loadStudentStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('students')">导出Excel</el-button>
+          </div>
+          <div class="chart-grid">
+            <div id="student-college-chart" class="chart-box" />
+            <div id="student-gender-chart" class="chart-box" />
+            <div id="student-status-chart" class="chart-box" />
+            <div id="student-trend-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="studentStats">
+            <el-collapse-item title="明细数据">
+              <el-table :data="studentStats.byCollege ?? []" size="small" max-height="300">
+                <el-table-column prop="collegeName" label="学院" />
+                <el-table-column prop="count" label="学生数" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+
+      <!-- ═══ 课程统计 ═══ -->
+      <el-tab-pane label="课程统计" name="courses">
+        <section class="data-card" v-loading="courseLoading">
+          <div class="filter-bar">
+            <el-select v-model="courseFilter.collegeId" clearable placeholder="学院">
+              <el-option v-for="c in colleges" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-select v-model="courseFilter.categoryId" clearable placeholder="课程类别">
+              <el-option v-for="cat in courseCategories" :key="cat.id" :label="cat.name" :value="cat.id" />
+            </el-select>
+            <el-select v-model="courseFilter.nature" clearable placeholder="课程性质">
+              <el-option label="通识必修" value="GeneralRequired" />
+              <el-option label="专业必修" value="MajorRequired" />
+              <el-option label="专业选修" value="MajorElective" />
+              <el-option label="通识选修" value="GeneralElective" />
+              <el-option label="实践环节" value="Practice" />
+            </el-select>
+            <el-button type="primary" :icon="Search" @click="loadCourseStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('courses')">导出Excel</el-button>
+          </div>
+          <div class="chart-grid">
+            <div id="course-college-chart" class="chart-box" />
+            <div id="course-nature-chart" class="chart-box" />
+            <div id="course-credit-chart" class="chart-box" />
+            <div id="course-assessment-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="courseStats">
+            <el-collapse-item title="明细数据">
+              <el-table :data="courseStats.byCollege ?? []" size="small" max-height="300">
+                <el-table-column prop="collegeName" label="学院" />
+                <el-table-column prop="count" label="课程数" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+
+      <!-- ═══ 成绩统计 ═══ -->
+      <el-tab-pane label="成绩统计" name="grades">
+        <section class="data-card" v-loading="gradeLoading">
+          <div class="filter-bar">
+            <el-select v-model="gradeFilter.collegeId" clearable placeholder="学院" @change="onGradeCollegeChange">
+              <el-option v-for="c in colleges" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-select v-model="gradeFilter.majorId" clearable placeholder="专业" @change="onGradeMajorChange">
+              <el-option v-for="m in gradeMajors" :key="m.id" :label="m.name" :value="m.id" />
+            </el-select>
+            <el-select v-model="gradeFilter.classId" clearable placeholder="班级">
+              <el-option v-for="cl in gradeClasses" :key="cl.id" :label="cl.name" :value="cl.id" />
+            </el-select>
+            <el-button type="primary" :icon="Search" @click="loadGradeStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('grades')">导出Excel</el-button>
+          </div>
+          <div v-if="gradeStats?.overall" class="metrics-strip">
+            <span class="metric-chip"><b>{{ gradeStats.overall.totalRecords }}</b> 条成绩</span>
+            <span class="metric-chip"><b>{{ gradeStats.overall.averageScore }}</b> 平均分</span>
+            <span class="metric-chip"><b>{{ (gradeStats.overall.passRate * 100).toFixed(1) }}%</b> 通过率</span>
+          </div>
+          <div class="chart-grid">
+            <div id="grade-score-chart" class="chart-box" />
+            <div id="grade-gpa-chart" class="chart-box" />
+            <div id="grade-pr-college-chart" class="chart-box" />
+            <div id="grade-avg-course-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="gradeStats">
+            <el-collapse-item title="各学院通过率明细">
+              <el-table :data="gradeStats.passRateByCollege ?? []" size="small" max-height="300">
+                <el-table-column prop="collegeName" label="学院" />
+                <el-table-column label="通过率" sortable="custom">
+                  <template #default="{ row }">{{ (row.passRate * 100).toFixed(1) }}%</template>
+                </el-table-column>
+                <el-table-column prop="averageScore" label="平均分" sortable />
+                <el-table-column prop="totalRecords" label="成绩条数" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+
+      <!-- ═══ 通过率统计 ═══ -->
+      <el-tab-pane label="通过率统计" name="pass-rates">
+        <section class="data-card" v-loading="passRateLoading">
+          <div class="filter-bar">
+            <el-select v-model="passRateFilter.collegeId" clearable placeholder="学院">
+              <el-option v-for="c in colleges" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-button type="primary" :icon="Search" @click="loadPassRateStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('pass-rates')">导出Excel</el-button>
+          </div>
+          <div v-if="passRateStats" class="metrics-strip">
+            <span class="metric-chip"><b>{{ (passRateStats.overallPassRate * 100).toFixed(1) }}%</b> 总通过率</span>
+            <span class="metric-chip"><b>{{ passRateStats.totalRecords }}</b> 条成绩</span>
+          </div>
+          <div class="chart-grid">
+            <div id="pr-college-chart" class="chart-box" />
+            <div id="pr-course-chart" class="chart-box" />
+            <div id="pr-trend-chart" class="chart-box" />
+            <div id="pr-nature-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="passRateStats">
+            <el-collapse-item title="低通过率课程 (底10)">
+              <el-table :data="passRateStats.byCourseTopFail ?? []" size="small" max-height="300">
+                <el-table-column prop="courseCode" label="课程代码" />
+                <el-table-column prop="courseName" label="课程名称" />
+                <el-table-column label="通过率" sortable="custom">
+                  <template #default="{ row }">{{ (row.passRate * 100).toFixed(1) }}%</template>
+                </el-table-column>
+                <el-table-column prop="total" label="学生数" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+
+      <!-- ═══ 教师工作量 ═══ -->
+      <el-tab-pane label="教师工作量" name="teacher-workload">
+        <section class="data-card" v-loading="workloadLoading">
+          <div class="filter-bar">
+            <el-select v-model="workloadFilter.collegeId" clearable placeholder="学院">
+              <el-option v-for="c in colleges" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-button type="primary" :icon="Search" @click="loadWorkloadStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('teacher-workload')">导出Excel</el-button>
+          </div>
+          <div v-if="workloadStats?.totals" class="metrics-strip">
+            <span class="metric-chip"><b>{{ workloadStats.totals.totalTeachers }}</b> 位教师</span>
+            <span class="metric-chip"><b>{{ workloadStats.totals.totalHours }}</b> 总学时</span>
+            <span class="metric-chip"><b>{{ workloadStats.totals.avgHoursPerTeacher }}</b> 人均学时</span>
+          </div>
+          <div class="chart-grid">
+            <div id="wl-teacher-chart" class="chart-box" />
+            <div id="wl-college-chart" class="chart-box" />
+            <div id="wl-title-chart" class="chart-box" />
+            <div id="wl-dist-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="workloadStats">
+            <el-collapse-item title="教师工作量明细 (Top50)">
+              <el-table :data="(workloadStats.byTeacher ?? []).slice(0, 50)" size="small" max-height="400">
+                <el-table-column prop="teacherName" label="姓名" />
+                <el-table-column prop="teacherNumber" label="工号" />
+                <el-table-column prop="collegeName" label="学院" />
+                <el-table-column prop="title" label="职称" />
+                <el-table-column prop="totalHours" label="总学时" sortable />
+                <el-table-column prop="courseCount" label="课程数" sortable />
+                <el-table-column prop="taskCount" label="教学班数" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+
+      <!-- ═══ 教室利用率 ═══ -->
+      <el-tab-pane label="教室利用率" name="classroom-utilization">
+        <section class="data-card" v-loading="classroomLoading">
+          <div class="filter-bar">
+            <el-select v-model="classroomFilter.campusId" clearable placeholder="校区">
+              <el-option v-for="c in classroomCampuses" :key="c.id" :label="c.name" :value="c.id" />
+            </el-select>
+            <el-select v-model="classroomFilter.buildingId" clearable placeholder="教学楼">
+              <el-option v-for="b in classroomBuildings" :key="b.id" :label="b.name" :value="b.id" />
+            </el-select>
+            <el-button type="primary" :icon="Search" @click="loadClassroomStats">查询</el-button>
+            <el-button :icon="Download" @click="exportStats('classroom-utilization')">导出Excel</el-button>
+          </div>
+          <div v-if="classroomStats?.totals" class="metrics-strip">
+            <span class="metric-chip"><b>{{ classroomStats.totals.totalClassrooms }}</b> 间教室</span>
+            <span class="metric-chip"><b>{{ (classroomStats.totals.overallUtilizationRate * 100).toFixed(1) }}%</b> 总利用率</span>
+          </div>
+          <div class="chart-grid">
+            <div id="cr-building-chart" class="chart-box" />
+            <div id="cr-dow-chart" class="chart-box" />
+            <div id="cr-slot-chart" class="chart-box" />
+            <div id="cr-type-chart" class="chart-box" />
+          </div>
+          <el-collapse v-if="classroomStats">
+            <el-collapse-item title="各教学楼利用率明细">
+              <el-table :data="classroomStats.byBuilding ?? []" size="small" max-height="300">
+                <el-table-column prop="buildingName" label="教学楼" />
+                <el-table-column prop="totalClassrooms" label="教室数" sortable />
+                <el-table-column label="利用率" sortable="custom">
+                  <template #default="{ row }">{{ (row.utilizationRate * 100).toFixed(1) }}%</template>
+                </el-table-column>
+                <el-table-column prop="totalUsedPeriods" label="已用节次" sortable />
+                <el-table-column prop="totalAvailablePeriods" label="可用节次" sortable />
+              </el-table>
+            </el-collapse-item>
+          </el-collapse>
+        </section>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style scoped>
+.page-stack { max-width: 1400px; margin: 0 auto }
+.stat-tabs { margin-top: 16px }
+.stat-tabs :deep(.el-tabs__header) { margin-bottom: 12px }
+
+.filter-bar {
+  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.chart-grid {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
+  margin-bottom: 12px;
+}
+.chart-box { width: 100%; height: 340px; background: var(--el-fill-color-lighter, #fafafa); border-radius: 8px }
+
+.metrics-strip {
+  display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.metric-chip {
+  background: var(--el-color-primary-light-9, #ecf5ff); color: var(--el-color-primary, #409EFF);
+  padding: 6px 16px; border-radius: 20px; font-size: 14px;
+}
+.metric-chip b { margin-right: 4px }
+
+@media (max-width: 860px) {
+  .chart-grid { grid-template-columns: 1fr }
+}
+</style>