自定义编队可修改、删除，噪音编号设置透明

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

@@ -518,6 +518,7 @@
       size="20%"
       :visible.sync="drawerOpen"
       direction="rtl"
+      :before-close="drawerClose"
       :show-close="false"
       :wrapperClosable="false"
     >
@@ -532,6 +533,7 @@
             <el-input
               v-model="formationInfoForm.number"
               placeholder="请输入编号"
+              :disabled="this.addOrUpdate == 'update'"
             />
           </el-form-item>
           <el-form-item label="经度" prop="longitude">
@@ -594,6 +596,7 @@
           </el-form-item>
         </el-form>
         <div class="demo-drawer__footer">
+          <el-button type="danger" @click="canvasInfoDel">删 除</el-button>
           <el-button type="primary" @click="handleDrawerSubmit"
             >确 定</el-button
           >
@@ -1068,15 +1071,17 @@ export default {
       formationInfoList: [],
       formationInfoForm: {
         number: null,
-        longitude: 100.0,
-        latitude: 100.0,
-        altitude: 100.0,
-        eastSpeed: 100.0,
-        northSpeed: 100.0,
-        skySpeed: 100.0,
+        longitude: null,
+        latitude: null,
+        altitude: null,
+        eastSpeed: null,
+        northSpeed: null,
+        skySpeed: null,
         flightPathType: "直线",
-        positionNoise: 18.2,
+        positionNoise: null,
       },
+      // 判断填写的编队信息是新增加的还是修改之前的
+      addOrUpdate: "add",
       // 自定义编队的飞机信息集合
       formationInfoAirDataList: [],
       // 编辑编队信息的
@@ -1255,6 +1260,7 @@ export default {
             const leftBottom = this.calculateLatLng(0, 800);
             const rightBottom = this.calculateLatLng(800, 800);
             this.siJiaoInfo = { leftTop, rightTop, leftBottom, rightBottom };
+            this.addAirSprite();
           });
         }
         this.title = "修改任务数据";
@@ -1349,12 +1355,15 @@ export default {
             updateTask(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
+              this.closeUpdataDialog();
               this.getList();
             });
           } else {
             addTask(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
+
+              this.closeUpdataDialog();
               this.getList();
             });
           }
@@ -1523,11 +1532,6 @@ export default {
     // 处理WebSocket消息
     processMessage(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噪声目标
@@ -1823,6 +1827,8 @@ export default {
         this.targetUavCircleNumR[`${id}`] = text;
       } else {
         dude.alpha = 0.5;
+        circle.alpha = 0.5;
+        text.alpha = 0.5;
         this.targetDataN[`${id}`] = dude;
         this.targetUavCircleN[`${id}`] = circle;
         this.targetUavCircleNumN[`${id}`] = text;
@@ -2041,6 +2047,7 @@ export default {
         }
       });
     },
+
     // 初始化编队的画布
     initFormationApp() {
       this.pixiCanvas = this.$refs.pixiCanvas;
@@ -2109,9 +2116,21 @@ export default {
 
         // 计算对应经纬度
         const { lat, lng } = this.calculateLatLng(mouseX, mouseY);
+        this.formationInfoForm = {
+          number: null,
+          longitude: null,
+          latitude: null,
+          altitude: null,
+          eastSpeed: null,
+          northSpeed: null,
+          skySpeed: null,
+          flightPathType: "直线",
+          positionNoise: null,
+        };
         this.formationInfoForm.longitude = lng;
         this.formationInfoForm.latitude = lat;
         this.drawerOpen = true;
+        this.addOrUpdate = "add";
         this.formationInfoAirDataList.push(newSprite);
         this.formationAirPiXiApp.stage.addChild(newSprite);
       });
@@ -2143,6 +2162,7 @@ export default {
     editFormationInfo(row) {
       this.formationInfoForm = row;
       this.drawerOpen = true;
+      this.addOrUpdate = "update";
     },
 
     handleDrawerSubmit() {
@@ -2151,67 +2171,99 @@ export default {
           this.formationInfoForm = this.ObjectStringToNumber(
             this.formationInfoForm
           );
-          if (this.formationInfoForm.number) {
-            this.formationInfoList.forEach((item) => {
-              if (item.number == this.formationInfoForm.number) {
-                item = this.formationInfoForm;
-              }
-            });
-            let spriteIndex;
-            this.formationAirPiXiApp.stage.children.forEach((child, index) => {
-              // 检查 child 是否是 Container 类型
-              if (child instanceof PIXI.Sprite) {
-                if (child.id == this.formationInfoForm.number) {
-                  spriteIndex = index;
-                }
-              }
-            });
-            const sprite = this.formationAirPiXiApp.stage.children[spriteIndex];
-            console.log(
-              this.formationInfoForm.longitude,
-              this.formationInfoForm.latitude
-            );
-            const { x, y } = this.calculateXY(
-              this.formationInfoForm.longitude,
-              this.formationInfoForm.latitude
-            );
-            sprite.x = x;
-            sprite.y = y;
-            // TODO 边缘经纬度的数字要显示，或者需要设定画布大小
-            this.drawerOpen = false;
-          } else {
-            let index = this.formationInfoList.findIndex(
-              (item) => item.number == this.formationInfoForm.number
-            );
-            if (index !== -1) {
+          let index = this.formationInfoList.findIndex(
+            (item) => item.number == this.formationInfoForm.number
+          );
+          // 查看是不是已在列表中
+          if (index !== -1) {
+            if (this.addOrUpdate == "add") {
+              // 如果在,并且是新增加的
               this.$message.warning("该编号已存在，请重新输入");
               return;
             } else {
+              // 在，是要修改的。修改的还不能列表中的编号相同
+              this.formationInfoList[index] = this.formationInfoForm;
+              let spriteIndex;
+              this.formationAirPiXiApp.stage.children.forEach(
+                (child, index) => {
+                  // 检查 child 是否是 Container 类型
+                  if (child instanceof PIXI.Sprite) {
+                    if (child.id == this.formationInfoForm.number) {
+                      spriteIndex = index;
+                    }
+                  }
+                }
+              );
+              const sprite =
+                this.formationAirPiXiApp.stage.children[spriteIndex];
+              const { x, y } = this.calculateXY(
+                this.formationInfoForm.longitude,
+                this.formationInfoForm.latitude
+              );
+              sprite.x = x;
+              sprite.y = y;
               this.drawerOpen = false;
+            }
+          } else {
+            //不在列表中
+            if (this.addOrUpdate == "add") {
+              // 新增加的
               this.formationInfoList.push(this.formationInfoForm);
-              const length = formationInfoAirDataList.length;
+              const length = this.formationInfoAirDataList.length;
               this.$set(
                 this.formationInfoAirDataList[length - 1],
                 "id",
                 this.formationInfoForm.number
               );
-              this.formationInfoForm = {
-                number: null,
-                longitude: 100.0,
-                latitude: 100.0,
-                altitude: 100.0,
-                eastSpeed: 100.0,
-                northSpeed: 100.0,
-                skySpeed: 100.0,
-                flightPathType: "直线",
-                positionNoise: 18.2,
-              };
+
+              this.drawerOpen = false;
             }
           }
         }
       });
     },
 
+    // 删除编队信息
+    canvasInfoDel() {
+      this.$modal
+        .confirm("是否确认删除该无人机")
+        .then(() => {
+          // return delTask(bizIds);
+          this.formationInfoForm = this.ObjectStringToNumber(
+            this.formationInfoForm
+          );
+          let index = this.formationInfoList.findIndex(
+            (item) => item.number == this.formationInfoForm.number
+          );
+          this.formationInfoList.splice(index, 1);
+          this.formationInfoAirDataList = this.formationInfoAirDataList.filter(
+            (item) => {
+              return item.id !== this.formationInfoForm.number;
+            }
+          );
+          this.formationAirPiXiApp.stage.children.forEach((child, index) => {
+            // 检查 child 是否是 Container 类型
+            if (child instanceof PIXI.Sprite) {
+              if (child.id == this.formationInfoForm.number) {
+                if (child.parent) {
+                  child.parent.removeChild(child);
+                }
+
+                // 可选：销毁精灵并释放资源
+                child.destroy();
+              }
+            }
+          });
+        })
+        .then(() => {
+          this.drawerOpen = false;
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
     ObjectStringToNumber(obj) {
       for (let key in obj) {
         const parsedValue = Number(obj[key]); // 尝试将值转换为数字
@@ -2271,6 +2323,21 @@ export default {
       }
     },
 
+    drawerClose() {
+      this.formationInfoForm = {
+        number: null,
+        longitude: null,
+        latitude: null,
+        altitude: null,
+        eastSpeed: null,
+        northSpeed: null,
+        skySpeed: null,
+        flightPathType: "直线",
+        positionNoise: null,
+      };
+      this.addOrUpdate = "add";
+    },
+
     clearAllAry() {
       this.targetLblAry = {};
       this.targetUavAry = [];