100 lines
3.3 KiB
Vue
100 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div style="width:100%;height: calc( 100vh - 80px);" >
|
|
<Map :airRoute="airRoute"></Map>
|
|
</div>
|
|
|
|
<!-- 工作计划列表 -->
|
|
<div v-show="planListShow" style="width:360px;background:#0d0e15c1 ;position:absolute;top:0px;left:0px;z-index:1;height: calc( 100vh - 104px);overflow-y:hidden;">
|
|
<planList @createWorkPlan="toCreateWorkPlan" ></planList>
|
|
</div>
|
|
|
|
<!-- 创建计划弹窗 -->
|
|
<div v-if="workPlanFormShow" style="width:380px;background:#0d0e15ce ;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
|
<createWorkPlan @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine"></createWorkPlan>
|
|
</div>
|
|
|
|
<!-- 航线库 -->
|
|
<div v-if="ariLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
|
<airLineList @checkAriLine="checkAriLine" @createAirLine="handlerCreateAirLine"></airLineList>
|
|
</div>
|
|
|
|
<!-- 飞行器 -->
|
|
<div v-if="aircraftShow" style="width:340px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
|
<aircraft @checkAriLine="checkAriLine" ></aircraft>
|
|
</div>
|
|
|
|
<!-- 新建航线 -->
|
|
<div v-if="createAirLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
|
<createAirLine @createAirLine="handlerCreateAirRoute" @cancle="cancleCreateAirLine"></createAirLine>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue';
|
|
import planList from './components/planList.vue';
|
|
import airLineList from './components/airLineList.vue';
|
|
import aircraft from './components/aircraft.vue';
|
|
import createWorkPlan from './components/createWorkPlan.vue';
|
|
import createAirLine from './components/createAirLine.vue'
|
|
import Map from './components/map.vue'
|
|
import AirPolygon from './components/airPolygon.vue';
|
|
|
|
const airRoute = ref({})
|
|
|
|
const planListShow = ref(true);
|
|
const workPlanFormShow = ref(false);
|
|
const ariLineShow = ref(false);
|
|
const aircraftShow = ref(false);
|
|
const createAirLineShow = ref(false);
|
|
|
|
const selectAriLine = ()=> {
|
|
ariLineShow.value = true;
|
|
aircraftShow.value = false;
|
|
}
|
|
|
|
const selectAircraft = ()=>{
|
|
aircraftShow.value = true;
|
|
ariLineShow.value = false;
|
|
}
|
|
|
|
const cancleCraete = ()=>{
|
|
workPlanFormShow.value = false;
|
|
ariLineShow.value = false;
|
|
aircraftShow.value = false;
|
|
planListShow.value = true;
|
|
}
|
|
const checkAriLine = (item)=>{
|
|
if(item){
|
|
ariLineShow.value = false;
|
|
|
|
}
|
|
}
|
|
|
|
const toCreateWorkPlan = ()=> {
|
|
planListShow.value = false;
|
|
workPlanFormShow.value = true;
|
|
}
|
|
|
|
// 创建航线
|
|
const handlerCreateAirLine = ()=>{
|
|
createAirLineShow.value = true;
|
|
}
|
|
|
|
const cancleCreateAirLine = ()=>{
|
|
createAirLineShow.value = false;
|
|
}
|
|
|
|
const handlerCreateAirRoute = (info)=>{
|
|
workPlanFormShow.value = false;
|
|
ariLineShow.value = false;
|
|
aircraftShow.value = false;
|
|
planListShow.value = false;
|
|
createAirLineShow.value = false;
|
|
airRoute.value = info
|
|
}
|
|
</script>
|