huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

课程预览样式调整

Browse Source
UI_2022-02-10
yujialong 3 years ago
parent 8c9eb5abf5
commit b1671582a1
4 changed files with 59 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/index.js
  2. 54
      src/pages/ass/list/index.vue
  3. 4
      src/pages/course/details/index.vue
  4. 21
      src/pages/station/preview/index.vue

9
src/api/index.js
Unescape View File

@ -3,10 +3,9 @@ import Setting from "@/setting";
// let host = `${Setting.apiBaseURL}evaluation/`;
let loginhost = `${Setting.apiBaseURL}liuwanr/`;
// let host = "http://192.168.31.151:9000/"; // 榕
let host = "http://192.168.31.151:9000/"; // 榕
// let host = "http://192.168.31.137:9000/"; // 赓
let host = "http://39.108.250.202:9000/"; // 测试服
// let host = "http://39.108.250.202:9000/"; // 测试服
export default {
host,
@ -16,8 +15,10 @@ export default {
verification: `${host}users/users/user/captcha`,// 验证码图片
//实验台
curriculumChapter: `${host}nakadai/curriculum/chapter/queryChaptersAndSubsections`, //
curriculumDetail: `${host}nakadai/nakadai/curriculum/curriculumDetail`, // 课程详情
curriculumChapter: `${host}nakadai/curriculum/chapter/queryChaptersAndSubsections`, // 根据课程id查询章节小节,树状结构
curriculumGetSubsection: `${host}nakadai/curriculum/subsection/getSubsection`, // 根据小节id获取预览文件地址
// 能力测评
canExperiment: `${host}occupationlab/occupationlab/evaluationrecord/can_experiment`, // 查询是否能够开启实验

54
src/pages/ass/list/index.vue
Unescape View File

@ -86,21 +86,24 @@
<span>{{ scope.row.countDown | timeFilter }}</span>
</template>
</el-table-column>
<el-table-column label="实验状态" align="center">
<el-table-column label="考核状态" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{ status[scope.row.status] }}</span>
</template>
</el-table-column>
<el-table-column label="实验状态" align="center">
<template slot-scope="scope">
<span class="ellipsis">{{ stuState[scope.row.stuState] }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<!--status:考核状态(0、待开始 1、进行中 2、已结束); stuState:学生考试状态(0、未考 1、在考 2、已考)-->
<el-button v-if="scope.row.status === 2 && scope.row.stuState === 0" type="text" disabled>未参加
</el-button>
<el-button v-if="scope.row.status !== 2 && scope.row.stuState === 0" type="text"
<el-button v-if="scope.row.status === 2 && scope.row.stuState === 0" type="text" disabled>未参加</el-button>
<el-button v-if="scope.row.status !== 2 && (scope.row.stuState === 0 || scope.row.stuState === 1)" type="text"
@click="entry(scope.row)" :disabled="scope.row.status !== 1">进入
</el-button>
<el-button v-if="scope.row.status === 1 && scope.row.stuState === 2" type="text" disabled>已提交
</el-button>
<el-button v-if="scope.row.status === 1 && scope.row.stuState === 2" type="text" disabled>已提交</el-button>
<el-button v-if="scope.row.status === 2 && scope.row.stuState === 2" type="text"
@click="show(scope.row)">查看成绩
</el-button>
@ -140,7 +143,7 @@ export default {
classList: [],
courseList: [],
host: Setting.apiBaseURL,
status: ["待开始", "进行中", "已完成"],
status: ["待开始", "进行中", "已结束"],
statusList: [{
name: "不限",
value: ""
@ -151,9 +154,10 @@ export default {
name: "进行中",
value: 1
}, {
name: "已完成",
name: "已结束",
value: 2
}],
stuState: ["未考", "在考", "已考"],
listData: [],
date: [],
form: {
@ -250,10 +254,16 @@ export default {
beginTimer() {
this.ticker = setInterval(() => {
for (let i = 0; i < this.listData.length; i++) {
console.log(i);
const item = this.listData[i];
if (item.countDown && item.countDown > 0) {
if (item.countDown > 0) {
item.countDown--;
} else {
if (item.status === 0 && item.type === 2) { // 待开始-定时发布
item.status = 1;
item.countDown = (new Date(item.stopTime).getTime() - new Date().getTime()) / 1000;
} else if (item.status === 1) {
item.status = 2;
}
}
this.$set(this.listData, i, item);
}
@ -275,12 +285,24 @@ export default {
this.listData.forEach(i => {
if (i.status === 2) { // 已结束
i.countDown = 0;
} else if (i.status === 1) { // 进行中
i.countDown = (new Date(i.stopTime).getTime() - new Date().getTime()) / 1000;
// console.log(1, i.countDown);
} else if (i.status === 0) { // 待开始
i.countDown = (new Date(i.startTime).getTime() - new Date().getTime()) / 1000; // 获得两个日期时间的秒数差
// console.log(0, i.countDown);
} else {
if (i.type === 2) { // 定时发布
if (i.status === 0) {
// 待开始
i.countDown = (new Date(i.startTime).getTime() - new Date().getTime()) / 1000; // 获得两个日期时间的秒数差
} else if (i.status === 1) {
// 进行中
i.countDown = (new Date(i.stopTime).getTime() - new Date().getTime()) / 1000;
}
} else if (i.type === 1) { // 手动发布
if (i.status === 0) {
// 待开始
i.countDown = 0;
} else if (i.status === 1) {
// 进行中
i.countDown = (new Date(i.stopTime).getTime() - new Date().getTime()) / 1000;
}
}
}
});
this.beginTimer();

4
src/pages/course/details/index.vue
Unescape View File

@ -5,8 +5,8 @@
<el-page-header @back="goBack" :content="'课程详情'"></el-page-header>
</div>
</el-card>
<el-card shadow="hover" class="m-b-20">
<div class="flex p-40">
<el-card shadow="hover" class="m-b-20" style="background: none;">
<div class="flex">
<div class="cover" :class="{'is-word': showMask1}">
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
<template v-else-if="iframeSrc">

21
src/pages/station/preview/index.vue
Unescape View File

@ -5,9 +5,10 @@
<el-page-header @back="goBack" :content="curriculumName"></el-page-header>
</div>
</el-card>
<el-card shadow="hover" class="m-b-20">
<div class="flex p-40">
<el-card shadow="hover" class="m-b-20" style="background: none;">
<div class="flex">
<div class="cover" :class="{'is-word': showMask1}">
<!--实验台不显示课程封面-->
<img v-if="coverUrl" :src="coverUrl" alt="" width="100%" height="100%">
<template v-else-if="iframeSrc">
<iframe class="inner fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0"></iframe>
@ -46,7 +47,7 @@
</div>
</div>
<div class="catalog flex-1">
<div style="padding: 0 16px">
<div class="m-b-20">
<el-button type="primary" style="width: 100%; height: 50px; font-size: 18px">进 入 实 验</el-button>
</div>
<div class="list">
@ -70,16 +71,18 @@
<el-card shadow="hover" class="m-b-20">
<h4 style="margin-bottom: 10px">课程简介</h4>
<p>{{ briefIntroduction }}123</p>
<p>{{ briefIntroduction }}</p>
</el-card>
<el-card shadow="hover" class="m-b-20">
<h4 style="margin-bottom: 10px">课程目标</h4>
<p>{{ teachingObjectives }}</p>
</el-card>
<!--
<el-card shadow="hover" class="m-b-20">
<h4 style="margin-bottom: 10px">课程进度</h4>
<el-progress :text-inside="true" :stroke-width="16" :percentage="70"></el-progress>
</el-card>
-->
</div>
</template>
@ -144,13 +147,17 @@ export default {
async getData() {
let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}`);
this.courseName = data.curriculumName;
this.coverUrl = data.coverUrl;
// this.coverUrl = data.coverUrl;
this.briefIntroduction = data.briefIntroduction;
this.teachingObjectives = data.teachingObjectives;
},
async getChapter() {
let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`);
this.videoList = res.chapterList;
if (this.videoList.length && this.videoList[0].subsectionList && this.videoList[0].subsectionList.length) {
// console.log(this.videoList[0].subsectionList[0]);
this.preview(this.videoList[0].subsectionList[0]);
}
},
// 插入阿里云播放器脚本
insertScript() {
@ -210,7 +217,7 @@ export default {
this.pdfSrc = row.fileUrl;
this.pdfVisible = true;
} else {
this.$get(`${this.api.getSubsection}/${row.id}`).then(res => {
this.$get(`${this.api.curriculumGetSubsection}/${row.id}`).then(res => {
if (row.fileType == "pptx") {
this.isPPT = true;
this.isWord = false;
@ -356,7 +363,7 @@ $height: 700px;
margin-left: 40px;
}
.list{
height: calc(700px - 50px) ;
height: calc(700px - 70px) ;
overflow-y: auto;
padding: 24px 16px;
background: #fff;

Write Preview
Loading…
Cancel
Save