<template>
|
<div>
|
<div style="display: flex; flex-direction: row;">
|
<div id="meet" ref="meet" style="flex-grow: 1;">
|
</div>
|
<div style="padding-top: 5px; padding-left: 5px;right: 15px">
|
<el-button type="success" size="small" @click="hiddenStudent" >{{getShowText()}}</el-button>
|
<el-row v-show="showStudent">
|
<el-row :gutter="5">
|
<el-col :span="12">
|
<el-input placeholder="搜索学员" size="small" clearable @input="getStudentList" @clear="getStudentList" v-model="searchForm.keyword"/>
|
</el-col>
|
<el-col :span="2">
|
<el-button type="primary" size="small" @click="getStudentList">搜索</el-button>
|
</el-col>
|
</el-row>
|
<el-tabs v-model="searchForm.onlineStatus" @tab-click="handleTabChange" style="margin-left: 3px">
|
<el-tab-pane label="在线学员" name="1"></el-tab-pane>
|
<el-tab-pane label="离线学员" name="0"></el-tab-pane>
|
</el-tabs>
|
<el-row :gutter="20" v-for="student in showStudentList" :key="student.id" class="student-row">
|
<el-col :span="18">
|
<div>
|
{{student.realName}}
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div :class="{online: student.onlineStatus === 1, outline: student.onlineStatus === 0}">
|
{{getStatus(student.onlineStatus)}}
|
</div>
|
</el-col>
|
</el-row>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getStudentList } from '@/api/meet'
|
|
export default {
|
data () {
|
return {
|
jitsiApi: null,
|
width: 0,
|
height: 0,
|
showStudent: true,
|
intervalId: null,
|
meetId: null,
|
roomName: '',
|
joinList: [],
|
searchForm: {
|
keyword: '',
|
// 0 未在线、 1 在线
|
onlineStatus: 0
|
},
|
studentList: [],
|
showStudentList: []
|
}
|
},
|
methods: {
|
hiddenStudent () {
|
this.showStudent = !this.showStudent
|
},
|
changeJitsiWindowSize (width, height) {
|
this.jitsiApi.resizeLargeVideo(width, height)
|
},
|
getShowText () {
|
if (this.showStudent) {
|
return '隐藏'
|
} else {
|
return '显示'
|
}
|
},
|
getStatus (status) {
|
if (status === 1) {
|
return '在线'
|
} else if (status === 0) {
|
return '离线'
|
}
|
},
|
handleTabChange (tab) {
|
let status = parseInt(tab.name)
|
this.showStudentList = this.studentList.filter(student => {
|
return student.onlineStatus === status
|
})
|
},
|
getStudentList () {
|
let params = {
|
keyword: this.searchForm.keyword
|
}
|
getStudentList(this.meetId, params).then(res => {
|
this.studentList = res.data.data
|
this.showStudentList = this.studentList.filter(student => {
|
return student.onlineStatus === this.searchForm.onlineStatus
|
})
|
})
|
},
|
getRoomInfo () {
|
this.jitsiApi.getRoomsInfo().then(rooms => {
|
rooms.rooms.forEach(room => {
|
// 房间的id是一个子域名，且@符前的会议名称是经过URL编码的
|
let encodedPart = room.id.split('@')[0]
|
let decodedPart = decodeURIComponent(encodedPart)
|
if (this.roomName === decodedPart) {
|
room.participants.forEach(user => {
|
// 使用'_'作为分隔符分割字符串，获取到userId
|
const parts = user.displayName.split('_')
|
let userId = null
|
if (parts.length > 1) {
|
userId = parseInt(parts[1])
|
// 设置学员状态为在线
|
this.studentList.forEach(student => {
|
console.log(student.id === userId)
|
if (student.id === userId) {
|
student.onlineStatus = 1
|
}
|
})
|
}
|
})
|
}
|
})
|
this.showStudentList = this.studentList.filter(student => {
|
return student.onlineStatus === parseInt(this.searchForm.onlineStatus)
|
})
|
})
|
}
|
},
|
mounted () {
|
this.height = window.innerHeight
|
this.meetId = this.$route.query.meetId
|
this.getStudentList()
|
const domain = this.$route.query.domain
|
const roomName = this.$route.query.roomName
|
this.roomName = roomName
|
const userInfoStr = this.$route.query.userInfoStr
|
const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
|
const options = {
|
roomName: roomName,
|
height: this.height,
|
parentNode: this.$refs.meet,
|
lang: 'zh_CN',
|
userInfo: userInfo,
|
configOverwrite: {
|
prejoinConfig: {
|
enabled: false
|
},
|
whiteboard: {
|
enabled: true
|
}
|
},
|
toolbarButtons: ['whiteboard']
|
}
|
|
this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options)
|
|
this.jitsiApi.addListener('readyToClose', () => {
|
window.close()
|
})
|
// 每三秒更学员在线状态
|
this.intervalId = setInterval(() => {
|
this.getRoomInfo()
|
}, 2500)
|
},
|
beforeDestroy () {
|
// 清除定时器，避免内存泄漏
|
if (this.intervalId) {
|
clearInterval(this.intervalId)
|
this.intervalId = null
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
#meet {
|
height: 100%;
|
}
|
.online {
|
color: #42b983;
|
}
|
.outline {
|
color: #aa1111;
|
}
|
.studentWarp {
|
display: flex;
|
flex-direction: row;
|
}
|
.student-row {
|
margin-top: 8px;
|
padding-left: 3px;
|
color: #565b5e;
|
}
|
</style>
|
