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