Merge branch 'dev-rmd'

uavps-web/src/views/system/task/index.vue

@@ -723,7 +723,7 @@
             <div style="margin-left: 10px" v-else>暂无</div>
           </div>
           <el-divider content-position="left">平台无人机</el-divider>
-          <div style="height: 170px; overflow: auto">
+          <div style="height: 190px; overflow: auto">
             <div v-if="configList.includes('经度')">
               <span>经度：&nbsp;&nbsp;</span
               ><label>{{ platformInfo.longitude }}</label>
@@ -749,16 +749,24 @@
               ><label>{{ platformInfo.skySpeed }}m/s</label>
             </div>
             <div>
-              <span>距离：&nbsp;&nbsp;</span>
+              <span>方位角：&nbsp;&nbsp;</span>
+              <label>{{ platformInfo.azimuthAngle }}</label>
+            </div>
+            <div>
+              <span>目标飞机：&nbsp;&nbsp;</span>
+              <label>{{ platformInfo.targetAircraftNumber }}</label>
+            </div>
+            <div>
+              <span>距离目标飞机距离：&nbsp;&nbsp;</span>
               <label>{{ platformInfo.distance }}m</label>
             </div>
             <div>
-              <span>方位角：&nbsp;&nbsp;</span>
+              <span>与目标飞机夹角：&nbsp;&nbsp;</span>
               <label>{{ platformInfo.bearing }}</label>
             </div>
           </div>
           <el-divider content-position="left">目标无人机群</el-divider>
-          <div style="height: 500px; overflow: auto">
+          <div style="height: 480px; overflow: auto">
             <li v-for="(item, key) in targetLblAry" :key="key" class="item">
               <div
                 v-if="!hideList.includes(item.id)"
@@ -1249,7 +1257,7 @@ export default {
             this.canvasInfo = {
               centerLongitude: info.longitude,
               centerLatitude: info.latitude,
-              lengthKm: 5,
+              lengthKm: 20,
             };
             this.airPosShow(
               this.form.customizedMultiTargetFormation,
@@ -1270,7 +1278,6 @@ export default {
     // 根据后端返回的自定义编队信息，显示飞机位置
     airPosShow(info, type) {
       let texture = new PIXI.Texture.from(uavTarPNG);
-      // TODO 需要给精灵加上id,就是数据中的number
       info.forEach((item) => {
         const { x, y } = this.calculateXY(item.longitude, item.latitude);
 
@@ -1305,22 +1312,6 @@ export default {
 
       return { x, y };
     },
-    // 计算两点间的距离
-    // calculateDistance(firstLng, firstLat, secondLng, secondLat) {
-    //   const phi1 = this.firstLat * (Math.PI / 180);
-    //   const phi2 = secondLat * (Math.PI / 180);
-    //   const deltaPhi = (secondLat - firstLat) * (Math.PI / 180);
-    //   const deltaLambda = (secondLng - firstLng) * (Math.PI / 180);
-    //   // 应用 Haversine 公式
-    //   const a =
-    //     Math.sin(deltaPhi / 2) ** 2 +
-    //     Math.cos(phi1) * Math.cos(phi2) * Math.sin(deltaLambda / 2) ** 2;
-    //   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
-    //   // 计算距离
-    //   this.airDistance = 6378137 * c;
-    //   this.isClickGroup = false;
-    // },
     // 选择第一个飞机
     handleFirstAir(val) {
       this.secondAir = null;
@@ -1471,8 +1462,9 @@ export default {
       this.getList();
       this.showTrajectory = false;
     },
+
+    // 居中
     handleCenter() {
-      console.log("this.targetDataR", this.targetDataR);
       const firstKey = Object.keys(this.targetDataR)[0];
       // 获取到第一个飞机的位置
       const posX = this.targetDataR[`${firstKey}`].x;
@@ -1488,6 +1480,8 @@ export default {
       const offsetY = centerY - posY * scaleY;
       this.pixiApp.stage.position.set(offsetX, offsetY);
     },
+
+    // 销毁画布信息
     destroyTrajectory() {
       if (this.webSocket) {
         this.webSocket.close();
@@ -1530,6 +1524,7 @@ export default {
 
       this.clearAllAry();
     },
+
     initTrajectory() {
       // this.clearAllAry();
       this.initPixi();
@@ -1575,13 +1570,14 @@ export default {
       this.container.appendChild(this.pixiApp.view);
 
       // 添加视窗控制
-      this.enableViewControl();
+      this.enableViewControl(this.pixiApp);
       // 增加追踪线
       this.trackGraphicsLine = new PIXI.Graphics();
       this.trackGraphicsLine.lineStyle(1, 0xf5f7fa, 1);
       this.pixiApp.stage.addChild(this.trackGraphicsLine);
     },
 
+    // 平台无人机展示
     showPlatformAir(platformData) {
       const data = platformData.platformAircraft;
       if (this.platformData.length == 0) {
@@ -1611,13 +1607,12 @@ export default {
       } else {
         this.platformSprite.x = data.coordinateX;
         this.platformSprite.y = data.coordinateY;
-        // this.platformSprite.rotation =
-        //   Number(data.azimuthAngle + 90) * (Math.PI / 180);
+        this.platformSprite.rotation = data.azimuthAngle * (Math.PI / 180);
 
-        this.platformSprite.rotation = Math.atan2(
-          data.northSpeed,
-          data.eastSpeed
-        );
+        // this.platformSprite.rotation = Math.atan2(
+        //   data.northSpeed,
+        //   data.eastSpeed
+        // );
         // this.platformInfo = data;
         Object.assign(this.platformInfo, data);
         if (this.platformCycleCount % this.updatePlatformPathFlag == 0) {
@@ -1705,8 +1700,10 @@ export default {
                 newData[i].longitude,
                 0
               );
-              this.platformInfo.distance = returnData.distance.toFixed(7);
-              this.platformInfo.bearing = returnData.bearing.toFixed(7);
+              this.platformInfo.distance = Number(
+                returnData.distance.toFixed()
+              );
+              this.platformInfo.bearing = Number(returnData.bearing.toFixed(2));
               this.trackGraphicsLine.moveTo(
                 this.platformInfo.coordinateX,
                 this.platformInfo.coordinateY
@@ -1993,6 +1990,7 @@ export default {
       // this.changeNoList.push({ id: id, changeNo: id });
     },
 
+    // 飞机的显示与隐藏
     showSprite(id) {
       if (this.isUpdateView) {
         // 表示是回放，不用隐藏
@@ -2054,51 +2052,53 @@ export default {
       }
     },
     // 添加视窗控制
-    enableViewControl() {
-      this.pixiApp.stage.interactive = true;
+    enableViewControl(app) {
+      app.stage.interactive = true;
       // 拖曳状态变量
       let dragging = false;
 
       let lastPosition = null; // 上一次鼠标的位置
-      // 鼠标按下事件
-      this.pixiApp.view.addEventListener("mousedown", (event) => {
-        dragging = true;
-        lastPosition = { x: event.clientX, y: event.clientY };
-      });
-      // 鼠标移出画布时停止拖动
-      this.pixiApp.view.addEventListener("mouseleave", () => {
-        dragging = false;
-      });
+      if (!(this.title == "添加任务数据" || this.title == "修改任务数据")) {
+        // 鼠标按下事件
+        app.view.addEventListener("mousedown", (event) => {
+          dragging = true;
+          lastPosition = { x: event.clientX, y: event.clientY };
+        });
+        // 鼠标移出画布时停止拖动
+        app.view.addEventListener("mouseleave", () => {
+          dragging = false;
+        });
 
-      // 鼠标移动事件
-      this.pixiApp.view.addEventListener("mousemove", (event) => {
-        if (dragging) {
-          const currentPosition = { x: event.clientX, y: event.clientY };
+        // 鼠标移动事件
+        app.view.addEventListener("mousemove", (event) => {
+          if (dragging) {
+            const currentPosition = { x: event.clientX, y: event.clientY };
 
-          // 计算鼠标移动的距离
-          const dx = currentPosition.x - lastPosition.x;
-          const dy = currentPosition.y - lastPosition.y;
+            // 计算鼠标移动的距离
+            const dx = currentPosition.x - lastPosition.x;
+            const dy = currentPosition.y - lastPosition.y;
 
-          // 更新舞台的位置
-          this.pixiApp.stage.x += dx;
-          this.pixiApp.stage.y += dy;
+            // 更新舞台的位置
+            app.stage.x += dx;
+            app.stage.y += dy;
 
-          // 更新上一次鼠标的位置
-          lastPosition = currentPosition;
-        }
-      });
+            // 更新上一次鼠标的位置
+            lastPosition = currentPosition;
+          }
+        });
 
-      // 鼠标松开事件
-      this.pixiApp.view.addEventListener("mouseup", () => {
-        dragging = false;
-      });
+        // 鼠标松开事件
+        app.view.addEventListener("mouseup", () => {
+          dragging = false;
+        });
+      }
 
       // 鼠标滚轮缩放
-      this.pixiApp.renderer.view.addEventListener("wheel", (e) => {
+      app.renderer.view.addEventListener("wheel", (e) => {
         e.preventDefault();
         const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
-        this.pixiApp.stage.scale.x *= zoomFactor;
-        this.pixiApp.stage.scale.y *= zoomFactor;
+        app.stage.scale.x *= zoomFactor;
+        app.stage.scale.y *= zoomFactor;
       });
     },
     // 更新无人机飞行路径
@@ -2130,7 +2130,7 @@ export default {
       });
     },
 
-    // 初始化编队的画布
+    // 初始化自定义编队的画布
     initFormationApp() {
       this.pixiCanvas = this.$refs.pixiCanvas;
       if (!this.pixiCanvas) return;
@@ -2155,6 +2155,7 @@ export default {
       graphics.drawCircle(centerX, centerY, 3);
       graphics.endFill();
       this.formationAirPiXiApp.stage.addChild(graphics);
+      // this.enableViewControl(this.formationAirPiXiApp);
     },
     // 增加飞机编队
     addAirSprite() {
@@ -2174,13 +2175,8 @@ export default {
       this.formationAirPiXiApp.view.addEventListener("pointermove", (e) => {
         airSprite.x = e.offsetX;
         airSprite.y = e.offsetY;
-        const { clientX, clientY } = e;
-        const rect = this.formationAirPiXiApp.view.getBoundingClientRect();
-        const mouseX = clientX - rect.left;
-        const mouseY = clientY - rect.top;
-
         // 计算对应经纬度
-        const { lat, lng } = this.calculateLatLng(mouseX, mouseY);
+        const { lat, lng } = this.calculateLatLng(e.offsetX, e.offsetY);
         this.nowlongitude = lng;
         this.nowlatitude = lat;
       });
@@ -2191,13 +2187,8 @@ export default {
         newSprite.scale.set(0.04);
         newSprite.x = e.offsetX;
         newSprite.y = e.offsetY;
-        const { clientX, clientY } = e;
-        const rect = this.formationAirPiXiApp.view.getBoundingClientRect();
-        const mouseX = clientX - rect.left;
-        const mouseY = clientY - rect.top;
-
         // 计算对应经纬度
-        const { lat, lng } = this.calculateLatLng(mouseX, mouseY);
+        const { lat, lng } = this.calculateLatLng(e.offsetX, e.offsetY);
         this.formationInfoForm = {
           number: null,
           longitude: null,
@@ -2222,7 +2213,6 @@ export default {
       // 计算鼠标相对于画布中心的偏移量（单位：像素）
       const offsetX = x - this.pixiCanvas.clientWidth / 2;
       const offsetY = y - this.pixiCanvas.clientHeight / 2;
-
       // 将像素偏移量转换为实际距离（单位：公里）
       const kmPerPixel = this.canvasInfo.lengthKm / this.pixiCanvas.clientWidth;
       const deltaX = offsetX * kmPerPixel;