FE_occupationlab_server/src/pages/station/preview/index.vue

<template>
    <div style="padding: 24px">
        <el-card shadow="hover" class="m-b-20">
            <div class="flex-between">
                <el-page-header @back="goBack" :content="curriculumName"></el-page-header>
            </div>
        </el-card>
        <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>
                        <template v-if="showMask">
                            <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></div>
                            <div class="mask" style="width:100%;background: #393A3D;height: 30px;top: 53px;"></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">
                        <p class="arrow">
                            <span @click="changePdfPage(0)" class="turn el-icon-arrow-left"
                                  :class="{grey: currentPage==1}"></span>
                            {{ currentPage }} / {{ pageCount }}
                            <span @click="changePdfPage(1)" class="turn el-icon-arrow-right"
                                  :class="{grey: currentPage==pageCount}"></span>
                        </p>
                        <div style='color:#393A3D;height: 30px;background: #393A3D;'></div>
                        <pdf
                            class="pdf-wrap"
                            :src="pdfSrc"
                            :page="currentPage"
                            @num-pages="pageCount=$event"
                            @page-loaded="currentPage=$event"
                            @loaded="loadPdfHandler">
                        </pdf>
                    </div>
                    <div class="inner" v-else-if="playAuth">
                        <div class="video_wid" id="player"></div>
                    </div>
                </div>
                <div class="catalog">
                    <div class="m-b-20">
                        <el-button type="primary" @click="goSystem" style="width: 100%; height: 50px; font-size: 18px">进 入 实 验</el-button>
                    </div>
                    <div class="list">
                        <h4 class="title">{{ courseName }}</h4>
                        <div class="chapters">
                            <template v-if="chapterList.length">
                                <div class="chapter" v-for="(item,index) in chapterList" :key="index">
                                    <div class="chapterName">{{ item.name }}</div>
                                    <div class="section" v-if="item.subsectionList.length">
                                        <div v-for="(section,i) in item.subsectionList" :key="i" @click="preview(section, item.name)">
                                            <p class="sectionName" :title="section.name" :class="{active: curLink === `${item.name}${section.name}`}">{{ section.name }}</p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover" class="m-b-20">
            <h4 style="margin-bottom: 10px">课程简介</h4>
            <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>

<script>
import util from "@/libs/util";
import Setting from "@/setting";
import { mapState } from "vuex";
import pdf from "vue-pdf";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import bus from "@/libs/bus";

export default {
    components: { pdf },
    data() {
        return {
            courseId: this.$route.query.courseId,
            curriculumName: this.$route.query.curriculumName,
            video: "http://liuwanr.oss-cn-shenzhen.aliyuncs.com/mp4/20200519/1589871025648.mp4",
            chapterList: [], // 章节列表
            coverUrl: "", // 课程封面
            courseName: "", // 课程名称
            briefIntroduction: "", // 课程简介
            teachingObjectives: "", // 课程目标
            assessmentList: "", // 考核列表
            systemIds: '',
            curLink: "", // 当前选中
            playAuth: "",
            player: null,
            previewImg: "",
            iframeSrc: "",
            isWord: false,
            isPPT: false,
            isExcel: false,
            showMask: false,
            showMask1: false,
            showMask2: false,
            closePosi: {
                top: "80px"
            },
            pdfVisible: false,
            pdfSrc: "",
            currentPage: 0, // pdf文件页码
            pageCount: 0, // pdf文件总页数
            fileType: "pdf", // 文件类型
            desShrink: false
        };
    },
    computed: {
        ...mapState("user", [
            "userId", "studentId", "roleId", "userName"
        ])
    },
    mounted() {
        bus.$emit("setBg", "none");
        this.insertScript();
        this.getData();
        this.getChapter();
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        async getData() {
            let { data } = await this.$post(`${this.api.curriculumDetail}?cid=${this.courseId}`);
            this.courseName = data.curriculumName;
            // this.coverUrl = data.coverUrl;
            this.briefIntroduction = data.briefIntroduction;
            this.teachingObjectives = data.teachingObjectives;
            this.assessmentList = data.assessmentConfig;
            this.systemIds = data.systemIds
        },
        async getChapter() {
            let res = await this.$get(`${this.api.curriculumChapter}/${this.courseId}`);
            this.chapterList = res.chapterList;
            if (this.chapterList.length && this.chapterList[0].subsectionList && this.chapterList[0].subsectionList.length) {
                // console.log(this.chapterList[0].subsectionList[0]);
                this.preview(this.chapterList[0].subsectionList[0], this.chapterList[0].name);
            }
        },
        // 插入阿里云播放器脚本
        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"));
            });
        },
        transferType(ext) {
            if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return "图片";
            if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return "视频";
            return ext;
        },
        preview(row, chapterName) {
            this.curLink = `${chapterName}${row.name}`; // 章节名称+小节名称，小节名称有重复的情况，如果只用小节名称判断，会有同时选中多个的情况
            this.playauth = "";
            this.coverUrl = "";
            this.pdfSrc = "";
            this.iframeSrc = "";
            this.isPPT = false;
            this.isWord = false;
            this.isExcel = false;
            if (this.transferType(row.fileType) == "视频") {
                this.$get(`${this.api.getPlayAuth}/${row.fileId}`).then(res => {
                    this.playAuth = res.data.playAuth;
                    // 如果已经产生了实例，则销毁重新创建，不然播放器会播放上一个视频
                    if (this.player) {
                        this.player.dispose()
                        this.player = null
                    }
                    this.$nextTick(() => {
                        if (this.player) {
                            this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
                        } else {
                            this.player = new Aliplayer({
                                id: "player",
                                width: "100%",
                                autoplay: false,
                                vid: row.fileId,
                                playauth: this.playAuth,
                                encryptType: 1 //当播放私有加密流时需要设置。
                            });
                        }
                    });

                }).catch(res => {
                });
            } else if (this.transferType(row.fileType) == "图片") {
                this.coverUrl = row.fileUrl;
            } else if (row.fileType == "pdf") {
                this.pdfSrc = row.fileUrl;
                this.pdfVisible = true;
            } else {
                this.$get(`${this.api.curriculumGetSubsection}/${row.id}`).then(res => {
                    if (row.fileType == "pptx") {
                        this.isPPT = true;
                        this.isWord = false;
                        this.isExcel = false;
                    } else if (row.fileType == "doc" || row.fileType == "docx") {
                        this.isPPT = false;
                        this.isWord = true;
                        this.isExcel = false;
                    } else if (row.fileType == "xls" || row.fileType == "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 = res.previewUrl;
                }).catch(err => {});
            }
        },
        closePlayer() {
            this.playAuth = "";
            this.player.pause();
        },
        closeIframe() {
            this.iframeSrc = "";
            this.showMask = false;
            this.showMask1 = false;
        },
        closePdf() {
            this.pdfSrc = "";
            this.currentPage = 1;
        },
        changePdfPage(val) {
            if (val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if (val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
        },
        loadPdfHandler(e) {
            this.currentPage = 1;
        },
        goSystem() { // 进入实验系统
            const id = this.systemIds
            let href = ''
            let token = util.local.get(Setting.tokenKey);
            let roleId = this.roleId == 4 ? 0 : 1;
            let userName = window.btoa(encodeURIComponent(this.userName));
            if (id == 11) {
                // 银行系统
                location.href = `${Setting.bankPath}/#/index/list?token=${token}&cid=${this.courseId}&systemId=${this.assessmentList[0].systemId}&projectId=&assessmentId=&classId=&stopTime=&test=true`
            } else if (id == 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 (id == 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`);
            } else {
                // python系统
                util.cookies.set("assessmentId", "", -1);
                util.cookies.set("projectId", "", -1);
                util.cookies.set("startTime", "", -1);
                util.cookies.set("stopTime", "", -1);
                util.cookies.set("token", token);
                util.cookies.set("courseId", this.courseId);
                util.cookies.set("curriculumName", escape(this.curriculumName));
                util.cookies.set("systemId", id);
                location.href = process.env.NODE_ENV === 'development' ?
                  `http://${location.hostname}:8080/#/` :
                  `${location.origin}/pyTrials` // 8个python子系统都跳这个地址，子系统会通过cookie里的systemId识别展示哪套系统
            }
        }
    }
};
</script>

<style lang="scss" scoped>
$height: 700px;
.video_wid,.cover{
    position: relative;
    width: 76%;
    height: $height !important;
    border: 0;
}
.cover {
  flex: 1;
  width: auto;
}
.cover{
    img{
        border-radius: 8px;
    }
    &.is-word{
        overflow: hidden;
    }
}
.fileIframe{
    height: $height !important;
}
.video_wid,.inner{
    width: 100%;
    height: 100% !important;
    border: 0;
    overflow: auto;
}
.cover.is-word{
    .inner{
        height: calc(100% + 38px) !important;
        margin-top: -38px;
    }
}
.video_wid:focus{
    outline: none;
}
.catalog{
  width: 330px;
  margin-left: 20px;
}
.list{
    height: calc(700px - 70px) ;
    overflow-y: auto;
    padding: 24px 16px;
    background: #fff;
    .title{
        margin-bottom: 8px;
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
    }
    .desc-wrap{
        position: relative;
        .desc{
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 22px;
            @include mul-ellipsis(2);
            &.active{
                display: block;
                overflow: visible;
            }
        }
        .arrow{
            position: absolute;
            bottom: 2px;
            right: 0;
            display: flex;
            justify-content: space-between;
            width: 46px;
            background-color: #fff;
            span{
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
            }
            img{
                width: 16px;
                cursor: pointer;
            }
            &.active{
                span{
                    opacity: 0;
                }
                img{
                    transform: rotate(180deg);
                }
            }
        }
    }
    .chapters{
        margin-top: 16px;
        max-height: calc(100% - 53px);
        overflow: auto;
    }
    .chapter{
        margin-bottom: 20px;
        .chapterName{
            color: rgba(0, 0, 0, 0.85);
            font-size: 16px;
        }
        .section{
            padding: 5px 15px;
            margin-top: 8px;
            background: rgba(0, 0, 0, 0.02);
            .sectionName{
                margin: 10px 0;
                font-size: 14px;
                color: rgba(0, 0, 0, 0.65);
                cursor: pointer;
                @include ellipsis;
                &.active{
                    color: #9278FF;
                }
            }
        }
    }
}
.el-image-viewer__wrapper{
    transform: translateY(-10px);
    transition: transform .5s;

    &.active{
        transform: translateY(0)
    }
}
.el-image-viewer__close{
    z-index: 2000;
    top: 15px;
    right: 15px;
    &.doc-close{
        i{
            color: #000 !important;
        }
    }
}
.list::-webkit-scrollbar {
    width: 4px;
}
.list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
}

.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;
}
/deep/.pdf-dia{
    border-radius: 0 !important;
    .el-dialog__header{
        display: none;
    }
    .el-dialog__body{
        padding: 0;
    }
    .el-dialog__headerbtn{
        top: 10px;
        .el-dialog__close{
            color: #fff;
            font-size: 16px;
        }
    }
}
.pdf{
    .arrow{
        padding: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: #fff;
        background-color: #333;
        .turn{
            margin: 0 10px;
            font-size: 18px;
            cursor: pointer;
        }
    }
    .pdf-wrap{
        width: 80%;
        margin: 0 auto;
    }
}

</style>