1

src/components/mars3d/Map2.vue

@@ -43,6 +43,8 @@ export default {
       weilanName:[],
       carNumber:'',
       carPlaySpeed:5,
+      stopPointData:[],
+      leadTime:false,
     }
   },
 
@@ -85,25 +87,15 @@ export default {
 
   methods: {
     //获取数据
-    getCoordinate(equipmentName,number,speed,bTime,eTime) {
+    getCoordinate(equipmentName,number,speed,bTime,eTime,stopPointData) {
       let that = this;
       that.deviceId = equipmentName;
       that.carNumber = number;
       that.carPlaySpeed = speed;
+      that.stopPointData = stopPointData;
       //获取历史轨迹
       if(number == ''){
-        // this.$nextTick(()=>{
-        //   if (this.appendToBody) {
-        //     document.body.appendChild(this.$el)
-        //   }
-        //    if (this.mapKey) {
-        //     this.initMars3d(this.options)
-        //   } else {
-        //     mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
-        //       this.initMars3d(data.map3d)// 构建地图
-        //     })
-        //   }
-        // })
+        return
       }else{
         if(that.deviceId == '' || that.deviceId == undefined){
           this.$notify({
@@ -121,7 +113,6 @@ export default {
                   duration: 2500
                 });
               }else{
-
                 let obj1 = {};
                 let array1 = [];
                 res.data.line.forEach((item,index)=>{
@@ -192,6 +183,13 @@ export default {
         that.addGraphic_02(graphicLayer2,item.arrays,that.carNumber);
       })
      
+      that.stopPointData.forEach((item,index)=>{
+        var graphicLayer2 = new mars3d.layer.GraphicLayer();
+        map.addLayer(graphicLayer2);
+        initGraphicManager(graphicLayer2);
+        that.addDemoGraphic1(graphicLayer2,item.lon,item.lat,item.alarmTime,item.time);
+      })
+
       // 抛出事件
       this.$emit('onload', map)
     },
@@ -212,10 +210,10 @@ export default {
         var graphic = new mars3d.graphic.PathEntity({
           position: property,
           style: {
-            width: 3,
-            color: "#8a2e3b",
+            width: 4,
+            color: "rgb(251,84,48)",
             opacity: 1.0,
-            leadTime: 0, // 前方的路线不显示
+            leadTime: that.leadTime ? 9999 : 0, // 前方的路线不显示
             //高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
             highlight: {
               type: mars3d.EventType.click,
@@ -223,10 +221,9 @@ export default {
             },
           },
           label: {
-            text: truckName,
+            //text: truckName,
             font_size: 22,
             font_family: "楷体",
-            color: "#ff0000",
             color: Cesium.Color.AZURE,
             outline: true,
             outlineColor: Cesium.Color.BLACK,
@@ -237,85 +234,40 @@ export default {
           },
           model: {
             url: '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
-            scale: 1,
+            scale: 0.1,
             minimumPixelSize: 50,
           },
         });
         graphicLayer2.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
 
     },
-    //车辆轨迹2
-    initPath(graphicLayer2,positions,truckName) {
-      const property = new Cesium.SampledPositionProperty()
-      property.forwardExtrapolationType = Cesium.ExtrapolationType.HOLD
-
-      let start;
-      let stop;
-      for (let i = 0, len = positions.length; i < len; i++) {
-        const item = positions[i];
-        const lng = Number(item[0].toFixed(6)) // 经度
-        const lat = Number(item[1].toFixed(6)) // 纬度
-        const height = item[2] // 高度
-        const time = item[3] // 时间
-
-        let position = null
-        if (lng && lat) {
-          position = Cesium.Cartesian3.fromDegrees(lng, lat, height)
-        }
-        let juliaDate = null
-        if (time) {
-          juliaDate = Cesium.JulianDate.fromIso8601(time)
-        }
-        if (position && juliaDate) {
-          property.addSample(juliaDate, position)
-        }
-
-        if (i == 0) {
-          start = juliaDate
-        } else if (i == len - 1) {
-          stop = juliaDate
-        }
-
-      }
-      // 设置时钟属性
-      map.clock.startTime = start.clone()
-      map.clock.stopTime = stop.clone()
-      map.clock.currentTime = start.clone()
-      map.clock.clockRange = Cesium.ClockRange.LOOP_STOP
-      map.clock.multiplier = 5
-      if (map.controls.timeline) {
-        map.controls.timeline.zoomTo(start, stop)
-      }
-
-      // 创建path对象
-      pathEntity = new mars3d.graphic.PathEntity({
-        position: property,
-        orientation: new Cesium.VelocityOrientationProperty(property),
+    //停车区域
+    addDemoGraphic1(graphicLayer,x,y,alarmTime,time) {
+      const graphic = new mars3d.graphic.CircleEntity({
+        position: [x, y, 10000],
         style: {
-          width: 3,
-          color: "#ff0000",
-          opacity: 1.0,
-          leadTime: 0, // 前方的路线不显示
-        },
-        label: {
-          text: truckName,
-          font_size: 22,
-          font_family: "楷体",
-          color: "#ff0000",
+          radius: 5.0,
+          color: "#00ff00",
+          opacity: 0.2,
           outline: true,
-          outlineColor: Cesium.Color.BLACK,
-          outlineWidth: 2,
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-          pixelOffset: new Cesium.Cartesian2(10, -25) // 偏移量
-        },
-        model: {
-          url: '//data.mars3d.cn/gltf/mars/car/tufangche.glb',
-          scale: 1,
-          minimumPixelSize: 50,
+          outlineWidth: 3,
+          outlineColor: "#ffffff",
+          clampToGround: true,
+          label: {
+            text: alarmTime + "\n停车" + time + '分钟',
+            font_size: 16,
+            color: Cesium.Color.AZURE,
+            outline: true,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            pixelOffsetY: 0,
+            distanceDisplayCondition: true,
+            distanceDisplayCondition_far: 500000,
+            distanceDisplayCondition_near: 0
+          }
         },
       })
-      graphicLayer2.addGraphic(pathEntity)
+      graphicLayer.addGraphic(graphic)
     },
     getSampledPositionProperty(points){
       let property = new Cesium.SampledPositionProperty();

src/views/carManagement/carTrajectory/index.vue

@@ -8,21 +8,38 @@
 
 							<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div>
 
-							<el-form-item label="车辆牌号" style="display: inline-block;">
+							<el-form-item label="*开始时间" style="display: inline-block;">
+								<el-date-picker v-model="query.bTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
+							</el-form-item>
+
+							<el-form-item label="*结束时间" style="display: inline-block;">
+								<el-date-picker v-model="query.eTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
+							</el-form-item>
+
+							<el-form-item label="选择矿区" style="display: inline-block;">
+								<el-select v-model="query.area" placeholder="请选择矿区">
+									<el-option v-for="(obj,index) in areaInformationData" :label="obj" :value="obj" :key="index"></el-option>
+								</el-select>
+							</el-form-item>
+
+							<br>
+
+							<el-form-item label="*车辆牌号" style="display: inline-block;">
 								<el-select v-model="query.number" placeholder="请选择车辆牌号">
 									<el-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option>
 								</el-select>
 							</el-form-item>
 
-							<el-form-item label="开始时间" style="display: inline-block;">
-								<el-date-picker v-model="query.bTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
-							</el-form-item>
-							<el-form-item label="结束时间" style="display: inline-block;">
-								<el-date-picker v-model="query.eTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
+							<el-form-item label="相关挖机" style="display: inline-block;">
+								<el-input v-model="query.dig"></el-input>
 							</el-form-item>
-							
+
 							<el-button type="primary" icon="el-icon-search" @click="toSearch" style="display: inline-block;">搜索</el-button>
-							<el-button icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">重置</el-button>
+							<el-button icon="el-icon-refresh" @click="clearLimit" style="display: inline-block;">清除所有痕迹</el-button>
+
+							<!-- <el-form-item label="测量距离" style="display: inline-block;">
+								<el-button type="primary" @click="measureDistance()" plain>开测距</el-button>
+							</el-form-item> -->
 
 							<br>
 
@@ -32,6 +49,7 @@
 									<el-option label="4倍" value="4"></el-option>
 									<el-option label="8倍" value="8"></el-option>
 									<el-option label="16倍" value="16"></el-option>
+									<el-option label="32倍" value="32"></el-option>
 								</el-select>
 							</el-form-item>
 
@@ -39,6 +57,13 @@
 						<div id="centerDiv" class="mapcontainer2">
 							<mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod" :key="shuaxinTimer"/>
 						</div>
+						<div class="trajectoryTableView">
+							<div style="font-size:20px;font-weight: 600;">播放时间</div>
+							<div v-for="(obj,index) in trajectoryTableData" :key="index" style="display:flex;justify-content: space-between;margin-top: 1vh;">
+								<div>{{obj.alarmTime}}</div>
+								<div>停止{{obj.time}}分钟</div>
+							</div>
+						</div>
 						<div class="tishiTextStyle" v-if="tishiTextShow">请选择车辆查看轨迹</div>
 					</div>
 				</div>
@@ -65,6 +90,8 @@ export default {
 				number:'',
 				bTime:'',
 				eTime:'',
+				area:'所有矿区',
+				dig:'',
 				playSpeed:'1',
 			},
 			carInformationData:[],
@@ -72,6 +99,7 @@ export default {
 			shuaxinTimer:null,
 			playSpeedNum:5,
 			tishiTextShow:true,
+			trajectoryTableData:[],
 		}
 	},
 	mounted() {
@@ -79,11 +107,35 @@ export default {
 		this.loadData();
 		if(this.$route.query.number){
 			this.query.number = this.$route.query.number;
+			if(this.query.number == ''){
+				this.$notify({
+					title: '请选择车辆牌号！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
+			if(this.query.bTime == ''){
+				this.$notify({
+					title: '请选择开始时间！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
+			if(this.query.eTime == ''){
+				this.$notify({
+					title: '请选择结束时间！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
 			HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
 				if(res.code == 200 && res.data.totalElements != 0){
 					this.tishiTextShow = false;
 					this.shuaxinTimer = new Date().getTime();
-					that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime);
+					that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime,this.trajectoryTableData);
 				}else{
 					this.$notify({
 						title: '暂无该车辆轨迹信息！',
@@ -98,11 +150,42 @@ export default {
 		// 点击搜索
 		toSearch() {
 			let that = this;
+			if(this.query.number == ''){
+				this.$notify({
+					title: '请选择车辆牌号！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
+			if(this.query.bTime == ''){
+				this.$notify({
+					title: '请选择开始时间！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
+			if(this.query.eTime == ''){
+				this.$notify({
+					title: '请选择结束时间！',
+					type: 'warning',
+					duration: 2500
+				});
+				return
+			}
+			//获取地图
 			HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
 				if(res.code == 200 && res.data.totalElements != 0){
 					this.tishiTextShow = false;
-					this.shuaxinTimer = new Date().getTime();
-					that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime);
+					//获取列表
+					HttpReq.truckDispatching.mineAlarmHistoryCountQuery({number:this.query.number,bTime:this.query.bTime,eTime:this.query.eTime}).then((res1) => {
+						if(res1.code == 200){
+							this.trajectoryTableData = res1.data;
+							this.shuaxinTimer = new Date().getTime();
+							that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime,this.trajectoryTableData);
+						}
+					})
 				}else{
 					this.$notify({
 						title: '暂无该车辆轨迹信息！',
@@ -111,6 +194,7 @@ export default {
 					});
 				}
 			})
+			
 		},
 		// 重置搜索
 		clearLimit(){
@@ -118,17 +202,19 @@ export default {
 				number:'',
 				bTime:'',
 				eTime:'',
+				area:'所有矿区',
+				dig:'',
 				playSpeed:'1',
 			};
 			this.playSpeedNum = 5;
+			this.trajectoryTableData = [];
 			this.loadData();
 			this.tishiTextShow = true;
 			this.shuaxinTimer = new Date().getTime();
-			this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
+			this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','',[]);
 		},
 		//获取数据
 		loadData() {
-
 			this.$nextTick(()=>{
 				//获取车辆信息
 				HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
@@ -139,9 +225,14 @@ export default {
 				//获取区域信息
 				HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
 					if(res.code == 200){
-						this.areaInformationData = res.data.content;
+						let arr1 = ['所有矿区'];
+						res.data.content.forEach((item,index)=>{
+							arr1.push(item.name)
+						})
+						this.areaInformationData = arr1;
 					}
 				})
+
 			})
 
 		},
@@ -150,17 +241,21 @@ export default {
 			let that = this;
 			let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
 			this.playSpeedNum = parseFloat(numSpeed1);
-			if(this.query.number == ''){
+			if(this.query.number == '' || this.query.bTime == '' || this.query.eTime == ''){
 				return;
 			}else{
 				HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
 					if(res.code == 200){
 						this.tishiTextShow = false;
 						this.shuaxinTimer = new Date().getTime();
-						that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseFloat(numSpeed1),that.query.bTime,that.query.eTime);
+						that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseFloat(numSpeed1),that.query.bTime,that.query.eTime,this.trajectoryTableData);
 					}
 				})
 			}
+		},
+		//测量距离
+		measureDistance(){
+
 		},
 		// 地图构造完成回调
 		onMapload(map) {
@@ -207,8 +302,8 @@ export default {
 	.device-manage{
 		.mapcontainer2{
 			border: 1px blue solid;
-			width: 80vw;
-			height: 65.5vh;
+			width: 65vw;
+			height: 61vh;
 			overflow: hidden;
 		}
 		.tishiTextStyle{
@@ -217,10 +312,21 @@ export default {
 			font-weight: 600;
 			letter-spacing: 3px;
 			position: absolute;
-			top: 50%;
-			left: 50%;
+			top: 55%;
+			left: 45%;
 			transform: translateX(-50%);
 		}
+		.trajectoryTableView{
+			position: absolute;
+			right: 1vw;
+			bottom: 0.1vh;
+			width: 16vw;
+			height: 61vh;
+			padding: 1vh 1vh;
+			box-sizing: border-box;
+			border: 1px gainsboro solid;
+			overflow-y: scroll;
+		}
 		
 	}