远程调试部分内容

src/utils/debugging/remote.ts

@@ -0,0 +1,31 @@
+import { getClient, createConnection, clientPublish, clientSubscribe } from '@/utils/mqtt';
+
+export const debug_mode_openOptions = {
+  canceled: '取消或终止',
+  failed: '失败',
+  in_progress: '执行中',
+  ok: '执行成功',
+  paused: '暂停',
+  rejected: '拒绝',
+  sent: '已下发',
+  timeout: '超时',
+};
+export const cover_stateOptions = { '0': '关闭', '1': '打开', '2': '半开', '3': '舱盖状态异常' };
+export const cover_opensStatus = {
+  canceled: '取消或终止',
+  failed: '失败',
+  in_progress: '执行中',
+  ok: '执行成功',
+  paused: '暂停',
+  rejected: '拒绝',
+  sent: '已下发',
+  timeout: '超时',
+};
+export const servicesTopic = (data) => {
+  // 发送消息
+  clientPublish('thing/product/8UUXN5400A079H/services', data);
+};
+export const services_replyTopic = () => {
+  // 订阅消息
+  clientSubscribe('thing/product/8UUXN5400A079H/services_reply');
+};

src/utils/mqtt.ts

@@ -12,8 +12,8 @@ const connection = {
   clean: true,
   connectTimeout: 30 * 1000, // ms
   reconnectPeriod: 4000, // ms
-  clientId: 'mqttx_' + Math.random().toString(16).substring(2, 8),
-  // clientId: 'mqtt_client_1581F8HGX254V00A0BUY',
+  // clientId: 'mqttx_' + Math.random().toString(16).substring(2, 8),
+  clientId: 'mqtt_client_1581F8HGX254V00A0BUY',
   // auth
   username: 'sdhc',
   password: '',
@@ -48,8 +48,6 @@ const createConnection = () => {
     const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
     client = mqtt.connect(connectUrl, options);
     if (client.on) {
-      //   client.on('reconnect', handleOnReConnect);
-    
     }
   } catch (error) {
     console.log('mqtt.connect error', error);
@@ -74,6 +72,28 @@ const destroyConnection = () => {
     }
   }
 };
+// 订阅事件
+const clientSubscribe = (topic: string, options?: any) => {
+  console.log(client);
+  if (!client || !client.connected) {
+    createConnection();
+  }
+  getClient().subscribe(topic, { qos: 0 }, (error, res) => {
+    console.log('订阅');
+    console.log(error, res);
+  });
+};
+// 发送消息
+const clientPublish = (topic: string, querys: any) => {
+  if (!client || !client.connected) {
+    createConnection();
+  }
+  getClient().publish(topic, JSON.stringify(querys), { qos: 0 }, (err) => {
+    if (err) {
+      console.error('Publish error:', err);
+    }
+  });
+};
 // on 事件
 //   connect 连接
 //   reconnect 重新连接
@@ -90,4 +110,6 @@ export {
   createConnection,
   destroyConnection,
   getClient,
+  clientSubscribe,
+  clientPublish,
 };

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

@@ -1,22 +1,22 @@
 <template>
   <div>
     <div style="width: 100%; height: 100vh">
-      <Map :airRoute="airRoute"></Map>
+      <Map :airRoute="airRoute" />
     </div>
     <SelectComponent @selectChange="changeSelect" />
-    <AirportInformation
+    <!-- <AirportInformation
       @changeLive="changeAirportLive"
       @changeRemote="changeRemote"
-      :airportAllVal="airportAllVal"
-    />
+      :msgData="msgData"
+    /> -->
     <UAVInformation
-      :uavAllVal="uavAllVal"
+      :msgData="msgData"
       @changeLoadControl="changeLoadControl"
       @changeFlightControl="changeFlightControl"
     />
     <!-- 远程调试 -->
     <div v-if="remoteVisible">
-      <RemoteDebugging @changeRemote="changeRemote" />
+      <RemoteDebugging @changeRemote="changeRemote" :msgData="msgData" />
     </div>
     <!-- 负载控制 -->
     <div v-if="loadControlVisible">
@@ -53,14 +53,11 @@
     FlightControl,
   } from './index';
   import { useMessage } from '@/hooks/web/useMessage';
-  import { getClient, createConnection } from '@/utils/mqtt';
+  import { getClient, createConnection, clientSubscribe } from '@/utils/mqtt';
   import { buildGUID } from '@/utils/uuid';
   import { vDrag } from '@/utils/drag';
 
   const { createMessage } = useMessage();
-  const airportAllVal = ref();
-  const uavAllVal = ref();
-
   const airRoute = ref({
     airLineType: null,
     airType: null,
@@ -69,6 +66,9 @@
   });
   onMounted(() => {
     createConnection();
+    setTimeout(() => {
+      changeSelect();
+    }, 1000);
   });
   const changeSelectValue = ref();
   // 机场直播
@@ -76,7 +76,7 @@
   // 无人机直播
   const livePreviewVisible = ref(true);
   // 远程调试
-  const remoteVisible = ref(false);
+  const remoteVisible = ref(true);
   // 负载控制
   const loadControlVisible = ref(false);
   // 飞行控制
@@ -93,36 +93,20 @@
   const changeFlightControl = () => {
     flightControlVisible.value = !flightControlVisible.value;
   };
-  const changeSelect = (value: any) => {
+  const msgData = ref();
+  const changeSelect = async (value?: any) => {
     console.log(value);
     changeSelectValue.value = value;
-    const topic = 'thing/product/8UUXN5400A079H/osd';
-    // const topic = 'thing/product/8UUXN5400A079H/requests';
-    // const topic = 'thing/product/8UUXN5400A079H/events';
-    getClient().subscribe(topic, { qos: 0 }, (error, res) => {
-      if (error) {
-        createConnection();
-        return;
-      }
-      // 开启定时器接收数据
-      const timer = window.setInterval(() => {
-        if (getClient() != null) {
-          // Received
-          getClient().on('message', (topic, message, packet) => {
-            const rs = JSON.parse(message);
-            console.log(rs);
-            airportAllVal.value = rs;
-            if (!rs.data.wind_speed) {
-            } else {
-              // 机场信息
-            }
-            // 无人机信息
-            // uavAllVal.value =
-          });
-        } else {
-          console.log('开启定时器接收数据2');
-        }
-      }, 5000);
+    const topicUrl = 'thing/product/8UUXN5400A079H/osd';
+    // 订阅
+    clientSubscribe(topicUrl, { qos: 0 });
+    // 接收消息
+    getClient().on('message', (topic, message) => {
+      const rs = JSON.parse(message);
+      msgData.value = {
+        topic: topic,
+        message: rs,
+      };
     });
   };
 </script>

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

@@ -78,7 +78,7 @@
 
   const emits = defineEmits(['changeLive', 'changeRemote']);
   const props = defineProps({
-    airportAllVal: Object,
+    msgData: Object,
   });
   console.log(props);
   const airportVal: any = ref({
@@ -97,11 +97,13 @@
   });
   const time = ref(timestampToFormattedDate(new Date().getTime()));
   watch(
-    () => props.airportAllVal,
+    () => props.msgData,
     (val) => {
-      console.log(val);
-      airportVal.value = val.data;
-      time.value = timestampToFormattedDate(val.timestamp);
+      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
+        // console.log(val);
+        airportVal.value = val.message.data;
+        time.value = timestampToFormattedDate(val.message.timestamp);
+      }
     },
   );
   onMounted(() => {});

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

@@ -62,7 +62,7 @@
     });
   };
   onMounted(() => {
-    startLiveFun();
+    // startLiveFun();
   });
   // 销毁视频控件
   onBeforeUnmount(() => {

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

@@ -157,7 +157,7 @@
     });
   };
   onMounted(() => {
-    startLiveFun();
+    // startLiveFun();
     // resolutionChange(1);
   });
 </script>

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

@@ -3,7 +3,7 @@
     <div class="title">
       <span>
         远程调试
-        <a-switch v-model:checked="checked" />
+        <a-switch v-model:checked="checked" @change="changeMode" />
       </span>
       <div @click="emits('changeRemote')">
         <CloseOutlined />
@@ -14,10 +14,14 @@
         <div class="item-div">
           <img src="@/assets/images/flightoperation/cover.png" alt="" />
           <div class="item-text">
-            <span>关闭</span>
+            <span>{{
+              cover_stateOptions[airportVal.cover_state]
+                ? cover_stateOptions[airportVal.cover_state]
+                : '关闭'
+            }}</span>
             <i>舱盖</i>
           </div>
-          <a-button>开启</a-button>
+          <a-button @click="servicesRemote('cover_open')">开启</a-button>
         </div>
         <div class="item-div">
           <img src="@/assets/images/flightoperation/push_od.png" alt="" />
@@ -108,34 +112,72 @@
   import { getClient, createConnection } from '@/utils/mqtt';
   import { CloseOutlined } from '@ant-design/icons-vue';
   import { vDrag } from '@/utils/drag';
+  import {
+    servicesTopic,
+    services_replyTopic,
+    cover_opensStatus,
+    cover_stateOptions,
+    debug_mode_openOptions,
+  } from '@/utils/debugging/remote';
+  import { buildGUID } from '@/utils/uuid';
+  import { useMessage } from '@/hooks/web/useMessage';
+
+  const { createMessage } = useMessage();
 
   const emits = defineEmits(['changeRemote']);
   const props = defineProps({
-    airportAllVal: Object,
+    msgData: Object,
   });
   console.log(props);
   const checked = ref(false);
   const airportVal: any = ref({
-    mode_code: 0,
-    wind_speed: 0,
-    environment_temperature: 0,
-    temperature: 0,
-    rainfall: 0,
-    network_state: {
-      rate: 0,
-    },
-    drone_in_dock: 0,
-    drone_charge_state: {
-      capacity_percent: 0,
-    },
+    cover_state: 0,
   });
   watch(
-    () => props.airportAllVal,
+    () => props.msgData,
     (val) => {
-      console.log(val);
-      airportVal.value = val.data;
+      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
+        // console.log(val);
+        airportVal.value.cover_state = val.message.data.cover_state;
+      }
+      if (val.topic == 'thing/product/8UUXN5400A079H/services_reply') {
+        console.log(val);
+        if (val.message.method == 'debug_mode_open') {
+          createMessage.info(debug_mode_openOptions[val.message.data.output.status]);
+        } else if (val.message.method == 'cover_open') {
+          createMessage.info(cover_opensStatus[val.message.data.output.status]);
+        }
+      }
     },
   );
+  const servicesRemote = (method: string) => {
+    const querys = {
+      method,
+      bid: buildGUID(),
+      tid: buildGUID(),
+      timestamp: new Date().getTime(),
+      data: null,
+    };
+    console.log(querys);
+    servicesTopic(querys);
+  };
+  const changeMode = (val) => {
+    console.log(val);
+    const querys = {
+      method: 'debug_mode_open',
+      bid: buildGUID(),
+      tid: buildGUID(),
+      timestamp: new Date().getTime(),
+      data: null,
+    };
+    if (val) {
+      querys.method = 'debug_mode_open';
+    } else {
+      querys.method = 'debug_mode_close';
+    }
+    servicesTopic(querys);
+    services_replyTopic();
+  };
   onMounted(() => {});
 </script>
 <style lang="less" scoped>

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

@@ -3,7 +3,7 @@
     <div class="title">无人机信息：<span>未连接</span></div>
     <div class="content">
       <div class="content-title">
-        2025-06-27 00:00:00
+        {{ time }}
         <span>临近或已接近夜晚</span>
       </div>
       <div class="content-item">
@@ -104,15 +104,16 @@
   import { reactive, ref, watch } from 'vue';
   import { CopyOutlined, EditOutlined } from '@ant-design/icons-vue';
   import { timestampToFormattedDate } from '@/utils/index';
-  import { getClient, createConnection } from '@/utils/mqtt';
+  import { getClient, createConnection, clientPublish, clientSubscribe } from '@/utils/mqtt';
   import { buildGUID } from '@/utils/uuid';
+  import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
 
   // 负载直播测试
-  const loadLiveStreaming = () => {
+  const loadLiveStreaming = async () => {
     const querys = {
-      bid: buildGUID,
+      bid: buildGUID(),
       method: 'live_start_push',
-      tid: buildGUID,
+      tid: buildGUID(),
       timestamp: new Date().getTime(),
       data: {
         url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
@@ -122,37 +123,13 @@
         video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
       },
     };
-    getClient().publish(
-      'thing/product/8UUXN5400A079H/services',
-      JSON.stringify(querys),
-      { qos: 0 },
-      (err) => {
-        if (err) {
-          console.error('Publish error:', err);
-        }
-      },
-    );
-    getClient().subscribe('thing/product/8UUXN5400A079H/services_reply', { qos: 0 }, (err, res) => {
-      console.log('订阅成功', res);
-      // 开启定时器接收数据
-      const timer = window.setInterval(() => {
-        const topic = 'thing/product/8UUXN5400A079H/services_reply';
-        if (getClient() != null) {
-          // Received
-          getClient().on('message', (topic, message, packet) => {
-            const rs = JSON.parse(message);
-            console.log(rs);
-          });
-        } else {
-          console.log('开启定时器接收数据2');
-        }
-      }, 5000);
-    });
+    servicesTopic(querys);
+    services_replyTopic();
   };
 
   const emits = defineEmits(['changeLoadControl', 'changeFlightControl']);
   const props = defineProps({
-    uavAllVal: Object,
+    msgData: Object,
   });
   const data = reactive({
     navigationLight: '关闭',
@@ -163,10 +140,12 @@
   });
   const time = ref(timestampToFormattedDate(new Date().getTime()));
   watch(
-    () => props.uavAllVal,
+    () => props.msgData,
     (val) => {
-      console.log(val);
-      time.value = timestampToFormattedDate(val.timestamp);
+      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
+        // console.log(val);
+        time.value = timestampToFormattedDate(val.message.timestamp);
+      }
     },
   );
 </script>