西海岸-视频预览--禁止点击播放，给出提示

front/src/views/home/infrastructurePage.vue

@@ -494,7 +494,7 @@
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'operation'">
               <a
-                v-if="isXiHaiAn"
+                v-if="isXiHaiAn || true"
                 @click="
                   openVideo(
                     record.channelCode ||
@@ -569,6 +569,21 @@
           </div>
         </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>
+
       <!-- 图片预览 -->
       <a-modal
         wrapClassName="single-preview-modal"
@@ -706,8 +721,6 @@
 </template>
 <script setup>
   import VideoSurveillance from '@/views/home/videoSurveillance'
-  // import { getCategoryTreePage } from '@/api/personalCenter'
-  // import { dataType } from 'element-plus/es/components/table-v2/src/common'
   import { useRouter } from 'vue-router'
   import { message, Upload } from 'ant-design-vue'
   import {
@@ -719,6 +732,8 @@
     defineComponent,
     nextTick,
     defineExpose,
+    computed,
+
   } from 'vue'
   import {
     getCameraByParentId,
@@ -746,7 +761,7 @@
   const videoTotal = ref(0)
   const router = useRouter()
   const whoShow1 = ref(whoShow)
-  const isXiHaiAn = whoShow1.value.itShowXiHaiAn
+  const isXiHaiAn = whoShow1.value.itShowXiHaiAn;
   const options = reactive({
     width: '912px', //播放器宽度
     height: '513px', //播放器高度
@@ -757,14 +772,13 @@
     muted: false, //静音
     webFullScreen: false,
     speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    // autoPlay: isXiHaiAn, //自动播放
-    autoPlay: false, //自动播放
+    autoPlay: isXiHaiAn ? false : true, //自动播放
     loop: false, //循环播放
     mirror: false, //镜像画面
     ligthOff: false, //关灯模式
     volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: [
+    control: isXiHaiAn ? false : true, //是否显示控制
+    controlBtns: isXiHaiAn ? [] : [
       'audioTrack',
       'quality',
       'speedRate',
@@ -797,14 +811,6 @@
     pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
   })
   const formState = reactive({
-    // name: '',
-    // iphone: '18264084961',
-    // group: '',
-    // create: '',
-    // cerateTime: '',
-    // endTime: '',
-    // introduction: '',
-    // uploadRoom: '',
     roomId: '',
     bookDate: '', //日期
     startTime: '', //开始时间
@@ -928,8 +934,7 @@
   const tabList = ref([
     {
       title: '设施类型',
-      content: ['视频资源', '感知资源', '城市云脑会客厅']
-      // content: isXiHaiAn ? ['视频资源', '感知资源', '城市云脑会客厅'] :  ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
+      content: isXiHaiAn ? ['视频资源', '感知资源', '城市云脑会客厅'] :  ['视频资源', '云资源', '感知资源', '城市云脑会客厅'],
     },
     {
       title: '视频标签',
@@ -979,14 +984,14 @@
     const param = {
       key: id,
     }
-    // getStreamByChannelCode(param).then((res) => {
-    //   console.log(res)
-    //   visible.value = true
-    //   options.src = res.data.data
-    // })
-    visible.value = true
-    options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
-
+    getStreamByChannelCode(param).then((res) => {
+      console.log(res)
+      visible.value = true
+      options.src = res.data.data
+    })
+    // 视频测试--勿删
+    // visible.value = true
+    // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
   }
   // 打开图片预览
   const openPicture = (id) => {
@@ -1004,15 +1009,7 @@
       }
     })
   }
-  // const dataTypeList = () => {
-  //   if (tabList.value[0].content.indexOf('视频资源') != -1) {
-  //     tabList.value[1].content = ['123344', '213124']
-  //   }else if(tabList.value[0].content.indexOf('云资源') != -1){
-  //     tabList.value[1].content = ['5555', '666']
  
-  //   }
-  // }
-  // dataTypeList()
   //初始化数据
   const init = () => {
     tabList.value.map((item) => {
@@ -1721,7 +1718,6 @@
       })
     } else {
       console.log('mapSearchParam------------>', mapSearchParam);
-      
       let params = {
         regionId:
           mapSearchParam.value.parentId || '70be8c5b664f4bcf869d82f2e8335051',
@@ -1887,39 +1883,16 @@
     // this.getTableList()
   }
 
-  // 视频播放 todo
-  // const vue3VideoPlay = ref(null)
-  const onPlay = (ev) => {
-    console.log('播放')
-    // message.warning('视频播放')
-    // nextTick(() => {
-    //   // console.log('vue3VideoPlay.value.state------------>', vue3VideoPlay.value.state);
-    // })
+  const showMsg = () => {
+    message.warning('请申请后在我的申请中预览视频!')
   }
-  const onPause = (ev) => {
-    console.log(ev, '暂停')
-  }
-
-  const onTimeupdate = (ev) => {
-    console.log(ev, '时间更新')
-    onPause(ev)
-  }
-  const onCanplay = (ev) => {
-    console.log(ev, '可以播放')
-  }
- 
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {
     padding: 0.2rem;
-    // background: #f3f5f9;
     background: #ffffff;
-    /* padding: 0.16rem; */
     border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
     .infrastructrue-tab {
-      // background: #ffffff;
-      // padding: 0.2rem;
-      // border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
       span {
         display: inline-block;
         height: 0.24rem;
@@ -2240,6 +2213,23 @@
       color: #ffffff;
     }
   }
+  .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%;
@@ -2266,4 +2256,9 @@
       color: #ffffff;
     }
   }
+
+  /*禁用video的controls（要慎重！不要轻易隐藏掉，会导致点击视频不能播放）*/
+  video::-webkit-media-controls {
+    display:none !important;
+  }
 </style>