第二次改版

src/views/carbin/index.vue

@@ -2,7 +2,8 @@
 import { ref, defineAsyncComponent, onMounted, watch, toRaw, defineProps, reactive } from 'vue'
 import { useAirPortSocketStore } from '@/stores/airportSocket.js'
 //播放器-组件
-const LivePlayer = defineAsyncComponent(() => import('@/components/video/index.vue'))
+// const LivePlayer = defineAsyncComponent(() => import('@/components/video/index.vue'))
+const screenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))
 
 //1左侧面板-机场视频
 const leftPlaneLiveVideo = defineAsyncComponent(
@@ -30,19 +31,21 @@ let leftPlaneWidth = ref('25%')
 let rightPlaneWidth = ref('75%')
 let rightPlaneHeight = ref('100%')
 let rightPlaneBottom = ref('0')
-//舱外视角
+// //舱外视角
-let out_showLive = ref(false)
+// let out_showLive = ref(false)
-//舱内视角
+// //舱内视角
-let in_showLive = ref(false)
+// let in_showLive = ref(false)
-//无人机视角
+// //无人机视角
-let plane_showLive = ref(false)
+// let plane_showLive = ref(false)
-//gismap
+// //gismap
-let showIframeMap = ref(false)
+// let showIframeMap = ref(false)
 
-let outVideo_teleport = ref('#out_small_video_area')
+// let outVideo_teleport = ref('#out_small_video_area')
-let inVideo_teleport = ref('#in_small_video_area')
+// let inVideo_teleport = ref('#in_small_video_area')
-let planeVideo_teleport = ref('#plane_small_video_area')
+// let planeVideo_teleport = ref('#plane_small_video_area')
-let map_teleport = ref('#big_area')
+// let map_teleport = ref('#big_area')
+
+let big_area_showType = ref('map')
 
 let switchType = null
 //实时socket机场数据
@@ -138,7 +141,7 @@ const queryAirLine_AirPort = async () => {
         statusList[currentAirPortStatus.value],
       )
       //重置teleport指向
-      resetTeleportTo(currentAirPortStatus.value)
+      // resetTeleportTo(currentAirPortStatus.value)
     }
 
     //socket发送数据
@@ -192,7 +195,7 @@ const queryAirPort = async () => {
     LiveOptions_in.videoUrl = currentAirPortInfo.value.internal_monitor_url
     LiveOptions_plane.videoUrl = currentAirPortInfo.value.camera_url
 
-    currentAirPortInfo.value.status = 2
+    // currentAirPortInfo.value.status = 2
 
     //机场当前状态
     if (currentAirPortStatus.value != Number(currentAirPortInfo.value.status)) {
@@ -203,7 +206,7 @@ const queryAirPort = async () => {
         statusList[currentAirPortStatus.value],
       )
       //重置teleport指向
-      resetTeleportTo(currentAirPortStatus.value)
+      // resetTeleportTo(currentAirPortStatus.value)
     }
   }
   //轮询
@@ -275,12 +278,12 @@ const socketFn = (workParams) => {
 }
 
 //iframe map加载完成
-const iframeLoaded = () => {
+const iframeLoaded = (iframeContent) => {
-  let iframeItem = virturalDrive_iframe_full.value
+  // let iframeItem = virturalDrive_iframe_full.value
-  let iframeContent = iframeItem.contentWindow
+  // let iframeContent = iframeItem.contentWindow
 
   let data = JSON.stringify(iframeData)
-  console.log(data)
+  // console.log(data)
 
   setTimeout(() => {
     iframeContent.postMessage(data, '*')
@@ -455,7 +458,13 @@ onMounted(() => {
           <!-- <div class="w-full h-10 absolute right-0 bottom-[20px]">
             <planeControl class="absolute left-0 right-0 top-0 bottom-0 m-auto" />
           </div> -->
-          <div id="big_area" class="relative w-full h-full overflow-hidden"></div>
+          <div id="big_area" class="relative w-full h-full overflow-hidden">
+            <screenComp
+              :showType="big_area_showType"
+              :row="currentAirPortSocket"
+              @iframeLoaded="iframeLoaded"
+            />
+          </div>
 
           <!-- <div id="big_area" class="w-full h-full overflow-hidden"></div> -->
         </div>
@@ -473,34 +482,34 @@ onMounted(() => {
 
   <!-- 直播播放器 -->
   <!-- 舱外视频 -->
-  <teleport :to="outVideo_teleport" v-if="out_showLive">
+  <!-- <teleport :to="outVideo_teleport" v-if="out_showLive">
     <LivePlayer
       class="h-full absolute left-0 right-0 top-0 right-0 m-auto"
       v-show="out_showLive && LiveOptions_out.videoUrl?.includes('.flv')"
       ref="OutlivePlayerRef"
       :options="LiveOptions_out"
     />
-  </teleport>
+  </teleport> -->
   <!-- 舱内视频 -->
-  <teleport :to="inVideo_teleport" v-if="in_showLive">
+  <!-- <teleport :to="inVideo_teleport" v-if="in_showLive">
     <LivePlayer
       class="h-full absolute left-0 right-0 top-0 right-0 m-auto"
       v-show="in_showLive && LiveOptions_in.videoUrl?.includes('.flv')"
       ref="inlivePlayerRef"
       :options="LiveOptions_in"
     />
-  </teleport>
+  </teleport> -->
   <!-- 无人机视角 -->
-  <teleport :to="planeVideo_teleport" v-if="plane_showLive">
+  <!-- <teleport :to="planeVideo_teleport" v-if="plane_showLive">
     <LivePlayer
       class="h-full absolute left-0 right-0 top-0 right-0 m-auto"
       v-show="plane_showLive && LiveOptions_plane.videoUrl?.includes('.flv')"
       ref="planelivePlayerRef"
       :options="LiveOptions_plane"
     />
-  </teleport>
+  </teleport> -->
   <!-- map -->
-  <teleport v-if="showIframeMap" :to="map_teleport">
+  <!-- <teleport v-if="showIframeMap" :to="map_teleport">
     <iframe
       v-if="showIframeMap"
       id="virturalDrive_iframe_full"
@@ -508,7 +517,7 @@ onMounted(() => {
       src="https://gisdata.t-aaron.com/virturalDrive/VirturalDrive.html"
       @load="iframeLoaded"
     ></iframe>
-  </teleport>
+  </teleport> -->
 </template>
 
 <style lang="scss">

src/views/carbin/toolComp/screen.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, defineAsyncComponent, onMounted, watch, toRaw, defineProps, reactive } from 'vue'
+//播放器-组件
+const LivePlayer = defineAsyncComponent(() => import('@/components/video/index.vue'))
+
+const props = defineProps({
+  showType: String, //显示类型 video/map
+  row: Object, //当前数据
+})
+
+const emit = defineEmits(['iframeLoaded'])
+
+let virturalDrive_iframe = ref(null)
+const LiveOptions = reactive({
+  videoUrl: null,
+  // videoTitle: null,
+  // live: true,
+  // hideFullscreenButton: true,
+  // stretch: true
+})
+
+let showType = ref('') //videio / map
+
+//iframe加载完成
+const iframeLoaded = () => {
+  let iframeItem = virturalDrive_iframe.value
+  let iframeContent = iframeItem.contentWindow
+  emit('iframeLoaded', iframeContent)
+}
+
+watch(
+  () => props.row,
+  (val) => {
+    // console.log('来值了呢')
+    console.log(val)
+    showType.value = props.showType
+    // LiveOptions_out.videoUrl = val.external_monitor_url
+    // LiveOptions_in.videoUrl = val.internal_monitor_url
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <div class="w-full h-full">
+    <LivePlayer
+      class="h-full absolute left-0 right-0 top-0 right-0 m-auto"
+      v-show="showType == 'video' && LiveOptions.videoUrl?.includes('.flv')"
+      ref="OutlivePlayerRef"
+      :options="LiveOptions_out"
+    />
+    <iframe
+      v-if="showType == 'map'"
+      id="virturalDrive_iframe_full"
+      ref="virturalDrive_iframe"
+      src="https://gisdata.t-aaron.com/virturalDrive/VirturalDrive.html"
+      class="w-full h-full"
+      @load="iframeLoaded"
+    ></iframe>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>