|
|
@@ -3,44 +3,65 @@
|
|
|
<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 v-if="tcid && inviteCode" class="inviteBox" style="margin-left: 20px;">
|
|
|
- <span>随机码：{{ inviteCode }}</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">
|
|
|
+ <!-- <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
|
|
|
- @click.stop="back"
|
|
|
- v-if="screenType!=2"
|
|
|
- >
|
|
|
- <img src="../../assets/icon/newIcon/return.png" alt="" />
|
|
|
- <span style="color: #000">返回</span>
|
|
|
+ </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"></iframe>
|
|
|
+ <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,
|
|
|
@@ -53,12 +74,15 @@ export default {
|
|
|
courseType: this.$route.query.type,
|
|
|
screenType: this.$route.query.screenType,
|
|
|
tcid2: this.$route.query.tcid,
|
|
|
- tcid:"",
|
|
|
+ tcid: "",
|
|
|
+ className: "",
|
|
|
showIframe: false,
|
|
|
iframeSrc: "",
|
|
|
courseDetail: {},
|
|
|
pageLoading: false,
|
|
|
- inviteCode:"",
|
|
|
+ inviteCode: "",
|
|
|
+ startTime: "",
|
|
|
+ freeBrowse: true, // 默认自由浏览
|
|
|
opertimer: null, // 定时器
|
|
|
};
|
|
|
},
|
|
|
@@ -118,7 +142,13 @@ export default {
|
|
|
this.showIframe = false;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- let _url = `https://ppt.cocorobo.cn/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
|
|
|
+ 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;
|
|
|
|
|
|
@@ -140,41 +170,59 @@ export default {
|
|
|
}
|
|
|
return commonElements;
|
|
|
},
|
|
|
- back(){
|
|
|
- if(this.tType!=2){
|
|
|
+ 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
|
|
|
+ this.userid +
|
|
|
+ '&oid=' +
|
|
|
+ this.oid +
|
|
|
+ '&org=' +
|
|
|
+ this.org +
|
|
|
+ '&cid=' +
|
|
|
+ this.classId +
|
|
|
+ '&courseId=' +
|
|
|
+ this.id +
|
|
|
+ '&tType=' +
|
|
|
+ this.tType +
|
|
|
+ '&screenType=' +
|
|
|
+ this.screenType
|
|
|
)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.goTo(
|
|
|
'/index?userid=' +
|
|
|
- this.userid +
|
|
|
- '&oid=' +
|
|
|
- this.oid +
|
|
|
- '&org=' +
|
|
|
- this.org +
|
|
|
- '&cid=' +
|
|
|
- this.classId +
|
|
|
- '&tType=' +
|
|
|
- this.tType +
|
|
|
- '&screenType=' +
|
|
|
- this.screenType
|
|
|
+ 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) {
|
|
|
@@ -205,10 +253,35 @@ export default {
|
|
|
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>
|
|
|
@@ -221,7 +294,6 @@ export default {
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 20px;
|
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
|
|
|
|
@@ -229,18 +301,20 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
- border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.pec_header {
|
|
|
width: 100%;
|
|
|
- height: 80px;
|
|
|
- border-radius: 12px 12px 0 0;
|
|
|
+ height: 50px;
|
|
|
+ background: #FCCF00;
|
|
|
box-sizing: border-box;
|
|
|
- border-bottom: solid 1px #cad1dc;
|
|
|
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 {
|
|
|
@@ -248,8 +322,22 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-left: 20px;
|
|
|
+ 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;
|
|
|
@@ -260,8 +348,6 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.pec_h_r_btnArea {
|
|
|
@@ -270,7 +356,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea > div {
|
|
|
+.pec_h_r_btnArea>div {
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
display: flex;
|
|
|
@@ -280,37 +366,90 @@ export default {
|
|
|
background-color: #f0f4fa;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
- margin-right: 10px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #000;
|
|
|
border: 1px solid #cad1dc;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea > div > img {
|
|
|
+.pec_h_r_btnArea>div>img {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea > .pec_h_r_btn_refresh {
|
|
|
+.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);
|
|
|
+ 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;
|
|
|
+}
|
|
|
|
|
|
-.inviteBox {
|
|
|
- font-size: 14px;
|
|
|
- /* margin-top: 5px; */
|
|
|
- color: #00000099;
|
|
|
- text-align: center;
|
|
|
+.switch-label {
|
|
|
+ background: linear-gradient(to right, #F53F3F, #FCCF00);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
}
|
|
|
</style>
|
SanHQin