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

<template>
  <div class="page_report">
    <div class="report_module">
      <div class="module_title">
        <div class="title_left">成绩总览</div>
      </div>
      <div class="module_table">
        <el-table :data="subjectData.tableData" v-loading="subjectLoading" :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 subjectData.titleData" :key="title.prop" align="center" :label="title.name">
            <template slot-scope="scope">
              <template v-if="title.prop == 'score' || title.prop == 'scoreRate'">
                <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                <template v-if="subjectData.studentOpenness == 3 || subjectData.studentOpenness == 4">
                  <img v-if="scope.row.fullScore == scope.row?.[title.prop]" src="@/assets/stuIcon/icon_right.png" />
                  <img v-else-if="scope.row?.[title.prop] == 0" src="@/assets/stuIcon/icon_error.png" />
                  <img v-else src="@/assets/stuIcon/icon_half_right.png" />
                </template>
                <template v-else>{{ scope.row?.[title.prop] || "-" }}</template>
              </template>
              <template v-else-if="title.prop == 'imgUrlList'">
                <el-button v-if="scope.row.isTotal==0 || scope.row.subjectGroupType==0" type="text" :disabled="!scope?.row?.imgUrlList || scope?.row?.imgUrlList == '-'" @click="OpenStudentPaper(scope.row.subjectCode)">查看答题卡</el-button>
                <template v-else>-</template>
              </template>
              <template v-else>{{ scope.row?.[title.prop] || "-" }}</template>
            </template>
          </el-table-column>
        </el-table>
        <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">
          {{ suggestionData?.studentName }}同学，本次考试{{ suggestionData?.studentOpenness == 1 ||
            suggestionData?.studentOpenness == 2 ?'总分':'总分标准分为' }}<span style="color: #2E64FA;">{{ suggestionData?.fullScore
            }}</span>{{ suggestionData?.studentOpenness == 1 || suggestionData?.studentOpenness == 2 ? '分' : '' }}，整体处于{{
              suggestionData?.summarySuggestionLevel }}，<template v-if="suggestionData?.upSubjectData"><span
              style="color: #3BA272;">{{
                suggestionData?.upSubjectData }}</span>是你的优势学科，建议通过提分练习进行强化，继续保持这类学科的优势性{{ suggestionData?.downSubjectData
                ? '；' :
                '。'
            }}</template><template v-if="suggestionData?.downSubjectData"><span style="color: #F56C6C;">{{
              suggestionData?.downSubjectData
              }}</span>是你的劣势学科，建议先加强学习，熟练掌握薄弱知识点的基础，然后通过提分练习进行巩固和强化，争取下次考试获得更优异的成绩！</template>
        </ExpandableText>
      </div>
    </div>
    <!-- 科目标准分分析 -->
    <div class="report_module">
      <div class="module_title" style="position: relative">
        <div class="title_left">科目标准分分析</div>
      </div>
      <div class="module_chart" v-if="subjectData.tableData.length > 0">
        <DifferenceChart :datax="subjectData.datax" :tooltipData="subjectData.tooltipData" :datay="subjectData.datay"
          :rate="0" :isClick="false"></DifferenceChart>
      </div>
      <div class="module_chart no_content_data" v-loading="subjectLoading" :element-loading-text="loadingText"
        element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" v-else>
        <span>暂无数据</span>
      </div>
      <div class="module_describe">
        <ExpandableText>
          说明：从标准分情况来看，这次考试<template v-if="subjectData.maxSubject"><span style="color: #3BA272">{{ subjectData.maxSubject
              }}</span>表现突出，请继续保持</template><template v-if="subjectData.minSubject">；<span style="color: #EE6666">{{
                subjectData.minSubject
              }}</span>标准分明显低于其他学科，可能会对总体排名造成影响，可结合错题梳理核心知识点，精准定位薄弱环节，制定针对性的提升计划，以实现各科均衡发展，进一步巩固整体成绩</template>。
        </ExpandableText>
      </div>
    </div>
    <div class="report_module">
      <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"
          :gridRight="40"></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="paperInfo" :currentPageIndex="currentPageIndex" :pageTitle="paperTitle"></StudentPaper>
  </div>
</template>
<script>
import DifferenceChart from "@/views/analysisReport/components/dCharts/differenceChart"; //率差图
import ExpandableText from "@/views/analysisReport/components/ExpandableText"; //文本内容展开收缩组件
import LineChart from "@/views/analysisReport/components/dCharts/lineChart"; //折线图
import GotoTop from "@/views/analysisReport/components/GotoTop"; //分析报告页面底部回到顶部组件
import StudentPaper from '@/components/StudentPaper.vue';//学生答题卡预览组件
import { mapGetters } from "vuex";
export default {
  name: "subjectQuality",
  props: {},
  components: {
    DifferenceChart,
    ExpandableText,
    LineChart,
    GotoTop,
    StudentPaper
  },
  data() {
    return {
      subjectData: {
        titleData: [],
        studentOpenness: '',//学生信息
        tableData: [],
        datax: [], //图数据
        datay: [], //图数据
        tooltipData: [],
        maxSubject: '',
        minSubject: ''
      },
      subjectLoading: false, //加载状态
      historyExamLoading: false,
      loadingText: "加载中,请稍后……",
      historyExamData: {
        chartData: [],
        datax: [],
        datay: [],
        title: [],
        colors: ["#5470C6"],
        markNumber: [],
        selectNames: [],
        selectVal: 'standardScore'
      }, //线面积图
      suggestionData: null,
      showStudentPaperDialog:false,//显示答题卡弹框
      paperInfo:{},
      paperTitle:'',//答题卡弹框标题
      currentPageIndex:0,//当前选中的答题卡第几页
    };
  },
  watch: {
    reportParam() {
      this.PageInit();//初始加载数据
    },//监听筛选数据变化
  },
  computed: {
    ...mapGetters(["userInfo"]),
    pageName() {
      return this.$store.state.report.examSelectItem.examName
    },//考试名称
    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为非总分
      };
    }, //分析报告公共参数变量
    getSubjectName(){
        return this.$store.state.report.filterObject.subjectName
    },
  },
  created() { },
  mounted() {
    this.PageInit(); //页面初始加载数据
  },
  methods: {
    PageInit() {
      this.QueryMultiSubjectData();//多科成绩总览-科目标准分分析
      this.QueryHistoryExamData();//学生端查询总分，多科历次信息
      this.QuerySuggestionData();//学生端查询总分，多科总结建议信息
    },
    //多科成绩总览-科目标准分分析
    QueryMultiSubjectData() {
      //  获取表格数据
      this.subjectLoading = true;
      this.$api.reportStudent
        .queryMultiSubjectData(this.reportParam)
        .then((res) => {
          if (res.code == 200 && res.data) {
            this.subjectData.tableData = res.data.tableData || [];
            this.subjectData.studentOpenness = res.data.studentOpenness ?? '';
            this.subjectData.titleData = res.data.titleData || [];
            this.subjectData.datax = this.subjectData.tableData.map(item => item.subjectName);
            this.subjectData.datay = this.subjectData.tableData.map(item => item.standardScore);
            this.subjectData.tooltipData = this.subjectData.tableData.map(item => ({
              list: [{
                name: '标准分',
                value: item.standardScore ?? '',
              }],
              name: item.subjectName,
            }));
            let maxSubject = [], minSubject = [];
            this.subjectData.datay.forEach((item, k) => {
              if (Number(item) > 0) {
                maxSubject.push(this.subjectData.datax[k])
              }
              if (Number(item) < 0) {
                minSubject.push(this.subjectData.datax[k])
              }
            });
            this.subjectData.maxSubject = maxSubject.join('、');
            this.subjectData.minSubject = minSubject.join('、');
          } else {
            this.subjectData.tableData = [];
            this.subjectData.studentOpenness = '';
            this.subjectData.titleData = [];
            this.subjectData.datax = [];
            this.subjectData.datay = [];
            this.subjectData.tooltipData = [];
            this.subjectData.maxSubject = '';
            this.subjectData.minSubject = '';
          }
        })
        .finally(() => {
          this.subjectLoading = false;
        });
    },
    //学生端查询总分，多科历次信息
    QueryHistoryExamData() {
      this.historyExamLoading = true;
      let param = {
        ...this.reportParam
      }
      if(this.reportParam.subjectGroupType==1 && this.reportParam.isTotal==0){//学生端查询总分，多科历次信息,组合科目时，一定要传组合科目的名称，组合科目的历次是按照组合科目名称来查询
        param.subjectName = this.getSubjectName
      }
      this.$api.reportStudent.queryHistoryExamData({...param}).then((res) => {
          if (res.code == 200 && res.data) {
            const detailData = res.data?.detailData || [];
            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];
    },
    //学生端查询总分，多科总结建议信息
    QuerySuggestionData() {
      this.$api.reportStudent
        .querySuggestionData(this.reportParam)
        .then((res) => {
          if (res.code == 200 && res.data) {
            const data = res.data;
            this.suggestionData = data;
            this.suggestionData.upSubjectData = data.upSubjectData.map(item => {
              if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                return `${item.subjectName}(得分${item.score})`
              } else {
                return `${item.subjectName}(${item.score})`
              }
            }).join('、')
            this.suggestionData.downSubjectData = data.downSubjectData.map(item => {
              if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                return `${item.subjectName}(得分${item.score})`
              } else {
                return `${item.subjectName}(${item.score})`
              }
            }).join('、')
          } else {
            this.suggestionData = null
          }
        });
    },
    //答题卡预览
    OpenStudentPaper(subjectCode){
      this.paperTitle = `${this.pageName}_${this.userInfo.userName}【${this.userInfo.registrationCode}】`;
      this.paperInfo = {examId:this.reportParam.examId,subjectCode:subjectCode};
      this.showStudentPaperDialog = true;
    },
  },
};
</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;
    }
  }
}

.module_describe {
  &.suggestion {
    padding-top: 0 !important;
  }
}
</style>