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/aliPlayer/index.vue       |  251 +++++++++++++++++++++++------------------
 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue |    5 
 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue          |  104 +++++++++++++++--
 3 files changed, 239 insertions(+), 121 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
index ac57407..76c909a 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
@@ -3,29 +3,33 @@
 </template>
 <script>
 export default {
-  name: 'VueAliplayerV2',
+  name: "VueAliplayerV2",
   props: {
-    source: {  //鎾斁婧�(姝ゅ睘鎬у瓨鍦ㄥ垯浼樺厛浜巓ptions.source) 鍔ㄦ�佸垏鎹�,鐩墠鍙敮鎸佸悓绉嶆牸寮忥紙mp4/flv/m3u8锛変箣闂村垏鎹€�傛殏涓嶆敮鎸佺洿鎾璻tmp娴佸垏鎹€��
+    source: {
+      //鎾斁婧�(姝ゅ睘鎬у瓨鍦ㄥ垯浼樺厛浜巓ptions.source) 鍔ㄦ�佸垏鎹�,鐩墠鍙敮鎸佸悓绉嶆牸寮忥紙mp4/flv/m3u8锛変箣闂村垏鎹€�傛殏涓嶆敮鎸佺洿鎾璻tmp娴佸垏鎹€��
       required: false,
       type: [String],
-      default: null
+      default: null,
     },
     markers: {
       required: false,
       type: Array,
-      default: null
-    }
+      default: null,
+    },
   },
   data() {
     return {
-      player: null,   //鎾斁鍣ㄥ疄渚�
-      playerId: `player-${Math.random().toString(36).substr(2).toLocaleUpperCase()}`,
+      player: null, //鎾斁鍣ㄥ疄渚�
+      playerId: `player-${Math.random()
+        .toString(36)
+        .substr(2)
+        .toLocaleUpperCase()}`,
       cssLink: `/apps/shuohuangMonitorAnalyze/aliplayer-min.css`,
       scriptSrc: `/apps/shuohuangMonitorAnalyze/aliplayer-min.js`,
       config: {
-        id: null,  //鎾斁鍣ㄧ殑ID
-        width: '100%',
-        height: '100%',
+        id: null, //鎾斁鍣ㄧ殑ID
+        width: "100%",
+        height: "100%",
         autoplay: false,
         // skinLayout: false,
         progressMarkers: false,
@@ -34,82 +38,83 @@
         // source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
         skinLayout: [
           {
-            "name": "bigPlayButton",
-            "align": "blabs",
-            "x": 30,
-            "y": 80
+            name: "bigPlayButton",
+            align: "blabs",
+            x: 30,
+            y: 80,
           },
           {
-            "name": "H5Loading",
-            "align": "cc"
+            name: "H5Loading",
+            align: "cc",
           },
           {
-            "name": "errorDisplay",
-            "align": "tlabs",
-            "x": 0,
-            "y": 0
+            name: "errorDisplay",
+            align: "tlabs",
+            x: 0,
+            y: 0,
           },
           {
-            "name": "infoDisplay"
+            name: "infoDisplay",
           },
           {
-            "name": "tooltip",
-            "align": "blabs",
-            "x": 0,
-            "y": 56
+            name: "tooltip",
+            align: "blabs",
+            x: 0,
+            y: 56,
           },
           {
-            "name": "thumbnail"
+            name: "thumbnail",
           },
           {
-            "name": "controlBar",
-            "align": "blabs",
-            "x": 0,
-            "y": 0,
-            "children": [
+            name: "controlBar",
+            align: "blabs",
+            x: 0,
+            y: 0,
+            children: [
               {
-                "name": "progress",
-                "align": "blabs",
-                "x": 0,
-                "y": 44
+                name: "progress",
+                align: "blabs",
+                x: 0,
+                y: 44,
               },
               {
-                "name": "playButton",
-                "align": "tl",
-                "x": 15,
-                "y": 12
+                name: "playButton",
+                align: "tl",
+                x: 15,
+                y: 12,
               },
               {
-                "name": "timeDisplay",
-                "align": "tl",
-                "x": 10,
-                "y": 7
+                name: "timeDisplay",
+                align: "tl",
+                x: 10,
+                y: 7,
               },
               {
-                "name": "fullScreenButton",
-                "align": "tr",
-                "x": 10,
-                "y": 12
+                name: "fullScreenButton",
+                align: "tr",
+                x: 10,
+                y: 12,
               },
               {
-                "name": "volume",
-                "align": "tr",
-                "x": 5,
-                "y": 10
-              }
-            ]
-          }]
+                name: "volume",
+                align: "tr",
+                x: 5,
+                y: 10,
+              },
+            ],
+          },
+        ],
       },
       options: {
         // source:'//player.alicdn.com/video/aliyunmedia.mp4',
-        isLive: false,   //鍒囨崲涓虹洿鎾祦鐨勬椂鍊欏繀濉�
-        controlBarVisibility: "always",
+        isLive: false, //鍒囨崲涓虹洿鎾祦鐨勬椂鍊欏繀濉�
+        controlBarVisibility: "hover",
         preload: true,
         playsinline: true,
         language: "zh-cn",
 
         // useFlashPrism: false,    //鎸囧畾涓篺lash
-        // disableSeek: true //绂佺敤杩涘害鏉＄殑Seek锛岄粯璁ゅ�间负false       
+        // disableSeek: true //绂佺敤杩涘害鏉＄殑Seek锛岄粯璁ゅ�间负false
       },
       events: [
         /**
@@ -117,93 +122,99 @@
          * 鎾斁鍣║I鍒濆璁剧疆闇�瑕佹浜嬩欢鍚庤Е鍙戯紝閬垮厤UI琚垵濮嬪寲鎵�瑕嗙洊銆�
          * 鎾斁鍣ㄦ彁渚涚殑鏂规硶闇�瑕佸湪姝や簨浠跺彂鐢熷悗鎵嶅彲浠ヨ皟鐢ㄣ��
          */
-        'ready',
+        "ready",
         /**
          * 瑙嗛鐢辨殏鍋滄仮澶嶄负鎾斁鏃惰Е鍙戙��
          */
-        'play',
+        "play",
         /**
          * 瑙嗛鏆傚仠鏃惰Е鍙戙��
          */
-        'pause',
+        "pause",
         /**
          * 鑳藉寮�濮嬫挱鏀鹃煶棰�/瑙嗛鏃跺彂鐢燂紝浼氬娆¤Е鍙戯紝浠匟5鎾斁鍣ㄣ��
          */
-        'canplay',
+        "canplay",
         /**
          * 鎾斁涓紝浼氳Е鍙戝娆°��
          */
-        'playing',
+        "playing",
         /**
          * 褰撳墠瑙嗛鎾斁瀹屾瘯鏃惰Е鍙戙��
          */
-        'ended',
+        "ended",
         /**
          * 鐩存挱娴佷腑鏂椂瑙﹀彂銆�
          * m3u8/flv/rtmp鍦ㄩ噸璇�5娆℃湭鎴愬姛鍚庤Е鍙戙��
          * 鎻愮ず涓婂眰娴佷腑鏂垨闇�瑕侀噸鏂板姞杞借棰戙��
          * PS锛歮3u8涓�鐩磋嚜鍔ㄩ噸璇曪紝涓嶉渶瑕佷笂灞傛坊鍔犻噸璇曘��
          */
-        'liveStreamStop',
+        "liveStreamStop",
         /**
          * m3u8鐩存挱娴佷腑鏂悗閲嶈瘯浜嬩欢锛屾瘡娆℃柇娴佸彧瑙﹀彂涓�娆°��
          */
-        'onM3u8Retry',
+        "onM3u8Retry",
         /**
          * 鎺у埗鏍忚嚜鍔ㄩ殣钘忎簨浠躲��
          */
-        'hideBar',
+        "hideBar",
         /**
          * 鎺у埗鏍忚嚜鍔ㄦ樉绀轰簨浠躲��
          */
-        'showBar',
+        "showBar",
         /**
          * 鏁版嵁缂撳啿浜嬩欢銆�
          */
-        'waiting',
+        "waiting",
         /**
          * 鎾斁浣嶇疆鍙戠敓鏀瑰彉鏃惰Е鍙戯紝浠匟5鎾斁鍣ㄣ��
          * 鍙�氳繃getCurrentTime鏂规硶锛屽緱鍒板綋鍓嶆挱鏀炬椂闂淬��
          */
-        'timeupdate',
+        "timeupdate",
         /**
          * 鎴浘瀹屾垚銆�
          */
-        'snapshoted',
+        "snapshoted",
         /**
          * 鍏ㄥ睆浜嬩欢锛屼粎H5鏀寔銆�
          */
-        'requestFullScreen',
+        "requestFullScreen",
         /**
          * 鍙栨秷鍏ㄥ睆浜嬩欢锛宨OS涓嬩笉浼氳Е鍙戯紝浠匟5鏀寔銆�
          */
-        'cancelFullScreen',
+        "cancelFullScreen",
         /**
          * 閿欒浜嬩欢銆�
          */
-        'error',
+        "error",
         /**
          * 寮�濮嬫嫋鎷斤紝鍙傛暟杩斿洖鎷栨嫿鐐圭殑鏃堕棿銆�
          */
-        'startSeek',
+        "startSeek",
         /**
          * 瀹屾垚鎷栨嫿锛屽弬鏁拌繑鍥炴嫋鎷界偣鐨勬椂闂淬��
          */
-        'completeSeek'
+        "completeSeek",
       ],
     };
   },
   watch: {
-    source() { //鐩戝惉鎾斁婧愬彉鍖�
+    source() {
+      //鐩戝惉鎾斁婧愬彉鍖�
       this.init();
     },
 
-    options: {   //閰嶇疆椤规槸瀵硅薄,鍙兘娣卞害鐩戝惉
+    options: {
+      //閰嶇疆椤规槸瀵硅薄,鍙兘娣卞害鐩戝惉
       handler() {
         this.init();
       },
-      deep: true
-    }
+      deep: true,
+    },
+
+    markers(newVal) {
+      this.player.setProgressMarkers(newVal);
+    },
   },
   mounted() {
     this.$nextTick(() => {
@@ -218,23 +229,22 @@
     });
   },
   methods: {
-
     /**
      * 鍒涘缓script鍜宑ss
      * 鍔犺浇Alipayer鐨凷DK
      */
     init() {
-      const linkID = 'app__aliplayer-min-css';
-      const scriptID = 'app__aliplayer-min-js';
-      const head = document.getElementsByTagName('head');
-      const html = document.getElementsByTagName('html');
+      const linkID = "app__aliplayer-min-css";
+      const scriptID = "app__aliplayer-min-js";
+      const head = document.getElementsByTagName("head");
+      const html = document.getElementsByTagName("html");
       let scriptTag = document.getElementById(scriptID);
       let linkIDTag = document.getElementById(linkID);
       if (!linkIDTag) {
         // console.log('linkIDTag');
-        const link = document.createElement('link');
-        link.type = 'text/css';
-        link.rel = 'stylesheet';
+        const link = document.createElement("link");
+        link.type = "text/css";
+        link.rel = "stylesheet";
         link.href = this.cssLink;
         link.id = linkID;
         // link.className = linkID;
@@ -242,14 +252,14 @@
       }
       if (!scriptTag) {
         // console.log('scriptTag');
-        scriptTag = document.createElement('script');
+        scriptTag = document.createElement("script");
         scriptTag.type = "text/javascript";
         scriptTag.id = scriptID;
         // scriptTag.className = scriptID;
         scriptTag.src = this.scriptSrc;
         html[0].appendChild(scriptTag);
       } else {
-        this.initPlayer();  //杩欐牱鏄负浜嗗吋瀹归〉闈笂鏈夊涓挱鏀惧櫒
+        this.initPlayer(); //杩欐牱鏄负浜嗗吋瀹归〉闈笂鏈夊涓挱鏀惧櫒
       }
       //鍏煎鍗曢〉鍔犺浇鍜岀‖鍔犺浇
       scriptTag.addEventListener("load", () => {
@@ -263,7 +273,7 @@
      * @description SDK鏂囨。鍦板潃:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
      */
     initPlayer() {
-      if (typeof window.Aliplayer != 'undefined') {
+      if (typeof window.Aliplayer != "undefined") {
         const options = this.deepCloneObject(this.options);
         if (options) {
           for (const key in options) {
@@ -274,13 +284,14 @@
         this.config.id = this.playerId; //璧嬪�兼挱鏀惧櫒瀹瑰櫒id
         this.config.progressMarkers = this.markers; // 鏍囨敞
         // console.log("alipayer config", this.config);
-        this.player && this.player.dispose();   //闃叉瀹炰緥鐨勯噸澶�
+        this.player && this.player.dispose(); //闃叉瀹炰緥鐨勯噸澶�
         this.player = Aliplayer(this.config);
         for (const ev in this.events) {
-          this.player && this.player.on(this.events[ev], (e) => {
-            // console.log(`object ${this.events[ev]}`,e);
-            this.$emit(this.events[ev], e);
-          });
+          this.player &&
+            this.player.on(this.events[ev], (e) => {
+              // console.log(`object ${this.events[ev]}`,e);
+              this.$emit(this.events[ev], e);
+            });
         }
         //閫氳繃鎾斁鍣ㄥ疄渚嬬殑off鏂规硶鍙栨秷璁㈤槄
         //player.off('ready',handleReady);
@@ -390,9 +401,24 @@
      * @param 鎾斁鍑瘉
      * @description 浠匨PS鐢ㄦ埛鏃朵娇鐢� 浠匨PS鐢ㄦ埛鏃朵娇鐢� 鍙傛暟椤哄簭涓猴細vid銆乤ccId銆乤ccSecret銆乻tsToken銆乤uthInfo銆乨omainRegion
      */
-    replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion) {
+    replayByVidAndAuthInfo(
+      vid,
+      accId,
+      accSecret,
+      stsToken,
+      authInfo,
+      domainRegion
+    ) {
       // console.log(`replayByVidAndAuthInfo 鍙傛暟椤哄簭涓猴細vid銆乤ccId銆乤ccSecret銆乻tsToken銆乤uthInfo銆乨omainRegion`,vid, accId, accSecret, stsToken, authInfo, domainRegion);
-      this.player && this.player.replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion);
+      this.player &&
+        this.player.replayByVidAndAuthInfo(
+          vid,
+          accId,
+          accSecret,
+          stsToken,
+          authInfo,
+          domainRegion
+        );
     },
 
     /**
@@ -434,7 +460,9 @@
      */
     requestFullScreen() {
       // console.log(`鎾斁鍣ㄥ叏灞忥紝浠匟5鏀寔`);
-      this.player && this.player.fullscreenService && this.player.fullscreenService.requestFullScreen();
+      this.player &&
+        this.player.fullscreenService &&
+        this.player.fullscreenService.requestFullScreen();
     },
 
     /**
@@ -442,7 +470,9 @@
      */
     cancelFullScreen() {
       // console.log(`鎾斁鍣ㄥ叏灞忥紝浠匟5鏀寔`);
-      this.player && this.player.fullscreenService && this.player.fullscreenService.cancelFullScreen();
+      this.player &&
+        this.player.fullscreenService &&
+        this.player.fullscreenService.cancelFullScreen();
     },
 
     /**
@@ -450,7 +480,11 @@
      */
     getIsFullScreen() {
       // console.log(`鑾峰彇鎾斁鍣ㄥ叏灞忕姸鎬侊紝浠匟5鏀寔銆俙,this.player && this.player.fullscreenService && this.player && this.player.fullscreenService.getIsFullScreen());
-      return this.player && this.player.fullscreenService && this.player.fullscreenService.getIsFullScreen();
+      return (
+        this.player &&
+        this.player.fullscreenService &&
+        this.player.fullscreenService.getIsFullScreen()
+      );
     },
 
     /**
@@ -470,7 +504,9 @@
      */
     setLiveTimeRange(beginTime, endTime) {
       // console.log(`璁剧疆鐩存挱鐨勫紑濮嬫椂闂�:${beginTime},缁撴潫鏃堕棿:${endTime}锛屽紑鍚洿鎾椂绉诲姛鑳芥椂浣跨敤銆俙);
-      this.player && this.player.liveShiftSerivce && this.player.liveShiftSerivce.setLiveTimeRange(beginTime, endTime);
+      this.player &&
+        this.player.liveShiftSerivce &&
+        this.player.liveShiftSerivce.setLiveTimeRange(beginTime, endTime);
     },
 
     /**
@@ -562,18 +598,17 @@
       this.player && this.player.off(ev, handle);
     },
 
-
     /**
      * 娣卞害鎷疯礉
      * @param {*} obj
      */
     deepCloneObject(obj) {
       let objClone = Array.isArray(obj) ? [] : {};
-      if (obj && typeof obj === 'object') {
+      if (obj && typeof obj === "object") {
         for (let key in obj) {
           if (Object.prototype.hasOwnProperty.call(obj, key)) {
             //鍒ゆ柇ojb瀛愬厓绱犳槸鍚︿负瀵硅薄锛屽鏋滄槸锛岄�掑綊澶嶅埗
-            if (obj[key] && typeof obj[key] === 'object') {
+            if (obj[key] && typeof obj[key] === "object") {
               objClone[key] = this.deepCloneObject(obj[key]);
             } else {
               //濡傛灉涓嶆槸锛岀畝鍗曞鍒�
@@ -583,10 +618,10 @@
         }
       }
       return objClone;
-    }
-
+    },
   },
-  beforeDestroy() {  //闃叉閲嶅鍒涘缓
+  beforeDestroy() {
+    //闃叉閲嶅鍒涘缓
     this.dispose(); //閿�姣佹挱鏀惧櫒(闃叉鐩存挱鎾斁鐨勬儏鍐典笅,鎾斁鍣ㄥ凡缁忛攢姣�,鑰屽悗鍙拌繕鍦ㄧ户缁笅杞借祫婧愰�犳垚鍗￠】鐨刡ug)
     // const head = document.querySelector('head');
     // const cssNodes = document.querySelectorAll(`link.app__aliplayer-min-css`);
@@ -598,6 +633,6 @@
     // (html && jsNodes.length > 1) && jsNodes.forEach((item, index)=>{
     //     if(index != 0) html.removeChild(item);
     // });
-  }
+  },
 };
 </script>
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 92d23a8..8c33c6d 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -897,6 +897,7 @@
 
   * {
     box-sizing: content-box;
+    color: #425277;
   }
   .el-input__inner {
     border: 1px solid #d7dce8;
@@ -1331,12 +1332,15 @@
         padding: 10px 0 20px;
       }
     }
+
     .el-dialog__wrapper {
       top: -22px;
     }
     .dialog-video {
       .el-dialog {
         width: 1340px;
+        top: 70px;
+        transform: none;
       }
       .el-dialog__body {
         background: #eaeaea;
@@ -1387,6 +1391,7 @@
     }
     .dialog-event {
       z-index: 2096 !important;
+
       .el-dialog {
         width: 1000px;
         height: 800px;
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