追踪、平台信息显示、回放

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

@@ -720,7 +720,7 @@
             <div style="margin-left: 10px" v-else>暂无</div>
           </div>
           <el-divider content-position="left">平台无人机</el-divider>
-          <div style="height: 120px; overflow: auto">
+          <div style="height: 170px; overflow: auto">
             <div v-if="configList.includes('经度')">
               <span>经度：&nbsp;&nbsp;</span
               ><label>{{ platformInfo.longitude }}</label>
@@ -745,9 +745,17 @@
               <span>天向速度：&nbsp;&nbsp;</span
               ><label>{{ platformInfo.skySpeed }}m/s</label>
             </div>
+            <div>
+              <span>距离：&nbsp;&nbsp;</span>
+              <label>{{ platformInfo.distance }}m</label>
+            </div>
+            <div>
+              <span>方位角：&nbsp;&nbsp;</span>
+              <label>{{ platformInfo.bearing }}</label>
+            </div>
           </div>
           <el-divider content-position="left">目标无人机群</el-divider>
-          <div style="height: 550px; overflow: auto">
+          <div style="height: 500px; overflow: auto">
             <li v-for="(item, key) in targetLblAry" :key="key" class="item">
               <div
                 v-if="!hideList.includes(item.id)"
@@ -755,8 +763,7 @@
                 style="cursor: pointer"
               >
                 <div>
-                  <span>编号：&nbsp;&nbsp;</span
-                  ><label>{{ item.showNo }}</label>
+                  <span>编号：&nbsp;&nbsp;</span><label>{{ item.id }}</label>
                   <!-- <span style="margin-left: 10px" v-if="hideList.includes(item.id)"
                 >( 隐 藏 )</span
               > -->
@@ -1094,7 +1101,7 @@ export default {
       pathGraphicsList: {},
       pathGraphicsPointList: {},
       isUpdateView: false, // 是否开启实现追踪，在回放时开启
-      percentage: 50,
+      percentage: 0,
       // 多久更新一次轨迹
       updatePathFlag: 75,
       cycleCount: 0, // 循环计数
@@ -1114,12 +1121,12 @@ export default {
       ],
       hideList: [], // 当下隐藏的飞机数组
       allId: [], // 所有飞机的id
-      changeShowNoList: [], // 需要改变的飞机编号,放有id和应该显示的编号
+      changeNoList: [], // 需要改变的飞机编号,放有id和应该显示的编号
       targetLblAry: {},
       targetUavAry: [],
-      targetUavCircle: {},
+      targetUavCircleR: {},
       targetUavCircleN: {},
-      targetUavCircleNum: {},
+      targetUavCircleNumR: {},
       targetUavCircleNumN: {},
       drawerOpen: false,
       platformSprite: null, // 平台无人机
@@ -1141,6 +1148,7 @@ export default {
         leftBottom: {},
         rightBottom: {},
       }, // 自定义画布四个角的经纬度信息
+      trackGraphicsLine: null,
     };
   },
   created() {
@@ -1190,6 +1198,12 @@ export default {
         updateBy: null,
         updateTime: null,
       };
+      this.siJiaoInfo = {
+        leftTop: {},
+        rightTop: {},
+        leftBottom: {},
+        rightBottom: {},
+      };
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -1286,21 +1300,21 @@ 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;
-    },
+    // 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;
@@ -1490,6 +1504,14 @@ export default {
         this.platformGraphics.destroy(true);
         this.platformGraphics = null;
       }
+      if (this.trackGraphicsLine && this.trackGraphicsLine.length) {
+        if (this.trackGraphicsLine.parent) {
+          this.trackGraphicsLine.parent.removeChild(this.trackGraphicsLine);
+        }
+        this.trackGraphicsLine.clear();
+        this.trackGraphicsLine.destroy(true);
+        this.trackGraphicsLine = null;
+      }
 
       this.clearAllAry();
     },
@@ -1500,14 +1522,23 @@ export default {
     },
     // 处理WebSocket消息
     processMessage(data) {
-      // console.log(data);
+      if (this.title == "回放") {
+        console.log(
+          data.time,
+          this.playbackTime,
+          data.time / this.playbackTime
+        );
+        this.percentage = Math.ceil((data.time / this.playbackTime) * 100);
+      }
       // type:1平台无人机、2真实目标、3噪声目标
       switch (data.type) {
         case "1": //平台无人机
           this.showPlatformAir(data);
+
           break;
         case "2": //真实目标  R真实数据
           this.showTargetRAircraft(data, "R");
+
           break;
         case "3": //噪声目标  N噪声数据
           this.showTargetNAircraft(data, "N");
@@ -1535,6 +1566,10 @@ export default {
 
       // 添加视窗控制
       this.enableViewControl();
+      // 增加追踪线
+      this.trackGraphicsLine = new PIXI.Graphics();
+      this.trackGraphicsLine.lineStyle(1, 0xf5f7fa, 1);
+      this.pixiApp.stage.addChild(this.trackGraphicsLine);
     },
 
     showPlatformAir(platformData) {
@@ -1549,23 +1584,11 @@ export default {
         this.platformSprite.interactive = true;
         this.platformSprite.x = data.coordinateX;
         this.platformSprite.y = data.coordinateY;
-        this.platformInfo = data;
         const label = "平台无人机";
         this.allSpriteInfo.push({
           id: 100001,
           label,
         });
-        // this.platformSprite.on("click", (e) => {
-        //   if (!this.isClickGroup) {
-        //     this.firstLng = this.platformInfo.longitude;
-        //     this.firstLat = this.platformInfo.latitude;
-        //     this.isClickGroup = true;
-        //   } else {
-        //     const secondLng = this.platformInfo.longitude;
-        //     const secondLat = this.platformInfo.latitude;
-        //     this.calculateDistance(secondLng, secondLat);
-        //   }
-        // });
         this.platformData.push(this.platformSprite);
         this.pixiApp.stage.addChild(this.platformSprite);
         // 创建路径
@@ -1573,16 +1596,20 @@ export default {
         this.platformGraphics.lineStyle(1, 0x00ee00, 1);
         const point = { x: this.platformSprite.x, y: this.platformSprite.y };
         this.platformPathData = point;
-
+        this.platformInfo = data;
         this.pixiApp.stage.addChild(this.platformGraphics);
       } else {
         this.platformSprite.x = data.coordinateX;
         this.platformSprite.y = data.coordinateY;
+        // this.platformSprite.rotation =
+        //   Number(data.azimuthAngle + 90) * (Math.PI / 180);
+
         this.platformSprite.rotation = Math.atan2(
           data.northSpeed,
           data.eastSpeed
         );
-        this.platformInfo = data;
+        // this.platformInfo = data;
+        Object.assign(this.platformInfo, data);
         if (this.platformCycleCount % this.updatePlatformPathFlag == 0) {
           // 更新路径绘制
           this.updatePlatformPath(this.platformSprite.x, this.platformSprite.y);
@@ -1599,92 +1626,19 @@ export default {
       let empty = Object.keys(this.targetDataR);
       // 还没有真实数据时，先初始化数据。
       if (empty.length == 0) {
-        const targetTexture = new PIXI.Texture.from(uavTarPNG);
         for (let i = 0; i < this.targetTotal; i++) {
           const label = "目标无人机" + targetData.aircrafts[i].aircraftNumber;
-
           this.allSpriteInfo.push({
             id: targetData.aircrafts[i].aircraftNumber,
             label,
           });
           this.allId.push(targetData.aircrafts[i].aircraftNumber);
-          const group = new PIXI.Container();
-          group.id = targetData.aircrafts[i].aircraftNumber;
-          group.buttonMode = true; // 鼠标悬停时显示手型
-          group.interactive = true;
-          group.typeName = "zhenshi";
-          // 创建无人机
-          const dude = new PIXI.Sprite(targetTexture);
-          dude.anchor.set(0.5, 0.5);
-          dude.scale.set(0.01);
-
-          dude.x = targetData.aircrafts[i].coordinateX;
-          dude.y = targetData.aircrafts[i].coordinateY;
-
-          dude.id = targetData.aircrafts[i].aircraftNumber;
-          const id = dude.id + ""; // 分配唯一编号
-          this.targetDataR[`${id}`] = dude;
-          group.addChild(dude);
-
-          // 创建圆圈  圆圈相对于飞机的位置
-          const cx = dude.x - 10;
-          const cy = dude.y - 6;
-
-          //编号-圆圈
-          const circle = new PIXI.Graphics();
-          circle.beginFill(0xff0000); // 红色
-          circle.drawCircle(0, 0, 8);
-          circle.endFill();
-          circle.x = cx;
-          circle.y = cy;
-          circle.scale.set(0.4);
-          this.targetUavCircle[`${id}`] = circle;
-          group.addChild(circle);
-
-          //编号-数字
-          const text = new PIXI.Text(targetData.aircrafts[i].aircraftNumber, {
-            fontFamily: "Arial",
-            fontSize: 12,
-            fill: 0xffffff,
-            align: "center",
-          });
-          text.anchor.set(0.5);
-          // 计算文字位置以便在圆形内居中
-          text.x = cx;
-          text.y = cy;
-          text.scale.set(0.4);
-          this.targetUavCircleNum[`${id}`] = text;
-          group.addChild(text);
+          // (飞机相关数据，，是否为真实数据)
+          this.addAir(targetData.aircrafts[i], true);
           // 绑定鼠标事件，飞机隐藏
           // group.on("pointerdown", () => {
           //   this.hideSprite(group.id);
           // });
-          // group.on("click", (e) => {
-          //   const clickGroup = e.target;
-          //   if (!this.isClickGroup) {
-          //     // 第一次点击飞机
-          //     const groupId = clickGroup.id;
-          //     this.firstLng = this.targetLblAry[`${groupId}`].longitude;
-          //     this.firstLat = this.targetLblAry[`${groupId}`].latitude;
-          //     this.isClickGroup = true;
-          //   } else {
-          //     const groupId = Number(clickGroup.id);
-          //     const secondLng = this.targetLblAry[`${groupId}`].longitude;
-          //     const secondLat = this.targetLblAry[`${groupId}`].latitude;
-          //     this.calculateDistance(secondLng, secondLat);
-          //   }
-          // });
-          this.pixiApp.stage.addChild(group);
-
-          // 创建路径
-          const pathGraphics = new PIXI.Graphics();
-          pathGraphics.lineStyle(1, 0xeeee00, 1);
-          const point = { x: dude.x, y: dude.y };
-          pathGraphics.id = targetData.aircrafts[i].aircraftNumber;
-          this.pathGraphicsPointList[`${id}`] = point;
-
-          this.pathGraphicsList[`${id}`] = pathGraphics;
-          this.pixiApp.stage.addChild(pathGraphics);
         }
       } else {
         // 每次更新
@@ -1692,49 +1646,74 @@ export default {
         for (let i = 0; i < newData.length; i++) {
           const id = newData[i].aircraftNumber;
           const targetUav = this.targetDataR[`${id}`];
-          targetUav.x = newData[i].coordinateX;
-          targetUav.y = newData[i].coordinateY;
-          const eastSpeed = newData[i].eastSpeed;
-          const northSpeed = newData[i].northSpeed;
-          targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
-
-          const cx = targetUav.x - 10;
-          const cy = targetUav.y - 6;
-
-          const circle = this.targetUavCircle[`${id}`];
-          circle.x = cx;
-          circle.y = cy;
-
-          const text = this.targetUavCircleNum[`${id}`];
-          text.x = cx;
-          text.y = cy;
-          if (this.cycleCount % this.updatePathFlag == 0) {
+          if (targetUav) {
+            targetUav.x = newData[i].coordinateX;
+            targetUav.y = newData[i].coordinateY;
+            const eastSpeed = newData[i].eastSpeed;
+            const northSpeed = newData[i].northSpeed;
+            targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
+
+            const cx = targetUav.x - 10;
+            const cy = targetUav.y - 6;
+
+            const circle = this.targetUavCircleR[`${id}`];
+            circle.x = cx;
+            circle.y = cy;
+
+            const text = this.targetUavCircleNumR[`${id}`];
+            text.x = cx;
+            text.y = cy;
+            if (this.platformInfo.targetAircraftNumber == id) {
+              this.trackGraphicsLine.clear();
+              this.trackGraphicsLine.lineStyle(1, 0xf5f7fa, 1);
+              const returnData = this.calculateRelativePosition(
+                this.platformInfo.latitude,
+                this.platformInfo.longitude,
+                0,
+                newData[i].latitude,
+                newData[i].longitude,
+                0
+              );
+              this.platformInfo.distance = returnData.distance.toFixed(7);
+              this.platformInfo.bearing = returnData.bearing.toFixed(7);
+              this.trackGraphicsLine.moveTo(
+                this.platformInfo.coordinateX,
+                this.platformInfo.coordinateY
+              );
+              this.trackGraphicsLine.lineTo(
+                newData[i].coordinateX,
+                newData[i].coordinateY
+              );
+            }
+          } else {
+            this.addAir(newData[i], true);
+          }
+
+          if (targetUav && this.cycleCount % this.updatePathFlag == 0) {
             // 更新路径绘制
             this.updatePath(id, targetUav.x, targetUav.y);
           }
-          if (data.targetAircraft[0].aircrafts[i].piloted) {
+          if (this.isUpdateView && i == 0) {
             const viewSprite = this.pixiApp.stage.children.find((item) => {
               return (
-                item.id == data.targetAircraft[0].aircrafts[i].aircraftNumber
+                item.id == data.targetAircraft[0].aircrafts[0].aircraftNumber
               );
             });
-            if (this.isUpdateView) {
-              // 获取精灵的边界
-              const spriteBounds = viewSprite.getBounds();
-              // 检测是否移出画布
-              if (spriteBounds.left < 0) {
-                // 触碰到了左边界
-                this.pixiApp.stage.x += this.container.clientWidth / 2;
-              } else if (spriteBounds.right > this.container.clientWidth) {
-                // 触碰到了右边
-                this.pixiApp.stage.x -= this.container.clientWidth / 2;
-              } else if (spriteBounds.top < 0) {
-                // 触碰到了上边
-                this.pixiApp.stage.y += this.container.clientHeight / 2;
-              } else if (spriteBounds.bottom > this.container.clientHeight) {
-                // 触碰到了下边
-                this.pixiApp.stage.y -= this.container.clientHeight / 2;
-              }
+            // 获取精灵的边界
+            const spriteBounds = viewSprite.getBounds();
+            // 检测是否移出画布
+            if (spriteBounds.left < 0) {
+              // 触碰到了左边界
+              this.pixiApp.stage.x += this.container.clientWidth / 2;
+            } else if (spriteBounds.right > this.container.clientWidth) {
+              // 触碰到了右边
+              this.pixiApp.stage.x -= this.container.clientWidth / 2;
+            } else if (spriteBounds.top < 0) {
+              // 触碰到了上边
+              this.pixiApp.stage.y += this.container.clientHeight / 2;
+            } else if (spriteBounds.bottom > this.container.clientHeight) {
+              // 触碰到了下边
+              this.pixiApp.stage.y -= this.container.clientHeight / 2;
             }
           }
 
@@ -1743,13 +1722,12 @@ export default {
         if (data.targetAircraft != null) {
           for (let i = 0; i < this.targetTotal; i++) {
             const id = targetData.aircrafts[i].aircraftNumber;
-            let findItem = this.changeShowNoList.find((item) => item.id == id);
+            let index = this.changeNoList.findIndex(
+              (item) => item.changeNo == id
+            );
             // 多目标集群信息显示
             const lbl = {
               id: id,
-              showNo: findItem
-                ? findItem.showNo
-                : targetData.aircrafts[i].aircraftNumber,
               longitude: targetData.aircrafts[i].longitude.toFixed(7),
               latitude: targetData.aircrafts[i].latitude.toFixed(7),
               altitude: targetData.aircrafts[i].altitude + " m",
@@ -1758,6 +1736,24 @@ export default {
                 targetData.aircrafts[i].northSpeed.toFixed(1) + " m/s",
               skySpeed: targetData.aircrafts[i].skySpeed.toFixed(1) + " m/s",
             };
+            if (index !== -1) {
+              const findItem = this.changeNoList[index];
+              for (const key in this.targetLblAry) {
+                if (this.targetLblAry.hasOwnProperty(key)) {
+                  if (key === findItem.id) {
+                    delete this.targetLblAry[key];
+                    // 插入新属性和值
+                    this.targetLblAry[findItem.changeNo] = lbl;
+                    this.changeNoList.splice(index, 1);
+                    console.log(
+                      "this.targetLblAry",
+                      this.changeNoList,
+                      this.targetLblAry
+                    );
+                  }
+                }
+              }
+            }
             this.targetLblAry[`${id}`] = lbl;
 
             // if (this.targetLblAry.length === 0) {
@@ -1770,6 +1766,81 @@ export default {
       }
     },
 
+    // 新建一个飞机
+    addAir(data, isZhen) {
+      const targetTexture = new PIXI.Texture.from(uavTarPNG);
+      const group = new PIXI.Container();
+      group.id = data.aircraftNumber;
+      group.buttonMode = true; // 鼠标悬停时显示手型
+      group.interactive = true;
+
+      // 创建无人机
+      const dude = new PIXI.Sprite(targetTexture);
+      dude.anchor.set(0.5, 0.5);
+      dude.scale.set(0.01);
+
+      dude.x = data.coordinateX;
+      dude.y = data.coordinateY;
+
+      dude.id = data.aircraftNumber;
+      const id = dude.id + "";
+
+      group.addChild(dude);
+
+      // 创建圆圈  圆圈相对于飞机的位置
+      const cx = dude.x - 10;
+      const cy = dude.y - 6;
+
+      //编号-圆圈
+      const circle = new PIXI.Graphics();
+      circle.beginFill(0xff0000); // 红色
+      circle.drawCircle(0, 0, 8);
+      circle.endFill();
+      circle.x = cx;
+      circle.y = cy;
+      circle.scale.set(0.4);
+
+      group.addChild(circle);
+
+      //编号-数字
+      const text = new PIXI.Text(data.aircraftNumber, {
+        fontFamily: "Arial",
+        fontSize: 12,
+        fill: 0xffffff,
+        align: "center",
+      });
+      text.anchor.set(0.5);
+      // 计算文字位置以便在圆形内居中
+      text.x = cx;
+      text.y = cy;
+      text.scale.set(0.4);
+
+      group.addChild(text);
+      if (isZhen) {
+        group.typeName = "zhenshi";
+        this.targetDataR[`${id}`] = dude;
+        this.targetUavCircleR[`${id}`] = circle;
+        this.targetUavCircleNumR[`${id}`] = text;
+      } else {
+        dude.alpha = 0.5;
+        this.targetDataN[`${id}`] = dude;
+        this.targetUavCircleN[`${id}`] = circle;
+        this.targetUavCircleNumN[`${id}`] = text;
+      }
+      this.pixiApp.stage.addChild(group);
+      // 真实数据创建路径
+      if (isZhen) {
+        const pathGraphics = new PIXI.Graphics();
+        pathGraphics.lineStyle(1, 0xeeee00, 1);
+        const point = { x: dude.x, y: dude.y };
+        pathGraphics.id = data.aircraftNumber;
+        this.pathGraphicsPointList[`${id}`] = point;
+
+        this.pathGraphicsList[`${id}`] = pathGraphics;
+        this.pixiApp.stage.addChild(pathGraphics);
+      }
+    },
+
     // 无人机集群 噪音数据
     showTargetNAircraft(data) {
       const targetData = data.targetAircraft[0];
@@ -1778,56 +1849,8 @@ export default {
       let empty = Object.keys(this.targetDataN);
       // 还没有数据时，先初始化数据。
       if (empty.length == 0) {
-        const targetTexture = new PIXI.Texture.from(uavTarPNG);
         for (let i = 0; i < targetTotal; i++) {
-          const group = new PIXI.Container();
-          group.id = targetData.aircrafts[i].aircraftNumber;
-          group.interactive = true;
-          // 创建无人机
-          const dude = new PIXI.Sprite(targetTexture);
-          dude.anchor.set(0.5, 0.5);
-          dude.scale.set(0.01);
-          dude.alpha = 0.5;
-
-          dude.x = targetData.aircrafts[i].coordinateX;
-          dude.y = targetData.aircrafts[i].coordinateY;
-
-          dude.id = targetData.aircrafts[i].aircraftNumber;
-          const id = dude.id + "";
-          this.targetDataN[`${id}`] = dude;
-          // this.targetDataN.push(dude);
-          group.addChild(dude);
-
-          // 创建圆圈  圆圈相对于飞机的位置
-          const cx = dude.x - 10;
-          const cy = dude.y - 6;
-
-          //编号-圆圈
-          const circle = new PIXI.Graphics();
-          circle.beginFill(0xff0000); // 红色
-          circle.drawCircle(0, 0, 8);
-          circle.endFill();
-          circle.x = cx;
-          circle.y = cy;
-          circle.scale.set(0.4);
-          this.targetUavCircleN[`${id}`] = circle;
-          group.addChild(circle);
-
-          //编号-数字
-          const text = new PIXI.Text(targetData.aircrafts[i].aircraftNumber, {
-            fontFamily: "Arial",
-            fontSize: 12,
-            fill: 0xffffff,
-            align: "center",
-          });
-          text.anchor.set(0.5);
-          // 计算文字位置以便在圆形内居中
-          text.x = cx;
-          text.y = cy;
-          text.scale.set(0.4);
-          this.targetUavCircleNumN[`${id}`] = text;
-          group.addChild(text);
-          this.pixiApp.stage.addChild(group);
+          this.addAir(targetData.aircrafts[i], false);
         }
       } else {
         // 每次更新
@@ -1835,23 +1858,26 @@ export default {
         for (let i = 0; i < newData.length; i++) {
           const id = newData[i].aircraftNumber;
           const targetUav = this.targetDataN[`${id}`];
-
-          targetUav.x = newData[i].coordinateX;
-          targetUav.y = newData[i].coordinateY;
-          const eastSpeed = newData[i].eastSpeed;
-          const northSpeed = newData[i].northSpeed;
-          targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
-
-          const cx = targetUav.x - 10;
-          const cy = targetUav.y - 6;
-
-          const circle = this.targetUavCircleN[`${id}`];
-          circle.x = cx;
-          circle.y = cy;
-
-          const text = this.targetUavCircleNumN[`${id}`];
-          text.x = cx;
-          text.y = cy;
+          if (targetUav) {
+            targetUav.x = newData[i].coordinateX;
+            targetUav.y = newData[i].coordinateY;
+            const eastSpeed = newData[i].eastSpeed;
+            const northSpeed = newData[i].northSpeed;
+            targetUav.rotation = Math.atan2(northSpeed, eastSpeed);
+
+            const cx = targetUav.x - 10;
+            const cy = targetUav.y - 6;
+
+            const circle = this.targetUavCircleN[`${id}`];
+            circle.x = cx;
+            circle.y = cy;
+
+            const text = this.targetUavCircleNumN[`${id}`];
+            text.x = cx;
+            text.y = cy;
+          } else {
+            this.addAir(newData[i], false);
+          }
         }
       }
     },
@@ -1875,10 +1901,14 @@ export default {
         item.visible = false;
       });
       this.hideList.push(id);
-      this.changeShowNoList.push({ id: id, showNo: id });
+      // this.changeNoList.push({ id: id, changeNo: id });
     },
 
     showSprite(id) {
+      if (this.isUpdateView) {
+        // 表示是回放，不用隐藏
+        return;
+      }
       let group = [];
       this.pixiApp.stage.children.forEach((child) => {
         // 检查 child 是否是 Container 类型
@@ -1888,44 +1918,41 @@ export default {
           }
         }
       });
+      // group有三个，真实飞机、噪音飞机、轨迹
       if (this.hideList.includes(id)) {
         const maxNum = Math.max(...this.allId) + 1;
         group.forEach((item) => {
-          item.children.forEach((item) => {
-            if (item instanceof PIXI.Text) {
-              item.text = maxNum;
-            }
-          });
-          for (let i = 0; i < this.changeShowNoList.length; i++) {
-            if (this.changeShowNoList[i].id == id) {
-              this.$set(this.changeShowNoList[i], "showNo", maxNum);
-              break;
-            }
-          }
           // 已经隐藏了，要显示
           if (item.typeName) {
             const msg = "SHOW:" + item.id;
             this.webSocket.send(msg);
+            this.changeNoList.push({ id: id, changeNo: maxNum });
+            let index = this.hideList.indexOf(id);
+            if (index > -1) {
+              this.hideList.splice(index, 1);
+            }
+            this.allId.push(maxNum);
           }
 
-          item.visible = true;
-          let index = this.hideList.indexOf(id);
-          if (index > -1) {
-            this.hideList.splice(index, 1);
-          }
-          this.allId.push(maxNum);
+          // item.visible = true;
         });
       } else {
         // 隐藏
+        console.log("group", group);
         group.forEach((item) => {
           if (item.typeName) {
             const msg = "DISAPPEAR:" + item.id;
             this.webSocket.send(msg);
+
+            this.hideList.push(id);
+          }
+          // 只隐藏飞机，不隐藏轨迹
+          if (!(item instanceof PIXI.Graphics)) {
+            item.visible = false;
           }
-          item.visible = false;
         });
-        this.hideList.push(id);
-        this.changeShowNoList.push({ id: id, showNo: id });
+
+        // this.changeNoList.push({ id: id, changeNo: id });
       }
     },
     // 添加视窗控制
@@ -2116,19 +2143,6 @@ export default {
     editFormationInfo(row) {
       this.formationInfoForm = row;
       this.drawerOpen = true;
-      // this.$notify({
-      //   title: "画布的经纬度范围",
-      //   dangerouslyUseHTMLString: true,
-      //   message: `左上角：${JSON.stringify(
-      //     this.siJiaoInfo.leftTop
-      //   )};<br/>右上角：${JSON.stringify(
-      //     this.siJiaoInfo.rightTop
-      //   )};<br/>左下角：${JSON.stringify(
-      //     this.siJiaoInfo.leftBottom
-      //   )};<br/>右下角：${JSON.stringify(this.siJiaoInfo.rightBottom)}<br/>`,
-      //   duration: 0,
-      //   position: "bottom-left",
-      // });
     },
 
     handleDrawerSubmit() {
@@ -2216,6 +2230,9 @@ export default {
       this.showTrajectory = false;
       this.isUpdateView = false;
       this.isClickGroup = false;
+      setTimeout(() => {
+        this.getList();
+      }, 1500);
     },
 
     closeUpdataDialog() {
@@ -2257,9 +2274,9 @@ export default {
     clearAllAry() {
       this.targetLblAry = {};
       this.targetUavAry = [];
-      this.targetUavCircle = {};
+      this.targetUavCircleR = {};
       this.targetUavCircleN = {};
-      this.targetUavCircleNum = {};
+      this.targetUavCircleNumR = {};
       this.targetUavCircleNumN = {};
       this.configList = [
         "经度",
@@ -2275,7 +2292,7 @@ export default {
       };
       this.hideList = [];
       this.allId = [];
-      this.changeShowNoList = [];
+      this.changeNoList = [];
       this.curLongitude = null;
       this.curLatitude = null;
       this.curAltitude = null;
@@ -2301,6 +2318,61 @@ export default {
       this.platformPathData = {};
       this.platformInfo = {};
       this.platformData = [];
+      this.allSpriteInfo = [];
+      this.isClickGroup = false;
+      this.firstLng = null;
+      this.firstLat = null;
+      this.playbackTime = null;
+      this.firstAir = "";
+      this.secondAir = "";
+    },
+    // 综合计算（距离、方位角、航向夹角）
+    calculateRelativePosition(lat1, lon1, heading1, lat2, lon2, heading2) {
+      const distance = this.calculateDistance(lat1, lon1, lat2, lon2);
+      const bearing = this.calculateBearing(lat1, lon1, lat2, lon2);
+      // const headingDiff = this.calculateHeadingDiff(heading1, heading2);
+
+      return {
+        distance: distance, // 两飞机距离（米）
+        bearing: bearing, // 飞机2相对于飞机1的方位角（0°~360°）
+        // headingDiff: headingDiff, // 两飞机航向夹角（0°~180°）
+      };
+    },
+    // 计算两架飞机的航向夹角（航向差）
+    calculateHeadingDiff(heading1, heading2) {
+      const diff = Math.abs(heading1 - heading2);
+      return diff > 180 ? 360 - diff : diff;
+    },
+    // 计算飞机2相对于飞机1的方位角
+    calculateBearing(lat1, lon1, lat2, lon2) {
+      const phi1 = (lat1 * Math.PI) / 180;
+      const lambda1 = (lon1 * Math.PI) / 180;
+      const phi2 = (lat2 * Math.PI) / 180;
+      const lambda2 = (lon2 * Math.PI) / 180;
+
+      const y = Math.sin(lambda2 - lambda1) * Math.cos(phi2);
+      const x =
+        Math.cos(phi1) * Math.sin(phi2) -
+        Math.sin(phi1) * Math.cos(phi2) * Math.cos(lambda2 - lambda1);
+      let theta = (Math.atan2(y, x) * 180) / Math.PI;
+      return (theta + 360) % 360; // 确保在0°~360°范围内
+    },
+    // 计算两架飞机之间的距离（Haversine 公式）
+    calculateDistance(lat1, lon1, lat2, lon2) {
+      const R = 6371000; // 地球半径（米）
+      const phi1 = (lat1 * Math.PI) / 180;
+      const phi2 = (lat2 * Math.PI) / 180;
+      const deltaPhi = ((lat2 - lat1) * Math.PI) / 180;
+      const deltaLambda = ((lon2 - lon1) * Math.PI) / 180;
+
+      const a =
+        Math.sin(deltaPhi / 2) * Math.sin(deltaPhi / 2) +
+        Math.cos(phi1) *
+          Math.cos(phi2) *
+          Math.sin(deltaLambda / 2) *
+          Math.sin(deltaLambda / 2);
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+      return R * c; // 返回距离（米）
     },
   },
 };