bigDataStudent/src/views/analysisReport/studentPage/downloadPdf/studentReport.vue

<template>
    <!-- 学生报告 -->
    <!-- v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.5)" :element-loading-text="loadingText" -->
    <BookFlip :book-pages="bookPageImages" bookBg="student" :requestLoading="loading" :openLoading="openLoading" :coverTitle="`${stuClasName}${studentName}分析报告册`" subtitle="供参考学生使用" ref="bookFlipBox" @OpenBookImages="OpenBookImages" @PdfLoadEnd="PdfLoadEnd">
        <!-- 自定义每页内容 -->
        <template #default="slotProps">
            <template v-if="slotProps.type == 'web_mode'">
                <div class="area_page" style="position: absolute;top: -9999999px;z-index: -10;height: auto;min-height: 1285px;">
                    <!-- 用于获取div的高度 默认隐藏不显示 -->
                    <div class="area_title" ref="areaReportTitle">
                        <p>{{ reportTitle }}</p>
                        <p>{{ stuClasName }}{{ studentName }}分析报告</p>
                    </div>
                    <div class="area_module" ref="standardScoreChartDes">
                        <div class="area_module_describe" v-if="multiSubjectData.maxSubject || multiSubjectData.minSubject" style="margin-top: 0;">
                            说明：从标准分情况来看，这次考试<template v-if="multiSubjectData.maxSubject"><span style="color: #3ba272">{{ multiSubjectData.maxSubject }}</span>表现突出，请继续保持</template><template v-if="multiSubjectData.minSubject">；<span style="color: #ee6666">{{ multiSubjectData.minSubject }}</span>标准分明显低于其他学科，可能会对总体排名造成影响，可结合错题梳理核心知识点，精准定位薄弱环节，制定针对性的提升计划，以实现各科均衡发展，进一步巩固整体成绩</template>。
                        </div>
                    </div>
                    <div class="area_module" ref="multiSuggestionModule">
                        <div class="area_module_title">总结建议</div>
                        <div class="area_module_describe" style="margin-top: 0;" v-html="suggestionHtml"></div>
                        <div class="pring_jg"></div>
                    </div>
                    <template v-for="(subject,subKey) in multiSubjectData.singleSubject">
                        <div class="area_module" :ref="`singleSubjectSuggestion_${subKey}`" v-if="singleSubjectData?.[subKey]?.suggestionHtml">
                            <div class="area_module_title">总结建议</div>
                            <div class="area_module_describe" style="margin-top: 0;" v-html="singleSubjectData?.[subKey]?.suggestionHtml"></div>
                            <div class="pring_jg"></div>
                        </div>
                    </template>
                    <!-- 知识点分层 -->
                    <template v-for="know in knowLedgeLayeringData">
                        <div class="area_module" :ref="`knowLedgeLayering_${know.subjectCode}`">
                            <div class="area_module_title">{{know.groupName}}分层分析</div>
                            <div class="area_module_table">
                                <ul class="student_know_paper">
                                    <li>
                                        <div class="li_left">
                                            <span>满分区</span>
                                            <span>（得满分的知识点）</span>
                                        </div>
                                        <div class="li_know">{{ know.knowLedgeLayering.fullScore }}{{ know.knowLedgeLayering.fullScore ? '。':'' }}</div>
                                    </li>
                                    <li>
                                        <div class="li_left">
                                            <span>突破升级区</span>
                                            <span>（得分率高于同层次，但低于上一层次平均水平的知识点）</span>
                                        </div>
                                        <div class="li_know">{{ know.knowLedgeLayering.breakThrough }}{{ know.knowLedgeLayering.breakThrough ? '。':'' }}</div>
                                    </li>
                                    <li>
                                        <div class="li_left">
                                            <span>就近发展区</span>
                                            <span>（得分率低于同层次平均水平的知识点）</span>
                                        </div>
                                        <div class="li_know">{{ know.knowLedgeLayering.develop }}{{ know.knowLedgeLayering.develop ? '。':'' }}</div>
                                    </li>
                                </ul>
                            </div>
                            <div class="pring_jg"></div>
                        </div>
                    </template>
                </div>
                <div class="area_page web_area_page" v-for="page in pageCount" :key="`${pageKey}_${page}`">
                    <template v-if="page == 1">
                        <div class="area_title">
                            <p>{{ reportTitle }}</p>
                            <p>{{ stuClasName }}{{ studentName }}分析报告</p>
                        </div>
                        <div class="area_header bg_purple">
                            <img :src="headerLeftIcon" class="header_icon_left" />
                            总分成绩分析
                            <img :src="headerRightIcon" class="header_icon_right" />
                        </div>
                        <div class="pring_jg"></div>
                    </template>
                    <template v-for="(tableData,index) in multiSubjectData.tableList">
                        <template v-for="(itemTable,itemIndex) in tableData">
                            <div class="area_module" v-if="multiSubjectData.tablePagesNum[index][itemIndex] == page && itemTable.length > 0">
                                <div class="area_module_title">成绩单</div>
                                <div class="area_module_table">
                                    <el-table border :data="itemTable" stripe align="center">
                                        <el-table-column v-for="header in (multiSubjectData?.staticHeaderData ?? [])" align="center" :label="header.name" min-width="100" show-overflow-tooltip>
                                            <template slot-scope="scope">
                                                {{ scope.row?.[header.prop] || '-' }}
                                            </template>
                                        </el-table-column> 
                                        <el-table-column v-for="header in (multiSubjectData?.headerList?.[index]?.[itemIndex] ?? [])" align="center" :label="header.name" min-width="100" show-overflow-tooltip>
                                            <template slot-scope="scope">
                                                <template v-if="header.prop == 'score'">
                                                    <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                                                    * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                                                    * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                                                    <template v-if="multiSubjectData.studentOpenness == 3 || multiSubjectData.studentOpenness == 4">
                                                        <template v-if="!isNaN(scope.row?.[header.prop])">
                                                            <img class="right_or_wrong_icon" v-if="scope.row.fullScore == scope.row?.[header.prop]" src="@/assets/report/score_yes_icon.webp" />
                                                            <img class="right_or_wrong_icon" v-else-if="scope.row?.[header.prop] == 0" src="@/assets/report/score_no_icon.webp" />
                                                            <img class="right_or_wrong_icon" v-else src="@/assets/report/score_dimidiate_icon.webp" />
                                                        </template>
                                                        <template v-else>{{ scope.row?.[header.prop] ?? '-' }}</template>
                                                    </template>
                                                    <template v-else>{{ scope.row?.[header.prop] ?? '-' }}</template>
                                                </template>
                                                <template v-else>{{ scope.row?.[header.prop] ?? '-' }}</template>
                                                </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <template v-if="multiSubjectData.tablePagesNum[index][itemIndex] == page && itemTable.length > 0">
                                <div class="pring_jg" style="height: 29px;border-bottom: 1px solid #F3F3F3;box-sizing: border-box;"></div>
                                <div class="pring_jg"></div>
                            </template>
                        </template>
                    </template>
                    <div class="area_module" v-if="multiSubjectData.chartPagesNum==page && ((multiSubjectData.standardScoreAnalysisStatus === 0 && schoolType == 2) || schoolType == 1) && multiSubjectData.datay.length>0">
                        <div class="area_module_title">标准分分析图</div>
                        <div class="area_module_chart">
                            <DifferenceChart v-if="multiSubjectData.datay.length" :datax="multiSubjectData.datax" unit="" :datay="multiSubjectData.datay" :isClick="false" :rate="0" :gridLeft="0" :gridRight="0" :gridTop="20" :fontSize="14" :fontColor="'#333333'" :showDataZoom="false" style="height: 270px !important;min-height: 270px !important;"></DifferenceChart>
                        </div>
                        <div class="area_module_describe" v-if="multiSubjectData.maxSubject || multiSubjectData.minSubject">
                            说明：从标准分情况来看，这次考试<template v-if="multiSubjectData.maxSubject"><span style="color: #3ba272">{{ multiSubjectData.maxSubject }}</span>表现突出，请继续保持</template><template v-if="multiSubjectData.minSubject">；<span style="color: #ee6666">{{ multiSubjectData.minSubject }}</span>标准分明显低于其他学科，可能会对总体排名造成影响，可结合错题梳理核心知识点，精准定位薄弱环节，制定针对性的提升计划，以实现各科均衡发展，进一步巩固整体成绩</template>。
                        </div>
                        <div class="pring_jg"></div>
                    </div>
                    <!-- <div class="area_module" v-if="historyExamData.pageNum==page && historyExamData.chartData.length > 0">
                        <div class="area_module_title">历次标准分追踪分析图</div>
                        <div class="area_module_chart">
                            <LineChart v-if="historyExamData.datay.length>0" :datax="historyExamData.datax" :datay="historyExamData.datay" :title="historyExamData.title"
                                :extraText="false" :showBackground="false" :isShowLabel="true" labelColor="#333333" :legendList="historyExamData.legendList" :tooltipData="historyExamData.tooltipData" :gridLeft="0" :gridRight="0" :gridTop="25" :fontSize="14" :fontColor="'#333333'" :showCheckBox="false" reportHeight="270px" style="min-height:270px!important;">
                            </LineChart>
                        </div>
                        <div class="pring_jg"></div>
                    </div> -->
                    <div class="area_module" v-if="suggestionHtml && multiSuggestionPageNum == page">
                        <div class="area_module_title">总结建议</div>
                        <div class="area_module_describe" style="margin-top: 0;" v-html="suggestionHtml"></div>
                        <div class="pring_jg"></div>
                    </div>
                    <!-- 单科 -->
                    <template v-for="(subject,subKey) in multiSubjectData.singleSubject">
                        <template v-if="singleSubjectData?.[subKey]?.titlePageNum == page">
                            <div class="area_header bg_purple">
                                <img :src="headerLeftIcon" class="header_icon_left" />
                                {{subject.subjectName}}成绩分析
                                <img :src="headerRightIcon" class="header_icon_right" />
                            </div>
                            <div class="pring_jg"></div>
                        </template>
                        <!-- 成绩单 -->
                        <template v-for="(tableData,index) in (singleSubjectData?.[subKey]?.scrolTableList || [])">
                            <template v-for="(itemTable,itemIndex) in tableData">
                                <div class="area_module" v-if="singleSubjectData?.[subKey]?.scrolTablePagesNum?.[index]?.[itemIndex] == page && itemTable.length > 0">
                                    <div class="area_module_title">成绩单</div>
                                    <div class="area_module_table">
                                        <el-table border :data="itemTable" stripe align="center">
                                            <el-table-column v-for="header in (singleSubjectData?.[subKey]?.scrolHeaderList?.[index]?.[itemIndex] ?? [])" align="center" :label="header.name" min-width="100" show-overflow-tooltip>
                                                <template slot-scope="scope">
                                                    <template v-if="header.prop=='score'">
                                                        <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                                                        * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                                                        * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                                                        <template v-if="(scope.row.studentOpenness == 3 || scope.row.studentOpenness == 4) && scope.row?.score">
                                                            <template v-if="!isNaN(scope?.row?.score)">
                                                                <img class="right_or_wrong_icon" v-if="scope.row.fullScore == scope.row.score" src="@/assets/report/score_yes_icon.webp" />
                                                                <img class="right_or_wrong_icon" v-else-if="scope.row.score === 0" src="@/assets/report/score_no_icon.webp" />
                                                                <img class="right_or_wrong_icon" v-else src="@/assets/report/score_dimidiate_icon.webp" />
                                                            </template>
                                                            <template v-else>{{ scope.row.score }}</template>
                                                        </template>
                                                        <template v-else>{{ scope?.row?.[header.prop] ?? '-' }}</template>
                                                    </template>
                                                    <template v-else>{{ scope?.row?.[header.prop] ?? '-' }}</template>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                </div>
                                <template v-if="singleSubjectData?.[subKey]?.scrolTablePagesNum?.[index]?.[itemIndex] == page && itemTable.length > 0">
                                    <div class="pring_jg" style="height: 29px;border-bottom: 1px solid #F3F3F3;box-sizing: border-box;"></div>
                                    <div class="pring_jg"></div>
                                </template>
                            </template>
                        </template>
                        <!-- 小题分 大题 知识点  能力要素  自定义分组 -->
                        <template v-for="group in (singleSubjectData?.[subKey]?.groupQuestionData || [])">
                            <div class="area_module" v-if="group.chartPagesNum == page && group.datay.length > 0 && group.type!='smallQuestionData'">
                                <div class="area_module_title">{{group.groupName}}分析图</div>
                                <div class="area_module_chart" v-if="group.datay.length > 0">
                                    <BarChart v-if="group.type=='bigQuestionData'" :datax="group.datax" :datay="group.datay" unit="" typeName="" :showNuitY="false" :unit="'%'" :showTooltip="false" :isShowMarkLine="false" :gridLeft="0" :gridRight="0" :gridTop="20" :fontSize="14" :fontColor="'#333333'" :showDataZoom="false" style="height: 270px;"></BarChart>
                                    <RadarCharts v-else :showLegend="false" :reportHeight="`300px`" :showDataLabel="true" :showTooltip="false" :data="group.radarChartData" :unit="'%'" :legendList="[]" legendLeft="center" :showCheckBox="false" :openShowAllLegend="false" :showRadiusAxis="false" :fontSize="14" :fontColor="'#333333'" :style="{height: 'auto',minHeight:'100% !important'}"></RadarCharts>
                                </div>
                                <div class="pring_jg"></div>
                            </div>
                            <template v-for="(tableData,index) in group.tableList">
                                <template v-for="(itemTable,itemIndex) in tableData">
                                    <div class="area_module" v-if="group.tablePagesNum[index][itemIndex] == page && itemTable.length > 0">
                                        <div class="area_module_title">{{group.groupName}}分析表</div>
                                        <div class="area_module_table">
                                            <el-table border :data="itemTable" stripe align="center">
                                                <el-table-column v-for="header in (group?.staticHeader ?? [])" align="center" :label="header.name" :min-width="header.prop=='smallQuestionNames'?120:90" show-overflow-tooltip>
                                                    <template slot-scope="scope">
                                                        {{ scope.row[header.prop] || '-' }}
                                                    </template>
                                                </el-table-column>    
                                                <el-table-column v-for="header in (group?.headerList?.[index]?.[itemIndex] ?? [])" align="center" :label="header.name" :min-width="header.prop=='smallQuestionNames'?120:90" show-overflow-tooltip>
                                                    <template slot-scope="scope">
                                                        <template v-if="header.prop == 'score'">
                                                            <!-- * 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                                                            * 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                                                            * 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错 -->
                                                            <template v-if="group.studentOpenness == 2 || group.studentOpenness == 4 || group.studentOpenness == 6">
                                                                <template v-if="!isNaN(scope?.row?.score)">
                                                                    <img class="right_or_wrong_icon" v-if="scope.row.fullScore == scope.row.score" src="@/assets/report/score_yes_icon.webp" />
                                                                    <img class="right_or_wrong_icon" v-else-if="scope.row.score == 0" src="@/assets/report/score_no_icon.webp" />
                                                                    <img class="right_or_wrong_icon" v-else src="@/assets/report/score_dimidiate_icon.webp" />
                                                                </template>
                                                                <template v-else>{{ scope?.row?.score ?? '-' }}</template>
                                                            </template>
                                                            <template v-else>{{ scope.row.score || '-' }}</template>
                                                        </template>
                                                        <!-- 包含小题 -->
                                                        <template v-else-if="header.prop == 'smallQuestionNames' && scope?.row?.[header.prop] && Object.prototype.toString.call(scope.row[header.prop]) == '[object Array]'">
                                                            {{ scope.row[header.prop].join('、') }}
                                                        </template>
                                                        <template v-else-if="header.prop=='scoreRateStr'">
                                                            <template v-if="scope?.row?.scoreRate && !isNaN(scope?.row?.scoreRate)">
                                                                <span style="color:#EE6666;" v-if="Number(scope?.row?.scoreRate) < 60">{{ scope?.row?.[header.prop] }}</span>
                                                                <span style="color:#FAC858;" v-else-if="Number(scope?.row?.scoreRate) >= 60 && Number(scope?.row?.scoreRate) < 80">{{ scope?.row?.[header.prop] }}</span>
                                                                <span style="color:#3BA272;" v-else-if="Number(scope?.row?.scoreRate) >= 80 && Number(scope?.row?.scoreRate) <= 100">{{ scope?.row?.[header.prop] }}</span>
                                                                <span v-else>{{ scope?.row?.[header.prop] ?? '-'}}</span>
                                                            </template>
                                                            <template v-else>{{ scope?.row?.[header.prop] ?? '-'}}</template>
                                                        </template>
                                                        <template v-else-if="header.prop == 'difficultyName'">
                                                            <span :class="GetDifficultyClass(scope.row[header.prop])"></span>
                                                            <span>{{ GetDifficultyName(scope.row[header.prop]) }}</span>
                                                        </template>
                                                        <template v-else>{{ scope.row[header.prop] || '-' }}</template>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <template v-if="group.tablePagesNum[index][itemIndex] == page && itemTable.length > 0">
                                        <div class="pring_jg" style="height: 29px;border-bottom: 1px solid #F3F3F3;box-sizing: border-box;"></div>
                                        <div class="pring_jg"></div>
                                    </template>
                                </template>
                            </template>
                            <div class="area_module" v-if="group.type=='knowledgePointQuestionData' && group?.knowLedgeLayering && page == knowLedgeLayeringPageNum[subKey]">
                                <div class="area_module_title">{{group.groupName}}分层分析</div>
                                <div class="area_module_table">
                                    <ul class="student_know_paper">
                                        <li>
                                            <div class="li_left">
                                                <span>满分区</span>
                                                <span>（得满分的知识点）</span>
                                            </div>
                                            <div class="li_know">{{ group.knowLedgeLayering.fullScore }}{{ group.knowLedgeLayering.fullScore ? '。':'' }}</div>
                                        </li>
                                        <li>
                                            <div class="li_left">
                                                <span>突破升级区</span>
                                                <span>（得分率高于同层次，但低于上一层次平均水平的知识点）</span>
                                            </div>
                                            <div class="li_know">{{ group.knowLedgeLayering.breakThrough }}{{ group.knowLedgeLayering.breakThrough ? '。':'' }}</div>
                                        </li>
                                        <li>
                                            <div class="li_left">
                                                <span>就近发展区</span>
                                                <span>（得分率低于同层次平均水平的知识点）</span>
                                            </div>
                                            <div class="li_know">{{ group.knowLedgeLayering.develop }}{{ group.knowLedgeLayering.develop ? '。':'' }}</div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="pring_jg"></div>
                            </div>
                        </template>
                        <!-- 历次 -->
                        <!-- <div class="area_module" v-if="singleSubjectData?.[subKey]?.historyExamData?.pageNum==page && singleSubjectData[subKey].historyExamData.chartData.length > 0">
                            <div class="area_module_title">历次标准分追踪分析图</div>
                            <div class="area_module_chart">
                                <LineChart v-if="singleSubjectData?.[subKey]?.historyExamData?.datay.length>0" :datax="singleSubjectData[subKey].historyExamData.datax" :datay="singleSubjectData[subKey].historyExamData.datay" :title="singleSubjectData[subKey].historyExamData.title"
                                    :extraText="false" :showBackground="false" :isShowLabel="true" labelColor="#333333" :legendList="singleSubjectData[subKey].historyExamData.legendList" :tooltipData="singleSubjectData[subKey].historyExamData.tooltipData" :gridLeft="0" :gridRight="0" :gridTop="25" :fontSize="14" :fontColor="'#333333'" :showCheckBox="false" reportHeight="270px" style="min-height:270px!important;">
                                </LineChart>
                            </div>
                            <div class="pring_jg"></div>
                        </div> -->
                        <div class="area_module" v-if="singleSubjectData?.[subKey]?.suggestionHtml && singleSubjectData?.[subKey]?.suggestionPageNum == page">
                            <div class="area_module_title">总结建议</div>
                            <div class="area_module_describe" style="margin-top: 0;" v-html="singleSubjectData?.[subKey]?.suggestionHtml"></div>
                            <div class="pring_jg"></div>
                        </div>
                        <!-- 答题卡 -->
                        <template v-for="(paperItem,paperIndex) in (singleSubjectData?.[subKey]?.paperImageList || [])">
                            <div class="area_module area_module_img" v-if="singleSubjectData?.[subKey]?.paperImagePageNum?.[paperIndex] == page">
                                <PaperImage v-if="paperItem.picUrl" :paperImgUrl="paperItem.picUrl" :usedCardType="singleSubjectData?.[subKey]?.usedCardType" :drawData="paperItem.questionVOS || []" :isDrag="false" :isWheel="false" :isShowContextMenu="false" rotateDeg="-90"></PaperImage>
                            </div>
                        </template>
                    </template>
                    <div class="area_page_number">第 {{ page }} 页</div>
                </div>
            </template>
            <template v-else>
                <!-- 生成翻书效果 -->
                <div class="gradient"></div>
                <img :src="slotProps.content" style="width: 100%;height: 100%;" />
            </template>
        </template>
    </BookFlip>
</template>

<script>
import BookFlip from './components/bookFlip.vue';
import BarChart from "@/views/analysisReport/components/dCharts/barChart"; //单柱状图组件
import RadarCharts from "@/views/analysisReport/components/dCharts/radarCharts";//G10-G1雷达图
import DifferenceChart from "@/views/analysisReport/components/dCharts/differenceChart"; //率差图
import LineChart from "@/views/analysisReport/components/dCharts/lineChart";//折线图
import PaperImage from '@/components/PaperImage.vue';//答题卡
import { mapGetters } from "vuex";
import {getApiName} from '@/utils/common';
// import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";
export default {
    components: { BookFlip, BarChart, RadarCharts, DifferenceChart, LineChart,PaperImage},
    data() {
        return {
            pageKey:1,
            headerLeftIcon: require("@/assets/report/header_left_student.webp"),
            headerRightIcon: require("@/assets/report/header_right_student.webp"),
            // 书页数据（长度为4，偶数页）
            colors: this.$global.getScorePerformanceAnalysis(),//按顺序显示的20个颜色值
            pageCount:15,//页数 第一页不处理
            printPageHeight:1245,//A4纸高度 去掉边距 40
            chartHeight:270,//echart 高度
            moduleHeightData:[],//每个模块的高度
            modulePageData:[],//每个模块对应的页码
            stuClasName:'',
            multiSubjectData: {
                tablePagesNum:[],
                tableList:[],
                headerList:[],
                staticHeaderData:[],
                singleSubject:[],
                standardScoreAnalysisStatus: 0,
                studentOpenness: '', //学生信息
                datax: [], //图数据
                datay: [], //图数据
                tooltipData: [],
                maxSubject: '',
                minSubject: ''
            },//总分成绩分析
            historyExamData: {
                pageNum:'',
                chartData: [],
                datax: [],
                datay: [],
                title: [],
                legendList: [],
                tooltipData:[]
            }, //总分历次信息(联考)
            suggestionHtml: null,//总结建议
            multiSuggestionPageNum:'',//总分 总结建议
            singleSubjectData:[],//单科数据
            knowLedgeLayeringData:[],//知识点分层
            knowLedgeLayeringPageNum:[],//知识点分层分页
            bookPageImages:[],//生成的图片地址
            // showReportLoading:false,
            targetProgress:0,
            timer:null,
            loading:true,
            loadingText:'拼命加载中(1%)……',
            openLoading:false,
        };
    },
    computed: {
        reportTitle() {
            return this?.$store?.state?.report?.examSelectItem?.examName ?? '';
        },
        reportParam() {
            return {
                examLevel: this.$store.state.report.examLevel, // 任务等级联考还是单校
                // schoolId: this.$store.state.report.studentReportFilterObject.schoolId, // 学校id
                // contrastExamIds: this.$store.state.report.lastExamSelectIds, //多次考试任务对比ID，不包含当前任务ID
                // examId: this.$store.state.report.examId, // 当前考试ID
                // subjectCode: this.$store.state.report.studentReportFilterObject.subjectCode, //科目code
                // subjectGroupType: this.$store.state.report.filterObject.subjectGroupType, // 科目是否为组合
                // isTotal: this.$store.state.report.filterObject.isTotal, //是否为总分科目 1为总分 0为非总分
                // classIdCode: this.$store.state.report.studentReportFilterObject.classIdCode, // 班级idcode
                // classGroupName: this.$store.state.report.studentReportFilterObject.classGroupName, // 班级名称
                // registrationName: this.$store.state.report.studentReportFilterObject.registrationName, // 学籍名称
                // studentName:this.$store.state.report.studentReportFilterObject.studentName, //学生名称
                // registrationCode:this.$store.state.report.studentReportFilterObject.registrationCode //学生学籍号

                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为非总分
            }
        },//分析报告公共参数变量
        ...mapGetters(["userInfo"]),
        studentName() {
            return this.userInfo.userName;
        },
        schoolType() {
            return sessionStorage.getItem('schoolType') //1:单校 2:联校
        },
    },
    watch: {
        // 监听 filterObject 对象变化（注意要开启深度监听）
        async reportParam() {
            // clearTimeout(this.timer); // 清除定时器，停止重复执行
            // this.timer = null;
            this.PageInit();//初始加载数据
        },//监听筛选数据变化
    },
    async created() {
        this.setHtmlFontSize();
        // 监听窗口缩放，实时更新
        window.addEventListener('resize', this.setHtmlFontSize);
        // 可选：监听页面加载完成后再设置一次（避免初始渲染问题）
        window.addEventListener('load', this.setHtmlFontSize);
        this.PageInit();//页面初始加载数据
    },
    destroyed(){
        // 根组件卸载时销毁监听
        window.removeEventListener('resize', this.setHtmlFontSize);
        document.documentElement.style.fontSize = ''; 
    },
    methods: {
        //初始化设置
        setHtmlFontSize(){
            // 设计稿宽度（根据实际设计稿调整，例如 1920px）
            const designWidth = 1920;
            // 设计稿中 1rem 对应的 px 值（例如 16px）
            const baseFontSize = 16;

            // 获取当前浏览器窗口宽度
            const windowWidth = document.documentElement.clientWidth || window.innerWidth;

            // 计算当前窗口下的 html font-size（按设计稿比例缩放）
            const htmlFontSize = (windowWidth / designWidth) * baseFontSize;
            // 应用到 html 元素
            document.documentElement.style.fontSize = `${htmlFontSize}px`;
        },
        async PageInit() {
            // let currentProgress = 1;
            // this.loadingText = `拼命加载中(1%)……`;
            // this.timer = setInterval(() => {
            //     currentProgress++;
            //     this.loadingText = `拼命加载中(${currentProgress}%)……`;
            // }, 500);
            this.loading = true;
            this.openLoading = false;
            this.bookPageImages = [];
            // this.targetProgress = 1;
            // this.showReportLoading = true;
            this.pageCount = 15;
            this.$nextTick(()=>{
                const titleHeight = this.$refs?.areaReportTitle?.offsetHeight || 0;
                const reportTitleHeight = titleHeight + 82;
                this.moduleHeightData = [reportTitleHeight];//每个模块的高度 初始标题高度
            })
            this.modulePageData = [1];
            this.multiSuggestionPageNum = '';//总分 总结建议
            this.singleSubjectData = [];//单科数据
            this.knowLedgeLayeringData = [];//知识点分层
            this.knowLedgeLayeringPageNum = [];//知识点分层分页
            this.pageKey += 1;
            //多科成绩总览 科目标准分分析
            await this.QueryMultiSubjectData();
            //学生端查询总分，多科历次信息(联考)
            // await this.QueryHistoryExamData();
            // 学生端查询总分，多科总结建议信息(联考)
            await this.QuerySuggestionData();
            let index = 0;
            for (const element of this.multiSubjectData.singleSubject){
                //单科每个模块标题分页
                this.singleSubjectData.push({
                    titlePageNum:this.SingleChartPage(82),
                    scrolTablePagesNum:[],//成绩单
                    scrolTableList:[],
                    scrolHeaderList:[],
                    groupQuestionData:[],//小题分组、大题分组、知识点、自定义分组
                    historyExamData:{
                        pageNum:'',
                        chartData: [],
                        datax: [],
                        datay: [],
                        title: [],
                        legendList: [],
                        tooltipData:[]
                    },
                    suggestionPageNum:'',//总结建议分页
                    suggestionHtml: '',//总结建议
                    paperImageList:[],//答题卡
                    paperImagePageNum:[],//答题卡页码
                })
                await this.QueryOneSubjectData(element.subjectCode,index);
                await this.QueryOneSubjectSmallQuestionData(element.subjectCode,index);
                await this.QueryOneSubjectGroupQuestionData(element.subjectCode,index);
                await this.QueryOneSubjectCustomGroupQuestion(element.subjectCode,index);
                //学生端查询单科-历次查询(联考)
                // await this.QueryOneSubjectHistoryExamData(element.subjectCode,index);
                await this.QueryOneSubjectSuggestionData(element.subjectCode,index);
                await this.FindStudentCard(element.subjectCode,index);
                index++; // 每次循环后索引+1
            }
            this.pageCount = this.modulePageData.length > 0 ? Math.max(...this.modulePageData) : 1;
            this.loading = false;
            this.$emit('isPdfDataLoadEnd');//是否显示下载pdf按钮
            console.log(this.pageCount,this.modulePageData,this.moduleHeightData,777777)
            // this.$nextTick(()=>{
            //     setTimeout(()=>{
            //         // clearTimeout(this.timer); // 清除定时器，停止重复执行
            //         // this.GetPageImages(currentProgress);
            //         this.GetPageImages();
            //     },2000)
            // })
        },
        //下载预览图片
        OpenBookImages(){
            if(this.bookPageImages.length){
                this.$refs.bookFlipBox.showFullScreen()
            }else{
                this.openLoading = true;
                this.$nextTick(()=>{
                    setTimeout(()=>{
                        this.GetPageImages();
                    },2000)
                })
            }
        },
        //获取图片
        async GetPageImages(){
            //获取所有的area_page 元素
            const elements = document.querySelectorAll(".web_mode .web_area_page");
            // const stepLens = elements?.length || 1;
            // const remainingProgress = 100 - progress;//剩余进度
            // const perStepProgress = Math.floor(remainingProgress / stepLens) || 1; // 每次增加的进度 向下取整
            // const pdf = new jsPDF("p", "pt", "a4"); // 'p'表示纵向，'a4'表示A4纸张尺寸
            // const pdfWidth = pdf.internal.pageSize.getWidth(); //获取pdf的宽度
            // const pdfHeight = pdf.internal.pageSize.getHeight(); //获取pdf的高度
            // let yPos = 0; //当前图像在pdf页面上的垂直位置的变量

            let i = 1;
            // let currentProgress = progress;
            for (const element of elements) {
                await html2canvas(element, {
                    scale: 2, // 增加缩放比例
                    useCORS: true, // 允许跨域
                    logging: false, // 是否打印调试日志（开发时开启，生产关闭）
                    letterRendering: true, // 文字抗锯齿 启用字母渲染
                }).then(async (canvas) => {
                    // const imgData = canvas.toDataURL("image/png");
                    const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
                    const imgUrl = URL.createObjectURL(blob);
                    console.log(imgUrl,89999)
                    this.bookPageImages.push(imgUrl);
                    // currentProgress  = Math.min(Math.round((i / stepLens) * 100),100);
                    // currentProgress  = Math.min(progress + i * perStepProgress,100);
                    // this.targetProgress = currentProgress
                    // this.loadingText = `拼命加载中(${currentProgress}%)……`;


                    // const imgProps = pdf.getImageProperties(imgData); // 获取图像的属性，包括宽度和高度
                    // const imgWidth = imgProps.width;
                    // const imgHeight = imgProps.height;
                    // const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight); //计算图片的缩放比例
                    // const adjustWidth = imgWidth * ratio;
                    // const adjustHeight = imgHeight * ratio;

                    // // 在添加每个图像之前，检查当前页面的高度是否足够。如果不够，则添加新页面，并将 yPos 重置为 0
                    // if (yPos + adjustHeight > pdfHeight) {
                    //     pdf.addPage();
                    //     yPos = 0;
                    // }

                    // // 将图像添加到pdf中
                    // pdf.addImage(imgData, "PNG", 0, yPos, adjustWidth, adjustHeight);
                    // yPos += adjustHeight;

                    // // 如果添加图像后剩余空间不足一页，则添加新页面
                    // if (yPos > pdfHeight) {
                    //     pdf.addPage();
                    //     yPos = 0;
                    // }


                    i++;
                })
            }
            // if(currentProgress < 100){
            //     this.loadingText = `拼命加载中(100%)……`;
            // }
            // 保存pdf文件
            // pdf.save("联校报告册.pdf");
            // this.showReportLoading = false;
            setTimeout(()=>{
                // this.loading = false;
                this.openLoading = false;
                this.$refs.bookFlipBox.showFullScreen()
            },500)
        },
        //总分成绩分析
        async QueryMultiSubjectData() {
            await this.$api.reportStudent[getApiName()].queryMultiSubjectData({
                ...this.reportParam,
                subjectGroupType: 1, // 科目是否为组合
                isTotal: 1, //是否为总分科目 1为总分 0为非总分
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const titleData = res?.data?.titleData || [];
                    this.multiSubjectData.studentOpenness = res?.data?.studentOpenness ?? '';
                    const headerData = titleData.filter(item=>item.prop!='imgUrlList' && item.prop!='subjectName');
                    const staticHeaderData = titleData.filter(item=>item.prop=='subjectName');
                    const tableData = res?.data?.tableData || [];
                    this.stuClasName = tableData?.find(item=>item.subjectCode==0)?.className || '';
                    //表格分页
                    const pageTableData = this.TableRowAndColumnPage(headerData,tableData,7,1);//8列一个表
                    this.multiSubjectData.tablePagesNum = pageTableData.tablePagesNum;
                    this.multiSubjectData.tableList = pageTableData.tableList;
                    this.multiSubjectData.headerList = pageTableData.headerList;
                    this.multiSubjectData.staticHeaderData = staticHeaderData;//静态表头

                    //标准分分析图
                    this.multiSubjectData.datax = []
                    this.multiSubjectData.datay = []
                    this.multiSubjectData.tooltipData = []
                    this.multiSubjectData.standardScoreAnalysisStatus = res?.data?.standardScoreAnalysisStatus ?? 1;
                    //总分
                    const totalScore = tableData.filter(item => item.isTotal == 1)
                    //组合
                    const subjectGroup = tableData.filter(
                        item => item.isTotal == 0 && item.subjectGroupType == 1
                    )
                    //单科
                    const singleSubject = tableData.filter(
                        item => item.isTotal == 0 && item.subjectGroupType == 0
                    )
                    this.multiSubjectData.singleSubject = singleSubject;//单科
                    const chartData = [...totalScore, ...subjectGroup, ...singleSubject];
                    let datax = [],datay = [];
                    chartData.forEach(item => {
                        this.multiSubjectData.datax.push(item?.subjectName ?? '-')
                        this.multiSubjectData.datay.push(!item?.standardScore || item?.standardScore == '-' ? 0 : item?.standardScore)
                        if (item.isTotal == 0 && item.subjectGroupType == 0) {
                            datax.push(item?.subjectName ?? '')
                            datay.push(item?.standardScore ?? 0)
                        }
                    })
                    let maxSubject = [],minSubject = []
                    datay.forEach((item, k) => {
                        if (Number(item) > 0) {
                            maxSubject.push(datax[k])
                        }
                        if (Number(item) < 0) {
                            minSubject.push(datax[k])
                        }
                    })
                    this.multiSubjectData.maxSubject = maxSubject.join('、')
                    this.multiSubjectData.minSubject = minSubject.join('、')
                    //标准分分析图分页
                    this.$nextTick(()=>{
                        if((this.multiSubjectData.standardScoreAnalysisStatus === 0 && this.schoolType == 2) || this.schoolType == 1){
                            const desHeight = this.$refs?.standardScoreChartDes?.offsetHeight || 0;
                            const divHeight = 404 + desHeight;
                            this.multiSubjectData.chartPagesNum = this.SingleChartPage(this.multiSubjectData.datay.length > 0 ? divHeight : 0);
                        }else{
                            this.multiSubjectData.chartPagesNum = this.SingleChartPage(0);
                        }
                        // console.log(divHeight,desHeight,this.multiSubjectData.chartPagesNum,13322133)
                    })
                } else {
                    this.multiSubjectData.studentOpenness = '';
                    this.multiSubjectData.tablePagesNum = [];
                    this.multiSubjectData.tableList = [];
                    this.multiSubjectData.headerList = [];
                    this.multiSubjectData.singleSubject = [];
                    // 标准分分析
                    this.multiSubjectData.datax = []
                    this.multiSubjectData.datay = []
                    this.multiSubjectData.tooltipData = []
                    this.multiSubjectData.standardScoreAnalysisStatus = 1;
                    this.multiSubjectData.maxSubject = []
                    this.multiSubjectData.minSubject = []
                    this.multiSubjectData.chartPagesNum = '';//标准分分析图分页
                }
            })
        },
        //总分，多科历次信息
        async QueryHistoryExamData() {
            await this.$api.reportStudent[getApiName()].queryHistoryExamData({
                ...this.reportParam,
                subjectGroupType: 1, // 科目是否为组合
                isTotal: 1, //是否为总分科目 1为总分 0为非总分
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const detailData = (res.data?.detailData || []).reverse();
                    this.historyExamData.chartData = detailData;
                    const selectNames = res.data.selectNames || [];
                    const selectVal = selectNames?.[0]?.prop ?? '';
                    this.historyExamData.datax = [];
                    let datay = [],tooltipData = [];
                    detailData.forEach(item => {
                        this.historyExamData.datax.push(item.examName)
                        datay.push(item[selectVal])
                        tooltipData.push({
                            name: selectNames?.[0]?.name ?? '',
                            value: item[selectVal]
                        })
                    })
                    this.historyExamData.datay = [datay];
                    this.historyExamData.tooltipData = [tooltipData];
                    this.historyExamData.pageNum = this.SingleChartPage(this.historyExamData.chartData.length > 0 ? 363 : 0);
                } else {
                    this.historyExamData.chartData = [];
                    this.historyExamData.tooltipData = [];
                    this.historyExamData.datax = [];
                    this.historyExamData.datay = [];
                    this.historyExamData.pageNum = '';
                }
            })
        },
        // 学生端查询总分，多科总结建议信息(联考)
        async QuerySuggestionData() {
            await this.$api.reportStudent[getApiName()].querySuggestionData({
                ...this.reportParam,
                subjectGroupType: 1, // 科目是否为组合
                isTotal: 1, //是否为总分科目 1为总分 0为非总分
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const data = res.data;
                    const upSubjectList = data.upSubjectData || [];
                    const downSubjectList = data.downSubjectData || [];
                    const upSubjectData = upSubjectList.map(item => {
                        if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                            return `${item.subjectName}(得分${item.score})`
                        } else {
                            return `${item.subjectName}(${item.score})`
                        }}).join('、')
                    const downSubjectData = downSubjectList.map(item => {
                        if (data.studentOpenness == 1 || data.studentOpenness == 2) {
                            return `${item.subjectName}(得分${item.score})`
                        } else {
                            return `${item.subjectName}(${item.score})`
                        }}).join('、')
                    if(data?.fullScore && data?.fullScore!='-'){
                        const scoreText = data?.studentOpenness == 1 || data?.studentOpenness == 2 ? '总分' : '总分标准分为'
                        const unit = data?.studentOpenness == 1 || data?.studentOpenness == 2 ? '分' : '';
                        this.suggestionHtml = `${data?.studentName || ''}同学，本次考试${scoreText}<span style="color: #2e64fa">${data?.fullScore}</span>${unit}，整体处于${data?.summarySuggestionLevel}，`;
                        if(upSubjectData){
                            this.suggestionHtml += `<span style="color: #3ba272">${upSubjectData}</span>是你的优势学科，建议通过提分练习进行强化，继续保持这类学科的优势性${downSubjectData ? '；' : '。'}`;
                        }
                        if(downSubjectData){
                            this.suggestionHtml += `<span style="color: #f56c6c">${downSubjectData}</span>是你的劣势学科，建议先加强学习，熟练掌握薄弱知识点的基础，然后通过提分练习进行巩固和强化，争取下次考试获得更优异的成绩！`;
                        }
                    }else{
                        this.suggestionHtml = null
                    } 
                } else {
                    this.suggestionHtml = null
                }
                this.$nextTick(()=>{
                    const suggestionHeight = this.$refs?.multiSuggestionModule?.offsetHeight || 0;
                    // console.log(suggestionHeight,99888)
                    this.multiSuggestionPageNum = this.SingleChartPage(this.suggestionHtml?suggestionHeight:0);
                })
            })
        },
        //学生端查询单科-我的成绩
        async QueryOneSubjectData(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectData({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const headData = [{
                        name:'班级',
                        prop:'className',
                        display:true
                    },{
                        name:'原始分',
                        prop:'score',
                        display:res?.data?.scoreStatus === 0 //0-显示,1-不显示
                    },{
                        name:'赋分',
                        prop:'rateScore',
                        display:res?.data?.rateScoreStatus === 0 //0-显示,1-不显示
                    },{
                        name:'班排',
                        prop:'classRank',
                        display:res?.data?.classRankStatus === 0
                    },{
                        name:'年排',
                        prop:'schoolRank',
                        display:res?.data?.schoolRankStatus === 0
                    },{
                        name:'联排',
                        prop:'examRank',
                        display:res?.data?.examRankStatus === 0 && this.reportParam.examLevel == 1 && this.schoolType == 2
                    },{
                        name:'区排',
                        prop:'regionRank',
                        display:res?.data?.regionRankStatus === 0
                    },{
                        name:'赋分等级',
                        prop:'rateScoreName',
                        display:res?.data?.rateScoreStatus === 0
                    },{
                        name:'标准分',
                        prop:'standardScore',
                        display:(res?.data?.standardScoreStatus === 0 && this.schoolType == 2) || this.schoolType == 1
                    },{
                        name:'学业等级',
                        prop:'gradeName',
                        display:(res?.data?.gradeNameStatus === 0 && this.schoolType == 2) || this.schoolType == 1
                    },{
                        name:'得分率',
                        prop:'scoreRate',
                        display:res?.data?.scoreRateStatus === 0
                    },{
                        name:'班级最高分',
                        prop:'classMaxScore',
                        display:res?.data?.classMaxScoreStatus === 0 && this.schoolType == 2
                    },{
                        name:'年级最高分',
                        prop:'gradeMaxScore',
                        display:res?.data?.gradeMaxScoreStatus === 0 && this.schoolType == 2
                    },{
                        name:'联校最高分',
                        prop:'examMaxScore',
                        display:res?.data?.examMaxScoreStatus === 0 && this.schoolType == 2
                    },{
                        name:'班级均分',
                        prop:'classAvgScore',
                        display:res?.data?.classAvgScoreStatus === 0 && this.schoolType == 2
                    },{
                        name:'年级均分',
                        prop:'gradeAvgScore',
                        display:res?.data?.gradeAvgScoreStatus === 0 && this.schoolType == 2
                    },{
                        name:'联校均分',
                        prop:'examAvgScore',
                        display:res?.data?.examAvgScoreStatus === 0 && this.schoolType == 2
                    }] 
                    const tableData = [res.data] || [];
                    const headerList = headData.filter(item=>item.display);
                    const pageTableData = this.TableRowAndColumnPage(headerList,tableData,8,1);//8列一个表
                    this.singleSubjectData[index].scrolTablePagesNum = pageTableData.tablePagesNum;
                    this.singleSubjectData[index].scrolTableList = pageTableData.tableList;
                    this.singleSubjectData[index].scrolHeaderList = pageTableData.headerList;//表头
                } else {
                    this.singleSubjectData[index].scrolTablePagesNum = [];
                    this.singleSubjectData[index].scrolTableList = [];
                    this.singleSubjectData[index].scrolHeaderList = [];//表头
                }
            })
        },
        //学生端查询单科-小题分析(表格-图表)
        async QueryOneSubjectSmallQuestionData(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectSmallQuestionData({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(res => {
                if (res.code == 200 && res?.data?.tableData?.length > 0) {
                    const tableData = res.data.tableData || [];
                    const titleData = res.data.titleData || [];
                    const studentOpenness = res.data?.studentOpenness ?? '';//控制得分显示对错或值
                    this.TableChartData(tableData, titleData, studentOpenness, index,'smallQuestionData','小题',subjectCode);
                }
            })
        },
        //学生端查询单科-大题分析，知识点分析，能力要素分析(联考)
        async QueryOneSubjectGroupQuestionData(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectGroupQuestionData({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(async res => {
                if (res.code == 200 && res.data) {
                    const { bigQuestion, knowledgePointQuestion, abilityQuestion } = res.data
                    if (bigQuestion && bigQuestion?.tableData?.length > 0) {
                        const tableData = bigQuestion.tableData || [];
                        const titleData = bigQuestion.titleData || [];
                        const studentOpenness = bigQuestion?.studentOpenness ?? '';
                        this.TableChartData(tableData, titleData, studentOpenness, index,'bigQuestionData','大题',subjectCode);
                    }
                    if (knowledgePointQuestion && knowledgePointQuestion?.tableData?.length > 0) {
                        const tableData = knowledgePointQuestion.tableData || [];
                        const titleData = knowledgePointQuestion.titleData || [];
                        const studentOpenness = knowledgePointQuestion?.studentOpenness ?? '';
                        this.TableChartData(tableData, titleData, studentOpenness, index,'knowledgePointQuestionData','知识点',subjectCode);
                        if(this.schoolType == 2){
                            // 等待 DOM 更新完成后获取高度
                            await this.$nextTick();
                            await new Promise(resolve => setTimeout(resolve, 2000)); // 额外延迟确保浏览器挂载
                            //处理知识点分层分页
                            const refName = `knowLedgeLayering_${subjectCode}`;
                            const domHeight = this.$refs[refName]?.[0]?.offsetHeight || 0;
                            this.knowLedgeLayeringPageNum.push(this.SingleChartPage(domHeight));
                        }
                    }
                    if (abilityQuestion && abilityQuestion?.tableData?.length > 0) {
                        const tableData = abilityQuestion.tableData || [];
                        const titleData = abilityQuestion.titleData || [];
                        const studentOpenness = abilityQuestion?.studentOpenness ?? '';
                        this.TableChartData(tableData, titleData, studentOpenness, index,'abilityQuestionData','能力要素',subjectCode);
                    }
                }
            })
        },
        //学生端查询单科-自定义分组(联考)
        async QueryOneSubjectCustomGroupQuestion(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectCustomGroupQuestion({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const customQuestionData = res?.data?.customQuestionData ?? []
                    if (customQuestionData && customQuestionData.length > 0) {
                        customQuestionData.forEach((item, key) => {
                            const tableData = item?.questionData?.tableData || []
                            const titleData = item?.questionData?.titleData || []
                            const studentOpenness = res.data?.studentOpenness ?? ''
                            this.TableChartData(tableData, titleData, studentOpenness, index,`customQuestionData${key}`,item.customName,subjectCode);
                        })
                    }
                }
            })
        },
        //学生端查询单科-历次查询(联考)
        async QueryOneSubjectHistoryExamData(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectHistoryExamData({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const detailData = (res.data?.detailData || []).reverse();
                    // console.log(this.singleSubjectData[index],98899)
                    this.singleSubjectData[index].historyExamData.chartData = detailData;
                    const selectNames = res.data.selectNames || [];
                    const selectVal = selectNames?.[0]?.prop ?? '';
                    this.singleSubjectData[index].datax = [];
                    let datay = [],tooltipData = [];
                    detailData.forEach(item => {
                        this.singleSubjectData[index].historyExamData.datax.push(item.examName)
                        datay.push(item[selectVal])
                        tooltipData.push({
                            name: selectNames?.[0]?.name ?? '',
                            value: item[selectVal]
                        })
                    })
                    this.singleSubjectData[index].historyExamData.datay = [datay];
                    this.singleSubjectData[index].historyExamData.tooltipData = [tooltipData];
                    this.singleSubjectData[index].historyExamData.pageNum = this.SingleChartPage(this.singleSubjectData[index].historyExamData.chartData.length > 0 ? 363 : 0);
                }
            })
        },
        //学生端查询单科-总结建议
        async QueryOneSubjectSuggestionData(subjectCode,index) {
            await this.$api.reportStudent[getApiName()].queryOneSubjectSuggestionData({
                ...this.reportParam,
                subjectGroupType: 0, // 科目是否为组合
                isTotal: 0, //是否为总分科目 1为总分 0为非总分
                subjectCode:subjectCode
            }).then(res => {
                if (res.code == 200 && res.data) {
                    const data = res.data
                    //* 1-得分显示分数，小题分显示分数,2-得分显示分数，小题分显示对错
                    //* 3-得分显示对错，小题分显示分数,4-得分显示对错，小题分显示对错
                    //* 5-得分显示等级，小题分显示分数,6-得分显示等级，小题分显示对错
                    const upSubjectList = data?.upSubjectData || [];
                    const downSubjectList = data?.downSubjectData || [];
                    const upSubjectData = upSubjectList.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 = downSubjectList.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.singleSubjectData[index].suggestionHtml = '';
                    if (data.studentName && (upSubjectData || downSubjectData)) {
                        this.singleSubjectData[index].suggestionHtml = `${data.studentName}同学，本次考试`
                    }
                    if (upSubjectData) {
                        this.singleSubjectData[index].suggestionHtml += `${upSubjectData}，是你的优势学科，建议通过提分练习进行强化，继续保持这类学科的优势性！`
                    }
                    if (downSubjectData) {
                        this.singleSubjectData[index].suggestionHtml += `${downSubjectData}，是你的劣势学科，建议先加强学习，熟练掌握薄弱知识点的基础，然后通过提分练习进行巩固和强化，争取下次考试获得更优异的成绩！`
                    }
                    this.$nextTick(()=>{
                        const suggestionHeight = this.$refs?.[`singleSubjectSuggestion_${index}`]?.[0]?.offsetHeight || 0;
                        // console.log(suggestionHeight,8999111)
                        this.singleSubjectData[index].suggestionPageNum = this.SingleChartPage(this.singleSubjectData[index].suggestionHtml?suggestionHeight:0);
                    })
                } else {
                    this.singleSubjectData[index].suggestionHtml = ''
                }
            })
        },
        //答题卡
        async FindStudentCard(subjectCode,index){
            await this.$api.reportStudent[getApiName()].findStudentCard({
                examId:this.reportParam.examId,
                subjectCode:subjectCode,
                registrationCode:this.reportParam.registrationCode
            }).then(res => {
                if (res.code == 200 && res.data) {
                    let paperImageList = res.data.pageVOS || [];
                    //先添加总分数据
                    let totalScore = {
                        questionName: '总分',
                        fullScore: res?.data?.fullScore || '',
                        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 (paperImageList.length > 0 && paperImageList[0].questionVOS) {
                        paperImageList[0].questionVOS.unshift(totalScore)
                    }
                    this.singleSubjectData[index].paperImageList = paperImageList;
                    this.singleSubjectData[index].usedCardType = res?.data?.usedCardType ?? 1;
                    for(let i = 0;i<paperImageList.length;i++){
                        const pageNum = this.SingleChartPage(this.printPageHeight);
                        this.singleSubjectData[index].paperImagePageNum.push(pageNum);
                    }
                }
            })
        },
        //处理数据
        async TableChartData(tableData, titleData, studentOpenness, index,type,groupName,subjectCode) {
            //柱状图
            let datax = [],datay = [],radarChart = []
            tableData.forEach(item => {
                datax.push(item.questionName)
                const scoreRate = item?.scoreRate ?? ''
                datay.push(scoreRate)
                radarChart.push([item.questionName, scoreRate])
            })
            //雷达图
            const radarChartData = [['group', '得分率'], ...radarChart]
            let chartHeight = 0;//小题分析只显示table 不显示图
            if(type=='bigQuestionData'){
                chartHeight = datay.length > 0 ? 363 : 0; //柱状图
            }else if (type == 'smallQuestionData'){
                chartHeight = 0;
            } else{
                chartHeight = datay.length > 0 ? 393 : 0;//雷达图
            }
            const chartPagesNum = this.SingleChartPage(chartHeight);
            const staticHeader = titleData.slice(0,1);//固定表头
            const dynamicHeader = titleData.slice(1);//动态分组标头
            
            const pageTableData = this.TableRowAndColumnPage(dynamicHeader,tableData,7,1);//8列一个表
            const tablePagesNum = pageTableData.tablePagesNum;
            const tableList = pageTableData.tableList;
            const headerList = pageTableData.headerList;//表头
            //查询单科-知识点分层分析表(联考)
            let knowLedgeLayering = null;
            if(type == 'knowledgePointQuestionData' && this.schoolType== 2){
                await this.$api.reportStudent[getApiName()].queryStudentKnowLedgeLayering({
                    ...this.reportParam,
                    subjectGroupType: 0, // 科目是否为组合
                    isTotal: 0, //是否为总分科目 1为总分 0为非总分
                    subjectCode:subjectCode
                }).then(res => {
                    if (res.code == 200 && res.data) {
                        const { breakThrough,develop,fullScore } = res.data;
                        knowLedgeLayering = {
                            breakThrough:breakThrough || '',
                            develop:develop || '',
                            fullScore:fullScore || ''
                        }
                        //知识点
                        this.knowLedgeLayeringData.push({
                            subjectCode:subjectCode,
                            groupName:groupName,
                            knowLedgeLayering:knowLedgeLayering
                        })
                    }else{
                        knowLedgeLayering = null;
                    }
                })
            }
            this.singleSubjectData[index].groupQuestionData.push({
                type:type,
                groupName:groupName,
                studentOpenness:studentOpenness,
                staticHeader:staticHeader,
                headerList:headerList,
                tableList:tableList,
                tablePagesNum:tablePagesNum,
                chartPagesNum:chartPagesNum,
                datax:datax,
                datay:datay,
                radarChartData:radarChartData,
                knowLedgeLayering:knowLedgeLayering
            })
        },
        //按照原始顺序累加，当总和超过A4高度1285时，将当前元素放入下一组
        groupByThreshold(arr, threshold) {
            const result = [];
            let currentGroup = [];
            let currentSum = 0;

            for (let i = 0; i < arr.length; i++) {
                const num = arr[i];

                // 如果当前组为空，直接添加
                if (currentGroup.length === 0) {
                    currentGroup.push(num);
                    currentSum += num;
                }
                // 如果加上当前元素会超过阈值，则创建新组
                else if (currentSum + num > threshold) {
                    result.push(currentGroup);
                    currentGroup = [num];
                    currentSum = num;
                }
                // 否则添加到当前组
                else {
                    currentGroup.push(num);
                    currentSum += num;
                }
            }

            // 添加最后一组
            if (currentGroup.length > 0) {
                result.push(currentGroup);
            }

            return result;
        },
        /*
        *对表格横向和竖向分页
        *dynamicHeader 动态表头
        *tableData 表格数据
        *groupSize 动态表头分页大小
        *headNum 表头行数
        */
        TableRowAndColumnPage(dynamicHeader,tableData,groupSize,headNum){
            /*
            * 每个模块的高度
            */
            const tableTitle = 49;//表格标题高度
            const tableHeadHeight = 41;//表头高度
            const tableGap = 49;//表格和图表之间的间距

            //对表格横向分页
            const groupDynamicHeader = [];
            for (let i = 0; i < dynamicHeader.length; i += groupSize) {
                const group = dynamicHeader.slice(i, i + groupSize);
                //表格补充
                if(group.length > 0 && group.length!=groupSize && i > 0){
                    const tdLens = groupSize - group.length;
                    for(let j = 0; j < tdLens; j ++){
                        group.push({})
                    }
                }
                groupDynamicHeader.push(group)
            }
            let tablePagesNum = [],tableList = [],headerList = [];//当前模块所有table页码 表格  表格高度
            for (let i = 0; i < groupDynamicHeader.length; i ++) {
                let itemTablePagesNum = [],itemTableList = [],itemHeadder= [], moduleHeightData = [] ,isShowSplitLine = [];//每个table的页码 表格  表格高度 isShowSplitLine:表格是否显示分割线
                //计算最后一页模块的高度
                let lastPageDataSum = 0;
                const lastPageNum = this.modulePageData.length > 0 ? this.modulePageData[this.modulePageData.length - 1] : 1;//最后一页页码
                this.modulePageData.forEach((item,p)=>{
                    if(item == lastPageNum){
                        lastPageDataSum += this.moduleHeightData[p];
                    }
                })
                const remainHeight = this.printPageHeight - lastPageDataSum - (tableHeadHeight * headNum) - tableTitle - 41;//41 是距离底部的边距 
                const remainTableRow = Math.floor(remainHeight / 40);//剩余可放多少行
                if(remainTableRow > 1){
                    const tableLens = tableData.length ?? 0;//表格行数量
                    if(tableLens > remainTableRow){//判断第二页是否有值
                        const pageTableHeight = this.printPageHeight - (tableHeadHeight * headNum) - tableTitle - 41;// 一页能放下的table的高度  41 是距离底部的边距 
                        const tableRowNum = Math.floor(pageTableHeight / 40);//一页可放多少行
                        //第一页数据
                        const firstTableData = tableData.slice(0,remainTableRow);
                        itemTableList.push(firstTableData)
                        itemHeadder.push(groupDynamicHeader[i])
                        isShowSplitLine.push(false);//是否显示表格底部的分割线 第一页不显示
                        //第一页页码
                        // this.modulePageData.push(lastPageNum);
                        //当前表格第一页页码
                        itemTablePagesNum.push(lastPageNum);//图表分页页码
                        // 第一页高度
                        const tableHeight1 = firstTableData.length > 0 ? (tableHeadHeight * headNum) + tableTitle + tableGap + firstTableData.length * 40 : 0;
                        moduleHeightData.push(tableHeight1)
                        const otherTableData = tableData.slice(remainTableRow);//接取完上一页剩下的表格数据
                        // 按步长遍历，每次截取 表格行数 元素
                        for (let j = 0; j < otherTableData.length; j += tableRowNum) {
                            const group = otherTableData.slice(j, j + tableRowNum);
                            const key = j/tableRowNum;
                            //表格数据
                            itemTableList.push(group);
                            itemHeadder.push(groupDynamicHeader[i])
                            isShowSplitLine.push(false);//是否显示表格底部的分割线
                            //页码
                            // this.modulePageData.push(lastPageNum + key + 1);
                            //当前表格分页页码
                            itemTablePagesNum.push(lastPageNum + key + 1);
                            //高度
                            const tableHeight = group.length > 0 ? (tableHeadHeight * headNum) + tableTitle + tableGap + group.length * 40 : 0;
                            moduleHeightData.push(tableHeight)
                        }
                    }else{
                        const tableData1 = tableData.slice(0,remainTableRow);
                        const tableData2 = tableData.slice(remainTableRow);
                        itemTableList.push(tableData1,tableData2);
                        itemHeadder.push(groupDynamicHeader[i],groupDynamicHeader[i])
                        // this.modulePageData.push(lastPageNum,lastPageNum);
                        //页码
                        itemTablePagesNum.push(lastPageNum,lastPageNum)
                        //高度
                        const tableHeight1 = tableData1.length > 0 ? (tableHeadHeight * headNum) + tableTitle + tableGap + tableData1.length * 40 : 0;
                        const tableHeight2 = tableData2.length > 0 ? (tableHeadHeight * headNum) + tableTitle + tableGap + tableData2.length * 40 : 0;
                        moduleHeightData.push(tableHeight1,tableHeight2)
                    }
                }else{
                    const pageTableHeight = this.printPageHeight - (tableHeadHeight * headNum) - tableTitle - 41;// 一页能放下的table的高度  41 是距离底部的边距 
                    const tableRowNum = Math.floor(pageTableHeight / 40);//一页可放多少行
                    // 按步长遍历，每次截取 表格行数 元素
                    for (let j = 0; j < tableData.length; j += tableRowNum) {
                        const group = tableData.slice(j, j + tableRowNum);
                        const key = j/tableRowNum;
                        //表格数据
                        itemTableList.push(group);
                        itemHeadder.push(groupDynamicHeader[i])
                        // this.modulePageData.push(lastPageNum + key + 1);
                        //页码
                        itemTablePagesNum.push(lastPageNum + key + 1)
                        //高度
                        const tableHeight = group.length > 0 ? (tableHeadHeight * headNum) + tableTitle + tableGap + group.length * 40 : 0;
                        moduleHeightData.push(tableHeight)
                    }
                }
                this.modulePageData.push(...itemTablePagesNum);
                this.moduleHeightData.push(...moduleHeightData);
                // console.log(this.modulePageData,111333)
                tableList.push(itemTableList)
                headerList.push(itemHeadder)
                tablePagesNum.push(itemTablePagesNum);//当前模块表格的分页页码
            }
            return {headerList,tablePagesNum,tableList}
        },
        /*
        *单个图分页
        *chartHeight 图表高度
        */
        SingleChartPage(chartHeight){
            let chartPagesNum = '';//各分析图 高度
            const prevModuleLastPageNum = this.modulePageData.length > 0 ? this.modulePageData[this.modulePageData.length - 1] : 1;//上一模块 最后一页页码
            //上一模块最后一页高度 和 当前模块 echart高度
            let prevModuleLastPageHeight = [],moduleChartHeight = [];
            this.modulePageData.forEach((item,i)=>{
                if(item == prevModuleLastPageNum){
                    prevModuleLastPageHeight.push(this.moduleHeightData[i])
                    moduleChartHeight.push(this.moduleHeightData[i]);//最后一页高度
                }
            })
            // 将当前模块 echart高度
            this.moduleHeightData.push(chartHeight)
            moduleChartHeight.push(chartHeight)
            //进行分页 满足一页的高度放在一起
            const printPageGroup = this.groupByThreshold([...moduleChartHeight], this.printPageHeight);
            //每个模块对应的页码
            for (let i = 0; i < printPageGroup.length; i++) {
                const arr = printPageGroup[i]
                for (let j = 0; j < arr.length; j++) {
                    if(i == 0){//第一页
                        if(j > prevModuleLastPageHeight.length - 1){
                            this.modulePageData.push(prevModuleLastPageNum)
                            chartPagesNum = prevModuleLastPageNum
                        }
                    }else{
                        this.modulePageData.push(prevModuleLastPageNum + i);
                        chartPagesNum = prevModuleLastPageNum + i
                    }
                }
            }
            return chartPagesNum
        },
        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 '-'
            }
        },
        //点击顶部下载PDF按钮导出
        DownloadPdf(){
            if(this.$refs.bookFlipBox){
                this.$refs.bookFlipBox.DownloadPdfNew();
            }
        },
        //向父级页面传值关闭下载Pdf按钮loading
        PdfLoadEnd(){
            this.$emit('closePdfLoading')
        },
    }
};
</script>
<style scoped lang="scss">
    .area_module_describe{
        margin-top: 20px;
    }
    .card-container {
        display: flex;
        flex-wrap: wrap;
        /* 允许换行 */
        /* 设置元素之间间隔 */
        gap: 10px;
        .card {
            //   flex: 0 1 calc((100% - 240px) / 5);
            flex-grow: 1; /* 使每个div平分可用空间 */
            flex-basis: 0; /* 初始基础大小为0 */
            width: 20%;
            //   max-width: 320px;
            // width: 238px;
            /* 每个卡片占据 18% 宽度，确保能在一行显示五个，考虑间隔 */
            // flex: 0 0 16.5%; /* 每个卡片占据 18% 宽度，确保能在一行显示五个，考虑间隔 */
            // border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 12px 6px;
            box-sizing: border-box;
            text-align: center;
            color: #fff;
            /* 文字颜色可以根据背景调整 */
            background-size: cover;
            background-position: center;
            height: 70px;
            /* 可调整高度 */
            // margin-bottom: 20px; /* 卡片底部间距 */
            position: relative;
        }
        .background-image {
            position: absolute;
            top: 0;
            right: 0;
            /* 背景图片宽度 */
            width: 100%;
            height: 70px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center right;
            z-index: 1;
            /* 确保背景图片在文本之下 */
            border-radius: 10px;
        }
        .statistic,.value {
            position: relative;
            z-index: 2;
            /* 确保文本在背景图片之上 */
        }
        .statistic {
            font-size: 13px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            z-index: 2;
        }
        .value {
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
            text-align: left;
            margin-top: 5px;
            z-index: 2;
        }
    }
    .area_module{
        .area_module_content{
            display: flex;
            width: 100%;
            justify-content: space-between;
            .area_module_chart{
                width: 35% !important;
            }
            .area_module_table{
                width: 65% !important;
            }
        }
        .area_module_chart{
            &.justify_content{
                display: flex;
                gap: 0px 48px;
                flex-wrap: wrap;
                .item_progress{
                    width: 170px;
                    height: 180px;
                    display: inline-flex;
                    align-items: center;
                    position: relative;
                    :deep(.el-progress--circle) {
                        .el-progress__text{
                            font-size: 14px !important;
                            color: #5470C6 !important;
                            background: rgba(84,112,198,0.1);
                            width: 120px;
                            height: 120px;
                            border-radius: 50%;
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding-top: 30px;
                            box-sizing: border-box;
                        }
                    }
                    .item_progress_name{
                        position: absolute;
                        left: 50%;
                        top: 37%;
                        transform: translate(-50%,0);
                        font-weight: 500;
                        font-size: 16px !important;
                        color: #5470C6 !important;
                    }
                }
            }
        }
        .area_module_table{
            &.error{
                :deep() .el-table{
                    .el-table__header-wrapper{
                        .el-table__header{
                            .is-group{
                                tr{
                                    th.el-table__cell:nth-last-child(3){
                                        border-right: 1px solid #EBEEF5;
                                    }
                                    &:nth-child(2){
                                        display:none;
                                    }
                                }
                            }
                        }
                    }
                    .el-table__cell{
                        &.white_space_normal{
                            .cell{
                                white-space: normal;
                                padding:10px 0 10px 10px !important;
                            }
                        }
                    }
                    // &.el-table--striped {
                    //     .el-table__body {
                    //         tr{
                    //             &.el-table__row--striped{
                    //                 &.row_color_FFFFFF {
                    //                     td.el-table__cell{
                    //                         background: #FFFFFF;
                    //                     }
                    //                 }
                    //             }
                    //         }
                    //     }
                    // }
                    // &.el-table--striped .el-table__body tr.el-table__row.row_color_FAFAFA td.el-table__cell{
                    //     background: #FAFAFA;
                    // }
                    // &.el-table--striped .el-table__body tr.el-table__row--striped.row_color_FAFAFA td.el-table__cell{
                    //     background: #FAFAFA;
                    // }
                    // &.el-table--enable-row-hover .el-table__body tr.row_color_FFFFFF:hover > td {
                    //     background-color: transparent !important;
                    // }
                }
            }
            .student_know_paper{
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                border-radius: 6px;
                border: 1px solid #EBEEF5;
                li{
                    width: 100%;
                    border-top: 1px solid #EBEEF5;
                    box-sizing: border-box;
                    display: inline-flex;
                    &:first-child{
                        border-top: 0;
                        .li_left{
                            background-color: #EEF1FB;
                            span{
                                color: #5470C6;
                            }
                        }
                    }
                    &:nth-child(2){
                        .li_left{
                            background-color: #ECF6F1;
                            span{
                                color: #3BA272;
                            }
                        }
                    }
                    &:nth-child(3){
                        .li_left{
                            background-color: #FFFAEF;
                            span{
                                color: #FAC858;
                            }
                        }
                    }
                    .li_left{
                        width: 300px;
                        padding: 24px;
                        border-right: 1px solid #EBEEF5;
                        box-sizing: border-box;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        flex-shrink: 0;
                        span{
                            font-weight: 500;
                            font-size: 20px;
                            line-height: 28px;
                            display: block;
                            text-align: center;
                            &:nth-child(2){
                                margin-top: 4px;
                                line-height: 20px;
                                font-weight: 400;
                                font-size: 14px;
                                color: #999999;
                            }     
                        }
                    }
                    .li_know{
                        flex: 1;
                        padding: 20px;
                        box-sizing: border-box;
                        font-weight: 400;
                        font-size: 14px;
                        color: #666666;
                        line-height: 24px;
                        text-align: justified;
                        display: inline-flex;
                        align-items: center;
                    }
                }
            }
        }
        .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>