bigDataStudent/src/views/analysisReport/studentPage/scrolReport/transcript_single.vue

<template>
  <div class="page_report">
    <div class="report_module">
      <div class="module_title">
        <div class="title_left">我的成绩</div>
      </div>
      <div class="module_table">
        <div
          class="subject_score"
          v-loading="subjectLoading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#ffffff"
        >
          <div class="subject_score_chart" style="height: 250px; overflow: hidden">
            <GaugeChart
              v-if="!subjectLoading && subjectData.levelValue"
              :data="subjectData.levelValue"
              :gradeName="subjectData.gradeName"
              :subjectName="subjectData.subjectName"
              :fullScore="subjectData.fullScore"
              :chartData="subjectData.levelData"
            ></GaugeChart>
            <!-- <el-button class="button_editor"
              :disabled="!subjectData?.data?.imgUrlList || subjectData?.data?.imgUrlList == '-'">查看答题卡</el-button> -->
            <div class="module_chart no_content_data" style="height: 240px; min-height: 240px" v-else>
              <span>暂无数据</span>
            </div>
          </div>
          <div class="subject_score_content">
            <div class="score_item">
              <span class="title">班级</span>
              <span class="value">{{ subjectData?.data?.className ?? '-' }}</span>
            </div>
            <!-- 0-显示,1-不显示 -->
            <div class="score_item" v-if="subjectData?.data?.scoreStatus === 0">
              <span class="title">原始分</span>
              <span class="value">
                <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                <template
                  v-if="
                    (subjectData.data.studentOpenness == 3 || subjectData.data.studentOpenness == 4) && subjectData?.data?.score
                  "
                >
                  <img
                    v-if="subjectData?.data?.fullScore == subjectData?.data?.score"
                    src="@/assets/stuIcon/icon_right.png"
                  />
                  <img v-else-if="subjectData?.data?.score === 0" src="@/assets/stuIcon/icon_error.png" />
                  <img v-else src="@/assets/stuIcon/icon_half_right.png" />
                </template>
                <template v-else>{{ subjectData?.data?.score ?? '-' }}</template>
              </span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.rateScoreStatus === 0">
              <span class="title">赋分</span>
              <span class="value">{{ subjectData?.data?.rateScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.classRankStatus === 0">
              <span class="title">班排</span>
              <span class="value">{{ subjectData?.data?.classRank ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.schoolRankStatus === 0">
              <span class="title">年排</span>
              <span class="value">{{ subjectData?.data?.schoolRank ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.examRankStatus === 0 && schoolType == 2">
              <span class="title">联排</span>
              <span class="value">{{ subjectData?.data?.examRank ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.rateScoreStatus === 0">
              <span class="title">赋分等级</span>
              <span class="value">{{ subjectData?.data?.rateScoreName ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.standardScoreStatus === 0">
              <span class="title">标准分</span>
              <span class="value">{{ subjectData?.data?.standardScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.gradeNameStatus === 0">
              <span class="title">学业等级</span>
              <span class="value">{{ subjectData?.data?.gradeName ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.scoreRateStatus === 0">
              <span class="title">得分率</span>
              <span class="value">{{ subjectData?.data?.scoreRate ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.classMaxScoreStatus === 0">
              <span class="title">班级最高分</span>
              <span class="value">{{ subjectData?.data?.classMaxScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.gradeMaxScoreStatus === 0">
              <span class="title">年级最高分</span>
              <span class="value">{{ subjectData?.data?.gradeMaxScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.examMaxScoreStatus === 0">
              <span class="title">联校最高分</span>
              <span class="value">{{ subjectData?.data?.examMaxScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.classAvgScoreStatus === 0">
              <span class="title">班级均分</span>
              <span class="value">{{ subjectData?.data?.classAvgScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.gradeAvgScoreStatus === 0">
              <span class="title">年级均分</span>
              <span class="value">{{ subjectData?.data?.gradeAvgScore ?? '-' }}</span>
            </div>
            <div class="score_item" v-if="subjectData?.data?.examAvgScoreStatus === 0">
              <span class="title">联校均分</span>
              <span class="value">{{ subjectData?.data?.examAvgScore ?? '-' }}</span>
            </div>
          </div>
        </div>
        <div class="page_jg_20"></div>
      </div>
    </div>
    <div class="report_module" v-if="isHidden">
      <div class="module_title">
        <div class="title_left">总结建议</div>
      </div>
      <div class="module_describe suggestion">
        <ExpandableText :isExpanded="false" :shouldShowButton="false" v-html="suggestionData"></ExpandableText>
      </div>
    </div>
    <!-- 答题卡 -->
    <div class="report_module">
      <div class="module_title">
        <div class="title_left">{{ getSubjectName }}答题卡 ({{ answerCard.paperImageList.length }}页)</div>
      </div>
      <div class="module_table">
        <div class="answer_sheet" v-if="answerCard.paperImageList.length">
          <div class="item" v-for="(item, index) in answerCard.paperImageList">
            <PaperImage :imageIndex="index" :paperImgUrl="item.picUrl" :drawData="item.questionVOS || []"></PaperImage>
            <div class="item_hover">
              <div class="show_view" @click="OpenStudentPaper(index)">
                <img src="@/assets/icon/pic_show_view.png" />
                <span>查看</span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="module_chart no_content_data"
          v-loading="answerCard.loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#ffffff"
          v-else
        >
          <span>暂无答题卡</span>
        </div>
        <div class="page_jg_20"></div>
      </div>
    </div>
    <!-- 小题分析图 -->
    <template v-for="group in groupData.groupName">
      <div class="report_module">
        <div class="module_title" style="position: relative">
          <div class="title_left">{{ group.name }}分析图</div>
          <div class="title_right">
            <div class="echart_type">
              <span
                class="chart_icon_item"
                v-for="item in groupData.chartTypeList"
                :key="item.value"
                :class="groupData[group.value].chartType == item.value ? `${item.value}_cur` : item.value"
                @click="ChangeChartType(group.value, item.value)"
                >{{ item.label }}</span
              >
            </div>
          </div>
        </div>
        <div class="module_chart" v-if="groupData[group.value].tableData.length > 0">
          <BarChart
            v-if="groupData[group.value].chartType == 'vertical_bar'"
            :datax="groupData[group.value].datax"
            typeName="得分率"
            :datay="groupData[group.value].datay"
            unit="%"
          ></BarChart>
          <RadarCharts
            v-else
            :data="groupData[group.value].radarChartData"
            :showCheckBox="false"
            :showLegend="false"
            :openShowAllLegend="false"
          >
          </RadarCharts>
        </div>
        <div
          class="module_chart no_content_data"
          v-loading="groupData[group.value].loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          element-loading-background="#ffffff"
          v-else
        >
          <span>暂无数据</span>
        </div>
        <div class="page_jg_20"></div>
      </div>
      <!-- 小题分析表 -->
      <div class="report_module">
        <div class="module_title">
          <div class="title_left">{{ group.name }}分析表</div>
        </div>
        <div class="module_table">
          <el-table
            :data="smallQuestionTableData(group.value)"
            v-loading="groupData[group.value].loading"
            :element-loading-text="loadingText"
            element-loading-spinner="el-icon-loading"
            element-loading-background="#ffffff"
            border
            stripe
            align="left"
          >
            <el-table-column
              v-for="title in groupData[group.value].titleData"
              :key="title.prop"
              align="center"
              :label="title.name"
              show-overflow-tooltip
              
            >
              <template slot-scope="scope">
                <template v-if="title.prop == 'score'">
                  <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                  <template
                    v-if="
                      groupData[group.value].studentOpenness == 2 ||
                      groupData[group.value].studentOpenness == 4 ||
                      groupData[group.value].studentOpenness == 6
                    "
                  >
                    <img v-if="scope.row.fullScore == scope.row.score" src="@/assets/stuIcon/icon_right.png" />
                    <img v-else-if="scope.row.score == 0" src="@/assets/stuIcon/icon_error.png" />
                    <img v-else src="@/assets/stuIcon/icon_half_right.png" />
                  </template>
                  <template v-else>{{ scope.row.score || '-' }}</template>
                </template>
                <!-- 包含小题 -->
                <template
                  v-else-if="
                    title.prop == 'smallQuestionNames' &&
                    scope?.row?.[title.prop] &&
                    Object.prototype.toString.call(scope.row[title.prop]) == '[object Array]'
                  "
                  >{{ scope.row[title.prop].join('、') }}</template
                >
                <template v-else-if="title.prop == 'difficultyName'"
                  ><span :class="GetDifficultyClass(scope.row[title.prop])"></span
                  ><span>{{ GetDifficultyName(scope.row[title.prop]) }}</span></template
                >
                <template v-else>{{ scope.row[title.prop] || '-' }}</template>
              </template>
            </el-table-column>
          </el-table>
          <div
            class="page_pagination"
            style="margin-top: 10px; padding-bottom: 10px"
            v-if="groupData[group.value].total > 10"
          >
            <el-pagination
              @current-change="value => QuestionChangePage(value, group.value)"
              layout="prev, pager, next"
              :current-page="groupData[group.value].pageNum"
              :page-size="groupData[group.value].pageSize"
              :total="groupData[group.value].total"
            >
            </el-pagination>
          </div>
          <div v-else class="page_jg_20"></div>
        </div>
      </div>
    </template>
    <div class="report_module" v-if="false">
      <div class="module_title">
        <div class="title_left">历次考试分析</div>
        <div class="title_right report_button">
          <div class="module_tab">
            <div
              class="tab_item"
              v-for="item in historyExamData.selectNames"
              :class="historyExamData.selectVal == item.prop ? 'tab_active' : ''"
              :key="item.prop"
              @click="ChangeSelectVal(item.prop, item.name)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="module_chart" v-if="historyExamData.chartData.length > 0">
        <LineChart
          :extraText="false"
          :showCheckBox="false"
          :showMarkPoint="false"
          :showBackground="false"
          :markNumber="historyExamData.markNumber"
          :datax="historyExamData.datax"
          :datay="historyExamData.datay"
          :title="historyExamData.title"
          :legendList="historyExamData.title"
          :yInverse="
            historyExamData.selectVal == 'examRank' || historyExamData.selectVal == 'schoolRank' ? true : false
          "
          :tooltipData="historyExamData.tooltipData"
        ></LineChart>
      </div>
      <div
        class="module_chart no_content_data"
        v-loading="historyExamLoading"
        :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#ffffff"
        v-else
      >
        <span>暂无数据</span>
      </div>
      <div class="page_jg_20"></div>
    </div>
    <GotoTop></GotoTop>
    <!-- 学生答题卡预览组件 -->
    <StudentPaper
      v-model="showStudentPaperDialog"
      :paperInfo="{ examId: reportParam.examId, subjectCode: reportParam.subjectCode }"
      :currentPageIndex="currentPageIndex"
      :pageTitle="paperTitle"
    ></StudentPaper>
  </div>
</template>
<script>
import PaperImage from '@/components/PaperImageSmall.vue' //学生试卷组件
import StudentPaper from '@/components/StudentPaper.vue' //学生答题卡预览组件
import BarChart from '@/views/analysisReport/components/dCharts/barChart' //单柱状图组件
import RadarCharts from '@/views/analysisReport/components/dCharts/radarCharts' //雷达图
import ExpandableText from '@/views/analysisReport/components/ExpandableText' //文本内容展开收缩组件
import LineChart from '@/views/analysisReport/components/dCharts/lineChart' //折线图
import GaugeChart from '@/views/analysisReport/components/dCharts/GaugeChart'
import GotoTop from '@/views/analysisReport/components/GotoTop' //分析报告页面底部回到顶部组件
import { mapGetters } from 'vuex'
export default {
  name: 'subjectQuality',
  props: {},
  components: {
    PaperImage,
    StudentPaper,
    BarChart,
    RadarCharts,
    ExpandableText,
    LineChart,
    GaugeChart,
    GotoTop
  },
  data() {
    return {
      subjectData: {
        data: {},
        levelData: [],
        gradeName: '',
        levelValue: 0,
        fullScore: '', //满分
        subjectName: '', //科目名称
        chartData: []
      },
      answerCard: {
        //答题卡
        loading: false,
        paperImageList: [] //答题卡图片
      },
      showStudentPaperDialog: false, //显示答题卡弹框
      paperTitle: '', //答题卡弹框标题
      currentPageIndex: 0, //当前选中的答题卡第几页
      groupData: {
        groupName: [
          {
            name: '小题',
            value: 'smallQuestionData'
          }
        ],
        chartTypeList: [
          {
            label: '柱状图',
            value: 'vertical_bar'
          },
          {
            label: '雷达图',
            value: 'radar_chart'
          }
        ],
        smallQuestionData: {
          studentOpenness: '',
          loading: false,
          chartType: 'vertical_bar', //默认显示折线图柱状图line_bar_chart
          total: 0,
          pageNum: 1,
          pageSize: 10,
          tableData: [],
          titleData: [],
          datax: [], //x轴数据
          datay: [], //y轴数据
          radarChartData: []
        },
        bigQuestionData: {
          studentOpenness: '',
          loading: false,
          chartType: 'vertical_bar', //默认显示折线图柱状图line_bar_chart
          total: 0,
          pageNum: 1,
          pageSize: 10,
          tableData: [],
          titleData: [],
          datax: [], //x轴数据
          datay: [], //y轴数据
          radarChartData: []
        },
        knowledgePointQuestionData: {
          studentOpenness: '',
          loading: false,
          chartType: 'vertical_bar', //默认显示折线图柱状图line_bar_chart
          total: 0,
          pageNum: 1,
          pageSize: 10,
          tableData: [],
          titleData: [],
          datax: [], //x轴数据
          datay: [], //y轴数据
          radarChartData: []
        },
        abilityQuestionData: {
          studentOpenness: '',
          loading: false,
          chartType: 'vertical_bar', //默认显示折线图柱状图line_bar_chart
          total: 0,
          pageNum: 1,
          pageSize: 10,
          tableData: [],
          titleData: [],
          datax: [], //x轴数据
          datay: [], //y轴数据
          radarChartData: []
        }
      },
      subjectLoading: true, //加载状态
      historyExamLoading: false,
      loadingText: '加载中,请稍后……',
      historyExamData: {
        chartData: [],
        datax: [],
        datay: [],
        title: [],
        colors: ['#5470C6'],
        markNumber: [],
        selectNames: [],
        selectVal: 'standardScore'
      }, //线面积图
      suggestionData: null,
      suggestionUpSubjectData:[],//总结建议优势
      suggestionDownSubjectData:[],//总结建议劣势
    }
  },
  watch: {
    reportParam() {
      this.PageInit() //初始加载数据
    } //监听筛选数据变化
  },
  computed: {
    ...mapGetters(['userInfo']),
    reportParam() {
      return {
        examLevel: this.$store.state.report.filterObject.examLevel, //1-联考 2-单校
        contrastExamIds: this.$store.state.report.filterObject.contrastExamIds, //多次考试任务对比ID，不包含当前任务ID
        examId: this.$store.state.report.filterObject.examId, //考试id
        subjectCode: this.$store.state.report.filterObject.subjectCode, //科目code
        subjectGroupType: this.$store.state.report.filterObject.subjectGroupType, //是否为组合科目 1为组合科目 0为非组合科目
        isTotal: this.$store.state.report.filterObject.isTotal //是否为总分科目 1为总分 0为非总分
      }
    }, //分析报告公共参数变量
    smallQuestionTableData() {
      return function (group) {
        const { tableData, pageSize, pageNum } = this.groupData[group]
        const start = (pageNum - 1) * pageSize
        const end = start + pageSize
        return tableData.slice(start, end)
      }
    },
    getSubjectName() {
      return this.$store.state.report.filterObject.subjectName
    }, //科目名称
    pageName() {
      return this.$store.state.report.examSelectItem.examName
    }, //考试名称
    schoolType() {
      return sessionStorage.getItem('schoolType') //1:单校 2:联校
    },
    isHidden(){
      if(this.suggestionUpSubjectData.length || this.suggestionDownSubjectData.length){
        return true
      }else{
        return false
      }
    }
  },
  created() {},
  mounted() {
    this.PageInit() //页面初始加载数据
  },
  methods: {
    PageInit() {
      this.initData()
      this.QueryOneSubjectData() //学生端查询单科-我的成绩
      this.FindStudentCard() //查询学生答题卡带批阅痕迹的(单校)
      this.QueryOneSubjectSmallQuestionData() //学生端查询单科-小题分析(表格-图表)
      this.QueryOneSubjectHistoryExamData() //学生端查询单科-历次查询
      this.QueryOneSubjectSuggestionData() //学生端查询单科-总结建议
    },
    initData() {
      this.groupData.groupName = [
        {
          name: '小题',
          value: 'smallQuestionData'
        }
      ]
      this.suggestionData = null
      Object.keys(this.groupData).forEach(key => {
        if (key != 'groupName' || key != 'chartTypeList') {
          this.groupData[key].chartType = 'vertical_bar'
          this.groupData[key].total = 0
          this.groupData[key].pageNum = 1
          this.groupData[key].pageSize = 10
        }
      })
    },
    //学生端查询单科-我的成绩
    QueryOneSubjectData() {
      this.subjectLoading = true
      this.$api.reportStudent
        .queryOneSubjectData(this.reportParam)
        .then(res => {
          if (res.code == 200 && res.data) {
            this.subjectData.data = res.data
            const academicLevelData = res.data.academicLevelData
            const examAcademicLevelList = (academicLevelData.examAcademicLevelList || []).reverse()
            this.subjectData.levelData = examAcademicLevelList.map(item => ({
              label: item.gradeName,
              range: this.getMiddleNumber(
                academicLevelData.scoreType == 1
                  ? [Number(item.endScore), Number(item.startScore)]
                  : [Number(item.startScore), Number(item.endScore)]
              ),
              value: academicLevelData.scoreType == 1 ? Number(item.startScore) : Number(item.Number(item.endScore)) //1 按分数
            }))
            const gradeName = this.subjectData.levelData.find(item => item.label == res.data.gradeName)
            this.subjectData.levelValue = gradeName ? gradeName.range : 0
            this.subjectData.gradeName = res.data.gradeName //等级
            this.subjectData.fullScore = res.data.fullScore //满分
            this.subjectData.subjectName = res.data.subjectName //科目名称
          } else {
            this.subjectData.data = {}
            this.subjectData.levelData = []
            this.subjectData.levelValue = 0
            this.subjectData.gradeName = ''
            this.subjectData.fullScore = '' //满分
            this.subjectData.subjectName = '' //科目名称
          }
        })
        .finally(() => {
          this.subjectLoading = false
        })
    },
    //查询学生答题卡带批阅痕迹的
    FindStudentCard() {
      this.answerCard.loading = true
      this.$api.reportStudent
        .findStudentCard({
          examId: this.reportParam.examId, //考试ID
          subjectCode: this.reportParam.subjectCode //科目code
        })
        .then(res => {
          if (res.code == 200 && res.data) {
            this.answerCard.paperImageList = res.data.pageVOS || []
            //先添加总分数据
            let totalScore = {
              questionName: '总分',
              fullScore: res?.data?.fullScore || 150,
              score: res?.data?.levelName ?? res?.data?.totalScore,
              displayType: res.data.displayType, //显示类型 0-分数 1-对错 2-等级
              displayName: res.data.displayName, //显示值
              correctType: res.data.correctType, //显示对错的时候 0-错 1-半对 2-全对
              questionAnswer: '',
              answer: '',
              samplingPosition: '{"x":195,"y":247,"page":1}'
            }
            if (this.answerCard.paperImageList.length > 0 && this.answerCard.paperImageList[0].questionVOS) {
              this.answerCard.paperImageList[0].questionVOS.unshift(totalScore)
            }
          } else {
            this.answerCard.paperImageList = []
          }
        })
        .finally(() => {
          this.answerCard.loading = false
        })
    },
    //答题卡预览
    OpenStudentPaper(index) {
      this.currentPageIndex = index //当选选中的第几页
      this.paperTitle = `${this.pageName}_${this.userInfo.userName}【${this.userInfo.registrationCode}】`
      this.showStudentPaperDialog = true
    },
    getMiddleNumber(arr) {
      return parseInt((arr[0] + arr[1]) / 2)
    },
    //学生端查询单科-小题分析(表格-图表)
    QueryOneSubjectSmallQuestionData() {
      this.groupData.smallQuestionData.loading = true
      this.$api.reportStudent
        .queryOneSubjectSmallQuestionData(this.reportParam)
        .then(res => {
          if (res.code == 200 && res.data) {
            const tableData = res.data.tableData || []
            const titleData = res.data.titleData || []
            const studentOpenness = res.data?.studentOpenness ?? ''
            this.TableChartData(tableData, titleData, studentOpenness, 'smallQuestionData')
          } else {
            this.groupData.smallQuestionData.tableData = []
            this.groupData.smallQuestionData.titleData = []
            this.groupData.smallQuestionData.total = 0
            this.groupData.smallQuestionData.datax = []
            this.groupData.smallQuestionData.datay = []
            this.groupData.smallQuestionData.studentOpenness = ''
          }
          this.QueryOneSubjectGroupQuestionData() //学生端查询单科-大题分析，知识点分析，能力要素分析
        })
        .finally(() => {
          this.groupData.smallQuestionData.loading = false
        })
    },
    GetDifficultyClass(val) {
      if (val == 1) {
        return 'difficulty easy'
      } else if (val == 2) {
        return 'difficulty relatively_easy'
      } else if (val == 3) {
        return 'difficulty general'
      } else if (val == 4) {
        return 'difficulty more_difficult'
      } else if (val == 5) {
        return 'difficulty difficult'
      } else {
        return ''
      }
    },
    GetDifficultyName(val) {
      if (val == 1) {
        return '容易'
      } else if (val == 2) {
        return '较易'
      } else if (val == 3) {
        return '一般'
      } else if (val == 4) {
        return '较难'
      } else if (val == 5) {
        return '困难'
      } else {
        return '-'
      }
    },
    //处理数据
    TableChartData(tableData, titleData, studentOpenness, type) {
      this.groupData[type].studentOpenness = studentOpenness
      this.groupData[type].tableData = tableData
      this.groupData[type].titleData = titleData
      this.groupData[type].total = tableData.length
      //分析图
      this.groupData[type].datax = []
      this.groupData[type].datay = []
      const radarChartData = []
      tableData.forEach(item => {
        this.groupData[type].datax.push(item.questionName)
        const scoreRate = item?.scoreRate ?? ''
        this.groupData[type].datay.push(scoreRate)
        radarChartData.push([item.questionName, scoreRate])
      })
      //雷达图
      this.groupData[type].radarChartData = [['group', '得分率'], ...radarChartData]
    },
    QuestionChangePage(value, group) {
      this.groupData[group].pageNum = value
    },
    ChangeChartType(prop, value) {
      this.groupData[prop].chartType = value
    },
    //学生端查询单科-大题分析，知识点分析，能力要素分析
    QueryOneSubjectGroupQuestionData() {
      this.groupData.bigQuestionData.loading = true
      this.groupData.knowledgePointQuestionData.loading = true
      this.groupData.abilityQuestionData.loading = true
      this.$api.reportStudent
        .queryOneSubjectGroupQuestionData(this.reportParam)
        .then(res => {
          if (res.code == 200 && res.data) {
            const { bigQuestion, knowledgePointQuestion, abilityQuestion } = res.data
            if (bigQuestion && bigQuestion?.tableData?.length > 0) {
              this.groupData.groupName.push({
                name: '大题',
                value: 'bigQuestionData'
              })
              const tableData = bigQuestion.tableData || []
              const titleData = bigQuestion.titleData || []
              const studentOpenness = bigQuestion?.studentOpenness ?? ''
              this.TableChartData(tableData, titleData, studentOpenness, 'bigQuestionData')
            }
            if (knowledgePointQuestion && knowledgePointQuestion?.tableData?.length > 0) {
              this.groupData.groupName.push({
                name: '知识点',
                value: 'knowledgePointQuestionData'
              })
              const tableData = knowledgePointQuestion.tableData || []
              const titleData = knowledgePointQuestion.titleData || []
              const studentOpenness = knowledgePointQuestion?.studentOpenness ?? ''
              this.TableChartData(tableData, titleData, studentOpenness, 'knowledgePointQuestionData')
            }
            if (abilityQuestion && abilityQuestion?.tableData?.length > 0) {
              this.groupData.groupName.push({
                name: '能力要素',
                value: 'abilityQuestionData'
              })
              const tableData = abilityQuestion.tableData || []
              const titleData = abilityQuestion.titleData || []
              const studentOpenness = abilityQuestion?.studentOpenness ?? ''
              this.TableChartData(tableData, titleData, studentOpenness, 'abilityQuestionData')
            }
          } else {
            this.groupData.bigQuestionData.tableData = []
            this.groupData.bigQuestionData.titleData = []
            this.groupData.bigQuestionData.total = 0
            this.groupData.bigQuestionData.datax = []
            this.groupData.bigQuestionData.datay = []
            this.groupData.bigQuestionData.studentOpenness = ''
            this.groupData.knowledgePointQuestionData.tableData = []
            this.groupData.knowledgePointQuestionData.titleData = []
            this.groupData.knowledgePointQuestionData.total = 0
            this.groupData.knowledgePointQuestionData.datax = []
            this.groupData.knowledgePointQuestionData.datay = []
            this.groupData.knowledgePointQuestionData.studentOpenness = ''
            this.groupData.abilityQuestionData.tableData = []
            this.groupData.abilityQuestionData.titleData = []
            this.groupData.abilityQuestionData.total = 0
            this.groupData.abilityQuestionData.datax = []
            this.groupData.abilityQuestionData.datay = []
            this.groupData.abilityQuestionData.studentOpenness = ''
          }
          this.QueryOneSubjectCustomGroupQuestion() //学生端查询单科-自定义分组
        })
        .finally(() => {
          this.groupData.bigQuestionData.loading = false
          this.groupData.knowledgePointQuestionData.loading = false
          this.groupData.abilityQuestionData.loading = false
        })
    },
    //学生端查询单科-自定义分组
    QueryOneSubjectCustomGroupQuestion() {
      this.$api.reportStudent.queryOneSubjectCustomGroupQuestion(this.reportParam).then(res => {
        if (res.code == 200 && res.data) {
          const customQuestionData = res?.data?.customQuestionData ?? []
          if (customQuestionData && customQuestionData.length > 0) {
            customQuestionData.forEach((item, index) => {
              this.groupData.groupName.push({
                name: item.customName,
                value: `customQuestionData${index}`
              })
              this.$set(this.groupData, `customQuestionData${index}`, {
                studentOpenness: '',
                loading: false,
                chartType: 'vertical_bar', //默认显示折线图柱状图line_bar_chart
                total: 0,
                pageNum: 1,
                pageSize: 10,
                tableData: [],
                titleData: [],
                datax: [], //x轴数据
                datay: [], //y轴数据
                radarChartData: []
              })
              const tableData = item?.questionData?.tableData || []
              const titleData = item?.questionData?.titleData || []
              const studentOpenness = res.data?.studentOpenness ?? ''
              this.TableChartData(tableData, titleData, studentOpenness, `customQuestionData${index}`)
            })
          }
        }
      })
    },
    //学生端查询单科-历次查询
    QueryOneSubjectHistoryExamData() {
      this.historyExamLoading = true
      this.$api.reportStudent
        .queryOneSubjectHistoryExamData(this.reportParam)
        .then(res => {
          if (res.code == 200 && res.data) {
            const detailData = (res.data?.detailData || []).reverse()
            this.historyExamData.chartData = detailData
            this.historyExamData.selectNames = res.data.selectNames || []
            this.historyExamData.selectVal = this.historyExamData?.selectNames?.[0]?.prop ?? ''
            this.historyExamData.datax = []
            let datay = [],
              tooltipData = []
            detailData.forEach(item => {
              this.historyExamData.datax.push(item.examName)
              datay.push(item[this.historyExamData.selectVal])
              tooltipData.push({
                name: this.historyExamData?.selectNames?.[0]?.name ?? '',
                value: item[this.historyExamData.selectVal]
              })
            })
            this.historyExamData.datay = [datay]
            this.historyExamData.tooltipData = [tooltipData]
          } else {
            this.historyExamData.chartData = []
            this.historyExamData.datax = []
            this.historyExamData.datay = []
            this.historyExamData.selectNames = []
            this.historyExamData.tooltipData = []
            this.historyExamData.selectVal = ''
          }
        })
        .finally(() => {
          this.historyExamLoading = false
        })
    },
    ChangeSelectVal(prop, name) {
      this.historyExamData.selectVal = prop
      let datay = [],
        tooltipData = []
      this.historyExamData.chartData.forEach(item => {
        datay.push(item[prop])
        tooltipData.push({
          name: name,
          value: item[prop]
        })
      })
      this.historyExamData.datay = [datay]
      this.historyExamData.tooltipData = [tooltipData]
    },
    //学生端查询单科-总结建议
    QueryOneSubjectSuggestionData() {
      this.$api.reportStudent.queryOneSubjectSuggestionData(this.reportParam).then(res => {
        if (res.code == 200 && res.data) {
          const data = res.data
          //* 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
          //* 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
          //* 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错
          this.suggestionUpSubjectData = data.upSubjectData
          this.suggestionDownSubjectData = data.downSubjectData
          const upSubjectData = data.upSubjectData
            .map(item => {
              if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                return `${item.subjectName}得分<span style="color: #3BA272;">${item.score}</span>分`
              } else {
                return `${item.subjectName}标准分为<span style="color: #3BA272;">${item.score}</span>`
              }
            })
            .join('、')
          const downSubjectData = data.downSubjectData
            .map(item => {
              if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                return `${item.subjectName}得分<span style="color: #EE6666;">${item.score}</span>分`
              } else {
                return `${item.subjectName}标准分为<span style="color: #EE6666;">${item.score}</span>`
              }
            })
            .join('、')
          if (data.studentName) {
            this.suggestionData = `${data.studentName}同学，本次考试`
          }
          if (upSubjectData) {
            this.suggestionData += `${upSubjectData}，是你的优势学科，建议通过提分练习进行强化，继续保持这类学科的优势性！`
          }
          if (downSubjectData) {
            this.suggestionData += `${downSubjectData}，是你的劣势学科，建议先加强学习，熟练掌握薄弱知识点的基础，然后通过提分练习进行巩固和强化，争取下次考试获得更优异的成绩！`
          }
        } else {
          this.suggestionData = null
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.module_tab {
  width: auto !important;
  height: auto !important;
  padding: 0 10px !important;

  .tab_item {
    padding-bottom: 0 !important;

    &.tab_active {
      border-bottom: 0 !important;
    }
  }
}

.subject_score {
  display: flex;
  width: 100%;

  .subject_score_chart {
    width: 40%;
    position: relative;

    .button_editor {
      position: absolute;
      left: 50%;
      top: 62%;
      transform: translate(-50%, 0);
      color: #2e64fa;
      border: 1px solid #2e64fa;
    }
  }

  .subject_score_content {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 15px;
    align-content: flex-start;

    /* 元素之间的间隔 */
    .score_item {
      width: calc((100% - 15px * 4) / 5);
      height: 98px;
      background: #f8f9fd;
      border-radius: 5px;
      border: 1px solid #ebeef5;
      padding: 10px 2px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        display: flex;
        justify-content: center;

        &.title {
          font-weight: 400;
          color: #999999;
        }

        &.value {
          font-weight: 500;
          font-size: 20px;
          color: #333333;
          margin-top: 10px;
        }
      }
    }
  }
}

.module_describe {
  &.suggestion {
    padding-top: 0 !important;
  }
}
.answer_sheet {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
  .item {
    width: calc((100% - 20px * 3) / 4);
    padding: 9px;
    height: 200px;
    background: #f8f9fd;
    border-radius: 10px;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    &:hover {
      .item_hover {
        display: flex;
        justify-content: center;
        align-items: center;
        .show_view {
          width: 80px;
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
          span {
            font-weight: 400;
            font-size: 14px;
            color: #606266;
          }
        }
      }
    }
    .item_hover {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      z-index: 99;
    }
  }
}
.difficulty {
  width: 6px;
  height: 6px;
  display: inline-flex;
  border-radius: 50%;
  margin-right: 4px;
  &.easy {
    background: #3ba272;
  }
  &.relatively_easy {
    background: #fac858;
  }
  &.general {
    background: #5470c6;
  }
  &.more_difficult {
    background: #ea7acb;
  }
  &.difficult {
    background: #ee6666;
  }
}
</style>