实时更新距离和角度

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

@@ -668,6 +668,7 @@
                   v-model="firstAir"
                   @change="handleFirstAir"
                   placeholder="请选择"
+                  style="width: 180px"
                 >
                   <el-option
                     v-for="item in allSpriteInfo"
@@ -682,6 +683,8 @@
                   v-model="secondAir"
                   @change="handleSecondAir"
                   placeholder="请选择"
+                  style="width: 180px"
+                  :disabled="!firstAir"
                 >
                   <el-option
                     v-for="item in allSpriteInfo"
@@ -698,11 +701,21 @@
                   :disabled="true"
                   style="width: 220px"
                 >
+                  <template slot="prepend">距离</template>
                   <template slot="append">m</template>
                 </el-input>
+                --
+                <el-input
+                  placeholder="夹角"
+                  v-model="airAngle"
+                  :disabled="true"
+                  style="width: 220px"
+                >
+                  <template slot="prepend">夹角</template>
+                </el-input>
               </div>
               <el-progress
-                style="width: 600px; display: inline-block; margin-left: 20px"
+                style="width: 450px; display: inline-block"
                 :text-inside="true"
                 :stroke-width="26"
                 v-if="isUpdateView"
@@ -1161,6 +1174,7 @@ export default {
       firstLng: null, // 第一次点击的飞机的经纬度
       firstLat: null,
       airDistance: null, // 两点间距离
+      airAngle: null, // 两点间夹角
       allSpriteInfo: [], // 所有飞机的信息
       firstAir: "",
       secondAir: "",
@@ -1171,6 +1185,8 @@ export default {
         rightBottom: {},
       }, // 自定义画布四个角的经纬度信息
       trackGraphicsLine: null,
+      // 是否持续更新选择的两个飞机的距离和夹角
+      twoAirInfo: false,
     };
   },
   created() {
@@ -1325,30 +1341,32 @@ export default {
     // 选择第一个飞机
     handleFirstAir(val) {
       this.secondAir = null;
+      this.twoAirInfo = false;
     },
     // 选择第二个飞机
     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.airDistance = this.calculateDistance(
-        firstLat,
-        firstLng,
-        secondLat,
-        secondLng
-      );
+      this.twoAirInfo = true;
+      // 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.airDistance = this.calculateDistance(
+      //   firstLat,
+      //   firstLng,
+      //   secondLat,
+      //   secondLng
+      // );
     },
     /** 提交按钮 */
     submitForm() {
@@ -1672,6 +1690,35 @@ export default {
             isHide = true;
           }
         }
+        if (this.twoAirInfo) {
+          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[`${this.secondAir}`].longitude;
+            secondLat = this.targetLblAry[`${this.secondAir}`].latitude;
+          }
+          this.airDistance = this.calculateDistance(
+            firstLat,
+            firstLng,
+            secondLat,
+            secondLng
+          );
+          this.airAngle = this.calculateDistance(
+            firstLat,
+            firstLng,
+            secondLat,
+            secondLng
+          );
+        }
         for (let i = 0; i < newData.length; i++) {
           const id = newData[i].aircraftNumber;
           const targetUav = this.targetDataR[`${id}`];
@@ -1739,33 +1786,6 @@ export default {
             // 更新路径绘制
             this.updatePath(id, targetUav.x, targetUav.y);
           }
-          // if (this.isUpdateView && i == 0) {
-          //   console.log(
-          //     "11",
-          //     data.targetAircraft[0].aircrafts[0].aircraftNumber
-          //   );
-          //   const viewSprite = this.pixiApp.stage.children.find((item) => {
-          //     return (
-          //       item.id == data.targetAircraft[0].aircrafts[0].aircraftNumber
-          //     );
-          //   });
-          //   // 获取精灵的边界
-          //   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;
-          //   }
-          // }
 
           this.cycleCount++;
         }
@@ -2388,7 +2408,10 @@ export default {
       this.showTrajectory = false;
       this.isUpdateView = false;
       this.isClickGroup = false;
+      this.twoAirInfo = false;
       this.loading = true;
+      this.airDistance = null;
+      this.airAngle = null;
       setTimeout(() => {
         this.getList();
       }, 1500);
@@ -2582,7 +2605,7 @@ export default {
 }
 .distance {
   display: inline-block;
-  width: 750px;
+  width: 1000px;
   margin-left: 50px;
 }
 .info {