阶段性代码提交

src/views/carbin/components/flying.vue

@@ -12,6 +12,7 @@ import {
   reactive,
 } from 'vue'
 import { useAirPortSocketStore } from '@/stores/airportSocket.js'
+const ScreenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))
 
 const emits = defineEmits(['switchView'])
 
@@ -94,6 +95,8 @@ let planeStateList = reactive({
   },
 })
 let selectedAirPort = ref(1)
+//飞前是舱内  飞中是舱外
+let small_area_showType = ref('video_in')
 
 //切换显示模式
 const switchView = (viewtype) => {
@@ -190,7 +193,9 @@ airPortSocketStore.$subscribe((mutate, state) => {
         class="w-[250px] aspect-video h-full bg-[#bdbdbd] ml-2.5 px-2 py-1 rounded relative overflow-hidden"
       >
         <!-- 视频播放区域 -->
-        <div id="plane_small_video_area" class="w-full h-full absolute left-0 top-0"></div>
+        <div id="plane_small_video_area" class="w-full h-full absolute left-0 top-0">
+          <ScreenComp :showType="small_area_showType" />
+        </div>
         <div class="px-2 absolute left-0 w-full flex flex-row justify-around items-center">
           <div class="w-full flex flex-row">
             <div

src/views/carbin/index.vue

@@ -2,8 +2,7 @@
 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 screenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))
+const ScreenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))
 
 //1左侧面板-机场视频
 const leftPlaneLiveVideo = defineAsyncComponent(
@@ -32,7 +31,9 @@ let rightPlaneWidth = ref('75%')
 let rightPlaneHeight = ref('100%')
 let rightPlaneBottom = ref('0')
 
+let map_iframeContent = null
 let big_area_showType = ref('map')
+let left_flying_area_showType = ref('map')
 
 let switchType = null
 //实时socket机场数据
@@ -51,7 +52,7 @@ const statusList = reactive({
   2: '飞行中',
   3: '准备中',
 })
-let virturalDrive_iframe_full = ref(null)
+
 let iframeData = null
 
 //修改左侧面板尺寸
@@ -148,7 +149,7 @@ const queryAirPort = async () => {
     currentAirPortInfo.value = res.data[0]
     airPortSocketStore.ceurrentAirPortData = currentAirPortInfo.value
 
-    currentAirPortInfo.value.status = 3
+    // currentAirPortInfo.value.status = 2
 
     //机场当前状态
     if (currentAirPortStatus.value != Number(currentAirPortInfo.value.status)) {
@@ -185,13 +186,9 @@ const socketFn = (workParams) => {
 
 //iframe map加载完成
 const iframeLoaded = (iframeContent) => {
-  // let iframeItem = virturalDrive_iframe_full.value
-  // let iframeContent = iframeItem.contentWindow
-  console.log(iframeContent)
-  let data = JSON.stringify(iframeData)
-  // console.log(data)
-
   setTimeout(() => {
+    let data = JSON.stringify(iframeData)
+    console.log(iframeContent)
     iframeContent.postMessage(data, '*')
   }, 0)
 
@@ -227,11 +224,9 @@ const sendPosToPlane = () => {
       currentPos_height: pathArr[startCount].alt,
     }
 
-    let iframeItem = virturalDrive_iframe_full.value
-    let iframeContent = iframeItem.contentWindow
     let data = JSON.stringify(t)
     // console.log(data)
-    iframeContent.postMessage(data, '*')
+    map_iframeContent.postMessage(data, '*')
 
     startCount++
     setTimeout(() => {
@@ -242,19 +237,26 @@ const sendPosToPlane = () => {
 }
 //给gis发送消息
 const sendGisMessage = (params) => {
-  //params必须是个对象
-  let iframeItem = virturalDrive_iframe_full.value
-  let iframeContent = iframeItem.contentWindow
   let data = JSON.stringify(params)
   console.log(data)
-  iframeContent.postMessage(data, '*')
+  map_iframeContent.postMessage(data, '*')
 }
 
 //重置screen
 const resetScreen = () => {
-  if (currentAirPortStatus.value == 3) {
-    //准备中
+  if (currentAirPortStatus.value == 3 || currentAirPortStatus.value == 2) {
+    //准备中 飞行中
     big_area_showType.value = 'video_out'
+
+    //飞行中
+    if (currentAirPortStatus.value == 2) {
+      rightPlaneHeight.value = 'calc(100% - 150px)'
+      rightPlaneBottom.value = '150px'
+      left_flying_area_showType.value = 'map'
+
+      //飞前是舱外 飞中是无人机视角
+      big_area_showType.value = 'video_out'
+    }
   }
 }
 //右侧面板切换视频
@@ -341,13 +343,15 @@ onMounted(() => {
         <leftPlaneCheck v-if="currentAirPortStatus == 3" :row="currentAirPortInfo" />
 
         <!-- 飞行中 地图 -->
-        <div id="left_flying_map" class="leftPlane-area w-full"></div>
+        <div id="left_flying_map" class="leftPlane-area w-full">
+          <ScreenComp :showType="left_flying_area_showType" @iframeLoaded="iframeLoaded" />
+        </div>
       </div>
       <!-- 右侧面板 -->
       <div class="rightPlane absolute right-0 h-full bg-[#ffffff] z-1">
         <!-- 切换视频按钮 -->
         <rightSwitchVideo
-          v-if="currentAirPortStatus == 2 || currentAirPortStatus == 3"
+          v-if="currentAirPortStatus == 3"
           class="absolute right-3 top-3 z-10"
           @switchVideo="switchRightVideoFn"
         />
@@ -357,14 +361,8 @@ onMounted(() => {
             <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">
-            <screenComp
-              :showType="big_area_showType"
-              :row="currentAirPortSocket"
-              @iframeLoaded="iframeLoaded"
-            />
+            <ScreenComp :showType="big_area_showType" @iframeLoaded="iframeLoaded" />
           </div>
-
-          <!-- <div id="big_area" class="w-full h-full overflow-hidden"></div> -->
         </div>
       </div>
 

src/views/carbin/toolComp/screen.vue

@@ -29,7 +29,7 @@ const LiveOptions = reactive({
   // stretch: true
 })
 
-let showType = ref('') //videio / map
+let showType = ref('video_out') //video / map
 
 //iframe加载完成
 const iframeLoaded = () => {