Skip to content

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

修改关键点设置

parent 3cc946a1
Hide whitespace changes
Inline Side-by-side
Showing with 344 additions and 84 deletions
src/assets/js/common.js
View file @ 88edbf14
......@@ -2357,6 +2357,68 @@ var HttpReq = function(){
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,
})
},
......
src/components/mars3d/Map4.vue
View file @ 88edbf14
......@@ -20,6 +20,9 @@
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
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)
......@@ -35,14 +38,14 @@
name: 'mars3dViewer',
created(){
this.getCoordinate();
// this.getCoordinate();
},
data(){
return{
zuobianData:[],
toJavaCoordinates:[],
weilanName:[],
controlPointId:0,
}
},
......@@ -85,63 +88,84 @@
methods: {
//后台获取数据
getCoordinate() {
let that = this;
// 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);
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)// 构建地图
})
}
// }
// })
getCoordinate(data) {
this.zuobianData = data;
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){
let newData = [...this.toJavaCoordinates];
newData.pop();
let allObj = {};
allObj.name = text;
allObj.zuobiao = newData;
allObj.color = color;
this.toJavaCoordinates = [];
//console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
uploaded(text,type,way){
if(way == 'add'){
if(JSON.stringify(this.toJavaCoordinates) == '[]'){
this.$notify({
title: '区域信息上传成功，即将重新加载！',
type: 'success',
title: '未选择'+ type +'位置！',
type: 'error',
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 (){
window.location.reload();
},2000);
}).catch(function(error) { });
this.$nextTick(()=>{
if(res.code == 200){
this.$notify({
title: '关键点信息上传成功，即将刷新页面！',
type: 'success',
duration: 2000,
dangerouslyUseHTMLString: true,
});
// setTimeout(function (){
// window.location.reload();
// },2000);
}
})
})
}
},
//创建地图
initMars3d(options) {
......@@ -161,16 +185,33 @@
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]);
// })
that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer);
that.bindLayerPopup(graphicLayer,item)
that.addDemoGraphic1(graphicLayer,item);
})
// 抛出事件
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(){
this.toJavaCoordinates = [];
......@@ -202,6 +243,13 @@
},
});
},
bindLayerPopup(graphicLayer,item) {
let that = this;
graphicLayer.bindPopup(function (event) {
that.$parent.clickPointFn(item);
that.controlPointId = item.id;
})
},
}
}
......
src/views/regionalManagement/regionalPathMap/index.vue
View file @ 88edbf14
<template>
<div class="common-page device-manage">
<div class="common-page device-manage controlPointAllView">
<div class="panel-bottom page-row">
<div class="ctin-box" style="height:81vh">
<div class="content-within">
......@@ -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-button size="mini" type="success" @click="addKeyPoints()" :disabled="addKeyPointsAble">添加路径关键点</el-button>
<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 class="contentRight">
<el-tabs v-model="activeName">
<el-tab-pane label="装车点" name="first">
<el-cascader v-model="entruckingValue1" :options="entruckingData" @change="handleChange1"></el-cascader>
<el-tabs v-model="activeName" @tab-click="handleClick1">
<el-tab-pane name="first">
<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">
<el-button size="mini" type="primary">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="primary" @click="entruckingServeFn()">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="entruckingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
</div>
</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>
<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 label="卸车点" name="third">
<el-cascader v-model="detrainingValue2" :options="detrainingData" @change="handleChange2"></el-cascader>
<el-tab-pane name="third">
<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">
<el-button size="mini" type="primary">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
<el-button size="mini" type="primary" @click="detrainingServeFn()">保存</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="detrainingDelFn()" :disabled="transmitWay == 'add'">删除</el-button>
</div>
</el-tab-pane>
</el-tabs>
......@@ -75,11 +101,20 @@ export default {
entruckingData:[],
//卸车点数据
detrainingData:[],
//控制点数据
controlPointData:[],
//选择关键点类型
activeName: "",
//装卸车点名称
entruckingValue1: [],
detrainingValue2: [],
controlPointValue3:'',
//保存时判断为添加还是修改
transmitWay:'add',
//暂存修改删除时的id
faControlPointId:0,
//选择连接点数据
selectConnectPointArray:[],
};
},
mounted(){
......@@ -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(){
......@@ -153,14 +195,115 @@ export default {
},
//添加关键点
addKeyPoints(){
this.transmitWay = 'add';
this.addKeyPointsAble = true;
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) {
......@@ -210,7 +353,7 @@ export default {
background: #f0f9eb;
}
.device-manage {
.controlPointAllView{
.panel-bottom {
.el-button {
margin: 2px 0;
......@@ -241,9 +384,6 @@ export default {
display: flex;
display: -webkit-flex;
-webkit-flex-direction: row;
}
.content-within {
}
.content-right {
width: 450px;
......@@ -257,14 +397,14 @@ export default {
}
}
.contentRight{
width: 300px;
width: 320px;
position: absolute;
right: 3vw;
.button-box {
width: 300px;
height: 200px;
height: 40vh;
position: relative;
bottom: -160px;
bottom: -30vh;
}
}
}
......@@ -274,6 +414,16 @@ export default {
overflow: hidden;
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 {
padding-left: 10px;
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