dz-app/pages/ie/entry-single-result/components/result-header.vue

<template>
    <view class="result-header">
        <college-item :item="detail.baseInfo">
            <template #address>
                <uv-tags size="mini" type="primary" shape="circle" :text="major.name" class="!items-start"
                         @click="goMajorDetail(major)"/>
            </template>
        </college-item>
        <view class="entry-result rounded-lg">
            <view class="fx-row">
                <view class="entry-result-txt h-full text-2xs">
                    <view>结果：</view>
                    <view class="indent-txt">您测试录取率的院校为
                        <text class="underline-txt">{{ universityName }}</text>
                        ,专业为
                        <text class="underline-txt">{{ result.majorName }}</text>
                        <text v-if="result.majorDirection" class="underline-txt text-primary-light">
                            ({{ result.majorDirection }})
                        </text>
                        。
                        <template v-if="result.enrollRate===null">
                            因为缺少关键数据，你被该校录取的概率无法计算！
                        </template>
                        <template v-else>
                            您被该校录取的概率为
                            <text class="underline-txt">{{ result.enrollRate }}%</text>
                            ！
                        </template>
                    </view>
                </view>
                <view class="entry-result-chart min-w-1 ml-10">
                    <mx-echarts :option="chartOption" canvas-id="dashboard" style="height: 100%"/>
                </view>
            </view>
            <enroll-table v-if="enrollRules.length" :headers="enrollHeader" :data="enrollRules" compact>
                <template #cell="{item}">
                    <enroll-status :rule="item" @tip="handleShowTip"/>
                </template>
            </enroll-table>
            <enroll-table v-if="otherRules.length" :headers="otherHeader" :data="otherRules" compact>
                <template #cell="{item}">
                    <enroll-status :rule="item" @tip="handleShowTip"/>
                </template>
            </enroll-table>
            <uv-text v-if="result.tips" size="11" type="warning" prefix-icon="info-circle" :text="result.tips"
                     :icon-style="{color: 'var(--warning-color)', fontSize: '12px'}" margin="5px 0 0 0"/>
            <view class="mt-10 text-2xs">
                录取概率说明：
                <uv-text size="12"
                         text="1.成绩合格，但是学校的附加录取条件没有达标，会显示零概率（如身高，视力等要求，具体看系统的院校招生要求）"/>
                <uv-text size="12"
                         text="2.成绩合格，考生没有完整填写学校招生附加要求，会显示无概率（如身高，视力等要求，具体看系统的院校招生要求）"
                         margin="3px 0"/>
                <uv-text size="12"
                         text="3.规则中的`自行参考`项由于官方未公布具体标准，系统无法将其纳入概率计算，考生根据自身情况自行参考"/>
            </view>
        </view>
        <uv-popup ref="popup" mode="center" :safe-area-inset-bottom="false" round="8" closeable close-on-click-overlay>
            <view class="fx-col p-30" style="width: 80vw">
                <uv-text type="content" size="14" :text="showContent" align="center" margin="20px 0"/>
                <uv-button type="primary" shape="circle" :custom-style="{width: '30vw'}" text="我知道了"
                           class="self-center" @click="$refs.popup.close()"/>
            </view>
        </uv-popup>
    </view>
</template>
<script>
import MxConst from "@/common/MxConst";
import InjectAISingleDataMixin from "@/pages/ie/entry-single-result/components/InjectAISingleDataMixin";
import CollegeItem from "@/pages/college-library/components/college-item.vue";
import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import EnrollTable from "@/pages/ie/entry-single-result/components/enroll-table.vue";
import EnrollStatus from "@/pages/ie/entry-single-result/components/enroll-status.vue";
import {defaultTheme} from "@/hooks/useTheme";
import {useTransfer} from "@/hooks/useTransfer";

export default {
    components: {EnrollStatus, EnrollTable, IndexTitleWrap, CollegeItem},
    mixins: [InjectAISingleDataMixin],
    computed: {
        chartOption() {
            if (!this.result || !Object.hasOwnProperty.call(this.result, 'enrollRate')) return {}
            return this.createRateChartOption()
        },
        universityName() {
            return this.detail?.baseInfo?.name || ''
        },
        enrollRules() {
            return this.result.rules?.filter(r => r.category == MxConst.enum.ai.ruleCategory.enroll.value) || []
        },
        otherRules() {
            return this.result.rules?.filter(r => r.category != MxConst.enum.ai.ruleCategory.enroll.value) || []
        }
    },
    data() {
        return {
            enrollHeader: [{prop: 'content', label: '录取规则', clazz: 'flex-4'},
                {prop: 'value', label: '计分', clazz: 'flex-1'},
                {prop: 'valid', label: '状态', clazz: 'flex-2', slotBody: 'cell'}],
            otherHeader: [{prop: 'content', label: '其它要求', clazz: 'flex-5'},
                {prop: 'valid', label: '状态', slotBody: 'cell', clazz: 'flex-2'}],
            showContent: ''
        }
    },
    setup() {
        const {transferTo} = useTransfer()
        const goMajorDetail = (major) => {
            transferTo('/pages/major-library/detail/detail', ['code'], major)
        }
        return {
            goMajorDetail
        }
    },
    methods: {
        createRateChartOption() {
            const rate = this.result.enrollRate
            return {
                grid: {
                    left: 0,
                    right: 0
                },
                series: [
                    {
                        type: 'gauge',
                        center: ['50%', '75%'],
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        radius: '120%',
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [{
                                    offset: 0, color: defaultTheme.colors["primary-deep"]
                                }, {
                                    offset: 1, color: defaultTheme.colors["primary-light"]
                                }]
                            }
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 10,
                        },
                        pointer: {
                            show: false,
                        },
                        anchor: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                color: [[1, '#e2e2e2']],
                                width: 10
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: true,
                            formatter: v => {
                                return isNaN(v) ? '--' : (v + '%');
                            },
                            color: '#333',
                            fontSize: 20,
                            fontWeight: 'bold',
                            offsetCenter: [0, '-20%']
                        },
                        title: {
                            show: true,
                            color: defaultTheme.brands.primary,
                            fontSize: 10,
                            offsetCenter: [0, '20%'],
                        },
                        data: [
                            {
                                value: rate,
                                name: rate === null ? '无概率' : '录取概率'
                            }
                        ]
                    },
                    {
                        type: 'gauge',
                        center: ['50%', '75%'],
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        radius: '120%',
                        z: 3,
                        progress: {
                            show: false,
                        },
                        pointer: {
                            showAbove: true,
                            icon: 'circle',
                            width: 7,
                            offsetCenter: [0, '-61%'],
                            itemStyle: {
                                color: '#fff'
                            }
                        },
                        anchor: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                color: [[1, 'transparent']],
                                width: 10
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        data: [
                            {
                                value: rate
                            }
                        ]
                    }
                ]
            }
        },
        handleShowTip(content) {
            if (!content) return
            this.showContent = content
            this.$refs.popup.open()
        }
    }
};
</script>
<style lang="scss" scoped>
.result-header {
    border-radius: 24rpx 24rpx 0 0;
}

.entry-result {
    background-color: #E9EDF6;
    margin: 0 15rpx 26rpx 15rpx;
    padding: 34rpx 17rpx 34rpx 34rpx;


    &-txt {
        flex: 0.6;

        .indent-txt {
            text-indent: 2em;
            text-align: justify;
        }

        .underline-txt {
            text-decoration: underline;
        }
    }

    &-chart {
        flex: 0.4;
        height: 180rpx;
    }
}

.rate-tips {
    height: 70px;
}
</style>