西海岸：批量预览视频增加提示，去申请才能查看

front/src/views/home/infrastructurePage.vue

@@ -353,19 +353,10 @@
       <a-modal wrapClassName="single-preview-modal" v-model:visible="visible" title="视频预览" :width="960" destroyOnClose>
         <template #footer></template>
         <div style="width: 100%; display: flex; justify-content: center">
-          <div style="width: 100%; height: 100%">
+          <div style="width: 100%; height: 100%;position:relative">
-            <vue3VideoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate"
+            <!-- 预览视频--遮罩 -->
-              @canplay="onCanplay" />
+            <div class="video-cover" @click="videoShowMsg"></div>
-          </div>
+            <vue3VideoPlay v-bind="options" />
-        </div>
-      </a-modal>
-      <!-- 西海岸--单个预览弹窗--遮挡，不让点击视频播放 -->
-      <a-modal wrapClassName="single-preview-modal-cover" v-if="whoShow1.itShowXiHaiAn" v-model:visible="visible"
-        :width="960">
-        <template #footer></template>
-        <div style="width: 100%; display: flex; justify-content: center">
-          <div style="width: 100%; height: 100%">
-            <div style="width: 912px; height: 518px;margin-top: 50px" @click="showMsg"></div>
           </div>
         </div>
       </a-modal>
@@ -397,6 +388,8 @@
         <template #footer></template>
         <div class="batch-video">
           <div v-for="item in videoList" :key="item.id" style="width: 100%; height: 100%;position:relative">
+            <!-- 批量预览视频--遮罩 -->
+            <div class="batch-video-cover" @click="videoShowMsg"></div>
             <p></p>
             <vue3VideoPlay v-bind="item.options" />
           </div>
@@ -650,27 +643,11 @@ const tabList = ref([
 const wrjVisible = ref(false)
 const wrjName = ref('')
 const wrjData = ref([])
-const showWrj = (data) => {
-  console.log('data---dddd--------->', data);
-  wrjName.value = data.wrjName
-  // wrjData.value = data.details
-  wrjData.value = data.deviceAttrDTOList
-  // wrjData.value = []
-  // data.deviceAttrDTOList.map(v => {
-  //   console.log('v.attrType------------>', v.attrType);
-  //   console.log('v.attrValue------------>', v.attrValue);
-  //   try {
-  //     let obj = {
-  //       name: v.attrType,
-  //       list: v.attrValue && JSON.parse(v.attrValue)
-  //     }
-  //     wrjData.value.push(obj)
-  //   } catch (error) {
-  //     console.log('error------------>', error);
-  //   }
-  // })
-  // console.log('wrjData.value------------>', wrjData.value);
 
+// 单兵、无人机-详情
+const showWrj = (data) => {
+  wrjName.value = data.wrjName
+  wrjData.value = data.deviceAttrDTOList || []
   wrjVisible.value = true
 }
 const goToWrj = (data) => {
@@ -718,7 +695,7 @@ const openVideo = (id) => {
     visible.value = true
     options.src = res.data.data
   })
-  // 视频测试--勿删
+  // // 视频测试--勿删
   // visible.value = true
   // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
 }
@@ -1318,13 +1295,13 @@ const batchPreview = async function (page) {
           muted: false, //静音
           webFullScreen: false,
           speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-          autoPlay: isXiHaiAn, //自动播放
+          autoPlay: isXiHaiAn ? false : true, //自动播放
           loop: false, //循环播放
           mirror: false, //镜像画面
           ligthOff: false, //关灯模式
           volume: 0.3, //默认音量大小
-          control: true, //是否显示控制
+          control: isXiHaiAn ? false : true, //是否显示控制
-          controlBtns: [
+          controlBtns: isXiHaiAn ? [] : [
             'audioTrack',
             'quality',
             'speedRate',
@@ -1337,6 +1314,8 @@ const batchPreview = async function (page) {
         },
       }
       await getStreamByChannelCode(param).then((res) => {
+        // 视频测试
+        // ob.options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
         ob.options.src = res.data.data
         console.log('监测ob的变化', ob)
         videoList.value.push(ob)
@@ -1640,7 +1619,7 @@ const handleTableChange = (val) => {
   }
 }
 
-const showMsg = () => {
+const videoShowMsg = () => {
   message.warning('请申请后在我的申请中预览视频!')
 }
 </script>
@@ -2031,27 +2010,6 @@ const showMsg = () => {
   }
 }
 
-.ant-modal-mask {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-.ant-modal-footer {
-  display: none;
-}
-
-.single-preview-modal-cover {
-  background: transparent;
-  z-index: 999999;
-
-  .ant-modal {
-    background: transparent !important;
-  }
-
-  .ant-modal-content {
-    background: transparent !important;
-  }
-}
-
 .batch-preview-modal {
   .batch-video {
     width: 100%;
@@ -2087,4 +2045,27 @@ const showMsg = () => {
 video::-webkit-media-controls {
   display: none !important;
 }
+
+.video-cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+  z-index: 99999999;
+  cursor: pointer;
+}
+
+.batch-video-cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: transparent;
+  height: 288px;
+  z-index: 99999999;
+  width: 512px;
+  margin-top: 14px;
+  cursor: pointer;
+}
 </style>