优化直播逻辑

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

@@ -100,7 +100,7 @@
   });
   const changeSelectValue = ref();
   // 机场直播
-  const airportLiveVisible = ref(true);
+  const airportLiveVisible = ref(false);
   // 无人机直播
   const livePreviewVisible = ref(false);
   // 远程调试

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

@@ -61,19 +61,22 @@
           {{ airportVal.drone_charge_state ? airportVal.drone_charge_state.capacity_percent : 0 }} %
         </div>
       </div>
-      <!-- <div class="content-button">
-        <a-button type="primary" style="background: #3a57e8" @click="emits('changeLive')"
+      <div class="content-button">
+        <a-button
+          type="primary"
+          style="background: #3a57e8; width: 100%"
+          @click="emits('changeLive')"
           >机场直播</a-button
         >
-        <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
+        <!-- <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
           >远程调试</a-button
-        >
-      </div> -->
+        > -->
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, watch, onUnmounted } from 'vue';
   import { getClient, createConnection } from '@/utils/mqtt';
   import { timestampToFormattedDate } from '@/utils/index';
 
@@ -109,6 +112,7 @@
     },
   );
   onMounted(() => {});
+  onUnmounted(() => {});
 </script>
 <style lang="less" scoped>
   .airport-information {

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

@@ -143,6 +143,7 @@
   onBeforeUnmount(() => {
     player.dispose();
     player = null;
+    closeLive();
   });
 </script>
 <style lang="less" scoped>

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

@@ -47,7 +47,7 @@
 </template>
 <script setup lang="ts">
   import { RedoOutlined, ExpandOutlined, PoweroffOutlined } from '@ant-design/icons-vue';
-  import { reactive, onMounted, ref, watch } from 'vue';
+  import { reactive, onMounted, ref, watch, onBeforeUnmount } from 'vue';
   import { buildGUID } from '@/utils/uuid';
   import { getClient, createConnection } from '@/utils/mqtt';
   import {
@@ -281,6 +281,12 @@
     }, 1000);
     // resolutionChange(1);
   });
+  // 销毁视频控件
+  onBeforeUnmount(() => {
+    player.dispose();
+    player = null;
+    closeLive();
+  });
 </script>
 <style lang="less" scoped>
   .live-preview {

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

@@ -215,7 +215,7 @@
 <style lang="less" scoped>
   .airport-information {
     position: absolute;
-    top: 320px;
+    top: 360px;
     left: 0;
     z-index: 999;
     width: 260px;