zuobijiance/front/src/views/teacher.vue

<template>
  <el-row>
    <el-col :span="14">
      <div style="margin-bottom: 4px;">
        <el-button icon="Plus" type="primary" @click="addUserData">
          add User
        </el-button>
        <el-button icon="Delete" type="danger" @click="delUserData">
          delete User
        </el-button>
        <el-button icon="Refresh" type="info" @click="init({})" text>
          refresh
        </el-button>
      </div>
      <div>
        <vueTable ref="userTableParent" :refName="refName" :tableHeader="tableHeader" :tableData="tableData"
          @detailInfo="detailInfo" @editInfo="editInfo" @updateMima="updateMima">
        </vueTable>
      </div>
    </el-col>
    <el-col :span="10">
      <el-row>
        <el-col :span="12">
          <video ref="videoEL1" class="canvasClass"></video>
        </el-col>
        <el-col :span="12">
          <video ref="videoEL2" class="canvasClass"></video>
        </el-col>
        <el-col :span="12">
          <video ref="videoEL3" class="canvasClass"></video>
        </el-col>
        <el-col :span="12">
          <video ref="videoEL4" class="canvasClass"></video>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-dialog v-model="addDialog.show" :title="addDialog.title" width="80%" draggable
    :close-on-click-modal="formDisabled">
    <changeItem :formData="formData" :formDisabled="formDisabled" :type="addDialog.type" :formHeader="formHeader">
    </changeItem>
    <template #footer v-if="!formDisabled">
      <div class="dialog-footer">
        <el-button @click="closeDialog(addDialog)" type="info" plain>
          取消
        </el-button>
        <el-button type="primary" @click="submitAdd" plain> 提交 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import vueTable from "../component/table.vue";
import changeItem from "../component/changeItem.vue";
import _ from "lodash";
import {
  addUser, //新增user信息
  delUser, //删除user信息
  updateUser, //修改user信息
  getUser, //获取user信息
  updatePassword,//修改密码
} from "@/api/teacher";
import io from "socket.io-client";
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
  name: "teacher",
  components: { vueTable, changeItem },
  data() {
    return {
      _: _,
      refName: "userTable",
      localComponent: [
        {
          prop: "xuexiaomingcheng",
          label: "学校名称",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "xuexiaodaihao",
          label: "学校代号",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "zhuanyemingcheng",
          label: "专业名称",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "zhuanyedaihao",
          label: "专业代号",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "nianji",
          label: "年级",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "banji",
          label: "班级",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "xueshengxingming",
          label: "学生姓名",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "xuehao",
          label: "学号",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "mima",
          label: "密码",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "chengji",
          label: "成绩",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "zuobiqingkuang",
          label: "作弊情况",
          type: "text",
          tableShow: false,
          formShow: true
        },
        {
          prop: "kaoshileixing",
          label: "考试类型",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "kaoshikemu",
          label: "考试科目",
          type: "text",
          tableShow: true,
          formShow: true
        },
        {
          prop: "kaoshilianjie",
          label: "考试链接",
          type: "link",
          tableShow: true,
          formShow: true
        },
        {
          prop: "kaoshishijianduan",
          label: "考试时间段",
          type: "datetimerange",
          tableShow: true,
          formShow: true
        },
        {
          prop: "chuangjianshijian",
          label: "创建时间",
          type: "text",
          tableShow: false,
          formShow: false
        },
        {
          prop: "gengxinshijian",
          label: "更新时间",
          type: "text",
          tableShow: false,
          formShow: false
        },
      ],
      tableHeader: [],
      tableData: [],
      addDialog: {
        type: "add",
        show: false,
        title: "新增用户",
      },
      formData: {},
      formDataLocal: {},
      formHeader: [],
      formHeaderLocal: [],
      formDisabled: false,
      ws: null,
      videoStream: null,
      room: 'defaultRoom', // 房间名
    };
  },
  watch: {},
  computed: {},
  async mounted() {
    this.dealTableHeader()
    this.dealFormHeader()
    await this.init();
    await this.initWebSocket()

  },
  methods: {
    dealTableHeader() {
      this.tableHeader = _.filter(this.localComponent, o => {
        o.minWidth = o.label.length * 17 + 5
        return o.tableShow
      })
    },
    // 处理
    dealFormHeader() {
      this.formHeaderLocal = []
      this.formDataLocal = {}
      for (let i = 0; i < this.localComponent.length; i++) {
        let element = this.localComponent[i];
        if (element.formShow) {
          this.formHeaderLocal.push({ ...element })
          if (["text"].indexOf(element.type) !== -1) {
            this.formDataLocal[element.prop] = ""
          } else if (["datetimerange"].indexOf(element.type) !== -1) {
            this.formDataLocal[element.prop] = []
          }
        }
      }
    },
    // 初始化表格
    async init(params = {}) {
      let res = await getUser({
        ...params,
      });
      this.tableData = res.list;
    },
    // 打开新增学生的模态框
    async addUserData() {
      this.addDialog = {
        type: "add",
        show: true,
        title: "新增学生",
      };
      this.formData = { ...this.formDataLocal };
      this.formHeader = _.cloneDeep(this.formHeaderLocal)
      this.formDisabled = false;
    },
    closeDialog(addDialog) {
      addDialog.show = false;
    },
    // 新增学生和编辑学生的提交
    async submitAdd() {
      let subData = {};
      for (let i = 0; i < this.formHeader.length; i++) {
        let elei = this.formHeader[i];
        if (elei.type !== "time") {
          subData[elei.prop] = this.formData[elei.prop];
        }
      }
      if (this.addDialog.type === "edit") {
        subData["userid"] = this.formData._id;
      }
      let res = {}
      try {
        if (this.addDialog.type === "edit") {
          res = await updateUser(subData);
        } else {
          res = await addUser(subData);
        }
        ElMessage({
          message: res.msg,
          type: "success",
        });
      } catch (error) {
      } finally {
        this.closeDialog(this.addDialog);
        await this.init();
      }
    },
    // 删除学生信息
    async delUserData() {
      let rowList =
        this.$refs[`${this.refName}Parent`].$refs[
          this.refName
        ].getSelectionRows();
      let delData = [];
      let delDispalyData = [];
      for (let i = 0; i < rowList.length; i++) {
        let elei = rowList[i];
        delData.push(elei._id);
        delDispalyData.push(`${elei.xueshengxingming}`);
      }
      ElMessageBox.confirm(`${delDispalyData.join("、")}`, "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      }).then(async () => {
        let res = await delUser({ ids: delData });
        await this.init();
        ElMessage({
          message: res.msg,
          type: "success",
        });
      });
    },
    // 查看学生
    detailInfo(item) {
      this.addDialog = {
        type: "info",
        show: true,
        title: `查看${item.name || ""}`,
      };
      this.formDisabled = true;
      this.formHeader = _.cloneDeep(_.filter(this.formHeaderLocal, o => o.prop !== "mima"))
      this.formData = { ...item };
    },
    // 编辑学生
    editInfo(item) {
      this.addDialog = {
        type: "edit",
        show: true,
        title: `编辑${item.name || ""}`,
      };
      this.formDisabled = false;
      this.formHeader = _.cloneDeep(_.filter(this.formHeaderLocal, o => o.prop !== "mima"))
      this.formData = { ...item };
    },
    //更新密码
    updateMima(item) {
      ElMessageBox.prompt("请输入新密码", "修改密码", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(async (value) => {
        let res = await updatePassword({ userid: item._id, mima: value.value });
        ElMessage({
          message: res.msg,
          type: "success",
        });
      })
    },
    // 初始化实时传输信息
    async initWebSocket() {
      this.ws = new WebSocket(`ws://127.0.0.1:5000/ws/video`);
      console.log(787844, this.ws)
      this.ws.binaryType = 'arraybuffer';
      this.ws.onopen = () => {
        console.log(4, 'WebSocket connected');
        this.ws.send(JSON.stringify({ type: 'join', room: this.room }));
      };
      this.ws.onerror = (err) => {
        console.error(5, 'WebSocket error:', err);
      };
      this.ws.onclose = () => {
        console.log(6, 'WebSocket disconnected');
      };
      this.ws.onmessage = (event) => {
        // 在这里处理接收到的视频帧
        const arrayBuffer = event.data;
        const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });
        const urlCreator = window.URL || window.webkitURL;
        const imageUrl = urlCreator.createObjectURL(blob);
        const img = new Image();
        img.onload = function () {
          urlCreator.revokeObjectURL(this.src);
        };
        img.src = imageUrl;
        this.$refs.videoEL1.srcObject = null; // 清空当前流
        this.$refs.videoEL1.src = imageUrl; // 设置新图像作为视频源
        this.$refs.videoEL1.play();
      };
    },
    stopVideoStream() {
      if (this.videoStream) {
        this.videoStream.getTracks().forEach(track => track.stop());
      }
    },
    closeWebSocket() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.close();
      }
    },
  },
  beforeUnmount() {
    this.stopVideoStream();
    this.closeWebSocket();
  },
};
</script>
<style scoped>
.canvasClass {
  position: relative;
  width: 390px;
  height: 390px;
  background-color: blueviolet
}
</style>