第二次改版
This commit is contained in:
parent
e16b2c2ef0
commit
dfb1928d62
|
|
@ -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 in_showLive = ref(false)
|
||||
//无人机视角
|
||||
let plane_showLive = ref(false)
|
||||
//gismap
|
||||
let showIframeMap = ref(false)
|
||||
// //舱外视角
|
||||
// let out_showLive = ref(false)
|
||||
// //舱内视角
|
||||
// let in_showLive = ref(false)
|
||||
// //无人机视角
|
||||
// let plane_showLive = ref(false)
|
||||
// //gismap
|
||||
// let showIframeMap = ref(false)
|
||||
|
||||
let outVideo_teleport = ref('#out_small_video_area')
|
||||
let inVideo_teleport = ref('#in_small_video_area')
|
||||
let planeVideo_teleport = ref('#plane_small_video_area')
|
||||
let map_teleport = ref('#big_area')
|
||||
// let outVideo_teleport = ref('#out_small_video_area')
|
||||
// let inVideo_teleport = ref('#in_small_video_area')
|
||||
// let planeVideo_teleport = ref('#plane_small_video_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 = () => {
|
||||
let iframeItem = virturalDrive_iframe_full.value
|
||||
let iframeContent = iframeItem.contentWindow
|
||||
const iframeLoaded = (iframeContent) => {
|
||||
// let iframeItem = virturalDrive_iframe_full.value
|
||||
// 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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue