62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<div class="device-page">
|
|
<a-tabs v-model:activeKey="activeKey" class="device-tabs">
|
|
<a-tab-pane key="airport" tab="机场">
|
|
<Airport :connected="connected" :projectList="projectList"/>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="aerocraft" tab="飞行器">
|
|
<Aerocraft :projectList="projectList"/>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from "vue"
|
|
import Airport from './Airport/index.vue'
|
|
import Aerocraft from './Aerocraft/index.vue'
|
|
import { GetWorkspaceList } from '@/api/demo/projecthome'
|
|
import { getConnectStatus,createConnection,destroyConnection } from '@/utils/mqtt'
|
|
|
|
onMounted(() => {
|
|
if(!getConnectStatus()){
|
|
console.log("需要重连")
|
|
createConnection(changeConnect)
|
|
connectMQTT.value = true
|
|
}else{
|
|
changeConnect()
|
|
}
|
|
GetWorkspaceList().then(res => {
|
|
projectList.value = res.map(item => {
|
|
return {
|
|
label: item.WorkspaceName,
|
|
value: item.Id,
|
|
}
|
|
})
|
|
})
|
|
})
|
|
onBeforeUnmount(() => {
|
|
if(connectMQTT.value){
|
|
destroyConnection()
|
|
}
|
|
})
|
|
const changeConnect = () => {
|
|
connected.value = true
|
|
}
|
|
const activeKey = ref('airport')
|
|
const projectList = ref([])
|
|
const connectMQTT = ref(false)
|
|
const connected = ref(false)
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.device-page{
|
|
.device-tabs{
|
|
:deep(.ant-tabs-nav-wrap){
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|