Skip to content

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

修改

parent 903ab1c6
Hide 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 @@ ...@@ -2,13 +2,6 @@
<div style="wight:100%;height:100%;"> <div style="wight:100%;height:100%;">
<div :id="`mars3d-container${mapKey}`" <div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div> :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> </div>
</template> </template>
...@@ -95,7 +88,7 @@ export default { ...@@ -95,7 +88,7 @@ export default {
toJavaCoordinates:[], toJavaCoordinates:[],
weilanName:[], weilanName:[],
carNumber:'', carNumber:'',
carPlaySpeed:120, carPlaySpeed:5,
} }
}, },
...@@ -138,143 +131,80 @@ export default { ...@@ -138,143 +131,80 @@ export default {
methods: { methods: {
//获取数据 //获取数据
getCoordinate(equipmentName,number,speed) { getCoordinate(equipmentName,number,speed,bTime,eTime) {
let that = this; let that = this;
that.deviceId = equipmentName; that.deviceId = equipmentName;
that.carNumber = number; that.carNumber = number;
that.carPlaySpeed = speed; 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 == ''){ 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{ }else{
if(that.deviceId == '' || that.deviceId == undefined){ if(that.deviceId == '' || that.deviceId == undefined){
this.$notify({ this.$notify({
title: '此车暂无轨迹！', title: '暂无轨迹数据！',
type: 'warning', type: 'warning',
duration: 2500 duration: 2500
}); });
}else{ }else{
HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId}).then((res) => { HttpReq.truckDispatching.getAllHistroyCarTrajectoryQuery({name:that.deviceId,bTime:bTime,eTime:eTime}).then((res) => {
//console.log('获取历史轨迹',res); //console.log('获取历史轨迹',res);
if(res.code == 200){ if(res.code == 200){
let obj1 = {}; if(res.data.line.length == 0){
let array1 = []; this.$notify({
res.data.line.forEach((item,index)=>{ title: '暂无轨迹数据！',
let array2 = []; type: 'warning',
array2.push(item.location.x); duration: 2500
array2.push(item.location.y); });
array2.push('500'); }else{
array1.push(array2);
}) let obj1 = {};
obj1.name = res.data.name; let array1 = [];
obj1.arrays = array1; res.data.line.forEach((item,index)=>{
//let hisCenterData = [...that.historyTrajectoryData]; let array2 = [];
let hisCenterData = []; array2.push(item.lat);
hisCenterData.push(obj1); array2.push(item.lon);
that.historyTrajectoryData = [...hisCenterData]; array2.push(1000);
array1.push(array2);
this.$nextTick(()=>{ })
if (this.appendToBody) { obj1.name = res.data.name;
document.body.appendChild(this.$el) obj1.arrays = array1;
} //let hisCenterData = [...that.historyTrajectoryData];
if (this.mapKey) { let hisCenterData = [];
this.initMars3d(this.options) hisCenterData.push(obj1);
} else { that.historyTrajectoryData = [...hisCenterData];
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图 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)// 构建地图
})
}
})
}
} }
}) })
} }
} }
},
//上传围栏数据
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: '取消输入'
});
});
}
}, },
//创建地图电子围栏 //创建地图电子围栏
initMars3d(options) { initMars3d(options) {
...@@ -292,21 +222,25 @@ export default { ...@@ -292,21 +222,25 @@ export default {
// 创建三维地球场景 // 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions) map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map 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();
var graphicLayer1 = new mars3d.layer.GraphicLayer(); // map.addLayer(graphicLayer1);
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){
var graphicLayer2 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer2);
var itemText = `<table style="width: auto;"> var itemText = `<table style="width: auto;">
<tr> <tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th> <th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：${that.carNumber}</th>
...@@ -315,84 +249,15 @@ export default { ...@@ -315,84 +249,15 @@ export default {
<td>设备名称：${that.deviceId}</td> <td>设备名称：${that.deviceId}</td>
</tr> </tr>
</table>`; </table>`;
initGraphicManager(graphicLayer1,itemText); initGraphicManager(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer1,this.persons,that.carNumber); that.addGraphic_02(graphicLayer2,item.arrays,that.carNumber);
})
//历史轨迹回放
that.historyTrajectoryData.forEach(function(item,index){
var graphicLayer2 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer2);
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(graphicLayer2,itemText);
that.addGraphic_02(graphicLayer2,item.arrays,item.name);
})
}
// 抛出事件 // 抛出事件
this.$emit('onload', map) 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; let that = this;
var property = new Cesium.SampledPositionProperty(); var property = new Cesium.SampledPositionProperty();
var tempTime; var tempTime;
...@@ -436,7 +301,7 @@ export default { ...@@ -436,7 +301,7 @@ export default {
minimumPixelSize: 50, minimumPixelSize: 50,
}, },
}); });
graphicLayer1.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer) graphicLayer2.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
}, },
getSampledPositionProperty(points){ getSampledPositionProperty(points){
......
src/views/carManagement/carTrajectory/index.vue
View file @ 709e01cc
...@@ -8,51 +8,32 @@ ...@@ -8,51 +8,32 @@
<div style="font-size:18px;font-weight:bold;margin-bottom:10px;">车辆历史轨迹查询</div> <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-form-item label="车辆牌号" style="display: inline-block;">
<el-select v-model="query.number" placeholder="请选择车辆牌号"> <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-option v-for="(obj,index) in carInformationData" :label="obj.number" :value="obj.number" :key="index"></el-option>
</el-select> </el-select>
</el-form-item> </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 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>
<br> <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-form-item label="观看倍速" style="display: inline-block;">
<el-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()"> <el-select v-model="query.playSpeed" placeholder="请选择观看倍速" @change="changeSpeed()">
<el-option label="1倍" value="1"></el-option> <el-option label="1倍" value="1"></el-option>
<el-option label="4倍" value="4"></el-option> <el-option label="4倍" value="4"></el-option>
<el-option label="8倍" value="8"></el-option> <el-option label="8倍" value="8"></el-option>
<el-option label="16倍" value="16"></el-option> <el-option label="16倍" value="16"></el-option>
<el-option label="32倍" value="32"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- <el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button> -->
</el-form> </el-form>
<div id="centerDiv" class="mapcontainer2"> <div id="centerDiv" class="mapcontainer2">
...@@ -81,30 +62,30 @@ export default { ...@@ -81,30 +62,30 @@ export default {
configUrl: basePathUrl + 'config/config.json', configUrl: basePathUrl + 'config/config.json',
query:{ query:{
number:'', number:'',
startTime:'', bTime:'',
endTime:'', eTime:'',
playSpeed:'1', playSpeed:'1',
}, },
carInformationData:[], carInformationData:[],
areaInformationData:[], areaInformationData:[],
shuaxinTimer:null, shuaxinTimer:null,
playSpeedNum:120, playSpeedNum:5,
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.loadData(); this.loadData();
this.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
}) })
}, },
methods: { methods: {
// 点击搜索 // 点击搜索
toSearch() { toSearch() {
let that = this; let that = this;
//console.log(this.query.number);
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => { HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
this.shuaxinTimer = new Date().getTime(); 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 { ...@@ -113,13 +94,14 @@ export default {
let that = this; let that = this;
this.query = { this.query = {
number:'', number:'',
startTime:'', bTime:'',
endTime:'', eTime:'',
playSpeed:'1', playSpeed:'1',
}; };
this.playSpeedNum = 5;
this.loadData(); this.loadData();
this.shuaxinTimer = new Date().getTime(); this.shuaxinTimer = new Date().getTime();
that.$refs.mars3dViewerMapMethod.getCoordinate('','',120); that.$refs.mars3dViewerMapMethod.getCoordinate('','',5,'','');
}, },
//获取数据 //获取数据
loadData() { loadData() {
...@@ -143,15 +125,15 @@ export default { ...@@ -143,15 +125,15 @@ export default {
//改变倍速 //改变倍速
changeSpeed(){ changeSpeed(){
let that = this; let that = this;
let numSpeed1 = 120 / parseInt(this.query.playSpeed); let numSpeed1 = 5 / parseFloat(this.query.playSpeed);
this.playSpeedNum = parseInt(numSpeed1); this.playSpeedNum = parseFloat(numSpeed1);
if(this.query.number == ''){ if(this.query.number == ''){
return; return;
}else{ }else{
HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => { HttpReq.truckDispatching.carInformationQuery({number:this.query.number}).then((res) => {
if(res.code == 200){ if(res.code == 200){
this.shuaxinTimer = new Date().getTime(); 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 { ...@@ -200,6 +182,7 @@ export default {
.device-manage{ .device-manage{
.mapcontainer2{ .mapcontainer2{
border: 1px blue solid;
width: 80vw; width: 80vw;
height: 65.5vh; height: 65.5vh;
overflow: hidden; 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