自定义可视化完善

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

@@ -449,7 +449,11 @@
             <div class="right" style="width: 25%; height: 800px">
               <el-divider content-position="left">编队信息</el-divider>
               <div style="overflow-y: scroll; width: 100%; height: 750px">
-                <li v-for="(item, index) in formationInfoList" :key="index">
+                <li
+                  v-for="(item, index) in formationInfoList"
+                  :key="index"
+                  @click="editFormationInfo(item)"
+                >
                   <div style="cursor: pointer">
                     <div>
                       <span>编号：&nbsp;&nbsp;</span
@@ -517,31 +521,31 @@
         >
           <el-form-item label="编号" prop="number">
             <el-input
-              v-model="formationInfoForm.number"
+              v-model.number="formationInfoForm.number"
               placeholder="请输入编号"
             />
           </el-form-item>
           <el-form-item label="经度" prop="longitude">
             <el-input
-              v-model="formationInfoForm.longitude"
+              v-model.number="formationInfoForm.longitude"
               placeholder="请输入经度"
             />
           </el-form-item>
           <el-form-item label="纬度" prop="latitude">
             <el-input
-              v-model="formationInfoForm.latitude"
+              v-model.number="formationInfoForm.latitude"
               placeholder="请输入纬度"
             />
           </el-form-item>
           <el-form-item label="海拔" prop="altitude">
             <el-input
-              v-model="formationInfoForm.altitude"
+              v-model.number="formationInfoForm.altitude"
               placeholder="请输入海拔"
             />
           </el-form-item>
           <el-form-item label="东向速度" prop="eastSpeed">
             <el-input
-              v-model="formationInfoForm.eastSpeed"
+              v-model.number="formationInfoForm.eastSpeed"
               placeholder="请输入东向速度"
             >
               <template slot="append">m/s</template>
@@ -549,7 +553,7 @@
           </el-form-item>
           <el-form-item label="北向速度" prop="northSpeed">
             <el-input
-              v-model="formationInfoForm.northSpeed"
+              v-model.number="formationInfoForm.northSpeed"
               placeholder="请输入北向速度"
             >
               <template slot="append">m/s</template>
@@ -557,7 +561,7 @@
           </el-form-item>
           <el-form-item label="天向速度" prop="skySpeed">
             <el-input
-              v-model="formationInfoForm.skySpeed"
+              v-model.number="formationInfoForm.skySpeed"
               placeholder="请输入天向速度"
             >
               <template slot="append">m/s</template>
@@ -573,7 +577,7 @@
           </el-form-item>
           <el-form-item label="噪声" prop="positionNoise">
             <el-input
-              v-model="formationInfoForm.positionNoise"
+              v-model.number="formationInfoForm.positionNoise"
               placeholder="请输入噪声"
             />
           </el-form-item>
@@ -956,6 +960,8 @@ export default {
         flightPathType: "直线",
         positionNoise: 18.2,
       },
+      // 自定义编队的飞机信息集合
+      formationInfoAirDataList: [],
       // 编辑编队信息的
       formationAirPiXiApp: null,
       // 设定的画布信息
@@ -1113,6 +1119,7 @@ export default {
         // 旋翼机型 需要改
         texture = new PIXI.Texture.from("../../textures/uav-tar.png");
       }
+      // TODO 需要给精灵加上id,就是数据中的number
       info.forEach((item) => {
         const { x, y } = this.calculateXY(item.longitude, item.latitude);
 
@@ -1219,6 +1226,8 @@ export default {
       this.parameterId = row.id || this.ids;
       this.showTrajectory = true;
       this.isUpdateView = true;
+      const msg = "REPLAY:" + this.parameterId;
+      this.webSocket.send(msg);
       this.title = "回放";
     },
     initWebSocket() {
@@ -1252,6 +1261,15 @@ export default {
     transFormation() {
       // debugger;
       let msg = "TRANSFORMATION:" + this.parameterId;
+      // let msg =
+      //   "TRANSFORMATION:" +
+      //   this.parameterId +
+      //   "," +
+      //   this.curLongitude +
+      //   "," +
+      //   this.curLatitude +
+      //   "," +
+      //   this.curAltitude;
       console.info("transFormation", msg);
       this.webSocket.send(msg);
       // this.pixiApp.stage.removeChildren();
@@ -1564,6 +1582,8 @@ export default {
         }
       });
       group.forEach((item) => {
+        const msg = "DISAPPEAR:" + item.id;
+        this.webSocket.send(msg);
         item.visible = false;
       });
       this.hideList.push(id);
@@ -1595,6 +1615,8 @@ export default {
             }
           }
           // 已经隐藏了，要显示
+          const msg = "SHOW:" + item.id;
+          this.webSocket.send(msg);
           item.visible = true;
           let index = this.hideList.indexOf(id);
           if (index > -1) {
@@ -1602,30 +1624,11 @@ export default {
           }
           this.allId.push(maxNum);
         });
-
-        // 更改画布飞机的编号
-        // group.children.forEach((item) => {
-        //   if (item instanceof PIXI.Text) {
-        //     item.text = maxNum + 1;
-        //   }
-        // });
-        // 更改右侧信息展示编号
-        // for (let i = 0; i < this.changeShowNoList.length; i++) {
-        //   if (this.changeShowNoList[i].id == id) {
-        //     this.$set(this.changeShowNoList[i], "showNo", maxNum + 1);
-        //     break;
-        //   }
-        // }
-        // 已经隐藏了，要显示
-        // group.visible = true;
-        // let index = this.hideList.indexOf(id);
-        // if (index > -1) {
-        //   this.hideList.splice(index, 1);
-        // }
-        // this.allId.push(maxNum + 1);
       } else {
         // 隐藏
         group.forEach((item) => {
+          const msg = "DISAPPEAR:" + item.id;
+          this.webSocket.send(msg);
           item.visible = false;
         });
         this.hideList.push(id);
@@ -1787,7 +1790,7 @@ export default {
         this.formationInfoForm.longitude = lng;
         this.formationInfoForm.latitude = lat;
         this.drawerOpen = true;
-        // this.
+        this.formationInfoAirDataList.push(newSprite);
         this.formationAirPiXiApp.stage.addChild(newSprite);
       });
     },
@@ -1815,35 +1818,59 @@ export default {
       return { lat, lng };
     },
 
+    editFormationInfo(row) {
+      this.formationInfoForm = row;
+      this.drawerOpen = true;
+    },
+
     handleDrawerSubmit() {
       this.$refs["formationInfoRef"].validate((valid) => {
         if (valid) {
-          let index = this.formationInfoList.findIndex(
-            (item) => item.number == this.formationInfoForm.number
-          );
-          if (index !== -1) {
-            this.$message.warning("该编号已存在，请重新输入");
-            return;
-          } else {
+          if (this.formationInfoForm.number) {
+            this.formationInfoList.forEach((item) => {
+              if (item.number == this.formationInfoForm.number) {
+                item = this.formationInfoForm;
+              }
+            });
+            // TODO 需要找到页面上的精灵，获取其id根据经纬度计算位置
+            // TODO 需要更改位置
             this.drawerOpen = false;
-            this.formationInfoList.push(this.formationInfoForm);
-            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,
-            };
+          } else {
+            let index = this.formationInfoList.findIndex(
+              (item) => item.number == this.formationInfoForm.number
+            );
+            if (index !== -1) {
+              this.$message.warning("该编号已存在，请重新输入");
+              return;
+            } else {
+              this.drawerOpen = false;
+              this.formationInfoList.push(this.formationInfoForm);
+              const length = 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,
+              };
+            }
           }
         }
       });
     },
 
     closeDialog() {
+      const msg = "END:" + this.parameterId;
+      this.webSocket.send(msg);
       this.destroyTrajectory();
       this.showTrajectory = false;
       this.isUpdateView = false;