视频播放修改

front/src/supermap/advance-init.js

@@ -1675,7 +1675,7 @@ export function MapFun(mapObj) {
                 //   })
 
             // }
-            //_removeLayerByLayerName(layerName)
+            _removeLayerByLayerName(layerName)
             let selectedLayerList = [];
             let layers = null;
             let clickDataList = [];

front/src/views/home/components/H5Player.vue

@@ -2,7 +2,24 @@
 海康H5Player
 -->
 <template>
-  <div id='player' style="width:800px;height:600px;z-index:9999"></div>
+<div class="video-player">
+    <!--<div class="play-button">
+    <img
+     v-show="!state.playing && !state.isLoading"
+     src="../../assets/video/content_btn_play.svg"
+    >
+    <img
+     v-show="state.playing && !state.isLoading"
+     src="../../assets/video/content_btn_pause.svg"
+    >
+    <div class="loader" v-show="state.isLoading">
+     <div class="loader-inner ball-clip-rotate">
+      <div></div>
+     </div>
+    </div> 
+   </div>-->
+    <div id='player' style="width:800px;height:600px;z-index:9999"></div>
+</div>
 </template>
 <script>
 const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
@@ -18,6 +35,10 @@ import { message } from 'ant-design-vue'
      index:{
         type: Number,
         default: 0,
+     },
+     stopFlag:{
+       type: Boolean, 
+        default: false 
      }
     },
     data() {
@@ -58,8 +79,8 @@ import { message } from 'ant-design-vue'
       this.createPlayer()
       this.arrangeWindow()
       //videoUrl this.realplay(this.videoUrl,0);//循环传过来的数组进行播放，index根据选中的个数
-      this.realplay(this.videoUrl,0);
+      //this.realplay(this.videoUrl,0);
-      //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/y3mFfcA',0);
+      //this.realplay('wss://10.134.135.44:6014/proxy/10.10.20.14:559/openUrl/RekxIQ0',0);
     },
      watch: {
             videoUrl: {
@@ -140,6 +161,10 @@ import { message } from 'ant-design-vue'
      player.JS_Play(playURL, { playURL, mode }, index1).then(
        () => {
          console.log('realplay success')
+         if(!stopFlag){
+          console.log("暂停住pause");
+          this.stopPlay();
+         }
        },
        e => { 
         console.error(e);
@@ -175,9 +200,19 @@ import { message } from 'ant-design-vue'
   }
 </script>
 <style lang="less">
-  .tiled-map {
+  .video-player {
     position: relative;
     width: 100%;
     height: 100%;
+    position: relative;
+    .play-button{
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    position: absolute;
+    left: 350px;
+    z-index: 9;
+    top: 240px;
+    }
   }
 </style>

front/src/views/home/infrastructurePageXha.vue

@@ -621,8 +621,30 @@
         :title="'视频监控点选择'"
         footer={null}
       >
+       <div style="width: 100%; display: flex; justify-content: center">
+          <div
+            style="width: 100%; height: 100%; position: relative"
+            v-show="isXiHaiAn"
+          >
+            <!-- 西海岸--预览视频--遮罩 todo-->
+            <div class="video-cover-new" @click="videoShowMsg"></div>
+            <div class="waterMark waterMark-left-top">
+              {{ userInfo.usernameShow }}
+            </div>
+            <div class="waterMark waterMark-right-top">
+              {{ userInfo.realNameShow }}
+            </div>
+            <div class="waterMark waterMark-left-bottom">
+              {{ userInfo.usernameShow }}
+            </div>
+            <div class="waterMark waterMark-right-bottom">
+              {{ userInfo.realNameShow }}
+            </div>
          <!--地图上点击之后弹出的操作弹窗-->
-      <camera-popup-on-map :camera-Data-List="cameraDataList"></camera-popup-on-map>
+        <camera-popup-on-map :camera-Data-List="cameraDataList" :selected-flag="selectedFlag"></camera-popup-on-map>
+          </div>
+        </div>
+      
       </a-modal>
     </div>
   </div>
@@ -2244,6 +2266,8 @@
 
   //地图视频操作弹窗
   const operationPopupFlag = ref(false)//地图操作弹窗显示标志位
+  //是否为视频选择地图弹窗
+  const selectedFlag = ref(false)
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {
@@ -2709,6 +2733,19 @@
     cursor: pointer;
   }
 
+   .video-cover-new {
+    width: 798px;
+    height: 600px;
+    position: absolute;
+    left: 85px;
+    top: 15px;
+    bottom: 0;
+    right: 0;
+    background: transparent;
+    z-index: 99999999;
+    cursor: pointer;
+  }
+
   .batch-video-cover {
     position: absolute;
     left: 0;

front/src/views/home/videoSurveillance/components/CameraPopupOnMap.vue

@@ -25,7 +25,7 @@
             </a-carousel>
           <div class="operation-content" style="position:ab">
               <div class="video-content">
-              <h5-player :video-url="videoUrl"></h5-player>
+              <h5-player :video-url="videoUrl" :stop-flag="selectedFlag"></h5-player>
               </div>
               <div class="text-label">
                 <span>{{defaultIndex+1}}</span>/<span>{{cameraDataList.length}}</span>
@@ -70,6 +70,10 @@
           return {}
         },
       },
+      selectedFlag:{
+        type: Boolean, 
+        default: false 
+      }
     },
     mounted() {
       this.getVideoUrl(this.cameraDataList[this.defaultIndex]);
@@ -190,8 +194,9 @@
       },
       //查看下一个
       handleNext(){
-          if(this.defaultIndex === this.cameraDataList.length){
+        let lastIndex =  this.cameraDataList.length-1;
-            this.defaultIndex = this.cameraDataList.length;
+          if(this.defaultIndex === Number(lastIndex)){
+            this.defaultIndex = 0;
             console.log('opopopop',this.cameraDataList[0]);
             this.getVideoUrl(this.cameraDataList[0]);
           }else{

front/src/views/home/videoSurveillance/index.vue

@@ -431,7 +431,7 @@ import { ElMessage } from 'element-plus'
               }
             }
           }
-           params.type='0';
+           //params.type='0';
           getCameraByCondition(params).then((res) => {
             //console.log('根据parent查询摄像头44444', res.data.data)
             if(type=='map'){
@@ -441,11 +441,11 @@ import { ElMessage } from 'element-plus'
               mybus.emit('getListByMap', params);
             }
             this.pointAllData = res.data.data;
-            if(this.mapSearchParam.type!=0){
+            if(this.mapSearchParam.type!=0)
               this.addResourceTomap('videoMap', res.data.data)
-            }
+            
             else
-            {this.addResourceTomap('videoMap', []) }  //查询全部时不打点}
+            this.addResourceTomap('videoMap', [])  //查询全部时不打点}
 
           })
         }
@@ -615,7 +615,7 @@ import { ElMessage } from 'element-plus'
         this.getMapPoint(dataEvent, 'icon_camare.png', type)
       },
       getMapPoint(data, img, type) {
-         this.hiMapFun.clearAllLayers();
+         //this.hiMapFun.clearAllLayers();
         const features = data
         // debugger
         this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(