add export and edit save new json

src/views/situation/index.vue

@@ -47,11 +47,11 @@
             <span><i class="el-icon-house"></i></span>
           </el-tooltip>
           <el-table :data="situation">
-            <el-table-column label="名称" prop="xdname"></el-table-column>
-            <el-table-column label="操作">
+            <el-table-column label="名称" prop="xdname" width="150px"></el-table-column>
+            <el-table-column label="操作" align="center">
               <template slot-scope="scope">
                 <el-button type="primary" @click="getJson(scope.row)">导入</el-button>
-                <el-button type="primary" @click="saveJson(scope.row)">保存</el-button>
+                <!-- <el-button type="primary" @click="saveJson()">保存</el-button> -->
               </template>
             </el-table-column>
           </el-table>
@@ -62,6 +62,7 @@
         <el-button icon="el-icon-house" circle @click="home()"></el-button>
         <el-button icon="el-icon-plus" circle @click="big()"></el-button>
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
+        <el-button icon="el-icon-download" circle @click="saveJson()"></el-button>
       </div>
     </el-row>
     <div v-if="isShow" class="modeltooltip" ref="modeltooltip">{{ modeltooltip }}</div>
@@ -91,7 +92,9 @@ export default {
   },
   data() {
     return {
+      save : false,
       situation: [],
+      nameIdList:[],
       websocket: null,
       unit: [],
       satellite: [],
@@ -160,7 +163,23 @@ export default {
         console.log('WebSocket连接已关闭！');
       };
     },
-    async saveJson(row) {
+    async saveJson() {
+      if(this.save){
+        const jsonData = JSON.stringify(this.jsonData);
+            const blob = new Blob([jsonData], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = this.jsonData.xdname + '.json';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+      }
+      else{
+        this.$message("请先导入想定文件！！！")
+      }
+    
+   
       // await axios
       //   .post("http://localhost:8084/admin/online/onlineOperation/updateDatasource/main", {
       //     params: {
@@ -183,7 +202,6 @@ export default {
       // }, 2000);
 
       //     }
-      this.markLocation(120, 20)
 
     },
     changeItemPosition(data) {
@@ -194,106 +212,144 @@ export default {
       let blueunit = [];
       let satellite = [];
       let center = [];
-      let fileInfoStr = row.blueunit;
-      let fileInfoArr = JSON.parse(fileInfoStr);
-      for (let i = 0; i < fileInfoArr.length; i++) {
-        await axios
-          .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
-            params: {
-              datasourceId: "1656243335922192384",
-              fieldName: "blueunit",
-              asImage: false,
-              dataId: row.id,
-              filename: fileInfoArr[i].filename,
-              Authorization: getToken(),
-              MenuId: "1656244747347431424"
-            }
-          })
-          .then((response) => {
-            // 处理成功的响应
-            blueunit.push(response.data);
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      }
-      fileInfoStr = row.redunit;
-      fileInfoArr = JSON.parse(fileInfoStr);
+      // let fileInfoStr = row.blueunit;
+      // let fileInfoArr = JSON.parse(fileInfoStr);
+      // for (let i = 0; i < fileInfoArr.length; i++) {
+      //   await axios
+      //     .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+      //       params: {
+      //         datasourceId: "1656243335922192384",
+      //         fieldName: "blueunit",
+      //         asImage: false,
+      //         dataId: row.id,
+      //         filename: fileInfoArr[i].filename,
+      //         Authorization: getToken(),
+      //         MenuId: "1656244747347431424"
+      //       }
+      //     })
+      //     .then((response) => {
+      //       // 处理成功的响应
+      //       blueunit.push(response.data);
+      //     })
+      //     .catch((error) => {
+      //       // 处理错误
+      //       console.error(error);
+      //     });
+      // }
+      // fileInfoStr = row.redunit;
+      // fileInfoArr = JSON.parse(fileInfoStr);
 
-      for (let i = 0; i < fileInfoArr.length; i++) {
-        await axios
-          .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
-            params: {
-              datasourceId: "1656243335922192384",
-              fieldName: "redunit",
-              asImage: false,
-              dataId: row.id,
-              filename: fileInfoArr[i].filename,
-              Authorization: getToken(),
-              MenuId: "1656244747347431424"
-            }
-          })
-          .then((response) => {
-            // 处理成功的响应
-            redunit.push(response.data);
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      }
-      fileInfoStr = row.center;
-      fileInfoArr = JSON.parse(fileInfoStr);
+      // for (let i = 0; i < fileInfoArr.length; i++) {
+      //   await axios
+      //     .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+      //       params: {
+      //         datasourceId: "1656243335922192384",
+      //         fieldName: "redunit",
+      //         asImage: false,
+      //         dataId: row.id,
+      //         filename: fileInfoArr[i].filename,
+      //         Authorization: getToken(),
+      //         MenuId: "1656244747347431424"
+      //       }
+      //     })
+      //     .then((response) => {
+      //       // 处理成功的响应
+      //       redunit.push(response.data);
+      //     })
+      //     .catch((error) => {
+      //       // 处理错误
+      //       console.error(error);
+      //     });
+      // }
+      // fileInfoStr = row.center;
+      // fileInfoArr = JSON.parse(fileInfoStr);
 
-      for (let i = 0; i < fileInfoArr.length; i++) {
-        await axios
-          .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
-            params: {
-              datasourceId: "1656243335922192384",
-              fieldName: "center",
-              asImage: false,
-              dataId: row.id,
-              filename: fileInfoArr[i].filename,
-              Authorization: getToken(),
-              MenuId: "1656244747347431424"
-            }
-          })
-          .then((response) => {
-            // 处理成功的响应
-            center.push(response.data);
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      }
-      fileInfoStr = row.satellite;
-      fileInfoArr = JSON.parse(fileInfoStr);
+      // for (let i = 0; i < fileInfoArr.length; i++) {
+      //   await axios
+      //     .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+      //       params: {
+      //         datasourceId: "1656243335922192384",
+      //         fieldName: "center",
+      //         asImage: false,
+      //         dataId: row.id,
+      //         filename: fileInfoArr[i].filename,
+      //         Authorization: getToken(),
+      //         MenuId: "1656244747347431424"
+      //       }
+      //     })
+      //     .then((response) => {
+      //       // 处理成功的响应
+      //       center.push(response.data);
+      //     })
+      //     .catch((error) => {
+      //       // 处理错误
+      //       console.error(error);
+      //     });
+      // }
+      // fileInfoStr = row.satellite;
+      // fileInfoArr = JSON.parse(fileInfoStr);
 
-      for (let i = 0; i < fileInfoArr.length; i++) {
-        await axios
+      // for (let i = 0; i < fileInfoArr.length; i++) {
+      //   await axios
+      //     .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
+      //       params: {
+      //         datasourceId: "1656243335922192384",
+      //         fieldName: "satellite",
+      //         asImage: false,
+      //         dataId: row.id,
+      //         filename: fileInfoArr[i].filename,
+      //         Authorization: getToken(),
+      //         MenuId: "1656244747347431424"
+      //       }
+      //     })
+      //     .then((response) => {
+      //       // 处理成功的响应
+      //       satellite.push(response.data);
+      //     })
+      //     .catch((error) => {
+      //       // 处理错误
+      //       console.error(error);
+      //     });
+      // }
+      // const jsonData = {}
+      //   id: row.id,
+      //   xdname: row.xdname,
+      //   type: row.type,
+      //   creator: row.creator,
+      //   createtime: row.createtime,
+      //   bluecnt: row.bluecnt,
+      //   target: row.target,
+      //   starttime: row.starttime,
+      //   steptime: row.steptime,
+      //   blueunit: blueunit,
+      //   redunit: redunit,
+      //   satellite: satellite,
+      //   center: center
+      // };
+     let fileInfoStr = row.xdfile;
+     let fileInfoArr = JSON.parse(fileInfoStr);
+      await axios
           .get("http://localhost:8084/admin/online/onlineOperation/downloadDatasource/main", {
             params: {
               datasourceId: "1656243335922192384",
-              fieldName: "satellite",
+              fieldName: "xdfile",
               asImage: false,
               dataId: row.id,
-              filename: fileInfoArr[i].filename,
+              filename: fileInfoArr[0].filename,
               Authorization: getToken(),
               MenuId: "1656244747347431424"
             }
           })
           .then((response) => {
-            // 处理成功的响应
-            satellite.push(response.data);
-          })
-          .catch((error) => {
-            // 处理错误
-            console.error(error);
-          });
-      }
-      const jsonData = {
+            console.log('response.data :>> ', response.data);
+            // // 处理成功的响应
+            // jsonData = response.data
+            blueunit = response.data.blueunit
+            redunit = response.data.redunit
+            satellite = response.data.satellite
+            center = response.data.center
+            this.save = true
+                this.jsonData = {
         id: row.id,
         xdname: row.xdname,
         type: row.type,
@@ -307,8 +363,34 @@ export default {
         redunit: redunit,
         satellite: satellite,
         center: center
-      };
-      console.log("jsonData :>> ", jsonData);
+      }
+          })
+          .catch((error) => {
+            // 处理错误
+            console.error(error);
+          });
+      
+      for(let i =0;i<blueunit.length;i++){
+        this.markLocationbyJson(parseFloat(blueunit[i].pos.lat),parseFloat(blueunit[i].pos.lon),blueunit[i].name,"blue")
+      }
+      for(let i = 0;i<center.length;i++){
+        let item = center[i]
+        this.markLocationbyJson(parseFloat(item[center[i].name].properties.lat),parseFloat(item[center[i].name].properties.lon),item.name,"center")
+      }
+      for(let i = 0;i<redunit.length;i++){
+        this.markLocationbyJson(parseFloat(redunit[i].component_movementjson.properties.launch_lat),parseFloat(redunit[i].component_movementjson.properties.launch_lon),redunit[i].name,"red")
+        let point1 = {
+          longitude : parseFloat(redunit[i].component_movementjson.properties.launch_lon),
+          latitude : parseFloat(redunit[i].component_movementjson.properties.launch_lat),
+          height :parseFloat(redunit[i].component_movementjson.properties.launch_h)
+        }
+        let point2 = {
+          longitude : parseFloat(redunit[i].component_movementjson.properties.target_lon),
+          latitude : parseFloat(redunit[i].component_movementjson.properties.target_lat),
+          height : parseFloat(redunit[i].component_movementjson.properties.target_h)
+        }
+        this.markLine(point1,point2,"red")
+      }
     },
     //获取所有数据
     getData() {
@@ -649,6 +731,55 @@ export default {
       });
       this.id++;
     },
+    markLocationbyJson(latitude, longitude,name,type) {
+      const position = this.Cesium.Cartesian3.fromDegrees(longitude, latitude);
+      let color = ''
+      if(type=='red'){
+        color = 'Red'
+      }
+      else{
+        color = 'Blue'
+      }
+      this.viewer2D.entities.add({
+        id: this.id,
+        position: position,
+        point: {
+          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+          color: this.Cesium.Color.fromCssColorString(color)
+        },
+        label: {
+          text: type+' '+name,
+          show: true,
+          font: "18px Helvetica", // 调整标签的字体样式和大小
+          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+        }
+      });
+      this.viewer3D.entities.add({
+        id: this.id,
+        position: position,
+        point: {
+          pixelSize: 12, // 调整点的大小，可以增大点的像素大小
+          color: this.Cesium.Color.fromCssColorString(color)
+        },
+        // model: {
+        //   uri: require('@/assets/model/satelite.glb'), // 替换为你的3D模型文件路径
+        //   scale: 1.0, // 调整3D模型的缩放大小
+        //   minimumPixelSize: 64 // 设置3D模型的最小像素大小，确保在视图中可见
+        // },
+        label: {
+          text: type+' '+name,
+          show: true,
+          font: "18px Helvetica", // 调整标签的字体样式和大小
+          pixelOffset: new this.Cesium.Cartesian2(0, 20) // 调整标签的像素偏移，向下偏移20像素
+        }
+      });
+      this.nameIdList.push({
+        id: this.id,
+        name: name
+      })
+      this.id++;
+      console.log('this.viewer3D.entities :>> ', this.viewer3D.entities);
+    },
     // 从鼠标点击事件获取坐标
     getCoordinatesFromEvent(event) {
       let viewer = this.mousevalue === "2D" ? this.viewer2D : this.viewer3D;
@@ -713,29 +844,97 @@ export default {
             }
           }
         } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
-          const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
-          this.viewer2D.entities.add({
-            polyline: {
-              positions: [
-                this.oldPosition._value,
-                this.viewer2D.entities.getById(this.selectedMarker.id).position._value
-              ],
-              width: 5, // 设置线的宽度
-              material: material,
-              followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          // const material = new this.Cesium.PolylineArrowMaterialProperty(this.selectedMarker.point.color);
+          console.log('this.viewer2D.entities.values :>> ', this.viewer2D.entities.getById(this.selectedMarker.id).position._value);
+          let position = this.convertWorldToCartographic(this.viewer2D.entities.getById(this.selectedMarker.id).position._value)
+        
+          let name = ''
+          for(let i = 0;i<this.nameIdList.length;i++){
+          
+            if(this.nameIdList[i].id == this.selectedMarker.id){
+              name = this.nameIdList[i].name
             }
-          });
-          this.viewer3D.entities.add({
-            polyline: {
-              positions: [
-                this.oldPosition._value,
-                this.viewer3D.entities.getById(this.selectedMarker.id).position._value
-              ],
-              width: 5, // 设置线的宽度
-              material: material,
-              followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          }
+          for(let i = 0;i<this.jsonData.blueunit.length;i++){
+            if(name == this.jsonData.blueunit[i].name){
+              this.jsonData.blueunit[i].pos.lat = position.latitude.toFixed(6)
+              this.jsonData.blueunit[i].pos.lon = position.longitude.toFixed(6)
+              this.jsonData.blueunit[i].pos.h = position.height.toFixed(2)
             }
-          });
+          }
+          for(let i = 0;i<this.jsonData.redunit.length;i++){
+            if(name == this.jsonData.redunit.name){
+              this.jsonData.redunit.component_movementjson.properties.launch_lon = position.longitude.toFixed(6)
+              this.jsonData.redunit.component_movementjson.properties.launch_lat = position.latitude.toFixed(6)
+              this.jsonData.redunit.component_movementjson.properties.launch_h = position.height.toFixed(2)
+            }
+          }
+          for(let i = 0;i<this.jsonData.center.length;i++){
+            if(name == this.jsonData.center[i].name){
+              this.jsonData.center[i][name].properties.lon = position.longitude.toFixed(6)
+              this.jsonData.center[i][name].properties.lat = position.latitude.toFixed(6)
+              this.jsonData.center[i][name].properties.h = position.height.toFixed(2)
+              for(let j = 0;j<this.jsonData.redunit.length;j++){
+              this.jsonData.redunit[j].component_movementjson.properties.target_lon = position.longitude.toFixed(6)
+              this.jsonData.redunit[j].component_movementjson.properties.target_lat = position.latitude.toFixed(6)
+              this.jsonData.redunit[j].component_movementjson.properties.target_h = position.height.toFixed(2)
+          }
+// 新的终点坐标
+const newEndPoint = this.Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height);
+// 遍历所有的entity对象
+this.viewer2D.entities.values.forEach(entity => {
+  // 检查entity是否为Polyline类型
+  if (entity instanceof this.Cesium.Entity && entity.polyline) {
+    // 获取原始的Polyline坐标数组
+    const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+
+    // 修改终点坐标为新的坐标
+    positions[positions.length - 1] = newEndPoint;
+
+    // 更新entity的Polyline坐标
+    entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
+  }
+});
+this.viewer3D.entities.values.forEach(entity => {
+  // 检查entity是否为Polyline类型
+  if (entity instanceof this.Cesium.Entity && entity.polyline) {
+    // 获取原始的Polyline坐标数组
+    const positions = entity.polyline.positions.getValue(); // 得到一个Cartesian3数组
+
+    // 修改终点坐标为新的坐标
+    positions[positions.length - 1] = newEndPoint;
+
+    // 更新entity的Polyline坐标
+    entity.polyline.positions = new this.Cesium.CallbackProperty(time => positions, false);
+  }
+});
+            }
+           
+          }
+
+          // this.viewer2D.entities.add({
+          //   polyline: {
+          //     positions: [
+          //       this.oldPosition._value,
+          //       this.viewer2D.entities.getById(this.selectedMarker.id).position._value
+          //     ],
+          //     width: 5, // 设置线的宽度
+          //     material: material,
+          //     followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          //   }
+          // });
+          // this.viewer3D.entities.add({
+          //   polyline: {
+          //     positions: [
+          //       this.oldPosition._value,
+          //       this.viewer3D.entities.getById(this.selectedMarker.id).position._value
+          //     ],
+          //     width: 5, // 设置线的宽度
+          //     material: material,
+          //     followSurface: false // 设置为false，使连线保持在固定的高度，不会贴地显示
+          //   }
+          // });
+          console.log('this.jsonData :>> ', this.jsonData);
           this.selectedMarker = null;
           this.selectModel();
         }