上个小节我们写好了后端的Web方法，把参会人的列表查询出来了，这节课我们在前端页面，把这些参会人生成到视频墙上面。

一、进入视频会议室

线上会议审批通过之后，直到会议开始前的10分钟，参会人才可以进入到视频会议室。在online_meeting.vue页面的loadDataList()函数中，把查询到的线上会议列表加以处理，判断当前用户是不是参会人，而且距离会议开始在10分钟之内。满足这样的条件，进入按钮才有效。

loadDataList: function() {
    ……
    that.$http('meeting/searchOnlineMeetingByPage', 'POST', data, true, function(resp) {
        let page = resp.page;
        for (let one of page.list) {
            //计算会议是否可以进入
		        //1.开会前10分钟可以进入会议室
		        //2.会议状态必须是未开始或者进行中
		        let minute = dayjs(new Date()).diff(dayjs(`${one.date} ${one.start}`), 'minute');
		        if (one.mine == 'true' && ((minute >= -10 && minute <= 0 && one.status == '未开始') || one.status == '进行中')) {
		            one.canEnterMeeting = true;
		        } else {
		            one.canEnterMeeting = false;
		        }
        }
    }
}

<el-button type="text"
					 size="medium"
					 :disabled="!scope.row.canEnterMeeting"
					 @click="enterHandle(scope.row.id, scope.row.uuid)"
>
  进入
</el-button>

定义enterHandle()函数，通过路由跳转到meeting_video.vue页面，然后传入meetingId和uuid俩个参数。让meeting_video.vue页面查询RoomID和参会人列表。

enterHandle: function(id, uuid) {
    let that = this;
    that.$router.push({ name: 'MeetingVideo', params: { meetingId: id, uuid: uuid } });
},

二、生成视频墙

在meeting_video.vue页面的created()函数中发起Ajax请求，查询RoomID和参会人。

created: function() {
    let that = this;
    //路由传入的参数
    let params = that.$route.params;
    that.meetingId = params.meetingId;
    that.uuid = params.uuid;
    let data = { meetingId: that.meetingId };
    //查询会议所有参会人，并且生成视频墙
    that.$http('meeting/searchOnlineMeetingMembers', 'POST', data, true, function(resp) {
        let list = resp.list;
        if (list != null && list.length > 0) {
            //取出当前用户的信息
            that.mine = list[0];
            //其他参会人信息保存在memberList里面
            for (let i = 1; i < list.length; i++) {
                that.memberList.push(list[i]);
            }
        }
    });
  
    data = {
        uuid: that.uuid
    };
    // 查询视频会议室的ID
    that.$http('meeting/searchRoomIdByUUID', 'POST', data, true, function(resp) {
        if (resp.roomId == null) {
            that.$message({
                message: '不存在视频会议室',
                type: 'error',
                duration: 1200
            });
        } else {
            that.roomId = resp.roomId;
        }
    });
}

我们看一下视图层的HTML标签是怎么定义视频墙的。

<!-- 视频墙 -->
<el-col :span="19">
    <div class="meeting-container">
        <el-scrollbar height="650px" id="videoListContainer">
            <div class="video-list">
                <!--当前用户排在视频墙第一位-->
                <div class="video">
                    <div class="user">
                        <img class="photo" :src="mine.photo" />
                        <span class="name">{{ mine.name }}{{ shareStatus ? '（共享中）' : '' }}</span>
                    </div>
                    <div id="localStream"></div>
                </div>
                <!--其他参会人-->
                <div class="video" v-for="one in memberList">
                    <div class="user">
                        <img class="photo" :src="one.photo" />
                        <span class="name">{{ one.name }}</span>
                    </div>
                    <div :id="one.id" class="remote-stream" @dblclick="bigVideoHandle(one.id)"></div>
                </div>
            </div>
        </el-scrollbar>
        <div id="videoBig" @dblclick="smallVideoHandle()"></div>
    </div>
    <p class="desc">
        会议过程中，不需要发言的会场要主动将本地会场的MIC关闭，保证会场安静，当需要发言时要及时打开MIC。会议过程中，需要发言讨论时，先打开MIC向主会场提出请求，得到同意后再继续发言，否则请继续保持静音。发言时，要—个人一个人的发言，不要多人同时讲话，因为全向MIC会把所有人的声音混合，远端听到的声音会非常嘈杂，听不清具体说话内容。在会议进行过程中，尽量控制会场噪音，不要在会场中随意走动
    </p>
</el-col>