|
|
@@ -0,0 +1,425 @@
|
|
|
+<template>
|
|
|
+ <div class="pptEasyClass">
|
|
|
+ <div class="pec_main" v-loading="pageLoading">
|
|
|
+ <div class="pec_header">
|
|
|
+ <div class="pec_h_left">
|
|
|
+ <div @click.stop="back" class="backBtn" v-if="screenType != 2 || tType == 1">
|
|
|
+ <img src="../../assets/icon/newIcon/return.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label">班级</span>
|
|
|
+ <span class="class-value">{{ className }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label" v-if="inviteCode">识别码</span>
|
|
|
+ <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pec_h_center">
|
|
|
+ <div class="pec_h_l_title">
|
|
|
+ <span>{{ courseDetail.title }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="free-browse-switch" v-if="courseDetail.userid == userid">
|
|
|
+ <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? '自由浏览' : '跟随模式' }}</span>
|
|
|
+ <el-switch
|
|
|
+ v-model="freeBrowse"
|
|
|
+ :active-value="true"
|
|
|
+ :inactive-value="false"
|
|
|
+ class="custom-switch"
|
|
|
+ active-color="#FCCF00"
|
|
|
+ inactive-color="#F53F3F"
|
|
|
+ @change="onFreeBrowseChange"
|
|
|
+ ></el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pec_h_right">
|
|
|
+ <div class="pec_h_r_btnArea">
|
|
|
+ <!-- <el-tooltip effect="light" content="刷新" placement="top">
|
|
|
+ <div class="pec_h_r_btn_refresh" @click="refreshCourse">
|
|
|
+ <img src="../../assets/icon/newIcons/refresh.png" alt="" />
|
|
|
+ <span>刷新</span>
|
|
|
+ </div>
|
|
|
+ </el-tooltip> -->
|
|
|
+ <div class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
|
|
|
+ <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
|
|
|
+ <span>下课</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pec_content">
|
|
|
+ <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
|
|
|
+ webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc"
|
|
|
+ v-if="showIframe" style="width: 100%; height: 100%; border: none" ref="ppt"></iframe>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { myMixin } from '../../mixins/mixin';
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [myMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id: this.$route.query.courseId,
|
|
|
+ userid: this.$route.query.userid,
|
|
|
+ classId: this.$route.query.cid,
|
|
|
+ role: this.$route.query.role,
|
|
|
+ oid: this.$route.query.oid,
|
|
|
+ org: this.$route.query.org,
|
|
|
+ tType: this.$route.query.tType,
|
|
|
+ courseType: this.$route.query.type,
|
|
|
+ screenType: this.$route.query.screenType,
|
|
|
+ tcid2: this.$route.query.tcid,
|
|
|
+ tcid: "",
|
|
|
+ className: "",
|
|
|
+ showIframe: false,
|
|
|
+ iframeSrc: "",
|
|
|
+ courseDetail: {},
|
|
|
+ pageLoading: false,
|
|
|
+ inviteCode: "",
|
|
|
+ startTime: "",
|
|
|
+ freeBrowse: true, // 默认自由浏览
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goTo(path) {
|
|
|
+ this.$router.push(path);
|
|
|
+ },
|
|
|
+ refreshCourse() {
|
|
|
+ this.getCourseDetail();
|
|
|
+ },
|
|
|
+ getCourseDetail() {
|
|
|
+ this.pageLoading = true;
|
|
|
+ let params = {
|
|
|
+ courseId: this.id
|
|
|
+ };
|
|
|
+
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectCourseDetail3", params)
|
|
|
+ .then(res => {
|
|
|
+ console.log("getCourseDetail", res);
|
|
|
+ this.courseDetail = res.data[0][0];
|
|
|
+ this.courseDetail.chapters = JSON.parse(this.courseDetail.chapters);
|
|
|
+ this.tcid = this.arrayToArray(
|
|
|
+ this.courseDetail.juri ? this.courseDetail.juri.split(",") : [],
|
|
|
+ this.tcid2 ? this.tcid2.split(",") : []
|
|
|
+ )[0] || "";
|
|
|
+ if (this.tcid && res.data[1].length) {
|
|
|
+ let _inviteA = [];
|
|
|
+ for (var ik = 0; ik < res.data[1].length; ik++) {
|
|
|
+ _inviteA.push({
|
|
|
+ cid: res.data[1][ik].classid,
|
|
|
+ ic: res.data[1][ik].code,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ for (var ik = 0; ik < _inviteA.length; ik++) {
|
|
|
+ if (
|
|
|
+ this.arrayToArray(
|
|
|
+ _inviteA[ik].cid.split(","),
|
|
|
+ this.tcid.split(",")
|
|
|
+ ).length
|
|
|
+ ) {
|
|
|
+ this.inviteCode = _inviteA[ik].ic;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setPptIframe()
|
|
|
+ this.pageLoading = false;
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ this.$message.error("获取课程数据失败");
|
|
|
+ this.pageLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setPptIframe() {
|
|
|
+ this.showIframe = false;
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let api = ''
|
|
|
+ if (this.$region == 'beta') {
|
|
|
+ api = 'https://beta.ppt.cocorobo.cn'
|
|
|
+ } else {
|
|
|
+ api = 'https://ppt.cocorobo.cn'
|
|
|
+ }
|
|
|
+ let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
|
|
|
+
|
|
|
+ this.iframeSrc = _url;
|
|
|
+
|
|
|
+ this.showIframe = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ arrayToArray(arrayo, arrayt) {
|
|
|
+ let array1 = arrayo;
|
|
|
+ let array2 = arrayt;
|
|
|
+
|
|
|
+ let commonElements = [];
|
|
|
+
|
|
|
+ for (let i = 0; i < array1.length; i++) {
|
|
|
+ for (let j = 0; j < array2.length; j++) {
|
|
|
+ if (array1[i] === array2[j]) {
|
|
|
+ commonElements.push(array1[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return commonElements;
|
|
|
+ },
|
|
|
+ async getClassName() {
|
|
|
+ let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
|
|
|
+ this.className = courseGrade.data[0][0].grade;
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ if (this.tType != 2) {
|
|
|
+ this.goTo(
|
|
|
+ '/courseDetail?userid=' +
|
|
|
+ this.userid +
|
|
|
+ '&oid=' +
|
|
|
+ this.oid +
|
|
|
+ '&org=' +
|
|
|
+ this.org +
|
|
|
+ '&cid=' +
|
|
|
+ this.classId +
|
|
|
+ '&courseId=' +
|
|
|
+ this.id +
|
|
|
+ '&tType=' +
|
|
|
+ this.tType +
|
|
|
+ '&screenType=' +
|
|
|
+ this.screenType
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ this.goTo(
|
|
|
+ '/index?userid=' +
|
|
|
+ this.userid +
|
|
|
+ '&oid=' +
|
|
|
+ this.oid +
|
|
|
+ '&org=' +
|
|
|
+ this.org +
|
|
|
+ '&cid=' +
|
|
|
+ this.classId +
|
|
|
+ '&tType=' +
|
|
|
+ this.tType +
|
|
|
+ '&screenType=' +
|
|
|
+ this.screenType
|
|
|
+ )
|
|
|
+ }
|
|
|
+ },
|
|
|
+ afterClass() {
|
|
|
+ this.$confirm('确定下课吗，会让所有正在上课的学生全部退出登录？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
+ }).catch(() => {});
|
|
|
+ },
|
|
|
+ onFreeBrowseChange(value) {
|
|
|
+ this.freeBrowse = value;
|
|
|
+ console.log('自由浏览模式已切换为1：', this.freeBrowse);
|
|
|
+ this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ if (this.courseDetail.userid == this.userid && this.tcid2 && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840') {
|
|
|
+ let endTime = new Date().toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-")
|
|
|
+ let courseTime = Math.floor((new Date(endTime) - new Date(this.startTime)) / (1000 * 60))
|
|
|
+ this.syncClassData({
|
|
|
+ courseId: this.id,
|
|
|
+ title: this.courseDetail.title,
|
|
|
+ courseGrade: this.tcid2,
|
|
|
+ courseTime: courseTime,
|
|
|
+ startTime: this.startTime,
|
|
|
+ endTime: endTime,
|
|
|
+ })
|
|
|
+ console.log('同步数据')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.startTime = new Date().toLocaleString("zh-CN", {
|
|
|
+ hour12: false,
|
|
|
+ timeZone: "Asia/Shanghai"
|
|
|
+ }).replace(/\//g, "-")
|
|
|
+ this.getClassName()
|
|
|
+ this.getCourseDetail();
|
|
|
+ window.onFreeBrowseChange = (value) => {
|
|
|
+ this.freeBrowse = value;
|
|
|
+ console.log('自由浏览模式已切换为：', this.freeBrowse);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pptEasyClass {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_header {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background: #FCCF00;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0px 4px 12px 0px #3648601F;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_left {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 25px;
|
|
|
+ /* 保持左侧靠左 */
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_center {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_l_title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #0e1e33;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_right {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btnArea {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btnArea>div {
|
|
|
+ width: auto;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px 20px;
|
|
|
+ background-color: #f0f4fa;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000;
|
|
|
+ border: 1px solid #cad1dc;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btnArea>div>img {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btnArea>.pec_h_r_btn_refresh {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #0061ff;
|
|
|
+ border-color: #0061ff;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_r_btnArea>.pec_h_r_btn_afterClass {
|
|
|
+ border-color: #F0E1DD;
|
|
|
+ background-color: #FFF7F5;
|
|
|
+ color: #F53F3F;
|
|
|
+}
|
|
|
+
|
|
|
+.backBtn {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.backBtn img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.class-info-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.class-label {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.class-value {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222;
|
|
|
+ background: #FFFFFF3D;
|
|
|
+ border: 1px solid #00000080;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 18px;
|
|
|
+ min-width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ border-radius: 0 0 12px 12px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.free-browse-switch {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 9px 10px;
|
|
|
+ background: #FFF7F5;
|
|
|
+ border-radius: 26px;
|
|
|
+ margin-left: 15px;
|
|
|
+ gap: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.switch-label {
|
|
|
+ background: linear-gradient(to right, #F53F3F, #FCCF00);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+</style>
|
qgt