获取地图位置优化、无人机直播、起飞后展示

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div style="width: 100%; height: 100vh">
-      <Map :airRoute="airRoute" />
+      <Map :airRoute="airRoute" @flyToThere="flyToThere" />
     </div>
     <SelectComponent @selectChange="changeSelect" />
     <AirportInformation
@@ -32,12 +32,12 @@
     </div>
     <!-- 一键起飞表单 -->
     <div v-if="takeOffFormVisible">
-      <TakeOffForm @changeTakeOffForm="changeTakeOffForm" />
+      <TakeOffForm @changeTakeOffForm="changeTakeOffForm" :locationVal="locationVal" />
     </div>
     <!-- 指点飞行表单 -->
 
     <div v-if="flyToFormVisible">
-      <FlyToForm @changeFlyToForm="changeFlyToForm" />
+      <FlyToForm @changeFlyToForm="changeFlyToForm" :locationVal="locationVal" />
     </div>
     <div class="AirportLive" v-if="airportLiveVisible" v-drag>
       <AirportLive :msgData="msgData" />
@@ -79,6 +79,11 @@
     airModel: null,
     name: null,
   });
+  const locationVal: any = ref({});
+  const flyToThere = (e) => {
+    locationVal.value.lat = e._lat;
+    locationVal.value.lng = e._lng;
+  };
   onMounted(() => {
     destroyConnection();
     createConnection();
@@ -93,7 +98,7 @@
   // 机场直播
   const airportLiveVisible = ref(true);
   // 无人机直播
-  const livePreviewVisible = ref(true);
+  const livePreviewVisible = ref(false);
   // 远程调试
   const remoteVisible = ref(false);
   // 负载控制
@@ -127,7 +132,10 @@
   };
   const changeTakeOffForm = () => {
     takeOffFormVisible.value = false;
-    uavLive.value = true;
+    setTimeout(() => {
+      uavLive.value = true;
+      livePreviewVisible.value = true;
+    }, 2000);
   };
   const changeFlyToForm = () => {
     flyToFormVisible.value = false;

src/views/demo/workmanagement/flightoperation/src/FlyToForm.vue

@@ -47,14 +47,6 @@
         >
       </div>
     </div>
-    <a-modal v-model:visible="targetPointVisible" title="目标点" @ok="handleOk">
-      <div>
-        <span style="color: #f2762d">右击选择目标点位置</span>
-        <div style="width: 100%; height: 500px">
-          <Map :airRoute="airRoute" @flyToThere="flyToThere" />
-        </div>
-      </div>
-    </a-modal>
   </div>
 </template>
 <script setup lang="ts">
@@ -70,25 +62,9 @@
   const emits = defineEmits(['changeFlyToForm']);
   const props = defineProps({
     msgData: Object,
+    locationVal: Object,
   });
-  const locationVal: any = ref({});
-  const flyToThere = (e) => {
-    console.log(e);
-    locationVal.value.lat = e._lat;
-    locationVal.value.lng = e._lng;
-  };
-  const handleOk = () => {
-    data.points.latitude = locationVal.value.lat;
-    data.points.longitude = locationVal.value.lng;
-    targetPointVisible.value = false;
-  };
-  const airRoute = ref({
-    airLineType: null,
-    airType: null,
-    airModel: null,
-    name: null,
-  });
-  const targetPointVisible = ref(false);
+
   const data = reactive({
     flight_id: buildGUID(),
     max_speed: 10,
@@ -98,6 +74,17 @@
       height: 115,
     },
   });
+  data.points.latitude = props.locationVal.lat;
+  data.points.longitude = props.locationVal.lng;
+  watch(
+    () => props.locationVal,
+    (val) => {
+      if (val) {
+        data.points.latitude = val.lat;
+        data.points.longitude = val.lng;
+      }
+    },
+  );
   const takeOff = () => {
     const querys = {
       bid: buildGUID(),

src/views/demo/workmanagement/flightoperation/src/TakeOffForm.vue

@@ -14,7 +14,6 @@
           <EnvironmentOutlined
             :style="{ fontSize: '20px', color: '#3a57e8' }"
             title="选择目标点位置"
-            @click="targetPointVisible = true"
           />
         </div>
       </div>
@@ -25,7 +24,6 @@
           <EnvironmentOutlined
             :style="{ fontSize: '20px', color: '#3a57e8' }"
             title="选择目标点位置"
-            @click="targetPointVisible = true"
           />
         </div>
       </div>
@@ -96,14 +94,6 @@
         >
       </div>
     </div>
-    <a-modal v-model:visible="targetPointVisible" title="目标点" @ok="handleOk">
-      <div>
-        <span style="color: #f2762d">右击选择目标点位置</span>
-        <div style="width: 100%; height: 500px">
-          <Map :airRoute="airRoute" @flyToThere="flyToThere" />
-        </div>
-      </div>
-    </a-modal>
   </div>
 </template>
 <script setup lang="ts">
@@ -120,25 +110,8 @@
   const emits = defineEmits(['changeTakeOffForm']);
   const props = defineProps({
     msgData: Object,
+    locationVal: Object,
   });
-  const locationVal: any = ref({});
-  const flyToThere = (e) => {
-    console.log(e);
-    locationVal.value.lat = e._lat;
-    locationVal.value.lng = e._lng;
-  };
-  const handleOk = () => {
-    data.target_latitude = locationVal.value.lat;
-    data.target_longitude = locationVal.value.lng;
-    targetPointVisible.value = false;
-  };
-  const airRoute = ref({
-    airLineType: null,
-    airType: null,
-    airModel: null,
-    name: null,
-  });
-  const targetPointVisible = ref(false);
   const data = reactive({
     flight_id: uuid(14, 14),
     target_latitude: 35.134615,
@@ -214,6 +187,17 @@
       }
     },
   );
+  data.target_latitude = props.locationVal.lat;
+  data.target_longitude = props.locationVal.lng;
+  watch(
+    () => props.locationVal,
+    (val) => {
+      if (val) {
+        data.target_latitude = val.lat;
+        data.target_longitude = val.lng;
+      }
+    },
+  );
   const takeOff = () => {
     const querys = {
       bid: buildGUID(),