无人机信息、云台相机控制

src/utils/debugging/events.ts

@@ -0,0 +1,23 @@
+import { clientReizePublish, clientReizeSubscribe } from '@/utils/mqtt';
+
+export const eventsTopic = (data) => {
+  // 发送消息
+  clientReizePublish('thing/product/8UUXN5400A079H/events', data);
+};
+export const events_replyTopic = () => {
+  // 订阅消息
+  clientReizeSubscribe('thing/product/8UUXN5400A079H/events_reply');
+};
+
+export const servicesTopic = (data) => {
+  // 发送消息
+  clientReizePublish('thing/product/8UUXN5400A079H/services', data);
+};
+export const services_replyTopic = () => {
+  // 订阅消息
+  clientReizeSubscribe('thing/product/8UUXN5400A079H/services_reply');
+};
+export const drcDownTopic = (data) => {
+  // 发送消息thing/product/{gateway_sn}/drc/down
+  clientReizePublish('thing/product/8UUXN5400A079H/drc/down', data);
+};

src/utils/mqtt.ts

@@ -18,6 +18,7 @@ const connection = {
   username: 'sdhc',
   password: '',
 };
+
 let client: any = {
   connected: false,
 };
@@ -105,6 +106,51 @@ const clientPublish = (topic: string, querys: any) => {
 // subscribe 事件 订阅
 // unsubscribe 事件 取消订阅
 
+// 抢夺负载权、飞行控制权的时候使用
+const client_seize: any = {
+  connected: false,
+};
+const createSeizeConnection = () => {
+  const seizeConnection = connection;
+  seizeConnection.clientId = 'mqtt_client_1581F8HGX254V00A0BUY_seize';
+  try {
+    const { protocol, host, port, endpoint, ...options } = seizeConnection;
+    const connectUrl = `${protocol}://${host}:${port}${endpoint}`;
+    client_seize = mqtt.connect(connectUrl, options);
+    if (client.on) {
+    }
+  } catch (error) {
+    console.log('mqtt.connect error', error);
+  }
+};
+const getReizeClient = () => {
+  if (!client_seize || !client_seize.connected) {
+    getReizeClient();
+  }
+  return client_seize;
+};
+// 订阅事件
+const clientReizeSubscribe = (topic: string, options?: any) => {
+  console.log(client_seize);
+  if (!client_seize || !client_seize.connected) {
+    createConnection();
+  }
+  getReizeClient().subscribe(topic, { qos: 0 }, (error, res) => {
+    console.log('订阅');
+    console.log(error, res);
+  });
+};
+// 发送消息
+const clientReizePublish = (topic: string, querys: any) => {
+  if (!client_seize || !client_seize.connected) {
+    createConnection();
+  }
+  getReizeClient().publish(topic, JSON.stringify(querys), { qos: 0 }, (err) => {
+    if (err) {
+      console.error('Publish error:', err);
+    }
+  });
+};
 export {
   // 连接
   createConnection,
@@ -112,4 +158,8 @@ export {
   getClient,
   clientSubscribe,
   clientPublish,
+  createSeizeConnection,
+  getReizeClient,
+  clientReizeSubscribe,
+  clientReizePublish,
 };

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

@@ -4,23 +4,23 @@
       <Map :airRoute="airRoute" />
     </div>
     <SelectComponent @selectChange="changeSelect" />
-    <!-- <AirportInformation
+    <AirportInformation
       @changeLive="changeAirportLive"
       @changeRemote="changeRemote"
       :msgData="msgData"
-    /> -->
+    />
     <UAVInformation
       :msgData="msgData"
       @changeLoadControl="changeLoadControl"
       @changeFlightControl="changeFlightControl"
     />
     <!-- 远程调试 -->
-    <div v-if="remoteVisible">
+    <!-- <div v-if="remoteVisible">
       <RemoteDebugging @changeRemote="changeRemote" :msgData="msgData" />
-    </div>
+    </div> -->
     <!-- 负载控制 -->
     <div v-if="loadControlVisible">
-      <LoadControl @changeLoadControl="changeLoadControl" />
+      <LoadControl @changeLoadControl="changeLoadControl" :msgData="msgData" />
     </div>
     <!-- 飞行控制 -->
     <div v-if="flightControlVisible">
@@ -76,7 +76,7 @@
   // 无人机直播
   const livePreviewVisible = ref(true);
   // 远程调试
-  const remoteVisible = ref(true);
+  const remoteVisible = ref(false);
   // 负载控制
   const loadControlVisible = ref(false);
   // 飞行控制
@@ -103,10 +103,12 @@
     // 接收消息
     getClient().on('message', (topic, message) => {
       const rs = JSON.parse(message);
-      msgData.value = {
-        topic: topic,
-        message: rs,
-      };
+      if (rs) {
+        msgData.value = {
+          topic: topic,
+          message: rs,
+        };
+      }
     });
   };
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="airport-information" v-if="airportVal">
     <div class="title"
-      >机场信息：<span>
+      >机场信息：<span v-if="airportVal.mode_code">
         <template v-if="airportVal.mode_code == 0">作业准备中</template>
         <template v-else-if="airportVal.mode_code == 1">飞行作业中</template>
         <template v-else-if="airportVal.mode_code == 2">作业后状态恢复</template>
@@ -10,8 +10,9 @@
         <template v-else-if="airportVal.mode_code == 5">任务空闲</template>
         <template v-else-if="airportVal.mode_code == 255">飞行器异常</template>
         <template v-else-if="airportVal.mode_code == 256">未知状态</template>
-      </span></div
-    >
+      </span>
+      <span v-else>未知状态</span>
+    </div>
     <div class="content">
       <div class="content-title">
         {{ time }}
@@ -46,7 +47,7 @@
       <div class="content-item">
         <div class="item-div">
           <img src="@/assets/images/flightoperation/rate.png" alt="" />
-          {{ airportVal.network_state.rate }}KB/s
+          {{ airportVal.network_state ? airportVal.network_state.rate : '0' }}KB/s
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
         <div class="item-div">
@@ -57,17 +58,17 @@
       <div class="content-item">
         <div class="item-div">
           <img src="@/assets/images/flightoperation/voltage.png" alt="" />
-          {{ airportVal.drone_charge_state.capacity_percent }} %
+          {{ airportVal.drone_charge_state ? airportVal.drone_charge_state.capacity_percent : 0 }} %
         </div>
       </div>
-      <div class="content-button">
+      <!-- <div class="content-button">
         <a-button type="primary" style="background: #3a57e8" @click="emits('changeLive')"
           >机场直播</a-button
         >
         <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
           >远程调试</a-button
         >
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
@@ -99,7 +100,8 @@
   watch(
     () => props.msgData,
     (val) => {
-      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
+      // network_state网络状态
+      if (val.topic == 'thing/product/8UUXN5400A079H/osd' && val.message.data.network_state) {
         // console.log(val);
         airportVal.value = val.message.data;
         time.value = timestampToFormattedDate(val.message.timestamp);

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

@@ -8,11 +8,10 @@
     </div>
     <div class="content">
       <div class="content-button">
-        <a-button>抢夺负载控制</a-button>
-        <a-button>进入指令飞行</a-button>
-        <a-button>退出指令飞行</a-button>
+        <a-button>获取飞行器控制器</a-button>
         <a-button>一键起飞</a-button>
-        <a-button>飞向目标点</a-button>
+        <a-button>指点飞行</a-button>
+        <a-button>智能环绕</a-button>
         <a-button>一键返航</a-button>
       </div>
       <div class="content-info">

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

@@ -1,46 +1,54 @@
 <template>
   <div class="remote-debugging" v-if="airportVal" v-drag>
     <div class="title">
-      <span> 负载控制 </span>
+      <span> 云台相机控制 </span>
       <div @click="emits('changeLoadControl')">
         <CloseOutlined />
       </div>
     </div>
     <div class="content">
       <div class="content-item">
-        <span>负载控制</span>
-        <a-button>抢夺负载控制</a-button>
+        <span>相机控制权</span>
+        <a-button @click="obtain">获取</a-button>
       </div>
-      <div class="content-item">
+      <!-- <div class="content-item">
         <span>切换相机模式</span>
         <a-button>抢夺负载控制</a-button>
-      </div>
+      </div> -->
       <div class="content-item">
         <span>拍照</span>
-        <a-button>单拍</a-button>
+        <a-button @click="singleShot">单拍</a-button>
       </div>
       <div class="direction-controller">
         <img src="@/assets/images/flightoperation/direction_controller.png" alt="" />
-        <div class="direction-controller-top"></div>
-        <div class="direction-controller-right"></div>
-        <div class="direction-controller-bottom"></div>
-        <div class="direction-controller-left"></div>
+        <div class="direction-controller-top" @click="changeDrc('top')"></div>
+        <div class="direction-controller-right" @click="changeDrc('right')"></div>
+        <div class="direction-controller-bottom" @click="changeDrc('bottom')"></div>
+        <div class="direction-controller-left" @click="changeDrc('left')"></div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, ref, watch } from 'vue';
-  import { getClient, createConnection } from '@/utils/mqtt';
+  import { onMounted, ref, watch, reactive } from 'vue';
+  import { getReizeClient, createSeizeConnection, clientReizePublish } from '@/utils/mqtt';
   import { CloseOutlined } from '@ant-design/icons-vue';
   import { vDrag } from '@/utils/drag';
+  import { buildGUID } from '@/utils/uuid';
+  import { eventsTopic, events_replyTopic, drcDownTopic } from '@/utils/debugging/events';
 
   const emits = defineEmits(['changeLoadControl']);
   const props = defineProps({
-    airportAllVal: Object,
+    msgData: Object,
   });
   console.log(props);
-  const checked = ref(false);
+  const drcVal = reactive({
+    roll: 1024,
+    pitch: 1024,
+    throttle: 1024,
+    yaw: 1024,
+    gimbal_pitch: 1024,
+  });
   const airportVal: any = ref({
     mode_code: 0,
     wind_speed: 0,
@@ -56,14 +64,74 @@
     },
   });
   watch(
-    () => props.airportAllVal,
+    () => props.msgData,
     (val) => {
-      console.log(val);
-      airportVal.value = val.data;
+      if (val.topic == 'thing/product/8UUXN5400A079H/events_reply') {
+        console.log(val);
+      }
     },
   );
 
-  onMounted(() => {});
+  const obtain = () => {
+    // 飞行控制权抢夺
+    eventsTopic({
+      bid: buildGUID(),
+      method: 'flight_authority_grab',
+      tid: buildGUID(),
+      timestamp: new Date().getTime(),
+      data: {},
+    });
+    // 负载控制权抢夺
+    eventsTopic({
+      bid: buildGUID(),
+      method: 'payload_authority_grab',
+      tid: buildGUID(),
+      timestamp: new Date().getTime(),
+      data: {
+        payload_index: '99-0-0',
+      },
+    });
+    events_replyTopic();
+  };
+  // 单拍
+  const singleShot = () => {
+    // 开始拍照
+    eventsTopic({
+      bid: buildGUID(),
+      method: 'camera_photo_take',
+      tid: buildGUID(),
+      timestamp: new Date().getTime(),
+      data: {
+        payload_index: '99-0-0',
+      },
+    });
+  };
+  // 控制方向
+  const changeDrc = (val) => {
+    if (val == 'top') {
+      drcVal.pitch = drcVal.pitch + 20;
+    } else if (val == 'bottom') {
+      drcVal.pitch = drcVal.pitch - 20;
+    } else if (val == 'left') {
+      drcVal.roll = drcVal.roll - 20;
+    } else if (val == 'right') {
+      drcVal.roll = drcVal.roll + 20;
+    }
+    const querys = {
+      seq: 1,
+      method: 'stick_control',
+      data: drcVal,
+    };
+    drcDownTopic(querys);
+  };
+  onMounted(() => {
+    // createSeizeConnection();
+    // // 接收消息
+    // getReizeClient().on('message', (topic, message) => {
+    //   const rs = JSON.parse(message);
+    //   console.log(rs);
+    // });
+  });
 </script>
 <style lang="less" scoped>
   .remote-debugging {

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

@@ -1,6 +1,14 @@
 <template>
   <div class="airport-information">
-    <div class="title">无人机信息：<span>未连接</span></div>
+    <div class="title"
+      >无人机信息：<span>
+        <template
+          v-if="uavInformation.sub_device && uavInformation.sub_device.device_online_status == 1"
+          >开机</template
+        >
+        <template v-else>关机</template>
+      </span></div
+    >
     <div class="content">
       <div class="content-title">
         {{ time }}
@@ -9,45 +17,65 @@
       <div class="content-item">
         <div class="item-div">
           <img src="@/assets/images/flightoperation/project.png" alt="" />
-          1
+          {{ uavInformation.wireless_link ? uavInformation.wireless_link.dongle_number : 0 }}
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
-        <div class="item-div">
+        <!-- <div class="item-div">
           <img src="@/assets/images/flightoperation/arrow.png" alt="" />
           0%
+        </div> -->
+        <div class="item-div">
+          <img src="@/assets/images/flightoperation/electricity.png" alt="" />
+          {{
+            uavInformation.drone_battery_maintenance_info
+              ? uavInformation.drone_battery_maintenance_info.capacity_percent
+              : 0
+          }}
         </div>
       </div>
       <div class="content-item">
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/rtk.png" alt="" />
-          0
+          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
+          <!-- sdr_link_state -->
+          <template
+            v-if="uavInformation.wireless_link && uavInformation.wireless_link.sdr_link_state == 1"
+            >连接</template
+          >
+          <template v-else>断开</template>
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/electricity.png" alt="" />
-          89%(空闲中)
+          <img src="@/assets/images/flightoperation/4g.png" alt="" />
+          <template
+            v-if="
+              uavInformation.wireless_link && uavInformation.wireless_link['4g_link_state'] == 1
+            "
+            >连接</template
+          >
+          <template v-else>断开</template>
         </div>
       </div>
+      <!-- sdr_freq_band sdr_quality 4g_freq_band 4g_quality -->
       <div class="content-item">
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/agl.png" alt="" />
-          0M
+          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
+          {{ uavInformation.wireless_link ? uavInformation.wireless_link.sdr_quality : 0 }}
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/agl.png" alt="" />
-          0M
+          <img src="@/assets/images/flightoperation/4g.png" alt="" />
+          {{ uavInformation.wireless_link ? uavInformation.wireless_link['4g_quality'] : 0 }}
         </div>
       </div>
       <div class="content-item">
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/hs.png" alt="" />
-          0m/s
+          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
+          {{ uavInformation.wireless_link ? uavInformation.wireless_link.sdr_freq_band : 0 }}
         </div>
         <a-divider type="vertical" style="border-color: #4e5778" />
         <div class="item-div">
-          <img src="@/assets/images/flightoperation/h.png" alt="" />
-          0M
+          <img src="@/assets/images/flightoperation/4g.png" alt="" />
+          {{ uavInformation.wireless_link ? uavInformation.wireless_link['4g_freq_band'] : 0 }}
         </div>
       </div>
       <div class="content-edit">
@@ -89,7 +117,7 @@
           >飞行控制</a-button
         >
         <a-button type="primary" style="background: #0a99eb" @click="emits('changeLoadControl')"
-          >负载控制</a-button
+          >云台相机控制</a-button
         >
       </div>
       <div class="content-button">
@@ -104,7 +132,6 @@
   import { reactive, ref, watch } from 'vue';
   import { CopyOutlined, EditOutlined } from '@ant-design/icons-vue';
   import { timestampToFormattedDate } from '@/utils/index';
-  import { getClient, createConnection, clientPublish, clientSubscribe } from '@/utils/mqtt';
   import { buildGUID } from '@/utils/uuid';
   import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
 
@@ -138,13 +165,41 @@
     limitedRange: '500m',
     obstacleAvoidance: '500m',
   });
+  const uavInformation = ref({
+    sub_device: {
+      // 飞行器状态
+      device_online_status: 0,
+    },
+    drone_battery_maintenance_info: {
+      // 电池剩余电量
+      capacity_percent: 0,
+    },
+    wireless_link: {
+      // 飞行器上 Dongle 数量
+      dongle_number: 0,
+      sdr_quality: 0,
+      '4g_quality': 0,
+      '4g_uav_quality': 0,
+      '4g_gnd_quality': 0,
+      remain_upload: 0,
+      sdr_link_state: 0,
+      sdr_freq_band: 0,
+    },
+  });
   const time = ref(timestampToFormattedDate(new Date().getTime()));
   watch(
     () => props.msgData,
     (val) => {
       if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
-        // console.log(val);
-        time.value = timestampToFormattedDate(val.message.timestamp);
+        if (
+          val.message.data.sub_device ||
+          val.message.data.drone_battery_maintenance_info ||
+          val.message.data.wireless_link
+        ) {
+          // console.log(val);
+          uavInformation.value = val.message.data;
+          time.value = timestampToFormattedDate(val.message.timestamp);
+        }
       }
     },
   );
@@ -152,7 +207,7 @@
 <style lang="less" scoped>
   .airport-information {
     position: absolute;
-    top: 360px;
+    top: 320px;
     left: 0;
     z-index: 999;
     width: 260px;