我的申请-已申请：新增基础设施-视频预览

front/src/views/personalCenter/components/AbilityApplication.vue

@@ -168,7 +168,6 @@
                   <a-button
                     v-if="item.approveStatus === '通过'"
                     @click.stop="switchFunction(item)"
-                    class="DownloadAttachment2"
                   >
                     查看详情
                   </a-button>
@@ -186,6 +185,14 @@
                   <span class="channelName">{{ val.channelName }}</span>
                   <span class="type">基础设施</span>
                 </div>
+                <a-button
+                    type="primary"
+                    v-if="item.approveStatus === '通过' && whoShow1.itShowXiHaiAn"
+                    @click.stop="openVideo(val)"
+                  >
+                  视频预览
+                </a-button>
+
               </div>
               <div class="ability-bottom">
                 <div class="dec2">位置：{{ val.nodeName }}</div>
@@ -208,6 +215,23 @@
         </div>
       </div>
     </div>
+
+     <!-- 单个预览弹窗 -->
+     <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%">
+            <vue3VideoPlay v-bind="options"/>
+          </div>
+        </div>
+      </a-modal>
+
   </div>
 </template>
 <script setup>
@@ -216,11 +240,44 @@
   import { message } from 'ant-design-vue'
   import { endProcess, getApplyForm } from '@/api/personalCenter.js'
   import { useRouter } from 'vue-router'
+  import {
+    getStreamByChannelCode,
+  } from '@/api/videoSurveillance'
   const router = useRouter()
   const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
   const props = defineProps({
     refObj: { type: Object, default: null },
   })
+  const whoShow1 = ref(whoShow)
+  let visible = ref(false)
+  const options = reactive({
+    width: '912px', //播放器宽度
+    height: '513px', //播放器高度
+    color: '#409eff', //主题色
+    title: '', //视频名称
+    src: '', //视频源
+    type: 'm3u8', // 视频源类型
+    muted: false, //静音
+    webFullScreen: false,
+    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
+    autoPlay: true, //自动播放
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ], //显示所有按钮,
+  })
+
   const dept = reactive({})
   // eslint-disable-next-line no-undef
   if (infrastructure) {
@@ -379,6 +436,25 @@
       }
     }
   }
+  
+  // 视频预览
+  const openVideo = (item) => {
+    console.log('打开视频', item)
+    const param = {
+      key: item.cameraId,
+    }
+    getStreamByChannelCode(param).then((res) => {
+      console.log('视频预览------------>', res);
+      console.log(res)
+      visible.value = true
+      options.src = res.data.data || ''
+    }).catch(err => {
+      message.error(err)
+    })
+    // 视频测试--勿删
+    // visible.value = true
+    // options.src = 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+  }
 </script>
 <style lang="less" scoped>
   .title {
@@ -576,4 +652,19 @@
       }
     }
   }
+
+  .single-preview-modal {
+    .ant-modal-header {
+      background: url(~@/assets/home/video-background.png) no-repeat;
+      background-size: cover;
+    }
+    .ant-modal-title {
+      font-size: 0.16rem;
+      font-weight: 500;
+      color: #ffffff;
+    }
+    .anticon {
+      color: #ffffff;
+    }
+  }
 </style>