优化获取位置、更换控制方向图片

src/utils/eventBus.ts

@@ -0,0 +1,15 @@
+// eventBus
+import { reactive } from 'vue';
+
+export const EventBus = reactive({
+  events: {},
+  emit(event, data) {
+    this.events[event] && this.events[event].forEach((callback) => callback(data));
+  },
+  on(event, callback) {
+    if (!this.events[event]) {
+      this.events[event] = [];
+    }
+    this.events[event].push(callback);
+  },
+});

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

@@ -13,6 +13,7 @@
       :msgData="msgData"
       @changeLoadControl="changeLoadControl"
       @changeFlightControl="changeFlightControl"
+      @loadLiveStreaming="loadLiveStreaming"
     />
     <!-- 远程调试 -->
     <!-- <div v-if="remoteVisible">
@@ -71,6 +72,7 @@
   import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
   import { buildGUID } from '@/utils/uuid';
   import { vDrag } from '@/utils/drag';
+  import { EventBus } from '@/utils/eventBus';
 
   const { createMessage } = useMessage();
   const airRoute = ref({
@@ -81,8 +83,10 @@
   });
   const locationVal: any = ref({});
   const flyToThere = (e) => {
+    console.log(e);
     locationVal.value.lat = e._lat;
     locationVal.value.lng = e._lng;
+    EventBus.emit('obtainTheLocation', locationVal.value);
   };
   onMounted(() => {
     destroyConnection();
@@ -137,6 +141,9 @@
       livePreviewVisible.value = true;
     }, 2000);
   };
+  const loadLiveStreaming = () => {
+    livePreviewVisible.value = !livePreviewVisible.value;
+  };
   const changeFlyToForm = () => {
     flyToFormVisible.value = false;
   };

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

@@ -27,18 +27,34 @@
       </div>
       <div class="content-info">
         <div class="info-item">
-          <img src="@/assets/images/flightoperation/flight_control.png" alt="" />
+          <!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
-          <div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up')"></div>
+          <div class="info-item-top" title="上升" @click="changeDRC('throttle', 'up')">
-          <div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up')"></div>
+            <img src="@/assets/images/flightoperation/top.png" alt="" />
-          <div class="info-item-bottom" title="下降" @click="changeDRC('throttle', 'down')"></div>
+          </div>
-          <div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down')"></div>
+          <div class="info-item-right" title="右旋转" @click="changeDRC('yaw', 'up')">
+            <img src="@/assets/images/flightoperation/right.png" alt="" />
+          </div>
+          <div class="info-item-bottom" title="下降" @click="changeDRC('throttle', 'down')">
+            <img src="@/assets/images/flightoperation/bottom.png" alt="" />
+          </div>
+          <div class="info-item-left" title="左旋转" @click="changeDRC('yaw', 'down')">
+            <img src="@/assets/images/flightoperation/left.png" alt="" />
+          </div>
         </div>
         <div class="info-item">
-          <img src="@/assets/images/flightoperation/flight_control.png" alt="" />
+          <!-- <img src="@/assets/images/flightoperation/flight_control.png" alt="" /> -->
-          <div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up')"></div>
+          <div class="info-item-top" title="前进" @click="changeDRC('pitch', 'up')">
-          <div class="info-item-right" title="右移" @click="changeDRC('roll', 'up')"></div>
+            <img src="@/assets/images/flightoperation/top.png" alt="" />
-          <div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down')"></div>
+          </div>
-          <div class="info-item-left" title="左移" @click="changeDRC('roll', 'down')"></div>
+          <div class="info-item-right" title="右移" @click="changeDRC('roll', 'up')">
+            <img src="@/assets/images/flightoperation/right.png" alt="" />
+          </div>
+          <div class="info-item-bottom" title="后退" @click="changeDRC('pitch', 'down')">
+            <img src="@/assets/images/flightoperation/bottom.png" alt="" />
+          </div>
+          <div class="info-item-left" title="左移" @click="changeDRC('roll', 'down')">
+            <img src="@/assets/images/flightoperation/left.png" alt="" />
+          </div>
         </div>
       </div>
     </div>
@@ -381,24 +397,28 @@
       .info-item {
         position: relative;
         width: 48%;
-        margin: 40px 0 20px 20px;
+        height: 116px;
+        margin: 24px 0 20px 20px;
         img {
-          width: 100px;
+          width: 36px;
         }
         .info-item-top {
           width: 40px;
           height: 40px;
           position: absolute;
-          top: 0px;
+          top: 8px;
-          left: 30px;
+          left: 20px;
           cursor: pointer;
+          img {
+            width: 62px;
+          }
         }
         .info-item-right {
           width: 40px;
           height: 40px;
           position: absolute;
-          top: 30px;
+          top: 31px;
-          right: 40px;
+          right: 35px;
           cursor: pointer;
         }
         .info-item-bottom {
@@ -406,8 +426,11 @@
           height: 40px;
           position: absolute;
           bottom: 0px;
-          left: 30px;
+          left: 21px;
           cursor: pointer;
+          img {
+            width: 62px;
+          }
         }
         .info-item-left {
           width: 40px;

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

@@ -9,24 +9,15 @@
     <div class="content">
       <div class="content-edit">
         目标点纬度
-        <div>
+        <div style="display: flex; flex-direction: column; align-items: center">
-          <a-input v-model:value="data.points.latitude" readonly style="width: 240px" />
+          <a-input v-model:value="data.points.latitude" readonly />
-          <EnvironmentOutlined
+          <span style="margin-top: 4px; font-size: 12px; color: #f2762d">地图右键选择目标点</span>
-            :style="{ fontSize: '20px', color: '#3a57e8' }"
-            title="选择目标点位置"
-            @click="targetPointVisible = true"
-          />
         </div>
       </div>
       <div class="content-edit">
         目标点经度
         <div>
-          <a-input v-model:value="data.points.longitude" readonly style="width: 240px" />
+          <a-input v-model:value="data.points.longitude" readonly />
-          <EnvironmentOutlined
-            :style="{ fontSize: '20px', color: '#3a57e8' }"
-            title="选择目标点位置"
-            @click="targetPointVisible = true"
-          />
         </div>
       </div>
       <div class="content-edit">
@@ -50,7 +41,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { reactive, ref, watch } from 'vue';
+  import { reactive, ref, watch, onMounted } from 'vue';
   import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
   import { buildGUID, uuid } from '@/utils/uuid';
   import { servicesTopicReize, services_replyTopicReize } from '@/utils/debugging/events';
@@ -58,11 +49,11 @@
   import { vDrag } from '@/utils/drag';
   import { CloseOutlined } from '@ant-design/icons-vue';
   import { Map } from '../index';
+  import { EventBus } from '@/utils/eventBus';
 
   const emits = defineEmits(['changeFlyToForm']);
   const props = defineProps({
     msgData: Object,
-    locationVal: Object,
   });
 
   const data = reactive({
@@ -74,17 +65,6 @@
       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(),
@@ -104,6 +84,13 @@
       emits('changeFlyToForm');
     }, 1000);
   };
+  onMounted(() => {
+    // 定位到某个经纬度
+    EventBus.on('obtainTheLocation', (val: any) => {
+      data.points.latitude = val.lat;
+      data.points.longitude = val.lng;
+    });
+  });
 </script>
 <style lang="less" scoped>
   .takeoff-information {

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

@@ -74,10 +74,12 @@
         console.log(val);
         if (val.message.data.result == 0) {
           createMessage.success('无人机开始直播成功');
-          player.src('http://175.27.168.120:6012/live/3.flv');
+          player.src('http://175.27.168.120:6012/live/4.flv');
+          player.play();
         } else if (val.message.data.result == 513003) {
           createMessage.success('无人机直播已开启');
-          player.src('http://175.27.168.120:6012/live/3.flv');
+          player.src('http://175.27.168.120:6012/live/4.flv');
+          player.play();
         } else {
           createMessage.error('无人机开始直播失败');
         }
@@ -93,14 +95,16 @@
       } else if (val.message.method == 'live_set_quality') {
         if (val.message.data.result == 0) {
           createMessage.success('无人机设置清晰度成功');
-          player.src('http://175.27.168.120:6012/live/3.flv');
+          player.src('http://175.27.168.120:6012/live/4.flv');
+          player.play();
         } else {
           createMessage.error('无人机设置清晰度失败');
         }
       } else if (val.message.method == 'live_lens_change') {
         if (val.message.data.result == 0) {
           createMessage.success('无人机设置直播镜头成功');
-          player.src('http://175.27.168.120:6012/live/3.flv');
+          player.src('http://175.27.168.120:6012/live/4.flv');
+          player.play();
         } else {
           createMessage.error('无人机设置直播镜头失败');
         }
@@ -108,15 +112,15 @@
     },
   );
 
-  watch(
+  // watch(
-    () => props.uavLive,
+  //   () => props.uavLive,
-    (val) => {
+  //   (val) => {
-      if (val) {
+  //     if (val) {
-        console.log('开始无人机直播');
+  //       console.log('开始无人机直播');
-        startLiveFun();
+  //       startLiveFun();
-      }
+  //     }
-    },
+  //   },
-  );
+  // );
   const selectVal = reactive({
     camera: 'normal',
     resolution: 1,
@@ -171,7 +175,7 @@
       timestamp: new Date().getTime(),
       data: {
         url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
-        url: 'rtmp://175.27.168.120:6019/live/3',
+        url: 'rtmp://175.27.168.120:6019/live/4',
         //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
         video_id: '1581F8HGX254V00A0BUY/99-0-0/normal-0',
         video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
@@ -247,10 +251,10 @@
       height: 180,
       sources: [
         {
-          src: 'http://175.27.168.120:6012/live/3.flv', // 播放地址
+          src: 'http://175.27.168.120:6012/live/4.flv', // 播放地址
         },
       ],
-      licenseUrl: 'http://175.27.168.120:6012/live/3.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+      licenseUrl: 'http://175.27.168.120:6012/live/4.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
     });
   };
   const closeLive = () => {

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

@@ -9,22 +9,15 @@
     <div class="content">
       <div class="content-edit">
         目标点纬度
-        <div>
+        <div style="display: flex; flex-direction: column; align-items: center">
-          <a-input v-model:value="data.target_latitude" readonly style="width: 240px" />
+          <a-input v-model:value="data.target_latitude" readonly />
-          <EnvironmentOutlined
+          <span style="margin-top: 4px; font-size: 12px; color: #f2762d">地图右键选择目标点</span>
-            :style="{ fontSize: '20px', color: '#3a57e8' }"
-            title="选择目标点位置"
-          />
         </div>
       </div>
       <div class="content-edit">
         目标点经度
         <div>
-          <a-input v-model:value="data.target_longitude" readonly style="width: 240px" />
+          <a-input v-model:value="data.target_longitude" readonly />
-          <EnvironmentOutlined
-            :style="{ fontSize: '20px', color: '#3a57e8' }"
-            title="选择目标点位置"
-          />
         </div>
       </div>
       <div class="content-edit">
@@ -97,7 +90,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { reactive, ref, watch } from 'vue';
+  import { reactive, ref, watch, onMounted } from 'vue';
   import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
   import { timestampToFormattedDate } from '@/utils/index';
   import { buildGUID, uuid } from '@/utils/uuid';
@@ -106,11 +99,11 @@
   import { vDrag } from '@/utils/drag';
   import { CloseOutlined } from '@ant-design/icons-vue';
   import { Map } from '../index';
+  import { EventBus } from '@/utils/eventBus';
 
   const emits = defineEmits(['changeTakeOffForm']);
   const props = defineProps({
     msgData: Object,
-    locationVal: Object,
   });
   const data = reactive({
     flight_id: uuid(14, 14),
@@ -187,17 +180,6 @@
       }
     },
   );
-  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(),
@@ -217,9 +199,18 @@
       emits('changeTakeOffForm');
     }, 1000);
   };
+  onMounted(() => {
+    // 定位到某个经纬度
+    EventBus.on('obtainTheLocation', (val: any) => {
+      data.target_latitude = val.lat;
+      data.target_longitude = val.lng;
+    });
+  });
 </script>
 <style lang="less" scoped>
   .takeoff-information {
+    display: flex;
+    flex-direction: column;
     position: absolute;
     top: 120px;
     left: 300px;

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

@@ -121,7 +121,10 @@
         >
       </div>
       <div class="content-button">
-        <a-button type="primary" style="background: #3a57e8; width: 100%" @click="loadLiveStreaming"
+        <a-button
+          type="primary"
+          style="background: #3a57e8; width: 100%"
+          @click="emits('loadLiveStreaming')"
           >负载直播</a-button
         >
       </div>
@@ -135,26 +138,27 @@
   import { buildGUID } from '@/utils/uuid';
   import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
 
+  // const emits = defineEmits(['loadLiveStreaming', 'changeLoadControl']);
   // 负载直播测试
-  const loadLiveStreaming = async () => {
+  // const loadLiveStreaming = async () => {
-    const querys = {
+  // const querys = {
-      bid: buildGUID(),
+  //   bid: buildGUID(),
-      method: 'live_start_push',
+  //   method: 'live_start_push',
-      tid: buildGUID(),
+  //   tid: buildGUID(),
-      timestamp: new Date().getTime(),
+  //   timestamp: new Date().getTime(),
-      data: {
+  //   data: {
-        url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
+  //     url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
-        url: 'rtmp://221.2.83.254:1935/live/2',
+  //     url: 'rtmp://221.2.83.254:1935/live/2',
-        //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
+  //     //video_id = "1581F8HGX254V00A0BUY/0-100-1/normal-0",
-        video_id: '8UUXN5400A079H/165-0-7/normal-0',
+  //     video_id: '8UUXN5400A079H/165-0-7/normal-0',
-        video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
+  //     video_quality: 1, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
-      },
+  //   },
-    };
+  // };
-    servicesTopic(querys);
+  // servicesTopic(querys);
-    services_replyTopic();
+  // services_replyTopic();
-  };
+  // };
 
-  const emits = defineEmits(['changeLoadControl', 'changeFlightControl']);
+  const emits = defineEmits(['changeLoadControl', 'changeFlightControl', 'loadLiveStreaming']);
   const props = defineProps({
     msgData: Object,
   });
@@ -191,13 +195,17 @@
     () => props.msgData,
     (val) => {
       if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
-        if (
+        if (val.message.data.sub_device) {
-          val.message.data.sub_device ||
+          uavInformation.value.sub_device = val.message.data.sub_device;
-          val.message.data.drone_battery_maintenance_info ||
+          time.value = timestampToFormattedDate(val.message.timestamp);
-          val.message.data.wireless_link
+        }
-        ) {
+        if (val.message.data.drone_battery_maintenance_info) {
-          // console.log(val);
+          uavInformation.value.drone_battery_maintenance_info =
-          uavInformation.value = val.message.data;
+            val.message.data.drone_battery_maintenance_info;
+          time.value = timestampToFormattedDate(val.message.timestamp);
+        }
+        if (val.message.data.wireless_link) {
+          uavInformation.value.wireless_link = val.message.data.wireless_link;
           time.value = timestampToFormattedDate(val.message.timestamp);
         }
       }