智能巡检、实时巡检

package.json

@@ -137,6 +137,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "showdown": "^2.1.0",
     "shpjs": "^6.1.0",
+    "socket.io-client": "^4.8.1",
     "sortablejs": "^1.15.1",
     "tcplayer.js": "^5.3.4",
     "terraformer-wkt-parser": "^1.2.1",

src/api/workmanagement/droneDock.ts

@@ -7,6 +7,7 @@ enum Api {
   GetTaskVideoList = '/api/Manage/GetTaskVideoList',
   SaveHandFlyTask = '/api/Manage/SaveHandFlyTask',
   CallAiModel = '/api/Manage/CallAiModel',
+  EndHandFlyTask = '/api/Manage/EndHandFlyTask',
 }
 
 export function getVerifyToken(token) {
@@ -42,3 +43,10 @@ export function callAiModel(params) {
     params,
   });
 }
+
+export function endHandFlyTask(params) {
+  return defHttp.post({
+    url: Api.EndHandFlyTask + '?taskid = ' + params.taskid,
+    params,
+  });
+}

src/store/modules/airport.ts

@@ -23,6 +23,7 @@ export const airPortStore = defineStore({
     },
     gateway: null,
     project: null,
+    taskId: null,
   }),
   getters: {
     getAirport(state) {
@@ -40,6 +41,9 @@ export const airPortStore = defineStore({
     getProject(state) {
       return state.project;
     },
+    getTaskId(state) {
+      return state.taskId;
+    },
   },
   actions: {
     setAirPort(item: any, value: any) {
@@ -54,5 +58,8 @@ export const airPortStore = defineStore({
     setProject(value: any) {
       this.project = value;
     },
+    setTaskId(value: any) {
+      this.taskId = value;
+    },
   },
 });

src/views/demo/resourcemanagement/aiinstance/AddInstanceModal.vue

@@ -231,8 +231,8 @@ onMounted(() => {
     spaceConstraint.value = props.showInfoData.spaceConstraint
     expansionDistance.value = props.showInfoData.expansionDistance
     temporalConstraints.value = props.showInfoData.temporalConstraints
-    tcStartTime.value = dayjs(props.showInfoData.tcStartTime)
-    tcEndTime.value = dayjs(props.showInfoData.tcEndTime)
+    tcStartTime.value = props.showInfoData.tcStartTime? dayjs(props.showInfoData.tcStartTime): ''
+    tcEndTime.value = props.showInfoData.tcEndTime? dayjs(props.showInfoData.tcEndTime): ''
     flySpeedFirst.value = props.showInfoData.flySpeed?.split('~')[0] || ''
     flySpeedLast.value = props.showInfoData.flySpeed.split('~')[1] || ''
     gimbalPitchDegreeFirst.value = props.showInfoData.gimbalPitchDegree?.split('~')[0] || ''

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

@@ -72,7 +72,7 @@
       @loadLiveStreaming="livePreviewVisible = false"
       @changeCameraType="changeCameraType"
     />
-    <div class="intelligent-patrol">
+    <div class="intelligent-patrol" v-if="taskId">
       <div @click="patrolVisible = true">
         <span> <RadarChartOutlined /> </span>
         <span>智能巡检</span>

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

@@ -190,7 +190,10 @@
   import VueDragResize from 'vue-drag-resize/src';
   import { airPortStore } from '@/store/modules/airport';
   import { EventBus } from '@/utils/eventBus';
+  import { endHandFlyTask } from '@/api/workmanagement/droneDock';
+  import io from 'socket.io-client';
 
+  let socket;
   const props = defineProps({
     zIndex: Number,
   });
@@ -343,6 +346,18 @@
       timestamp: new Date().getTime(),
       data: {},
     });
+    if (airPortStoreVal.getTaskId) {
+      endHandFlyTask({
+        taskid: airPortStoreVal.getTaskId,
+      }).then((res) => {
+        if (res) {
+          if (socket) {
+            socket.disconnect();
+          }
+          airPortStoreVal.setTaskId(null);
+        }
+      });
+    }
   };
   const seq = ref(1);
   const longPressTimer = ref();
@@ -543,6 +558,7 @@
     }
   };
   onMounted(() => {
+    socket = io('http://192.168.10.131:9025');
     // 添加键盘事件监听
     document.addEventListener('keydown', handleKeyDown);
     document.addEventListener('keyup', handleKeyUp);

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

@@ -47,11 +47,14 @@
           </a-radio-group>
         </div>
         <div class="content-title">
-          <span>警告提示</span>
+          <span>警告提示标题</span>
         </div>
         <div class="content-edit">
           <a-input v-model:value="data.code" placeholder="异常提示" />
         </div>
+        <div class="content-title">
+          <span>警告提示内容</span>
+        </div>
         <div class="content-edit">
           <a-textarea v-model:value="data.desc" placeholder="识别到异常目标" />
         </div>
@@ -101,6 +104,8 @@
   import { callAiModel } from '@/api/workmanagement/droneDock';
   import { EventBus } from '@/utils/eventBus';
 
+  const airPortStoreVal = airPortStore();
+
   const { createMessage } = useMessage();
   const emits = defineEmits(['changePatrol']);
   const props = defineProps({
@@ -164,11 +169,22 @@
     });
   };
   const liveCode = ref('7');
-  const airPortStoreVal = airPortStore();
-
   const live_info = airPortStoreVal.getLiveInfo;
 
   const submit = () => {
+    console.log(props.type);
+    if (!instantiateItem.value) {
+      createMessage.warning('请选择AI算法实例');
+      return;
+    }
+    if (!data.code) {
+      createMessage.warning('警告提示标题不能为空');
+      return;
+    }
+    if (!data.desc) {
+      createMessage.warning('警告提示内容不能为空');
+      return;
+    }
     if (props.type == 'plan') {
       const querys = {
         algoInstanceId: instantiateItem.value.id,
@@ -176,6 +192,7 @@
         warningContent: data.desc,
       };
       EventBus.emit('palnPatrol', querys);
+      emits('changePatrol');
       return;
     }
     const querys = {
@@ -188,6 +205,7 @@
     callAiModel(querys).then((res) => {
       console.log(res);
       createMessage.success('操作成功');
+      airPortStoreVal.setTaskId(props.taskId);
       emits('changePatrol');
     });
   };

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

@@ -8,17 +8,31 @@
           <a-badge status="error" />
           状态：<span>未连接</span>
         </div>
-        <div class="inspection-header-desc-item"> FPS:<span>123</span> </div>
-        <div class="inspection-header-desc-item"> 总帧数:<span>123</span> </div>
-        <div class="inspection-header-desc-item"> 监测目标数:<span>123</span> </div>
+        <div class="inspection-header-desc-item">
+          FPS:<span>{{ socketData && socketData.fps ? socketData.fps : 0 }}</span>
+        </div>
+        <div class="inspection-header-desc-item">
+          总帧数:<span>{{
+            socketData && socketData.frame_count ? socketData.frame_count : 0
+          }}</span>
+        </div>
+        <div class="inspection-header-desc-item">
+          监测目标数:<span>{{
+            socketData && socketData.detections.length ? socketData.detections.length : 0
+          }}</span>
+        </div>
       </div>
     </div>
     <div class="inspection-content">
       <div class="inspection-content-left">
-        <StatisticsComponent />
+        <StatisticsComponent
+          :statisData="socketData && socketData.detections ? socketData.detections : []"
+        />
       </div>
       <div class="inspection-content-right">
-        <VideoStreamComponent />
+        <VideoStreamComponent
+          :statisData="socketData && socketData.detections ? socketData.detections : []"
+        />
       </div>
     </div>
   </div>
@@ -26,7 +40,8 @@
 <script lang="ts" setup>
   import { SelectComponent, StatisticsComponent, VideoStreamComponent } from './index';
   import axios from 'axios';
-  import { onMounted } from 'vue';
+  import { onMounted, ref } from 'vue';
+  import io from 'socket.io-client';
 
   const getData = () => {
     const data = {
@@ -52,29 +67,64 @@
         console.log('err', err);
       });
   };
-  const connectWebSocket = () => {
-    const socket = new WebSocket('ws://192.168.10.131:9025/socket.io');
+  let socket;
 
-    // 同样可以使用 addEventListener 绑定事件
-    // 监听连接建立事件
-    socket.onopen = function () {
-      console.log('WebSocket连接已建立');
+  // const connectWebSocket = () => {
+  //   const socket = new WebSocket('ws://192.168.10.131:9025/socket.io');
 
-      // 向服务器发送消息
-      socket.send('Hello Server!');
-    };
+  //   // 同样可以使用 addEventListener 绑定事件
+  //   // 监听连接建立事件
+  //   socket.onopen = function () {
+  //     console.log('WebSocket连接已建立');
 
-    // 监听接收到消息事件
-    socket.onmessage = function (event) {
-      const message = event.data;
-      console.log('接收到服务器消息：' + message);
-    };
+  //     // 向服务器发送消息
+  //     socket.send('Hello Server!');
+  //   };
 
-    // 监听连接关闭事件
-    socket.onclose = function () {
-      console.log('WebSocket连接已关闭');
-    };
-  };
+  //   // 监听接收到消息事件
+  //   socket.onmessage = function (event) {
+  //     const message = event.data;
+  //     console.log('接收到服务器消息：' + message);
+  //   };
+
+  //   // 监听连接关闭事件
+  //   socket.onclose = function () {
+  //     console.log('WebSocket连接已关闭');
+  //   };
+  // };
+  const socketData = ref();
+  function connectWebSocket() {
+    console.log('connectWebSocket');
+    // 初始化Socket连接
+    socket = io('http://192.168.10.131:9025');
+
+    // 连接事件
+    socket.on('connect', () => {
+      console.log('服务连接成功');
+    });
+
+    socket.on('disconnect', () => {
+      console.log('服务器断开');
+    });
+
+    // 接收检测结果
+    socket.on('detection_results', (data) => {
+      // console.log('收到检测结果：', data);
+      socketData.value = data;
+      //       {
+      //     "detections": [],
+      //     "timestamp": 1756371710725,
+      //     "fps": 18.2,
+      //     "frame_count": 3269,
+      //     "taskid": "03721e94-08da-42fc-aa0e-261ac0b4f2d9"
+      // }
+    });
+
+    // 错误处理
+    socket.on('error', (error) => {
+      console.log('WebSocket连接错误：', error);
+    });
+  }
   onMounted(() => {
     // getData();
     connectWebSocket();

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

@@ -11,20 +11,37 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted } from 'vue';
+  import { onMounted, watch, ref } from 'vue';
   import * as echarts from 'echarts';
   import { Map } from '../index';
 
+  const chartData = ref([]);
+  const props = defineProps({
+    statisData: {
+      type: Array,
+      default: () => [],
+    },
+  });
+  watch(
+    () => props.statisData,
+    (val) => {
+      if (val.length > 0) {
+        if (chartData.value.length >= 20) {
+          chartData.value.shift();
+        }
+        chartData.value.push(val[0].confidence);
+        updateChart();
+      }
+    },
+  );
+  let myChart;
   const initChart = () => {
     var chartDom = document.getElementById('main');
-    var myChart = echarts.init(chartDom);
+    myChart = echarts.init(chartDom);
     var option;
-
     let date = [];
-    let data = [Math.random() * 300];
-    for (let i = 1; i < 40; i++) {
+    for (let i = 1; i < 20; i++) {
       date.push(i);
-      data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
     }
     option = {
       tooltip: {
@@ -79,13 +96,24 @@
               },
             ]),
           },
-          data: data,
+          data: [],
         },
       ],
     };
 
     option && myChart.setOption(option);
   };
+  // 更新检测统计图表
+  function updateChart() {
+    console.log(chartData.value);
+    myChart.setOption({
+      series: [
+        {
+          data: chartData.value,
+        },
+      ],
+    });
+  }
   onMounted(() => {
     initChart();
   });

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

@@ -4,6 +4,7 @@
       <div class="title">
         <VideoCameraOutlined />
         原始视频流
+        <RedoOutlined title="刷新" @click="reloadLive" />
       </div>
       <div class="player">
         <video
@@ -21,6 +22,7 @@
       <div class="title">
         <VideoCameraOutlined />
         检测后视频流
+        <RedoOutlined title="刷新" @click="reloadTestingLive" />
       </div>
       <div class="player">
         <video
@@ -40,24 +42,86 @@
   import TCPlayer from 'tcplayer.js';
   import 'tcplayer.js/dist/tcplayer.min.css'; //引入插件和样式文件
   import { airPortStore } from '@/store/modules/airport';
-  import { ref } from 'vue';
-  import { VideoCameraOutlined } from '@ant-design/icons-vue';
+  import { onMounted, watch, onBeforeUnmount } from 'vue';
+  import { VideoCameraOutlined, RedoOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    statisData: {
+      type: Array,
+      default: () => [],
+    },
+  });
 
   const airPortStoreVal = airPortStore();
   const live_info = airPortStoreVal.getLiveInfo;
+  // 原始流
   let player;
-  const liveCode = ref('7');
-
+  const liveCode = live_info.url + '7.flv';
   const playVideo = () => {
     player = TCPlayer('player-container-original-live', {
       sources: [
         {
-          src: live_info.url + liveCode.value + '.flv', // 播放地址
+          src: liveCode, // 播放地址
+        },
+      ],
+      licenseUrl: liveCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+    });
+  };
+
+  // 检测后流
+  let playerTesting;
+  const testingCode = live_info.url + '11.flv';
+  const testingPlayVideo = () => {
+    player = TCPlayer('player-container-testing-live', {
+      sources: [
+        {
+          src: testingCode, // 播放地址
         },
       ],
-      licenseUrl: live_info.url + liveCode.value + '.flv', // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
+      licenseUrl: testingCode, // license 地址，必传。参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
     });
   };
+
+  const reloadLive = () => {
+    player.src(liveCode);
+    player.play();
+  };
+  const reloadTestingLive = () => {
+    if (playerTesting) {
+      playerTesting.src(testingCode);
+      playerTesting.play();
+    }
+  };
+  onMounted(() => {
+    playVideo();
+    testingPlayVideo();
+    setTimeout(() => {
+      if (player) {
+        player.play();
+      }
+      if (playerTesting) {
+        playerTesting.play();
+      }
+    }, 1000);
+  });
+  watch(
+    () => props.statisData,
+    (val) => {
+      reloadLive();
+      reloadTestingLive();
+    },
+  );
+  // 销毁视频控件
+  onBeforeUnmount(() => {
+    if (player) {
+      player.dispose();
+      player = null;
+    }
+    if (playerTesting) {
+      playerTesting.dispose();
+      playerTesting = null;
+    }
+  });
 </script>
 <style lang="scss" scoped>
   .video-stream-container {
@@ -85,6 +149,7 @@
       border-bottom: 1px solid #4e5778;
     }
     .player {
+      height: 80%;
       video {
         margin-left: 10px;
       }