视频融合

src/views/home/Header.vue

@@ -32,7 +32,9 @@
 <!--    </div>-->
     <MiForChange v-if="miForChangeShow"/>
     <water-level v-if="waterDeepShow"/>
-    <Tools v-show="checkTool" />
+    <Tools v-show="checkTool" @showView="vidoShow=true"  @hiddenView="closeVido"/>
+
+    <VideoForHK  v-if="vidoShow" :vidoBackShow="false"  :cameraIndexCode="'d692af55367a4b92b9896985f397ebb8'"  ref="childeRef"   @closeVido="closeVidoAll"/>
 
     <LunDuMessage v-if="checkLinDu" @closeThis="closeLundu" :datas="ldData.value"/>
 
@@ -49,7 +51,7 @@ export default {
 </script>
 
 <script setup>
-  import { onMounted, reactive, ref } from 'vue';
+  import {nextTick,onBeforeMount,defineComponent, onMounted, reactive, ref,toRaw} from 'vue';
   import { useNow, useDateFormat } from '@vueuse/core'
   import bus from '@/utils/bus'
   import { GetWeather } from '@/apis/other'
@@ -60,6 +62,7 @@ export default {
   } from '@/utils/UIInteractions'
   import WaterLevel from './cpns/WaterLevel.vue'
   import MiForChange from './cpns/MiForChange.vue'
+  import VideoForHK from  './cpns/VideoForHK'
   import HuiFangArea from './cpns/tools/HuiFangArea.vue'
   import Tools from './cpns/tools/Tools.vue'
   import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
@@ -73,6 +76,7 @@ export default {
 
 
 
+  const vidoShow = ref(false)
   let ldData=reactive({value: ''})
   const  checkLinDu=ref(false)
   const checkArea = ref(false)
@@ -86,7 +90,21 @@ export default {
 
   import {closeAllLayer} from '@/utils/map/Layer'
   const showSelect = ref(false)
+  // onBeforeMount(()=>{
+  //   childeRefAr.value=childeRef.value?.['onCancelVideoEx']
+  //   toRaw(onCancelVideoEx())
+  // })
+
+ const  childeRef=ref()
+  // const childeRefAr = ref(false)
+  function  closeVido(){
+      childeRef.value.onCancelVideoEx()
 
+  }
+  function  closeVidoAll(){
+    vidoShow.value=false
+
+  }
 
   bus.on('click_Lundu', (data) => {
     console.log(data)

src/views/home/cpns/VideoForHK.vue

@@ -1,17 +1,19 @@
 <!-- 视频播放组件 -->
 <template>
-    <div class="vidoForBack">
+    <div class="vidoForBack" :class="vidoBackShow?'vidoBack':null">
          <div class="VideoForHk" ref="playWndBox">
              <div id="playWnd" class="playWnd" :style="{ height: playWndHeight + 'px', width: playWndWidth + 'px',
            }"></div>
-             <div class="vido_footer"><span @click="onCancelVideo()"></span></div>
+             <div class="vido_footer" v-if="vidoBackShow?true:false"><span @click="onCancelVideo()"></span></div>
          </div>
     </div>
 </template>
 <script setup>
-    import {ref,  onMounted, onBeforeUnmount,onBeforeMount, getCurrentInstance,  nextTick, watch} from 'vue'
+    import {ref,  onMounted, onBeforeUnmount,onBeforeMount, getCurrentInstance, defineExpose, nextTick, watch} from 'vue'
-    const props = defineProps(['cameraIndexCode'])
+    const props = defineProps(['cameraIndexCode','vidoBackShow'])
     const playWndBox = ref(null)
+
+    const vidoBackShow = ref(true)
     let backMsg = ref('')
     let playWndHeight = ref('')
     let playWndWidth = ref('')
@@ -26,6 +28,7 @@
         layout: "1x1",      //页面展示的模块数【16】
     })
     onBeforeMount(() => {
+        vidoBackShow.value=props.vidoBackShow
         // 初始化播放器插件
         nextTick(() => {
             initPlugin();
@@ -77,6 +80,21 @@
        handleClose()
     }
 
+    const  onCancelVideoEx=()=>{
+        console.log('关闭调用到了')
+        // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
+        oWebControl.JS_HideWnd();
+        // 销毁当前播放的视频
+        oWebControl.JS_RequestInterface({ funcName: "destroyWnd" });
+        // 断开与插件服务连接
+        oWebControl.JS_Disconnect();
+        oWebControl.JS_RequestInterface({funcName: 'uninit'})
+        handleClose()
+    }
+
+    defineExpose({
+        onCancelVideoEx
+    })
 
     const emit = defineEmits(['closeVido'])
 
@@ -213,7 +231,7 @@
                         encryptedFields: encryptedFields, //加密字段
                         showToolbar: showToolbar, //是否显示工具栏
                         showSmart: showSmart,   //是否显示智能信息
-                        toolBarButtonIDs: "2048,2049,4098",
+                        toolBarButtonIDs: vidoBackShow.value?"2048,2049,4098":'',
                         reconnectDuration: 5,
                         reconnectTimes: 5,
                     }),
@@ -280,6 +298,10 @@
     }
 </script>
 <style lang="scss" scoped>
+    .vidoBack{
+        background-color: #000000;
+        opacity: 0.9;
+    }
     .vidoForBack {
 
         top: 0;
@@ -287,9 +309,7 @@
         position: fixed;
         height: 100%;
         width: 100%;
-        background-color: #000000;
+        z-index: 1;
-        opacity: 0.9;
-        z-index: 580;
 
         .VideoForHk {
             position: fixed;

src/views/home/cpns/tools/Tools.vue

@@ -32,10 +32,12 @@ onMounted(() => {
 
 })
 
+
 onBeforeUnmount(() => {
 })
   const  itemForAll=ref({
     data: [{ name: '船舶',  indexName: 'cb' ,click:false},
+        { name: '视频融合',  indexName: 'sprh' ,click:false},
       { name: '码头泊位',  indexName: 'mt' ,click:false},
         { name: '客运码头',  indexName: 'kymt' ,click:false},
       { name: '两岸精模',  indexName: 'jm' ,click:false},
@@ -46,9 +48,9 @@ onBeforeUnmount(() => {
       { name: '警戒区',  indexName: 'jjq' ,click:false},
       { name: '水上绿色综合服务区',  indexName: 'sszh' ,click:false},
       { name: '航标',  indexName: 'hb' ,click:false},
-      { name: '水下地形',  indexName: 'sxdx' ,click:false},
+      { name: '水下地形',  indexName: 'sxdx' ,click:false}
-
     ]})
+  const emit = defineEmits(['showView','hiddenView'])
 
 
     function chlickLi(item) {
@@ -65,6 +67,10 @@ onBeforeUnmount(() => {
             bus.emit('hiddenWater')
                 setOpacity(1)
             }
+            if (item.indexName=='sprh'){
+                emit('hiddenView')
+            }
+
         }
         else {
             item.click=true
@@ -75,6 +81,9 @@ onBeforeUnmount(() => {
                 bus.emit('toggle_sxdx', true)
                 setOpacity(0.4)
             }
+            if (item.indexName=='sprh'){
+                emit('showView')
+            }
             addLayerByName(item.indexName,true)
         }
     }
@@ -89,8 +98,9 @@ onBeforeUnmount(() => {
  transform: translateX(-50%);
   align-items: center;
   top: 10vh;
+    z-index: 30;
   .Tool-level{
-    height: 685px;
+    height: 725px;
     width: 290px;
     background: url('../../../../assets/imgs/header/tclbbg.png') no-repeat;
     background-size: 100%  100%;

src/views/yyjg/cpns/EntInfo.vue

@@ -99,7 +99,7 @@
 <!--         //图片查看-->
       <PicViewerForPhotos v-if="imageShow" :picImg="imagesUrl"  @closePicViewerOne="closePicViewerOne"/>
 <!--查看视频-->
-       <VideoForHK  v-if="vidoShow" :cameraIndexCode="cameraIndexCode"   @closeVido="closeVido"/>
+       <VideoForHK  v-if="vidoShow" :cameraIndexCode="cameraIndexCode" :vidoBackShow="true"   @closeVido="closeVido"/>
     </div>
   </div>
 </template>