parent
134ed3f04f
commit
92abe14796
11 changed files with 69 additions and 983 deletions
|
After Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
@ -1,907 +0,0 @@ |
|||||||
<template> |
|
||||||
<div class="box" style="overflow-x: hidden"> |
|
||||||
<el-row :gutter="20" style="padding-top: 20px;"> |
|
||||||
<el-col :span="24"> |
|
||||||
<el-col :span="18"> |
|
||||||
<div class="cover"> |
|
||||||
<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> |
|
||||||
<template v-if="showMask"> |
|
||||||
<div class="mask" style="width: 500px;height: 30px;top: 53px;right: 320px"></div> |
|
||||||
<div class="mask" style="width: 175px;height: 30px;top: 53px;right: 5px"></div> |
|
||||||
</template> |
|
||||||
<template v-if="showMask1"> |
|
||||||
<div class="word-mask" style="height: 40px;"></div> |
|
||||||
<div class="word-mask2" |
|
||||||
style="top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);"></div> |
|
||||||
</template> |
|
||||||
<template v-if="showMask2"> |
|
||||||
<div class="excel-mask1" style="height: 48px;"></div> |
|
||||||
</template> |
|
||||||
</template> |
|
||||||
<div class="pdf inner" v-else-if="pdfSrc"> |
|
||||||
<pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf> |
|
||||||
</div> |
|
||||||
<div v-else> |
|
||||||
<video ref="video" controls class="video_wid" :src="videoSrc" |
|
||||||
controlsList="nodownload"></video> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-col> |
|
||||||
<el-col :span="6"> |
|
||||||
<div class="catalog"> |
|
||||||
<div class="btns"> |
|
||||||
<!-- <el-button type="primary" @click="toEvaluation(1,2)">虚拟仿真实验</el-button> |
|
||||||
<el-button type="primary" @click="toEvaluation(1,3)">教学实验</el-button> --> |
|
||||||
<el-button type="primary" @click="toEvaluation(0,2)">能力测评</el-button> |
|
||||||
</div> |
|
||||||
<ul class="filter" style="margin: 10px 0"> |
|
||||||
<li> |
|
||||||
<label>系统</label> |
|
||||||
<el-select v-model="systemId" placeholder="请选择" @change="systemChange"> |
|
||||||
<el-option |
|
||||||
v-for="item in systemList" |
|
||||||
:key="item.value" |
|
||||||
:label="item.label" |
|
||||||
:value="item.id" |
|
||||||
></el-option> |
|
||||||
</el-select> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
|
|
||||||
<div class="list_he"> |
|
||||||
<h4 class="list_title">学习资源</h4> |
|
||||||
<template v-if="systemId == 1"> |
|
||||||
<div v-for="(item,index) in videoList1" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 4"> |
|
||||||
<div v-for="(item,index) in videoList4" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 5"> |
|
||||||
<div v-for="(item,index) in videoList5" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 6"> |
|
||||||
<div v-for="(item,index) in videoList6" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 7"> |
|
||||||
<div v-for="(item,index) in videoList7" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 8"> |
|
||||||
<div v-for="(item,index) in videoList8" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 9"> |
|
||||||
<div v-for="(item,index) in videoList9" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else-if="systemId == 10"> |
|
||||||
<div v-for="(item,index) in videoList10" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template v-else> |
|
||||||
<div v-for="(item,index) in videoList1" :key="index"> |
|
||||||
<div class="flex-between list_catalog"> |
|
||||||
<p class="experimental_title" :class="{active: curLink == item.title}" |
|
||||||
@click="preview(item)">{{ index + 1 }} {{ item.title }}</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-col> |
|
||||||
</el-col> |
|
||||||
</el-row> |
|
||||||
|
|
||||||
<!-- 答题弹框 --> |
|
||||||
<el-dialog :visible.sync="evaluationVisible" width="30%" custom-class="evaluation_dialog" center |
|
||||||
:close-on-click-modal="false"> |
|
||||||
<div class="title">能力测评</div> |
|
||||||
<div class="ques-wrap"> |
|
||||||
<p class="serial">{{ question.currentQuestionSortNo }}/{{ question.totalQuestionNum }}</p> |
|
||||||
<p class="type">({{ question.questionTypeName }})</p> |
|
||||||
<div class="ques">{{ question.questionStem }}</div> |
|
||||||
<div class="countdown flex-center"> |
|
||||||
<img src="@/assets/img/hourglass.png" alt=""> |
|
||||||
<span>倒计时：{{ countdown }}</span> |
|
||||||
</div> |
|
||||||
<ul class="options" :class="{isDone}"> |
|
||||||
<li v-for="(item,key) in question.options" :key="key" :class="{active: selected.includes(key)}" |
|
||||||
@click="selectOption(key)"><em>{{ key }}.</em><span>{{ item }}</span></li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div slot="footer" class="dialog-footer" v-if="!isDone"> |
|
||||||
<template v-if="lastOne"> |
|
||||||
<el-button @click="prevQues">上一题</el-button> |
|
||||||
<el-button type="primary" @click="submitQues">提交</el-button> |
|
||||||
</template> |
|
||||||
<template v-else> |
|
||||||
<el-button class="first" @click="prevQues">上一题</el-button> |
|
||||||
<el-button class="second" type="primary" @click="nextQues">下一题</el-button> |
|
||||||
</template> |
|
||||||
</div> |
|
||||||
</el-dialog> |
|
||||||
|
|
||||||
<!-- 提交成绩弹框 --> |
|
||||||
<el-dialog :visible.sync="resultVisible" width="30%" custom-class="result_dialog" center |
|
||||||
:close-on-click-modal="false"> |
|
||||||
<div class="result"><span>{{ result.isPassed }}</span></div> |
|
||||||
|
|
||||||
<div class="ques-wrap"> |
|
||||||
<div class="point"> |
|
||||||
<span>{{ result.totalScore }}</span>分 |
|
||||||
</div> |
|
||||||
<p class="tips"> |
|
||||||
{{ result.isPassed == "通过" ? "恭喜" : "" }}你答对{{ result.correctQuestionNum |
|
||||||
}}题，正确率{{ result.correctRate }}！</p> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div slot="footer" class="dialog-footer"> |
|
||||||
<el-button class="first" @click="toEvaluation(0)">再试一次</el-button> |
|
||||||
<el-button class="second" type="primary" @click="getDetail">成绩详情</el-button> |
|
||||||
<el-button v-if="result.isPassed == '通过'" class="third" type="primary" @click="goSubSystem">进入实训 |
|
||||||
</el-button> |
|
||||||
</div> |
|
||||||
</el-dialog> |
|
||||||
|
|
||||||
<!-- 成绩详情弹框 --> |
|
||||||
<el-dialog :visible.sync="detailVisible" width="30%" custom-class="detail_dialog" center |
|
||||||
:close-on-click-modal="false"> |
|
||||||
<div class="title">成绩详情</div> |
|
||||||
<div style="min-height: 370px"> |
|
||||||
<el-table :data="detailData" height="340" border style="width: 100%"> |
|
||||||
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column> |
|
||||||
<el-table-column prop="date" label="正误" min-width="45" align="center"> |
|
||||||
<template slot-scope="scope"> |
|
||||||
<img v-if="scope.row.questionScore" width="15" src="@/assets/img/true.png" alt=""> |
|
||||||
<img v-else width="15" src="@/assets/img/false.png" alt=""> |
|
||||||
</template> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column prop="questionScore" label="得分" min-width="45" align="center"></el-table-column> |
|
||||||
<el-table-column prop="answer" label="正确答案" min-width="70" align="center"></el-table-column> |
|
||||||
<el-table-column prop="userAnswer" label="你的答案" min-width="70" align="center"></el-table-column> |
|
||||||
<el-table-column prop="answerAnalysis" label="解析" min-width="80"></el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
<p class="total">得分：{{ totalScore }}分</p> |
|
||||||
</el-dialog> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { mapState, mapActions } from "vuex"; |
|
||||||
import util from "@/libs/util"; |
|
||||||
import Setting from "@/setting"; |
|
||||||
import pdf from "@/components/pdf"; |
|
||||||
import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList"; |
|
||||||
|
|
||||||
export default { |
|
||||||
components: { pdf }, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
systemId: Setting.systemId, |
|
||||||
systemList: Setting.systemList, |
|
||||||
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4", |
|
||||||
videoSrc: "", |
|
||||||
curLink: "", |
|
||||||
videoList1, |
|
||||||
videoList4, |
|
||||||
videoList5, |
|
||||||
videoList6, |
|
||||||
videoList7, |
|
||||||
videoList8, |
|
||||||
evaluationVisible: false, |
|
||||||
resultVisible: false, |
|
||||||
detailVisible: false, |
|
||||||
lastOne: false, |
|
||||||
question: { |
|
||||||
options: {} |
|
||||||
}, |
|
||||||
countdown: "", |
|
||||||
selected: "", |
|
||||||
result: {}, |
|
||||||
detail: {}, |
|
||||||
timer: null, |
|
||||||
totalScore: 0, |
|
||||||
detailData: [], |
|
||||||
isDone: false, |
|
||||||
history: [], |
|
||||||
btnType: 1, |
|
||||||
|
|
||||||
coverUrl: "", |
|
||||||
playAuth: "", |
|
||||||
player: null, |
|
||||||
previewImg: "", |
|
||||||
iframeSrc: "", |
|
||||||
isWord: false, |
|
||||||
isPPT: false, |
|
||||||
isExcel: false, |
|
||||||
showMask: false, |
|
||||||
showMask1: false, |
|
||||||
showMask2: false, |
|
||||||
closePosi: { |
|
||||||
top: "80px" |
|
||||||
}, |
|
||||||
pdfVisible: false, |
|
||||||
pdfSrc: "" |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapState("user", [ |
|
||||||
"studentId", "userId" |
|
||||||
]) |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
question: { |
|
||||||
handler(newVal, oldVal) { |
|
||||||
for (let n in newVal.options) { |
|
||||||
if (newVal.options[n] == "") delete (newVal.options[n]); |
|
||||||
} |
|
||||||
}, |
|
||||||
deep: true |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.insertScript(); |
|
||||||
// this.getData() |
|
||||||
this.preview(this.videoList1[0]); |
|
||||||
this.$once("hook:beforeDestroy", function() { |
|
||||||
clearInterval(this.timer); |
|
||||||
this.timer = null; |
|
||||||
}); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// async getData(){ |
|
||||||
// let res = await this.$get(this.api.getCoursevideo, { |
|
||||||
// page: 1, |
|
||||||
// size: 10 |
|
||||||
// }) |
|
||||||
// this.videoList = res.data.list |
|
||||||
// }, |
|
||||||
async toEvaluation(type, btn) { |
|
||||||
clearInterval(this.timer); |
|
||||||
this.lastOne = false; |
|
||||||
this.selected = ""; |
|
||||||
this.resultVisible = false; |
|
||||||
this.history = []; |
|
||||||
if (btn) this.btnType = btn; |
|
||||||
if (type) { |
|
||||||
let res = null; |
|
||||||
if (btn == 2) { |
|
||||||
res = await this.$get(this.api.openExercise, { userId: this.userId }); |
|
||||||
} else { |
|
||||||
res = await this.$get(this.api.openTeaching, { userId: this.userId }); |
|
||||||
} |
|
||||||
if (res.errmessage == "true") { |
|
||||||
if (btn == 2) { |
|
||||||
this.goSubSystem(); |
|
||||||
} |
|
||||||
if (btn == 3) { |
|
||||||
this.$router.push("/project"); |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.$alert("请先完成能力测评并达到60分以上才可以进行实验", "提示", { |
|
||||||
confirmButtonText: "进入测评", |
|
||||||
callback: action => { |
|
||||||
action == "confirm" && this.toEvaluation(0); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} else { |
|
||||||
this.start(); |
|
||||||
this.getCountdown(); |
|
||||||
} |
|
||||||
}, |
|
||||||
handleQues() { |
|
||||||
this.question.options = {}; |
|
||||||
for (let n in this.question) { |
|
||||||
if (n.includes("option") && n != "options") { |
|
||||||
this.question.options[n.replace("option", "")] = this.question[n]; |
|
||||||
} |
|
||||||
} |
|
||||||
if (this.question.currentQuestionSortNo == this.question.totalQuestionNum) { |
|
||||||
this.lastOne = true; |
|
||||||
} else { |
|
||||||
this.lastOne = false; |
|
||||||
} |
|
||||||
}, |
|
||||||
async start() { |
|
||||||
let res = await this.$get(this.api.experimentStart, { userId: this.userId, types: this.btnType }); |
|
||||||
if (res.data) { |
|
||||||
this.question = res.data; |
|
||||||
this.isDone = false; |
|
||||||
this.question.currentQuestionSortNo == 1 && this.$store.commit("answerHistoryData", { answerHistory: [] }); |
|
||||||
this.handleQues(); |
|
||||||
this.evaluationVisible = true; |
|
||||||
} else { |
|
||||||
util.warningMsg(res.message); |
|
||||||
} |
|
||||||
}, |
|
||||||
async getCountdown() { |
|
||||||
let res = await this.$get(this.api.experimentRemaining, { userId: this.userId }); |
|
||||||
res.data && this.countDown(res.data); |
|
||||||
// this.countDown('00:00:05') |
|
||||||
}, |
|
||||||
countDown(time) { |
|
||||||
this.countdown = time; |
|
||||||
this.timer = setInterval(() => { |
|
||||||
let timeList = this.countdown.split(":"); |
|
||||||
let total = Number.parseInt(timeList[1] * 60) + Number.parseInt(timeList[2]); |
|
||||||
if (total > 0) { |
|
||||||
--total; |
|
||||||
let minutes = Math.floor(total / 60); |
|
||||||
let seconds = Math.floor(total % 60); |
|
||||||
this.countdown = `00:${util.formateTime(minutes)}:${util.formateTime(seconds)}`; |
|
||||||
} else { |
|
||||||
this.isDone = true; |
|
||||||
util.warningMsg("测评时间结束"); |
|
||||||
clearInterval(this.timer); |
|
||||||
this.prevQues(); |
|
||||||
} |
|
||||||
}, 1000); |
|
||||||
}, |
|
||||||
selectOption(option) { |
|
||||||
if (!this.isDone) { |
|
||||||
if (this.selected.includes(option)) { |
|
||||||
this.selected = this.selected.replace(option, ""); |
|
||||||
} else { |
|
||||||
if (this.question.questionType == 2) { |
|
||||||
this.selected += option; |
|
||||||
} else { |
|
||||||
this.selected = option; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
getHistory() { |
|
||||||
this.history = this.$store.state.answerHistory; |
|
||||||
}, |
|
||||||
async nextQues() { |
|
||||||
if (!this.selected) return util.warningMsg("请选择答案"); |
|
||||||
this.getHistory(); |
|
||||||
if (this.history.length > this.question.currentQuestionSortNo) { |
|
||||||
this.history[this.question.currentQuestionSortNo - 1] = this.selected; |
|
||||||
} else if (this.history.length < this.question.currentQuestionSortNo) { |
|
||||||
this.history.push(this.selected); |
|
||||||
} |
|
||||||
this.$store.commit("answerHistoryData", { answerHistory: this.history }); |
|
||||||
let res = await this.$post(this.api.experimentNext, { |
|
||||||
id: this.question.id, |
|
||||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
|
||||||
// userAnswer: this.selected.split('').sort().join(',') |
|
||||||
userAnswer: this.selected |
|
||||||
}); |
|
||||||
if (res.data) { |
|
||||||
this.question = res.data; |
|
||||||
this.selected = ""; |
|
||||||
if (this.history.length >= this.question.currentQuestionSortNo) { |
|
||||||
this.selected = this.history[this.question.currentQuestionSortNo - 1]; |
|
||||||
} else { |
|
||||||
this.selected = ""; |
|
||||||
} |
|
||||||
this.handleQues(); |
|
||||||
} |
|
||||||
}, |
|
||||||
async prevQues() { |
|
||||||
if (this.question.currentQuestionSortNo > 1) { |
|
||||||
this.getHistory(); |
|
||||||
let res = await this.$post(this.api.experimentPrevious, { |
|
||||||
id: this.question.id, |
|
||||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
|
||||||
// userAnswer: this.selected.split('').sort().join(',') |
|
||||||
userAnswer: this.selected |
|
||||||
}); |
|
||||||
if (res.data) { |
|
||||||
this.question = res.data; |
|
||||||
this.selected = this.history[this.question.currentQuestionSortNo - 1]; |
|
||||||
this.isDone ? this.submitQues() : this.handleQues(); |
|
||||||
} |
|
||||||
} else if (this.isDone) { |
|
||||||
if (!this.selected) this.selected = "A"; |
|
||||||
this.submitQues(); |
|
||||||
} |
|
||||||
}, |
|
||||||
async submitQues() { |
|
||||||
if (!this.selected) return util.warningMsg("请选择答案"); |
|
||||||
let res = await this.$post(this.api.experimentSubmit, { |
|
||||||
id: this.question.id, |
|
||||||
currentQuestionSortNo: this.question.currentQuestionSortNo, |
|
||||||
// userAnswer: this.selected.split('').sort().join(','), |
|
||||||
userAnswer: this.selected, |
|
||||||
userId: this.userId, |
|
||||||
types: this.btnType |
|
||||||
}); |
|
||||||
if (res.data) { |
|
||||||
this.result = res.data; |
|
||||||
this.evaluationVisible = false; |
|
||||||
this.resultVisible = true; |
|
||||||
} |
|
||||||
}, |
|
||||||
async getDetail() { |
|
||||||
let res = await this.$get(this.api.experimentDetail, { |
|
||||||
evaluationRecordId: this.question.id |
|
||||||
}); |
|
||||||
if (res.data) { |
|
||||||
this.totalScore = res.data.totalScore; |
|
||||||
this.detailData = res.data.evaluationDetailVOS; |
|
||||||
this.resultVisible = false; |
|
||||||
this.detailVisible = true; |
|
||||||
} |
|
||||||
}, |
|
||||||
systemChange() { |
|
||||||
this.videoSrc = ""; |
|
||||||
this.preview(this[`videoList${this.systemId}`][0]); |
|
||||||
}, |
|
||||||
preview(row) { |
|
||||||
let url = row.links; |
|
||||||
this.videoSrc = ""; |
|
||||||
this.coverUrl = ""; |
|
||||||
this.pdfSrc = ""; |
|
||||||
this.iframeSrc = ""; |
|
||||||
this.curLink = row.title; |
|
||||||
let ext = util.getFileExt(url); |
|
||||||
if (util.isVideo(ext)) { |
|
||||||
this.videoSrc = url; |
|
||||||
} else if (ext == "pdf") { |
|
||||||
this.pdfSrc = url; |
|
||||||
this.pdfVisible = true; |
|
||||||
} else if (util.isImg(ext)) { |
|
||||||
window.open(url); |
|
||||||
} else if (util.isDoc(ext)) { |
|
||||||
if (ext == "pptx") { |
|
||||||
this.isPPT = true; |
|
||||||
this.isWord = false; |
|
||||||
this.isExcel = false; |
|
||||||
} else if (ext == "doc" || ext == "docx") { |
|
||||||
this.isPPT = false; |
|
||||||
this.isWord = true; |
|
||||||
this.isExcel = false; |
|
||||||
} else if (ext == "xls" || ext == "xlsx") { |
|
||||||
this.isExcel = true; |
|
||||||
this.isPPT = false; |
|
||||||
this.isWord = false; |
|
||||||
} else { |
|
||||||
this.isPPT = false; |
|
||||||
this.isWord = false; |
|
||||||
this.isExcel = false; |
|
||||||
} |
|
||||||
if (this.isPPT) { |
|
||||||
this.showMask = true; |
|
||||||
} else { |
|
||||||
this.showMask = false; |
|
||||||
} |
|
||||||
if (this.isWord) { |
|
||||||
this.showMask1 = true; |
|
||||||
} else { |
|
||||||
this.showMask1 = false; |
|
||||||
} |
|
||||||
if (this.isExcel) { |
|
||||||
this.showMask2 = true; |
|
||||||
} else { |
|
||||||
this.showMask2 = false; |
|
||||||
} |
|
||||||
this.iframeSrc = `https://view.officeapps.live.com/op/view.aspx?src=${url}`; |
|
||||||
} |
|
||||||
}, |
|
||||||
closeIframe() { |
|
||||||
this.iframeSrc = ""; |
|
||||||
this.showMask = false; |
|
||||||
this.showMask1 = false; |
|
||||||
this.showMask2 = false; |
|
||||||
this.curLink = ""; |
|
||||||
}, |
|
||||||
// 插入阿里云播放器脚本 |
|
||||||
insertScript() { |
|
||||||
const linkTag = document.createElement("link"); |
|
||||||
linkTag.id = "aliplayerLink"; |
|
||||||
linkTag.rel = "stylesheet"; |
|
||||||
linkTag.href = "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"; |
|
||||||
document.body.appendChild(linkTag); |
|
||||||
|
|
||||||
const scriptTag = document.createElement("script"); |
|
||||||
scriptTag.id = "aliplayerScript"; |
|
||||||
scriptTag.type = "text/javascript"; |
|
||||||
scriptTag.src = "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"; |
|
||||||
document.body.appendChild(scriptTag); |
|
||||||
this.$once("hook:beforeDestroy", function() { |
|
||||||
document.body.removeChild(document.querySelector("#aliplayerLink")); |
|
||||||
document.body.removeChild(document.querySelector("#aliplayerScript")); |
|
||||||
}); |
|
||||||
}, |
|
||||||
goSubSystem() { // 进入实训 |
|
||||||
util.cookies.set("assessmentId", "", -1); |
|
||||||
util.cookies.set("studentId", this.studentId); |
|
||||||
util.cookies.set("projectId", "", -1); |
|
||||||
util.cookies.set("startTime", "", -1); |
|
||||||
util.cookies.set("stopTime", "", -1); |
|
||||||
location.href = Setting.defaultSubSystem; |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.video_wid { |
|
||||||
width: 100%; |
|
||||||
height: 650px; |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.video_wid:focus { |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
|
|
||||||
.title_view { |
|
||||||
background-color: #2F3236; |
|
||||||
padding: 12px 10px; |
|
||||||
} |
|
||||||
|
|
||||||
h3 { |
|
||||||
color: #9076FF; |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.catalog .title_view .el-button { |
|
||||||
padding: 8px 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.btns { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.btns .el-button { |
|
||||||
flex: 1; |
|
||||||
height: 90px; |
|
||||||
font-size: 30px; |
|
||||||
background: transparent url(../../../assets/img/ques1.png) 0 0/100% 100% no-repeat; |
|
||||||
border: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.list_he { |
|
||||||
height: 500px; |
|
||||||
overflow-y: auto; |
|
||||||
padding: 20px 12px; |
|
||||||
background: #3f4449; |
|
||||||
} |
|
||||||
|
|
||||||
.list_he ul { |
|
||||||
padding: 20px 0; |
|
||||||
} |
|
||||||
|
|
||||||
.list_he ul li:first-child { |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.list_he ul li { |
|
||||||
margin-top: 10px; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
.list_title { |
|
||||||
color: #9278FF; |
|
||||||
font-size: 20px; |
|
||||||
margin-left: 12px; |
|
||||||
} |
|
||||||
|
|
||||||
.list_catalog { |
|
||||||
padding: 0 8px; |
|
||||||
font-size: 14px; |
|
||||||
margin-top: 15px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
.mar0 { |
|
||||||
margin-top: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.list_catalog .catalog_button .el-button { |
|
||||||
background-color: #2F3236; |
|
||||||
border: 1px solid rgba(144, 118, 255, 1); |
|
||||||
color: #9278FF; |
|
||||||
padding: 6px 8px; |
|
||||||
} |
|
||||||
|
|
||||||
.experimental_title { |
|
||||||
color: #fff; |
|
||||||
word-wrap: break-word; |
|
||||||
|
|
||||||
&.active { |
|
||||||
color: #9278FF; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.experimental_status { |
|
||||||
margin-right: 10px; |
|
||||||
color: #7A7A7A; |
|
||||||
} |
|
||||||
|
|
||||||
.curriculum_name { |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
|
|
||||||
.curriculum_name i { |
|
||||||
margin-left: 5px; |
|
||||||
margin-right: 5px; |
|
||||||
} |
|
||||||
|
|
||||||
.curriculum_status { |
|
||||||
color: #7A7A7A; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog { |
|
||||||
min-height: 700px; |
|
||||||
background: url(../../../assets/img/evaluation_bg1.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .el-dialog__headerbtn, /deep/ .evaluation_dialog .el-dialog__headerbtn, /deep/ .detail_dialog .el-dialog__headerbtn { |
|
||||||
font-size: 28px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .title, /deep/ .detail_dialog .title { |
|
||||||
margin-bottom: 45px; |
|
||||||
text-align: center; |
|
||||||
font-size: 24px |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .title { |
|
||||||
margin-bottom: 55px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .serial { |
|
||||||
font-size: 12px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .ques-wrap { |
|
||||||
width: 80%; |
|
||||||
margin: 0 auto; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .type { |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .ques { |
|
||||||
margin: 20px 0; |
|
||||||
min-height: 145px; |
|
||||||
color: #666; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .countdown { |
|
||||||
margin-bottom: 20px; |
|
||||||
justify-content: center; |
|
||||||
text-align: center; |
|
||||||
color: #DC3434; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .countdown img { |
|
||||||
width: 15px !important; |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
min-height: 340px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options.isDone { |
|
||||||
min-height: 395px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options li { |
|
||||||
padding: 0 15px; |
|
||||||
margin-bottom: 15px; |
|
||||||
line-height: 40px; |
|
||||||
border: 1px solid #9070FF; |
|
||||||
border-radius: 20px; |
|
||||||
color: #666; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options li:hover { |
|
||||||
color: #fff; |
|
||||||
background-color: #b038bb; |
|
||||||
border-color: #b038bb; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options li.active { |
|
||||||
color: #fff; |
|
||||||
background-color: #916CFF; |
|
||||||
border-color: #916CFF; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options em { |
|
||||||
margin-right: 10px; |
|
||||||
font-weight: bold; |
|
||||||
font-style: normal; |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .options span { |
|
||||||
font-size: 16px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .el-dialog__footer { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .first, /deep/ .result_dialog .first { |
|
||||||
color: #fff; |
|
||||||
background-color: #9268FF; |
|
||||||
border-color: #9268FF; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .second, /deep/ .result_dialog .second { |
|
||||||
color: #fff; |
|
||||||
background-color: #E371DA; |
|
||||||
border-color: #E371DA; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog { |
|
||||||
min-height: 500px; |
|
||||||
background: url(../../../assets/img/evaluation_bg2.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .el-dialog__headerbtn .el-dialog__close { |
|
||||||
color: #5a5a5a; |
|
||||||
font-size: 28px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .result { |
|
||||||
margin-top: 60px; |
|
||||||
text-align: center; |
|
||||||
color: #fff; |
|
||||||
font-size: 24px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .point { |
|
||||||
margin: 30px 0 20px; |
|
||||||
text-align: center; |
|
||||||
font-size: 30px; |
|
||||||
color: #666; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .point span { |
|
||||||
font-size: 120px; |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .tips { |
|
||||||
color: #666; |
|
||||||
text-align: center; |
|
||||||
font-size: 14px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .result_dialog .third { |
|
||||||
color: #fff; |
|
||||||
background-color: #418cf5; |
|
||||||
border-color: #418cf5; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .detail_dialog { |
|
||||||
background: url(../../../assets/img/evaluation_bg3.png) 0 0/100% 100% no-repeat; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .detail_dialog .title { |
|
||||||
margin-top: -20px; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .detail_dialog .el-table__header th:nth-last-child(2) { |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .detail_dialog .total { |
|
||||||
margin-top: 20px; |
|
||||||
text-align: center; |
|
||||||
font-size: 30px; |
|
||||||
color: #DC3434; |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog { |
|
||||||
margin: 0 !important; |
|
||||||
position: absolute; |
|
||||||
top: 50%; |
|
||||||
left: 50%; |
|
||||||
transform: translate(-50%, -50%); |
|
||||||
max-height: calc(100% - 30px); |
|
||||||
max-width: calc(100% - 30px); |
|
||||||
} |
|
||||||
|
|
||||||
/deep/ .evaluation_dialog .el-dialog__body { |
|
||||||
flex: 1; |
|
||||||
overflow: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.mask { |
|
||||||
z-index: 9; |
|
||||||
position: absolute; |
|
||||||
background-color: rgb(57, 58, 61); |
|
||||||
} |
|
||||||
|
|
||||||
.word-mask { |
|
||||||
z-index: 9; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
width: 100%; |
|
||||||
background-color: rgb(243, 242, 241); |
|
||||||
} |
|
||||||
|
|
||||||
.word-mask1 { |
|
||||||
z-index: 9; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
right: 0; |
|
||||||
width: 100%; |
|
||||||
background-color: #185abd; |
|
||||||
} |
|
||||||
|
|
||||||
.word-mask2 { |
|
||||||
z-index: 9; |
|
||||||
position: absolute; |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
|
|
||||||
.excel-mask1 { |
|
||||||
z-index: 9; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 20%; |
|
||||||
width: 60%; |
|
||||||
background-color: #107c41; |
|
||||||
} |
|
||||||
|
|
||||||
$height: 650px; |
|
||||||
.cover { |
|
||||||
position: relative; |
|
||||||
height: $height; |
|
||||||
border: 0; |
|
||||||
|
|
||||||
.fileIframe { |
|
||||||
width: 100%; |
|
||||||
height: $height !important; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
import BasicLayout from "@/layouts/home"; |
|
||||||
|
|
||||||
const meta = {}; |
|
||||||
|
|
||||||
const pre = "preview-"; |
|
||||||
|
|
||||||
export default { |
|
||||||
path: "/preview", |
|
||||||
name: "preview", |
|
||||||
redirect: { |
|
||||||
name: `${pre}list` |
|
||||||
}, |
|
||||||
meta, |
|
||||||
component: BasicLayout, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
name: `${pre}list`, |
|
||||||
path: `list`, |
|
||||||
component: () => import("@/pages/preview/list"), |
|
||||||
meta: { title: "课前预习" } |
|
||||||
} |
|
||||||
] |
|
||||||
}; |
|
||||||
Loading…
Reference in new issue