From 80889e7f32480ae76896f3bd042baa82a0fc9e9e Mon Sep 17 00:00:00 2001 From: luohairen <3399054449@qq.com> Date: 星期四, 14 十一月 2024 11:39:07 +0800 Subject: [PATCH] 班级成绩图表分析 --- src/views/meet/index.vue | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 153 insertions(+), 16 deletions(-) diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue index 5dc47a5..6fef657 100644 --- a/src/views/meet/index.vue +++ b/src/views/meet/index.vue @@ -4,11 +4,12 @@ <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-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-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> @@ -18,18 +19,30 @@ <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-table :data="showStudentList" style="width: 100%"> + <el-table-column prop="realName" label="瀛﹀憳濮撳悕"></el-table-column> + <el-table-column prop="id" label="鎿嶄綔" width="80px;"> + <template slot-scope="scope"> + <el-dropdown trigger="click" @command="handleCommand"> + <i class="el-icon-more-outline" id="more"></i> + <el-dropdown-menu slot="dropdown"> + <el-dropdown-item :command="{ command: 'openCamera', id: scope.row.id }">鎵撳紑/鍏抽棴鎽勫儚澶�</el-dropdown-item> + <el-dropdown-item :command="{ command: 'mute', id: scope.row.id }">闈欓煶/鍙栨秷闈欓煶</el-dropdown-item> + <el-dropdown-item :command="{ command: 'kickOut', id: scope.row.id }">韪㈠嚭</el-dropdown-item> + </el-dropdown-menu> + </el-dropdown> + </template> + </el-table-column> + <el-table-column prop="onlineStatus" label="鐘舵��" width="80px;"> + <template slot-scope="scope"> + <div :class="{ online: scope.row.onlineStatus === 1, outline: scope.row.onlineStatus === 0 }"> + {{ getStatus(scope.row.onlineStatus) }} + </div> + </template> + </el-table-column> + </el-table> + <el-button class="link-left" type="primary" size="small" @click="muteEveryone">鍏ㄤ綋闈欓煶</el-button> + <el-button class="link-left" type="primary" size="small" @click="videoEveryone">鍏ㄤ綋鍏抽棴鎽勫儚澶�</el-button> </el-row> </div> </div> @@ -38,10 +51,12 @@ <script> import { getStudentList } from '@/api/meet' +import Cookies from 'js-cookie' export default { data () { return { + ws: null, jitsiApi: null, width: 0, height: 0, @@ -59,7 +74,65 @@ showStudentList: [] } }, + beforeDestroy () { + if (this.ws) { + this.ws.close() + } + }, methods: { + muteEveryone () { + this.jitsiApi.executeCommand('muteEveryone', 'audio') + const h = this.$createElement; + + this.$notify({ + title: '鎻愮ず', + message: h('i', { style: 'color: teal'}, '宸插叏浣撶闊�') + }); + }, + videoEveryone () { + this.jitsiApi.executeCommand('muteEveryone', 'video') + const h = this.$createElement; + + this.$notify({ + title: '鎻愮ず', + message: h('i', { style: 'color: teal'}, '宸插叧闂叏浣撹棰�') + }); + }, + handleCommand (command) { + this.sendMessage(JSON.stringify(command)) + }, + initWebSocket () { + this.ws = new WebSocket('wss://www.kgmeet.com:18080/websocket/' + JSON.parse(Cookies.get('adminUserInfo')).id) + let ws = this.ws + ws.onopen = () => { + console.log('WebSocket 杩炴帴鎴愬姛') + // 鍙戦�佸績璺虫暟鎹� + ws.send('ping') + } + ws.onmessage = (event) => { + console.log('鏀跺埌鏈嶅姟鍣ㄦ秷鎭�:', event.data) + // 澶勭悊鏈嶅姟鍣ㄥ彂鏉ョ殑娑堟伅 + } + ws.onerror = (error) => { + console.error('WebSocket 杩炴帴鍑洪敊:', error) + } + ws.onclose = () => { + console.log('WebSocket 杩炴帴宸插叧闂�') + // 鍙互鍦ㄨ繖閲屽皾璇曢噸鏂拌繛鎺� + } + + // 缁勪欢閿�姣佹椂鏂紑 WebSocket 杩炴帴 + this.$once('hook:beforeDestroy', () => { + ws.close() + }) + }, + sendMessage (message) { + if (this.ws.readyState === WebSocket.OPEN) { + this.ws.send(message) + } else { + console.error('WebSocket 杩炴帴鏈墦寮�') + } + }, hiddenStudent () { this.showStudent = !this.showStudent }, @@ -146,11 +219,58 @@ prejoinConfig: { enabled: false }, + // 绂佺敤閭�璇� + disableInviteFunctions: true, + // 绂佺敤閭 + gravatar: { + disabled: true + }, + // 绂佺敤鏀瑰悕 + readOnlyName: true, + // 鑷畾涔夋寜閽� + toolbarButtons: [ + // 鎽勫儚澶� + 'camera', + // 鑱婂ぉ + 'chat', + // 鍏变韩 + 'desktop', + 'download', + 'fullscreen', + 'hangup', + // 'help', + 'highlight', + // 'invite', + 'linktosalesforce', + 'livestreaming', + 'microphone', + 'noisesuppression', + 'recording', + 'select-background', + 'settings', + 'shareaudio', + 'sharedvideo', + 'shortcuts', + 'stats', + 'tileview', + 'toggle-camera', + 'whiteboard', + + // 'closedcaptions', + // 'embedmeeting', + // 'etherpad', + // 'feedback', + // 'filmstrip', + 'participants-pane', + // 'profile', + 'raisehand', + // 'security', + 'videoquality', + ], whiteboard: { enabled: true } - }, - toolbarButtons: ['whiteboard'] + } } this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options) @@ -158,10 +278,15 @@ this.jitsiApi.addListener('readyToClose', () => { window.close() }) + // 鍒濆鍖� + this.initWebSocket() // 姣忎笁绉掓洿瀛﹀憳鍦ㄧ嚎鐘舵�� this.intervalId = setInterval(() => { this.getRoomInfo() + // 鍙戦�佸績璺虫暟鎹� + this.ws.send('ping') }, 2500) + }, beforeDestroy () { // 娓呴櫎瀹氭椂鍣紝閬垮厤鍐呭瓨娉勬紡 @@ -175,19 +300,31 @@ </script> <style lang="scss" scoped> +/deep/ thead { + display: none; +} + +#more:hover { + cursor: pointer; +} + #meet { height: 100%; } + .online { color: #42b983; } + .outline { color: #aa1111; } + .studentWarp { display: flex; flex-direction: row; } + .student-row { margin-top: 8px; padding-left: 3px; -- Gitblit v1.8.0