|
|
@@ -0,0 +1,181 @@
|
|
|
+<template>
|
|
|
+ <div class="Exercise-report">
|
|
|
+ <div class="report-box">
|
|
|
+ <div class="report-item">
|
|
|
+ <span>总题数</span>
|
|
|
+ <b>{{ reportResult.total }}</b>
|
|
|
+ </div>
|
|
|
+ <div class="report-item">
|
|
|
+ <span>正确</span>
|
|
|
+ <b>{{ reportResult.right }}</b>
|
|
|
+ </div>
|
|
|
+ <div class="report-item">
|
|
|
+ <span>错误</span>
|
|
|
+ <b>{{ reportResult.error }}</b>
|
|
|
+ </div>
|
|
|
+ <div class="report-item">
|
|
|
+ <span>正确率</span>
|
|
|
+ <b>{{ reportResult.rightRate }}</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="type-content" v-loading="loading">
|
|
|
+ <el-button plain style="cursor: inherit">第{{ index + 1 }}题</el-button>
|
|
|
+ <el-button plain type="primary" @click="handlePage('-')">上一题</el-button>
|
|
|
+ <el-button plain type="primary" @click="handlePage('+')">下一题</el-button>
|
|
|
+ <div class="type-content-inner">
|
|
|
+ <div class="rich-text" v-html="sanitizeHTML(title)"></div>
|
|
|
+ <component :is="getViewCom" :content="content" ref="preview" type="interaction" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <footer style="text-align: right">
|
|
|
+ <el-button type="primary" @click="submitAdd">确 定</el-button>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import SelectPreview from '@/views/book/courseware/preview/components/select/SelectPreview.vue';
|
|
|
+import JudgePreview from '@/views/book/courseware/preview/components/judge/JudgePreview.vue';
|
|
|
+import { GetCoursewareExerciseView } from '@/api/book';
|
|
|
+import { sanitizeHTML } from '@/utils/common';
|
|
|
+export default {
|
|
|
+ name: 'ExerciseReport',
|
|
|
+ components: { SelectPreview, JudgePreview },
|
|
|
+ props: ['reportResult', 'exerciseList', 'userAnswer', 'fileList'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ sanitizeHTML,
|
|
|
+ loading: false,
|
|
|
+ title: '',
|
|
|
+ content: '',
|
|
|
+ index: 0,
|
|
|
+ exerciseLists: this.exerciseList,
|
|
|
+ typeValue: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getViewCom() {
|
|
|
+ switch (this.typeValue) {
|
|
|
+ case 'select':
|
|
|
+ return SelectPreview;
|
|
|
+ case 'judge':
|
|
|
+ return JudgePreview;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ index: {
|
|
|
+ handler(val) {
|
|
|
+ this.handleData();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ 'data.property.file_list': 'handleMindMap',
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.handleData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ componentMove() {},
|
|
|
+
|
|
|
+ handleCancle() {
|
|
|
+ this.$emit('handleCancle');
|
|
|
+ },
|
|
|
+ submitAdd() {
|
|
|
+ this.$emit('handleCancle');
|
|
|
+ },
|
|
|
+ handleData() {
|
|
|
+ let exercise_id = this.fileList[this.index].id;
|
|
|
+ if (this.exerciseLists[exercise_id]) {
|
|
|
+ this.content = this.exerciseLists[exercise_id].content;
|
|
|
+ this.title = this.exerciseLists[exercise_id].title;
|
|
|
+ this.typeValue = this.exerciseLists[exercise_id].content
|
|
|
+ ? JSON.parse(this.exerciseLists[exercise_id].content).type
|
|
|
+ : '';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.preview.showAnswer(true, true, this.userAnswer[exercise_id], true);
|
|
|
+ }, 100);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loading = true;
|
|
|
+ let data = {
|
|
|
+ exercise_id: exercise_id,
|
|
|
+ courseware_id: this.$route.params.id,
|
|
|
+ };
|
|
|
+ GetCoursewareExerciseView(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.content = res.content_exercise;
|
|
|
+ this.title = res.content_title;
|
|
|
+ this.typeValue = res.content_exercise ? JSON.parse(res.content_exercise).type : '';
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.preview.showAnswer(true, true, null, true);
|
|
|
+ }, 100);
|
|
|
+ let obj = {
|
|
|
+ content: res.content_exercise,
|
|
|
+ title: res.content_title,
|
|
|
+ };
|
|
|
+ this.$set(this.exerciseLists, exercise_id, obj);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handlePage(type) {
|
|
|
+ if (type === '-') {
|
|
|
+ if (this.index > 0) {
|
|
|
+ this.index--;
|
|
|
+ } else {
|
|
|
+ this.$message.warning('已经是第一题');
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.index < this.fileList.length - 1) {
|
|
|
+ this.index++;
|
|
|
+ } else {
|
|
|
+ this.$message.warning('已经是最后一题');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.type-content {
|
|
|
+ margin: 12px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.type-content-inner {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+:deep .sn-position {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.report-box {
|
|
|
+ display: flex;
|
|
|
+ gap: 80px;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 24px;
|
|
|
+ background: #f7f7f7;
|
|
|
+
|
|
|
+ .report-item {
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ b {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha