成绩分析报告

web/src/views/GradeAnalyticsView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { Refresh, Search } from '@element-plus/icons-vue'
+import { Download, Refresh, Search } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 import http, { apiErrorMessage } from '../api/http'
+import { downloadApiFile } from '../api/excel'
 import { academicTermLabel, defaultAcademicTermId } from '../utils/academicTerms'
 
 interface TeachingClassItem {
@@ -34,6 +35,7 @@ const total = ref(0)
 const pageSize = 12
 const loading = ref(false)
 const reportLoading = ref(false)
+const exporting = ref(false)
 const historyMetric = ref<'average' | 'passRate' | 'excellentRate'>('average')
 
 const distributionElement = ref<HTMLElement>()
@@ -132,6 +134,22 @@ async function refreshStatistics() {
   }
 }
 
+async function exportWordReport() {
+  if (!selected.value) return
+  exporting.value = true
+  try {
+    await downloadApiFile(
+      `/grade-analytics/teaching-classes/${selected.value.gradeSheetId}/report.docx`,
+      `${selected.value.courseCode}-${selected.value.taskNumber}-成绩分析报告.docx`,
+    )
+    ElMessage.success('成绩分析报告已导出。')
+  } catch (error) {
+    ElMessage.error(apiErrorMessage(error))
+  } finally {
+    exporting.value = false
+  }
+}
+
 function baseGrid(left = 48, right = 24) {
   return { left, right, top: 42, bottom: 44, containLabel: true }
 }
@@ -288,7 +306,16 @@ onBeforeUnmount(() => {
         <h2>教学班成绩分析</h2>
         <p>对比当前教学班、同课程教学班、学生来源范围与历年成绩；统计仅使用已正式发布成绩。</p>
       </div>
-      <el-button :icon="Refresh" @click="refreshStatistics">重新计算当前教学班</el-button>
+      <div class="intro-actions">
+        <el-button
+          type="primary"
+          :icon="Download"
+          :loading="exporting"
+          :disabled="!selected || !summary"
+          @click="exportWordReport"
+        >导出 Word 报告</el-button>
+        <el-button :icon="Refresh" @click="refreshStatistics">重新计算当前教学班</el-button>
+      </div>
     </section>
 
     <section class="filter-bar">