|
|
@@ -1,455 +0,0 @@
|
|
|
-<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, // 默认自由浏览
|
|
|
- opertimer: null, // 定时器
|
|
|
- };
|
|
|
- },
|
|
|
- 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()
|
|
|
- },
|
|
|
- setOperationTime() {
|
|
|
- let _this = this;
|
|
|
- if (_this.opertimer) {
|
|
|
- clearInterval(_this.opertimer);
|
|
|
- _this.opertimer = null;
|
|
|
- }
|
|
|
- _this.opertimer = setInterval(() => {
|
|
|
- _this.setoTime("600");
|
|
|
- }, 600000);
|
|
|
- },
|
|
|
- setoTime(time) {
|
|
|
- let params = [
|
|
|
- {
|
|
|
- uid: this.userid,
|
|
|
- cid: this.id,
|
|
|
- type: "2",
|
|
|
- time: time,
|
|
|
- },
|
|
|
- ];
|
|
|
- this.ajax
|
|
|
- .post(this.$store.state.api + "addOperationTimeT2", params)
|
|
|
- .then((res) => {})
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- destroyed() {
|
|
|
- clearInterval(this.opertimer);
|
|
|
- this.opertimer = null;
|
|
|
- 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();
|
|
|
- this.setOperationTime();
|
|
|
- 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% - 50px);
|
|
|
- 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