272 lines
8.1 KiB
Vue
272 lines
8.1 KiB
Vue
<script setup>
|
|
//飞行中
|
|
import {
|
|
ref,
|
|
h,
|
|
defineEmits,
|
|
defineAsyncComponent,
|
|
onMounted,
|
|
watch,
|
|
toRaw,
|
|
defineProps,
|
|
reactive,
|
|
} from 'vue'
|
|
import { useAirPortSocketStore } from '@/stores/airportSocket.js'
|
|
|
|
const emits = defineEmits(['switchView'])
|
|
|
|
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(1) //1-舱外视频 2-舱内视频 3-无人机视频
|
|
let littleViewModeName = ref('舱外画面')
|
|
let planeStateList = ref([
|
|
{
|
|
id: 1,
|
|
key: 'vspeed',
|
|
name: '爬升速度',
|
|
icon: 'icon-shangshengxiajiang',
|
|
value: '-',
|
|
touch: false,
|
|
content: '爬升<br>速度',
|
|
unit: '/s',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '平飞速度',
|
|
icon: 'icon-jiantouzuoyou',
|
|
value: '-',
|
|
touch: false,
|
|
content: '平飞<br>速度',
|
|
unit: '/s',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '距离机场',
|
|
icon: 'icon-H',
|
|
value: '-',
|
|
touch: false,
|
|
content: '距离<br>机场',
|
|
unit: 'm',
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '海拔高度',
|
|
icon: 'icon-tiedijuli',
|
|
value: '-',
|
|
touch: false,
|
|
content: '海拔<br>高度',
|
|
unit: 'm',
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '无人机俯仰角',
|
|
icon: 'icon-flight-takeoff-line',
|
|
value: '-',
|
|
touch: false,
|
|
content: '无人机<br>俯仰角',
|
|
unit: '°',
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '无人机偏航角',
|
|
icon: 'icon-feihangqipianhangjiao',
|
|
value: '-',
|
|
content: '无人机<br>偏航角',
|
|
touch: false,
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '云台俯仰角',
|
|
icon: 'icon-pianhangjiao-1',
|
|
value: '-',
|
|
content: '云台<br>俯仰角',
|
|
touch: false,
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '云台偏航角',
|
|
icon: 'icon-pianhangjiao-1',
|
|
value: '-',
|
|
content: '云台<br>偏航角',
|
|
touch: false,
|
|
},
|
|
])
|
|
let selectedAirPort = ref(1)
|
|
|
|
//切换显示模式
|
|
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 = '舱外画面'
|
|
break
|
|
case 2:
|
|
littleViewModeName.value = '舱内画面'
|
|
break
|
|
case 3:
|
|
littleViewModeName.value = '无人机画面'
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
}
|
|
//切换视频位置
|
|
const siwtchVideoPosFn = () => {}
|
|
|
|
//监听pinia
|
|
airPortSocketStore.$subscribe((mutate, state) => {
|
|
console.log(state.currentAirPort)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full flex flex-row relative">
|
|
<div class="leftPlane flex flex-row w-1/4 h-full py-3 px-2.5">
|
|
<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] opacity-30 text-[11px]"
|
|
:class="viewMode == 1 ? 'opacity-100' : 'opacity-30'"
|
|
>
|
|
常规
|
|
</p>
|
|
</div>
|
|
<div
|
|
@click="switchView(2)"
|
|
class="size-12 rounded border border-[#BFBFBF] 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"></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"
|
|
>
|
|
<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">
|
|
<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="@/assets/icons/state1.png" 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>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|