飞机和轨迹等按照id去寻找、增加居中按钮、计算两点间距离、自定义编队四角的经纬度提醒

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

@@ -452,7 +452,7 @@
               <div style="position: absolute; top: 5px; left: 5px">
                 <span>经度：{{ nowlongitude }}</span
                 ><br />
-                <span>经度：{{ nowlatitude }}</span>
+                <span>纬度：{{ nowlatitude }}</span>
               </div>
             </div>
             <div class="right" style="width: 25%; height: 800px">
@@ -461,9 +461,8 @@
                 <li
                   v-for="(item, index) in formationInfoList"
                   :key="index"
-                  @click="editFormationInfo(item)"
+                  @dblclick="editFormationInfo(item)"
                 >
-                  <!-- @click="editFormationInfo(item)" -->
                   <div style="cursor: pointer">
                     <div>
                       <span>编号：&nbsp;&nbsp;</span
@@ -599,6 +598,31 @@
             >确 定</el-button
           >
         </div>
+        <ul style="color: rgb(125 121 121)">
+          <li>
+            <span class="info">左上角：</span><br />
+            经度：{{ this.siJiaoInfo.leftTop.lng }}<br />
+            纬度：{{ this.siJiaoInfo.leftTop.lat }}
+          </li>
+          <li>
+            <span class="info">右上角：</span><br />
+            经度：{{ this.siJiaoInfo.rightTop.lng }}<br />纬度：{{
+              this.siJiaoInfo.rightTop.lat
+            }}
+          </li>
+          <li>
+            <span class="info">左下角：</span><br />
+            经度：{{ this.siJiaoInfo.leftBottom.lng }}<br />纬度：{{
+              this.siJiaoInfo.leftBottom.lat
+            }}
+          </li>
+          <li>
+            <span class="info">右下角：</span><br />
+            经度：{{ this.siJiaoInfo.rightBottom.lng }}<br />纬度：{{
+              this.siJiaoInfo.rightBottom.lat
+            }}
+          </li>
+        </ul>
       </div>
     </el-drawer>
 
@@ -616,7 +640,8 @@
       <div class="container">
         <div>
           <el-row type="flex" align="middle" style="height: 40px">
-            <el-col :span="20">
+            <el-col :span="24">
+              <el-button @click="handleCenter" type="primary">居中</el-button>
               <el-button
                 v-if="!isUpdateView"
                 @click="transFormation"
@@ -626,8 +651,47 @@
               <el-button v-if="!isUpdateView" @click="endHandle" type="danger"
                 >结束</el-button
               >
+
+              <div class="distance">
+                <el-select
+                  v-model="firstAir"
+                  @change="handleFirstAir"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in allSpriteInfo"
+                    :key="item.id"
+                    :label="item.label"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
+                ---&gt;
+                <el-select
+                  v-model="secondAir"
+                  @change="handleSecondAir"
+                  placeholder="请选择"
+                >
+                  <el-option
+                    v-for="item in allSpriteInfo"
+                    :key="item.id"
+                    :label="item.label"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
+                =
+                <el-input
+                  placeholder="距离"
+                  v-model="airDistance"
+                  :disabled="true"
+                  style="width: 220px"
+                >
+                  <template slot="append">m</template>
+                </el-input>
+              </div>
               <el-progress
-                style="margin: 0 auto"
+                style="width: 600px; display: inline-block; margin-left: 20px"
                 :text-inside="true"
                 :stroke-width="26"
                 v-if="isUpdateView"
@@ -684,7 +748,7 @@
           </div>
           <el-divider content-position="left">目标无人机群</el-divider>
           <div style="height: 550px; overflow: auto">
-            <li v-for="(item, index) in targetLblAry" :key="index">
+            <li v-for="(item, key) in targetLblAry" :key="key" class="item">
               <div
                 v-if="!hideList.includes(item.id)"
                 @click="showSprite(item.id)"
@@ -1023,12 +1087,12 @@ export default {
       // 鼠标当前的经纬度
       nowlongitude: null,
       nowlatitude: null,
-      targetDataR: [],
-      targetDataN: [],
+      targetDataR: {},
+      targetDataN: {},
       platformData: [],
       // 真实路径的集合
-      pathGraphicsList: [],
-      pathGraphicsPointList: [],
+      pathGraphicsList: {},
+      pathGraphicsPointList: {},
       isUpdateView: false, // 是否开启实现追踪，在回放时开启
       percentage: 50,
       // 多久更新一次轨迹
@@ -1051,12 +1115,12 @@ export default {
       hideList: [], // 当下隐藏的飞机数组
       allId: [], // 所有飞机的id
       changeShowNoList: [], // 需要改变的飞机编号,放有id和应该显示的编号
-      targetLblAry: [],
+      targetLblAry: {},
       targetUavAry: [],
-      targetUavCircle: [],
-      targetUavCircleN: [],
-      targetUavCircleNum: [],
-      targetUavCircleNumN: [],
+      targetUavCircle: {},
+      targetUavCircleN: {},
+      targetUavCircleNum: {},
+      targetUavCircleNumN: {},
       drawerOpen: false,
       platformSprite: null, // 平台无人机
       // 平台无人机显示的数据
@@ -1064,6 +1128,19 @@ export default {
       platformPathData: {}, //平台无人机位置
       platformGraphics: null, //平台无人机轨迹
       playbackTime: null, // 回放的时间
+      isClickGroup: false, // 是否点击了飞机，在计算两飞机距离时使用
+      firstLng: null, // 第一次点击的飞机的经纬度
+      firstLat: null,
+      airDistance: null, // 两点间距离
+      allSpriteInfo: [], // 所有飞机的信息
+      firstAir: "",
+      secondAir: "",
+      siJiaoInfo: {
+        leftTop: {},
+        rightTop: {},
+        leftBottom: {},
+        rightBottom: {},
+      }, // 自定义画布四个角的经纬度信息
     };
   },
   created() {
@@ -1159,6 +1236,11 @@ export default {
               this.form.customizedMultiTargetFormation,
               "fixedWing"
             );
+            const leftTop = this.calculateLatLng(0, 800);
+            const rightTop = this.calculateLatLng(800, 0);
+            const leftBottom = this.calculateLatLng(0, 800);
+            const rightBottom = this.calculateLatLng(800, 800);
+            this.siJiaoInfo = { leftTop, rightTop, leftBottom, rightBottom };
           });
         }
         this.title = "修改任务数据";
@@ -1168,12 +1250,6 @@ export default {
     // 根据后端返回的自定义编队信息，显示飞机位置
     airPosShow(info, type) {
       let texture = new PIXI.Texture.from(uavTarPNG);
-      // if (type == "fixedWing") {
-      //   texture = new PIXI.Texture.from("../../textures/uav-tar.png");
-      // } else {
-      //   // 旋翼机型 需要改
-      //   texture = new PIXI.Texture.from("../../textures/uav-tar.png");
-      // }
       // TODO 需要给精灵加上id,就是数据中的number
       info.forEach((item) => {
         const { x, y } = this.calculateXY(item.longitude, item.latitude);
@@ -1209,6 +1285,45 @@ 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;
+    },
+    // 选择第二个飞机
+    handleSecondAir(val) {
+      let firstLng, firstLat, secondLng, secondLat;
+      if (this.firstAir == 100001) {
+        firstLng = this.platformInfo.longitude;
+        firstLat = this.platformInfo.latitude;
+      } else {
+        firstLng = this.targetLblAry[`${this.firstAir}`].longitude;
+        firstLat = this.targetLblAry[`${this.firstAir}`].latitude;
+      }
+      if (this.secondAir == 100001) {
+        secondLng = this.platformInfo.longitude;
+        secondLat = this.platformInfo.latitude;
+      } else {
+        secondLng = this.targetLblAry[`${val}`].longitude;
+        secondLat = this.targetLblAry[`${val}`].latitude;
+      }
+      this.calculateDistance(firstLng, firstLat, secondLng, secondLat);
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate((valid) => {
@@ -1328,6 +1443,22 @@ export default {
       this.getList();
       this.showTrajectory = false;
     },
+    handleCenter() {
+      const firstKey = Object.keys(this.targetDataR)[0];
+      // 获取到第一个飞机的位置
+      const posX = this.targetDataR[`${firstKey}`].x;
+      const posY = this.targetDataR[`${firstKey}`].y;
+      // 获取画布的中心点的位置
+      const centerX = this.container.clientWidth / 2;
+      const centerY = this.container.clientHeight / 2;
+      // 缩放的值
+      const scaleX = this.pixiApp.stage.scale.x || 1;
+      const scaleY = this.pixiApp.stage.scale.y || 1;
+      // 计算需要移动的距离
+      const offsetX = centerX - posX * scaleX;
+      const offsetY = centerY - posY * scaleY;
+      this.pixiApp.stage.position.set(offsetX, offsetY);
+    },
     destroyTrajectory() {
       if (this.webSocket) {
         this.webSocket.close();
@@ -1402,13 +1533,6 @@ export default {
       this.pixiApp.renderer.backgroundColor = 0x66ccff;
       this.container.appendChild(this.pixiApp.view);
 
-      //this.createPlane();
-
-      // 初始化路径绘制对象
-      // this.pathGraphics = new PIXI.Graphics();
-      // this.pathGraphics.stroke({ pixelLine: true });
-      // this.pixiApp.stage.addChild(this.pathGraphics);
-
       // 添加视窗控制
       this.enableViewControl();
     },
@@ -1420,8 +1544,28 @@ export default {
         this.platformSprite = new PIXI.Sprite(platformTexture);
         this.platformSprite.anchor.set(0.5, 0.5);
         this.platformSprite.scale.set(0.1);
+
+        this.platformSprite.buttonMode = true; // 鼠标悬停时显示手型
+        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);
         // 创建路径
@@ -1429,8 +1573,8 @@ export default {
         this.platformGraphics.lineStyle(1, 0x00ee00, 1);
         const point = { x: this.platformSprite.x, y: this.platformSprite.y };
         this.platformPathData = point;
+
         this.pixiApp.stage.addChild(this.platformGraphics);
-        this.platformInfo = data;
       } else {
         this.platformSprite.x = data.coordinateX;
         this.platformSprite.y = data.coordinateY;
@@ -1452,10 +1596,17 @@ export default {
     showTargetRAircraft(data) {
       const targetData = data.targetAircraft[0];
       this.targetTotal = targetData.aircrafts.length;
+      let empty = Object.keys(this.targetDataR);
       // 还没有真实数据时，先初始化数据。
-      if (this.targetDataR.length === 0) {
+      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;
@@ -1470,8 +1621,9 @@ export default {
           dude.x = targetData.aircrafts[i].coordinateX;
           dude.y = targetData.aircrafts[i].coordinateY;
 
-          dude.id = targetData.aircrafts[i].aircraftNumber; // 分配唯一编号
-          this.targetDataR.push(dude);
+          dude.id = targetData.aircrafts[i].aircraftNumber;
+          const id = dude.id + ""; // 分配唯一编号
+          this.targetDataR[`${id}`] = dude;
           group.addChild(dude);
 
           // 创建圆圈  圆圈相对于飞机的位置
@@ -1486,7 +1638,7 @@ export default {
           circle.x = cx;
           circle.y = cy;
           circle.scale.set(0.4);
-          this.targetUavCircle.push(circle);
+          this.targetUavCircle[`${id}`] = circle;
           group.addChild(circle);
 
           //编号-数字
@@ -1501,12 +1653,27 @@ export default {
           text.x = cx;
           text.y = cy;
           text.scale.set(0.4);
-          this.targetUavCircleNum.push(text);
+          this.targetUavCircleNum[`${id}`] = text;
           group.addChild(text);
           // 绑定鼠标事件，飞机隐藏
           // 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);
 
           // 创建路径
@@ -1514,49 +1681,37 @@ export default {
           pathGraphics.lineStyle(1, 0xeeee00, 1);
           const point = { x: dude.x, y: dude.y };
           pathGraphics.id = targetData.aircrafts[i].aircraftNumber;
-          this.pathGraphicsPointList.push(point);
-          // pathGraphics.moveTo(dude.x, dude.y);
-          // pathGraphics.lineTo(dude.x, dude.y);
+          this.pathGraphicsPointList[`${id}`] = point;
 
-          this.pathGraphicsList.push(pathGraphics);
+          this.pathGraphicsList[`${id}`] = pathGraphics;
           this.pixiApp.stage.addChild(pathGraphics);
-
-          if (targetData.aircrafts[i].piloted) {
-            // const point = { x: dude.x, y: dude.y };
-            // this.targetUavPath.push(point);
-            // 领航飞机的位置，在转换队形时有用到
-            this.curLongitude = targetData.aircrafts[i].longitude;
-            this.curLatitude = targetData.aircrafts[i].latitude;
-            this.curAltitude = targetData.aircrafts[i].altitude;
-          }
         }
       } else {
         // 每次更新
-        for (let i = 0; i < this.targetDataR.length; i++) {
-          const targetUav = this.targetDataR[i];
-
-          targetUav.x = data.targetAircraft[0].aircrafts[i].coordinateX;
-          targetUav.y = data.targetAircraft[0].aircrafts[i].coordinateY;
-          const eastSpeed = data.targetAircraft[0].aircrafts[i].eastSpeed;
-          const northSpeed = data.targetAircraft[0].aircrafts[i].northSpeed;
+        const newData = data.targetAircraft[0].aircrafts;
+        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[i];
+          const circle = this.targetUavCircle[`${id}`];
           circle.x = cx;
           circle.y = cy;
 
-          const text = this.targetUavCircleNum[i];
+          const text = this.targetUavCircleNum[`${id}`];
           text.x = cx;
           text.y = cy;
-
           if (this.cycleCount % this.updatePathFlag == 0) {
             // 更新路径绘制
-            this.updatePath(i, targetUav.x, targetUav.y);
+            this.updatePath(id, targetUav.x, targetUav.y);
           }
-
           if (data.targetAircraft[0].aircrafts[i].piloted) {
             const viewSprite = this.pixiApp.stage.children.find((item) => {
               return (
@@ -1582,30 +1737,34 @@ export default {
               }
             }
           }
+
+          this.cycleCount++;
         }
-        this.cycleCount++;
-      }
-      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);
-          // 多目标集群信息显示
-          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",
-            eastSpeed: targetData.aircrafts[i].eastSpeed.toFixed(1) + " m/s",
-            northSpeed: targetData.aircrafts[i].northSpeed.toFixed(1) + " m/s",
-            skySpeed: targetData.aircrafts[i].skySpeed.toFixed(1) + " m/s",
-          };
-          if (this.targetLblAry.length === 0) {
-            this.targetLblAry.push(lbl);
-          } else {
-            this.targetLblAry.splice(i, 1, lbl);
+        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);
+            // 多目标集群信息显示
+            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",
+              eastSpeed: targetData.aircrafts[i].eastSpeed.toFixed(1) + " m/s",
+              northSpeed:
+                targetData.aircrafts[i].northSpeed.toFixed(1) + " m/s",
+              skySpeed: targetData.aircrafts[i].skySpeed.toFixed(1) + " m/s",
+            };
+            this.targetLblAry[`${id}`] = lbl;
+
+            // if (this.targetLblAry.length === 0) {
+            //   this.targetLblAry.push(lbl);
+            // } else {
+            //   this.targetLblAry.splice(i, 1, lbl);
+            // }
           }
         }
       }
@@ -1614,11 +1773,13 @@ export default {
     // 无人机集群 噪音数据
     showTargetNAircraft(data) {
       const targetData = data.targetAircraft[0];
-      this.targetTotal = targetData.aircrafts.length;
+      // this.targetTotal = targetData.aircrafts.length;
+      const targetTotal = targetData.aircrafts.length;
+      let empty = Object.keys(this.targetDataN);
       // 还没有数据时，先初始化数据。
-      if (this.targetDataN.length === 0) {
+      if (empty.length == 0) {
         const targetTexture = new PIXI.Texture.from(uavTarPNG);
-        for (let i = 0; i < this.targetTotal; i++) {
+        for (let i = 0; i < targetTotal; i++) {
           const group = new PIXI.Container();
           group.id = targetData.aircrafts[i].aircraftNumber;
           group.interactive = true;
@@ -1632,7 +1793,9 @@ export default {
           dude.y = targetData.aircrafts[i].coordinateY;
 
           dude.id = targetData.aircrafts[i].aircraftNumber;
-          this.targetDataN.push(dude);
+          const id = dude.id + "";
+          this.targetDataN[`${id}`] = dude;
+          // this.targetDataN.push(dude);
           group.addChild(dude);
 
           // 创建圆圈  圆圈相对于飞机的位置
@@ -1647,7 +1810,7 @@ export default {
           circle.x = cx;
           circle.y = cy;
           circle.scale.set(0.4);
-          this.targetUavCircleN.push(circle);
+          this.targetUavCircleN[`${id}`] = circle;
           group.addChild(circle);
 
           //编号-数字
@@ -1662,29 +1825,31 @@ export default {
           text.x = cx;
           text.y = cy;
           text.scale.set(0.4);
-          this.targetUavCircleNumN.push(text);
+          this.targetUavCircleNumN[`${id}`] = text;
           group.addChild(text);
           this.pixiApp.stage.addChild(group);
         }
       } else {
         // 每次更新
-        for (let i = 0; i < this.targetDataN.length; i++) {
-          const targetUav = this.targetDataN[i];
-
-          targetUav.x = data.targetAircraft[0].aircrafts[i].coordinateX;
-          targetUav.y = data.targetAircraft[0].aircrafts[i].coordinateY;
-          const eastSpeed = data.targetAircraft[0].aircrafts[i].eastSpeed;
-          const northSpeed = data.targetAircraft[0].aircrafts[i].northSpeed;
+        const newData = data.targetAircraft[0].aircrafts;
+        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[i];
+          const circle = this.targetUavCircleN[`${id}`];
           circle.x = cx;
           circle.y = cy;
 
-          const text = this.targetUavCircleNumN[i];
+          const text = this.targetUavCircleNumN[`${id}`];
           text.x = cx;
           text.y = cy;
         }
@@ -1811,36 +1976,24 @@ export default {
         this.pixiApp.stage.scale.y *= zoomFactor;
       });
 
-      // 画布点击事件
-      // this.pixiApp.renderer.view.addEventListener("click", (event) => {
-      //   const position = new PIXI.Point(event.clientX, event.clientY);
-      //   // 需要换算成画布位置
-      //   // const localPosition = app.renderer.plugins.interaction.mouse.global;
+      // 画布双击事件;
+      // this.pixiApp.renderer.view.addEventListener("dblclick", (event) => {
+      //   console.log("event", event);
+      //   const position = new PIXI.Point(event.offsetX, event.offsetY);
+      //   // 获取鼠标在画布上的位置
+      //   const localPosition =
+      //     this.pixiApp.renderer.plugins.interaction.mouse.global;
       //   console.log("画布被点击的位置:", position);
-
-      //   // 可以检查点击位置是否有精灵覆盖
       // });
     },
     // 更新无人机飞行路径
-    updatePath(index, x, y) {
-      const lastPointX = this.pathGraphicsPointList[index].x;
-      const lastPointY = this.pathGraphicsPointList[index].y;
-      console.log();
-      this.pathGraphicsList[index].moveTo(lastPointX, lastPointY);
-      this.pathGraphicsList[index].lineTo(x, y);
-      this.pathGraphicsPointList[index].x = x;
-      this.pathGraphicsPointList[index].y = y;
-      // this.pathGraphics.lineStyle(1, 0xeeee00, 1);
-      // if (this.targetUavPath.length <= 1) {
-      //   const firstData = this.targetUavPath[this.targetUavPath.length - 1];
-      //   this.lastPosition = firstData;
-      //   this.pathGraphics.moveTo(firstData.x, firstData.y);
-      // } else {
-      //   this.pathGraphics.moveTo(this.lastPosition.x, this.lastPosition.y);
-      //   const nextPos = this.targetUavPath[this.targetUavPath.length - 1];
-      //   this.pathGraphics.lineTo(nextPos.x, nextPos.y);
-      //   this.lastPosition = nextPos;
-      // }
+    updatePath(id, x, y) {
+      const lastPointX = this.pathGraphicsPointList[`${id}`].x;
+      const lastPointY = this.pathGraphicsPointList[`${id}`].y;
+      this.pathGraphicsList[`${id}`].moveTo(lastPointX, lastPointY);
+      this.pathGraphicsList[`${id}`].lineTo(x, y);
+      this.pathGraphicsPointList[`${id}`].x = x;
+      this.pathGraphicsPointList[`${id}`].y = y;
     },
     // 更新平台无人机飞行路径
     updatePlatformPath(x, y) {
@@ -1890,14 +2043,7 @@ export default {
     // 增加飞机编队
     addAirSprite() {
       // 判断是哪个机型
-      let texture;
-      texture = new PIXI.Texture.from(uavTarPNG);
-      // if (this.form && this.form.multiTarget == "1") {
-      //   texture = new PIXI.Texture.from("../../textures/uav-tar.png");
-      // } else if (this.form && this.form.multiTarget == "2") {
-      //   // 旋翼机型 需要改
-      //   texture = new PIXI.Texture.from("../../textures/uav-tar.png");
-      // }
+      let texture = new PIXI.Texture.from(uavTarPNG);
       // 创建飞机
       const airSprite = new PIXI.Sprite(texture);
       airSprite.anchor.set(0.5, 0.5);
@@ -1970,6 +2116,19 @@ 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() {
@@ -2056,6 +2215,7 @@ export default {
       this.destroyTrajectory();
       this.showTrajectory = false;
       this.isUpdateView = false;
+      this.isClickGroup = false;
     },
 
     closeUpdataDialog() {
@@ -2095,13 +2255,12 @@ export default {
     },
 
     clearAllAry() {
-      this.targetLblAry = [];
-      this.targetLblAry = [];
+      this.targetLblAry = {};
       this.targetUavAry = [];
-      this.targetUavCircle = [];
-      this.targetUavCircleN = [];
-      this.targetUavCircleNum = [];
-      this.targetUavCircleNumN = [];
+      this.targetUavCircle = {};
+      this.targetUavCircleN = {};
+      this.targetUavCircleNum = {};
+      this.targetUavCircleNumN = {};
       this.configList = [
         "经度",
         "纬度",
@@ -2123,10 +2282,10 @@ export default {
       this.pathGraphics = null;
       this.cycleCount = 0;
       this.isUpdateView = false;
-      this.pathGraphicsList = [];
-      this.pathGraphicsPointList = [];
-      this.targetDataR = [];
-      this.targetDataN = [];
+      this.pathGraphicsList = {};
+      this.pathGraphicsPointList = {};
+      this.targetDataR = {};
+      this.targetDataN = {};
       this.nowlongitude = null;
       this.nowlatitude = null;
       this.submitInfoFlag = false;
@@ -2174,4 +2333,13 @@ export default {
   height: 800px;
   /* 当内容超出元素边界时显示滚动条 */
 }
+.distance {
+  display: inline-block;
+  width: 750px;
+  margin-left: 50px;
+}
+.info {
+  font-weight: 700;
+  color: #4f4a4a;
+}
 </style>