From e9ac312fdfdf723dfc5b97dbf56df9c339f635f9 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 26 七月 2024 18:04:26 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev

---
 src/views/meet/index.vue |  224 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 209 insertions(+), 15 deletions(-)

diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue
index f5e576a..90bdb15 100644
--- a/src/views/meet/index.vue
+++ b/src/views/meet/index.vue
@@ -1,27 +1,145 @@
 <template>
-  <div id="meet" ref="meet">
-    <div>
-      <span>
-        {{ '156165165' }}
-      </span>
+  <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>
-let jitsiApi = null
+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 => {
+          // 鎴块棿鐨刬d鏄竴涓瓙鍩熷悕锛屼笖@绗﹀墠鐨勪細璁悕绉版槸缁忚繃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 () {
-    const width = window.innerWidth
-    const height = window.innerHeight
+    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,
-      width: width,
-      height: height,
+      height: this.height,
       parentNode: this.$refs.meet,
       lang: 'zh_CN',
       userInfo: userInfo,
@@ -29,17 +147,75 @@
         prejoinConfig: {
           enabled: false
         },
+        // 绂佺敤閭�璇�
+        disableInviteFunctions: true,
+        // 绂佺敤閭
+        gravatar: {
+          disabled: true
+        },
+        // 绂佺敤鏀瑰悕
+        readOnlyName: true,
+        // 鑷畾涔夋寜閽�
+        toolbarButtons: [
+          // 鎽勫儚澶�
+          'camera',
+          // 鑱婂ぉ
+          'chat',
+          // 'closedcaptions',
+          // 鍏变韩
+          'desktop',
+          'download',
+          // 'embedmeeting',
+          // 'etherpad',
+          // 'feedback',
+          // 'filmstrip',
+          'fullscreen',
+          'hangup',
+          // 'help',
+          'highlight',
+          // 'invite',
+          'linktosalesforce',
+          'livestreaming',
+          'microphone',
+          'noisesuppression',
+          // 'participants-pane',
+          // 'profile',
+          // 'raisehand',
+          'recording',
+          // 'security',
+          'select-background',
+          'settings',
+          'shareaudio',
+          'sharedvideo',
+          'shortcuts',
+          'stats',
+          'tileview',
+          'toggle-camera',
+          // 'videoquality',
+          'whiteboard'
+        ],
         whiteboard: {
           enabled: true
         }
-      },
-      toolbarButtons: ['whiteboard']
+      }
     }
-    jitsiApi = new window.JitsiMeetExternalAPI(domain, options)
 
-    jitsiApi.addListener('readyToClose', () => {
+    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
+    }
   }
 }
 
@@ -47,7 +223,25 @@
 
 <style lang="scss" scoped>
 #meet {
-  width: 100%;
   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>

--
Gitblit v1.8.0