You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
466 lines
17 KiB
466 lines
17 KiB
4 years ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<div class="flex-between">
|
||
|
|
<el-page-header @back="goBack" :content="systemName"></el-page-header>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<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="goSubSystem">进入实验</el-button>
|
||
|
|
</div>
|
||
|
|
<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-card>
|
||
|
|
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<div>课程简介</div>
|
||
|
|
<p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
|
||
|
|
</el-card>
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<div>课程目标</div>
|
||
|
|
<p>课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介</p>
|
||
|
|
</el-card>
|
||
|
|
<el-card shadow="hover" class="m-b-20">
|
||
|
|
<div>课程进度</div>
|
||
|
|
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import util from "@/libs/util";
|
||
|
|
import Setting from "@/setting";
|
||
|
|
import pdf from "@/components/pdf";
|
||
|
|
import { videoList1, videoList4, videoList5, videoList6, videoList7, videoList8 } from "@/libs/videoList";
|
||
|
|
import { mapState } from "vuex";
|
||
|
|
export default {
|
||
|
|
components: { pdf },
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
systemId: this.$route.query.systemId,
|
||
|
|
systemName: this.$route.query.systemName,
|
||
|
|
video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
|
||
|
|
videoSrc: "",
|
||
|
|
curLink: "",
|
||
|
|
videoList1,
|
||
|
|
videoList4,
|
||
|
|
videoList5,
|
||
|
|
videoList6,
|
||
|
|
videoList7,
|
||
|
|
videoList8,
|
||
|
|
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", [
|
||
|
|
"userId", "schoolId", "studentId", "roleId", "userName"
|
||
|
|
])
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.insertScript();
|
||
|
|
this.preview(this[`videoList${this.systemId}`][0]);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goBack() {
|
||
|
|
this.$router.back();
|
||
|
|
},
|
||
|
|
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}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 插入阿里云播放器脚本
|
||
|
|
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() {
|
||
|
|
let type = this.systemId;
|
||
|
|
let host = Setting.apiBaseURL;
|
||
|
|
let href = "";
|
||
|
|
|
||
|
|
let roleId = this.roleId == 4 ? 0 : 1;
|
||
|
|
let userName = window.btoa(encodeURIComponent(this.userName));
|
||
|
|
|
||
|
|
if (type == 1) {
|
||
|
|
href = `${host}pyTrials/#/`;
|
||
|
|
// if(process.env.NODE_ENV === 'development') href = 'http://120.78.198.231/'
|
||
|
|
} else if (type == 4) {
|
||
|
|
href = `${host}pyFinance/#/`;
|
||
|
|
} else if (type == 5) {
|
||
|
|
href = `${host}pyProjects/#/`;
|
||
|
|
} else if (type == 6) {
|
||
|
|
href = `${host}pyRandom/#/`;
|
||
|
|
} else if (type == 7) {
|
||
|
|
href = `${host}pyQuantification/#/`;
|
||
|
|
} else if (type == 8) {
|
||
|
|
href = `${host}pyAnalysis/#/`;
|
||
|
|
} else if (type == 9) {
|
||
|
|
href = `${host}pyDataclean/#/`;
|
||
|
|
} else if (type == 10) {
|
||
|
|
href = `${host}pyAcquisition/#/`;
|
||
|
|
} else if (type == 21) {
|
||
|
|
window.open(`http://121.37.29.24:80/yyyflogin?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=3989a0ad671849b99dcbdcc208782333&caseId=9681f86902314b10bc752909121f9ab9&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=7ff5d4715b114b7398b6f26c20fac460`);
|
||
|
|
} else if (type == 22) {
|
||
|
|
window.open(`https://danbao.czcyedu.com/#/loginFromYyyf?userId=${this.userId}&userName=${userName}&userType=${roleId}&reqType=1&reqId=eb7d8355119d449184c548b07dc01ed9&caseId=1198241070647873538&authorization=87DIVy348Oxzj3ha&classId=1876&courserId=faaedd82adb9444285a5785e4a3dd4f9`);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type != 21 && type != 22) {
|
||
|
|
util.cookies.set("userId", this.userId);
|
||
|
|
util.cookies.set("studentId", this.studentId);
|
||
|
|
util.cookies.set("schoolId", this.schoolId);
|
||
|
|
util.cookies.set("assessmentId", "", -1);
|
||
|
|
util.cookies.set("projectId", "", -1);
|
||
|
|
util.cookies.set("startTime", "", -1);
|
||
|
|
util.cookies.set("stopTime", "", -1);
|
||
|
|
location.href = href;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$height: 650px;
|
||
|
|
.cover {
|
||
|
|
position: relative;
|
||
|
|
height: $height;
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
.fileIframe {
|
||
|
|
width: 100%;
|
||
|
|
height: $height !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
.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: 550px;
|
||
|
|
overflow-y: auto;
|
||
|
|
padding: 20px 12px;
|
||
|
|
background: #3f4449;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|