|
@@ -6,29 +6,48 @@
|
|
title="答题统计"
|
|
title="答题统计"
|
|
@close="dialogCompleteClose"
|
|
@close="dialogCompleteClose"
|
|
>
|
|
>
|
|
- <template v-if="material_type === 'COURSEWARE'">
|
|
|
|
- <question :context="context" />
|
|
|
|
- </template>
|
|
|
|
- <template v-else>
|
|
|
|
- <!-- pdf -->
|
|
|
|
- <template v-if="fileType === 'pdf'">
|
|
|
|
- <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
|
|
|
|
- </template>
|
|
|
|
|
|
+ <div class="complete-list-top">
|
|
|
|
+ <div class="material-name">{{ material_name }}</div>
|
|
|
|
+ <div class="student-list">
|
|
|
|
+ <i class="el-icon-arrow-left" />
|
|
|
|
+ <div class="avatar-list">
|
|
|
|
+ <el-avatar
|
|
|
|
+ v-for="item in student_list"
|
|
|
|
+ :key="item.student_id"
|
|
|
|
+ size="small"
|
|
|
|
+ :class="{ active: curStudent === item.student_id }"
|
|
|
|
+ :src="item.student_image_url"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <i class="el-icon-arrow-right" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
|
|
- <template v-else-if="isImage(fileType)">
|
|
|
|
- <el-image fit="contain" :src="file_url_https" />
|
|
|
|
|
|
+ <div class="complete-list-container">
|
|
|
|
+ <template v-if="material_type === 'COURSEWARE'">
|
|
|
|
+ <question :context="context" />
|
|
</template>
|
|
</template>
|
|
|
|
+ <template v-else>
|
|
|
|
+ <!-- pdf -->
|
|
|
|
+ <template v-if="fileType === 'pdf'">
|
|
|
|
+ <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <template v-else-if="isImage(fileType)">
|
|
|
|
+ <el-image fit="contain" :src="file_url_https" />
|
|
|
|
+ </template>
|
|
|
|
|
|
- <template v-else-if="fileType !== 'pdf'">
|
|
|
|
- <iframe
|
|
|
|
- :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${file_url_https}`"
|
|
|
|
- width="100%"
|
|
|
|
- height="490px"
|
|
|
|
- scrolling="no"
|
|
|
|
- >
|
|
|
|
- </iframe>
|
|
|
|
|
|
+ <template v-else-if="fileType !== 'pdf'">
|
|
|
|
+ <iframe
|
|
|
|
+ :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${file_url_https}`"
|
|
|
|
+ width="100%"
|
|
|
|
+ height="490px"
|
|
|
|
+ scrolling="no"
|
|
|
|
+ >
|
|
|
|
+ </iframe>
|
|
|
|
+ </template>
|
|
</template>
|
|
</template>
|
|
- </template>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
<div slot="footer"></div>
|
|
<div slot="footer"></div>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
@@ -36,7 +55,7 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import pdf from 'vue-pdf';
|
|
import pdf from 'vue-pdf';
|
|
-import { GetCurMaterialSent } from '@/api/live';
|
|
|
|
|
|
+import { GetCurMaterialSent, GetStudentList_FinishMaterial } from '@/api/live';
|
|
import { GetCoursewareContent_View } from '@/api/course';
|
|
import { GetCoursewareContent_View } from '@/api/course';
|
|
import { GetFileStoreInfo } from '@/api/app';
|
|
import { GetFileStoreInfo } from '@/api/app';
|
|
|
|
|
|
@@ -64,7 +83,10 @@ export default {
|
|
file_relative_path: '',
|
|
file_relative_path: '',
|
|
file_url_https: '',
|
|
file_url_https: '',
|
|
pdfSrc: '',
|
|
pdfSrc: '',
|
|
- numPages: 1
|
|
|
|
|
|
+ numPages: 1,
|
|
|
|
+ student_list: [],
|
|
|
|
+ curStudent: '',
|
|
|
|
+ listTimer: null
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -79,13 +101,25 @@ export default {
|
|
dialogVisibleComplete(newVal) {
|
|
dialogVisibleComplete(newVal) {
|
|
if (newVal) {
|
|
if (newVal) {
|
|
this.getCurMaterialSent();
|
|
this.getCurMaterialSent();
|
|
|
|
+ } else {
|
|
|
|
+ // 对话框,关闭时清理
|
|
|
|
+ clearInterval(this.listTimer);
|
|
|
|
+ this.material_id = '';
|
|
|
|
+ this.material_name = '';
|
|
|
|
+ this.student_list = [];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- material_id() {
|
|
|
|
- if (this.material_type === 'COURSEWARE') {
|
|
|
|
- this.getCoursewareContent_View();
|
|
|
|
- } else {
|
|
|
|
- this.getFileStoreInfo();
|
|
|
|
|
|
+ material_id(newVal) {
|
|
|
|
+ if (newVal) {
|
|
|
|
+ this.listTimer = setInterval(() => {
|
|
|
|
+ this.getStudentList_FinishMaterial();
|
|
|
|
+ }, 3000);
|
|
|
|
+
|
|
|
|
+ if (this.material_type === 'COURSEWARE') {
|
|
|
|
+ this.getCoursewareContent_View();
|
|
|
|
+ } else {
|
|
|
|
+ this.getFileStoreInfo();
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -103,6 +137,20 @@ export default {
|
|
);
|
|
);
|
|
},
|
|
},
|
|
|
|
|
|
|
|
+ getStudentList_FinishMaterial() {
|
|
|
|
+ GetStudentList_FinishMaterial({
|
|
|
|
+ task_id: this.taskId,
|
|
|
|
+ material_id: this.material_id,
|
|
|
|
+ material_type: this.material_type
|
|
|
|
+ })
|
|
|
|
+ .then(({ student_list }) => {
|
|
|
|
+ this.student_list = student_list;
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ clearInterval(this.listTimer);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
getCoursewareContent_View() {
|
|
getCoursewareContent_View() {
|
|
GetCoursewareContent_View({ id: this.material_id }).then(res => {
|
|
GetCoursewareContent_View({ id: this.material_id }).then(res => {
|
|
if (res.content) {
|
|
if (res.content) {
|
|
@@ -163,9 +211,45 @@ export default {
|
|
.complete-list {
|
|
.complete-list {
|
|
@include dialog;
|
|
@include dialog;
|
|
|
|
|
|
- .el-image {
|
|
|
|
- width: 100%;
|
|
|
|
- height: calc(100% - 4px);
|
|
|
|
|
|
+ &-top {
|
|
|
|
+ .material-name {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-weight: 700;
|
|
|
|
+ color: #000;
|
|
|
|
+ margin-bottom: 16px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .student-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ height: 32px;
|
|
|
|
+ align-items: center;
|
|
|
|
+ margin-bottom: 24px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .avatar-list {
|
|
|
|
+ width: calc(100% - 48px);
|
|
|
|
+
|
|
|
|
+ .el-avatar {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ > i {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &-container {
|
|
|
|
+ overflow: auto;
|
|
|
|
+ height: calc(55vh - 105px);
|
|
|
|
+
|
|
|
|
+ .el-image {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: calc(100% - 4px);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|