|
@@ -1,37 +1,54 @@
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
:class="['cur-material', { 'align-left': !isAlignCenter }]"
|
|
|
- :visible="dialogVisibleMaterial"
|
|
|
+ :visible="visible"
|
|
|
:modal="false"
|
|
|
width="900px"
|
|
|
@close="dialogMaterialClose"
|
|
|
>
|
|
|
<div slot="title" class="dialog-header">
|
|
|
- <span class="dialog-header-title">当前推送资料</span>
|
|
|
+ <span class="dialog-header-title">
|
|
|
+ {{
|
|
|
+ isCurMaterial
|
|
|
+ ? `当前推送资料 - ${material_name}`
|
|
|
+ : `学习资料 - ${material_type === 'COURSEWARE' ? '课件' : '文档'} - ${material_name}`
|
|
|
+ }}
|
|
|
+ </span>
|
|
|
<span @click="isAlignCenter = !isAlignCenter">
|
|
|
<svg-icon :icon-class="isAlignCenter ? 'align-left' : 'align-center'" />
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="material-name">{{ materialName }}</div>
|
|
|
-
|
|
|
- <template v-if="materialType === 'COURSEWARE'">
|
|
|
- <bookquestion
|
|
|
- v-if="sys_type === 'GCLS'"
|
|
|
- ref="courseware"
|
|
|
- :context="context"
|
|
|
- @handleBookUserAnswer="handleBookUserAnswer"
|
|
|
- />
|
|
|
-
|
|
|
- <bookailp
|
|
|
- v-else
|
|
|
- :context="context"
|
|
|
- :ui-type="ui_type"
|
|
|
- :preview-width="850"
|
|
|
- :preview-height="478"
|
|
|
- @handleBookUserAnswer="handleBookUserAnswer"
|
|
|
- />
|
|
|
+ <div v-show="!isCurMaterial && material_type === 'COURSEWARE'" class="answer-data">
|
|
|
+ <span>用时</span>
|
|
|
+ <span class="answer-data-duration">{{ answerData.duration }}秒</span>
|
|
|
+ <span class="answer-data-label">正确</span>
|
|
|
+ <span class="answer-data-count-right">{{ answerData.count_right }}</span>
|
|
|
+ <span class="answer-data-label">错误</span>
|
|
|
+ <span class="answer-data-count-error">{{ answerData.count_error }}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="material_type === 'COURSEWARE' && visible">
|
|
|
+ <template v-if="sys_type === 'GCLS'">
|
|
|
+ <bookreport
|
|
|
+ v-if="isStudent"
|
|
|
+ :context="context"
|
|
|
+ :book-client-width="800"
|
|
|
+ :book-answer-content="bookAnswerContent"
|
|
|
+ />
|
|
|
+ <bookquestion v-else ref="courseware" :context="context" @handleBookUserAnswer="handleBookUserAnswer" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <bookailp
|
|
|
+ :context="context"
|
|
|
+ :ui-type="ui_type"
|
|
|
+ :preview-width="800"
|
|
|
+ :preview-height="450"
|
|
|
+ @handleBookUserAnswer="handleBookUserAnswer"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
</template>
|
|
|
+
|
|
|
<template v-else>
|
|
|
<template v-if="fileType === 'pdf'">
|
|
|
<pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" />
|
|
@@ -52,16 +69,22 @@
|
|
|
</template>
|
|
|
|
|
|
<div slot="footer">
|
|
|
- <el-button type="primary" @click="finishMyMaterial">完成</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="isCurMaterial || (!isFinished && material_type === 'COURSEWARE')"
|
|
|
+ type="primary"
|
|
|
+ @click="finishMyMaterial"
|
|
|
+ >
|
|
|
+ 完成
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import pdf from 'vue-pdf';
|
|
|
-import { GetCoursewareContent_View } from '@/api/course';
|
|
|
+import { GetCoursewareContent_View, GetMaterialInfo } from '@/api/course';
|
|
|
import { GetFileStoreInfo, getContentFile } from '@/api/app';
|
|
|
-import { FinishMyMaterial } from '@/api/live';
|
|
|
+import { FinishMyMaterial, GetCurMaterialSent, GetStudentExamAnswer_FinishMaterial } from '@/api/live';
|
|
|
import { getToken } from '@/utils/auth';
|
|
|
|
|
|
export default {
|
|
@@ -69,10 +92,6 @@ export default {
|
|
|
pdf
|
|
|
},
|
|
|
props: {
|
|
|
- dialogVisibleMaterial: {
|
|
|
- default: false,
|
|
|
- type: Boolean
|
|
|
- },
|
|
|
taskId: {
|
|
|
default: '',
|
|
|
type: String
|
|
@@ -81,21 +100,22 @@ export default {
|
|
|
default: '',
|
|
|
type: String
|
|
|
},
|
|
|
- materialName: {
|
|
|
- default: '',
|
|
|
- type: String
|
|
|
- },
|
|
|
materialType: {
|
|
|
default: '',
|
|
|
type: String
|
|
|
},
|
|
|
- materialPictureUrl: {
|
|
|
- default: '',
|
|
|
- type: String
|
|
|
+ isFinished: {
|
|
|
+ default: false,
|
|
|
+ type: Boolean
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ visible: false,
|
|
|
+ material_id: '',
|
|
|
+ material_name: '',
|
|
|
+ material_type: '',
|
|
|
+ material_picture_url: '',
|
|
|
context: null,
|
|
|
exam_answer: '',
|
|
|
ui_type: '',
|
|
@@ -104,19 +124,33 @@ export default {
|
|
|
file_url_https: '',
|
|
|
pdfSrc: '',
|
|
|
numPages: 1,
|
|
|
- isAlignCenter: true
|
|
|
+ curStudentID: '',
|
|
|
+ bookAnswerContent: '',
|
|
|
+ isAlignCenter: true,
|
|
|
+ timer: null,
|
|
|
+ isCurMaterial: true,
|
|
|
+ answerData: {
|
|
|
+ duration: 0,
|
|
|
+ count_not_done: 0,
|
|
|
+ count_right: 0,
|
|
|
+ count_error: 0
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
fileType() {
|
|
|
- return this.file_url_https.slice(
|
|
|
- this.file_url_https.lastIndexOf('.') + 1,
|
|
|
- this.file_url_https.length
|
|
|
- );
|
|
|
+ return this.file_url_https.slice(this.file_url_https.lastIndexOf('.') + 1, this.file_url_https.length);
|
|
|
+ },
|
|
|
+ isStudent() {
|
|
|
+ return this.curStudentID.length > 0;
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- dialogVisibleMaterial(newVal) {
|
|
|
+ visible(newVal) {
|
|
|
+ if (newVal && !this.isCurMaterial) {
|
|
|
+ this.getMaterialInfo();
|
|
|
+ }
|
|
|
+
|
|
|
if (!newVal) {
|
|
|
this.context = null;
|
|
|
this.exam_answer = '';
|
|
@@ -124,10 +158,17 @@ export default {
|
|
|
this.file_url_https = '';
|
|
|
this.pdfSrc = '';
|
|
|
this.numPages = 1;
|
|
|
+ this.curStudentID = '';
|
|
|
+ this.material_id = '';
|
|
|
+ this.material_name = '';
|
|
|
+ this.material_type = '';
|
|
|
+ this.material_picture_url = '';
|
|
|
}
|
|
|
},
|
|
|
- materialId() {
|
|
|
- if (this.materialType === 'COURSEWARE') {
|
|
|
+
|
|
|
+ material_id(newVal) {
|
|
|
+ if (newVal.length === 0) return;
|
|
|
+ if (this.material_type === 'COURSEWARE') {
|
|
|
this.getCoursewareContent_View();
|
|
|
} else {
|
|
|
this.getFileStoreInfo();
|
|
@@ -136,55 +177,119 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
this.uploadBookWriteParent();
|
|
|
+ this.getCurMaterialSent();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
},
|
|
|
methods: {
|
|
|
+ dialogShow() {
|
|
|
+ this.isCurMaterial = false;
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+
|
|
|
dialogMaterialClose() {
|
|
|
+ this.visible = false;
|
|
|
+ if (!this.timer) this.getCurMaterialSent();
|
|
|
this.$emit('dialogMaterialClose');
|
|
|
},
|
|
|
|
|
|
- getCoursewareContent_View() {
|
|
|
- GetCoursewareContent_View({ id: this.materialId }).then(({ content }) => {
|
|
|
- if (content) {
|
|
|
- if (this.sys_type === 'GCLS') {
|
|
|
- this.context = {
|
|
|
- id: this.materialId,
|
|
|
- ui_type: JSON.parse(content).question.ui_type,
|
|
|
- content: JSON.parse(content)
|
|
|
- };
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.courseware.handleAnswerTimeStart();
|
|
|
- });
|
|
|
- } else {
|
|
|
- const contents = JSON.parse(content);
|
|
|
- if (contents.question && contents.question.length > 0) {
|
|
|
- this.context = JSON.parse(contents.question);
|
|
|
- this.ui_type = contents.ui_type ? contents.ui_type : '';
|
|
|
+ getCurMaterialSent() {
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ GetCurMaterialSent({ task_id: this.taskId }).then(
|
|
|
+ ({ material_id, material_name, material_type, material_picture_url }) => {
|
|
|
+ if (material_id !== undefined && material_id.length > 0) {
|
|
|
+ this.visible = true;
|
|
|
+
|
|
|
+ this.isCurMaterial = true;
|
|
|
+ this.material_id = material_id;
|
|
|
+ this.material_name = material_name;
|
|
|
+ this.material_type = material_type;
|
|
|
+ this.material_picture_url = material_picture_url;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ this.curStudentID = '-';
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.curStudentID = '';
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- } else {
|
|
|
- this.context = null;
|
|
|
+ );
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+
|
|
|
+ getMaterialInfo() {
|
|
|
+ GetMaterialInfo({ task_id: this.taskId, material_id: this.materialId, material_type: this.materialType }).then(
|
|
|
+ ({ material_id, material_name, material_type }) => {
|
|
|
+ this.material_id = material_id;
|
|
|
+ this.material_name = material_name;
|
|
|
+ this.material_type = material_type;
|
|
|
}
|
|
|
- });
|
|
|
+ );
|
|
|
},
|
|
|
|
|
|
- getFileStoreInfo() {
|
|
|
- GetFileStoreInfo({ file_id: this.materialId }).then(
|
|
|
- ({ file_relative_path, file_url_https }) => {
|
|
|
- this.file_relative_path = file_relative_path;
|
|
|
- this.file_url_https = file_url_https;
|
|
|
- let fileType = file_url_https.slice(
|
|
|
- file_url_https.lastIndexOf('.') + 1,
|
|
|
- file_url_https.length
|
|
|
- );
|
|
|
- if (fileType === 'pdf') {
|
|
|
- this.getNumPages(file_url_https);
|
|
|
+ getCoursewareContent_View() {
|
|
|
+ GetCoursewareContent_View({ id: this.material_id })
|
|
|
+ .then(({ content }) => {
|
|
|
+ if (content) {
|
|
|
+ if (this.sys_type === 'GCLS') {
|
|
|
+ this.context = {
|
|
|
+ id: this.material_id,
|
|
|
+ ui_type: JSON.parse(content).question.ui_type,
|
|
|
+ content: JSON.parse(content)
|
|
|
+ };
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.courseware.handleAnswerTimeStart();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ const contents = JSON.parse(content);
|
|
|
+ if (contents.question && contents.question.length > 0) {
|
|
|
+ this.context = JSON.parse(contents.question);
|
|
|
+ this.ui_type = contents.ui_type ? contents.ui_type : '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.context = null;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ if (this.isFinished && !this.isCurMaterial) {
|
|
|
+ this.getStudentExamAnswer_FinishMaterial();
|
|
|
}
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getFileStoreInfo() {
|
|
|
+ GetFileStoreInfo({ file_id: this.material_id }).then(({ file_relative_path, file_url_https }) => {
|
|
|
+ this.file_relative_path = file_relative_path;
|
|
|
+ this.file_url_https = file_url_https;
|
|
|
+ let fileType = file_url_https.slice(file_url_https.lastIndexOf('.') + 1, file_url_https.length);
|
|
|
+ if (fileType === 'pdf') {
|
|
|
+ this.getNumPages(file_relative_path);
|
|
|
}
|
|
|
- );
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getStudentExamAnswer_FinishMaterial() {
|
|
|
+ let student_id = this.$store.state.user.user_code;
|
|
|
+ GetStudentExamAnswer_FinishMaterial({
|
|
|
+ task_id: this.taskId,
|
|
|
+ material_id: this.material_id,
|
|
|
+ material_type: this.material_type,
|
|
|
+ student_id
|
|
|
+ }).then(({ content, duration, count_not_done, count_right, count_error }) => {
|
|
|
+ this.bookAnswerContent = content;
|
|
|
+ this.answerData = { duration, count_not_done, count_right, count_error };
|
|
|
+
|
|
|
+ this.curStudentID = '';
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.curStudentID = student_id;
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
getNumPages(url) {
|
|
|
- let loadingTask = pdf.createLoadingTask(url);
|
|
|
+ let loadingTask = pdf.createLoadingTask(`${process.env.VUE_APP_PDF}${url}`);
|
|
|
loadingTask.promise
|
|
|
.then(pdf => {
|
|
|
this.pdfSrc = loadingTask;
|
|
@@ -201,24 +306,20 @@ export default {
|
|
|
},
|
|
|
|
|
|
finishMyMaterial() {
|
|
|
- if (
|
|
|
- this.materialType === 'COURSEWARE' &&
|
|
|
- this.exam_answer.length === 0 &&
|
|
|
- this.sys_type === 'GCLS'
|
|
|
- ) {
|
|
|
+ if (this.material_type === 'COURSEWARE' && this.exam_answer.length === 0 && this.sys_type === 'GCLS') {
|
|
|
this.$message.warning('请完成课件');
|
|
|
return;
|
|
|
}
|
|
|
const loading = this.$loading();
|
|
|
FinishMyMaterial({
|
|
|
task_id: this.taskId,
|
|
|
- material_id: this.materialId,
|
|
|
- material_type: this.materialType,
|
|
|
+ material_id: this.material_id,
|
|
|
+ material_type: this.material_type,
|
|
|
exam_answer: this.exam_answer
|
|
|
})
|
|
|
.then(() => {
|
|
|
- this.$message.success('完成推送资料成功');
|
|
|
- this.$emit('dialogMaterialClose');
|
|
|
+ this.$message.success(`完成${this.isCurMaterial ? '推送' : ''}资料成功`);
|
|
|
+ this.dialogMaterialClose();
|
|
|
})
|
|
|
.finally(() => {
|
|
|
loading.close();
|
|
@@ -281,7 +382,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-@import '~@/styles/mixin.scss';
|
|
|
+@import '~@/styles/mixin';
|
|
|
|
|
|
.cur-material {
|
|
|
@include dialog;
|
|
@@ -299,8 +400,8 @@ export default {
|
|
|
padding-right: 24px;
|
|
|
|
|
|
&-title {
|
|
|
- font-weight: bold;
|
|
|
font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
|
|
@@ -310,11 +411,37 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .material-name {
|
|
|
+ .answer-data {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12px;
|
|
|
font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- color: #000;
|
|
|
- margin-bottom: 16px;
|
|
|
+
|
|
|
+ &-label {
|
|
|
+ margin-left: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-duration,
|
|
|
+ &-count-right,
|
|
|
+ &-count-error {
|
|
|
+ min-width: 60px;
|
|
|
+ padding: 0 24px;
|
|
|
+ text-align: center;
|
|
|
+ border-right: 2px solid #dfdfdf;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-count-error {
|
|
|
+ border-right-width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ height: 60vh;
|
|
|
+
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|