Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai

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

@@ -1,12 +1,12 @@
 <template>
   <div class="inspection-container">
     <div class="inspection-header">
-      <SelectComponent />
+      <SelectComponent @selectChange="changeSelect" />
       <div class="inspection-header-desc">
         <div class="inspection-header-desc-item">
-          <!-- <a-badge status="success" text="Success" /> -->
-          <a-badge status="error" />
-          状态：<span>未连接</span>
+          <a-badge status="success" v-if="status === '已连接'" />
+          <a-badge status="error" v-else />
+          状态：<span>{{ status }}</span>
         </div>
         <div class="inspection-header-desc-item">
           FPS:<span>{{ socketData && socketData.fps ? socketData.fps : 0 }}</span>
@@ -42,57 +42,15 @@
   import axios from 'axios';
   import { onMounted, ref } from 'vue';
   import io from 'socket.io-client';
+  import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
+  import { airPortStore } from '@/store/modules/airport';
 
-  const getData = () => {
-    const data = {
-      rtmp_url: 'rtmp://box.wisestcity.com:1935/live/7',
-      push_url: 'rtmp://box.wisestcity.com:1935/live/yolov8x',
-      imgsz: 640,
-      frame_skip: 1,
-      model_name: 'yolov8x.pt',
-      taskname: '兰山区火情监测日常任务20250828',
-      taskid: 'bbfc3789-92e2-4658-98e5-d218e77a981c',
-      tag: [0, 1, 2, 3, 4, 5, 7],
-    };
-    const url = 'sltest/start_detection';
-
-    axios
-      .post(url, data, {
-        headers: { 'Content-Type': 'application/json' },
-      })
-      .then((res) => {
-        console.log('helloworld', res);
-      })
-      .catch((err) => {
-        console.log('err', err);
-      });
-  };
   let socket;
 
-  // const connectWebSocket = () => {
-  //   const socket = new WebSocket('ws://192.168.10.131:9025/socket.io');
-
-  //   // 同样可以使用 addEventListener 绑定事件
-  //   // 监听连接建立事件
-  //   socket.onopen = function () {
-  //     console.log('WebSocket连接已建立');
-
-  //     // 向服务器发送消息
-  //     socket.send('Hello Server!');
-  //   };
-
-  //   // 监听接收到消息事件
-  //   socket.onmessage = function (event) {
-  //     const message = event.data;
-  //     console.log('接收到服务器消息：' + message);
-  //   };
-
-  //   // 监听连接关闭事件
-  //   socket.onclose = function () {
-  //     console.log('WebSocket连接已关闭');
-  //   };
-  // };
+  const airPortStoreVal = airPortStore();
+  const UAVinfo = airPortStoreVal.getUAV;
   const socketData = ref();
+  const status = ref('未连接');
   function connectWebSocket() {
     console.log('connectWebSocket');
     // 初始化Socket连接
@@ -101,10 +59,12 @@
     // 连接事件
     socket.on('connect', () => {
       console.log('服务连接成功');
+      status.value = '已连接';
     });
 
     socket.on('disconnect', () => {
       console.log('服务器断开');
+      status.value = '未连接';
     });
 
     // 接收检测结果
@@ -125,8 +85,18 @@
       console.log('WebSocket连接错误：', error);
     });
   }
+  const changeSelect = async (value?: any) => {
+    const topicUAVUrl = 'thing/product/' + UAVinfo.sn + '/osd';
+    // 订阅飞行器消息
+    clientSubscribe(topicUAVUrl, { qos: 1 });
+  };
+  const connected = ref(false);
+  const connectCallback = () => {
+    connected.value = true;
+  };
   onMounted(() => {
     // getData();
+    createConnection(connectCallback);
     connectWebSocket();
   });
 </script>

src/views/demo/workmanagement/inspection/src/StatisticsComponent.vue

@@ -5,16 +5,20 @@
     </div>
     <div class="map-container">
       <div class="map-container-content">
-        <Map />
+        <Map :uavTrack="uavTrack" />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, watch, ref } from 'vue';
+  import { onMounted, watch, ref, computed } from 'vue';
   import * as echarts from 'echarts';
   import { Map } from '../index';
+  import { getClient, clientSubscribe, createConnection } from '@/utils/mqtt';
+  import { airPortStore } from '@/store/modules/airport';
 
+  const airPortStoreVal = airPortStore();
+  const UAVinfo = airPortStoreVal.getUAV;
   const chartData = ref([]);
   const props = defineProps({
     statisData: {
@@ -29,7 +33,7 @@
         if (chartData.value.length >= 20) {
           chartData.value.shift();
         }
-        chartData.value.push(val[0].confidence);
+        chartData.value.push(val.length);
         updateChart();
       }
     },
@@ -114,8 +118,30 @@
       ],
     });
   }
+  const topicUAVUrl = computed(() => {
+    return 'thing/product/' + UAVinfo.sn + '/osd';
+  });
+  const uavTrack = ref({});
+  const connected = ref(false);
+  const connectCallback = () => {
+    connected.value = true;
+  };
   onMounted(() => {
     initChart();
+
+    setTimeout(() => {
+      // 接收消息
+      getClient().on('message', (topic, message) => {
+        const rs = JSON.parse(message);
+        if (rs) {
+          if (topic == topicUAVUrl.value) {
+            if (rs.data.latitude && rs.data.longitude) {
+              uavTrack.value = rs.data;
+            }
+          }
+        }
+      });
+    }, 1000);
   });
 </script>
 <style lang="scss" scoped>