137 lines
4.3 KiB
Vue
137 lines
4.3 KiB
Vue
<script setup>
|
|
//飞机控制器
|
|
import { ref, defineAsyncComponent, onMounted, watch, toRaw, defineProps, reactive } from 'vue'
|
|
import { useAirPortSocketStore } from '@/stores/airportSocket.js'
|
|
|
|
const airPortSocketStore = useAirPortSocketStore()
|
|
|
|
const emits = defineEmits(['droneCommandExecute'])
|
|
|
|
let items = reactive({
|
|
battery: {
|
|
label: '电池循环次数',
|
|
value: '-',
|
|
},
|
|
version: {
|
|
label: '无人机版本',
|
|
value: '-',
|
|
},
|
|
temperature: {
|
|
label: '电池温度',
|
|
value: '-',
|
|
},
|
|
})
|
|
|
|
//电池百分比
|
|
let precent = ref('-')
|
|
//电池剩余时间
|
|
let lastTime = ref('-')
|
|
|
|
const setCurrentData = (data) => {
|
|
// console.log(data)
|
|
//电池循环次数
|
|
items.battery.value = data ? data.batLoopTimes : '-'
|
|
//电池温度
|
|
items.temperature.value = data ? data.weather.cellTemp : '-'
|
|
|
|
precent.value = data ? Number(data.battery) * 100 : '-'
|
|
lastTime.value = data ? data.allflytime : '-'
|
|
}
|
|
|
|
const droneCommand = async (type) => {
|
|
if (type == 'back') {
|
|
//返航
|
|
emits('droneCommandExecute', '03')
|
|
} else if (type == 'DroneStop') {
|
|
//悬停
|
|
emits('droneCommandExecute', '01')
|
|
}
|
|
}
|
|
|
|
//监听pinia
|
|
airPortSocketStore.$subscribe((mutate, state) => {
|
|
//设置socket的值
|
|
setCurrentData(state.currentAirPort)
|
|
//无人机版本
|
|
items.version.value = state.ceurrentAirPortData.droneVersion
|
|
})
|
|
|
|
onMounted(() => {})
|
|
</script>
|
|
<template>
|
|
<div class="w-[506px] flex flex-row items-center">
|
|
<div class="w-[136px] h-[46px] cursor-pointer relative" @click="droneCommand('back')">
|
|
<img src="@/assets/icons/leftplane.png" alt="" />
|
|
<div class="absolute left-1/3 top-2 text-[#ffffff] text-base flex flex-row items-center">
|
|
<span class="iconfont icon-fanhang text-[#ffffff] text-2xl"></span>
|
|
<span class="ml-1">返航</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a-tooltip
|
|
overlayClassName="blackToolTip"
|
|
placement="top"
|
|
:getPopupContainer="(triggerNode) => triggerNode.parentElement"
|
|
>
|
|
<template #title>
|
|
<!-- <a-menu v-model:selectedKeys="current" :items="items" @select="selectFn"> </a-menu> -->
|
|
<div class="flex flex-col divide-y divide-slate-700">
|
|
<div
|
|
v-for="(item, index) in items"
|
|
:key="index"
|
|
class="w-[200px] py-[20px] bg-[#00000040] flex flex-row justify-between"
|
|
>
|
|
<span>{{ item.label }}</span
|
|
><span>{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around">
|
|
<div
|
|
class="w-[23px] h-[23px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center"
|
|
>
|
|
<span class="iconfont icon-xudianchi text-[#ffffff] text-base"></span>
|
|
</div>
|
|
<span class="text-sm text-[#B4D5FF]">电池电量</span>
|
|
<div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div>
|
|
<span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span>
|
|
</div>
|
|
</a-tooltip>
|
|
<!-- <div class="middlePlane w-[210px] h-[46px] mx-3 flex flex-row items-center justify-around">
|
|
<div
|
|
class="w-[23px] h-[23px] bg-[#ffffff50] rounded-[6px] flex-row items-center justify-center text-center"
|
|
>
|
|
<span class="iconfont icon-xudianchi text-[#ffffff] text-base"></span>
|
|
</div>
|
|
<span class="text-sm text-[#B4D5FF]">电池电量</span>
|
|
<div class="lastTime text-sm font-bold">{{ precent }}%/{{ lastTime }}min</div>
|
|
<span class="iconfont icon-xiashuangjiantou text-[#ffffff50]"></span>
|
|
</div> -->
|
|
|
|
<div class="w-[136px] h-[46px] cursor-pointer relative" @click="droneCommand('DroneStop')">
|
|
<img src="@/assets/icons/rightplane.png" alt="" />
|
|
<div class="absolute right-1/3 top-2 text-[#ffffff] text-base flex flex-row items-center">
|
|
<span class="iconfont icon-zanting text-[#ffffff] text-2xl"></span>
|
|
<span class="ml-1">急停</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.middlePlane {
|
|
background: linear-gradient(270deg, #006ffe, #3ca4fb);
|
|
border-radius: 2px;
|
|
border: 2px solid #75a9d6;
|
|
}
|
|
.lastTime {
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(79, 255, 208, 0.44) 0%,
|
|
rgba(20, 255, 50, 0.44) 98.779296875%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
</style>
|