From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 193 +++++++++++++++++++++++++++++++++++++++++------
1 files changed, 166 insertions(+), 27 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 817f290..0f4e0e7 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">
@@ -74,9 +75,25 @@
{{ item.text }}
</div>
<div
+ v-if="checkType === 1"
class="self-dot"
:class="
curVideo.IsOperate == '1' &&
+ item.state == 0 &&
+ !item.text.includes('鎵嬫瘮')
+ ? 'red'
+ : getColor(item.text)
+ "
+ :style="{
+ left: (item.offset / maxSecond) * 100 + '%',
+ }"
+ @click="dotJump(item.offset)"
+ ></div>
+ <div
+ v-if="checkType === 2"
+ class="self-dot"
+ :class="
+ curVideo.IsOperate == '11' &&
item.state == 0 &&
!item.text.includes('鎵嬫瘮')
? 'red'
@@ -202,14 +219,14 @@
<img
src="/images/shuohuang/缁� 801.png"
alt=""
- v-if="showHand == true"
- @click="closeHand"
+ v-if="showHand == false"
+ @click="openHand"
/>
<img
src="/images/shuohuang/缁� 800.png"
alt=""
v-else
- @click="openHand"
+ @click="closeHand"
/>
</div>
</div>
@@ -290,7 +307,7 @@
>{{ item.text }}
</span>
- <span class="list-warn">鏈墜姣� </span>
+ <span class="list-warn" v-if="checkType === 1">鏈墜姣� </span>
</div>
</div>
</div>
@@ -444,6 +461,7 @@
},
data() {
return {
+ checkType: 1,
showHand: true,
guid: 1,
labelDialogVisible: false,
@@ -495,18 +513,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);
+ async mounted() {
this.renderLabelOpts();
this.setGuid(1);
- this.getCurVideos(this.videoDetails);
+ await this.getCurVideos(this.videoDetails);
- this.getRelatedVideos(this.videoDetails);
+ // this.getRelatedVideos(this.videoDetails);
},
destroyed() {
this.videoArrs.length = 0;
@@ -565,7 +589,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 +602,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();
}
@@ -694,6 +719,18 @@
sec = +arr[2];
_this.maxSecond = min * 60 + sec;
});
+
+ this.eventMarks.forEach((item) => {
+ if (
+ item.text.indexOf("鐜╂墜鏈�") > -1 ||
+ item.text.indexOf("瓒翠紡") > -1 ||
+ item.text.indexOf("浠板崸") > -1
+ ) {
+ this.checkType = 2;
+ } else {
+ this.checkType = 1;
+ }
+ });
});
},
renderLabelOpts() {
@@ -711,6 +748,13 @@
}
if (text.indexOf("杩囧垎鐩�") > -1) {
return "blue";
+ }
+ if (
+ text.indexOf("鐜╂墜鏈�") > -1 ||
+ text.indexOf("瓒翠紡") > -1 ||
+ text.indexOf("浠板崸") > -1
+ ) {
+ return "red";
}
return "";
},
@@ -741,6 +785,8 @@
console.log(this.$refs);
});
},
+
+ // 鍒嗙獥鍙�
setGuid(guid) {
let _this = this;
this.guid = guid;
@@ -748,6 +794,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,22 +939,82 @@
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 ||
- x.text.indexOf("杩囧垎鐩�") > -1 ||
- x.text.indexOf("淇″彿鏈�") > -1) &&
- x.state == 0
- );
- });
+
+ if (this.checkType === 1) {
+ return this.eventMarks.filter((x) => {
+ return (
+ (x.text.indexOf("杩涘嚭绔�") > -1 ||
+ x.text.indexOf("杩囧垎鐩�") > -1 ||
+ x.text.indexOf("淇″彿鏈�") > -1) &&
+ x.state == 0
+ );
+ });
+ } else if (this.checkType === 2) {
+ return this.eventMarks.filter((x) => {
+ return (
+ x.text.indexOf("鐜╂墜鏈�") > -1 ||
+ x.text.indexOf("瓒翠紡") > -1 ||
+ x.text.indexOf("浠板崸") > -1
+ );
+ });
+ }
+
+ return [];
+ },
+ 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 +1140,11 @@
display: flex;
flex-wrap: wrap;
height: 512px;
+ .single {
+ .prism-controlbar {
+ display: none !important;
+ }
+ }
.video-item {
background: black;
box-sizing: border-box;
@@ -1508,4 +1620,31 @@
}
}
}
+.el-tooltip__popper {
+ * {
+ color: #fff;
+ }
+}
+
+.prism-marker-text {
+ p {
+ color: #fff;
+ }
+}
+
+.video-box-top b {
+ color: #fff;
+}
+
+.currentPlayer .prism-player .prism-big-play-btn {
+ left: 46% !important;
+ bottom: 39% !important;
+ background-size: cover;
+ width: 11%;
+ height: 23%;
+ .outter {
+ width: 100%;
+ height: 100%;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0