Skip to content

L
learn-online-pc
提交 9baa4785 authored 作者: zyx's avatar zyx
浏览文件
操作

update

上级 3e2f502d
隐藏空白字符变更
内嵌 并排
正在显示 包含 1218 行增加 和 0 行删除
client/src/action/OtherAction.js
浏览文件 @ 9baa4785
......@@ -22,6 +22,8 @@ export default class OtherAction extends BaseACTION {
* 当前登录用户，检测是否该系统有权限
*/
getInfo () { return Other.getInfo().then(res => res) }
/* 调用退出登录接口 */
outLogin () { return Other.outLogin().then(res => res) }
/**
* 文件上传
*/
......
client/src/api/other_api.js
浏览文件 @ 9baa4785
......@@ -10,6 +10,10 @@ export default class OtherAPI extends BaseAPI {
* 获取我的消息信息
*/
getMyMsg = () => this.get('/v2/education/message/my', {})
/**
* 调用退出登录
*/
outLogin = () => this.get('/user_center/logout', {}, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
/**
* 文件提交
* @param {[object]} obj
......
client/src/pages/mobileLive/index.vue 0 → 100644
浏览文件 @ 9baa4785
<template>
<div>
<router-view></router-view>
</div>
</template>
client/src/pages/mobileLive/list.vue 0 → 100644
浏览文件 @ 9baa4785
<template>
<div class="pages">
<div class="head">
<img class="logo5" alt="logo" src="@/assets/images/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 '@action'
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.Ohter.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.Player.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.Player.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
const _status = item.live.live_status
const 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, '/')
const 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 // eslint-disable-line
const wFsize = (wWidth > 640 ? 640 : wWidth) / 375 * 100
// wFsize = wFsize > 32 ? wFsize : 32;
doc.documentElement.style.fontSize = wFsize + 'px'
})(window, document)
},
opencc: function (obj) {
const _live = obj.live
if (!_live || !_live.user_id) {
this.$message.error('网络错误，刷新重试')
return
}
const userid = _live.user_id
const roomid = _live.room_id
const viewertoken = _live.viewer_token
const recordid = _live.record_id
const liveStatus = _live.live_status
const enableRecord = _live.enable_record // 0: 不启用回放 1: 开启回放
const 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/src/pages/mobileLive/studentHelp.vue 0 → 100644
浏览文件 @ 9baa4785
<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 // eslint-disable-line
const 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/src/pages/mobileLive/teacherHelp.vue 0 → 100644
浏览文件 @ 9baa4785
<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 // eslint-disable-line
const 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/src/router/routes.js
浏览文件 @ 9baa4785
......@@ -149,6 +149,48 @@ export default [
}
]
},
/* mobileLive 移动端 */
{
path: '/mobile',
redirect: '/mobile/0/0/error/404',
component: () => import('@/pages/mobileLive/index.vue'),
props: true,
children: [
{ path: 'error/404', component: () => import('@/components/errorPages/404.vue') },
{
path: 'list',
name: 'list',
component: () => import('@/pages/mobileLive/list.vue'),
props: true
},
{
path: 'help/student',
name: 'studentHelp',
component: () => import('@/pages/mobileLive/studentHelp.vue')
},
{
path: 'help/teacher',
name: 'teacherHelp',
component: () => import('@/pages/mobileLive/teacherHelp.vue')
}
]
},
// {
// path: '/survey/:sid/:cid',
// name: 'survey',
// component: () => import('../../components/survey/survey.vue'),
// props: true
// },
// /* survey 内未找到页面时 - 指向 */
// { path: '/survey/*', redirect: '/learn-error/learn-error' },
// {
// path: '/survey-phone/:sid/:cid',
// name: 'survey-phone',
// component: () => import('../../components/survey/surveyPhone.vue'),
// props: true
// },
// /* survey-phone 内未找到页面时 - 指向 */
// { path: '/survey-phone/*', redirect: '/learn-error/learn-error' },
/* 如果所有页面都没找到 - 指向 */
{ path: '*', component: () => import('@/components/errorPages/404.vue') }
]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论