Skip to content

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

1

parent ace0d20b
Expand all 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
This diff is collapsed.
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