zuobijiance/front/src/views/student.vue

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card>
        <template #header>
          <div>
            <span>考生信息</span>
          </div>
        </template>
        <p v-for="(userItem, userIndex) in userInfo" :key="userIndex">
          <template v-if="userItem.type === 'datetimerange'">
            <div>
              <span>{{ userItem.lable }}：</span>
              <span>{{ _.join(userData[userItem.prop], "——") }}</span>
            </div>
          </template>
          <template v-else-if="userItem.type === 'text'">
            <div>
              <span>{{ userItem.lable }}：</span>
              <span>{{ userData[userItem.prop] }}</span>
            </div>
          </template>
        </p>
        <template #footer>
          <el-button type="primary" @click="connectTeacher">联系老师</el-button>

        </template>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card>
        <template #header>
          <div>
            <span>实时作弊信息</span>
          </div>
        </template>
        <p>实时作弊信息</p>

      </el-card>
    </el-col>
    <el-col :span="12">
      视频
    </el-col>
  </el-row>
</template>
<script>
import _ from "lodash";
import { io } from "socket.io-client";
import {
  getUser, //获取user信息
} from "@/api/student";
export default {
  name: "student",
  components: {},
  data() {
    return {
      _: _,
      userId: "",
      // 学生姓名、学号,考试类型、考试科目、考试时间段
      userInfo: [
        {
          lable: "学校名称",
          prop: "xuexiaomingcheng",
          type: "text"
        },
        {
          lable: "学校代号",
          prop: "xuexiaodaihao",
          type: "text"
        },
        {
          lable: "专业名称",
          prop: "zhuanyemingcheng",
          type: "text"
        },
        {
          lable: "专业代号",
          prop: "zhuanyedaihao",
          type: "text"
        },
        {
          lable: "年级",
          prop: "nianji",
          type: "text"
        },
        {
          lable: "班级",
          prop: "banji",
          type: "text"
        },
        {
          lable: "学生姓名",
          prop: "xueshengxingming",
          type: "text"
        },
        {
          lable: "学号",
          prop: "xuehao",
          type: "text"
        },
        {
          lable: "考试类型",
          prop: "kaoshileixing",
          type: "text"
        },
        {
          lable: "考试科目",
          prop: "kaoshikemu",
          type: "text"
        },
        {
          lable: "考试时间段",
          prop: "kaoshishijianduan",
          type: "datetimerange"
        },
      ],
      userData: {},
      socketMsg: io("http://localhost:3000/msg"),
      socketVedio: io("http://localhost:3000/vedio")
    };
  },
  watch: {},
  computed: {},
  async mounted() {
    this.userId = _.get(this.$route, ["params", "id"], "")
    await this.getUser()
    this.initMsg()
  },
  methods: {
    async getUser() {
      let res = await getUser({
        id: this.userId
      })
      this.userData = res.list[0]
    },
    initMsg() {
      this.socketMsg.on("connect", (data) => {
        console.log(data);
      });
      this.socketMsg.on("data", (data) => {
        console.log(data);
      });
      this.socketMsg.on("disconnect", (data) => {
        console.log(data);
      });
      this.socketMsg.on('response', (data) => {
        this.messages.push({ id: Date.now(), text: data.data });
      });
    },
    initVedio() {
      this.socketVedio.on("connect", (data) => {
        console.log(data);
      });
      this.socketVedio.on("data", (data) => {
        console.log(data);
      });
      this.socketVedio.on("disconnect", (data) => {
        console.log(data);
      });
      this.socketVedio.on('response', (data) => {
        this.messages.push({ id: Date.now(), text: data.data });
      });
    },
    connectTeacher() {
      this.socketMsg.emit('message', "this.message");
    }
  },
  beforeUnmount() { },
};
</script>
<style scoped></style>