Skip to content

卡
卡车调度系统
Commit 709e01cc authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent 903ab1c6
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 250 deletions
src/components/mars3d/Map2.vue
View file @ 709e01cc
......@@ -2,13 +2,6 @@
<div style="wight:100%;height:100%;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<!-- <div class="infoview">
<el-button type="primary" @click="btnStartDraw()">设置围栏</el-button>
<el-button type="primary" @click="uploaded()">上传围栏</el-button>
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许上传一个围栏，并且围栏必须是封闭图形</div>
</div> -->
</div>
</template>
......@@ -95,7 +88,7 @@ export default {
toJavaCoordinates:[],
weilanName:[],
carNumber:'',
carPlaySpeed:120,
carPlaySpeed:5,
}
},
......@@ -138,66 +131,51 @@ export default {
methods: {
//获取数据
getCoordinate(equipmentName,number,speed) {
getCoordinate(equipmentName,number,speed,bTime,eTime) {
let that = this;
that.deviceId = equipmentName;
that.carNumber = number;
that.carPlaySpeed = speed;
//获取电子围栏
HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
if(true){;
//console.log(res);
let data1 = [];
for(let key in res){
that.weilanName.push(key);
let arrays = [];
res[key].forEach(function(item){
var arr = [];
arr[0] = item.lon;
arr[1] = item.lat;
arr[2] = "500";
arrays.push(arr);
})
data1.push(arrays)
}
that.zuobianData = data1
//console.log("zuobianData",that.zuobianData);
//console.log("weilanName",that.weilanName);
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)// 构建地图
})
}
})
}
})
//获取历史轨迹
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)// 构建地图
// })
// }
// })
}else{
if(that.deviceId == '' || that.deviceId == undefined){
this.$notify({
title: '此车暂无轨迹！',
title: '暂无轨迹数据！',
type: 'warning',
duration: 2500
});
}else{
HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId}).then((res) => {
HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId,bTime:bTime,eTime:eTime}).then((res) => {
//console.log('获取历史轨迹',res);
if(res.code == 200){
if(res.data.line.length == 0){
this.$notify({
title: '暂无轨迹数据！',
type: 'warning',
duration: 2500
});
}else{
let obj1 = {};
let array1 = [];
res.data.line.forEach((item,index)=>{
let array2 = [];
array2.push(item.location.x);
array2.push(item.location.y);
array2.push('500');
array2.push(item.lat);
array2.push(item.lon);
array2.push(1000);
array1.push(array2);
})
obj1.name = res.data.name;
......@@ -219,60 +197,12 @@ export default {
})
}
})
}
})
}
}
},
//上传围栏数据
uploaded(){
let newData = [...this.toJavaCoordinates];
newData.pop();
if(this.toJavaCoordinates.length == 0){
this.$message({
type: 'warning',
message: '请绘制电子围栏'
});
}else{
this.$prompt('电子围栏名称不得为空且不能与之前围栏名称重复', '请输入电子围栏名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
},
}).then(({ value }) => {
let allObj = {};
allObj.name = value;
allObj.zuobiao = newData;
this.toJavaCoordinates = [];
console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
if(res.code == 200){
this.$notify({
title: '上传电子围栏成功！',
type: 'success',
duration: 2500
});
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
},
......@@ -293,30 +223,19 @@ export default {
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map
//围栏回显
that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]);
that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
})
if(that.carNumber == '' || that.deviceId == '' || that.deviceId == undefined){
}else{
//创建矢量数据图层2
var graphicLayer1 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer1);
var itemText = `<table style="width: auto;">
<tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
</tr>
<tr>
<td>设备名称：${that.deviceId}</td>
</tr>
</table>`;
initGraphicManager(graphicLayer1,itemText);
that.addGraphic_02(graphicLayer1,this.persons,that.carNumber);
//历史轨迹回放例子
// var graphicLayer1 = new mars3d.layer.GraphicLayer();
// map.addLayer(graphicLayer1);
// var itemText = `<table style="width: auto;">
// <tr>
// <th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
// </tr>
// <tr>
// <td>设备名称：${that.deviceId}</td>
// </tr>
// </table>`;
// initGraphicManager(graphicLayer1,itemText);
// that.addGraphic_02(graphicLayer1,this.persons,that.carNumber);
//历史轨迹回放
that.historyTrajectoryData.forEach(function(item,index){
......@@ -331,68 +250,14 @@ export default {
</tr>
</table>`;
initGraphicManager(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer2,item.arrays,item.name);
that.addGraphic_02(graphicLayer2,item.arrays,that.carNumber);
})
}
// 抛出事件
this.$emit('onload', map)
},
//围栏设置
btnStartDraw(){
this.toJavaCoordinates = [];
let that = this;
var graphicLayer3 = new mars3d.layer.GraphicLayer();
graphicLayer3.on(mars3d.EventType.click, function (event) {
var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
that.toJavaCoordinates.push(mpt.toString().split(','));
console.log(that.toJavaCoordinates);
});
map.addLayer(graphicLayer3);
initLayerManager(graphicLayer3);
graphicLayer3.startDraw({
type: "polyline",
style: {
color: "red",
width: 5,
clampToGround: false,
label: {
text: "围栏区域",
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
},
//围栏回显
addGraphic_01(graphicLayer,positions,weilanName){
let graphic = new mars3d.graphic.PolygonEntity({
positions: positions,
style: {
color: "red",
opacity: 0.5,
outline: true,
outlineWidth: 3,
outlineColor: "#ffffff",
label: {
text: weilanName,
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
//车辆轨迹
addGraphic_02(graphicLayer1,positions,truckName) {
addGraphic_02(graphicLayer2,positions,truckName) {
let that = this;
var property = new Cesium.SampledPositionProperty();
var tempTime;
......@@ -436,7 +301,7 @@ export default {
minimumPixelSize: 50,
},
});
graphicLayer1.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
graphicLayer2.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
getSampledPositionProperty(points){
......
src/views/carManagement/carTrajectory/index.vue
View file @ 709e01cc
......@@ -8,51 +8,32 @@
<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div>
<!-- <el-form-item label="开始时间" style="display: inline-block;">
<el-date-picker v-model="query.startTime" type="datetime" placeholder="选择开始时间"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" style="display: inline-block;">
<el-date-picker v-model="query.endTime" type="datetime" placeholder="选择结束时间"></el-date-picker>
</el-form-item>
<el-form-item label="选择矿区" style="display: inline-block;">
<el-select v-model="query.road" placeholder="请选择矿区">
<el-option v-for="(obj,index) in areaInformationData" :label="obj.name" :value="obj.name" :key="index"></el-option>
</el-select>
</el-form-item> -->
<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>
<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>
<br>
<!-- <el-form-item label="测量距离" style="display: inline-block;">
<el-button type="primary" plain style="font-size:15px;">开测距</el-button>
<el-button type="primary" plain style="font-size:15px;">关测距</el-button>
</el-form-item>
<el-form-item label="轨迹时间点" style="display: inline-block;">
<el-select v-model="query.pointOfTime" placeholder="请选择轨迹时间点">
<el-option label="点1" value="点1"></el-option>
<el-option label="点2" value="点2"></el-option>
<el-option label="点3" value="点3"></el-option>
</el-select>
</el-form-item>
<el-button style="font-size:15px;">暂停</el-button>
<el-button style="font-size:15px;">继续</el-button>
<el-button style="font-size:15px;">统计轨迹</el-button> -->
<el-form-item label="观看倍速" style="display: inline-block;">
<el-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()">
<el-option label="1倍" value="1"></el-option>
<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>
<!-- <el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button> -->
</el-form>
<div id="centerDiv" class="mapcontainer2">
......@@ -81,30 +62,30 @@ export default {
configUrl: basePathUrl + 'config/config.json',
query:{
number:'',
startTime:'',
endTime:'',
bTime:'',
eTime:'',
playSpeed:'1',
},
carInformationData:[],
areaInformationData:[],
shuaxinTimer:null,
playSpeedNum:120,
playSpeedNum:5,
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
})
},
methods: {
// 点击搜索
toSearch() {
let that = this;
//console.log(this.query.number);
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){
this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum);
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,that.playSpeedNum,that.query.bTime,that.query.eTime);
}
})
},
......@@ -113,13 +94,14 @@ export default {
let that = this;
this.query = {
number:'',
startTime:'',
endTime:'',
bTime:'',
eTime:'',
playSpeed:'1',
};
this.playSpeedNum = 5;
this.loadData();
this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate('','',120);
that.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
},
//获取数据
loadData() {
......@@ -143,15 +125,15 @@ export default {
//改变倍速
changeSpeed(){
let that = this;
let numSpeed1 = 120 / parseInt(this.query.playSpeed);
this.playSpeedNum = parseInt(numSpeed1);
let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
this.playSpeedNum = parseFloat(numSpeed1);
if(this.query.number == ''){
return;
}else{
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){
this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseInt(numSpeed1));
that.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content[0].equipmentName,res.data.content[0].number,parseFloat(numSpeed1),that.query.bTime,that.query.eTime);
}
})
}
......@@ -200,6 +182,7 @@ export default {
.device-manage{
.mapcontainer2{
border: 1px blue solid;
width: 80vw;
height: 65.5vh;
overflow: hidden;
......
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