front/src/views/elective/report/index.vue

<template>
  <div class="app-container" v-loading="loading">
    <div class="elective-report-container">
      <!--   print-hidden定义在PDF生成程序中   -->
      <div v-if="electiveVisible" class="print-hidden text-right mb10">
        <el-button type="primary" icon="el-icon-printer" @click="handlePrint">打印</el-button>
      </div>
      <div class="width100">
        <el-image :src="require('@/assets/images/elective/elective_report_cover.png')"></el-image>
      </div>
      <elective-test-reports></elective-test-reports>
      <el-divider class="new-page"><h1>选科大数据分析</h1></el-divider>
      <group-subject-query class="print-page"></group-subject-query>
      <el-divider class="new-page"><h1>自选专业</h1></el-divider>
      <major-match-optional class="print-page"></major-match-optional>
      <major-introduce-batch></major-introduce-batch>
      <el-divider class="new-page"><h1>选科成绩表</h1></el-divider>
      <group-score-table class="print-page"></group-score-table>
      <el-divider class="new-page"><h1>选科进程表</h1></el-divider>
      <elective-flow-table class="print-page"></elective-flow-table>
      <!-- AI分析可能有也可能没有，在elective-ai-analysis内部控制 -->
      <elective-ai-analysis></elective-ai-analysis>
      <el-divider class="new-page"><h1>选科录取分析报告</h1></el-divider>
      <elective-enroll-analysis class="print-page"></elective-enroll-analysis>
    </div>
  </div>
</template>

<script>

import consts from '@/common/mx-const'
import ElectiveTestReports from '@/views/elective/report/components/elective-test-reports'
import GroupSubjectQuery from '@/views/permission/components/group-subject-query'
import RoundSelect from '@/views/system/user/profile/round-select'
import MajorMatchOptional from '@/views/elective/report/components/major-match-optional'
import MajorIntroduceBatch from '@/views/elective/report/components/major-introduce-batch'
import GroupScoreTable from '@/views/elective/report/components/group-score-table'
import ElectiveFlowTable from '@/views/elective/report/components/elective-flow-table'
import ElectiveEnrollAnalysis from '@/views/elective/report/components/elective-enroll-analysis'
import ElectiveAiAnalysis from '@/views/elective/report/components/elective-ai-analysis'
import { getSelectedBookReport } from '@/api/webApi/elective/selected-subject'

export default {
  name: 'report-index',
  extends: RoundSelect,
  components: {
    ElectiveAiAnalysis,
    ElectiveEnrollAnalysis,
    ElectiveFlowTable,
    GroupScoreTable,
    MajorIntroduceBatch,
    MajorMatchOptional,
    RoundSelect,
    GroupSubjectQuery,
    ElectiveTestReports
  },
  data() {
    // TODO: 报告应该与学年和轮次相关，先暂时渲染出最近的轮次数据
    return {
      year: '',
      roundId: ''
    }
  },
  provide() {
    // 扩展一些注入，方便报告内部组件直接获取依赖数据
    // 需要把数据转方法，不然注入的数据无法动态更新
    return {
      getGeneration: () => this.generation,
      getOptionalMajors: () => this.optionalMajors,
      getEvaluationMajors: () => this.evaluationMajors
    }
  },
  methods: {
    handlePrint() {
      if (!this.generation?.status?.roundId) return
      this.loading = true
      getSelectedBookReport({
        roundId: this.generation.status.roundId,
        reportType: consts.enum.electiveReportType.student
      }).then(res => {
        this.loading = false
        if (res.data?.url) {
          this.$router.push({ path: '/elective/report/flip', query: { path: res.data.url } })
        }
      }).catch(e => {
        this.loading = false
        this.$message.error(e)
      })
    }
  }
}
</script>

<style scoped>
.elective-report-container {
  max-width: 1350px;
  width: 80vw;
}

/deep/ .elective-report-container > .el-divider {
  margin: 40px 0;
}

h1 {
  font-size: 36px;
  margin: 0;
}
</style>