Skip to content

L
learn-online-pc
提交 413dd4a1 authored 作者: GOD_ZYX's avatar GOD_ZYX
浏览文件
操作

合并 直播部分 进入 sofia

上级 2c8ba80e
隐藏空白字符变更
内嵌 并排
正在显示 包含 1582 行增加 和 27 行删除
client/client/components/player/chapterWork/chapterWork.vue
浏览文件 @ 413dd4a1
...@@ -43,8 +43,11 @@ ...@@ -43,8 +43,11 @@
<!-- <p class="no-data">暂无数据</p> --> <!-- <p class="no-data">暂无数据</p> -->
</template> </template>
<!-- <p class="text-danger">{this.state.error}</p> --> <!-- <p class="text-danger">{this.state.error}</p> -->
<template v-if="this.deadLine">
<p style="color: red">请于截止日期 {{this.deadLine}} 前提交</p>
</template>
<div class="area-btns"> <div class="area-btns">
<el-button type="primary" @click="submitWork" :disabled="homeData.checker_time">{{homeData.checker_time ? '已批改' : '提交'}}</el-button> <el-button type="primary" @click="submitWork" :disabled="!!homeData.checker_time || deadLineFlag">{{homeData.checker_time ? '已批改' : '提交'}}</el-button>
<span class="help-info">&emsp;&emsp;在获老师批改之前，可以多次提交，将以最后一次提交为准</span> <span class="help-info">&emsp;&emsp;在获老师批改之前，可以多次提交，将以最后一次提交为准</span>
<template v-if="homeData.checker_time"> <template v-if="homeData.checker_time">
<div class="play-paper-check"> <div class="play-paper-check">
...@@ -96,7 +99,9 @@ export default { ...@@ -96,7 +99,9 @@ export default {
homeData: {}, homeData: {},
/* 设置是否可以初始化 ckeditor */ /* 设置是否可以初始化 ckeditor */
setTime: null, setTime: null,
isInit: false isInit: false,
deadLine: '',
deadLineFlag: false
} }
}, },
/* 本组件 仅支持 单个 ckeditor 存在 */ /* 本组件 仅支持 单个 ckeditor 存在 */
...@@ -143,6 +148,15 @@ export default { ...@@ -143,6 +148,15 @@ export default {
}, 50) }, 50)
loading.close() loading.close()
}) })
setTimeout(() => {
cAction.chapterAction.getHomeworkStopTime(this.sid, this.cid, this.chapterId).then(data => {
this.deadLine = data.dead_line || ''
let deadLine = data.dead_line ? new Date(data.dead_line).getTime() : ''
// deadLine = new Date().getTime() - 100
this.deadLineFlag = ((new Date().getTime() > deadLine) && !!deadLine)
// console.log(this.deadLine)
}).catch(e => { this.$message.error(e.message) }).finally(() => {})
}, 500)
}, },
submitWork () { submitWork () {
if (!this.ckeditor.getData()) { if (!this.ckeditor.getData()) {
......
client/client/components/player/index.vue
浏览文件 @ 413dd4a1
...@@ -4,6 +4,16 @@ ...@@ -4,6 +4,16 @@
<div class="play-top cl" :style="(state.sideBar ? {} : { marginRight: 0 })"> <div class="play-top cl" :style="(state.sideBar ? {} : { marginRight: 0 })">
<router-link class="router-link-class" :to="{ path: `/app/my-learn/course-detail/${sid}/${cid}` }"><i class="play-back el-icon-arrow-left"></i></router-link> <router-link class="router-link-class" :to="{ path: `/app/my-learn/course-detail/${sid}/${cid}` }"><i class="play-back el-icon-arrow-left"></i></router-link>
<p>{{chapterList.title}}</p> <p>{{chapterList.title}}</p>
<router-link class="router-link-class" id="sys-help" :to="{ path: `/mobile/help/student` }" target="_blank">
<el-tooltip effect="light" content="帮助" placement="bottom-start">
<i class="el-icon-self-icon-test"></i>
</el-tooltip>
</router-link>
<router-link class="router-link-class" id="sys-callback" :to="{ path: `/app/account/feedbackCreate` }" target="_blank">
<el-tooltip effect="light" content="意见反馈" placement="bottom-start">
<i class="el-icon-self-fankuiyijian"></i>
</el-tooltip>
</router-link>
</div> </div>
<div class="play-content"> <div class="play-content">
<router-view <router-view
...@@ -21,6 +31,7 @@ ...@@ -21,6 +31,7 @@
@changeVideoArr="changeVideoArr" @changeVideoArr="changeVideoArr"
@handlePlayTime="handlePlayTime" @handlePlayTime="handlePlayTime"
@updateProgress="updateProgress" @updateProgress="updateProgress"
@changeSideBar="changeSideBar"
></router-view> ></router-view>
</div> </div>
</div> </div>
...@@ -53,7 +64,7 @@ ...@@ -53,7 +64,7 @@
</div> </div>
</div> </div>
<template v-if="!state.sideBar"> <template v-if="!state.sideBar">
<div class="switch"> <div class="switch" id="switch-btn">
<a :href="('#' + SIDEBAR_CHAPTER)" class="switch-chapter" @click="changeSideBar(SIDEBAR_CHAPTER)"> <a :href="('#' + SIDEBAR_CHAPTER)" class="switch-chapter" @click="changeSideBar(SIDEBAR_CHAPTER)">
<i class="el-icon-self-wenjian"></i> <i class="el-icon-self-wenjian"></i>
<div>章节</div> <div>章节</div>
...@@ -385,5 +396,38 @@ export default { ...@@ -385,5 +396,38 @@ export default {
} }
} }
} }
#sys-help {
display: none;
position: absolute;
top: 6px;
right: 50px;
/* width: 40px; */
height: 40px;
overflow: hidden;
color: #fff;
font-size: 16px;
line-height: 40px;
text-align: center;
text-decoration: none;
i {
font-size: 20px;
}
}
#sys-callback {
display: none;
position: absolute;
top: 6px;
right: 15px;
/* width: 40px; */
height: 40px;
overflow: hidden;
color: #fff;
font-size: 16px;
line-height: 40px;
text-align: center;
text-decoration: none;
i {
font-size: 20px;
}
}
</style> </style>
client/client/components/player/live/live.vue 0 → 100644
浏览文件 @ 413dd4a1
<template>
<iframe id="myIframe" :src="live.url" frameborder="0" width="100%" height="100%" allow="autoplay;geolocation;microphone;camera;midi;encrypted-media;"></iframe>
</div>
</template>
<script>
import cAction from '@actions'
export default {
props: {
sid: { type: String, require: false },
cid: { type: String, require: false },
id: { type: String, require: false }
},
data () {
return {
live: {},
ccLive: null
}
},
mounted () {
this.loadAjax()
},
destroyed () {
if (window.document.getElementById('switch-btn')) {
window.document.getElementById('switch-btn').style.display = 'block'
window.document.getElementById('sys-help').style.display = 'none'
window.document.getElementById('sys-callback').style.display = 'none'
}
if (this.ccLive) {
this.ccLive.logout({
success: function (res) {
},
error: function (res) {
}
})
}
},
methods: {
loadAjax () {
/* 只能清除本域名下的cookie,不能清除其他域名下的cookie */
// cAction.loginAction.clearCookie({
// cookies: [{
// name: 'sessionid',
// obj: { path: '/', domain: '.csslcloud.net' }
// }, {
// name: 'TGC',
// obj: { path: '/', domain: '.ezijing.com' }
// }]
// }).then().finally(() => {})
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.chapterAction.getChapterList(this.cid, this.sid, this.id).then(json => {
this.live = (json.curJson && json.curJson.live) || {}
if (this.live.id) {
if (this.live.record_id && this.live.live_status === 103) {
this.live.url = 'https://view.csslcloud.net/api/view/callback?recordid=' + this.live.record_id + '&roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + this.live.viewer_name + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
} else {
this.$emit('changeSideBar', '')
setTimeout(() => {
if (window.document.getElementById('switch-btn')) {
window.document.getElementById('switch-btn').style.display = 'none'
window.document.getElementById('sys-help').style.display = 'block'
window.document.getElementById('sys-callback').style.display = 'block'
}
}, 1000)
this.live.viewer_name = window.G.UserInfo.student_info.personal_name || window.G.UserInfo.nickname
this.live.url = 'https://view.csslcloud.net/api/view/index?roomid=' + this.live.room_id + '&userid=' + this.live.user_id + '&autoLogin=true&viewername=' + this.live.viewer_name + '&viewertoken=' + this.live.viewer_token // + '&groupid=xxx'
}
this.CCLiveInit(this.live)
}
loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
},
CCLiveInit (live) {
window.DWLive.init({
userid: live.user_id, // 必须参数
roomid: live.room_id, // 必须参数
// groupid: "groupid", // 可选
viewername: live.viewer_name, // 可选
viewertoken: live.viewer_token // 如果直播间设置为密码验证，必选
// viewercustomua: 'android', // 可选
// language: 'en', // 可选
// viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}', // 可选
// fastMode:true // 可选参数，默认为true
})
this.ccLive = window.DWLive
}
},
watch: {
id: {
handler () {
this.loadAjax()
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
client/client/components/player/rightSide/sideChapterList.vue
浏览文件 @ 413dd4a1
...@@ -7,8 +7,12 @@ ...@@ -7,8 +7,12 @@
<ul class="knot-list"> <ul class="knot-list">
<template v-for="(_item, _index) in item.chapters"> <template v-for="(_item, _index) in item.chapters">
<li v-bind:key="_index" :class="['knob-item', (_item.id === list.currentChapterId ? 'on' : '')]"> <li v-bind:key="_index" :class="['knob-item', (_item.id === list.currentChapterId ? 'on' : '')]">
<a :data-vid="_item.id" :data-type="_item.video_provider" :data-hasVA='_item.time' @click='jumpToOtherVA' :data-index='index' :data-count='_index' class="knot-name">{{_item.name}}</a> <a :data-vid="_item.id" :data-type="_item.video_provider" :data-hasVA='_item.time' @click='jumpToOtherVA' :data-index='index' :data-count='_index' class="knot-name">
<i :class="['el-icon', (_item.time ? 'el-icon-self-iconset0481' : (_item.type === 3 ? 'el-icon-edit-outline' : 'el-icon-self-cc-book'))]"></i> {{_item.name + (_item.type === 5 ? ("(" + _item.live.statusStr + ")") : "") }}
</a>
<template v-if="_item.type !== 5">
<i :class="['el-icon', (_item.time ? 'el-icon-self-iconset0481' : (_item.type === 3 ? 'el-icon-edit-outline' : 'el-icon-self-cc-book'))]"></i>
</template>
</li> </li>
</template> </template>
</ul> </ul>
...@@ -64,6 +68,18 @@ export default { ...@@ -64,6 +68,18 @@ export default {
this.$router.push({ path: `/survey/${sid}/${cid}` }) this.$router.push({ path: `/survey/${sid}/${cid}` })
} else if (_course.chapters[i2].type === 'exam') { } else if (_course.chapters[i2].type === 'exam') {
this.$router.push({ path: `/player/${sid}/${cid}/exam/${_id}` }) this.$router.push({ path: `/player/${sid}/${cid}/exam/${_id}` })
} else if (_course.chapters[i2].type === 5) {
let status = _course.chapters[i2].live.live_status
if (status !== 0 && status !== 1 && status !== 103) {
this.$message.error(_course.chapters[i2].live.statusStr)
return
}
let enableRecord = _course.chapters[i2].live.enable_record
if (status === 103 && enableRecord !== undefined && enableRecord !== null && !enableRecord) {
this.$message.info('该直播没有回放')
return
}
this.$router.push({ path: `/player/${sid}/${cid}/live/${_id}` })
} }
return return
} }
......
client/client/components/services/api/chapter_api.js
浏览文件 @ 413dd4a1
...@@ -66,6 +66,10 @@ export default class ChapterAPI extends BaseAPI { ...@@ -66,6 +66,10 @@ export default class ChapterAPI extends BaseAPI {
* 提交课程 作业或问题 * 提交课程 作业或问题
*/ */
updateHomework = (obj = {}) => this.post('/v2/education/homeworks', obj, { headers: { 'Content-Type': 'multipart/form-data' } }) updateHomework = (obj = {}) => this.post('/v2/education/homeworks', obj, { headers: { 'Content-Type': 'multipart/form-data' } })
/**
* 课程作业截止时间
*/
getHomeworkStopTime = (sid, cid, chapterId) => this.get(`/v2/education/homeworks/${sid}/${cid}/${chapterId}/deadline`, {})
/** /**
* 获取对应 大作业 回答 * 获取对应 大作业 回答
* @param {[string]} sid * @param {[string]} sid
...@@ -85,4 +89,12 @@ export default class ChapterAPI extends BaseAPI { ...@@ -85,4 +89,12 @@ export default class ChapterAPI extends BaseAPI {
* @param {[string]} obj.raw (base64) * @param {[string]} obj.raw (base64)
*/ */
updateSurveyAnswer = (obj) => this.post(`/v2/education/survey/answer`, obj) updateSurveyAnswer = (obj) => this.post(`/v2/education/survey/answer`, obj)
/**
* 手机端 获取实时最新直播接口
*/
getNewLiveMsg = (obj = {}) => this.get(`/v2/education/lives/latest`, obj)
/**
* 手机端 获取列表接口
*/
getLiveList = (obj = {}) => this.get(`/v2/education/lives/courses`, obj)
} }
client/client/components/services/api/login_api.js
浏览文件 @ 413dd4a1
...@@ -65,4 +65,6 @@ export default class LoginAPI extends BaseAPI { ...@@ -65,4 +65,6 @@ export default class LoginAPI extends BaseAPI {
* 个人信息 - 上传头像 * 个人信息 - 上传头像
*/ */
updatePic = (obj = {}) => this.post('/v3/storage/upload/avatar', obj, { headers: { 'Content-Type': 'multipart/form-data' } }) updatePic = (obj = {}) => this.post('/v3/storage/upload/avatar', obj, { headers: { 'Content-Type': 'multipart/form-data' } })
/* 清cookie - 只能清除请求的同域名下cookie */
clearCookie = (obj = {}) => this.post('/clear/cookie', obj, { headers: { 'Content-Type': 'application/json' } })
} }
client/client/project/actions/ChapterAction.js
浏览文件 @ 413dd4a1
...@@ -82,9 +82,40 @@ export default class ChapterAction { ...@@ -82,9 +82,40 @@ export default class ChapterAction {
homework: _homework, homework: _homework,
chapterRead: _chapterRead, chapterRead: _chapterRead,
chapterWork: _chapterWork, chapterWork: _chapterWork,
chapterVideo: _chapterVideo chapterVideo: _chapterVideo,
live: __.live || ''
} }
} }
if (__.live && __.live.id) {
let str = ''
switch (__.live.live_status) {
case 0: str = '直播未开始'; break
case 1: str = '正在直播'; break
case 2: str = '直播结束'; break
case 101: str = '直播结束，视频剪辑中'; break // 录制开始
case 102: str = '直播结束，视频剪辑中'; break // 录制结束
case 103: str = '观看回放'; break
default: str = '直播未开始'
}
// 5分钟内显示“即将开始”，5~1小时内“N分钟后开始”，1~24小时内“N小时后开始”，1天以上“N天后开始”天就显示年月日
if (__.live.live_status === 0 && __.live.start_time) {
let time = (new Date(__.live.start_time).getTime() - new Date().getTime()) / 1000
if (time <= 5 * 60) {
str = '即将开始'
} else if (time <= 1 * 60 * 60) {
str = parseInt(time / 60) + '分钟后开始'
} else if (time <= 24 * 60 * 60) {
str = parseInt(time / (60 * 60)) + '小时' + parseInt(time / 60 % 60) + '分钟后开始'
} else {
str = parseInt(time / (24 * 60 * 60)) + '天后开始'
}
}
if (__.live.live_status === 103 && __.live.enable_record !== undefined && __.live.enable_record !== null && !__.live.enable_record) {
str = ''
}
__.live.statusStr = str
}
return { return {
id: __.resource_id, id: __.resource_id,
video_provider: (__.video && __.video.video_provider) || '', video_provider: (__.video && __.video.video_provider) || '',
...@@ -95,7 +126,8 @@ export default class ChapterAction { ...@@ -95,7 +126,8 @@ export default class ChapterAction {
homework: _homework, homework: _homework,
chapterRead: _chapterRead, chapterRead: _chapterRead,
chapterWork: _chapterWork, chapterWork: _chapterWork,
chapterVideo: _chapterVideo chapterVideo: _chapterVideo,
live: __.live || ''
} }
}) })
} }
...@@ -231,8 +263,14 @@ export default class ChapterAction { ...@@ -231,8 +263,14 @@ export default class ChapterAction {
updateHomework (obj) { return chapterApi.updateHomework(obj).then(res => res) } updateHomework (obj) { return chapterApi.updateHomework(obj).then(res => res) }
/* 获取大作业 回答 */ /* 获取大作业 回答 */
getCourseHomework (sid, cid) { return chapterApi.getCourseHomework(sid, cid).then(res => res) } getCourseHomework (sid, cid) { return chapterApi.getCourseHomework(sid, cid).then(res => res) }
/* 获取作业截止时间 */
getHomeworkStopTime (sid, cid, chapterId) { return chapterApi.getHomeworkStopTime(sid, cid, chapterId).then(res => res) }
/* 提交大作业 */ /* 提交大作业 */
updateCourseHomework (sid, cid, obj) { return chapterApi.updateCourseHomework(sid, cid, obj).then(res => res) } updateCourseHomework (sid, cid, obj) { return chapterApi.updateCourseHomework(sid, cid, obj).then(res => res) }
/* 提交课程考核 */ /* 提交课程考核 */
updateSurveyAnswer (obj) { return chapterApi.updateSurveyAnswer(obj).then(res => res) } updateSurveyAnswer (obj) { return chapterApi.updateSurveyAnswer(obj).then(res => res) }
/* 获取当前最新直播提醒 */
getNewLiveMsg () { return chapterApi.getNewLiveMsg().then(res => res) }
/* 获取手机直播列表 */
getLiveList () { return chapterApi.getLiveList().then(res => res) }
} }
client/client/project/actions/CourseAction.js
浏览文件 @ 413dd4a1
...@@ -108,6 +108,36 @@ export default class CourseAction { ...@@ -108,6 +108,36 @@ export default class CourseAction {
_homework.work_id = __.resource_id _homework.work_id = __.resource_id
_homework.semester_id = data.semester_id _homework.semester_id = data.semester_id
} }
if (__.live && __.live.id) {
let str = ''
switch (__.live.live_status) {
case 0: str = '直播未开始'; break
case 1: str = '正在直播'; break
case 2: str = '直播结束'; break
case 101: str = '直播结束，视频剪辑中'; break // 录制开始
case 102: str = '直播结束，视频剪辑中'; break // 录制结束
case 103: str = '观看回放'; break
default: str = '直播未开始'
}
// 5分钟内显示“即将开始”，5~1小时内“N分钟后开始”，1~24小时内“N小时后开始”，1天以上“N天后开始”天就显示年月日
if (__.live.live_status === 0 && __.live.start_time) {
let time = (new Date(__.live.start_time).getTime() - new Date().getTime()) / 1000
if (time <= 5 * 60) {
str = '即将开始'
} else if (time <= 1 * 60 * 60) {
str = parseInt(time / 60) + '分钟后开始'
} else if (time <= 24 * 60 * 60) {
str = parseInt(time / (60 * 60)) + '小时' + parseInt(time / 60 % 60) + '分钟后开始'
} else {
str = parseInt(time / (24 * 60 * 60)) + '天后开始'
}
}
if (__.live.live_status === 103 && __.live.enable_record !== undefined && __.live.enable_record !== null && !__.live.enable_record) {
str = ''
}
__.live.statusStr = str
}
return { return {
cid: cur.course_id, cid: cur.course_id,
sid: cur.semester_id, sid: cur.semester_id,
...@@ -119,7 +149,8 @@ export default class CourseAction { ...@@ -119,7 +149,8 @@ export default class CourseAction {
name: __.name, name: __.name,
type: __.type, type: __.type,
work_type: (__.homework && __.homework.work_type) || '', work_type: (__.homework && __.homework.work_type) || '',
homework: _homework homework: _homework,
live: __.live || ''
} }
}) })
} }
......
client/client/project/actions/LoginAction.js
浏览文件 @ 413dd4a1
...@@ -99,4 +99,8 @@ export default class LoginAction { ...@@ -99,4 +99,8 @@ export default class LoginAction {
* 调用个人信息 - 上传头像 * 调用个人信息 - 上传头像
*/ */
updatePic (obj) { return loginApi.updatePic(obj).then(res => res) } updatePic (obj) { return loginApi.updatePic(obj).then(res => res) }
/**
* 清除cookie
*/
clearCookie (obj) { return loginApi.clearCookie(obj).then(res => res) }
} }
client/client/project/components/layout/sidebar.vue
浏览文件 @ 413dd4a1
...@@ -85,8 +85,8 @@ export default { ...@@ -85,8 +85,8 @@ export default {
] ]
}, },
{ {
name: '系统反馈', name: '意见反馈',
iconClass: 'el-icon-bell', iconClass: 'el-icon-self-fankuiyijian',
index: '3' index: '3'
} }
] ]
......
client/client/project/index.html
浏览文件 @ 413dd4a1
...@@ -41,6 +41,10 @@ ...@@ -41,6 +41,10 @@
<!-- 直接引入aliyun播放插件 JS --> <!-- 直接引入aliyun播放插件 JS -->
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script> <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script> <script type="text/javascript" charset="utf-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
<!-- 解决iframe嵌套，CC视频在safri中打开免登陆兼容问题 -->
<script src="//view.csslcloud.net/js/_fix_.js"></script>
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="//view.csslcloud.net/js/sdk/3.1.0/liveSDK.js" type="text/javascript"></script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/console-polyfill.js"></script> <script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/console-polyfill.js"></script>
<script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/html5shiv.min.js"></script> <script src="https://zws-imgs-pub.ezijing.com/static/build/learn-mba/static/compatible/html5shiv.min.js"></script>
......
client/client/project/main.js
浏览文件 @ 413dd4a1
...@@ -2,6 +2,7 @@ import Vue from 'vue' // 引入vue框架 ...@@ -2,6 +2,7 @@ import Vue from 'vue' // 引入vue框架
import Element from 'element-ui' // 引入 element-ui 框架 import Element from 'element-ui' // 引入 element-ui 框架
import './components/style/_com.scss' // 定义 element-ui主题色 + 公共样式 import './components/style/_com.scss' // 定义 element-ui主题色 + 公共样式
import VueRouter from 'vue-router' // 使用 vue-router import VueRouter from 'vue-router' // 使用 vue-router
import MetaInfo from 'vue-meta-info'
import createRouter from './router' // router定义 import createRouter from './router' // router定义
import Main from './main.vue' // 初始化 vue页面 import Main from './main.vue' // 初始化 vue页面
import UploadForm from '../components/upload-form' import UploadForm from '../components/upload-form'
...@@ -19,6 +20,7 @@ require('promise.prototype.finally').shim() ...@@ -19,6 +20,7 @@ require('promise.prototype.finally').shim()
Vue.use(Element) Vue.use(Element)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(MetaInfo)
Vue.use(UploadForm) Vue.use(UploadForm)
Vue.component(UploadForm.name, UploadForm) Vue.component(UploadForm.name, UploadForm)
const router = createRouter() const router = createRouter()
...@@ -31,7 +33,9 @@ Vue.prototype.$md5 = md5 ...@@ -31,7 +33,9 @@ Vue.prototype.$md5 = md5
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
/* 设置 全局变量 */ /* 设置 全局变量 */
BeforeRouter.globalVariable.init(Vue, { to, from, next }) BeforeRouter.globalVariable.init(Vue, { to, from, next })
if (to.name !== 'normalLogin' && to.name !== 'codeLogin' && to.name !== 'forgetPwd') { // 所有登录页 不进行登录校验 if (to.name === 'studentHelp' || to.name === 'teacherHelp') {
next()
} else if (to.name !== 'normalLogin' && to.name !== 'codeLogin' && to.name !== 'forgetPwd') { // 所有登录页 不进行登录校验
BeforeRouter.loginInfo.isLogin(Vue).then(str => { BeforeRouter.loginInfo.isLogin(Vue).then(str => {
if (/^login/gi.test(str)) { if (/^login/gi.test(str)) {
next() next()
......
client/client/project/pages/mobile/index.vue 0 → 100644
浏览文件 @ 413dd4a1
<template>
<div>
<router-view></router-view>
</div>
</template>
client/client/project/pages/mobile/list.vue 0 → 100644
浏览文件 @ 413dd4a1
<template>
<div class="pages">
<div class="head">
<img class="logo5" alt="logo" src="../../assets/img/logo-header.png">
<div class="userinfo">
<div class="login-out" @click="goOutLogin()">退出</div>
<div class="name">{{ name }}</div>
</div>
</div>
<div class="hint" v-show="latest && latest.live" @click="opencc(latest)" >
<div class="left">
<div class="left-1">直播提醒</div>
<div class="left-2">《{{latest.course_name}}》将于 {{latest.live && latest.live.start_time.slice(5)}} 开始</div>
</div>
<div class="right">进入直播 ></div>
</div>
<div class="tips">提示语：已参加的课程请到电脑端学习系统观看回放</div>
<div class="list-box">
<div class="curriculum" v-for="(item, index) in obj" v-bind:key="index" >
<h4 class="curriculum-name">{{item.course_name}}</h4>
<div class="curriculum-box" @click="opencc(item)" >
<img class="curriculum-picture" :src="item.curriculum.curriculum_picture" />
<div class="curriculum-introduce">
<div class="title">{{item.curriculum.curriculum_name}}</div>
<div class="time">{{item.live ? item.live.time : ''}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import cAction from '@actions'
export default {
data () {
return {
name: (window.G.UserInfo && window.G.UserInfo.student_info && window.G.UserInfo.student_info.personal_name) || '匿名',
latest: '',
obj: [],
loading: null
}
},
metaInfo () {
return {
title: '清华大学五道口金融学院',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
}
},
mounted () {
const _this = this
this.loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
this.dealRender()
_this.getNewLiveMsg()
_this.getLiveLis()
setInterval(function () {
_this.getNewLiveMsg()
_this.getLiveLis()
}, 3000)
},
methods: {
/* 退出登录 - 跳转方法 */
goOutLogin () {
cAction.loginAction.outLogin().then(str => {
if (/^login/gi.test(str)) {
window.G.UserInfo = {}
// this.$router.push({ path: '/login/index' })
// this.$router.push({ path: '/' })
window.location.href = 'https://pbcsf.ezijing.com/login/index'
} else {
/* 出错 */
}
}).catch(e => {
this.$message.error(e.message)
})
/* 清空一下记录，然后调整到登录页 */
// this.$router.push({ path: '/login/index' })
},
getNewLiveMsg: function () {
// 获取最新直播提醒
const _this = this
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.chapterAction.getNewLiveMsg().then(json => {
if (json.status === 200) {
_this.latest = json.data
window.console.log(_this.latest)
}
if (_this.loading) {
_this.loading.close()
_this.loading = null
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
},
getLiveLis: function () {
// 获取最新直播列表
const _this = this
cAction.chapterAction.getLiveList().then(json => {
if (json.status === 200) {
json.data.map(function (item, index, arr) {
if (item.live && (item.live.length || item.live.user_id)) {
let _time = item.live.start_time
let _status = item.live.live_status
let enableRecord = item.live.enable_record // 0: 不启用回放 1: 开启回放
let str = ''
switch (_status) {
case 0: str = '直播未开始'; break
case 1: str = '正在直播'; break
case 2: str = '直播结束'; break
case 101: str = '直播结束，视频剪辑中'; break // 录制开始
case 102: str = '直播结束，视频剪辑中'; break // 录制结束
case 103: str = '观看回放'; break
default: str = '直播未开始'
}
if (_status === 103 && !enableRecord) str = ''
if (_status === 0 && _time) {
_time = _time.replace(/-/g, '/')
let time = (new Date(_time).getTime() - new Date().getTime()) / 1000
if (time <= 5 * 60) {
str = '即将开始'
} else if (time <= 1 * 60 * 60) {
str = parseInt(time / 60) + '分钟后开始'
} else if (time <= 24 * 60 * 60) {
str = parseInt(time / (60 * 60)) + '小时' + parseInt(time / 60 % 60) + '分钟后开始'
} else {
str = parseInt(time / (24 * 60 * 60)) + '天后开始'
}
}
item.live.time = str
}
return item
})
_this.obj = json.data
}
if (_this.loading) {
_this.loading.close()
_this.loading = null
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
},
dealRender: () => {
(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth, wFsize // eslint-disable-line
wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
// wFsize = wFsize > 32 ? wFsize : 32;
doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document)
},
opencc: function (obj) {
let _live = obj.live
if (!_live || !_live.user_id) {
this.$message.error('网络错误，刷新重试')
return
}
let userid = _live.user_id
let roomid = _live.room_id
let viewertoken = _live.viewer_token
let recordid = _live.record_id
let liveStatus = _live.live_status
let enableRecord = _live.enable_record // 0: 不启用回放 1: 开启回放
let viewername = this.name
let _url = 'https://view.csslcloud.net/api/view'
if (recordid && liveStatus === 103) {
if (!enableRecord) {
this.$message.warning('该直播没有回放')
return
}
// 可以回放
// https://view.csslcloud.net/api/view/callback?recordid=xxx&roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
_url = _url + '/callback?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&recordid=' + recordid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
} else {
// 可以直播
// https://view.csslcloud.net/api/view/index?roomid=xxx&userid=xxx&autoLogin=true&viewername=xxx&viewertoken=xxx&groupid=xxx
_url = _url + '/index?autoLogin=true&roomid=' + roomid + '&userid=' + userid + '&viewername=' + viewername + '&viewertoken=' + viewertoken
}
window.console.log(_url)
window.open(_url, '_blank')
}
}
}
</script>
<style>
html{
font-size: 100px;
}
body{
padding: 0;
margin: 0;
}
.float-left{
float: left;
}
.float-right{
float: right;
}
</style>
<style scoped >
.pages{
font-size: .14rem;
padding-top: .2rem;
}
.head{
height: 0.48rem;
padding: 0 0.2rem;
}
.head .logo5{
width: 1.18rem;
height: .3rem;
float: left;
}
.name{
padding: 0 0.1rem;
width: 1.1rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.login-out{
color: #999;
}
.userinfo{
height: 0.68rem;
}
.userinfo > div {
float: right;
}
.hint{
min-height: 0.7rem;
display: flex;
background: rgba(176,28,61,.1) ;
padding: 0 0.2rem .1rem;
justify-content: space-between;
font-size: .14rem;
}
.hint .left{
flex-grow: 1;
display: flex;
flex-direction: column;
padding-right: .08rem;
}
.hint .left .left-1{
height: .4rem;
line-height: .4rem;
}
.hint .left .left-2{
margin-left: - 0.08rem;
}
.hint .right{
width: .78rem;
flex-shrink:0;
color: #b01c3d;
align-self:center;
}
.tips{
height: .4rem;
line-height: .4rem;
padding: 0 .2rem;
color: #999;
font-size: .14rem;
overflow: hidden;
}
.list-box{
padding: 0 .2rem;
}
.curriculum{
width: 100%;
padding-top: .05rem;
height: 1.2rem;
border-bottom: 1px solid #ccc ;
}
.curriculum-name{
padding: 0;
margin: 0;
height: .4rem;
line-height: .4rem;
color: #333;
}
.curriculum-box{
display: flex;
width: 100%;
height: .6rem;
cursor: pointer;
}
.curriculum-picture{
width: .86rem;
height: .6rem;
}
.curriculum-introduce{
padding-left: 10px;
flex-grow:1;
display: flex;
flex-direction:column;
justify-content:space-between;
}
.curriculum-introduce .time{
color: #b01c3d;
text-align: right;
}
</style>
client/client/project/pages/mobile/studentHelp.vue 0 → 100644
浏览文件 @ 413dd4a1
<template>
<div class="box">
<div class="head">使用指南 - 学生端</div>
<div class="main">
<div class="menu" >
<div v-for="(item,index) in studentChapter" :key="index">
<h2 class="title" v-html="item.name"></h2>
<template v-if="item.child" >
<div v-for="(item1,index1) in item.child" :key="index1">
<h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3>
<template v-if="item1.child" >
<div v-for="(item2,index2) in item1.child" :key="index2">
<h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="content" v-html="contentData"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
studentChapter: [
// 学生端
{
name: '一、引言',
child: [
{
name: '1.1 文档编写目的',
content:
'本操作说明详细的描述了紫荆教育在线教与学系统-学生端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
},
{
name: '1.2 文档适用范围',
content:
'该文档是针对v1.1版本编写的操作说明，后期会根据系统的升级增加相应的功能描述。'
}
]
},
{
name: '二、直播学习系统概述',
child: [
{
name: '2.1 登录方式',
content:
`使用者通过登录网址 <a href='https://pbcsf.ezijing.com/'>https://pbcsf.ezijing.com</a> 进入登录，填写自己的账号和密码完成登录，账号和密码由五道口金融学院教务老师通知学员。
<img src="https://zws-imgs-pub.ezijing.com/static/public/8fa8253970ad76dc23aa5dd8f7cd5dc2.png" alt="">
`
},
{
name: '2.2 退出系统',
content:
`点击系统右上角头像和姓名旁边的图标 <img src="https://zws-imgs-pub.ezijing.com/static/public/7621c520cdb74bf28376e6e13992d7e4.png" alt=""> 会出现下拉菜单，菜单中有退出登录的按钮，点击退出登录后用户将退出系统，页面跳转到登录页。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bda3c4e1dc9a9606332a425b3175fffd.png" alt="">
`
},
{
name: '2.3 上直播课',
child: [
{
name: '2.3.1 进入直播', // <br/>
content:
`进入当天最近时间的直播：登陆后页面上方显示当天直播课程体系，用户点击直播提醒里的“<span>进入直播</span>”<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/43ad6446857c110d1c59eee2c0cce7f8.png" alt="">
在课程大纲里<br/>
课程大纲里找到相应课程，点击“<span>查看课程</span>“，进入下一级课程章节列表<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b4c25410d86bea430d919692b9ba09c2.png" alt=""><br/>
在课程章节列表找到相应正在直播课程，点击“<span>正在直播</span>”进入直播 <br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/369e000ccc6fb2e035a5e71e8fcd1e72.png" alt="">
`
},
{
name: '2.3.2 安装flash播放器',
content:
`安装 flash 播放器，点击“<span>这里</span>”<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/533e05ba6ab4b5530ba27b1bf7c98d86.png" alt=""><br/>
打开 Chrome 的 Flash 拦截<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/cc03e3ddfc5940307099d2affe5e2447.png" alt=""><br/>
右滑接触禁止运行网址Flash<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/997a2ca4a9677cb11b153d2b40747a79.png" alt=""><br/>
是否运行flash改为“先询问“<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/96b654d183be68c5f823639d6f9af8c5.png" alt=""><br/>
再回到直播页面，点击“<span>这里</span>”-浏览器弹出询问点击“<span>允许</span>”安装flash<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/ffe17b292977f9c5fc5dad22b9ae4c87.png" alt="">
`
},
{
name: '2.3.3 直播上课',
content:
`之后可以打开老师视频，观看直播上课 <br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/34d550f5e1855ff30d0744f47faf95b7.png" alt=""><br/>
视频区：显示老师上课的视频，或老师的分享屏幕<br/>
问答区：输入问题向老师提问，可选只看我的问题<br/>
文档区：显示老师上传的附件<br/>
聊天区：用户发送聊天信息，包括文字和表情，可以发给所有人也可以发给某人私聊，显示聊天记录。<br/>
工具栏：屏幕切换/选择线路<br/>
屏幕切换<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/afb5c19997b9916d5b93b07a0a4f3491.png" alt=""><br/>
切换线路<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/43a4ccf1f1cc383aacef7d5fe56cf98d.png" alt=""><br/>
`
}
]
},
{
name: '2.3 观看回放',
child: [
{
name: '2.3.1 进入回放视频',
content:
`在课程大纲课程章节页面，选择相应的课程，点击“<span>观看回放</span>”，进入回放视频<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/6d3a7e90992960d10218525b16e9d700.png" alt=""><br/>
观看回放页面<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/a5094720de06c2db4ae17e226d147b02.png" alt=""><br/>
视频区：显示老师上课的视频，或老师的分享屏幕<br/>
问答区：显示问答记录<br/>
聊天区：显示聊天记录<br/>
文档区：显示老师分享的课件<br/>
工具栏：显示课件/切换屏幕/全屏
`
},
{
name: '2.3.2 显示课件',
content:
`点击屏幕下方的显示课件按钮，如红框所示：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5e989fed092c5b84c41fc66cf81a40d1.png" alt=""><br/>
`
},
{
name: '2.3.3 切换屏幕',
content:
`点击屏幕下方的切换屏幕按钮，如红框所示：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/446445be8b2b5a34ef85e9aee51c5398.png" alt=""><br/>
`
}
]
}
]
}
],
contentData: '本操作说明详细的描述了紫荆教育在线教与学系统-学生端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
}
},
metaInfo () {
return {
title: '紫荆教育在线教与学系统',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
}
},
methods: {
openContent: function (parameter) {
window.console.log('parameter', parameter)
if (!parameter) return
this.contentData = parameter
},
dealRender: () => {
// 移动端设置HTML字体大小
(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth, wFsize // eslint-disable-line
wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document)
}
},
mounted () {
this.dealRender()
}
}
</script>
<style>
html{
font-size: 100px;
font-family: "PingFang SC"
}
.content a{
color:#0C7AB9;
}
.content img{
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.content span{
color: red;
}
</style>
<style lang="scss" scoped>
.head{
width: 100%;
text-align: center;
color: #000000;
font-size: .16rem;
font-weight: 800;
height: .6rem;
line-height: .6rem;
background-color: #EDEDED;
}
.main{
display:flex;
.menu{
width: 1.04rem;
flex-shrink:0;
background-color: #EDEDED;
h2.title{
color: #999999;
font-size: .1rem;
line-height: .14rem;
font-weight: 800;
}
h3.title{
color: #000000;
font-size: .14rem;
line-height: .2rem;
font-weight: 400;
}
.title{
margin: 0;
padding: .15rem .08rem .15rem .13rem;
}
h3:active,h3:hover{
background-color: #ffffff;
color: #BB133E;
}
}
.content{
background-color: #ffffff;
flex-grow:1;
padding: .2rem;
color: #000000;
font-size: .14rem;
line-height: .2rem;
font-weight: 400;
}
}
@media (min-width: 900px) {
.head{
height: 105px;
line-height: 105px;
padding-left: 40px;
text-align: left;
font-size: 18px;
background-color: #ffffff;
}
.main{
.menu{
width: 194px;
background-color: #fff;
h2.title{
font-size: 12px;
line-height: 17px;
padding{
left: 20px;
right: 20px;
}
}
h3.title{
color: #333;
font-size: 14px;
line-height: 20px;
font-weight: 400;
padding{
left: 40px;
right: 17px;
}
}
.title{
margin: 0;
padding-top:20px;
padding-bottom: 20px;
}
h3:active,h3:hover{
background-color: #ededed;
}
}
.content{
background-color: #ededed;
padding: 40px;
font-size: 14px;
line-height: 20px;
}
}
}
@media (min-width: 1200px) {
.box{
width: 1200px;
margin: auto
}
}
</style>
client/client/project/pages/mobile/teacherHelp.vue 0 → 100644
浏览文件 @ 413dd4a1
<template>
<div class="box">
<div class="head">使用指南 - 教师端</div>
<div class="main">
<div class="menu" >
<div v-for="(item,index) in chapter" :key="index">
<h2 class="title" v-html="item.name"></h2>
<template v-if="item.child" >
<div v-for="(item1,index1) in item.child" :key="index1">
<h3 class="title" v-html="item1.name" @click="openContent(item1.content)"></h3>
<template v-if="item1.child" >
<div v-for="(item2,index2) in item1.child" :key="index2">
<h3 class="title" v-html="item2.name" @click="openContent(item2.content)"></h3>
</div>
</template>
</div>
</template>
</div>
</div>
<div class="content" v-html="contentData"></div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
chapter: [
// 教师端
{
name: '一、引言',
child: [
{
name: '1.1 文档编写目的',
content:
`本操作说明详细的描述了紫荆教育在线教与学系统-教师端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>
教师在线上课的操作指南<br/>
助教在线上课的操作指南<br/>
教师和助教培训参考文档
`
},
{
name: '1.2 文档适用范围',
content:
'该文档是针对v1.1版本编写的操作说明，后期会根据系统的升级增加相应的功能描述。'
}
]
},
{
name: '二、在线教学系统概述',
child: [
{
name: '2.1 登录方式',
content:
`通过登录网址 <a href='https://mba-pbcsf.ezijing.com/'>https://mba-pbcsf.ezijing.com</a> 进入登录，填写自己的账号和密码完成登录，初始密码默认为：123456。
<img src="https://zws-imgs-pub.ezijing.com/static/public/2345a1017960c7abe216b392ca5499aa.png" alt="">
`
},
{
name: '2.2 教师课程列表页',
content:
`进入系统后首先显示是的教师的仪表盘，展示出最近在线学习的人数，点击主菜单中的“教学管理”“我的课程“，展示出教师所教授的课程列表：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/1c2df3b76c6bb57e77be679025ba808b.png" alt="">
`
},
{
name: '2.3 课程内容页',
content:
`选择要教学的课程，点击进入课程内容页，展示出该课程的基本信息、课程内容大纲、课程资料、课程大作业，以及学习该课程的学员：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/2afe5cff94fc08346a6a601bff5558b3.png" alt="">
`
},
{
name: '2.4 直播教学',
child: [
{
name: '2.4.1 启动直播教学客户端',
content:
`点击课程内容中的要直播课程，将会新打开一个新的页面，首次使用该系统的教师需要安装客户端。`
},
{
name: '2.4.1.1 客户端安装',
content:
`点击下载按钮下载客户端安装包。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/06006588231fc35af7a1b548834c5d19.png" alt=""><br/>
运行安装包程序，完成一键安装，可自定义安装目录。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/35c6bf85e8df880807e5c39e5f18f8b3.png" alt="">
`
},
// 暂停开发
{
name: '2.4.1.2 启动在线直播客户端',
content:
`在教师端启动页面点击启动按钮启动客户端。如客户端无法启动，可点击“下载修复工具”进行修复，然后重新启动客户端。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/ba5802d8c23cf265dd6882e816be5344.png" alt=""><br/>
`
},
{
name: '2.4.2 开启直播',
content:
`进入直播主界面后，可以上传演示文档显示在电子白板后，在点击“开始直播”（Mac系统是点击“上课”），如图所示。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
教师就可以进行直播在线上课了。
`
}
]
}
]
},
{
name: '三、直播教学详细功能介绍',
child: [
{
name: '3.1 文档上传与演示',
content:
`主界面介绍，如图：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/0c1b3fd9ea823606d59f01d68cd31215.png" alt=""><br/>
主界面主要分为视频区、聊天区、文档区、工具栏几个部分：<br/>
1)视频区：可调整设置摄像头、麦克风，或将视频区设置为桌面共享、插播视频等；<br/>
2)聊天区：可参与聊天、问答，查看用户列表等；<br/>
3)文档区：展示直播文档内容，可对文档进行画笔标注；<br/>
4)工具栏：开始/停止直播，并可使用答题卡、签到等其他工具。<br/>
`,
child: [
{
name: '3.1.1 文档上传',
content:
`教师上课前需提前上传文档。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3aa9762255a2a3ece9fe503f19e1b68e.png" alt=""><br/>
1)点击文档区“+”，选择本地文档进行上传。上传完成后会进行格式转换，若文档较大处理时间会略长，请耐心等待。云端将保留本次直播使用的文档，下次直播打开客户端时会自动同步添加。<br/>
2)点击“×”可在客户端中删除该文档；<br/>
3)若文档加载异常，点击“刷新”可重新加载文档；<br/>
4)支持添加多个文档，支持直播时实时切换文档，支持切换至白板演示。<br/>
※上传文档支持ppt/pptx、doc/docx、pdf、jpg、png等格式，文档需不大于100MB。<br/>
如需保留PPT动画效果，需先在设置中勾选“启用PPT动画转换”，再上传文档。
`
},
{
name: '3.1.2 文档演示',
content:
`<img src="https://zws-imgs-pub.ezijing.com/static/public/a541a46ab182bde135026d0217f08878.png" alt=""><br/>
1)可点击翻页按钮或键盘左右键进行翻页；<br/>
2)点击预览跳页按钮可展开文档缩略图，点击缩略图进行跳页。<br/>
※如果PPT保留了动画特效，点击向后翻页按钮将显示下一个动画动作。<br/>
`
},
{
name: '3.1.3 文档标注',
content:
`在文档工具区可对文档进行画笔标注、添加文字等。支持使用鼠标、触摸板、手写板等。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
1)画笔、图形、直线、文字等可设置大小和颜色；<br/>
2)激光笔模式下学员可实时看到教师的鼠标移动轨迹；<br/>
3)可撤销/恢复每一步标注，或使用橡皮去除某一标注，或直接清空所有标注；<br/>
4)教师端全屏/放大/缩小文档页面将不会影响学员的观看。
`
}
]
},
{
name: '3.2 音视频设置与直播',
child: [
{
name: '3.2.1 音视频设置',
content:
`在客户端主界面点击“设置”按钮，可对视频和音频进行设置。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b345ed946676018fbdfbaefb82dc93c5.png" alt=""><br/>
1.声音设置<br/>
1)麦克风：外部语音输入，根据名称选择内置麦克风或外接耳麦；<br/>
2)扬声器：电脑声音播放，根据名称选择喇叭/耳机；<br/>
3)系统声音采集：采集电脑系统声音，如不需要则建议选择关闭；<br/>
4)麦克风降噪：开启后可降低电脑外部噪音；<br/>
5)麦克风相位反转：默认关闭，仅当直播声音出现异常时，可联系技术支持人员处理；<br/>
6)同步偏移：仅当音视频不同步时进行设置，音频偏移为正表示延后音频时间，为负表示提前音频时间。<br/>
2.视频设置<br/>
1)画面比例：视频画面长宽比，选择“自定义”可自定义画面分辨率；<br/>
2)分辨率：分辨率越高视频越清晰，但对网络要求也越高；<br/>
i.当画面比例设置为4:3时，分辨率可设置为960x720、640x480、320x240；<br/>
ii.当画面比例设置为16:9时，分辨率可设置为1280x720、854x480、426x240；<br/>
iii.当画面比例设置为自定义时，用户可自定义设置分辨率；<br/>
3)帧率：帧率越高视频越流畅，但对网络要求也越高，建议设置为15~20ps（最高30fps）；<br/>
4)桌面共享优化：如果直播视频采用桌面共享画面，则建议将分辨率自定义设置为桌面分辨率，并勾选“桌面共享优化”。正常视频直播下请勿开启。<br/>
3.文档设置<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/fe25d44ca16ea287df97e00351a50f20.png" alt=""><br/>
1)文档工具栏：点击选择要使用的图形工具，包括三角形/多边形等，修改后可在文档区工具栏使用；<br/>
2)画笔颜色：点击设置画笔颜色，修改后可在文档区工具栏使用；<br/>
3)PPT动画：勾选后，新上传的PPT文档将保留还原完整PPT动画效果。<br/>
4.其他设置<br/>
录制：勾选“自动保存图像”可开启本地视频录制，将直播视频内容实时录制为flv文件，保存至设置的本地路径下。本地录制内容仅包括视频区部分。<br/>
※ 直播过程中将无法调整分辨率、帧率等设置，如需更改请先停止直播。
`
},
{
name: '3.2.2 直播控制',
content:
`在音视频设置后，即可开启直播，并在视频区对直播进行实时控制。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/c1a0ba0fc21f41585a0f4b54587031d1.png" alt=""><br/>
1)点击下方图标可开启/关闭麦克风、扬声器、视频画面；<br/>
2)点击“开始直播”按钮，客户端将推流开始直播，同时云端会自动进行录制。在手动录制模式下，需同时点击“开始录制”按钮进行录制。点击“结束直播”按钮，客户端将停止推流，并自动结束录制。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/9567a6c4e7995dab1916c694cf584187.png" alt=""><br/>
3)点击“摄像头”按钮可切换视频区内容，包括摄像头、图片、插播视频、桌面共享等：<br/>
摄像头：设置实时摄像画面作为视频源，可配置摄像头分辨率等参数：<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/8cae4046b93c12c941d3741b17dcf532.png" alt=""><br/>
摄像头设置<br/>
设备：选择对应的摄像头/采集卡名称，点击配置可修改对比度等参数；<br/>
分辨率：勾选“高级设置”后，可设置摄像头分辨率，默认无需调整；<br/>
格式：勾选“高级设置”后，可设置摄像头编码格式，默认无需调整。如有需要可联系技术人员处理；<br/>
幕布抠像：可实现虚拟抠像效果，选择对应的幕布色（绿色和蓝色），并根据实际效果适当调整相似度值；<br/>
自定义音频设备：默认无需调整，如有需要可联系技术人员处理。<br/>
图片：选择本地图片作为视频头像，实现音频直播；<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/153180833eaac27eb2e24ffabbd7ca21.png" alt=""><br/>
插播视频：播放本地视频文件，实现插播、暖场功能；<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/e8fbdb30e83903741ca790b7c8cf90b1.png" alt=""><br/>
支持主流的视频与音频格式，支持添加多个媒体文件；<br/>
支持选择单视频循环、列表循环等播放方式；<br/>
支持控制视频播放、暂停或拖拽进度条等；<br/>
插播音频时将自动获取音频图片，支持自定义上传图片。<br/>
区域捕获：共享桌面一部分区域内容，可调节区域框位置，文档模式区域捕获的窗口大小为客户端设置的视频分辨率大小；<br/>
桌面共享：共享桌面的全部内容。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/9134c824368e37351a2caa4091ccdff4.png" alt=""><br/>
桌面共享设置<br/>
捕获光标：勾选后可共享鼠标的移动轨迹；<br/>
多显卡兼容：当显卡版本过低导致无法共享出桌面时，可勾选设置；<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/8dbe5e9b3c568d0e8be571e891895ad0.png" alt=""><br/>
共享工具栏<br/>
开始共享时客户端会自动跳出，于桌面最上方显示桌面共享工具栏。点击“停止共享”将停止桌面共享，切换回摄像头直播。点击“显示客户端”将显示客户端画面，但桌面共享继续。<br/>
自定义场景：添加多种素材元素，组合为一路视频画面进行直播。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/fdb5ebc066fdc5892182f9ae3dfa2781.png" alt="">
`
}
]
},
{
name: '3.3 互动功能',
content:
'在直播过程中教师可发起聊天、连麦、用户管理、问答、签到等多种互动功能。',
child: [
{
name: '3.3.1 聊天',
content:
`教师可与学员进行公共聊天，支持与单个学员进行私聊。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d8cee0f5f8a66447446a8cf870b54780.png" alt=""><br/>
1)点击学员名称可与该学员进行私聊；<br/>
2)教师可发送表情包及本地图片；<br/>
3)可查看自己发言或全部人员发言；<br/>
4)点击“禁言”可禁止全员聊天。
`
},
{
name: '3.3.2 问答',
content:
`教师可解答学员在问答区的提问，可选择私聊回复或公开回复。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bfe706fc030c274ee3688456df290ca2.png" alt=""><br/>
1)学员可在观看页问答区发起提问，提问内容仅教师和助教可见；<br/>
2)教师回复内容默认为全员可见，勾选“仅提问者可见”可进行单独回复；<br/>
3)点击“发布”可直接公开学员的提问内容；<br/>
4)点击“私聊”可直接与该学员进行私聊聊天；<br/>
点击“禁止提问”可禁止全员提问。
`
},
{
name: '3.3.3 用户',
content:
`教师可查看当前在线用户列表，对用户进行禁言、踢出等操作。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/68312cb9ef5eda0b327c46c6f219cf79.png" alt=""><br/>
1)私聊：其他用户无法看到私聊内容；<br/>
2)禁言：该用户可观看直播，但无法进行发言；<br/>
3)踢出：将该用户踢出直播间，无法继续观看直播；<br/>
IP禁言：封禁用户IP，即使用户退出重新进入也无法发言。
`
},
{
name: '3.3.4 连麦',
content:
`教师可与学员进行一对一视频/语音互动，其他学员将同时看到两人的视频/语音内容。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/05efa523a4c29acc5c218f4d0bfd4f3a.png" alt=""><br/>
教师与学员连麦的流程如下：<br/>
1)教师在教学客户端点击“开启语音”；<br/>
2)观看网页端将会显示“连麦”按钮，学员可点击“视频连麦”或“语音连麦”进行申请；<br/>
3)教师查看正在申请连麦的学员，选择其中一人进行接通。其他正在申请连麦的学员将处于等待状态；<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/05fd70c16f9ef65106aeebab4c9474d6.png" alt=""><br/>
教师与学员接通后，在客户端点击<img src="https://zws-imgs-pub.ezijing.com/static/public/ce21fb246148b6b51a28b329df6756cd.png" alt="">按钮可将教师与学员的画面进行对调。<br/>
4)连麦结束后教师和学员均可挂断连麦。<br/>
※移动端网页不支持视频/语音连麦，仅PC端和移动APP端支持连麦。学员在PC端连麦时需使用谷歌或火狐浏览器。
`
},
{
name: '3.3.5 公告',
content:
`教师可发布、编辑、删除公告，公告内容将置顶于学员聊天区最上方。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/7929c9d839a89fece17a0d8b3386fbad.png" alt="">
`
},
{
name: '3.3.6 答题卡',
content:
`教师可发布答题卡，考察学员的学习情况。题干内容由教师通过视频/语音/文档等途径给出。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/bf4236a44a82ec1d7e32566eaa3c1693.png" alt=""><br/>
1)答题卡题型包括判断题、单选题和多选题（三至五个选项）；<br/>
2)点击“停止答题”后教师和学员端均可查看全员的答题统计。
`
},
{
name: '3.3.7 签到',
content:
`教师可发起签到，考察学员是否有挂机等现象。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/461fafde1248bf0fd4f010b50c045d1f.png" alt=""><br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3402f9624afbe21547f1afe6b340d282.png" alt=""><br/>
1)答题卡题型包括判断题、单选题和多选题（三至五个选项）；<br/>
2)签到倒计时结束后，教师端可查看签到率以及未签到学员的名称。
`
},
{
name: '3.3.8 抽奖',
content:
`教师可发起抽奖，调动学员的积极性。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/433f49801d441d8b33ed97703e2dba7b.png" alt=""><br/>
1)教师可选择参与抽奖的用户，设置中奖名额；<br/>
2)每个中奖者将分别进行抽取，教师可对该中奖者进行重抽；<br/>
3)抽奖完成后教师和中奖者页面会生成中奖码，学员可通过中奖码与教师进行确认。<br/>
`
},
{
name: '3.3.9 问卷',
content:
`教师可发布问卷，考察学员的学习情况。题干内容与选项均包含在问卷中。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/3c68911b9b74212fa110226990d2425a.png" alt=""><br/>
1)每个问卷可创建多个题目，题型包括单选题、多选题和问答题。问卷创建后可进行预览、编辑或删除；<br/>
2)可创建多个问卷，问卷可提前创建，在直播中随时发布；<br/>
3)终止答题后教师可查看学员的答题统计，其中问答题统计仅支持通过后台接口获取；<br/>
4)可导出问卷保存在本地，在下次直播时直接导入本地问卷内容；<br/>
5)可设置强制用户答卷，已经设置提交后显示答案；<br/>
6)可设置每个题目的分值，答题结果公布后将自动计算评分；<br/>
7)第三方问卷可外链至其他第三方问卷网站进行答题。
`
},
{
name: '3.3.10 广播',
content: `教师可发布广播消息，作为临时性公告。广播内容将作为系统消息显示在聊天区中。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/b9d145e32b747940879a234a7b957ae3.png" alt="">
`
}
]
},
{
name: '3.4 其他功能',
child: [
{
name: '3.4.1 设置用户基数',
content:
`设置用户基数，观看端显示的在线人数将为实际人数与基数的总和。教师端显示的人数不受影响。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f01de62f98f0c4c7297361f7c1cdd7f4.png" alt="">
`
},
{
name: '3.4.2 线路测速',
content:
`在直播开始前，客户端会测量当前网络状况，自动选择最优的推流服务器节点。用户也可手动进行节点测试，根据评分和推荐结果选择服务器节点。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/f0979c245f7d2a688fa9b07cbec276a4.png" alt=""><br/>
1)连接耗时：客户端到推流服务器的网络连接时间，连接耗时越短则评分越高；<br/>
2)带宽：客户端到推流服务器的网络吞吐量，带宽值越大则评分越高；<br/>
3)网络稳定性：客户端到推流服务器的网络波动情况 ，稳定性值越高则评分越高。<br/>
※ 直播过程中将无法调整推流节点，如需更改请先停止直播。
`
},
{
name: '3.4.3 布局切换',
content:
`
在直播过程中教师可切换学员观看端的页面布局。点击按钮，选择相应布局模式。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/d66837d018cc45ce5dc7fc1c7ccb198d.png" alt=""><br/>
1)文档为主：<br/>
a)PC端观看页面：文档显示在页面中央，视频显示在左上方；<br/>
b)手机端观看页面：文档显示在页面上方，视频显示在下方；<br/>
2)视频为主：<br/>
a)PC端观看页面：视频显示在页面中央，文档显示在左上方；<br/>
b)手机端观看页面：视频显示在页面上方，文档显示在下方。
`
},
{
name: '3.4.4 观看端锁屏',
content:
'勾选后通过PC客户端登录的学员将进入锁屏状态，无法操作电脑其他内容。网页端登录的学员不受影响。'
},
{
name: '3.4.5 服务器时间',
content:
'勾选后将在客户端顶部栏显示当前实时时间，方便教师查看。'
},
{
name: '3.4.6 状态监控',
content:
`在直播过程中用户可实时查看直播状态，如图17所示。<br/>
<img src="https://zws-imgs-pub.ezijing.com/static/public/585b894a698854837170052888da2a9b.png" alt=""><br/>
1)掉帧：若掉帧数不为0，表示直播画面出现了丢失，请检查教师端电脑和网络配置是否符合第一章所述的直播要求；<br/>
2)码率：直播实时传输码率，如果码率有时出现0 kb/s，表示当前网络较差，请检查网络配置是否符合直播要求；<br/>
CPU：电脑CPU实时使用率，如果CPU使用率持续高于80%，则可能会影响到教学客户端的正常运行，请检查电脑配置是否符合直播要求，或关闭其他正在使用的软件。
`
}
]
}
]
}
],
contentData: '本操作说明说详细的描述了紫荆教育在线教与学系统-教师端-（V1.1版本）实现的功能和操作步骤，其编写目的为：<br/>直播学习系统使用者的操作指南<br/>直播学习系统使用者培训参考文档'
}
},
metaInfo () {
return {
title: '紫荆教育在线教与学系统',
meta: [
// { vmid: 'description', name: 'description', content: this.description }
]
}
},
methods: {
openContent: function (parameter) {
window.console.log('parameter', parameter)
if (!parameter) return
this.contentData = parameter
},
dealRender: () => {
// 移动端设置HTML字体大小
(function (win, doc) {
let wWidth = (win.screen.width > 0) ? (win.innerWidth >= win.screen.width || win.innerWidth === 0) ? win.screen.width : win.innerWidth : win.innerWidth, wFsize // eslint-disable-line
wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document)
}
},
mounted () {
this.dealRender()
}
}
</script>
<style>
html{
font-size: 100px;
font-family: "PingFang SC"
}
.content a{
color:#0C7AB9;
}
.content img{
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
}
.content span{
color: red;
}
</style>
<style lang="scss" scoped>
.head{
width: 100%;
text-align: center;
color: #000000;
font-size: .16rem;
font-weight: 800;
height: .6rem;
line-height: .6rem;
background-color: #EDEDED;
}
.main{
display:flex;
.menu{
width: 1.04rem;
flex-shrink:0;
background-color: #EDEDED;
h2.title{
color: #999999;
font-size: .1rem;
line-height: .14rem;
font-weight: 800;
}
h3.title{
color: #000000;
font-size: .14rem;
line-height: .2rem;
font-weight: 400;
}
.title{
margin: 0;
padding: .15rem .08rem .15rem .13rem;
}
h3:active,h3:hover{
background-color: #ffffff;
color: #BB133E;
}
}
.content{
background-color: #ffffff;
flex-grow:1;
padding: .2rem;
color: #000000;
font-size: .14rem;
line-height: .2rem;
font-weight: 400;
}
}
@media (min-width: 900px) {
.head{
height: 105px;
line-height: 105px;
padding-left: 40px;
text-align: left;
font-size: 18px;
background-color: #ffffff;
}
.main{
.menu{
width: 194px;
background-color: #fff;
h2.title{
font-size: 12px;
line-height: 17px;
padding{
left: 20px;
right: 20px;
}
}
h3.title{
color: #333;
font-size: 14px;
line-height: 20px;
font-weight: 400;
padding{
left: 40px;
right: 17px;
}
}
.title{
margin: 0;
padding-top:20px;
padding-bottom: 20px;
}
h3:active,h3:hover{
background-color: #ededed;
}
}
.content{
background-color: #ededed;
padding: 40px;
font-size: 14px;
line-height: 20px;
}
}
@media (min-width: 1200px) {
.box{
width: 1200px;
margin: auto
}
}
}
</style>
client/client/project/pages/myGrade/rebuild.vue
浏览文件 @ 413dd4a1
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
:http-request="uploadFile1" :http-request="uploadFile1"
:file-list="filesArr1"> :file-list="filesArr1">
<el-button size="mini" type="primary">点击上传</el-button> <el-button size="mini" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">（请下载重修申请表，填写完整再上传）<a href="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/public/713efef7718281271b2ad3eea135e327.docx">模板下载</a></div> <div slot="tip" class="el-upload__tip">（请下载重修申请表，填写完整再上传）<a href="https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/public/713efef7718281271b2ad3eea135e327.docx">模板下载</a></div>
<template v-if="successFileUrl1"> <template v-if="successFileUrl1">
{{successFileUrl1.replace(/.*\/([^\/]*\.[^.]+)$/gi, '$1')}} {{successFileUrl1.replace(/.*\/([^\/]*\.[^.]+)$/gi, '$1')}}
</template> </template>
......
client/client/project/pages/myLearn/course.vue
浏览文件 @ 413dd4a1
<template> <template>
<div> <div>
<template v-if="newLiveMsg.live">
<div class="live-msg">
<div class="txt">直播提醒：</div>
<div class="txt">您的直播课程 《{{newLiveMsg.course_name}}》 将于 {{newLiveMsg.live.start_time}} 开始</div>
<el-button class="in-btn" type="primary" size="small" round @click="goLive">进入直播</el-button>
</div>
</template>
<div class="con-title">我的课程</div> <div class="con-title">我的课程</div>
<div class="con-box"> <div class="con-box">
<template v-for="(item, index) in find"> <template v-for="(item, index) in find">
...@@ -26,14 +33,14 @@ ...@@ -26,14 +33,14 @@
<li v-bind:key="index" class="item"> <li v-bind:key="index" class="item">
<div class="left-pic"> <div class="left-pic">
<template v-if="item.src"> <template v-if="item.src">
<img :src="item.src" alt=""> <img :src="item.src" alt="" @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>
</template> </template>
<template v-else> <template v-else>
<div class="no-img"><i class="el-icon-self-13"></i></div> <div class="no-img"><i class="el-icon-self-13"></i></div>
</template> </template>
</div> </div>
<div class="right-bd"> <div class="right-bd">
<div class="title">{{item.title}}</div> <div class="title" @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>{{item.title}}</div>
<div class="tags"> <div class="tags">
<template v-for="(item1, index) in item.arrTab"> <template v-for="(item1, index) in item.arrTab">
<span v-bind:key="index">{{item1}}</span> <span v-bind:key="index">{{item1}}</span>
...@@ -105,16 +112,36 @@ export default { ...@@ -105,16 +112,36 @@ export default {
// progress: 0 // progress: 0
// } // }
], ],
param: {} param: {},
timeInterval: null,
newLiveMsg: {}
} }
}, },
mounted () { mounted () {
if (this.timeInterval) {
clearInterval(this.timeInterval)
this.timeInterval = null
}
this.timeInterval = setInterval(() => {
cAction.chapterAction.getNewLiveMsg().then(json => {
if (json.status === 200) {
this.newLiveMsg = json.data
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
}, 3000)
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.courseAction.getlearnFindList().then(data => { cAction.courseAction.getlearnFindList().then(data => {
this.find[0].arrItem = data this.find[0].arrItem = data
this.getAjaxList(true, '请去选课广场选课') this.getAjaxList(true, '请去选课广场选课')
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}, },
destroyed () {
if (this.timeInterval) {
clearInterval(this.timeInterval)
this.timeInterval = null
}
},
methods: { methods: {
goCourseAll () { goCourseAll () {
this.$router.push({ path: '/app/my-learn/course-all' }) this.$router.push({ path: '/app/my-learn/course-all' })
...@@ -178,12 +205,29 @@ export default { ...@@ -178,12 +205,29 @@ export default {
} }
this.getAjaxList(true, '请去选课广场选课') this.getAjaxList(true, '请去选课广场选课')
},
/* 直接进直播 */
goLive () {
this.$router.push({ path: `/player/${this.newLiveMsg.semester_id}/${this.newLiveMsg.course_id}/live/${this.newLiveMsg.live.id}` })
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.live-msg {
position: relative;
padding: 15px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
.txt {
padding-right: 100px;
}
.in-btn {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
}
/* 列表 筛选 */ /* 列表 筛选 */
ul.tabs-list { ul.tabs-list {
float: left; float: left;
...@@ -280,6 +324,7 @@ ul.course-list { ...@@ -280,6 +324,7 @@ ul.course-list {
width: 100%; width: 100%;
// height: 100%; // height: 100%;
// transform: translate(-50%, -50%); // transform: translate(-50%, -50%);
cursor: pointer;
} }
} }
.right-bd { .right-bd {
...@@ -293,6 +338,7 @@ ul.course-list { ...@@ -293,6 +338,7 @@ ul.course-list {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
cursor: pointer;
} }
.tags { .tags {
margin: 0.05rem 0; margin: 0.05rem 0;
......
client/client/project/pages/myLearn/courseDetail.vue
浏览文件 @ 413dd4a1
...@@ -48,9 +48,14 @@ ...@@ -48,9 +48,14 @@
</div> </div>
<template v-for="(item1, index1) in _item.chapters"> <template v-for="(item1, index1) in _item.chapters">
<div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'> <div v-bind:key="index1" :class='["body", (item1.id === tabs[1].chapterList.currentChapterId && "on")]'>
<div class='name' :data-vid='item1.vid' :data-cid='item1.cid' :data-sid='item1.sid' :data-hasVA='item1.time' :data-type="item1.video_provider" :data-name='item1.name' @click='jumpToOtherVA' :data-index='index' :data-count='index1'> <div class='name' :data-vid='item1.vid' :data-cid='item1.cid' :data-sid='item1.sid' :data-hasVA='item1.time' :data-type="item1.video_provider" :data-name='item1.name' :data-index='index' :data-count='index1' @click='jumpToOtherVA'>
{{item1.name}} {{item1.name}}
<div class='time'>{{item1.time}}</div> <template v-if='item1.type === 5'>
<div class='time'>{{ item1.live.statusStr }}</div>
</template>
<template v-else>
<div class='time'>{{item1.time}}</div>
</template>
</div> </div>
</div> </div>
</template> </template>
...@@ -293,7 +298,7 @@ export default { ...@@ -293,7 +298,7 @@ export default {
}, { }, {
title: '课程考核', title: '课程考核',
isShow: false, isShow: false,
richText: "<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分，满分100分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现：总分100分（占科目总成绩的30%）</div> <div class='p'>1、每个视频观看完成度50分：以后台数据统计为准，全部看完视频满分50分，其它酌情给分。</div> <div class='em'>注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分：反馈问题以教务老师统计为准，课程完成情况以后台数据为准，是否按时完成视频观看、测试、作业提交，满分50分，酌情给分。</div> <div class='h2'>每章试题：总分100分（占科目总成绩的30%）</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%，则此项得分：80%*100*30%=24分)</div> <div class='h2'>结业大作业：总分100分（占科目总成绩的40%）</div> <div class='p'>结业大作业满分为100分，以助教老师给分为准。</div>", richText: "<div class='h1'>一、最终成绩计算</div> <div class='p'>课程表现得分*30%+每章试题得分*30%+结业大作业得分*40%=该门课程总得分，满分100分，低于80分为不及格，需重修此门课程。84分以上方可申请学位。</div> <img class='b1' src='https://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/build/www/course-check.png' mode='aspectFill' /> <div class='h1'>二、具体细则</div> <div class='h2'>课程表现：总分100分（占科目总成绩的30%）</div> <div class='p'>1、每个视频观看完成度50分：以后台数据统计为准，全部看完视频满分50分，其它酌情给分。</div> <div class='em'>注：视频观看考核的是实际播放时长，不是进度条的显示状态，进度条满格并不一定表示观看完这个视频。以下方每日学习时长为准。</div> <div class='p'>2、课程反馈建设性问题及课程完成情况50分：反馈问题以教务老师统计为准，课程完成情况以后台数据为准，是否按时完成视频观看、测试、作业提交，满分50分，酌情给分。</div> <div class='h2'>每章试题：总分100分（占科目总成绩的30%）</div> <div class='p'>本课程所有试题的平均正确率*100分*占总成绩30%=此项得分。(比如正确度为80%，则此项得分：80%*100*30%=24分)</div> <div class='h2'>结业大作业：总分100分（占科目总成绩的40%）</div> <div class='p'>结业大作业满分为100分，以助教老师给分为准。</div>",
assess: { assess: {
score: '20', score: '20',
duration: '00:01:20', duration: '00:01:20',
...@@ -358,7 +363,8 @@ export default { ...@@ -358,7 +363,8 @@ export default {
'title': [ 'title': [
{ required: true, message: '请输入标题', trigger: 'blur' } { required: true, message: '请输入标题', trigger: 'blur' }
] ]
} },
timeHeart: null
} }
}, },
mounted () { mounted () {
...@@ -403,12 +409,18 @@ export default { ...@@ -403,12 +409,18 @@ export default {
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { }) }).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { })
window.addEventListener('resize', this.resizeRoot.bind(this), false) window.addEventListener('resize', this.resizeRoot.bind(this), false)
/* 实时刷新数据 */
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
this.timeHeart = setInterval(() => {
this.updatePages()
}, 3000)
}, },
destroyed () { destroyed () {
window.removeEventListener('resize', this.resizeRoot.bind(this), false) window.removeEventListener('resize', this.resizeRoot.bind(this), false)
/* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */ /* 清空 ckeditor 需要调用方法删除 并 在DOM结构中也移除 */
this.ckeditor && this.ckeditor.destroy(true) this.ckeditor && this.ckeditor.destroy(true)
this.ckeditor = null this.ckeditor = null
if (this.timeHeart) { clearInterval(this.timeHeart); this.timeHeart = null }
}, },
updated () { updated () {
this.resizeRoot() this.resizeRoot()
...@@ -448,6 +460,20 @@ export default { ...@@ -448,6 +460,20 @@ export default {
] ]
})) }))
}, },
updatePages () {
cAction.courseAction.getCourseDetail(this.cid, this.sid).then(json => {
/* 更新直播状态 */
let course = json.tabs1ChapterList.course
for (let i = 0; i < course.length; i++) {
let chapters = course[i].chapters
for (let j = 0; j < chapters.length; j++) {
if (chapters[j].type === 5) {
this.tabs[1].chapterList.course[i].chapters[j].live = chapters[j].live
}
}
}
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
},
/** /**
* 课程内容 - 列表展开或者跳转 * 课程内容 - 列表展开或者跳转
*/ */
...@@ -523,10 +549,22 @@ export default { ...@@ -523,10 +549,22 @@ export default {
} }
} else if (_course.chapters[i2].type === 4) { } else if (_course.chapters[i2].type === 4) {
this.$router.push({ path: `/player/${sid}/${cid}/chapter-read/${_id}` }) this.$router.push({ path: `/player/${sid}/${cid}/chapter-read/${_id}` })
} else if (_course.chapters[i2].type === 5) {
let status = _course.chapters[i2].live.live_status
if (status !== 0 && status !== 1 && status !== 103) {
this.$message.error(_course.chapters[i2].live.statusStr)
return
}
let enableRecord = _course.chapters[i2].live.enable_record
if (status === 103 && enableRecord !== undefined && enableRecord !== null && !enableRecord) {
this.$message.info('该直播没有回放')
return
}
this.$router.push({ path: `/player/${sid}/${cid}/live/${_id}` })
} }
return return
} }
this.$message.error('系统未知错误，003') this.$message.error('点击频率过快，系统反应不过来，请稍后再试，003')
return return
} }
this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}/${type}` }) this.$router.push({ path: `/player/${sid}/${cid}/chapter-video/${_id}/${type}` })
......
client/client/project/router/routes.js
浏览文件 @ 413dd4a1
...@@ -2,7 +2,7 @@ import App from '../app.vue' ...@@ -2,7 +2,7 @@ import App from '../app.vue'
import container from '../components/layout/container.vue' import container from '../components/layout/container.vue'
export default [ export default [
{ path: '/', redirect: '/app/my-learn/course' }, { path: '/', redirect: window.document.documentElement.clientWidth > 799 ? '/app/my-learn/course' : '/mobile/list' },
{ {
path: '/login', path: '/login',
redirect: '/login/index', redirect: '/login/index',
...@@ -126,6 +126,12 @@ export default [ ...@@ -126,6 +126,12 @@ export default [
name: 'exam', name: 'exam',
component: () => import('../../components/player/exam/exam.vue'), component: () => import('../../components/player/exam/exam.vue'),
props: true props: true
},
{
path: 'live/:id',
name: 'live',
component: () => import('../../components/player/live/live.vue'),
props: true
} }
] ]
}, },
...@@ -145,6 +151,32 @@ export default [ ...@@ -145,6 +151,32 @@ export default [
component: () => import('../../components/survey/surveyPhone.vue'), component: () => import('../../components/survey/surveyPhone.vue'),
props: true props: true
}, },
/* mobile 移动端 - 指向 */
{
path: '/mobile',
redirect: '/mobile/0/0/error/404',
component: () => import('../pages/mobile/index.vue'),
props: true,
children: [
{ path: 'error/404', component: () => import('../components/error/404.vue') },
{
path: 'list',
name: 'list',
component: () => import('../pages/mobile/list.vue'),
props: true
},
{
path: 'help/student',
name: 'studentHelp',
component: () => import('../pages/mobile/studentHelp.vue')
},
{
path: 'help/teacher',
name: 'teacherHelp',
component: () => import('../pages/mobile/teacherHelp.vue')
}
]
},
/* survey-phone 内未找到页面时 - 指向 */ /* survey-phone 内未找到页面时 - 指向 */
{ path: '/survey-phone/*', redirect: '/learn-error/learn-error' }, { path: '/survey-phone/*', redirect: '/learn-error/learn-error' },
/* 静态测试页面 */ /* 静态测试页面 */
......
client/package.json
浏览文件 @ 413dd4a1
...@@ -73,9 +73,9 @@ ...@@ -73,9 +73,9 @@
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"lodash": "^4.17.11", "lodash": "^4.17.11",
"promise.prototype.finally": "^3.1.0", "promise.prototype.finally": "^3.1.0",
"vue": "^2.5.17", "vue": "^2.6.11",
"vue-loader": "^15.4.2", "vue-loader": "^15.9.0",
"vue-router": "^3.0.7", "vue-router": "^3.1.6",
"vue-template-compiler": "^2.5.17" "vue-template-compiler": "^2.6.11"
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论