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