rt-sim-training-client/src/views/exam/result.vue

<template>
    <div v-loading="loading">
        <el-card class="paper" :style="{height: height - 10 + 'px'}">
            <div slot="header" style="text-align: center;">
                <span style="font-weight:bold ">考试结果详情</span>
            </div>
            <el-scrollbar wrapClass="scrollbar-wrapper" :style="{height: height - 150 + 'px'}">
                <div class="context">
                    <el-form ref="form" :model="resultModel" size="mini">
                        <el-form-item label="试题名称:" prop="name">
                            <span>{{ resultModel.examName }}</span>
                        </el-form-item>
                        <el-form-item label="考试得分:" prop="score">
                            <span>{{ resultModel.score + ' 分'}}</span>
                        </el-form-item>
                        <el-form-item label="是否通过:" prop="detail">
                            <span style="color:darkgray" v-if="resultModel.result === '01'">未计算</span>
                            <span style="color:green" v-else-if="resultModel.result === '02'">通过</span>
                            <span style="color:red" v-else="resultModel.result === '03'">未通过</span>
                        </el-form-item>
                        <el-form-item label="考试用时:" prop="detail">
                            <span>{{ Math.ceil(resultModel.usedTime/60) + ' 分钟'}}</span>
                        </el-form-item>
                    </el-form>
                    <el-table :data="resultModel.userExamQuestionsVOs" border style="width: 100%"
                        :summary-method="getSummaries" show-summary>
                        <el-table-column prop="trainingName" label="实训名称"></el-table-column>
                        <el-table-column prop="score" label="实训得分"></el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
            <div style="position: relative; float: right; right: 60px; bottom: -30px;">
                <el-button type="primary " @click="back">返回考试列表</el-button>
            </div>
        </el-card>
    </div>
</template>
<script>
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    import { submitExam } from '@/api/management/userexam';
    import { UrlConfig } from '@/router/index';

    export default {
        name: 'ExamResult',
        mixins: [
            WindowResizeHandler
        ],
        props: {
            examDetails: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                height: '',
                resultModel: {
                    trainingName: '',
                    score: 0
                },
                loading: true
            }
        },
        mounted() {
            this.submitExamData();
        },
        methods: {
            resizeHandler: function () {
                this.height = this._clientHeight;
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总分';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] += ' 分';
                    } else {
                        sums[index] = 'N/A';
                    }
                });
                return sums;
            },
            submitExamData() {
                this.loading = true;
                let count = 3;
                let userExamId = this.$route.params.userExamId;
                let interval = setInterval(() => {
                    submitExam(userExamId).then(response => {
                        this.loading = false;
                        this.resultModel = response.data;
                        clearInterval(interval);
                        interval = null;
                    }).catch(error => {
                        if (count-- < 0) {
                            this.loading = false;
                            clearInterval(interval);
                            interval = null;
                            this.$messageBox('自动提交考试结果失败');
                        }
                    });
                }, 1000);

            },
            back() {
                let examId = this.resultModel.examId;
                this.$router.push(`${UrlConfig.exam.detail}/${examId}`);
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    /deep/ {
        .scrollbar-wrapper {
            margin-bottom: 0 !important;
        }
    }

    .paper {
        width: 900px;
        margin: 0 auto;
        border: 1px solid #F8F8F8;
    }

    .context {
        margin: 30px 60px;
    }
</style>