已申请列表预览视频

front/src/views/home/infrastructureApplication.vue

@@ -103,9 +103,24 @@
     :footer="null"
     @cancel="clear"
   >
-    <p>Some contents...</p>
+   <div style="width: 100%; display: flex; justify-content: center">
-    <p>Some contents...</p>
+          <div
-    <p>Some contents...</p>
+            style="width: 100%; height: 100%; position: relative">
+            <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>
+        <h5-player :video-url="videoUrl" :stop-flag="selectedFlag"></h5-player>
+          </div>
+        </div>
   </a-modal>
 </template>
 <script setup>
@@ -121,6 +136,8 @@
   import { message } from 'ant-design-vue'
   import mybus from '@/myplugins/mybus'
   import { useRouter } from 'vue-router'
+  import H5Player from '@/views/home/components/H5Player.vue'
+  import {getCameraLiveStream} from '@/api/file'
   const dataList = reactive({ toBeApplied: [], requested: [], selectItem: {} })
   const showVisible = ref(false)
   // 待办
@@ -229,6 +246,7 @@
   const selectItem = (item) => {
     if (item.approveStatus == '通过') {
       dataList.selectItem = item
+      getVideoUrl(item.cameraInfo);
       showVisible.value = true
     } else {
       dataList.selectItem = {}
@@ -283,6 +301,18 @@
   }
   init()
   initApply()
+  const videoUrl = ref('')
+  const selectedFalg = ref(true)
+  //获取视频控件所需播放地址
+  const getVideoUrl = (data) =>{
+      let param = data;
+      getCameraLiveStream(param).then((res) => {
+      //console.log('555555rrrrr',res)
+      if(res.data.data){
+        videoUrl.value = res.data.data.url;
+      }
+      })
+      }
   mybus.on('selectCamera', (obj) => {
     // 判断最多10条
     if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
@@ -362,5 +392,44 @@
       width: 2.5rem;
       height: 3rem;
     }
+
+     .waterMark {
+    position: absolute;
+    z-index: 99999999;
+    color: #0058e1;
+    font-size: 22px;
+    font-weight: bold;
+    opacity: 0.4;
+    transform: rotate(-25deg);
+    width: 470px;
+  }
+
+  // 左上
+  .waterMark-left-top {
+    left: 50px;
+    top: 100px;
+    text-align: left;
+  }
+
+  // 右上
+  .waterMark-right-top {
+    right: 50px;
+    top: 100px;
+    text-align: right;
+  }
+
+  // 左下
+  .waterMark-left-bottom {
+    left: 50px;
+    bottom: 100px;
+    text-align: left;
+  }
+
+  // 右下
+  .waterMark-right-bottom {
+    right: 50px;
+    bottom: 100px;
+    text-align: right;
+  }
   }
 </style>

front/src/views/home/infrastructurePageXha.vue

@@ -621,6 +621,7 @@
         :title="'视频监控点选择'"
         destroyOnClose
         footer="{null}"
+        @cancel="handleCancel"
       >
        <div style="width: 100%; display: flex; justify-content: center">
           <div
@@ -642,7 +643,7 @@
               {{ userInfo.realNameShow }}
             </div>
          <!--地图上点击之后弹出的操作弹窗-->
-        <camera-popup-on-map :camera-Data-List="cameraDataList" :selected-flag="selectedFlag"></camera-popup-on-map>
+        <camera-popup-on-map :camera-Data-List="cameraDataList" :selected-flag="selectedFlag" :reset-flag="resetFlag"></camera-popup-on-map>
           </div>
         </div>
       
@@ -2269,6 +2270,14 @@
   const operationPopupFlag = ref(false)//地图操作弹窗显示标志位
   //是否为视频选择地图弹窗
   const selectedFlag = ref(false)
+  //地图弹窗默认索引
+  const resetFlag = ref(false)
+
+  //地图弹窗右上角按钮关闭事件
+  const handleCancel = () => {
+    //console.log('是否关');
+     resetFlag.value = true
+  }
 </script>
 <style lang="less" scoped>
   .infrastructrueBox {

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

@@ -73,6 +73,10 @@
       selectedFlag:{
         type: Boolean, 
         default: false 
+      },
+      resetFlag:{
+         type: Boolean, 
+        default: false 
       }
     },
     mounted() {
@@ -83,6 +87,18 @@
     //         debug: true,
     //     }),
     // },
+    watch: {
+      resetFlag: {
+        // 关闭弹窗刷新底部个数显示数值
+        handler(newVal, oldVal) {
+          if (newVal) {
+           this.defaultIndex = 0;
+          }
+        },
+        // 立即处理 进入页面就触发
+        immediate: true,
+      },
+    },
     data() {
       return {
         openVideo: false,