显示隐藏在线情况

xiangpei

2024-07-12 e9c4997aa45f64643e3026ac3845fc86d2793680

 src/views/meet/index.vue

@@ -1,33 +1,34 @@
<template>
  <div>
    <div style="display: flex; flex-direction: row">
    <div style="display: flex; flex-direction: row; position: relative">
      <div id="meet" ref="meet"/>
      <div style="padding: 5px">
        <el-row :gutter="5">
          <el-col :span="22">
            <el-input placeholder="搜索" size="small" v-model="searchForm.keyword"/>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" @click="getRoomInfo">搜索</el-button>
          </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>
        <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>
      <div style="padding: 5px;position: absolute;right: 0">
        <el-button type="primary" size="small" @click="showStudent = ! showStudent" style="float: right">{{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>
            <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-row>
      </div>
    </div>
@@ -39,8 +40,9 @@

let jitsiApi = null
export default {
  data() {
  data () {
    return {
      showStudent: true,
      intervalId: null,
      meetId: null,
      roomName: '',
@@ -48,21 +50,28 @@
      searchForm: {
        keyword: '',
        // 0 未在线、 1 在线
        onlineStatus: 0,
        onlineStatus: 0
      },
      studentList: [],
      showStudentList: [],
      showStudentList: []
    }
  },
  methods: {
    getStatus(status) {
      if (status === 1) {
        return "在线"
      } else if (status === 0) {
        return "离线"
    getShowText() {
      if (this.showStudent) {
        return '隐藏在线情况'
      } else {
        return '展示在线情况'
      }
    },
    handleTabChange(tab) {
    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
@@ -70,12 +79,12 @@
    },
    getStudentList () {
      let params = {
        keyword: this.keyword
        keyword: this.searchForm.keyword
      }
      getStudentList(this.meetId, params).then(res => {
        this.studentList = res.data.data
        this.showStudentList = this.studentList.filter(student => {
          return student.onlineStatus === 0
          return student.onlineStatus === this.searchForm.onlineStatus
        })
      })
    },
@@ -110,7 +119,7 @@
    }
  },
  mounted () {
    const width = window.innerWidth * 0.7
    const width = window.innerWidth * 0.8
    const height = window.innerHeight
    this.meetId = this.$route.query.meetId
    this.getStudentList()
@@ -145,7 +154,7 @@
    // 每三秒更学员在线状态
    this.intervalId = setInterval(() => {
      this.getRoomInfo()
    }, 3000)
    }, 2500)
  },
  beforeDestroy () {
    // 清除定时器，避免内存泄漏
@@ -170,7 +179,7 @@
}
.studentWarp {
  display: flex;
  flex-display: row;
  flex-direction: row;
}
.student-row {
  margin-top: 8px;