ソースを参照

Merge branch 'master' of http://43.143.235.246:9080/fireLHB/firemap

xyh 1 年間 前
コミット
48efdbcc62
3 ファイル変更57 行追加372 行削除
  1. 2 2
      src/layout/Main/index.vue
  2. 50 367
      src/views/simulation/index.vue
  3. 5 3
      src/views/situation/index.vue

+ 2 - 2
src/layout/Main/index.vue

@@ -115,11 +115,11 @@ export default {
    background-color: transparent !important;
 }
 
-/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
+/* /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
 
 background-color: #212e3e !important;
 
-}
+} */
 .el-table::before {
 	 left: 0;
 	 bottom: 0;

+ 50 - 367
src/views/simulation/index.vue

@@ -13,25 +13,6 @@
       </el-col>
       <el-tabs type="border-card" v-model="activeName" tab-position="left" class="menu" :stretch="true"
         @tab-click="legendClick">
-        <!-- <el-tab-pane name="first">
-          <el-tooltip placement="right" effect="light" slot="label">
-            <span slot="content" class="item">标绘</span>
-            <span><i class="el-icon-wind-power"></i></span>
-          </el-tooltip>
-        </el-tab-pane> -->
-        <!-- <el-tab-pane name="second">
-          <el-tooltip placement="right" effect="light" slot="label">
-            <span slot="content" class="item">模型</span>
-            <span><i class="el-icon-receiving"></i></span>
-          </el-tooltip>
-          <Model @selectModel="selectModel" :isShow="isShow"></Model>
-        </el-tab-pane> -->
-        <!-- <el-tab-pane name="third">
-          <el-tooltip placement="right" effect="light" slot="label">
-            <span slot="content" class="item">测量</span>
-            <span><i class="el-icon-discount"></i></span>
-          </el-tooltip>
-        </el-tab-pane> -->
         <el-tab-pane name="fouth">
           <el-tooltip placement="right" effect="light" slot="label">
             <span slot="content" class="item">想定</span>
@@ -55,7 +36,7 @@
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
       </div>
     </el-row>
-    <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine>
+    <!-- <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine> -->
   </div>
 </template>
 <script>
@@ -111,7 +92,8 @@ export default {
       modeltooltip: null,
       id: 1,
       showLayers: null,
-      timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4']
+      timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4'],
+      jsonData: null
     };
   },
   watch: {
@@ -187,29 +169,6 @@ export default {
       }
     
    
-      // await axios
-      //   .post("http://localhost:8084/admin/online/onlineOperation/updateDatasource/main", {
-      //     params: {
-      //       datasourceId: "1656243335922192384",
-      //       masterData: row,
-      //       slaveData: {}
-      //     }
-      //   })
-      //   .then((res) => {
-      //     console.log("update successfully ");
-      //   });
-      //     const requestData = row
-      //     if(this.websocket && this.websocket.readyState === WebSocket.OPEN){
-      //       this.websocket.send(JSON.stringify(requestData));
-      //     }
-      //     else{
-      //       this.startWebSocket();
-      //       setTimeout(() => {
-      //         this.websocket.send(JSON.stringify(requestData));
-      // }, 2000);
-
-      //     }
-
     },
     changeItemPosition(data) {
 
@@ -219,120 +178,6 @@ 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);
-
-      // 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: "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
@@ -357,20 +202,21 @@ export default {
             center = response.data.center
             this.save = true
                 this.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
-      }
+                  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
+                }
+           this.setTimeLine(response.data.starttime,response.data.steptime)//传入时间到时间轴
           })
           .catch((error) => {
             // 处理错误
@@ -465,11 +311,11 @@ export default {
     cesiumInit() {
       this.viewer2D = new this.Cesium.Viewer("2DcesiumContainer", {
         sceneMode: this.Cesium.SceneMode.SCENE2D,
-        animation: false, // 是否显示时间轴动画
+        animation: true, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
         geocoder: false,
-        timeline: false,
+        timeline: true, //是否显示时间线控件
         fullscreenButton: false,
         sceneModePicker: false,
         navigationHelpButton: false,
@@ -485,11 +331,11 @@ export default {
       });
 
       this.viewer3D = new this.Cesium.Viewer("3DcesiumContainer", {
-        animation: false, // 是否显示时间轴动画
+        animation: true, // 是否显示时间轴动画
         baseLayerPicker: false,
         homeButton: false,
         geocoder: false,
-        timeline: false,
+        timeline: true, //是否显示时间线控件
         fullscreenButton: false,
         sceneModePicker: false,
         navigationHelpButton: false,
@@ -873,196 +719,32 @@ export default {
         }
       });
     },
-    // 鼠标点击的事件监听
-//     pointMove() {
-//       // 监听鼠标左键点击事件
-//       this.handler2D.setInputAction((event) => {
-//         if (!this.selectedMarker && !this.modeltooltip) {
-//           const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
-//           const pickedEntity = this.viewer2D.scene.pick(screenPosition);
-//           if (this.Cesium.defined(pickedEntity)) {
-//             for (const entity of this.viewer2D.entities.values) {
-//               if (pickedEntity.id.id === entity.id) {
-//                 this.selectedMarker = entity;
-//                 this.oldPosition = pickedEntity.id.position;
-//                 // 显示提示
-//                 this.selectModel("pointer", null, "右键取消");
-//               }
-//             }
-//           }
-//         } else if (this.selectedMarker && this.modeltooltip === "右键取消") {
-//           // 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
-//             }
-//           }
-//           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();
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
-//       // 监听鼠标移动事件,用于移动标记点
-//       this.handler2D.setInputAction((event) => {
-//         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-//           const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
-//           const position = this.viewer2D.scene.camera.pickEllipsoid(screenPosition);
-//           this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
-//           this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-//       // 监听右键
-//       this.handler2D.setInputAction(() => {
-//         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-//           this.viewer2D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
-//           this.selectedMarker = null;
-//           this.selectModel();
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-//       this.handler3D.setInputAction((event) => {
-//         if (!this.selectedMarker && !this.modeltooltip) {
-//           const screenPosition = new this.Cesium.Cartesian2(event.position.x, event.position.y);
-//           const pickedEntity = this.viewer3D.scene.pick(screenPosition);
-//           if (this.Cesium.defined(pickedEntity)) {
-//             for (const entity of this.viewer3D.entities.values) {
-//               if (pickedEntity.id.id === entity.id) {
-//                 this.selectedMarker = entity;
-//                 this.oldPosition = pickedEntity.id.position;
-//                 // 显示提示
-//                 this.selectModel("pointer", null, "右键取消");
-//               }
-//             }
-//           }
-//         } 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,使连线保持在固定的高度,不会贴地显示
-//             }
-//           });
-//           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,使连线保持在固定的高度,不会贴地显示
-//             }
-//           });
-//           this.selectedMarker = null;
-//           this.selectModel();
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
-//       // 监听鼠标移动事件,用于移动标记点
-//       this.handler3D.setInputAction((event) => {
-//         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-//           const screenPosition = new this.Cesium.Cartesian2(event.endPosition.x, event.endPosition.y);
-//           const position = this.viewer3D.scene.camera.pickEllipsoid(screenPosition);
-//           this.viewer2D.entities.getById(this.selectedMarker.id).position = position;
-//           this.viewer3D.entities.getById(this.selectedMarker.id).position = position;
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-//       // 监听右键
-//       this.handler3D.setInputAction(() => {
-//         if (this.selectedMarker && this.modeltooltip === "右键取消") {
-//           this.viewer3D.entities.getById(this.selectedMarker.id).position = this.oldPosition;
-//           this.selectedMarker = null;
-//           this.selectModel();
-//         }
-//       }, this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-//     }
+    setTimeLine(startTime,stepTime){
+          console.log(startTime)
+          let start = this.Cesium.JulianDate.fromDate(new Date(startTime));  // 设置时间轴当前时间为开始时间
+          console.log(start)
+          // 添加8小时,使地图时间和北京时间相同
+          start = this.Cesium.JulianDate.addHours(start, 8, new this.Cesium.JulianDate());
+          let stop = this.Cesium.JulianDate.addSeconds(start, stepTime, new this.Cesium.JulianDate());   // 设置结束时间为开始时间加400秒
+          // 设置时钟开始时间
+          this.viewer2D.clock.startTime = start.clone();
+          this.viewer3D.clock.startTime = start.clone();
+          // 设置时钟当前时间
+          this.viewer2D.clock.currentTime = start.clone();
+          this.viewer3D.clock.currentTime = start.clone();
+          // 设置时钟结束时间
+          this.viewer2D.clock.stopTime = stop.clone();
+          this.viewer3D.clock.stopTime = stop.clone();
+          // 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样
+          this.viewer2D.clock.multiplier = 1;
+          this.viewer3D.clock.multiplier = 1;
+          // 时间轴绑定到viewer上去
+          this.viewer2D.timeline.zoomTo(start, stop);
+          this.viewer3D.timeline.zoomTo(start, stop);
+          // 循环执行,到达终止时间,重新从起点时间开始
+          this.viewer2D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+          this.viewer3D.clock.clockRange = this.Cesium.ClockRange.LOOP_STOP;
+    }
   }
 };
 </script>
@@ -1159,7 +841,8 @@ export default {
 
 ::v-deep .el-tabs--border-card>.el-tabs__content {
   width: 300px;
-  display: none;
+  height: 100%;
+  overflow-y:visible;
 }
 
 .model {

+ 5 - 3
src/views/situation/index.vue

@@ -109,7 +109,8 @@ export default {
       handler2D: null,
       image: null,
       modeltooltip: null,
-      id: 1
+      id: 1,
+      jsonData: null
     };
   },
   watch: {
@@ -357,7 +358,6 @@ export default {
         id: row.id,
         xdname: row.xdname,
         type: row.type,
-        creator: row.creator,
         createtime: row.createtime,
         bluecnt: row.bluecnt,
         target: row.target,
@@ -1157,7 +1157,9 @@ this.viewer3D.entities.values.forEach(entity => {
 
 ::v-deep .el-tabs--border-card>.el-tabs__content {
   width: 300px;
-  display: none;
+  /* display: none; */
+  height: 100%;
+  overflow-y:visible;
 }
 
 .model {