AIScoring/src/views/analysis/questionAnalysis.vue

<template>
  <ReportModule
    :showTitle="true"
    :titleList="[state.groupTitle]"
    :showDescribe="true"
    tableOrChart="chart"
    :showPrintBtn="false"
    :showExportBtn="false"
  >
    <template #title_right>
      <EchartType
        :chartTypeList="state.problemAnalysisData.chartTypeList"
        :current="state.problemAnalysisData.chartType"
        @ChangeEchartType="
          (val) => ChangeEchartType(val, 'problemAnalysisData')
        "
      />
    </template>
    <template #module_table_chart>
      <template v-if="state.problemAnalysisData.data.length > 0">
        <BarLineCharts
          v-if="state.problemAnalysisData.chartType == 'line_bar_chart'"
          :legendList="state.problemAnalysisData.legendList"
          :showBarLegendIndex="state.problemAnalysisData.showBarLegendIndex"
          title="得分率"
          :data="state.problemAnalysisData.data"
          @HandleChartClick="HandleChartClick"
          @ChangeChartOrder="
            (sortType, legendData, barIndex) =>
              ChangeChartOrder(sortType, legendData, barIndex, 1)
          "
        >
        </BarLineCharts>
        <BarsCharts
          v-if="state.problemAnalysisData.chartType == 'vertical_bar'"
          :key="state.chartKey"
          :data="state.problemAnalysisData.data"
          :legendList="state.problemAnalysisData.legendList"
          :showSortSelectbox="true"
          unit="%"
          title="得分率"
          :isClick="true"
          @HandleChartClick="HandleChartClick"
          @ChangeChartOrder="
            (sortType, legendData, barIndex) =>
              ChangeChartOrder(sortType, legendData, barIndex, 1)
          "
        >
        </BarsCharts>
        <RadarCharts
          v-if="state.problemAnalysisData.chartType == 'radar_chart'"
          :key="state.chartKey"
          :data="state.problemAnalysisData.data"
          :legendList="state.problemAnalysisData.legendList"
          :showCheckBox="true"
          :openShowAllLegend="true"
          :isClick="true"
          @HandleChartClick="HandleChartClick"
        >
        </RadarCharts>
      </template>
      <div
        v-else
        class="no_content_data"
        v-loading="state.dataLoading"
        :element-loading-text="state.loadingText"
        :element-loading-spinner="loadingSvgIcon"
        element-loading-background="#ffffff"
      >
        <span>暂无数据</span>
      </div>
    </template>
    <template #module_describe>
      展示每道试题的得分率图。得分率指实际得分/考核分的比值，换算成的百分数。可以用于分析每道试题的难易程度和质量，试题得分率高意味着试题难度低或者学生整体水平高；得分率低意味着试题难度较高或者考生整体水平较低。点击每道试题的柱或雷达图的题号可在下方查看该题每个班的得分率情况。
    </template>
  </ReportModule>
  <ReportModule
    :showTitle="true"
    :titleList="[state.groupTitle, state.questionTitle]"
    :showDescribe="true"
    tableOrChart="chart"
    :showPrintBtn="false"
    :showExportBtn="false"
  >
    <template #title_right>
      <EchartType
        :chartTypeList="state.questionScoreStatsData.chartTypeList"
        :current="state.questionScoreStatsData.chartType"
        @ChangeEchartType="
          (val) => ChangeEchartType(val, 'questionScoreStatsData')
        "
      />
    </template>
    <template #module_table_chart>
      <template v-if="state.questionScoreStatsData.datax.length > 0">
        <BarScoringRateVertical
          v-if="state.questionScoreStatsData.chartType == 'vertical_bar'"
          :datax="state.questionScoreStatsData.datax"
          :datay="state.questionScoreStatsData.dataStackY"
          :tooltipData="state.questionScoreStatsData.tooltipData"
          :isShowMarkLine="true"
          :average="state.questionScoreStatsData.rate"
          :markLineData="state.questionScoreStatsData.markLineData"
          :color="['#3BA272', '#EE6666']"
          typeName="得分率"
          :isClick="true"
          @HandleChartClick="HandleQuestionScoreChartClick"
        ></BarScoringRateVertical>
        <DifferenceChart
          v-if="state.questionScoreStatsData.chartType == 'difference_chart'"
          :datax="state.questionScoreStatsData.datax"
          :datay="state.questionScoreStatsData.datay"
          unit="%"
          type="1"
          title="得分率"
          :rate="state.questionScoreStatsData.rate"
          @HandleChartClick="HandleQuestionScoreChartClick"
        >
        </DifferenceChart>
      </template>
      <div
        v-else
        class="no_content_data"
        v-loading="state.dataLoading"
        :element-loading-text="state.loadingText"
        :element-loading-spinner="loadingSvgIcon"
        element-loading-background="#ffffff"
      >
        <span>暂无数据</span>
      </div>
    </template>
    <template #module_describe>
      说明：通过上面图形，可查看该题每个班的得分率情况，由图中可以看出，得分率最高为<span
        style="color: #3ba272"
        >{{ state.questionScoreStatsData.maxClass }}</span
      >，最低为<span style="color: #ee6666">{{
        state.questionScoreStatsData.minClass
      }}</span
      >。点击每个班级的柱可在下方查看该班各个选项/得分的人数分布。
    </template>
  </ReportModule>
  <ReportModule
    :showTitle="true"
    :titleList="[state.groupTitle, state.questionTitle, state.classTitle]"
    :showDescribe="true"
    tableOrChart="qita"
    :showPrintBtn="false"
    :showExportBtn="false"
  >
    <template #module_qita>
      <div class="content_left answer">
        <BarChart
          v-if="state.questionAnswerData.datax.length"
          :datax="state.questionAnswerData.datax"
          :datay="state.questionAnswerData.datay"
          typeName="人数"
          :showNuitY="false"
          unit="人"
          :unitX="
            state.questionAnswerData.questionType == '单选题' ||
            state.questionAnswerData.questionType == '多选题' ||
            state.questionAnswerData.questionType == '判断题'
              ? ''
              : '分'
          "
          :showMarkPoint="false"
          :isShowMarkLine="false"
          :color="state.questionAnswerData.color"
          :answerValue="state.questionAnswerData.answerValue"
          :answerScore="state.questionAnswerData.answerScore"
          :fullMark="state.questionAnswerData.fullMark"
          :isClick="true"
          @HandleChartClick="HandleQuestionAnswerChartClick"
          style="height: 300px"
        ></BarChart>
        <div
          v-else
          class="module_chart no_content_data"
          v-loading="state.dataLoading"
          :element-loading-text="state.loadingText"
          :element-loading-spinner="loadingSvgIcon"
          element-loading-background="#ffffff"
        >
          <span>暂无数据</span>
        </div>
      </div>
      <div class="content_right answer table_42">
        <el-table
          border
          :data="state.questionAnswerData.tableData"
          stripe
          align="left"
          :header-row-style="HeaderRowStyle"
        >
          <el-table-column :label="state.classTitle" align="center">
            <el-table-column
              prop="title"
              align="center"
              label="名称"
            ></el-table-column>
            <el-table-column
              prop="value"
              align="center"
              label="数值"
            ></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template #module_describe>
      说明：通过柱图，可查看该题下该班所有学生的选项或试题得分情况。点击每个柱可查看该选项或分数的学生明细和答题卡答题情况。
    </template>
  </ReportModule>
  <ReportModule
    :showTitle="true"
    :titleList="[
      state.groupTitle,
      state.questionTitle,
      state.classTitle,
      state.optionTitle,
    ]"
    :showDescribe="true"
    tableOrChart="qita"
    :showPrintBtn="false"
    :showExportBtn="false"
  >
    <template #title_right>
      <el-button
        class="default_button"
        v-if="
          state.questionAnswerData.questionType != '单选题' &&
          state.questionAnswerData.questionType != '多选题' &&
          state.questionAnswerData.questionType != '判断题'
        "
        @click="VisibleQuestionCard"
      >
        <img src="@/assets/icon/card_view.webp" />批量查看
      </el-button>
    </template>
    <template #module_qita>
      <div class="content_left paper_card">
        <StudentQuestionImg :paperInfo="state.paperInfos"></StudentQuestionImg>
      </div>
      <div class="content_right paper_card table_42">
        <el-table
          border
          :data="state.majorAnswerData.tableData"
          stripe
          highlight-current-row
          align="left"
          height="401px"
          row-key="studentRegistrationCode"
          :row-style="{ cursor: 'pointer' }"
          :row-class-name="TableRowClassName"
          @row-click="HandleRowClick"
        >
          <el-table-column
            prop="studentUserName"
            align="center"
            label="学生"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="班级"
            prop="className"
            align="center"
            min-width="70"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="questionScore"
            align="center"
            label="得分"
            width="70"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="paperScore"
            align="center"
            label="成绩"
            width="70"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column align="center" label="操作">
            <template #default="scope">
              <el-button text @click.stop="handleClick(scope.row)"
                >查看答题卡</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template #module_describe>
      说明：点击左侧表格列可切换学生查看具体学生答题图片，点击学生姓名可在下方查看学生均衡分析，点击学生成绩可查看学生答题卡原卷。
    </template>
  </ReportModule>
  <ReportModule
    ref="reportModuleRef"
    :showTitle="true"
    :titleList="[state.groupTitle]"
    :showDescribe="true"
    tableOrChart="table"
    :showPrintBtn="false"
    :showExportBtn="true"
    :currentPage="state.majorTableData.currentPage"
    :pageSize="state.majorTableData.pageSize"
    :total="state.majorTableData.total"
    @ChangePageSize="ChangePageSize"
    @ChangeCurrentPage="ChangeCurrentPage"
    @ExportExcel="ExportExcel"
  >
    <template #title_right>
      <SetTableHeader
        :data="{
          static: state.majorTableData.headerData,
          dynamisc: state.majorTableData.changeHeaderData,
          child: state.majorTableData.childHeaderData,
        }"
        :isShowDynamisc="false"
        :notEditable="['questionName']"
        @SetEnterHeaderData="SetEnterHeaderData"
      ></SetTableHeader>
    </template>
    <template #module_table_chart>
      <el-table
        :data="state.majorTableData.tableData"
        ref="majorTable"
        border
        stripe
        align="left"
        :key="state.majorTableData.tableKey"
      >
        <template v-for="item in state.majorTableData.headerData">
          <el-table-column
            v-if="item.display"
            :key="item.prop"
            align="center"
            :prop="item.prop"
            :min-width="item.label.length > 4 ? 110 : 90"
            :label="item.label"
            fixed="left"
            show-overflow-tooltip
          >
            <template #default="scope">
              {{ scope.row[item.prop] || "-"
              }}{{
                item.prop == "estimatedScoreRate" && scope.row[item.prop]
                  ? "%"
                  : ""
              }}
            </template>
          </el-table-column>
        </template>
        <template v-for="parent in state.majorTableData.changeHeaderData">
          <el-table-column
            v-if="parent.display"
            align="center"
            :prop="parent.prop"
            :label="parent.label"
            :key="parent.prop"
          >
            <template v-for="item in state.majorTableData.childHeaderData">
              <el-table-column
                v-if="item.display"
                :prop="`${parent.prop}_${item.prop}`"
                :key="`${parent.prop}_${item.prop}`"
                align="center"
                :label="item.label"
                :min-width="item.label.length > 4 ? 100 : 80"
                show-overflow-tooltip
              >
                <template #default="scope">
                  <span v-if="item.prop.indexOf('Rate') > -1">{{
                    scope.row[`${parent.prop}_${item.prop}`]
                      ? `${scope.row[`${parent.prop}_${item.prop}`]}%`
                      : "-"
                  }}</span>
                  <span
                    v-else
                    @click="OpenStudentDialog(item, parent, scope.row)"
                    :class="{
                      table_row_blue:
                        (item.prop.indexOf('Count') > -1 ||
                          item.prop.indexOf('Number') > -1) &&
                        scope.row?.[`${parent.prop}_${item.prop}`] > 0,
                    }"
                    >{{
                      scope.row?.[`${parent.prop}_${item.prop}`] ?? "-"
                    }}</span
                  >
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </template>
  </ReportModule>
  <!-- 批量查看小题答题卡 -->
  <QuestionCard
    :subjectId="analysisStore.filterObject.subjectId"
    :questionId="state.cardQuestionId"
    :platformNumbers="state.cardRegistrationCodeList"
    :groupTitle="state.groupTitle"
    :groupName="state.groupName"
    :questionTitle="state.questionTitle"
    :classTitle="state.classTitle"
    :optionTitle="state.optionTitle"
    :showDialog="state.showQuestionCardDialog"
    @CloseDialog="CloseQuestionCardDialog"
  ></QuestionCard>
  <!-- 学生答题卡组件 -->
  <StudentPaper
    :modelValue="state.showStudentPaperDialog"
    :paperInfo="state.paperInfo"
    :pageTitle="state.paperTitle"
    @updateModelValue="UpdateModelValue"
  ></StudentPaper>
  <StudentList
    :showDialog.sync="state.dialogData.showDialog"
    :title="state.dialogData.title"
    :tableTitle="state.dialogData.tableTitle"
    :apiName="state.dialogData.apiName"
    :studentParam="{
      fiveRateName: state.dialogData.fiveRateName, //当前选择的五率的名称
      selectSubjectName: state.dialogData.selectSubjectName, //当前选择的科目名称
      selectSchoolLevel: state.dialogData.selectSchoolLevel, //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      selectSchoolName: state.dialogData.selectSchoolName, //当前选择的学校名称：联校 组合学校 单校名称
      selectClassLevel: state.dialogData.selectClassLevel, //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      selectClassName: state.dialogData.selectClassName, //当前选择的班级名称：年级 组合班级 单班
      questionId: state.dialogData.questionId, //试题ID
      isPaper: state.dialogData.isPaper, //是否为全卷0-非1-是全卷
      quesScoreType: state.dialogData.quesScoreType, //选择的类型0-满分人数 1-0分人数 3-优秀率、良好率等
      knowledgeId: state.dialogData.knowledgeId, //如果选择的是知识点，则需要返回知识点ID
      questionGroupName: state.dialogData.questionGroupName, //试题分组的名称
      groupTitle: state.dialogData.groupTitle,
    }"
    @CloseDialog="CloseDialog"
  >
  </StudentList>
</template>
<script lang="ts" setup>
import ReportModule from "@/components/ReportModule.vue";
import EchartType from "@/components/EchartType.vue";
import QuestionCard from "@/components/QuestionCard.vue";
import StudentPaper from "@/components/StudentPaper.vue"; //学生答题卡组件
import { useAnalysisStore } from "@/store/analysis";
import {
  questionAnalysis,
  queryAnswerListByAnswerAndScore,
  publicExport,
} from "@/api/analysis";
import BarLineCharts from "@/components/echarts/barLineCharts.vue"; //柱状图折线图组合图组件
import RadarCharts from "@/components/echarts/radarCharts.vue"; //雷达图
import BarsCharts from "@/components/echarts/barsCharts.vue"; //多柱状图组件
import BarScoringRateVertical from "@/components/echarts/barScoringRate_vertical.vue"; //得分率 纵向柱状图
import DifferenceChart from "@/components/echarts/differenceChart.vue"; //率差图
import BarChart from "@/components/echarts/barChart_answer.vue"; //单柱状图
import StudentQuestionImg from "@/components/StudentQuestionImg.vue"; // 学生小题答题卡组件
import SetTableHeader from "@/components/SetTableHeader.vue"; //设置表头
import StudentList from "@/components/StudentList.vue";
import { downloadExcel, GetExcelFileName } from "@/utils/exportExcel";
import { onMounted, reactive, watch, ref, computed, nextTick } from "vue";
import { loadingSvgIcon } from "@/utils/common";
import { cloneDeep } from "lodash-es";

const analysisStore = useAnalysisStore();
const reportModuleRef = ref<any>(null);
const getExamName = computed(() => {
  return analysisStore.analysisExamInfo.examName || "";
});

// 1. 为 reactive 添加 <any> 泛型，解决空数组推断为 never[] 及深层对象属性访问报错
const state = reactive<any>({
  groupTitle: "小题分析",
  groupName: "", // 分组名称
  questionTitle: "", //题目名称
  classTitle: "", //班级名称
  optionTitle: "", //选项名称
  problemAnalysisData: {
    chartType: "line_bar_chart", //默认显示折线图柱状图line_bar_chart
    chartTypeList: [
      { label: "组合图", value: "line_bar_chart" },
      { label: "柱状图", value: "vertical_bar" },
      { label: "雷达图", value: "radar_chart" },
    ],
    legendList: [],
    defaultLegendList: [],
    showBarLegendIndex: 1,
    questionList: [], // 题目列表
    questionTableList: [], // 小题分析table
    groupList: [], // 分组题目列表
    groupTableList: [], // 分组table
    headerList: [],
    changeHeaderList: [],
    childHeaderList: [],
    questionListIndex: 0, //题目 索引
    data: [], //柱状图
  }, //小题分析数据
  questionScoreStatsData: {
    checked: false,
    isIndeterminate: true,
    markLineData: [], //平均分
    chartTypeList: [
      { label: "柱状图", value: "vertical_bar" },
      { label: "率差图", value: "difference_chart" },
    ],
    chartType: "vertical_bar", //默认显示率差图vertical_bar
    datax: [], //x轴数据
    datay: [], //Y轴数据
    dataStackY: [], //Y轴数据
    tooltipData: [], //
    rate: 60, //中间x的刻度线的值 数字类型
    maxClass: "", // 得分率最高班
    minClass: "", // 得分率最低班
  }, //小题分析 /第N题
  questionAnswerData: {
    datax: [], //x轴数据
    datay: [], //Y轴数据
    color: "#5470C6",
    answerValue: "", //正确答案 柱状图显示绿色
    answerScore: [], //答案所能得的分数
    questionType: "", //类型
    fullMark: "", //满分
    tableData: [],
    classListIndex: 0, // 索引
  }, //小题分析 /第N题 / N班
  majorAnswerData: {
    paperUrl: "", //试卷地址
    tableData: [], //表格数据
    rowIndex: 0,
  }, // 通过答案或者分数查询某题作答情况
  majorStudentData: {
    tableData: [],
    legendList: [],
    radarChartData: [],
    excellentCourseList: "", //优秀科目
    inferiorCourseList: "", //弱势科目
  }, //科目得分率
  majorTableData: {
    tableKey: 0,
    tableData: [], //小题分析表数据
    allTableData: [],
    headerData: [], //固定表头数据
    changeHeaderData: [], //动态表头数据
    childHeaderData: [], //子级表头数据
    pageSize: 10, //每页显示数据
    total: 0, //总数
    currentPage: 1, //当前页
  }, //小题分析表 + 题目分组分析
  chartKey: 0,
  dataLoading: false,
  loadingText: "加载中,请稍后...",
  paperInfo: {
    examPaperId: "", //考试科目id
    platformNumber: "", //学籍号平台号
    questionId: "", //题目id
  }, //学生试卷信息
  paperTitle: "", //学生试卷标题
  showStudentPaperDialog: false, //是否显示学生答题卡弹窗
  paperInfos: {
    examPaperId: "", //考试科目id
    platformNumber: "", //学籍号平台号
    questionId: "", //题目id
  },
  dialogData: {
    apiName: "questionStudentInfo",
    showDialog: false,
    title: "",
    tableTitle: "",
    fiveRateName: "", //当前选择的五率的名称
    selectSubjectName: "", //当前选择的科目名称
    selectSchoolLevel: "", //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
    selectSchoolName: "", //当前选择的学校名称：联校 组合学校 单校名称
    selectClassLevel: "", //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
    selectClassName: "", //当前选择的班级名称：年级 组合班级 单班
    questionId: "", //试题ID
    isPaper: "", //是否为全卷0-非1-是全卷
    quesScoreType: "", //选择的类型0-满分人数 1-0分人数 3-优秀率、良好率等
    knowledgeId: "", //如果选择的是知识点，则需要返回知识点ID
    questionGroupName: "", //试题分组的名称
    groupTitle: "",
  },
  showQuestionCardDialog: false,
  cardQuestionId: "", // 批量查看答题卡试题id
  cardRegistrationCodeList: [], // 批量查看答题卡学生账号数组
});

// 2. 为 ref 添加 <any> 泛型
const majorTable = ref<any>(null);

// 3. 为所有函数参数补充 :any 类型声明，解决隐式 any 报错
//排序
const ChangeChartOrder = (sortType: any, legendData: any, barIndex: any, number: any) => {
  const isHasEstimatedScore = state.problemAnalysisData.headerList.find(
    (item: any) => item.prop == "estimatedScore",
  ); //是否存在预估满分
  const fullVolume = state.problemAnalysisData.questionList.filter(
    (item: any) => item.showCode == 999,
  ); //全卷
  const questionList = state.problemAnalysisData.questionList.filter(
    (item: any) => item.showCode != 999,
  );
  const newBarIndex = isHasEstimatedScore ? barIndex - 1 : barIndex;
  if (sortType == "2") {
    //从低到高
    questionList.sort(function (a: any, b: any) {
      return (
        (a?.classList?.[newBarIndex]?.questionStats?.scoreRate || 0) -
        (b?.classList?.[newBarIndex]?.questionStats?.scoreRate || 0)
      );
    });
  } else if (sortType == "3") {
    //从高到低
    questionList.sort(function (a: any, b: any) {
      return (
        (b?.classList?.[newBarIndex]?.questionStats?.scoreRate || 0) -
        (a?.classList?.[newBarIndex]?.questionStats?.scoreRate || 0)
      );
    });
  } else {
    //默认排序 按题号排序
    questionList.sort(function (a: any, b: any) {
      return (a?.showCode || 0) - (b.showCode || 0);
    });
  }
  state.problemAnalysisData.questionList = [...questionList, ...fullVolume];
  let chartData: any[] = [],
    chartTitle: any[] = [];
  state.problemAnalysisData.questionList.forEach((ques: any) => {
    const scoreRateArr = ques.classList.map(
      (item: any) => item?.questionStats?.scoreRate || 0,
    );
    if (isHasEstimatedScore) {
      chartData.push([
        ques.questionName,
        ques.estimatedScoreRate,
        ...scoreRateArr,
      ]);
    } else {
      chartData.push([ques.questionName, ...scoreRateArr]);
    }
  });
  const newChangeHeaderList = isHasEstimatedScore
    ? [
        { ...isHasEstimatedScore, isG: false, type: 1 },
        ...state.problemAnalysisData.changeHeaderList,
      ]
    : [...state.problemAnalysisData.changeHeaderList];
  newChangeHeaderList.forEach((item: any) => {
    chartTitle.push(item.label);
  });
  chartTitle.unshift("group");
  chartData.unshift(chartTitle); // 柱状图 图例标题
  chartData.pop(); // 删除最后一行 全卷
  state.problemAnalysisData.data = chartData;
  state.problemAnalysisData.legendList = legendData;
  //小题分析 /第N题
  GetQuestionStatsData(0);
};

//试题图表切换公共方法
const ChangeEchartType = (value: any, prop: any) => {
  if (prop == "problemAnalysisData") {
    ChangeChartOrder("1", state.problemAnalysisData.defaultLegendList, "", 1);
  }
  state[prop].chartType = value;
};

//获取小题分析数据
const GetQuestionAnalysisData = () => {
  state.problemAnalysisData.data = []; //柱状图折线图 X轴
  state.dataLoading = true;
  questionAnalysis({
    ...analysisStore.filterObject,
    analysisType: 0, //0-小题分析 1大题分析 2-知识点 3-能力点 question_group_code(4,5,6,7,8) 11-题型分析
  })
    .then((res: any) => {
      if (
        res.code == 200 &&
        res.data &&
        res.data.questionList &&
        res.data.questionList.length
      ) {
        const { data } = res;
        const questionList = data.questionList || [];
        const changeHeaderList = data.changeHeaderList || []; //柱状图折线图 班级名称
        const headerListData = data.headerList || [];
        state.problemAnalysisData.groupList = [];
        state.problemAnalysisData.groupTableList = [];
        state.problemAnalysisData.questionList = questionList;
        state.problemAnalysisData.questionTableList = cloneDeep(questionList);
        state.problemAnalysisData.headerList = headerListData.filter((item: any) => item.prop != "knowledge");//不显示知识点
        state.problemAnalysisData.changeHeaderList = changeHeaderList;
        state.problemAnalysisData.childHeaderList = data.childHeaderList || [];

        state.chartKey++;
        //Y轴数据
        let chartData: any[] = [];
        let legendList: any[] = [];
        const isHasEstimatedScore = state.problemAnalysisData.headerList.find(
          (item: any) => item.prop == "estimatedScore",
        ); //是否存在预估满分
        chartData = questionList.map((item: any) => {
          return isHasEstimatedScore
            ? [item.questionName, item.estimatedScoreRate]
            : [item.questionName];
        });
        questionList.forEach((ques: any, key: number) => {
          const scoreRateArr = ques.classList.map(
            (item: any) => item?.questionStats?.scoreRate || 0,
          );
          chartData[key].push(...scoreRateArr);
        });
        let chartTitle: any[] = [],
          titleType: any[] = [],
          classSelectLegend: any[] = [];
        const newChangeHeaderList = isHasEstimatedScore
          ? [
              { ...isHasEstimatedScore, isG: false, type: 1 },
              ...changeHeaderList,
            ]
          : [...changeHeaderList];
        newChangeHeaderList.forEach((item: any) => {
          chartTitle.push(item.label);
          titleType.push(item.type ? item.type : ""); //1柱状图 2折线
          if (
            item.prop != "0" &&
            item.prop != "estimatedScore" &&
            item.prop.indexOf("school_group") == -1
          ) {
            classSelectLegend.push(item.label);
          }
        });
        chartTitle.unshift("group");
        if (analysisStore.filterObject.classLevel != 2) {
          //0 年级 1 组合班级 2具体班级
          let startIndex = 1,
            endIndex = 3;
          if (analysisStore.filterObject.schoolLevel == 2) {
            //0-联考 1-学校分组 2-具体学校
            startIndex =
              titleType.lastIndexOf(1) > -1 ? titleType.lastIndexOf(1) + 1 : 1;
            endIndex = titleType.indexOf(2) > -1 ? titleType.indexOf(2) + 2 : 3; //单校时显示联校、组合校、年级是柱子；班级组合、班级是折线。
          } else {
            //联校 组合学校 默认当前的为第一个选中的柱子
            const barFirtIndex =
              titleType.lastIndexOf(1) > -1 ? titleType.lastIndexOf(1) + 1 : 1;
            startIndex = barFirtIndex;
            endIndex = barFirtIndex + 2;
          }
          legendList =
            chartTitle.length > 1 ? chartTitle.slice(startIndex, endIndex) : [];
          state.problemAnalysisData.showBarLegendIndex = endIndex - 2;
        } else {
          //单班 联校和组合学校不默认显示
          legendList = classSelectLegend;
          state.problemAnalysisData.showBarLegendIndex =
            changeHeaderList.length - 1;
        }
        chartData.unshift(chartTitle); // 柱状图 图例标题
        chartData.pop(); // 删除最后一行 全卷
        state.problemAnalysisData.data = chartData;
        state.problemAnalysisData.legendList = legendList;
        state.problemAnalysisData.defaultLegendList = cloneDeep(legendList);
        //小题分析 /第N题
        GetQuestionStatsData(0);
        // 获取项目分析表
        GetMajorTableData();
      } else {
        state.problemAnalysisData.groupList = [];
        state.problemAnalysisData.groupTableList = [];
        state.problemAnalysisData.questionList = [];
        state.problemAnalysisData.questionTableList = [];
        state.problemAnalysisData.showBarLegendIndex = 1;
        state.problemAnalysisData.headerList = [];
        state.problemAnalysisData.changeHeaderList = [];
        state.problemAnalysisData.childHeaderList = [];

        state.questionScoreStatsData.datax = [];
        state.questionScoreStatsData.datay = [];
        state.questionScoreStatsData.dataStackY = [];
        state.questionScoreStatsData.tooltipData = [];
        state.questionScoreStatsData.rate = 0;
        state.questionScoreStatsData.maxClass = "";
        state.questionScoreStatsData.minClass = "";

        state.questionAnswerData.datax = [];
        state.questionAnswerData.datay = [];
        state.questionAnswerData.answerValue = "";
        state.questionAnswerData.answerScore = [];
        state.questionAnswerData.questionType = "";
        state.questionAnswerData.fullMark = "";
        state.questionAnswerData.tableData = [];
        state.questionAnswerData.classListIndex = 0;

        state.majorAnswerData.tableData = [];
        state.majorAnswerData.paperUrl = "";
        state.majorAnswerData.rowIndex = 0;

        state.majorStudentData.tableData = [];
        state.majorStudentData.legendList = [];
        state.majorStudentData.radarChartData = [];
        state.majorStudentData.excellentCourseList = "";
        state.majorStudentData.inferiorCourseList = "";

        state.majorTableData.tableData = [];
        state.majorTableData.headerData = [];
        state.majorTableData.changeHeaderData = [];
        state.majorTableData.childHeaderData = [];
        state.majorTableData.pageSize = 10;
        state.majorTableData.total = 0;
        state.majorTableData.currentPage = 1;
      }
    })
    .finally(() => {
      state.dataLoading = false;
    });
};

// 点击柱状图折线图
const HandleChartClick = (index: any, name: any) => {
  GetQuestionStatsData(index); //小题分析
};

// 获取小题分析 /第N题
const GetQuestionStatsData = (index: any) => {
  const questionData = cloneDeep(state.problemAnalysisData.questionList[index]);
  state.problemAnalysisData.questionListIndex = index;
  state.questionTitle = questionData?.questionName || "";
  if (questionData) {
    state.questionScoreStatsData.datax = []; // x轴数据
    state.questionScoreStatsData.datay = []; // Y轴数据
    state.questionScoreStatsData.dataStackY = []; // Y轴数据
    state.questionScoreStatsData.tooltipData = []; // 提示框内容
    let dataStackY: any[] = [];
    const isHasEstimatedScore = state.problemAnalysisData.headerList.find(
      (item: any) => item.prop == "estimatedScore",
    ); //是否存在预估满分
    if (questionData.classList.length > 1) {
      const key = state.problemAnalysisData.showBarLegendIndex;
      state.questionScoreStatsData.markLineData = []; //辅助线
      const classList = questionData?.classList || [];
      if (
        analysisStore.filterObject.classLevel == 0 ||
        analysisStore.filterObject.classLevel == 1
      ) {
        //0 年级 1 组合班级 2具体班级
        state.questionScoreStatsData.rate = Number(
          classList?.[key - 1]?.questionStats?.scoreRate || 0,
        );
      } else {
        state.questionScoreStatsData.rate = Number(
          classList?.[key]?.questionStats?.scoreRate || 0,
        );
      }
      //辅助线
      classList.forEach((item: any, index: number) => {
        const keyIndex =
          analysisStore.filterObject.classLevel == 0 ||
          analysisStore.filterObject.classLevel == 1
            ? key - (isHasEstimatedScore ? 2 : 1)
            : key;
        if (index <= keyIndex) {
          const rate = Number(item?.questionStats?.scoreRate || 0);
          state.questionScoreStatsData.markLineData.push({
            legendName: item.groupName,
            value: rate,
            isShow: index == keyIndex ? true : false, //是否显示
          });
        }
      });
      questionData.classList = questionData.classList.slice(
        isHasEstimatedScore ? key - 1 : key,
      ); // 取折线图数据
    } else {
      state.questionScoreStatsData.rate = 60;
    }

    questionData.classList.forEach((item: any) => {
      state.questionScoreStatsData.datax.push(item.groupName);
      state.questionScoreStatsData.datay.push(item.questionStats.scoreRate);
      dataStackY.push(item.questionStats.lossRate);
      state.questionScoreStatsData.tooltipData.push({
        list: [
          {
            name: "失分率",
            value: `${item.questionStats.lossRate}%`,
          },
        ],
      });
    });
    // 获取最大值
    const max = Math.max(...state.questionScoreStatsData.datay);
    // 获取最小值
    const min = Math.min(...state.questionScoreStatsData.datay);
    const maxValue = max.toFixed(2);
    const minValue = min.toFixed(2);

    let maxClass: any[] = [],
      minClass: any[] = [];
    state.questionScoreStatsData.datay.forEach((item: any, index: number) => {
      if (Number(item) == Number(maxValue)) {
        maxClass.push(state.questionScoreStatsData.datax[index]);
      }
      if (Number(item) == Number(minValue)) {
        minClass.push(state.questionScoreStatsData.datax[index]);
      }
    });

    state.questionScoreStatsData.minClass = minClass.join("、");
    state.questionScoreStatsData.maxClass = maxClass.join("、");
    state.questionScoreStatsData.dataStackY = [
      state.questionScoreStatsData.datay,
      dataStackY,
    ];
  }
  console.log("打印questionScoreStatsData1111", state.questionScoreStatsData);
  // 获取小题分析 /第N题 / 第N班
  GetQuestionAnswerData(state.problemAnalysisData.showBarLegendIndex);
};

//切换 获取小题分析 /第N题 获取第N班答题列表
const HandleQuestionScoreChartClick = (index: any) => {
  GetQuestionAnswerData(index + state.problemAnalysisData.showBarLegendIndex);
};

// 获取小题分析 /第N题 / 第N班 选项
const GetQuestionAnswerData = (index: any) => {
  const isHasEstimatedScore = state.problemAnalysisData.headerList.find(
    (item: any) => item.prop == "estimatedScore",
  ); //是否存在预估满分
  const newINdex = isHasEstimatedScore ? index - 1 : index;
  const classList =
    state.problemAnalysisData.questionList?.[
      state.problemAnalysisData.questionListIndex
    ]?.classList?.[newINdex];
  
  state.questionAnswerData.answerValue =
    state.problemAnalysisData.questionList[
      state.problemAnalysisData.questionListIndex
    ].answerValue; //正确答案

  state.questionAnswerData.questionType =
    state.problemAnalysisData.questionList[
      state.problemAnalysisData.questionListIndex
    ].questionType; //类型
  state.questionAnswerData.fullMark =
    state.problemAnalysisData.questionList[
      state.problemAnalysisData.questionListIndex
    ].fullMark; //满分

  state.questionAnswerData.classListIndex = newINdex;
  if (classList) {
    const answerList = classList.questionStats.answerList || [];
    state.classTitle = classList.groupName;
    state.questionAnswerData.datax = []; // x轴数据
    state.questionAnswerData.datay = []; // Y轴数据
    let sum = 0;
    answerList.forEach((item: any) => {
      sum += item.studentNum;
      state.questionAnswerData.datax.push(item.name);
      state.questionAnswerData.datay.push(item.studentNum);
      state.questionAnswerData.answerScore.push(item.score);
    });
    state.questionAnswerData.tableData = [
      {
        title: "得分率",
        value: `${classList.questionStats.scoreRate}%`,
      },
      {
        title: "平均分",
        value: `${classList.questionStats.averageScore}`,
      },
      {
        title: "最高分",
        value: `${classList.questionStats.maxScore}`,
      },
      {
        title: "最低分",
        value: `${classList.questionStats.minScore}`,
      },
      {
        title: "人数",
        value: `${sum}人`,
      },
    ];
    if (analysisStore.filterObject.schoolLevel == 2) {
      //单校时展示
      // 获取答题情况
      GetAnswerListByAnswerAndScore(
        0,
        answerList && answerList[0] ? answerList[0].name : "",
      );
    }
  }
};

// 点击柱状图小题分析 /第N题 / 第N班 选项 获取答题情况
const HandleQuestionAnswerChartClick = (index: any, name: any) => {
  if (analysisStore.filterObject.schoolLevel == 2) {
    //单校时展示
    GetAnswerListByAnswerAndScore(index, name);
  }
};

//通过答案或者分数查询某题作答情况
const GetAnswerListByAnswerAndScore = (index: any, name: any) => {
  state.optionTitle = name; //选项名称
  const question =
    state.problemAnalysisData.questionList[
      state.problemAnalysisData.questionListIndex
    ];
  const classItem = question.classList[state.questionAnswerData.classListIndex];
  const classItemKeys = Object.keys(classItem);
  const reportParam: any = {
    ...analysisStore.filterObject,
  };
  Object.keys(analysisStore.filterObject).forEach((item) => {
    if (classItemKeys.indexOf(item) > -1) {
      reportParam[item] = classItem[item];
    }
  });
  const answer =
    question.classList[state.questionAnswerData.classListIndex].questionStats
      .answerList[index];
  const params = {
    ...reportParam,
    questionId: question.questionId, // 试题id
    registrationCodeList: answer?.registrationCodeList || [], // 学生账号数组
  };
  state.cardQuestionId = params.questionId; // 批量查看答题卡试题id
  state.cardRegistrationCodeList = params.registrationCodeList; // 批量查看答题卡学生账号数组
  queryAnswerListByAnswerAndScore(params).then((res: any) => {
    if (res.code == 200) {
      state.majorAnswerData.tableData = res.data || [];
      HandleRowClick(
        state.majorAnswerData.tableData.length > 0
          ? state.majorAnswerData.tableData[0]
          : {},
      );
    } else {
      state.majorAnswerData.tableData = [];
    }
  });
};

// 点击某行学生某题作答情况
const HandleRowClick = (row: any) => {
  console.log("row", row);
  if (row?.studentRegistrationCode) {
    //答题卡
    const question =
      state.problemAnalysisData.questionList[
        state.problemAnalysisData.questionListIndex
      ];
    state.paperInfos = {
      examPaperId: analysisStore.filterObject.subjectId, //考试科目id
      platformNumber: row.studentRegistrationCode, //学籍号平台号
      questionId: question.questionId, //题目id
    };
    state.majorAnswerData.rowIndex = state.majorAnswerData.tableData.findIndex(
      (item: any) => item.studentRegistrationCode == row?.studentRegistrationCode,
    );
  } else {
    state.paperInfos = {};
  }
};

// 获取项目分析表
const GetMajorTableData = () => {
  state.majorTableData.tableKey += 1;
  state.majorTableData.headerData = state.problemAnalysisData.headerList;
  state.majorTableData.changeHeaderData =
    state.problemAnalysisData.changeHeaderList;
  state.majorTableData.childHeaderData =
    state.problemAnalysisData.childHeaderList;
  const headerPropData = state.problemAnalysisData.headerList.map(
    (item: any) => item.prop,
  ); //表头字段名
  const childHeaderPropData = state.problemAnalysisData.childHeaderList.map(
    (item: any) => item.prop,
  ); //动态表头字段名
  let allTableData: any[] = [];
  const allList = state.problemAnalysisData.questionTableList;
  allList.forEach((item: any) => {
    let itemObj: any = {
      questionId: item?.questionId || "",
      knowledgeId: item?.knowledgeId || "",
    };
    const classList = item.classList;
    headerPropData.forEach((title: any) => {
      itemObj[title] = Array.isArray(item[title])
        ? item[title].join("、")
        : item[title];
    });

    classList.forEach((el: any) => {
      if (
        el.questionStats?.headDataBOList &&
        el.questionStats.headDataBOList.length > 0
      ) {
        el.questionStats.headDataBOList.forEach((bo: any) => {
          el.questionStats[`${bo.name}Rate`] = bo.rate;
          el.questionStats[`${bo.name}StudentNumber`] = bo.studentNumber;
        });
      } else {
        el.questionStats = [];
      }
      childHeaderPropData.forEach((field: any) => {
        itemObj[`${el.groupId}_${field}`] = el.questionStats[field];
      });
    });
    allTableData.push(itemObj);
  });
  state.majorTableData.total = allTableData.length; //总条数
  state.majorTableData.allTableData = allTableData;
  GetPageMajorTableData();
  //重置表格滚动条位置
  ResetTableScroll(); //重置表格滚动条位置
};

//重置表格滚动条位置
const ResetTableScroll = () => {
  nextTick(() => {
    if (majorTable.value) {
      const tableBody = majorTable.value.$el.querySelector(
        ".el-table__body-wrapper",
      );
      if (tableBody) {
        tableBody.scrollTop = 0; //清除纵向滚动条位置
        tableBody.scrollLeft = 0; // 清除横向滚动条位置
      }
    }
  });
};

// 分页获取分析表
const GetPageMajorTableData = () => {
  const start =
    (state.majorTableData.currentPage - 1) * state.majorTableData.pageSize;
  const end = start + state.majorTableData.pageSize;
  state.majorTableData.tableData = state.majorTableData.allTableData.slice(
    start,
    end,
  );
};

//设置表头字段显示隐藏
const SetEnterHeaderData = (data: any) => {
  if (data.static && data.static.length > 0) {
    state.problemAnalysisData.headerList = [...data.static];
  }
  if (data.dynamisc && data.dynamisc.length > 0) {
    state.problemAnalysisData.changeHeaderList = [...data.dynamisc];
  }
  if (data.child && data.child.length > 0) {
    state.problemAnalysisData.childHeaderList = [...data.child];
  }
  GetMajorTableData();
};

// 人员弹框
const OpenStudentDialog = (childHeader: any, parent: any, row: any) => {
  if (
    (childHeader.prop.indexOf("Count") > -1 ||
      childHeader.prop.indexOf("Number") > -1) &&
    row?.[`${parent.prop}_${childHeader.prop}`] > 0
  ) {
    state.dialogData.showDialog = true;
    state.dialogData.title = childHeader.label;
    state.dialogData.tableTitle = parent.label;
    state.dialogData.fiveRateName = "";
    if (
      childHeader.prop == "topStudentNumber" ||
      childHeader.prop == "excellentStudentNumber" ||
      childHeader.prop == "goodStudentNumber" ||
      childHeader.prop == "passStudentNumber" ||
      childHeader.prop == "lowStudentNumber"
    ) {
      state.dialogData.fiveRateName = childHeader.label.replace(/人数/g, ""); //当前选择的五率的名称
    }
    state.dialogData.selectSubjectName = analysisStore.filterObject.subjectName; //当前选择的科目名称
    if (parent.prop == "0") {
      state.dialogData.selectSchoolLevel = 0; //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      state.dialogData.selectSchoolName = parent.label; //当前选择的学校名称：联校 组合学校 单校名称
      state.dialogData.selectClassLevel = 0; //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      state.dialogData.selectClassName = "年级"; //当前选择的班级名称：年级 组合班级 单班
    } else if (parent.prop.indexOf("school_group") > -1) {
      state.dialogData.selectSchoolLevel = 1; //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      state.dialogData.selectSchoolName = parent.label; //当前选择的学校名称：联校 组合学校 单校名称
      state.dialogData.selectClassLevel = 0; //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      state.dialogData.selectClassName = "年级"; //当前选择的班级名称：年级 组合班级 单班
    } else if (
      parent.prop.indexOf("school") > -1 &&
      parent.prop.indexOf("school_group") == -1
    ) {
      state.dialogData.selectSchoolLevel = 2; //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      state.dialogData.selectSchoolName = parent.label; //当前选择的学校名称：联校 组合学校 单校名称
      state.dialogData.selectClassLevel = 0; //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      state.dialogData.selectClassName = "年级"; //当前选择的班级名称：年级 组合班级 单班
    } else if (parent.prop.indexOf("class_group") > -1) {
      state.dialogData.selectSchoolLevel = 2; //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      state.dialogData.selectSchoolName = analysisStore.filterObject.schoolName; //当前选择的学校名称：联校 组合学校 单校名称
      state.dialogData.selectClassLevel = 1; //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      state.dialogData.selectClassName = parent.label; //当前选择的班级名称：年级 组合班级 单班
    } else {
      state.dialogData.selectSchoolLevel = 2; //当前选择的学校级别：0-联考 1-学校分组 2-具体学校
      state.dialogData.selectSchoolName = analysisStore.filterObject.schoolName; //当前选择的学校名称：联校 组合学校 单校名称
      state.dialogData.selectClassLevel = 2; //当前选择的班级级别：0-年级 1-组合班级 2-具体班级
      state.dialogData.selectClassName = parent.label; //当前选择的班级名称：年级 组合班级 单班
    }
    state.dialogData.questionId = row.questionId; //试题ID
    state.dialogData.isPaper = row.questionName == "全卷" ? 1 : 0; //是否为全卷0-非1-是全卷
    if (childHeader.prop == "fullMarkCount") {
      state.dialogData.quesScoreType = 0; //选择的类型0-满分人数 1-0分人数 3-优秀率、良好率等
    } else if (childHeader.prop == "zeroMarkCount") {
      state.dialogData.quesScoreType = 1; //选择的类型0-满分人数 1-0分人数 3-优秀率、良好率等
    } else {
      state.dialogData.quesScoreType = 3; //选择的类型0-满分人数 1-0分人数 3-优秀率、良好率等
    }
    state.dialogData.knowledgeId = row.knowledgeId; //如果选择的是知识点，则需要返回知识点ID
    state.dialogData.questionGroupName = row?.groupName || ""; //试题分组的名称
    state.dialogData.groupTitle = state.groupTitle.replace(/分析/g, "");
  }
};

// 关闭人员弹框
const CloseDialog = (val: any) => {
  state.dialogData.showDialog = val;
};

// 分页获取分析表
const ChangeCurrentPage = (val: any) => {
  state.majorTableData.currentPage = val;
  GetMajorTableData(); //加载分析表格数据
};

const ChangePageSize = (val: number) => {
  state.majorTableData.pageSize = val;
  state.majorTableData.currentPage = 1;
  GetMajorTableData(); //加载分析表格数据
};

// 导出Excel
const ExportExcel = () => {
  // 1. 设置加载状态
  reportModuleRef.value?.SetExportLoading?.(true);
  // 2. 参数
  const examName = getExamName.value;
  let params: any = {
    fileName: `${GetExcelFileName(examName, analysisStore.filterObject, state.groupTitle)}`,
    examName: examName, //考试名称
    sheetName: state.groupTitle, //sheet页名称
  };
  const staticHeaderData = state.problemAnalysisData.headerList.filter(
    (item: any) => item.display,
  );
  const childHeaderData = state.problemAnalysisData.childHeaderList.filter(
    (item: any) => item.display,
  );
  const dynamicsHeaderData = state.problemAnalysisData.changeHeaderList.filter(
    (item: any) => item.display,
  );
  params.staticHeaderData = staticHeaderData;
  params.childHeaderData = childHeaderData;
  params.dynamicsHeaderData = dynamicsHeaderData;
  let dataList: any[] = [];
  state.majorTableData.allTableData.forEach((item: any) => {
    const rowData: any[] = [];
    staticHeaderData.forEach((header: any) => {
      rowData.push(item?.[header.prop] || "-");
    });
    dynamicsHeaderData.forEach((parent: any) => {
      childHeaderData.forEach((child: any) => {
        const itemValue = item[`${parent.prop}_${child.prop}`];
        if (child.prop.indexOf("Rate") > -1) {
          const rate = itemValue ? `${itemValue}%` : "-";
          rowData.push(rate);
        } else {
          rowData.push(itemValue ?? "-");
        }
      });
    });
    dataList.push(rowData);
  });
  params.dataList = dataList;
  // 3. 调用通用下载方法，并在完成后重置加载状态
  downloadExcel(publicExport, params).finally(() => {
    reportModuleRef.value?.SetExportLoading?.(false);
  });
};

//设置表头样式
const HeaderRowStyle = ({ row, rowIndex }: any) => {
  if (rowIndex === 1) {
    return {
      display: "none",
    };
  }
};

const TableRowClassName = ({ row, rowIndex }: any) => {
  if (rowIndex === state.majorAnswerData.rowIndex) {
    return "current-row";
  }
  return "";
};

//查看答题卡
const handleClick = (row: any) => {
  state.paperInfo = {
    examPaperId: analysisStore.filterObject.subjectId, //考试科目id
    platformNumber: row.studentRegistrationCode, //学籍号平台号
    questionId: "", //题目id
  };
  state.paperTitle = `${getExamName.value}-${analysisStore.filterObject.subjectName}-${row.className}-${row.studentUserName}`; //学生姓名
  state.showStudentPaperDialog = true;
};

//更新弹窗状态
const UpdateModelValue = (val: boolean) => {
  state.showStudentPaperDialog = val;
};

//批量查看小题答题卡
const VisibleQuestionCard = () => {
  state.showQuestionCardDialog = true;
};

//关闭弹框
const CloseQuestionCardDialog = () => {
  state.showQuestionCardDialog = false;
};

const pageInit = () => {
  state.problemAnalysisData.chartTypeList =
    analysisStore.filterObject.classLevel != 2
      ? [
          { label: "组合图", value: "line_bar_chart" },
          { label: "柱状图", value: "vertical_bar" },
          { label: "雷达图", value: "radar_chart" },
        ]
      : [
          { label: "柱状图", value: "vertical_bar" },
          { label: "雷达图", value: "radar_chart" },
        ];
  state.problemAnalysisData.chartType =
    analysisStore.filterObject.classLevel != 2
      ? "line_bar_chart"
      : "vertical_bar";
  state.questionScoreStatsData.chartType = "vertical_bar";
  state.majorTableData.currentPage = 1;
  state.majorAnswerData.rowIndex = 0;
  GetQuestionAnalysisData(); //获取小题分析数据
};

// 监听筛选条件
watch(
  () => analysisStore.filterObject,
  async () => {
    pageInit();
  },
  { deep: true },
);

onMounted(() => {
  pageInit();
});
</script>

<style lang="scss" scoped>
.content_left {
  &.answer {
    width: calc(100% - 220px);
  }

  &.paper_card {
    width: calc(100% - 480px);
    height: 400px;
    background-color: #f5f5f5;
    border-radius: 10px;
  }
}

.content_right {
  height: 100%;
  display: flex;
  align-items: center;
  margin: auto 0 auto auto;
  padding-bottom: 0;

  &.answer {
    width: 200px;
  }

  &.paper_card {
    width: 460px;
  }

  :deep(.el-table) {
    border-left: 0px;
    border-right: 0px;

    .el-table__cell {
      height: 44px;
    }
  }
}
</style>