ieplus-app/src/pagesOther/pages/voluntary/result/components/voluntary-result-score.vue

<template>
    <view class="p-28 bg-white rounded-xl">
        <voluntary-result-title title="学生分数"/>
        <view class="p-28 gap-28 flex flex-col">
            <voluntary-result-progress v-for="i in progressList" :key="i.label" v-bind="i"/>
        </view>
        <voluntary-result-card tag="分析">
            <view class="flex-1 text-23 leading-38 text-fore-title">
                该专业考试总分为<text class="text-primary">600</text>分，您当前成绩为<text class="text-primary">340</text>分。
                参考<text>2025</text>年录取分数线，预估还需再提升<text class="text-primary">11</text>分即可达标！
            </view>
        </voluntary-result-card>
    </view>
</template>

<script setup lang="ts" name="VoluntaryResultScore">
import VoluntaryResultTitle from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-title.vue";
import VoluntaryResultProgress from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-progress.vue";
import VoluntaryResultCard from "@/pagesOther/pages/voluntary/result/components/plus/voluntary-result-card.vue";
import {VOLUNTARY_FORM, VOLUNTARY_MODEL} from "@/types/injectionSymbols";
import {VoluntaryScoreItem} from "@/types/voluntary";
import _ from "lodash";

const model = inject(VOLUNTARY_MODEL)
const data = inject(VOLUNTARY_FORM)

const progressList = computed(() => {
    const scores = model?.value
    const form = data?.value
    if (!scores || !form) return []
    const results: VoluntaryScoreItem[] = []

    form.rules.forEach(i => {
        i.details.forEach(r => {
            results.push({
                label: r.label,
                score: Number(scores[r.fieldName]),
                total: Number(scores[r.fieldName + 'Total']),
                labelWidth: '',
                scoreWidth: ''
            })
        })
    })
    // 因为label score需要全局对齐，所以拼装的逻辑在progress外层
    const maxLabel = _.chain(results).map(i => i.label.length).max().value()
    const maxScore = _.chain(results).map(i => (i.score + '/' + i.total).length).max().value()
    const labelWidth = maxLabel * 29
    const scoreWidth = maxScore * 18
    results.forEach(i => {
        i.labelWidth = labelWidth + 'rpx'
        i.scoreWidth = scoreWidth + 'rpx'
    })
    return results
})
</script>

<style scoped>

</style>