Commit 88edbf14 authored by xxx's avatar xxx

修改关键点设置

parent 3cc946a1
...@@ -2357,6 +2357,68 @@ var HttpReq = function(){ ...@@ -2357,6 +2357,68 @@ var HttpReq = function(){
data:data, data:data,
}) })
}, },
//设置控制点——关键点信息表
apiCpointQuery: function(param){
return request({
url: '/api/Cpoint',
method: 'get',
params:param,
})
},
apiCpointAdd: function(data){
return request({
url: '/api/Cpoint',
method: 'POST',
data:data,
}).then((res) => {
return res
})
},
apiCpointUpdate: function(data){
return request({
url: '/api/Cpoint',
method: 'PUT',
data:data,
})
},
apiCpointDel: function(data){
return request({
url: '/api/Cpoint',
method: 'Delete',
data:data,
})
},
//设置控制点——关键点连接信息表
apiPathmapQuery: function(param){
return request({
url: '/api/Pathmap',
method: 'get',
params:param,
})
},
apiPathmapAdd: function(data){
return request({
url: '/api/Pathmap',
method: 'POST',
data:data,
}).then((res) => {
return res
})
},
apiPathmapUpdate: function(data){
return request({
url: '/api/Pathmap',
method: 'PUT',
data:data,
})
},
apiPathmapDel: function(data){
return request({
url: '/api/Pathmap',
method: 'Delete',
data:data,
})
},
......
...@@ -20,6 +20,9 @@ ...@@ -20,6 +20,9 @@
import * as mars3d from 'mars3d' import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium' import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager' import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
import zhuangchetubiao from '../../assets/images/cutGraph/zhuangchedian1.png'
import xiechetubiao from '../../assets/images/cutGraph/xiechedian1.png'
import kongzhidiantubiao from '../../assets/images/cutGraph/kongzhidian1.png'
// 导入插件(其他插件类似,插件清单访问:http://mars3d.cn/dev/guide/start/install.html) // 导入插件(其他插件类似,插件清单访问:http://mars3d.cn/dev/guide/start/install.html)
...@@ -35,14 +38,14 @@ ...@@ -35,14 +38,14 @@
name: 'mars3dViewer', name: 'mars3dViewer',
created(){ created(){
this.getCoordinate(); // this.getCoordinate();
}, },
data(){ data(){
return{ return{
zuobianData:[], zuobianData:[],
toJavaCoordinates:[], toJavaCoordinates:[],
weilanName:[], controlPointId:0,
} }
}, },
...@@ -85,63 +88,84 @@ ...@@ -85,63 +88,84 @@
methods: { methods: {
//后台获取数据 //后台获取数据
getCoordinate() { getCoordinate(data) {
let that = this; this.zuobianData = data;
// HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => { if (this.appendToBody) {
// if(true){; document.body.appendChild(this.$el)
// //console.log(res); }
// let data1 = [];
// for(let key in res){ if (this.mapKey) {
// that.weilanName.push(key); this.initMars3d(this.options)
// let arrays = []; } else {
// res[key].forEach(function(item){ mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
// var arr = []; this.initMars3d(data.map3d)// 构建地图
// 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);
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(text,color){ uploaded(text,type,way){
let newData = [...this.toJavaCoordinates]; if(way == 'add'){
newData.pop(); if(JSON.stringify(this.toJavaCoordinates) == '[]'){
let allObj = {};
allObj.name = text;
allObj.zuobiao = newData;
allObj.color = color;
this.toJavaCoordinates = [];
//console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
this.$notify({ this.$notify({
title: '区域信息上传成功,即将重新加载', title: '未选择'+ type +'位置',
type: 'success', type: 'error',
duration: 2500 duration: 2500
})
}else{
let lastData = {};
lastData.name = text;
lastData.type = type;
lastData.lon = this.toJavaCoordinates[0][0];
lastData.lat = this.toJavaCoordinates[0][1];
HttpReq.truckDispatching.apiCpointAdd(lastData).then((res) => {
this.$notify({
title: '关键点信息上传中,请勿操作!',
type: 'success',
duration: 2000,
dangerouslyUseHTMLString: true,
});
this.$nextTick(()=>{
if(res.code == 200){
this.$notify({
title: '关键点信息上传成功,即将刷新页面!',
type: 'success',
duration: 2000,
dangerouslyUseHTMLString: true,
});
setTimeout(function (){
window.location.reload();
},2000);
}
})
})
}
}else if(way == 'edit'){
let lastData = {};
lastData.id = this.controlPointId;
lastData.name = text;
HttpReq.truckDispatching.apiCpointUpdate(lastData).then((res) => {
this.$notify({
title: '关键点信息上传中,请勿操作!',
type: 'success',
duration: 2000,
dangerouslyUseHTMLString: true,
}); });
setTimeout(function (){ this.$nextTick(()=>{
window.location.reload(); if(res.code == 200){
},2000); this.$notify({
}).catch(function(error) { }); title: '关键点信息上传成功,即将刷新页面!',
type: 'success',
duration: 2000,
dangerouslyUseHTMLString: true,
});
// setTimeout(function (){
// window.location.reload();
// },2000);
}
})
})
}
}, },
//创建地图 //创建地图
initMars3d(options) { initMars3d(options) {
...@@ -161,16 +185,33 @@ ...@@ -161,16 +185,33 @@
this[`map${this.mapKey}`] = map this[`map${this.mapKey}`] = map
//围栏回显 //围栏回显
// that.zuobianData.forEach(function(item,index){ that.zuobianData.forEach(function(item,index){
// var graphicLayer = new mars3d.layer.GraphicLayer(); var graphicLayer = new mars3d.layer.GraphicLayer();
// map.addLayer(graphicLayer); map.addLayer(graphicLayer);
// initLayerManager(graphicLayer,that.weilanName[index]); initLayerManager(graphicLayer);
// that.addGraphic_01(graphicLayer,item,that.weilanName[index]); that.bindLayerPopup(graphicLayer,item)
// }) that.addDemoGraphic1(graphicLayer,item);
})
// 抛出事件 // 抛出事件
this.$emit('onload', map) this.$emit('onload', map)
}, },
//关键点位置
addDemoGraphic1(graphicLayer,item) {
const graphic = new mars3d.graphic.BillboardEntity({
name: item.name,
position: [item.lon, item.lat, 1000],
style: {
image: item.type == '装车点' ? zhuangchetubiao : item.type == '卸车点' ? xiechetubiao : kongzhidiantubiao,
scale: 0.15,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
clampToGround: true,
label: { text: item.name, pixelOffsetY: -40, color: 'blue'},
},
})
graphicLayer.addGraphic(graphic)
},
//关键点设置 //关键点设置
btnStartDraw(){ btnStartDraw(){
this.toJavaCoordinates = []; this.toJavaCoordinates = [];
...@@ -202,6 +243,13 @@ ...@@ -202,6 +243,13 @@
}, },
}); });
}, },
bindLayerPopup(graphicLayer,item) {
let that = this;
graphicLayer.bindPopup(function (event) {
that.$parent.clickPointFn(item);
that.controlPointId = item.id;
})
},
} }
} }
......
<template> <template>
<div class="common-page device-manage"> <div class="common-page device-manage controlPointAllView">
<div class="panel-bottom page-row"> <div class="panel-bottom page-row">
<div class="ctin-box" style="height:81vh"> <div class="ctin-box" style="height:81vh">
<div class="content-within"> <div class="content-within">
...@@ -16,28 +16,54 @@ ...@@ -16,28 +16,54 @@
<el-input-number v-model="query.coefficient" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number> <el-input-number v-model="query.coefficient" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>
<el-button size="mini" type="success" @click="addKeyPoints()" :disabled="addKeyPointsAble">添加路径关键点</el-button> <el-button size="mini" type="success" @click="addKeyPoints()" :disabled="addKeyPointsAble">添加路径关键点</el-button>
<div style="width:62vw;height: 72vh;overflow: hidden;margin-top: 1vh;"> <div style="width:62vw;height: 72vh;overflow: hidden;margin-top: 1vh;">
<!-- <mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"/> --> <mars3dViewerMap :url="configUrl" @onload="onMapload" ref="mars3dViewerMapMethod"/>
</div> </div>
</div> </div>
</div> </div>
<div class="contentRight"> <div class="contentRight">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName" @tab-click="handleClick1">
<el-tab-pane label="装车点" name="first"> <el-tab-pane name="first">
<el-cascader v-model="entruckingValue1" :options="entruckingData" @change="handleChange1"></el-cascader> <span slot="label">
<img src="../../../assets/images/cutGraph/zhuangchedian1.png" height="25" style="vertical-align: -7px;">
<span>装车点</span>
</span>
<el-cascader v-model="entruckingValue1" :options="entruckingData" placeholder="请选择装车点名称"></el-cascader>
<div class="button-box"> <div class="button-box">
<el-button size="mini" type="primary">保存</el-button> <el-button size="mini" type="primary" @click="entruckingServeFn()">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button> <el-button size="mini" type="danger" icon="el-icon-delete" @click="entruckingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="控制点" name="second"> <el-tab-pane name="second">
<span slot="label">
<img src="../../../assets/images/cutGraph/kongzhidian1.png" height="25" style="vertical-align: -7px;">
<span>控制点</span>
</span>
<label class="el-form-item-label" style="font-weight: 500">控制点名称</label> <label class="el-form-item-label" style="font-weight: 500">控制点名称</label>
<el-input v-model="query.name" clearable size="small" placeholder="请输入控制点名称" style="width: 180px"/> <el-input v-model="controlPointValue3" clearable size="small" placeholder="请输入控制点名称" style="width: 180px"/>
<div style="margin:1vh 0px 1vh;">选择连接的控制点</div>
<div class="connectPointView">
<el-checkbox-group v-model="selectConnectPointArray" @change="checkboxFn">
<el-checkbox v-for="(item,index) in controlPointData" :label="item.name" :key="index" style="margin-bottom:10px;">
<div style="width:5vw;text-align: center;font-size: 15px;">
{{item.name}}
</div>
</el-checkbox>
</el-checkbox-group>
</div>
<div>
<el-button size="mini" type="primary" @click="controlPointServeFn()">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="controlPointDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="卸车点" name="third"> <el-tab-pane name="third">
<el-cascader v-model="detrainingValue2" :options="detrainingData" @change="handleChange2"></el-cascader> <span slot="label">
<img src="../../../assets/images/cutGraph/xiechedian1.png" height="25" style="vertical-align: -7px;">
<span>卸车点</span>
</span>
<el-cascader v-model="detrainingValue2" :options="detrainingData" placeholder="请选择卸车点名称"></el-cascader>
<div class="button-box"> <div class="button-box">
<el-button size="mini" type="primary">保存</el-button> <el-button size="mini" type="primary" @click="detrainingServeFn()">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button> <el-button size="mini" type="danger" icon="el-icon-delete" @click="detrainingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -75,11 +101,20 @@ export default { ...@@ -75,11 +101,20 @@ export default {
entruckingData:[], entruckingData:[],
//卸车点数据 //卸车点数据
detrainingData:[], detrainingData:[],
//控制点数据
controlPointData:[],
//选择关键点类型 //选择关键点类型
activeName: "", activeName: "",
//装卸车点名称 //装卸车点名称
entruckingValue1: [], entruckingValue1: [],
detrainingValue2: [], detrainingValue2: [],
controlPointValue3:'',
//保存时判断为添加还是修改
transmitWay:'add',
//暂存修改删除时的id
faControlPointId:0,
//选择连接点数据
selectConnectPointArray:[],
}; };
}, },
mounted(){ mounted(){
...@@ -141,6 +176,13 @@ export default { ...@@ -141,6 +176,13 @@ export default {
}) })
}; };
}) })
//获取各个点的数据
HttpReq.truckDispatching.apiCpointQuery({size:9999}).then((res) => {
if(res.code == 200){
this.controlPointData = res.data.content;
this.$refs.mars3dViewerMapMethod.getCoordinate(res.data.content);
}
})
}, },
//修改初始值 //修改初始值
inputInitialFn(){ inputInitialFn(){
...@@ -153,14 +195,115 @@ export default { ...@@ -153,14 +195,115 @@ export default {
}, },
//添加关键点 //添加关键点
addKeyPoints(){ addKeyPoints(){
this.transmitWay = 'add';
this.addKeyPointsAble = true; this.addKeyPointsAble = true;
this.$refs.mars3dViewerMapMethod.btnStartDraw(); this.$refs.mars3dViewerMapMethod.btnStartDraw();
}, },
handleChange1() { //保存装点
console.log(this.entruckingValue1); entruckingServeFn(){
if(this.entruckingValue1.length == 0){
this.$notify({
title: '未选择装车点名称!',
type: 'error',
duration: 2500
})
}else if(this.entruckingValue1.length == 1){
this.$refs.mars3dViewerMapMethod.uploaded(this.entruckingValue1[0],'装车点',this.transmitWay);
}else{
this.$refs.mars3dViewerMapMethod.uploaded(this.entruckingValue1[0] + '/' + this.entruckingValue1[1],'装车点',this.transmitWay);
}
}, },
handleChange2() { //删除装点
entruckingDelFn(){
HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((res) => {
this.$notify({
title: '删除成功,即将重新加载,请勿操作!',
type: 'success',
duration: 2500
});
setTimeout(function (){
window.location.reload();
},2000);
})
},
//保存卸点
detrainingServeFn(){
if(this.detrainingValue2.length == 0){
this.$notify({
title: '未选择卸车点名称!',
type: 'error',
duration: 2500
})
}else if(this.detrainingValue2.length == 1){
this.$refs.mars3dViewerMapMethod.uploaded(this.detrainingValue2[0],'卸车点',this.transmitWay);
}else{
this.$refs.mars3dViewerMapMethod.uploaded(this.detrainingValue2[0] + '/' + this.detrainingValue2[1],'卸车点',this.transmitWay);
}
},
//删除卸点
detrainingDelFn(){
HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((res) => {
this.$notify({
title: '删除成功,即将重新加载,请勿操作!',
type: 'success',
duration: 2500
});
setTimeout(function (){
window.location.reload();
},2000);
})
},
//保存控制点
controlPointServeFn(){
if(this.controlPointValue3 == ''){
this.$notify({
title: '未输入控制点名称!',
type: 'error',
duration: 2500
})
}else{
this.$refs.mars3dViewerMapMethod.uploaded(this.controlPointValue3,'控制点',this.transmitWay);
}
},
//删除控制点
controlPointDelFn(){
HttpReq.truckDispatching.apiCpointDel([this.faControlPointId]).then((res) => {
this.$notify({
title: '删除成功,即将重新加载,请勿操作!',
type: 'success',
duration: 2500
});
setTimeout(function (){
window.location.reload();
},2000);
})
},
//点击关键点获取对应数据
clickPointFn(item){
this.transmitWay = 'edit';
this.faControlPointId = item.id;
if(item.type == '装车点'){
this.activeName = 'first';
let text1 = item.name + '';
this.entruckingValue1 = text1.split('/');
}else if(item.type == '卸车点'){
this.activeName = 'third';
let text1 = item.name + '';
this.detrainingValue2 = text1.split('/');
}else{
this.activeName = 'second';
this.controlPointValue3 = item.name;
}
},
handleClick1(tab, event){
if(this.transmitWay == 'edit'){
this.entruckingValue1 = [];
this.detrainingValue2 = [];
this.controlPointValue3 = '';
}
},
checkboxFn(){
console.log(this.selectConnectPointArray);
}, },
// 地图构造完成回调 // 地图构造完成回调
onMapload(map) { onMapload(map) {
...@@ -210,7 +353,7 @@ export default { ...@@ -210,7 +353,7 @@ export default {
background: #f0f9eb; background: #f0f9eb;
} }
.device-manage { .controlPointAllView{
.panel-bottom { .panel-bottom {
.el-button { .el-button {
margin: 2px 0; margin: 2px 0;
...@@ -241,9 +384,6 @@ export default { ...@@ -241,9 +384,6 @@ export default {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
-webkit-flex-direction: row; -webkit-flex-direction: row;
}
.content-within {
} }
.content-right { .content-right {
width: 450px; width: 450px;
...@@ -257,14 +397,14 @@ export default { ...@@ -257,14 +397,14 @@ export default {
} }
} }
.contentRight{ .contentRight{
width: 300px; width: 320px;
position: absolute; position: absolute;
right: 3vw; right: 3vw;
.button-box { .button-box {
width: 300px; width: 300px;
height: 200px; height: 40vh;
position: relative; position: relative;
bottom: -160px; bottom: -30vh;
} }
} }
} }
...@@ -274,6 +414,16 @@ export default { ...@@ -274,6 +414,16 @@ export default {
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 10px;
} }
.connectPointView{
margin-bottom: 1vh;
border-radius: 5px;
border: 1px solid gainsboro;
height: 40vh;
width: 99%;
padding: 1vh 1vw;
box-sizing: border-box;
overflow-y: scroll;
}
.checkboxViews { .checkboxViews {
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
......
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