merge

src/views/demo/workmanagement/workplan/components/airLineList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="container">
-        <div class="title">
-            <LeftOutlined @click="checkAriLine(null)" v-show="props.title=='选择航线'" />  {{props.title}}
+        <div class="title" @click="closeAirLine()">
+            <LeftOutlined  v-show="props.title=='选择航线'" />  {{props.title}}
         </div>
         <div class="filter-container">
             
@@ -188,7 +188,7 @@
     
     import { getAirLineList,uploadXmlFile,deleteAirLine,addAirLine} from '@/api/sys/workplan';
     import { Modal, message } from 'ant-design-vue';
-    const emit = defineEmits(["checkAriLine","createAirLine","previewAirLine"])
+    const emit = defineEmits(["checkAriLine","createAirLine","previewAirLine","closeAirLine"])
 
     const props = defineProps(["title"])
 
@@ -199,6 +199,11 @@
 
     import { XMLParser, XMLBuilder } from 'fast-xml-parser';
 
+    // 关闭航线弹窗
+    const closeAirLine = () => {
+        emit("closeAirLine");
+    }
+
     // 上传文件
     const importAirLineShow = ref(false);
     const fileList = ref([]);
@@ -405,6 +410,7 @@
 .title{
     padding:15px;
     color:#fff;
+    cursor:pointer;
 }
 .filter-container{
     padding:0px 15px;
@@ -436,7 +442,7 @@
     display:flex;
     font-size:14px;
     border-top:1px solid rgba(204, 204, 204, 0.219) ;
-    height: 100%;
+    height: calc( 100% - 120px);
 }
 
 .file-container{

src/views/demo/workmanagement/workplan/components/aircraft.vue

@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <div class="title">
+    <div class="container">
+        <div class="title" @click="closeAirCraft()">
             <div style="flex:1;">
                 <LeftOutlined @click="checkAriLine(null);"/> &nbsp; 选择飞行器
             </div>
@@ -50,12 +50,16 @@
     import {ref,defineEmits} from 'vue'
     import { getUavPageList,getPortList } from '@/api/sys/workplan';
     
-    const emit = defineEmits(["checkAriLine"])
+    const emit = defineEmits(["checkAriLine","closeAirCraft"])
 
     const checkAriLine = (item)=> {
         emit("checkAriLine",item);
     }
 
+    const closeAirCraft = () => {
+        emit("closeAirCraft");
+    }
+
     const ariLineList = ref([])
     
     const pageQuery = ref({
@@ -73,11 +77,19 @@
 
 </script>
 <style scoped>
+.container{
+    width:100%;
+    height:100%;
+    background: #0D0E15;
+    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
+    border-radius: 6px;
+}
 .title{
     padding:15px;
     color:#fff;
     font-size:14px;
     display:flex;
+    cursor:pointer;
 }
 .filter-container{
     padding:0px 15px;
@@ -138,13 +150,15 @@
     flex:1;
 }
 .ari-line{
-    background:#3F4150;
     color:#fff;
     padding:5px 10px;
     margin-bottom:10px;
     position:relative;
     font-size: 13px;
     border-radius: 3px;
+    background: linear-gradient( 132deg, #323D62 0%, #525F83 100%);
+    box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
+    border-radius: 10px;
 }
 
 .ari-line::before{

src/views/demo/workmanagement/workplan/components/createWorkPlan.vue

@@ -39,8 +39,8 @@
     
                             <div class="select-item" v-show="submitForm.airLineId">
                                 <div class="item-name">{{submitForm.taskAirLineName}}</div>
-                                <div class="item-operate">
-                                    <MoreOutlined @click="selectAriLine"/>
+                                <div class="item-operate" @click="selectAriLine">
+                                    <MoreOutlined />
                                 </div>
                             </div>
                         </a-form-item>
@@ -53,8 +53,8 @@
     
                             <div class="select-item" v-show="submitForm.taskDronePort">
                                 <div class="item-name">{{submitForm.taskDronePortName}}</div>
-                                <div class="item-operate">
-                                    <MoreOutlined @click="selectAircraft" />
+                                <div class="item-operate" @click="selectAircraft">
+                                    <MoreOutlined  />
                                 </div>
                             </div>
     
@@ -193,7 +193,7 @@ const labelCol = { span: 24 };
 const wrapperCol = { span: 24 };
 const props = defineProps(["checkedAriLine","checkedDronePort","formData"]);
 
-const visible = ref(true);
+const visible = ref(false);
 
 const handleOk = ()=>{
 
@@ -415,7 +415,7 @@ const togglePopover = (e)=> {
     background: #0D0E15;
     box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
     border-radius: 6px;
-   
+    position:relative;
 }
 .title{
     padding:15px 15px;

src/views/demo/workmanagement/workplan/index.vue

@@ -4,28 +4,47 @@
             <Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
         </div>
 
-        <!-- 工作计划列表 -->
-        <div v-show="planListShow" style="width:360px;position:absolute;top:20px;left:20px;z-index:1;height: calc( 100vh - 144px);overflow-y:hidden;">
-            <planList :planListShow="planListShow" @planDetail="planDetail" @createWorkPlan="toCreateWorkPlan" ></planList>
+        <div  style="position:absolute;top:20px;left:20px;z-index:1;display:flex;gap:15px;">
+            
+            <!-- 工作计划列表 -->
+            <div v-if="planListShow" style="width:360px;height: calc( 100vh - 144px);flex:1;">
+                <planList :planListShow="planListShow" @planDetail="planDetail" @createWorkPlan="toCreateWorkPlan" ></planList>
+            </div>
+
+            <!-- 创建计划 -->
+            <div v-if="workPlanFormShow" style="width:360px;height: calc( 100vh - 144px);flex:1;">
+                <createWorkPlan :formData="formData" @successCreatePlan="successCreatePlan" @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine" :checkedAriLine="checkedAriLine" :checkedDronePort="checkedDronePort"></createWorkPlan>
+            </div>
+
+            <!-- 航线库 -->
+            <div v-if="ariLineShow" style="width:566px;height: calc( 100vh - 144px);flex:1;">
+                <airLineList :title="'选择航线'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine" @closeAirLine="closeAirLine"></airLineList>
+            </div>
+
+            <!-- 设备 -->
+            <div v-if="aircraftShow" style="width:340px;height: calc( 100vh - 144px);flex:1;">
+                <aircraft @checkAriLine="checkDronePort" @closeAirCraft="closeAirCraft" ></aircraft>
+            </div>
+
         </div>
 
         <!-- 创建计划弹窗 -->
-        <div v-if="workPlanFormShow" style="width:380px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
+        <!-- <div v-if="workPlanFormShow" style="width:380px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
             <createWorkPlan :formData="formData" @successCreatePlan="successCreatePlan" @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine" :checkedAriLine="checkedAriLine" :checkedDronePort="checkedDronePort"></createWorkPlan>
-        </div>
+        </div> -->
 
         <!-- 航线库 -->
-        <div v-if="ariLineShow"  style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
+        <!-- <div v-if="ariLineShow"  style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
             <airLineList :title="'选择航线'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
-        </div>
+        </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;">
+        <!-- <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="checkDronePort" ></aircraft>
-        </div>
+        </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;">
+        <div v-if="createAirLineShow" style="width:566px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
             <createAirLine @createAirLine="handlerCreateAirRoute"  @cancle="cancleCreateAirLine"></createAirLine>
         </div>
 
@@ -70,6 +89,16 @@ const selectAriLine = ()=> {
     aircraftShow.value = false;
 }
 
+// 关闭航线库弹窗
+const closeAirLine = ()=>{
+    ariLineShow.value = false;
+}
+
+// 关闭选择设备弹窗
+const closeAirCraft = ()=>{
+    aircraftShow.value = false;
+}
+
 const selectAircraft = ()=>{
     aircraftShow.value = true;
     ariLineShow.value = false;