bigDataStudent/src/views/analysisReport/personalProfile/index.vue

<template>
    <div class="personalProfile">
        <div class="report_header">
            <el-radio-group v-model="radio1" @change="portraitTab">
                <el-radio-button label="grade">年级画像</el-radio-button>
                <el-radio-button label="class">班级画像</el-radio-button>
            </el-radio-group>
        </div>
        
        <!-- 我的历次成绩子组件 -->
        <MyGradeHistory :mode="radio1" />

        <!-- 历次考试知识点追踪 -->
        <KnowledgeTrack :knowledge-stats="knowledgeStats" :mode="radio1" />

        <!-- 零分知识点、高频错题知识点 -->
        <zeroScoreKnowledge 
            :table-data="treeData"
            :fatal-vulnerability="fatalVulnerability" 
            :high-vulnerability="highVulnerability"
            :mode="radio1"
        />
    </div>
</template>
<script>
import MyGradeHistory from './MyGradeHistory.vue';
import KnowledgeTrack from './KnowledgeTrack.vue';
import zeroScoreKnowledge from './zeroScoreKnowledge.vue';

export default {
    name: "PersonalProfile",
    components: {
        MyGradeHistory,
        KnowledgeTrack,
        zeroScoreKnowledge
    },
    computed: {
        // 动态生成知识统计文本，使用repeatKnowledgeNum
        knowledgeStats() {
            const stats = [];
            // 当konwLenght不等于0时，显示第一行文本
            stats.push(
            `共包含<span style='color:#2E64FA'>23</span>个知识点，
            分别为<span style='color:#333333;font-weight:600;'>多角度探究作品意蕴、熟语；</span>`
            ); //包含知识点
            // 当repeatKnowledgeNum不等于0时，显示第二行文本
            stats.push(
                `其中<span style='color:#2E64FA'>15</span>个为多次考试的高频考点,
                其中<span style='color:#333333;font-weight:600;'>概括分析、比较材料</span>
                你的得分率<span style='color:#3BA272;font-weight:600;'>提升</span>
                <span style='color:#333333;font-weight:600;'>文言文断句、文言文阅读、材料作文</span>
                你的得分率<span style="color:#F56C6C;font-weight:600;">下降</span>，
                希望针对下降的知识点进行总结和反思。`
            ); //重复知识点
            return stats;
        },
    },
    data() {
        return {
            // 画像切换
            radio1: "grade",

            // 知识点树状图数据
            treeData: [],
            // 零分知识点数据
            fatalVulnerability: [],
            // 高频错题知识点数据
            highVulnerability: [], 
        };
    },
    created() {
        //零分知识点、高频知识点
        this.vulerabData()
    },
    methods: {
        // 画像切换
        portraitTab() {

        },
        // 零分知识点、高频错题知识点数据
        vulerabData() {
            // 零分知识点数据
            this.fatalVulnerability = [
                {
                    "knowledgeName": "区间的关系与运算",
                    "knowledgeId": 10550,
                    "parentId": 10548,
                    "gradeScoreRate": "50", // 年级得分率
                    "classScoreRate": "54.55", // 班级得分率
                    "scoreRateDiff": "4.55",   // 得分率差值
                    "knowledgeType": 1, // 知识点类型 1：零分知识点 2：高频错题知识点
                    "examNum": 2 // 考试次数
                },
                {
                    "knowledgeName": "具体函数的定义域",
                    "knowledgeId": 10552,
                    "parentId": 10551,
                    "gradeScoreRate": "37.9",
                    "classScoreRate": "27.27",
                    "scoreRateDiff": "-10.63",
                    "knowledgeType": 1,
                    "examNum": 2
                }
            ];
            // 高频错题知识点数据
            this.highVulnerability = [
                {
                    "knowledgeName": "抽象函数的定义域",
                    "knowledgeId": 10553,
                    "parentId": 10551,
                    "gradeScoreRate": "6.45",
                    "classScoreRate": "12.12",
                    "scoreRateDiff": "5.67",
                    "knowledgeType": 1,
                    "examNum": 2
                },
                {
                    "knowledgeName": "求函数的零点",
                    "knowledgeId": 10820,
                    "parentId": 10818,
                    "gradeScoreRate": "34.03",
                    "classScoreRate": "35.76",
                    "scoreRateDiff": "1.73",
                    "knowledgeType": 1,
                    "examNum": 1
                }
            ];
        },
    },
}
</script>

<style scoped lang="scss">
.personalProfile{
    // 确保所有子组件之间有10px的间隔
    > * {
        margin-bottom: 10px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
    }
    
    > *:last-child {
        margin-bottom: 0;
    }
    
    // 画像切换
    .report_header{
        padding: 10px 0;
        text-align: center;
        font-size: 14px;
        background: #ffffff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 10px;

        /* 选中状态 */
        :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
        font-weight: 600 !important;
        color: #ffffff !important;
        }

        :deep(.el-radio-button__inner) {
        height: 36px;
        line-height: 36px;
        padding: 0px;
        width: 76px;
        text-align: center;
        color: #999999;
        }
    }
}

</style>