From e80763e664be64ea36ba367c15c615df78d77aa7 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期一, 08 十一月 2021 15:04:51 +0800 Subject: [PATCH] 视频详情v2 --- src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 104 +++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 91 insertions(+), 13 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue index 817f290..219d3be 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue @@ -6,9 +6,10 @@ <div class="video-area"> <!-- 鎾斁鍣ㄥ尯鍩� --> <div class="players" ref="playerWrap"> + <div class="single"></div> <template v-if="guid == 1"> <div - class="video-item" + class="video-item single" :ref="`gridVideoItem_${index}`" v-for="(item, index) in videoWrapArr" :key="item.id" @@ -16,11 +17,11 @@ <div style="display: none"></div> <div class="currentPlayer"> <ali-player - @pause="isStop = true" - @play="isStop = false" + @pause="singlePause" + @play="singlePlay" @timeupdate="timeUpdate" :source="curVideo.VideoPath | fixPath" - :markers="curVideo.marks" + :markers="marks_filter" :ref="`player_${curVideo.id}`" /> </div> @@ -50,7 +51,7 @@ <ali-player @timeupdate="timeUpdate(e, index)" :source="videoArrs[index].VideoPath | fixPath" - :markers="videoArrs[index].marks" + :markers="marks_filter_arr[index].marks" @pause="isStop = true" @play="isStop = false" :ref="`player_${videoArrs[index].id}`" @@ -65,7 +66,7 @@ <div class="progress-bar"> <el-tooltip placement="top" - v-for="(item, index) in eventMarks" + v-for="(item, index) in eventMarks_filter" :key="item.offset + index" > <div slot="content"> @@ -495,18 +496,24 @@ curTime(newVal) { this.curPlayTime = this.getTimeStr(newVal); }, + /* showHand() { + let arr = this.videoArrs.map((item) => { + item.marks = item.marks.filter((mark) => { + console.log(mark.text); + return mark.text != "鎵嬫瘮: 鎵嬫瘮"; + }); + }); + console.log(arr); + }, */ }, mounted() { - setTimeout(() => { - console.log(this.yinhuanArr); - }, 1000); this.renderLabelOpts(); this.setGuid(1); this.getCurVideos(this.videoDetails); - this.getRelatedVideos(this.videoDetails); + // this.getRelatedVideos(this.videoDetails); }, destroyed() { this.videoArrs.length = 0; @@ -565,7 +572,7 @@ this.progressChange(this.curTime); }, progressChange(val) { - this.showPlayBtn = false; + this.showPlayBtn = true; let that = this; if (this.guid == 1) { this.$refs[`player_${this.curVideo.id}`][0].pause(); @@ -578,6 +585,7 @@ } else { this.videoArrs.forEach((v, i) => { this.$refs[`player_${v.id}`][0].seek(val); + this.$refs[`player_${v.id}`][0].pause(); if (i == 0) { let curT = this.$refs[`player_${v.id}`][0].getCurrentTime(); } @@ -741,6 +749,8 @@ console.log(this.$refs); }); }, + + // 鍒嗙獥鍙� setGuid(guid) { let _this = this; this.guid = guid; @@ -748,6 +758,7 @@ this.showLocChoise = true; } else { this.showLocChoise = false; + console.log(this.$refs[`player_${this.curVideo.id}`]); this.$refs[`player_${this.curVideo.id}`][0].pause(); this.$refs[`player_${this.curVideo.id}`][0].seek(0); } @@ -892,14 +903,20 @@ closeHand() { this.showHand = false; }, + singlePause() { + this.isStop = true; + this.showPlayBtn = true; + }, + singlePlay() { + this.isStop = false; + this.showPlayBtn = false; + }, }, computed: { yinhuanArr() { - console.log(this.curVideo.IsOperate); if (this.curVideo.IsOperate == 0) { return []; } - console.log(this.eventMarks); return this.eventMarks.filter((x) => { return ( (x.text.indexOf("杩涘嚭绔�") > -1 || @@ -908,6 +925,47 @@ x.state == 0 ); }); + }, + marks_filter() { + if (this.showHand) { + return this.curVideo.marks; + } else + return this.curVideo.marks.map((item) => { + if (item.text != "鎵嬫瘮: 鎵嬫瘮") { + return item; + } + }); + }, + marks_filter_arr() { + if (this.showHand) { + return this.videoArrs; + } else { + let arr = this.videoArrs.map((item) => { + let obj = { ...item }; + let temp = []; + obj.marks.forEach((mark) => { + if (mark.text != "鎵嬫瘮: 鎵嬫瘮") { + temp.push(mark); + } + }); + obj.marks = temp; + return obj; + }); + return arr; + } + }, + eventMarks_filter() { + if (this.showHand) { + return this.eventMarks; + } else { + let arr = []; + this.eventMarks.map((item) => { + if (item.text != "鎵嬫瘮: 鎵嬫瘮") { + arr.push(item); + } + }); + return arr; + } }, }, }; @@ -1033,6 +1091,11 @@ display: flex; flex-wrap: wrap; height: 512px; + .single { + .prism-controlbar { + display: none !important; + } + } .video-item { background: black; box-sizing: border-box; @@ -1508,4 +1571,19 @@ } } } +.el-tooltip__popper { + * { + color: #fff; + } +} + +.prism-marker-text { + p { + color: #fff; + } +} + +.video-box-top b { + color: #fff; +} </style> \ No newline at end of file -- Gitblit v1.8.0