update

src/App.vue

@@ -1,11 +1,17 @@
 <template>
   <div id="app">
     <router-view />
+    <progress-bar />
   </div>
 </template>
 
 <script>
+import ProgressBar from '@/common/progress_bar';
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    ProgressBar
+  }
 };
 </script>

src/api/app.js

@@ -1,6 +1,7 @@
 import { request, getRequestParams } from '@/utils/request';
 import { getToken } from '@/utils/auth';
-import { Loading } from 'element-ui';
+import store from '@/store';
+import { app } from '@/store/mutation-types';
 
 /**
  * 得到语言列表
@@ -43,7 +44,8 @@ export function fileUpload(SecurityLevel, file) {
   };
   const formData = new FormData();
   formData.append(file.filename, file.file, file.file.name);
-  Loading.service({ text: '上传文件中' });
+  store.commit(`app/${app.SHOW_PROGRESS}`, true);
+
   return request({
     method: 'post',
     url: '/GCLSFileServer/WebFileUpload',
@@ -53,17 +55,15 @@ export function fileUpload(SecurityLevel, file) {
       'Content-Type': 'multipart/form-data'
     },
     data: formData,
-    transformRequest: [
-      function (data) {
-        return data;
-      }
-    ],
     onUploadProgress: progressEvent => {
-      let complete = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + '%';
+      store.commit(
+        `app/${app.SET_PERCENTAGE}`,
+        ((progressEvent.loaded / progressEvent.total) * 100) | 0
+      );
     }
-  }).then(res => {
-    Loading.service().close();
-    return res;
+  }).finally(() => {
+    store.commit(`app/${app.SHOW_PROGRESS}`, false);
+    store.commit(`app/${app.SET_PERCENTAGE}`, 0);
   });
 }
 

src/common/progress_bar/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div v-if="showProgress" class="progress">
+    <div class="progress-bar">
+      <el-progress type="circle" :percentage="percentage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters(['showProgress', 'percentage'])
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.progress {
+  z-index: 3001;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: hsla(0, 0%, 100%, 0.9);
+  transition: opacity 0.3s;
+
+  &-bar {
+    position: absolute;
+    top: 50%;
+    margin-top: -65px;
+    width: 100%;
+    text-align: center;
+  }
+}
+</style>

src/store/getters.js

@@ -1,6 +1,8 @@
 const getters = {
   state: state => state.user.state,
-  language_type: state => state.user.language_type
+  language_type: state => state.user.language_type,
+  showProgress: state => state.app.showProgress,
+  percentage: state => state.app.percentage
 };
 
 export default getters;

src/store/modules/app.js

@@ -5,13 +5,15 @@ let liveStorage = 'liveDevice';
 const getDefaultSate = () => {
   let device = localStorage.getItem(liveStorage);
   let defaultDevice = {
-    video: [],
-    audio: []
+    video: '',
+    audio: ''
   };
   device = device ? JSON.parse(device) : defaultDevice;
 
   return {
-    liveDevice: device
+    liveDevice: device,
+    showProgress: false,
+    percentage: 0
   };
 };
 
@@ -21,6 +23,12 @@ const mutations = {
   [app.SET_DEVICE]: (state, device) => {
     state.liveDevice = device;
     localStorage.setItem(liveStorage, JSON.stringify(device));
+  },
+  [app.SHOW_PROGRESS]: (state, isShow) => {
+    state.showProgress = isShow;
+  },
+  [app.SET_PERCENTAGE]: (state, percentage) => {
+    state.percentage = percentage;
   }
 };
 

src/store/mutation-types.js

@@ -5,7 +5,9 @@ const user = {
 };
 
 const app = {
-  SET_DEVICE: 'SET_DEVICE'
+  SET_DEVICE: 'SET_DEVICE',
+  SHOW_PROGRESS: 'SHOW_PROGRESS',
+  SET_PERCENTAGE: 'SET_PERCENTAGE'
 };
 
 export { user, app };

src/views/live/student/group.js

@@ -30,6 +30,31 @@ export function unSubscribeStream(unSubStream) {
   });
 }
 
+function createLocalStream(vue) {
+  rtc.createLocalStream({
+    streamName: 'picture',
+    createData: createData(),
+    success(stream) {
+      vue.localStream = true;
+      console.log('创建本地流成功', stream);
+      vue.hasVideo = stream.hasVideo;
+      vue.hasAudio = stream.hasAudio;
+      // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
+      stream.show('group-local');
+      publishStream('picture'); // 如果需要立即推流，执行 publish 方法
+    },
+    fail(data) {
+      vue.localStream = false;
+      console.log('创建本地流失败，应用层处理', data);
+      // 创建本地流失败，应用层处理
+      Message({
+        type: 'error',
+        message: '创建本地流失败：' + data
+      });
+    }
+  });
+}
+
 /**
  * 初始化监听事件
  */
@@ -53,38 +78,20 @@ export function initListener(vue) {
   // 教师 必须在加入房间成功的事件回调里创建本地流
   rtc.on('conference_join', () => {
     console.log('加入房间成功');
-    rtc.handsUp({
-      success: str => {
-        console.log('举手成功', str);
-        console.log('创建本地流推流');
-
-        rtc.createLocalStream({
-          streamName: 'picture',
-          createData: createData(),
-          success(stream) {
-            vue.localStream = true;
-            console.log('创建本地流成功', stream);
-            vue.hasVideo = stream.hasVideo;
-            vue.hasAudio = stream.hasAudio;
-            // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
-            stream.show('group-local');
-            publishStream('picture'); // 如果需要立即推流，执行 publish 方法
-          },
-          fail(data) {
-            vue.localStream = false;
-            console.log('创建本地流失败，应用层处理', data);
-            // 创建本地流失败，应用层处理
-            Message({
-              type: 'error',
-              message: '创建本地流失败：' + data
-            });
-          }
-        });
-      },
-      fail: data => {
-        console.log('举手失败', data);
-      }
-    });
+    if (vue.studentSelf.is_teacher_role_in_room === 'true') {
+      rtc.handsUp({
+        success: str => {
+          console.log('举手成功', str);
+          console.log('创建本地流推流');
+          createLocalStream(vue);
+        },
+        fail: data => {
+          console.log('举手失败', data);
+        }
+      });
+    } else {
+      createLocalStream(vue);
+    }
   });
 
   rtc.on('conference_join_failed', err => {

src/views/live/teacher/group.js

@@ -83,7 +83,20 @@ export function initListener(vue) {
       message: '加入房间成功',
       type: 'success'
     });
-    createLocalStream();
+
+    rtc.handsUp({
+      success: str => {
+        console.log('举手成功', str);
+        createLocalStream();
+      },
+      fail: data => {
+        console.log('举手失败', data);
+        Message({
+          type: 'warning',
+          message: data
+        });
+      }
+    });
   });
 
   rtc.on('conference_join_failed', err => {

src/views/live/teacher/group.vue

@@ -212,7 +212,6 @@ export default {
     },
     streamList(newVal) {
       let list = this.student_list.filter(item => {
-        console.log(item.room_user_id);
         let isNoStream = true;
         for (let i = 0; i < newVal.length; i++) {
           if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
@@ -220,7 +219,6 @@ export default {
         return isNoStream;
       });
       this.noStreamList = list;
-      console.log(list);
       if (newVal.length > 0) {
         this.$nextTick(() => {
           newVal[newVal.length - 1].show(`group-${newVal.length - 1}`);