优化

xiangpei

2024-07-12 8a7fdd668f6ed415ff0bfa53d9e759cca73a6dbc

优化

 src/views/meet/index.vue

@@ -2,32 +2,32 @@
  <div>
    <div style="display: flex; flex-direction: row; position: relative">
      <div id="meet" ref="meet"/>
      <div style="padding: 5px;position: absolute;right: 0">
        <el-button type="primary" size="small" @click="showStudent = ! showStudent" style="float: right">{{getShowText()}}</el-button>
      <div style="padding-top: 5px; padding-left: 5px; position: absolute;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="22">
              <el-input placeholder="搜索" size="small" clearable @input="getStudentList" @clear="getStudentList" v-model="searchForm.keyword"/>
            <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-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>
          <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>
@@ -38,10 +38,12 @@
<script>
import { getStudentList } from '@/api/meet'

let jitsiApi = null
export default {
  data () {
    return {
      jitsiApi: null,
      width: 0,
      height: 0,
      showStudent: true,
      intervalId: null,
      meetId: null,
@@ -57,11 +59,17 @@
    }
  },
  methods: {
    getShowText() {
    hiddenStudent () {
      this.showStudent = !this.showStudent
    },
    changeJitsiWindowSize (width, height) {
      this.jitsiApi.resizeLargeVideo(width, height)
    },
    getShowText () {
      if (this.showStudent) {
        return '隐藏在线情况'
        return '隐藏'
      } else {
        return '展示在线情况'
        return '显示'
      }
    },
    getStatus (status) {
@@ -89,7 +97,7 @@
      })
    },
    getRoomInfo () {
      jitsiApi.getRoomsInfo().then(rooms => {
      this.jitsiApi.getRoomsInfo().then(rooms => {
        rooms.rooms.forEach(room => {
          // 房间的id是一个子域名，且@符前的会议名称是经过URL编码的
          let encodedPart = room.id.split('@')[0]
@@ -119,8 +127,8 @@
    }
  },
  mounted () {
    const width = window.innerWidth * 0.8
    const height = window.innerHeight
    this.width = window.innerWidth * 0.8
    this.height = window.innerHeight
    this.meetId = this.$route.query.meetId
    this.getStudentList()
    const domain = this.$route.query.domain
@@ -130,8 +138,8 @@
    const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null
    const options = {
      roomName: roomName,
      width: width,
      height: height,
      width: this.width,
      height: this.height,
      parentNode: this.$refs.meet,
      lang: 'zh_CN',
      userInfo: userInfo,
@@ -146,9 +154,9 @@
      toolbarButtons: ['whiteboard']
    }

    jitsiApi = new window.JitsiMeetExternalAPI(domain, options)
    this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options)

    jitsiApi.addListener('readyToClose', () => {
    this.jitsiApi.addListener('readyToClose', () => {
      window.close()
    })
    // 每三秒更学员在线状态