GCLS_Page_Learn/src/views/live/teacher/group.vue

<template>
  <div class="live">
    <!--顶部-->
    <div class="live-top">
      <div class="live-title">
        <div class="live-title-name">{{ roomInfo.cs_item_name }} {{ roomInfo.task_name }}</div>
        <div>
          <el-popover
            v-show="!isGroup"
            v-model="visible"
            width="352"
            popper-class="adjust"
            trigger="click"
            placement="bottom-start"
          >
            <div class="adjust-title">调整分组</div>
            <div class="adjust-list">
              <div v-for="item in adjustGroupList" :key="item.student_id" class="adjust-list-item">
                <el-avatar icon="el-icon-user" :src="item.student_image_url" />
                <span class="student-name">{{ item.student_name }}</span>
                <el-select v-model="item.group_id" size="mini">
                  <el-option v-for="{ value, label } in groupList" :key="value" :value="value" :label="label" />
                </el-select>
              </div>
            </div>
            <div class="adjust-button" @click="adjustGroup">确定</div>

            <el-button slot="reference">调整分组</el-button>
          </el-popover>
          <el-button @click="stopGroup">
            {{ $t('Key404') }}
          </el-button>
          <el-button v-show="isGroup" @click="reconnection">
            {{ $t('Key405') }}
          </el-button>
          <el-button v-show="isGroup && !isAudit" @click="setCurGroupToExample_Teacher">
            {{ $t('Key406') }}
          </el-button>
          <el-button v-show="isGroup && !isAudit" @click="exitCurGroup_Teacher">
            {{ $t('Key407') }}
          </el-button>
        </div>
      </div>
      <div class="live-course-name">
        {{ roomInfo.course_name }}
      </div>
      <div class="live-teacher">
        <span class="live-teacher-name"> <svg-icon icon-class="person" />{{ roomInfo.teacher_name }} </span>
        <span><svg-icon icon-class="people" />{{ roomInfo.student_count }}</span>
      </div>
    </div>
    <!-- 主容器 -->
    <div class="live-container">
      <!-- 左侧 -->
      <div class="live-container-left">
        <div v-show="!isGroup" class="student-group">
          <template v-for="(item, i) in group_list">
            <div :key="item.room_id" class="student-group-list" @click="enterGroup(item.group_id)">
              <div class="group-serial">
                {{ i + 1 }}
              </div>
              <div class="student-group-list-avatar">
                <el-avatar
                  v-for="li in item.student_list"
                  :key="li.student_id"
                  icon="el-icon-user"
                  :src="li.student_image_url"
                />
              </div>
            </div>
          </template>
        </div>

        <div v-show="isGroup" class="group-discussion" :style="{ height: isAudit ? '404px' : '468px' }">
          <div v-for="(item, i) in streamList" :key="item.id()" class="group-wrapper">
            <div :id="`group-${i}`" class="group-box" />
            <div class="live-wrapper-stream">
              {{ searchStudentName(item.id()) }}
              <svg-icon :icon-class="item.hasAudio() ? 'mike-on-grey' : ''" />
              <svg-icon v-if="isMobile(item.id())" icon-class="mobile" />
            </div>
          </div>

          <div v-for="item in noStreamList" :key="item.student_id" class="group-box student-info">
            <el-avatar icon="el-icon-user" :src="item.student_image_url" :size="80" />
            <span class="student_name">{{ item.student_name }}</span>
          </div>
        </div>

        <div v-if="isAudit" class="audit-list">
          <svg-icon icon-class="arrow-left-white" @click="listMove('left')" />
          <div ref="avatar" class="audit-list-container">
            <div ref="list" class="avatar-list" :style="{ 'margin-left': marginLeft + 'px' }">
              <el-avatar
                v-for="item in audience_list"
                :key="item.student_id"
                :size="32"
                :src="item.student_image_url"
              />
            </div>
          </div>
          <svg-icon icon-class="arrow-right-white" @click="listMove('right')" />
        </div>

        <div class="button-group">
          <div class="button-group-left">
            <span class="stop-group" @click="stopGroup">{{ $t('Key404') }}</span>
          </div>
          <div class="button-group-right" />
        </div>
        <div class="live-container-left-chat">
          <div class="chat-top">
            <span>{{ $t('Key409') }}</span>
            <el-button size="small" @click="sendAllMsg">
              {{ $t('Key408') }}
            </el-button>
          </div>
          <div class="chat-window">
            <ul ref="chat" class="chat-window-ul">
              <li v-for="(item, i) in chatList" :key="i">
                <div class="msg-normal">
                  <span>{{ item.username }}: </span>
                  <span>{{ item.msg }}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="chat-speak">
            <el-input
              v-model="msg"
              :placeholder="isGroup ? $t('Key410') : $t('Key411')"
              maxlength="400"
              :disabled="!isGroup"
              @keydown.enter.native="sendMsg"
            >
              <el-button slot="append" :disabled="!isGroup" @click="sendMsg">
                {{ $t('Key302') }}
              </el-button>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="live-container-right">
        <div class="live-teacher-lens" @mouseover="liveMenuShow = true" @mouseout="liveMenuShow = false">
          <div id="live" />
          <div :style="{ bottom: liveMenuShow ? '0' : '-40px' }" class="live-wrapper">
            <div>
              {{ roomInfo.teacher_name }}
            </div>
            <div />
          </div>
        </div>
        <div class="student-list">
          <div class="student-list-title">
            {{ $t('Key412') }}
          </div>
          <ul>
            <template v-if="isGroup">
              <li v-for="item in student_list" :key="item.room_user_id">
                <div class="student-list-left">
                  <el-avatar icon="el-icon-user" size="small" :src="item.student_image_url" />
                  <span class="name">{{ item.student_name }}</span>
                </div>
              </li>
            </template>
            <template v-else>
              <template v-for="item in group_list">
                <li v-for="el in item.student_list" :key="el.student_id">
                  <div class="student-list-left">
                    <el-avatar icon="el-icon-user" size="small" :src="el.student_image_url" />
                    <span class="name">{{ el.student_name }}</span>
                  </div>
                  <div class="student-list-right" />
                </li>
              </template>
            </template>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  GetLiveRoomInfo,
  StudentExitLiveRoom,
  StopGroup,
  GetGroupInfo_Teacher,
  CreateEnterLiveRoomSession,
  JoinGroup_Teacher,
  ExitCurGroup_Teacher,
  GetMyGroupInfo_Teacher,
  GetGroupStatus,
  SendGroupMessage,
  SetCurGroupToExample_Teacher,
  AdjustGroup
} from '@/api/live';
import * as common from './group';

export default {
  data() {
    return {
      task_id: this.$route.query.task_id,
      isGroup: false,
      group_id: '',
      // 是否旁听
      isAudit: false,
      // 定时器
      timer: null,
      marginLeft: 0,
      rtc: null,
      roomData: {
        desc: '直播间标题',
        name: '姓名',
        user: {
          id: '',
          name: '',
          role: 'talker',
          rommid: ''
        },
        max_users: 1,
        allow_chat: true,
        allow_audio: true,
        allow_speak: true
      },
      roomInfo: {
        room_id: '',
        video_mode: 1,
        task_name: '',
        cs_item_name: '',
        course_name: '',
        teacher_name: '',
        student_count: 0
      },
      loadedNumber: 0,
      speakData: {},
      roomContext: {},
      msg: '',
      chatList: [],
      // 小组成员列表
      group_list: [],
      live_room_sys_user_id: '',
      // 直播状态
      liveStat: false,
      liveMenuShow: false,
      room_id: '',
      session_id: '',
      streamList: [],
      student_list: [],
      // 无远程流学员列表
      noStreamList: [],
      // 旁听学员列表
      audience_list: [],
      // 调整分组用列表
      adjustGroupList: [],
      visible: false
    };
  },
  computed: {
    groupList() {
      const list = [];
      this.group_list.forEach(({ group_id, group_num }) => {
        list.push({
          label: `小组${group_num}`,
          value: group_id
        });
      });
      return list;
    }
  },
  watch: {
    loadedNumber(newVal) {
      if (newVal === 2) {
        if (!this.room_id || !this.session_id) {
          return;
        }
        this.rtc = common.initSDK({
          userid: this.live_room_sys_user_id,
          roomid: this.room_id,
          sessionid: this.session_id
        });
        common.initListener(this); // 注册监听事件
        this.loadedNumber = 0;
      }
    },
    streamList(newVal) {
      const list = this.student_list.filter(item => {
        let isNoStream = true;
        for (let i = 0; i < newVal.length; i++) {
          if (newVal[i].id().split('-')[0] === item.room_user_id) isNoStream = false;
        }
        return isNoStream;
      });
      this.noStreamList = list;
      if (newVal.length > 0) {
        this.$nextTick(() => {
          newVal[newVal.length - 1].show(`group-${newVal.length - 1}`);
        });
      }
    },
    // 聊天列表滚动
    chatList() {
      common.chatRoll(this);
    }
  },
  created() {
    GetGroupStatus({ task_id: this.task_id }).then(({ is_teacher_in_group }) => {
      if (is_teacher_in_group === 'true') {
        GetMyGroupInfo_Teacher({
          task_id: this.task_id
        }).then(({ room_id, is_example, group_id, teacher: { session_id }, student_list, audience_list }) => {
          this.room_id = room_id;
          this.session_id = session_id;
          this.noStreamList = student_list;
          this.student_list = student_list;
          common.downloadWebSDK(this);
          this.isGroup = true;
          this.group_id = group_id;
          this.isAudit = is_example === 'true';
          this.audience_list = audience_list;
        });
      }
    });
    this.getLiveRoomInfo();
    this.getGroupInfo_Teacher();
  },
  beforeDestroy() {
    common.closeVideo('main');
    this.streamList.forEach(item => {
      common.unSubscribeStream(item);
    });
  },
  methods: {
    getLiveRoomInfo() {
      GetLiveRoomInfo({ task_id: this.task_id }).then(
        ({ room_id, video_mode, task_name, cs_item_name, course_name, teacher_name, student_count }) => {
          this.roomInfo = {
            room_id,
            video_mode,
            task_name,
            cs_item_name,
            course_name,
            teacher_name,
            student_count
          };
        }
      );
    },

    // 发消息
    sendMsg() {
      common.sendMsg(this.msg);
      this.msg = '';
    },

    reconnection() {
      common.reconnection();
    },

    // 给所有小组发送消息
    sendAllMsg() {
      this.$prompt(' ', this.$i18n.t('Key408'), {
        confirmButtonText: this.$i18n.t('Key94'),
        cancelButtonText: this.$i18n.t('Key83'),
        inputValidator(val) {
          if (val !== null && val.length > 0) return true;
          return this.$i18n.t('Key46');
        }
      }).then(({ value }) => {
        SendGroupMessage({ task_id: this.task_id, group_message_text: value }).then(() => {
          this.$message.success(this.$i18n.t('Key413'));
        });
      });
    },

    chatBans() {
      common.roomUpdate({
        allow_chat: !this.roomData.allow_chat,
        roomUpdateSuccess(data) {
          console.log(data, '房间模板配置更新请求成功！');
        },
        roomUpdateFailed(data) {
          console.log(data, '房间模板配置更新请求失败！ 请稍后再试!');
        }
      });
    },

    studentExitLiveRoom(room_user_id) {
      StudentExitLiveRoom({ task_id: this.task_id, room_user_id });
    },

    // 分组讨论
    stopGroup() {
      StopGroup({ task_id: this.task_id }).then(() => {
        this.$message.success(this.$i18n.t('Key414'));
        CreateEnterLiveRoomSession({
          task_id: this.task_id
        }).then(({ live_room_sys_user_id, room_id, session_id, room_user_id }) => {
          this.$router.push({
            path: `/live/teacher`,
            query: {
              live_room_sys_user_id,
              room_id,
              session_id,
              task_id: this.task_id,
              room_user_id
            }
          });
        });
      });
    },

    enterGroup(group_id) {
      JoinGroup_Teacher({ task_id: this.task_id, group_id })
        .then(({ room_id, session_id }) => {
          this.room_id = room_id;
          this.session_id = session_id;
          common.downloadWebSDK(this);
          this.isGroup = true;
          this.group_id = group_id;
          return GetMyGroupInfo_Teacher({ task_id: this.task_id });
        })
        .then(({ student_list }) => {
          this.noStreamList = student_list;
          this.student_list = student_list;
        });
    },

    searchStudentName(id) {
      const uid = id.split('-')[0];
      if (uid) {
        const student = this.student_list.find(item => item.room_user_id === uid);
        return student ? student.student_name : '';
      }
      return '';
    },

    isMobile(id) {
      const uid = id.split('-')[0];
      if (uid) {
        const student = this.student_list.find(item => item.room_user_id === uid);
        return student ? student.is_mobile === 'true' : false;
      }
      return false;
    },

    listMove(direction) {
      const w = this.$refs.list.clientWidth - this.$refs.avatar.clientWidth;
      if (w > 60) {
        const left = Number(this.$refs.list.style['margin-left'].slice(0, -2));
        let width = direction === 'right' ? left - 60 : left + 60;
        if (Math.abs(width) > w) width = -w;
        this.marginLeft = width > 0 ? 0 : width;
      }
    },

    exitCurGroup_Teacher() {
      ExitCurGroup_Teacher({ task_id: this.task_id }).then(() => {
        this.isGroup = false;
        this.group_id = '';
        this.room_id = '';
        this.session_id = '';
        common.closeVideo('main');
        this.streamList.forEach(item => {
          common.unSubscribeStream(item);
        });
        this.streamList = [];
        common.removeWebSDK();
        this.$message.success(this.$i18n.t('Key415'));
      });
    },

    setCurGroupToExample_Teacher() {
      const loading = this.$loading({ text: this.$i18n.t('Key416') });
      SetCurGroupToExample_Teacher({ task_id: this.task_id, group_id: this.group_id })
        .then(() => {
          this.isAudit = true;
          this.$message.success(this.$i18n.t('Key417'));
          return GetMyGroupInfo_Teacher({ task_id: this.task_id });
        })
        .then(({ audience_list }) => {
          this.audience_list = audience_list;
        })
        .finally(() => {
          loading.close();
        });
    },

    getGroupInfo_Teacher() {
      GetGroupInfo_Teacher({ task_id: this.task_id }).then(({ live_room_sys_user_id, group_list }) => {
        this.group_list = group_list;
        this.live_room_sys_user_id = live_room_sys_user_id;

        const list = [];
        this.group_list.forEach(({ group_id, student_list }) => {
          student_list.forEach(item => {
            list.push({
              group_id,
              ...item
            });
          });
        });
        this.adjustGroupList = list;
      });
    },

    adjustGroup() {
      const student_list = this.adjustGroupList.map(({ group_id, student_id }) => {
        return { group_id, student_id };
      });
      const loading = this.$loading({ text: '调整分组中...' });
      AdjustGroup({ task_id: this.task_id, student_list })
        .then(() => {
          this.$message.success('调整分组成功');
          this.getGroupInfo_Teacher();
          this.visible = false;
        })
        .finally(() => {
          loading.close();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin';

$live-bc: #3d3938;

.live {
  @include container;

  // 顶部
  &-top {
    padding: 24px 32px;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    .live-title {
      display: flex;
      justify-content: space-between;

      &-name {
        font-size: 22px;
      }

      .el-button {
        padding: 7px 12px;
        border-radius: 4px;
      }

      ::v-deep .el-popover__reference-wrapper {
        margin-right: 8px;
      }
    }

    .live-course-name {
      font-size: 14px;
      line-height: 30px;
      color: #737373;
    }

    .live-teacher {
      margin-top: 12px;

      .svg-icon {
        margin-right: 8px;
      }

      &-name {
        margin-right: 60px;
      }
    }
  }

  // 主容器
  &-container {
    display: flex;
    justify-content: left;

    &-left {
      width: 832px;
      background-color: #fff;
      border-radius: 8px;

      .student-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 468px;
        padding: 10px 0 10px 24px;
        overflow: auto;
        background-color: #4d4d4d;

        &-list {
          position: relative;
          width: 255px;
          height: 144px;
          padding: 24px;
          margin: 0 8px 8px 0;
          cursor: pointer;
          background-color: #646464;

          &-avatar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 92px;
            margin-top: 12px;
            overflow: auto;

            .el-avatar {
              margin: 0 7px 6px 0;
            }
          }

          .group-serial {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            color: #fff;
            text-align: center;
            background-color: #3d3d3d;
          }
        }
      }

      // 分组讨论
      .group-discussion {
        display: grid;
        grid-template-rows: 144px;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        width: 100%;
        height: 468px;
        padding: 24px;
        overflow-y: auto;
        background-color: $live-bc;

        .group-box {
          width: 100%;
          height: 144px;

          &.student-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            border: 2px solid #625c5b;

            .el-avatar {
              margin-top: 12px;
            }

            .student_name {
              height: 28px;
              color: #fff;
            }
          }
        }

        .group-wrapper {
          position: relative;

          .live-wrapper-stream {
            position: absolute;
            top: 112px;
            width: calc(100% - 16px);
            height: 32px;
            padding: 0 15px;
            margin: 0 8px;
            line-height: 32px;
            color: #fff;
            text-align: center;
            background-color: rgba(0, 0, 0, 70%);
            transition: all 300ms ease-in 0s;

            > .svg-icon {
              margin-left: 12px;
            }
          }
        }
      }

      // 旁听列表
      .audit-list {
        display: flex;
        align-items: center;
        width: 100%;
        height: 64px;
        padding: 16px 24px;
        background-color: #5a5a5a;

        &-container {
          width: 100%;
          height: 100%;
          margin: 0 24px;
          overflow: hidden;

          .avatar-list {
            display: inline-block;
            white-space: nowrap;

            .el-avatar {
              margin-left: 8px;
            }
          }
        }

        .svg-icon {
          cursor: pointer;
        }
      }

      .button-group {
        display: flex;
        justify-content: space-between;
        height: 48px;
        padding: 0 15px;
        background-color: #4d4d4d;
        border-bottom-left-radius: 5px;

        .svg-icon {
          font-size: 20px;
        }

        &-left {
          .stop-group {
            color: #fff;
          }

          > span {
            display: inline-block;
            height: 100%;
            padding: 14px 16px;
            cursor: pointer;

            &:active,
            &:hover {
              background-color: #3d3d3d;
            }
          }
        }
      }

      // 聊天窗口
      &-chat {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 278px;
        border: 1px solid #ccc;
        border-bottom-left-radius: 8px;

        .chat-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 15px 15px 10px;
          color: #959595;
          border-bottom: 1px solid #e6e6e6;

          label {
            cursor: pointer;
          }

          .allow-chat {
            margin-right: 12px;
          }
        }

        .chat-window {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;

          &-ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: auto;

            .msg-normal {
              padding: 7px 16px;
            }
          }
        }

        .chat-speak {
          padding: 16px;
        }
      }
    }

    &-right {
      height: 794px;
      padding: 8px;
      background-color: #2c2c2c;
      border-end-end-radius: 8px;

      .live-teacher-lens {
        position: relative;
        overflow: hidden;

        #live {
          width: 352px;
          height: 198px;
          background-color: $live-bc;
        }

        .live-wrapper {
          position: absolute;
          width: 100%;
          height: 40px;
          padding: 0 16px;
          line-height: 40px;
          color: #fff;
          background-color: rgba(0, 0, 0, 70%);
          transition: all 300ms ease-in 0s;
        }
      }

      // 学员列表
      .student-list {
        width: 100%;
        height: calc(100% - 200px);
        padding: 24px 16px;
        margin-top: 2px;
        font-size: 14px;
        color: #fff;
        background-color: #2c2c2c;

        &-title {
          margin-bottom: 16px;
        }

        ul {
          height: calc(100% - 20px);
          overflow-x: auto;
        }

        li {
          display: flex;
          margin-bottom: 16px;

          .student-list-left {
            flex: 8;

            .name {
              margin-left: 8px;
              vertical-align: super;
            }
          }

          .student-list-right {
            flex: 2;

            .svg-icon {
              margin-top: 7px;
              margin-right: 8px;
              font-size: 18px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.adjust {
  padding: 0;
  font-size: 16px;
  border-width: 0;

  &-title {
    padding: 16px;
    font-weight: bold;
    background-color: #f4f4f4;
  }

  &-list {
    height: 400px;
    padding: 20px 16px;
    overflow-y: auto;

    &-item {
      display: flex;
      column-gap: 16px;
      align-items: center;

      .el-avatar {
        min-width: 40px;
      }

      .student-name {
        flex: 1;
      }

      .el-select {
        width: 85px;
      }
    }
  }

  &-button {
    padding: 9px 0;
    font-weight: 700;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: $basic-color;
    border-radius: 0 0 4px 4px;
  }
}
</style>