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">{{ sum }}</text>
                分， 您当前成绩为
                <text class="text-primary">{{ score }}</text>
                分。 参考
                <text>{{ recentHistory.year }}</text>
                年录取分数线， {{ tip.prefix }}
                <text v-if="tip.middle" :class="tip.middleClass">{{ tip.middle }}</text>
                {{ tip.suffix }}
            </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, VOLUNTARY_RESULT} from "@/types/injectionSymbols";
import {VoluntaryResultHistory, VoluntaryScoreItem} from "@/types/voluntary";
import _ from "lodash";

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

interface RichText {
    prefix: string;
    middle: string;
    middleClass: string;
    suffix: string;
}

const emptyRichText: RichText = {prefix: '', middle: '', middleClass: '', suffix: ''}

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
})
const sum = computed(() => _.sumBy(progressList.value, 'total'))
const score = computed(() => _.sumBy(progressList.value, 'score'))
const recentHistory = computed(() => _.first(result?.value.histories) || {} as VoluntaryResultHistory)
const tip = computed(() => {
    const diff = recentHistory.value.diff
    if (diff === undefined || diff === null) return emptyRichText
    if (diff < 0) return {
        prefix: '预估还需再提升',
        middle: Math.abs(diff) + '',
        middleClass: 'text-danger',
        suffix: '分即可达标！'
    }
    if (diff > 0) return {
        prefix: '预估已经超过',
        middle: Math.abs(diff) + '',
        middleClass: 'text-success',
        suffix: '分，已达标！'
    }
    if (diff === 0) return {
        prefix: '预估已经与之',
        middle: '持平',
        middleClass: 'text-primary',
        suffix: '，继续努力！'
    }
    return emptyRichText
})
</script>

<style scoped>

</style>