|
|
@@ -4,21 +4,21 @@
|
|
|
<div class="header-info">
|
|
|
<span class="header-info-name">
|
|
|
<i class="icon icon-user-act"></i>
|
|
|
- {{ info.examStudentName }}
|
|
|
+ {{ info.name }}
|
|
|
</span>
|
|
|
<span class="header-info-item"> 证件号：{{ info.identity }} </span>
|
|
|
<span class="header-info-item"> 课程：{{ info.courseName }} </span>
|
|
|
+ <span class="header-info-item"> 批次名称：{{ info.examName }} </span>
|
|
|
<span class="header-info-item">
|
|
|
- 批次名称：{{ info.examBatchName }}
|
|
|
+ 考试时间：{{ info.firstStartTime | datetimeFilter }}
|
|
|
</span>
|
|
|
- <span class="header-info-item"> 考试时间：{{ info.examTime }} </span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<el-button
|
|
|
- v-for="source in videoSources"
|
|
|
- :key="source.monitorKey"
|
|
|
+ v-for="source in info.monitorRecord"
|
|
|
+ :key="source.videoSource"
|
|
|
:type="
|
|
|
- curSource.monitorKey === source.monitorKey ? 'primary' : 'info'
|
|
|
+ curSource.videoSource === source.videoSource ? 'primary' : 'info'
|
|
|
"
|
|
|
@click="switchVideo(source)"
|
|
|
>{{ videoSourceInfo[source.monitorKey] }}</el-button
|
|
|
@@ -27,14 +27,18 @@
|
|
|
</div>
|
|
|
<div class="record-body">
|
|
|
<div class="record-video">
|
|
|
- <video
|
|
|
- :src="curSourceUrl"
|
|
|
- controls
|
|
|
- controlslist="nodownload"
|
|
|
- disablePictureInPicture
|
|
|
+ <HlsMedia
|
|
|
+ v-if="curSource.videoUrl"
|
|
|
+ :url="curSource.videoUrl"
|
|
|
+ :key="curSource.videoUrl"
|
|
|
@error="videoError"
|
|
|
- @loadeddata="videoLoad($event)"
|
|
|
- ></video>
|
|
|
+ />
|
|
|
+ <div v-else class="record-video-none">
|
|
|
+ <div>
|
|
|
+ <i class="el-icon-video-camera-solid"></i>
|
|
|
+ <p>暂无视频</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="record-footer">
|
|
|
@@ -52,8 +56,6 @@
|
|
|
custom-class="record-code-dialog"
|
|
|
:visible.sync="modalIsShow"
|
|
|
width="280px"
|
|
|
- :close-on-click-modal="false"
|
|
|
- :close-on-press-escape="false"
|
|
|
append-to-body
|
|
|
destroy-on-close
|
|
|
>
|
|
|
@@ -62,7 +64,7 @@
|
|
|
</div>
|
|
|
<div class="record-qrcode">
|
|
|
<vue-qrcode
|
|
|
- :value="curSourceUrl"
|
|
|
+ :value="curSource.videoUrl"
|
|
|
:options="{ width: 200, margin: 0 }"
|
|
|
tag="img"
|
|
|
></vue-qrcode>
|
|
|
@@ -74,54 +76,66 @@
|
|
|
|
|
|
<script>
|
|
|
import VueQrcode from "@chenfengyuan/vue-qrcode";
|
|
|
+import HlsMedia from "./HlsMedia";
|
|
|
|
|
|
export default {
|
|
|
name: "StudentMonitorRecord",
|
|
|
- components: { VueQrcode },
|
|
|
+ components: { VueQrcode, HlsMedia },
|
|
|
data() {
|
|
|
return {
|
|
|
info: {
|
|
|
- examStudentName: "夏燕",
|
|
|
+ name: "",
|
|
|
+ identity: "",
|
|
|
+ examName: "",
|
|
|
+ courseName: "",
|
|
|
+ monitorRecord: [
|
|
|
+ {
|
|
|
+ videoSource: "",
|
|
|
+ videoUrl: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- videoSources: [
|
|
|
- {
|
|
|
- monitorKey: "MOBILE_FIRST",
|
|
|
- monitorKeyName: "",
|
|
|
- urls: [],
|
|
|
- },
|
|
|
- {
|
|
|
- monitorKey: "MOBILE_SECOND",
|
|
|
- monitorKeyName: "",
|
|
|
- urls: [],
|
|
|
- },
|
|
|
- {
|
|
|
- monitorKey: "CLIENT_CAMERA",
|
|
|
- monitorKeyName: "",
|
|
|
- urls: [],
|
|
|
- },
|
|
|
- {
|
|
|
- monitorKey: "CLIENT_SCREEN",
|
|
|
- monitorKeyName: "",
|
|
|
- urls: [],
|
|
|
- },
|
|
|
- ],
|
|
|
videoSourceInfo: {
|
|
|
CLIENT_CAMERA: "电脑摄像头",
|
|
|
CLIENT_SCREEN: "电脑录屏",
|
|
|
MOBILE_FIRST: "手机主机位",
|
|
|
MOBILE_SECOND: "手机辅机位",
|
|
|
},
|
|
|
- curSource: {},
|
|
|
- curSourceUrl: "http://localhost:8176/files/big_buck_bunny.mp4",
|
|
|
+ curSource: { videoSource: "", videoUrl: "" },
|
|
|
modalIsShow: false,
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ const recordStr = window.sessionStorage.getItem("record");
|
|
|
+ if (!recordStr) {
|
|
|
+ this.$message.error("数据丢失，请关闭页面！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.info = JSON.parse(recordStr);
|
|
|
+ this.info.monitorRecord = this.info.monitorRecord.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ monitorKey: this.getVideoMonitorKey(item.videoSource),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.switchVideo(this.info.monitorRecord[0]);
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ getVideoMonitorKey(videoSource) {
|
|
|
+ return Object.keys(this.videoSourceInfo).find((key) =>
|
|
|
+ videoSource.includes(key.toLowerCase())
|
|
|
+ );
|
|
|
+ },
|
|
|
switchVideo(source) {
|
|
|
this.curSource = source;
|
|
|
},
|
|
|
videoError() {
|
|
|
- this.$message.error("视频解析错误，您可以尝试扫描二维码，通过手机观看。");
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: "视频解析错误，您可以尝试扫描二维码，通过手机观看。",
|
|
|
+ showClose: true,
|
|
|
+ duration: 10 * 1000,
|
|
|
+ });
|
|
|
},
|
|
|
videoLoad(event) {
|
|
|
console.log(event);
|
|
|
@@ -197,10 +211,17 @@ export default {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
|
|
|
- > video {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
+ &-none {
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ text-align: center;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 80px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.record-footer {
|
zhangjie