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" style="height: 250px;overflow: hidden;">
        <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">
            <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.studentOpenness == 3 || subjectData.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?.rateScoreNameStatus === 0">
              <span class="title">赋分等级</span>
              <span class="value">{{ subjectData?.data?.rateScoreName ?? '-' }}</span>
            </div>
            <div class="score_item">
              <span class="title">标准分</span>
              <span class="value">{{ subjectData?.data?.standardScore ?? '-' }}</span>
            </div>
            <div class="score_item">
              <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>
        </div>
        <div class="page_jg_20"></div>
      </div>
    </div>
    <div class="report_module" v-if="suggestionData">
      <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">
              <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
    };
  },
  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:联校
    }
  },
  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'
      }];
      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-得分显示等级，小题分显示对错
            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('、')
            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>