Skip to content

卡
卡车调度系统
Commit 1d37b390 authored by xxx's avatar xxx
Browse files
Options

1

parent ace0d20b
Hide whitespace changes
Inline Side-by-side
Showing with 981 additions and 135 deletions
src/components/mars3d/Map2.vue
View file @ 1d37b390
......@@ -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/components/mars3d/js/graphicManager.js
View file @ 1d37b390
......@@ -262,33 +262,33 @@ import $ from 'jquery'
// graphicLayer.removeGraphic(graphic);
// },
// },
// {
// text: "计算长度",
// iconCls: "fa fa-medium",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// return (
// graphic.type === "polyline" ||
// graphic.type === "polylineP" ||
// graphic.type === "curve" ||
// graphic.type === "curveP" ||
// graphic.type === "polylineVolume" ||
// graphic.type === "polylineVolumeP" ||
// graphic.type === "corridor" ||
// graphic.type === "corridorP" ||
// graphic.type === "wall" ||
// graphic.type === "wallP"
// );
// },
// callback: function (e) {
// let graphic = e.graphic;
// let strDis = mars3d.MeasureUtil.formatDistance(graphic.distance);
// alert("该对象的长度为:" + strDis);
// },
// },
{
text: "计算长度",
iconCls: "fa fa-medium",
show: function (e) {
let graphic = e.graphic;
if (!graphic) {
return false;
}
return (
graphic.type === "polyline" ||
graphic.type === "polylineP" ||
graphic.type === "curve" ||
graphic.type === "curveP" ||
graphic.type === "polylineVolume" ||
graphic.type === "polylineVolumeP" ||
graphic.type === "corridor" ||
graphic.type === "corridorP" ||
graphic.type === "wall" ||
graphic.type === "wallP"
);
},
callback: function (e) {
let graphic = e.graphic;
let strDis = mars3d.MeasureUtil.formatDistance(graphic.distance);
alert("该对象的长度为:" + strDis);
},
},
// {
// text: "计算周长",
// iconCls: "fa fa-medium",
......@@ -393,4 +393,792 @@ import $ from 'jquery'
var height = haoutil.math.random(1000, 9000);
return new mars3d.LatLngPoint(jd, wd, height);
}
// import * as mars3d from "mars3d"
// const Cesium = mars3d.Cesium
// 获取平台内置的右键菜单
export function getDefaultContextMenu(map) {
const that = map.contextmenu
return [
// {
// text: "查看此处坐标",
// icon: mars3d.Icon.Coordinates,
// show: function (e) {
// return Cesium.defined(e.cartesian)
// },
// callback: (e) => {
// // 经纬度
// const mpt = mars3d.LngLatPoint.fromCartesian(e.cartesian)
// const ptNew = mars3d.PointTrans.proj4Trans([mpt.lng, mpt.lat], "EPSG:4326", mars3d.CRS.CGCS2000_GK_Zone_3)
// const inhtml = `
// 经度:${mpt.lng}, 纬度:${mpt.lat}, 海拔:${mpt.alt},
// 横坐标:${ptNew[0].toFixed(1)}, 纵坐标:${ptNew[1].toFixed(1)} (CGCS2000)
// `
// globalAlert(inhtml, "位置信息")
// }
// },
// {
// text: "查看当前视角",
// icon: mars3d.Icon.CameraInfo,
// callback: (e) => {
// const mpt = JSON.stringify(map.getCameraView())
// globalAlert(mpt, "当前视角信息")
// }
// },
// {
// text: "视角切换",
// icon: mars3d.Icon.Camera,
// children: [
// {
// text: "允许进入地下",
// icon: mars3d.Icon.UndergroundYes,
// show: function (e) {
// return map.scene.screenSpaceCameraController.enableCollisionDetection
// },
// callback: (e) => {
// map.scene.screenSpaceCameraController.enableCollisionDetection = false
// }
// },
// {
// text: "禁止进入地下",
// icon: mars3d.Icon.UndergroundNo,
// show: function (e) {
// return !map.scene.screenSpaceCameraController.enableCollisionDetection
// },
// callback: (e) => {
// map.scene.screenSpaceCameraController.enableCollisionDetection = true
// }
// },
// {
// text: "绕此处环绕飞行",
// icon: mars3d.Icon.RotatePointStart,
// show: function (e) {
// return e.cartesian && (!that.rotatePoint || !that.rotatePoint?.isStart)
// },
// callback: (e) => {
// if (!that.rotatePoint) {
// that.rotatePoint = new mars3d.thing.RotatePoint()
// map.addThing(that.rotatePoint)
// }
// that.rotatePoint.start(e.cartesian)
// }
// },
// {
// text: "关闭环绕飞行",
// icon: mars3d.Icon.RotatePointStop,
// show: function (e) {
// return that.rotatePoint?.isStart
// },
// callback: (e) => {
// if (that.rotatePoint) {
// that.rotatePoint.stop()
// }
// }
// },
// {
// text: "移动到此处",
// icon: mars3d.Icon.FlyToPoint,
// show: function (e) {
// return Cesium.defined(e.cartesian)
// },
// callback: (e) => {
// const cameraDistance = Cesium.Cartesian3.distance(e.cartesian, map.camera.positionWC) * 0.1
// map.flyToPoint(e.cartesian, {
// radius: cameraDistance, // 距离目标点的距离
// maximumHeight: map.camera.positionCartographic.height
// })
// }
// },
// {
// text: "第一视角站到此处",
// icon: mars3d.Icon.FirstPerspective,
// show: function (e) {
// return Cesium.defined(e.cartesian)
// },
// callback: (e) => {
// map.camera.flyTo({
// destination: mars3d.PointUtil.addPositionsHeight(e.cartesian, 10), // 升高10米
// orientation: {
// heading: map.camera.heading,
// pitch: 0.0,
// roll: 0.0
// },
// maximumHeight: map.camera.positionCartographic.height
// })
// }
// },
// {
// text: "开启键盘漫游",
// icon: mars3d.Icon.KeyboardRoamYes,
// show: function (e) {
// return !map.keyboardRoam.enabled
// },
// callback: (e) => {
// map.keyboardRoam.enabled = true
// }
// },
// {
// text: "关闭键盘漫游",
// icon: mars3d.Icon.KeyboardRoamNo,
// show: function (e) {
// return map.keyboardRoam.enabled
// },
// callback: (e) => {
// map.keyboardRoam.enabled = false
// }
// },
// {
// text: "取消锁定",
// icon: mars3d.Icon.TrackedEntityNo,
// show: function (e) {
// return map.trackedEntity !== undefined
// },
// callback: (e) => {
// map.trackedEntity = undefined
// }
// }
// ]
// },
// {
// text: "三维模型",
// icon: mars3d.Icon.Tileset,
// show: function (e) {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// return Cesium.defined(model)
// },
// children: [
// {
// text: "显示三角网",
// icon: mars3d.Icon.TilesetWireframeYes,
// show: function (e) {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// return !model.debugWireframe
// },
// callback: (e) => {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// model.debugWireframe = true
// }
// },
// {
// text: "关闭三角网",
// icon: mars3d.Icon.TilesetWireframeNo,
// show: function (e) {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// return model.debugWireframe
// },
// callback: (e) => {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// model.debugWireframe = false
// }
// },
// {
// text: "显示包围盒",
// icon: mars3d.Icon.TilesetBoundingVolumeYes,
// show: function (e) {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// return !model.debugShowBoundingVolume
// },
// callback: (e) => {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// model.debugShowBoundingVolume = true
// }
// },
// {
// text: "关闭包围盒",
// icon: mars3d.Icon.TilesetBoundingVolumeNo,
// show: function (e) {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// return model.debugShowBoundingVolume
// },
// callback: (e) => {
// const model = map.pick3DTileset(e.cartesian) // 拾取绘制返回的模型
// model.debugShowBoundingVolume = false
// }
// }
// ]
// },
// {
// text: "地形服务",
// icon: mars3d.Icon.Terrain,
// show: function (e) {
// return Cesium.defined(e.cartesian)
// },
// children: [
// {
// text: "开启地形",
// icon: mars3d.Icon.TerrainYes,
// show: function (e) {
// return !map.hasTerrain
// },
// callback: (e) => {
// map.hasTerrain = true
// }
// },
// {
// text: "关闭地形",
// icon: mars3d.Icon.TerrainNo,
// show: function (e) {
// return map.hasTerrain
// },
// callback: (e) => {
// map.hasTerrain = false
// }
// },
// {
// text: "显示三角网",
// icon: mars3d.Icon.TerrainWireframeYes,
// show: function (e) {
// return !map.scene.globe._surface.tileProvider._debug.wireframe
// },
// callback: (e) => {
// map.scene.globe._surface.tileProvider._debug.wireframe = true
// }
// },
// {
// text: "关闭三角网",
// icon: mars3d.Icon.TerrainWireframeNo,
// show: function (e) {
// return map.scene.globe._surface.tileProvider._debug.wireframe
// },
// callback: (e) => {
// map.scene.globe._surface.tileProvider._debug.wireframe = false
// }
// }
// ]
// },
{
text: "图上量算",
icon: mars3d.Icon.Measure,
children: [
{
text: "距离",
icon: mars3d.Icon.MeasureDistance,
callback: (e) => {
if (!that.measure) {
that.measure = new mars3d.thing.Measure()
map.addThing(that.measure)
}
that.measure.distance()
}
},
// {
// text: "面积",
// icon: mars3d.Icon.MeasureArea,
// callback: (e) => {
// if (!that.measure) {
// that.measure = new mars3d.thing.Measure()
// map.addThing(that.measure)
// }
// that.measure.area()
// }
// },
// {
// text: "高度差",
// icon: mars3d.Icon.MeasureHeight,
// callback: (e) => {
// if (!that.measure) {
// that.measure = new mars3d.thing.Measure()
// map.addThing(that.measure)
// }
// that.measure.heightTriangle()
// }
// },
// {
// text: "角度",
// icon: mars3d.Icon.MeasureAngle,
// callback: (e) => {
// if (!that.measure) {
// that.measure = new mars3d.thing.Measure()
// map.addThing(that.measure)
// }
// that.measure.angle()
// }
// },
{
text: "删除测量",
icon: mars3d.Icon.Delete,
show: function (e) {
return that.measure && that.measure.hasMeasure
},
callback: (e) => {
if (that.measure) {
that.measure.clear()
}
}
}
]
},
// {
// text: "图上标记",
// icon: mars3d.Icon.Draw,
// children: [
// {
// text: "标记点",
// icon: mars3d.Icon.DrawPoint,
// callback: (e) => {
// map.graphicLayer.startDraw({
// type: "point",
// style: {
// pixelSize: 12,
// color: "#3388ff"
// },
// success: function (graphic) {
// // eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates))
// }
// })
// }
// },
// {
// text: "标记线",
// icon: mars3d.Icon.DrawPolyline,
// callback: (e) => {
// map.graphicLayer.startDraw({
// type: "polyline",
// style: {
// color: "#55ff33",
// width: 3
// },
// success: function (graphic) {
// // eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates))
// }
// })
// }
// },
// {
// text: "标记面",
// icon: mars3d.Icon.DrawPolygon,
// callback: (e) => {
// map.graphicLayer.startDraw({
// type: "polygon",
// style: {
// color: "#29cf34",
// opacity: 0.5,
// outline: true,
// outlineWidth: 2.0
// },
// success: function (graphic) {
// // eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates))
// }
// })
// }
// },
// {
// text: "标记圆",
// icon: mars3d.Icon.DrawCircle,
// callback: (e) => {
// map.graphicLayer.startDraw({
// type: "circle",
// style: {
// color: "#ffff00",
// opacity: 0.6
// },
// success: function (graphic) {
// // eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates))
// }
// })
// }
// },
// {
// text: "标记矩形",
// icon: mars3d.Icon.DrawRectangle,
// callback: (e) => {
// map.graphicLayer.startDraw({
// type: "rectangle",
// style: {
// color: "#ffff00",
// opacity: 0.6
// },
// success: function (graphic) {
// // eslint-disable-next-line no-console
// console.log(JSON.stringify(graphic.coordinates))
// }
// })
// }
// },
// {
// text: "允许编辑",
// icon: mars3d.Icon.DrawEditYes,
// show: function (e) {
// return !map.graphicLayer.hasEdit
// },
// callback: (e) => {
// map.graphicLayer.hasEdit = true
// }
// },
// {
// text: "禁止编辑",
// icon: mars3d.Icon.DrawEditNo,
// show: function (e) {
// return map.graphicLayer.hasEdit
// },
// callback: (e) => {
// map.graphicLayer.hasEdit = false
// }
// },
// {
// text: "导出GeoJSON",
// icon: mars3d.Icon.DrawDownJson,
// show: function (e) {
// return map.graphicLayer.length > 0
// },
// callback: (e) => {
// mars3d.Util.downloadFile("图上标记.json", JSON.stringify(map.graphicLayer.toGeoJSON()))
// }
// },
// {
// text: "清除所有标记",
// icon: mars3d.Icon.Delete,
// show: function (e) {
// return map.graphicLayer.length > 0
// },
// callback: (e) => {
// map.graphicLayer.clear()
// }
// }
// ]
// },
// {
// text: "特效效果",
// icon: mars3d.Icon.Effect,
// children: [
// {
// text: "开启下雨",
// icon: mars3d.Icon.RainEffectYes,
// show: function (e) {
// return !that.rainEffect
// },
// callback: (e) => {
// if (!that.rainEffect) {
// that.rainEffect = new mars3d.effect.RainEffect()
// map.addEffect(that.rainEffect)
// }
// }
// },
// {
// text: "关闭下雨",
// icon: mars3d.Icon.RainEffectNo,
// show: function (e) {
// return that.rainEffect
// },
// callback: (e) => {
// if (that.rainEffect) {
// map.removeEffect(that.rainEffect, true)
// delete that.rainEffect
// }
// }
// },
// {
// text: "开启下雪",
// icon: mars3d.Icon.SnowEffectYes,
// show: function (e) {
// return !that.snowEffect
// },
// callback: (e) => {
// if (!that.snowEffect) {
// that.snowEffect = new mars3d.effect.SnowEffect()
// map.addEffect(that.snowEffect)
// }
// }
// },
// {
// text: "关闭下雪",
// icon: mars3d.Icon.SnowEffectNo,
// show: function (e) {
// return that.snowEffect
// },
// callback: (e) => {
// if (that.snowEffect) {
// map.removeEffect(that.snowEffect, true)
// delete that.snowEffect
// }
// }
// },
// {
// text: "开启雾天气",
// icon: mars3d.Icon.FogEffectYes,
// show: function (e) {
// return !that.fogEffect
// },
// callback: (e) => {
// if (!that.fogEffect) {
// const height = map.camera.positionCartographic.height * 2
// that.fogEffect = new mars3d.effect.FogEffect({
// fogByDistance: new Cesium.Cartesian4(0.1 * height, 0.1, height, 0.8)
// })
// map.addEffect(that.fogEffect)
// }
// }
// },
// {
// text: "关闭雾天气",
// icon: mars3d.Icon.FogEffectNo,
// show: function (e) {
// return that.fogEffect
// },
// callback: (e) => {
// if (that.fogEffect) {
// map.removeEffect(that.fogEffect, true)
// delete that.fogEffect
// }
// }
// },
// {
// text: "开启泛光",
// icon: mars3d.Icon.BloomEffectYes,
// show: function (e) {
// return !that.bloomEffect
// },
// callback: (e) => {
// if (!that.bloomEffect) {
// that.bloomEffect = new mars3d.effect.BloomEffect()
// map.addEffect(that.bloomEffect)
// }
// }
// },
// {
// text: "关闭泛光",
// icon: mars3d.Icon.BloomEffectNo,
// show: function (e) {
// return that.bloomEffect
// },
// callback: (e) => {
// if (that.bloomEffect) {
// map.removeEffect(that.bloomEffect, true)
// delete that.bloomEffect
// }
// }
// },
// {
// text: "开启亮度",
// icon: mars3d.Icon.BrightnessEffectYes,
// show: function (e) {
// return !that.brightnessEffect
// },
// callback: (e) => {
// if (!that.brightnessEffect) {
// that.brightnessEffect = new mars3d.effect.BrightnessEffect()
// map.addEffect(that.brightnessEffect)
// }
// }
// },
// {
// text: "关闭亮度",
// icon: mars3d.Icon.BrightnessEffectNo,
// show: function (e) {
// return that.brightnessEffect
// },
// callback: (e) => {
// if (that.brightnessEffect) {
// map.removeEffect(that.brightnessEffect, true)
// delete that.brightnessEffect
// }
// }
// },
// {
// text: "开启夜视",
// icon: mars3d.Icon.NightVisionEffectYes,
// show: function (e) {
// return !that.nightVisionEffect
// },
// callback: (e) => {
// if (!that.nightVisionEffect) {
// that.nightVisionEffect = new mars3d.effect.NightVisionEffect()
// map.addEffect(that.nightVisionEffect)
// }
// }
// },
// {
// text: "关闭夜视",
// icon: mars3d.Icon.NightVisionEffectNo,
// show: function (e) {
// return that.nightVisionEffect
// },
// callback: (e) => {
// if (that.nightVisionEffect) {
// map.removeEffect(that.nightVisionEffect, true)
// delete that.nightVisionEffect
// }
// }
// },
// {
// text: "开启黑白",
// icon: mars3d.Icon.BlackAndWhiteEffectYes,
// show: function (e) {
// return !that.blackAndWhiteEffect
// },
// callback: (e) => {
// if (!that.blackAndWhiteEffect) {
// that.blackAndWhiteEffect = new mars3d.effect.BlackAndWhiteEffect()
// map.addEffect(that.blackAndWhiteEffect)
// }
// }
// },
// {
// text: "关闭黑白",
// icon: mars3d.Icon.BlackAndWhiteEffectNo,
// show: function (e) {
// return that.blackAndWhiteEffect
// },
// callback: (e) => {
// if (that.blackAndWhiteEffect) {
// map.removeEffect(that.blackAndWhiteEffect, true)
// delete that.blackAndWhiteEffect
// }
// }
// },
// {
// text: "开启拾取高亮",
// icon: mars3d.Icon.OutlineEffectYes,
// show: function (e) {
// return !that.outlineEffect
// },
// callback: (e) => {
// if (!that.outlineEffect) {
// that.outlineEffect = new mars3d.effect.OutlineEffect()
// map.addEffect(that.outlineEffect)
// }
// }
// },
// {
// text: "关闭拾取高亮",
// icon: mars3d.Icon.OutlineEffectNo,
// show: function (e) {
// return that.outlineEffect
// },
// callback: (e) => {
// if (that.outlineEffect) {
// map.removeEffect(that.outlineEffect, true)
// delete that.outlineEffect
// }
// }
// }
// ]
// },
// {
// text: "场景设置",
// icon: mars3d.Icon.Scene,
// children: [
// {
// text: "开启深度监测",
// icon: mars3d.Icon.DepthTestYes,
// show: function (e) {
// return !map.scene.globe.depthTestAgainstTerrain
// },
// callback: (e) => {
// map.scene.globe.depthTestAgainstTerrain = true
// }
// },
// {
// text: "关闭深度监测",
// icon: mars3d.Icon.DepthTestNo,
// show: function (e) {
// return map.scene.globe.depthTestAgainstTerrain
// },
// callback: (e) => {
// map.scene.globe.depthTestAgainstTerrain = false
// }
// },
// {
// text: "显示星空背景",
// icon: mars3d.Icon.SkyBoxYes,
// show: function (e) {
// return !map.scene.skyBox.show
// },
// callback: (e) => {
// map.scene.skyBox.show = true // 天空盒
// map.scene.moon.show = true // 太阳
// map.scene.sun.show = true // 月亮
// }
// },
// {
// text: "关闭星空背景",
// icon: mars3d.Icon.SkyBoxNo,
// show: function (e) {
// return map.scene.skyBox.show
// },
// callback: (e) => {
// map.scene.skyBox.show = false // 天空盒
// map.scene.moon.show = false // 太阳
// map.scene.sun.show = false // 月亮
// }
// },
// {
// text: "开启日照阴影",
// icon: mars3d.Icon.ShadowYes,
// show: function (e) {
// return !map.viewer.shadows
// },
// callback: (e) => {
// map.viewer.shadows = true
// map.viewer.terrainShadows = Cesium.ShadowMode.ENABLED
// map.scene.globe.enableLighting = true
// }
// },
// {
// text: "关闭日照阴影",
// icon: mars3d.Icon.ShadowNo,
// show: function (e) {
// return map.viewer.shadows
// },
// callback: (e) => {
// map.viewer.shadows = false
// map.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
// map.scene.globe.enableLighting = false
// }
// },
// {
// text: "开启大气渲染",
// icon: mars3d.Icon.SkyAtmosphereYes,
// show: function (e) {
// return !map.scene.skyAtmosphere.show
// },
// callback: (e) => {
// map.scene.skyAtmosphere.show = true
// map.scene.globe.showGroundAtmosphere = true
// }
// },
// {
// text: "关闭大气渲染",
// icon: mars3d.Icon.SkyAtmosphereNo,
// show: function (e) {
// return map.scene.skyAtmosphere.show
// },
// callback: (e) => {
// map.scene.skyAtmosphere.show = false
// map.scene.globe.showGroundAtmosphere = false
// }
// },
// {
// text: "场景出图",
// icon: mars3d.Icon.ExpImage,
// callback: (e) => {
// map.expImage()
// }
// }
// ]
// }
]
}
\ No newline at end of file
src/views/carManagement/carTrajectory/index.vue
View file @ 1d37b390
......@@ -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;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment