frontend-admin/src/features/invigilation/RealtimeMonitoring/VideoCommunication.vue

<template>
  <div class="video-communication">
    <div class="part-box-head">
      <div class="part-box-head-left"><h1>通话申请列表</h1></div>
      <div class="part-box-head-right">
        <el-radio-group
          size="small"
          v-model="callStatus"
          @change="getCommunicationList"
        >
          <el-radio-button label="START">待处理</el-radio-button>
          <el-radio-button label="CANCEL">未接通话</el-radio-button>
          <el-radio-button label="STOP">已处理</el-radio-button>
        </el-radio-group>
        <el-button
          style="vertical-align: top; margin-left: 10px;"
          icon="el-icon-arrow-left"
          @click="goBack"
          >返回</el-button
        >
      </div>
    </div>
    <div class="student-list">
      <el-row :gutter="20">
        <el-col :md="6" :lg="6" :xl="4" v-for="item in students" :key="item.id">
          <div class="student-item">
            <div class="student-cover">
              <img
                :src="item.basePhotoPath"
                :alt="item.examStudentId"
                v-if="item.basePhotoPath"
              />
              <div class="avatar-default" v-else>
                <i class="el-icon-user-solid"></i>
              </div>
            </div>
            <h4 class="student-name">{{ item.examStudentName }}</h4>
            <div v-if="callStatus === 'START' || callStatus === 'CANCEL'">
              <el-button round type="success" @click="answer(item, 0)"
                >语音通话</el-button
              >
              <br />
              <el-button round type="primary" @click="answer(item, 1)"
                >视频通话</el-button
              >
            </div>
            <div class="student-call-info" v-else>
              <p>
                通话时间段：
                <span>{{ item.startTime }} ~ </span>
                <span>{{ item.endTime }}</span>
              </p>
              <p v-if="item.durationTime">
                持续时长约：{{ item.durationTime }}
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="part-page">
      <el-pagination
        background
        layout="prev, pager, next,total,sizes,jumper"
        :current-page="current"
        :total="total"
        :page-size.sync="size"
        @size-change="toPage(1)"
        @current-change="toPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { communicationList } from "@/api/invigilation";
import { formatDate, timeNumberToText } from "@/utils/utils";
import timeMixin from "../../../mixins/timeMixin";

export default {
  name: "VideoCommunication",
  mixins: [timeMixin],
  data() {
    return {
      examId: this.$route.params.examId,
      roomCode: this.$route.params.roomCode,
      callStatus: "START",
      students: [],
      current: 1,
      total: 0,
      size: 100,
      loopRunning: false,
    };
  },
  mounted() {
    const cachePageInfo = window.sessionStorage.getItem(
      "videoCommunicationCache"
    );
    if (cachePageInfo) {
      const { pageNumber, callStatus } = JSON.parse(cachePageInfo);
      this.pageNumber = pageNumber;
      this.callStatus = callStatus;
      window.sessionStorage.removeItem("videoCommunicationCache");
    }

    this.loopRunning = true;
    this.getCommunicationList();
  },
  methods: {
    async getCommunicationList() {
      if (!this.loopRunning) return;
      this.clearSetTs();
      this.students = [];

      const res = await communicationList({
        examId: this.examId,
        roomCode: this.roomCode,
        callStatus: this.callStatus,
        pageNumber: this.current,
        pageSize: this.size,
      }).catch(() => {});
      if (res) {
        this.students = res.data.data.records.map((item) => {
          item.durationTime = timeNumberToText(item.endTime - item.startTime);
          item.startTime = formatDate(
            "YYYY-MM-DD HH:mm:ss",
            new Date(item.startTime)
          );
          item.endTime = formatDate(
            "YYYY-MM-DD HH:mm:ss",
            new Date(item.endTime)
          );
          return item;
        });
        this.total = res.data.data.total;
      }
      // 当前页没有数据，同时当前页不是第一页，则自动跳到前一页。
      if (!this.students.length && this.current > 1) {
        this.current--;
        this.getCommunicationList();
      } else {
        this.addSetTime(() => {
          this.getCommunicationList();
        }, 5000);
      }
    },
    toPage(page) {
      this.current = page;
      this.getCommunicationList();
    },
    answer(student, isVideo) {
      window.sessionStorage.setItem(
        "autoAnswerInfo",
        JSON.stringify({ ...student, isVideo })
      );
      window.sessionStorage.setItem(
        "videoCommunicationCache",
        JSON.stringify({
          pageNumber: this.pageNumber,
          callStatus: this.callStatus,
        })
      );
      this.$router.push({
        name: "WarningDetail",
        params: {
          examRecordId: student.examRecordId,
        },
      });
    },
    goBack() {
      window.history.go(-1);
    },
  },
  beforeDestroy() {
    this.loopRunning = false;
    this.clearSetTs();
  },
};
</script>

<style lang="scss" scoped>
.student-list {
  .student-item {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    .el-button {
      margin-bottom: 12px;
    }
  }
  .student-cover {
    height: 200px;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .student-name {
    margin: 20px 0;
    font-size: 18px;
    line-height: 25px;
    color: #202b4b;
  }
  .student-call-info {
    p {
      margin: 0;
      text-align: left;
    }
  }
}
</style>