351 lines
11 KiB
Vue
351 lines
11 KiB
Vue
<script setup>
|
|
//飞行中
|
|
import {
|
|
ref,
|
|
h,
|
|
defineEmits,
|
|
defineAsyncComponent,
|
|
onMounted,
|
|
watch,
|
|
toRaw,
|
|
defineProps,
|
|
reactive,
|
|
} from 'vue'
|
|
import { useAirPortSocketStore } from '@/stores/airportSocket.js'
|
|
const ScreenComp = defineAsyncComponent(() => import('@/views/carbin/toolComp/screen.vue'))
|
|
|
|
const props = defineProps({
|
|
big_area_showType: String,
|
|
})
|
|
|
|
const emits = defineEmits(['switchView', 'switchScreenVideo'])
|
|
|
|
const airPortSocketStore = useAirPortSocketStore()
|
|
let size1Img = ref(new URL(`@/assets/icons/size1active.png`, import.meta.url).href)
|
|
let size2Img = ref(new URL(`@/assets/icons/size2.png`, import.meta.url).href)
|
|
let viewMode = ref(1) //1-1/4方式 2-对半方式
|
|
let littleViewMode = ref(2) //1-舱外视频 2-舱内视频 3-无人机视频
|
|
let littleViewModeName = ref('舱内画面')
|
|
|
|
import img_default from '@/assets/icons/state1.png'
|
|
import img_touch from '@/assets/icons/state2.png'
|
|
|
|
//飞机高度
|
|
let planeAlt = 0
|
|
//已修改过小窗的视频类型
|
|
let isModifedSmallScreen = ref(false)
|
|
let planeStateList = reactive({
|
|
vspeed: {
|
|
id: 1,
|
|
key: 'vspeed',
|
|
name: '爬升速度',
|
|
icon: 'icon-shangshengxiajiang',
|
|
value: '0',
|
|
touch: false,
|
|
content: '爬升<br>速度',
|
|
unit: '/s',
|
|
},
|
|
hspeed: {
|
|
id: 2,
|
|
name: '平飞速度',
|
|
icon: 'icon-jiantouzuoyou',
|
|
value: '0',
|
|
touch: false,
|
|
content: '平飞<br>速度',
|
|
unit: '/s',
|
|
},
|
|
distToHome: {
|
|
id: 3,
|
|
name: '距离机场',
|
|
icon: 'icon-H',
|
|
value: '0',
|
|
touch: false,
|
|
content: '距离<br>机场',
|
|
unit: 'm',
|
|
},
|
|
altitude: {
|
|
id: 4,
|
|
name: '海拔高度',
|
|
icon: 'icon-tiedijuli',
|
|
value: '0',
|
|
touch: false,
|
|
content: '海拔<br>高度',
|
|
unit: 'm',
|
|
},
|
|
pitch: {
|
|
id: 5,
|
|
name: '无人机俯仰角',
|
|
icon: 'icon-flight-takeoff-line',
|
|
value: '0',
|
|
touch: false,
|
|
content: '无人机<br>俯仰角',
|
|
unit: '°',
|
|
},
|
|
yaw: {
|
|
id: 6,
|
|
name: '无人机偏航角',
|
|
icon: 'icon-feihangqipianhangjiao',
|
|
value: '0',
|
|
content: '无人机<br>偏航角',
|
|
touch: false,
|
|
unit: '°',
|
|
},
|
|
camerapitch: {
|
|
id: 7,
|
|
name: '云台俯仰角',
|
|
icon: 'icon-pianhangjiao-1',
|
|
value: '0',
|
|
content: '云台<br>俯仰角',
|
|
touch: false,
|
|
unit: '°',
|
|
},
|
|
camerayaw: {
|
|
id: 8,
|
|
name: '云台偏航角',
|
|
icon: 'icon-pianhangjiao-1',
|
|
value: '0',
|
|
content: '云台<br>偏航角',
|
|
touch: false,
|
|
unit: '°',
|
|
},
|
|
})
|
|
let selectedAirPort = ref(1)
|
|
//飞前是舱内 飞中是舱外
|
|
let small_area_showType = ref('video_in')
|
|
|
|
//切换显示模式
|
|
const switchView = (viewtype) => {
|
|
if (viewtype == 1) {
|
|
size1Img.value = new URL(`@/assets/icons/size1active.png`, import.meta.url).href
|
|
size2Img.value = new URL(`@/assets/icons/size2.png`, import.meta.url).href
|
|
emits('switchView', 1)
|
|
} else if (viewtype == 2) {
|
|
size1Img.value = new URL(`@/assets/icons/size1.png`, import.meta.url).href
|
|
size2Img.value = new URL(`@/assets/icons/size2active.png`, import.meta.url).href
|
|
emits('switchView', 2)
|
|
}
|
|
viewMode.value = viewtype
|
|
}
|
|
//切换直播视角
|
|
const switchPlaneVideo = (viewtype) => {
|
|
littleViewMode.value = viewtype
|
|
switch (viewtype) {
|
|
case 1:
|
|
littleViewModeName.value = '舱外画面'
|
|
small_area_showType.value = 'video_out'
|
|
break
|
|
case 2:
|
|
littleViewModeName.value = '舱内画面'
|
|
small_area_showType.value = 'video_in'
|
|
break
|
|
case 3:
|
|
littleViewModeName.value = '无人机画面'
|
|
small_area_showType.value = 'video_plane'
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
//切换小窗/大窗
|
|
const switch_screen_fn = () => {
|
|
let current_small_area_showType = toRaw(small_area_showType.value)
|
|
if (props.big_area_showType == 'video_out') {
|
|
littleViewModeName.value = '舱外画面'
|
|
littleViewMode.value = 1
|
|
} else if (props.big_area_showType == 'video_in') {
|
|
littleViewModeName.value = '舱内画面'
|
|
littleViewMode.value = 2
|
|
} else if (props.big_area_showType == 'video_plane') {
|
|
littleViewModeName.value = '无人机画面'
|
|
littleViewMode.value = 3
|
|
}
|
|
small_area_showType.value = props.big_area_showType
|
|
|
|
emits('switchScreenVideo', current_small_area_showType)
|
|
// if(small_area_showType.value=='')
|
|
}
|
|
|
|
//设置socket的值
|
|
const setCurrentData = (data) => {
|
|
// console.log(data)
|
|
// console.log(data.alt)
|
|
|
|
if (data.alt > 0 && !isModifedSmallScreen) {
|
|
//飞行中
|
|
littleViewMode.value = 1
|
|
littleViewModeName.value = '舱外画面'
|
|
small_area_showType.value = 'video_in'
|
|
//不允许再修改了
|
|
isModifedSmallScreen.value = true
|
|
}
|
|
|
|
//飞机高度
|
|
// planeAlt = data.alt ? data.alt : 0
|
|
//爬升速度
|
|
planeStateList.vspeed.value = Number(data.vspeed) ? parseInt(data.vspeed, 10) : '0'
|
|
//平飞速度
|
|
planeStateList.hspeed.value = Number(data.hspeed) ? parseInt(data.hspeed, 10) : '0'
|
|
//距离机场
|
|
planeStateList.distToHome.value = Number(data.distToHome) ? parseInt(data.distToHome, 10) : '0'
|
|
//海拔高度
|
|
planeStateList.altitude.value = Number(data.altitude) ? parseInt(data.altitude, 10) : '0'
|
|
//无人机俯仰角
|
|
planeStateList.pitch.value = Number(data.pitch) ? parseInt(data.pitch, 10) : '0'
|
|
//无人机偏航角
|
|
planeStateList.yaw.value = Number(data.yaw) ? parseInt(data.yaw, 10) : '0'
|
|
//云台俯仰角
|
|
planeStateList.camerapitch.value = Number(data.camerapitch) ? parseInt(data.camerapitch, 10) : '0'
|
|
//云台偏航角
|
|
planeStateList.camerayaw.value = Number(data.camerayaw) ? parseInt(data.camerayaw, 10) : '0'
|
|
}
|
|
|
|
//切换视频位置
|
|
const siwtchVideoPosFn = () => {}
|
|
|
|
//监听pinia
|
|
airPortSocketStore.$subscribe((mutate, state) => {
|
|
//设置socket的值
|
|
setCurrentData(state.currentAirPort)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full flex flex-row relative">
|
|
<!-- lg:h-c150 xk:h-c150 x1k:h-c212 x2k:h-c282 -->
|
|
<div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5 xk:zoom09 x1k:zoom13 x2k:zoom17">
|
|
<div class="h-full flex flex-col">
|
|
<div
|
|
@click="switchView(1)"
|
|
class="size-12 rounded mb-2 border p-1 cursor-pointer"
|
|
:class="viewMode == 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'"
|
|
>
|
|
<img :src="size1Img" alt="" />
|
|
<p
|
|
class="text-center text-[#ffffff] text-[11px]"
|
|
:class="viewMode == 1 ? 'opacity-100' : 'opacity-30'"
|
|
>
|
|
常规
|
|
</p>
|
|
</div>
|
|
<div
|
|
@click="switchView(2)"
|
|
class="size-12 rounded border p-1 cursor-pointer"
|
|
:class="viewMode != 1 ? 'border-[#006FFE]' : 'border-[#BFBFBF]'"
|
|
>
|
|
<img :src="size2Img" alt="" />
|
|
<p
|
|
class="text-center text-[#ffffff] text-[11px]"
|
|
:class="viewMode != 1 ? 'opacity-100' : 'opacity-30'"
|
|
>
|
|
等比
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
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">
|
|
<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
|
|
class="size-7 p-0.5 rounded-sm cursor-pointer"
|
|
:class="littleViewMode == 1 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
|
|
@click="switchPlaneVideo(1)"
|
|
>
|
|
<div class="w-full h-1"></div>
|
|
<div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
|
|
<span
|
|
class="iconfont icon-cangnei_xianxing text-[24px]/6"
|
|
:class="littleViewMode == 1 ? 'opacity-100' : 'opacity-60'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="size-7 p-0.5 rounded-sm ml-2 cursor-pointer"
|
|
:class="littleViewMode == 2 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
|
|
@click="switchPlaneVideo(2)"
|
|
>
|
|
<div class="w-full h-1"></div>
|
|
<div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
|
|
<span
|
|
class="iconfont icon-shexiangtou text-[18px]/6"
|
|
:class="littleViewMode == 2 ? 'opacity-100' : 'opacity-60'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="size-7 p-0.5 rounded-sm ml-2 cursor-pointer"
|
|
:class="littleViewMode == 3 ? 'bg-[#006FFE]' : 'bg-[#000000]'"
|
|
@click="switchPlaneVideo(3)"
|
|
>
|
|
<div class="w-full h-1"></div>
|
|
<div class="bg-[rgba(255,255,255,0.4)] w-full h-5 text-center text-[#fff]">
|
|
<span
|
|
class="iconfont icon-uav-fill text-[18px]/6"
|
|
:class="littleViewMode == 3 ? 'opacity-100' : 'opacity-60'"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w-[26px] h-[24px] bg-[rgba(25,27,36,0.59)] border border-[#191B24] rounded-sm text-center"
|
|
@click="switch_screen_fn"
|
|
>
|
|
<span
|
|
class="iconfont icon-qiehuan text-[#ffffff] cursor-pointer"
|
|
@click="siwtchVideoPosFn"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="px-1 h-6 rounded-sm absolute left-2 bottom-2.5 bottom-0 bg-[rgba(7,100,217,0.5)] border-[#0764D9] text-[#ffffff] text-[11px]/6 text-center"
|
|
>
|
|
{{ littleViewModeName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右边 -->
|
|
<div class="rightPlane flex flex-row w-3/4 h-full py-3 pr-2.5 xk:zoom11 x1k:zoom14 x2k:zoom19">
|
|
<div class="w-[260px] m-auto">
|
|
<a-row :gutter="[4, 8]" style="height: fit-content">
|
|
<a-col
|
|
class="gutter-row cursor-pointer"
|
|
:span="6"
|
|
v-for="item in planeStateList"
|
|
:key="item"
|
|
>
|
|
<div
|
|
class="w-[54px] h-[60px] bg-[#1D314A] border border-[#394C73] rounded text-center relative"
|
|
:class="selectedAirPort == item.select ? 'blueGradientColor' : ''"
|
|
@mouseover="item.touch = true"
|
|
@mouseout="item.touch = false"
|
|
>
|
|
<img :src="item.touch ? img_touch : img_default" class="w-full h-full" alt="" />
|
|
<span
|
|
v-if="!item.touch"
|
|
:class="
|
|
'iconfont absolute top-1.5 left-0 right-0 m-auto text-lg text-[#ffffff] ' +
|
|
item.icon
|
|
"
|
|
></span>
|
|
<span
|
|
class="iconfont absolute top-0.5 left-0 right-0 m-auto text-xs text-[#ffffff]"
|
|
v-if="item.touch"
|
|
v-html="item.content"
|
|
></span>
|
|
|
|
<span class="absolute bottom-0.5 left-0 right-0 m-auto text-[#ffffff]"
|
|
>{{ item.value }}<span v-if="item.value != '-'">{{ item.unit }}</span></span
|
|
>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|