<template>
|
<div class="drone-pilot-list-warp">
|
<van-nav-bar
|
title="机场/遥控器"
|
left-arrow
|
@click-left="onClickLogin"
|
/>
|
<div class="drone-pilot-list">
|
<template v-if="droneOrPilotTxt == 'drone'">
|
<div class="box-info" v-for="item in cardList" :key="item.sn">
|
<div class="info-title" @touchstart="infoClick(item)">
|
<div class="nike-name">{{ item.name }}</div>
|
<div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
|
</div>
|
<div class="info-contain"></div>
|
</div>
|
</template>
|
<template v-if="droneOrPilotTxt == 'pilot'">
|
<div class="box-info" v-for="item in ykqList" :key="item.sn">
|
<div class="info-title" @touchstart="infoClick(item)">
|
<div class="nike-name">{{ item.name }}</div>
|
<div :class="item.isOnline?'line-status':'not-line-status'">{{ item.isOnline?'在线':'不在线' }}</div>
|
</div>
|
<div class="info-contain"></div>
|
</div>
|
</template>
|
</div>
|
<div class="drone-pilot-btns">
|
<div class="drone-pilot" @click="dronePilotClick(false, 'drone')" :class="{ active:!droneOrPilot }">机场</div>
|
<div class="drone-pilot" @click="dronePilotClick(true, 'pilot')" :class="{ active:droneOrPilot }">遥控器</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onUnmounted, reactive } from 'vue'
|
import { projectCard } from './components/data'
|
import { getDroneData, getDroneDataYkq } from '@/api/manage'
|
import { getRoot } from '../../root'
|
import { ERouterName } from '@/types'
|
import { useMyStore } from '@/store'
|
// import VConsole from 'vconsole';
|
|
const root = getRoot()
|
|
const store = useMyStore()
|
|
// 机场和遥控器切换
|
const droneOrPilot = ref<Boolean>(false)
|
let droneOrPilotTxt = ref<String>('drone')
|
// 机场列表
|
const cardList = ref<projectCard[]>([])
|
|
// 遥控器列表
|
const ykqList = ref<projectCard[]>([])
|
|
// 机场和遥控器切换
|
const dronePilotClick = (value:Boolean,type:String) => {
|
droneOrPilot.value = value
|
droneOrPilotTxt.value = type
|
}
|
// 存储设备值
|
let osdVisible = reactive<any>({})
|
|
// const vConsole = new VConsole();
|
|
// 点击信息详情
|
const infoClick = (data:any) => {
|
// 存储设备信息
|
if (data.isOnline) { // 在线才有主要信息
|
window.localStorage.setItem('sbInfo', JSON.stringify(data));
|
osdVisible.sn = data.children.device_sn || ''
|
osdVisible.callsign = data.children.nickname || '--'
|
osdVisible.model = data.children.device_name || ''
|
osdVisible.visible = true
|
osdVisible.gateway_sn = data.children.device_sn || ''
|
osdVisible.is_dock = true
|
osdVisible.gateway_callsign = data.children.nickname || '--'
|
osdVisible.payloads = data.children.payloads_list || []
|
osdVisible.device_domain = data.children.domain || 0
|
osdVisible.device_sub_type = data.children.sub_type || 1
|
osdVisible.device_type = data.children.type || 0
|
// osdVisible.domain = data.children.domain || 0
|
// 前端自己加的判断
|
window.sessionStorage.setItem('domain', JSON.stringify(droneOrPilotTxt.value == 'drone'? 0 : 2));
|
store.commit('SET_OSD_VISIBLE_INFO', osdVisible)
|
// 存储机场信息
|
store.commit('SET_AIRPORT_INFO', data)
|
// 跳转操作屏幕
|
root.$router.push({ path:ERouterName.DRONEPILOTDETAILS })
|
}
|
}
|
|
let intervalId = null;
|
|
// 获取机场列表信息
|
const init = async () => {
|
await getDroneData().then((res:any) => {
|
if (res.code != 200) return
|
// 获取列表数据
|
cardList.value = res.data
|
})
|
|
// 获取飞行器的
|
await getDroneDataYkq().then((res:any) => {
|
if (res.code != 200) return
|
// 遥控器列表
|
ykqList.value = res.data
|
})
|
|
}
|
|
const onClickLogin = () => {
|
history.back();
|
}
|
|
onMounted(() => {
|
init()
|
// 设置定时器，每隔 3 秒刷新一次数据
|
intervalId = setInterval(init, 3000);
|
});
|
onUnmounted(() => {
|
// 组件卸载时清除定时器
|
if (intervalId) {
|
clearInterval(intervalId);
|
}
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.drone-pilot-list-warp {
|
width: 100%;
|
height: 100vh;
|
background-color: #b8b3b338;
|
// background-image: url('@/assets/images/newcon_box.png');
|
.drone-pilot-list {
|
height: calc(100vh - 50px - 46px);
|
overflow: auto;
|
.box-info {
|
background-color: #fff;
|
margin: 2%;
|
border-bottom: 1px solid #fff;
|
.info-title {
|
display: flex;
|
justify-content: space-between;
|
padding: 2%;
|
.nike-name {
|
color: #000;
|
font-weight: 300;
|
}
|
.line-status {
|
padding: 3px;
|
border: 1px solid #409eff;
|
border-radius: 4px;
|
font-size: 11px;
|
color: #409eff;
|
}
|
.not-line-status {
|
padding: 3px;
|
border: 1px solid #999;
|
border-radius: 4px;
|
font-size: 11px;
|
color: #999;
|
}
|
}
|
}
|
}
|
.drone-pilot-btns {
|
position: fixed;
|
bottom: 0;
|
background-color: #fff;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 50px;
|
border: 1px solid #eee;
|
.drone-pilot {
|
width: 50%;
|
height: 50px;
|
line-height: 50px;
|
align-content: center;
|
text-align: center;
|
color: #000;
|
}
|
.active {
|
background-color: #409eff;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
