Skip to content

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

添加关键点页面功能

parent 9cbd7d7c
Show whitespace changes
Inline Side-by-side
Showing with 599 additions and 89 deletions
src/assets/js/common.js
View file @ 3cc946a1
......@@ -2326,6 +2326,37 @@ var HttpReq = function(){
return res
})
},
//设置控制点——设置初始值
apiRatioQuery: function(param){
return request({
url: '/api/Ratio',
method: 'get',
params:param,
})
},
apiRatioAdd: function(data){
return request({
url: '/api/Ratio',
method: 'POST',
data:data,
}).then((res) => {
return res
})
},
apiRatioUpdate: function(data){
return request({
url: '/api/Ratio',
method: 'PUT',
data:data,
})
},
apiRatioDel: function(data){
return request({
url: '/api/Ratio',
method: 'Delete',
data:data,
})
},
......
src/components/mars3d/Map4.vue 0 → 100644
View file @ 3cc946a1
<template>
<div style="wight:100%;height:100%;position: relative;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview">
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
// 使用免费开源版本
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
var map;
export default {
name: 'mars3dViewer',
created(){
this.getCoordinate();
},
data(){
return{
zuobianData:[],
toJavaCoordinates:[],
weilanName:[],
}
},
props: {
// 初始化配置参数
url: String,
// 地图唯一性标识
mapKey: {
type: String,
default: ''
},
// 自定义参数
options: Object,
// 是否分屏显示
compare: {
type: Boolean,
default: false
},
// 是否插入到body元素上
appendToBody: {
type: Boolean,
default: false
},
// 自定义css类名
customClass: {
type: String,
default: ''
}
},
destroy() {
this[`map${this.mapKey}`].destroy()
delete this[`map${this.mapKey}`]
},
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)// 构建地图
})
}
// }
// })
},
//上传关键点数据
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) => {
this.$notify({
title: '区域信息上传成功，即将重新加载！',
type: 'success',
duration: 2500
});
setTimeout(function (){
window.location.reload();
},2000);
}).catch(function(error) { });
},
//创建地图
initMars3d(options) {
let that = this;
if (this[`map${this.mapKey}`]) return
const mapOptions = {
...options,
...this.options,
control: {
defaultContextMenu: false, //右键菜单
},
}
// 创建三维地球场景
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]);
// })
// 抛出事件
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: "point",
style: {
color: "red",
outline: true,
outlineColor: "red",
outlineWidth: 10,
label: {
text: '新增关键点',
font_size: 18,
color: "blue",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
},
},
});
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.cesium-viewer-toolbar{
display: none !important;
}
.mars3d-compass{
display: none !important;
}
.mars3d-locationbar{
display: none !important;
}
.mars3d-distance-legend{
display: none !important;
}
.mars3d-container {
height: 100%;
width: 100vw;
overflow: hidden;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
background: rgba(63, 72, 84, 0.9);
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar {
top: auto;
left: auto;
right: 12px;
bottom: 35px;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: right;
clear: both;
text-align: center;
}
.cesium-baseLayerPicker-dropDown {
bottom: 0;
right: 40px;
max-height: 700px;
margin-bottom: 5px;
}
.cesium-navigation-help {
top: auto;
bottom: 0;
right: 40px;
transform-origin: right bottom;
}
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left;
margin: 0 3px;
}
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
position: absolute;
z-index: 999;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8);
border: 1px solid #2b2c2f;
z-index: 999;
position: absolute;
right: 60px;
bottom: 40px;
display: none;
}
.toolbar-dropdown-menu {
min-width: 110px;
padding: 0;
}
.toolbar-dropdown-menu > li {
padding: 0 3px;
margin: 2px 0;
}
.toolbar-dropdown-menu > li > a {
color: #edffff;
display: block;
padding: 4px 10px;
clear: both;
font-weight: normal;
line-height: 1.6;
white-space: nowrap;
text-decoration: none;
}
.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu i {
padding-right: 5px;
}
.infoview{
position: absolute;
top: 10px;
left: 10px;
width: 50vw;
z-index: 1000;
}
</style>
\ No newline at end of file
src/views/regionalManagement/regionalPathMap/index.vue
View file @ 3cc946a1
<template>
<div class="common-page device-manage">
<div class="panel-bottom page-row">
<h3>{{ pageTitle }}</h3>
<div class="ctin-box">
<div class="ctin-box" style="height:81vh">
<div class="content-within">
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500"
>装车平均时长</label
>
<el-input
v-model="query.loading"
clearable
size="small"
placeholder="请输入车牌号"
style="width: 180px"
/>
<label class="el-form-item-label" style="font-weight: 500"
>卸车平均时长</label
>
<el-input
v-model="query.unload"
clearable
size="small"
placeholder="请输入车牌号"
style="width: 180px"
/>
<label class="el-form-item-label" style="font-weight: 500"
>路径系数</label
>
<el-input
v-model="query.coefficient"
clearable
size="small"
placeholder="请输入车牌号"
style="width: 180px"
/>
<el-button size="mini" type="success">添加路径关键点</el-button>
<span>设置初始值：</span>
<label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>装车平均时长(分钟)</label>
<el-input-number v-model="query.loading" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>
<label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>卸车平均时长(分钟)</label>
<el-input-number v-model="query.unload" :precision="2" :step="0.1" :min="0" :max="9999" @change="inputInitialFn()"></el-input-number>
<label class="el-form-item-label" style="font-weight: 500"><span style="color:red">* </span>路径系数</label>
<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"/> -->
</div>
</div>
</div>
<div class="content-right">
<div class="contentRight">
<el-tabs v-model="activeName">
<el-tab-pane label="装车点" name="first">
<el-cascader
v-model="value1"
:options="options1"
@change="handleChange1"
></el-cascader>
<el-cascader v-model="entruckingValue1" :options="entruckingData" @change="handleChange1"></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="danger" icon="el-icon-delete">删除</el-button>
</div>
</el-tab-pane>
<el-tab-pane label="控制点" name="second">
<label class="el-form-item-label" style="font-weight: 500"
>控制点名称</label
>
<el-input
v-model="query.name"
clearable
size="small"
placeholder="请输入控制点名称"
style="width: 180px"
/>
<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-tab-pane>
<el-tab-pane label="卸车点" name="third">
<el-cascader
v-model="value2"
:options="options2"
@change="handleChange2"
></el-cascader>
<el-cascader v-model="detrainingValue2" :options="detrainingData" @change="handleChange2"></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="danger" icon="el-icon-delete">删除</el-button>
</div>
</el-tab-pane>
</el-tabs>
......@@ -87,40 +48,156 @@
</template>
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from '../../../components/mars3d/Map4.vue' //地图
export default {
name: "RegionalPathMap",
components: {
mars3dViewerMap,
},
data() {
const basePathUrl = window.basePathUrl || ''
return {
pageTitle: "设置路径图",
query: {},
activeName: "first",
options1: [
{
value: "caiqu1",
label: "采区1",
children: [
{ value: "1", label: "采点1" },
{ value: "2", label: "采点2" },
],
//地图数据
configUrl: basePathUrl + 'config/config.json',
//初始值数据
query: {
id:1,
loading:0,
unload:0,
coefficient:0,
},
],
value1: "",
options2: [
{
value: "xiequ1",
label: "卸区1",
children: [
{ value: "1", label: "卸点1" },
{ value: "2", label: "卸点2" },
],
},
],
value2: "",
//添加路径关键点按钮可否使用
addKeyPointsAble:false,
//装车点数据
entruckingData:[],
//卸车点数据
detrainingData:[],
//选择关键点类型
activeName: "",
//装卸车点名称
entruckingValue1: [],
detrainingValue2: [],
};
},
mounted(){
this.loadData();
},
methods: {
handleChange1() {},
handleChange2() {},
//获取数据
loadData(){
//获取初始值
HttpReq.truckDispatching.apiRatioQuery().then((res) => {
if(res.code == 200){
this.query.id = res.data.content[0].id;
this.query.loading = res.data.content[0].loadAvgTime;
this.query.unload = res.data.content[0].unloadAvgTime;
this.query.coefficient = res.data.content[0].pathRatio;
}
})
//获取装卸点数据
HttpReq.truckDispatching.RegionalInformationQuery({size:9999}).then((res) => {
if(res.code == 200){
let caiqu1 = [];
let xiequ1 = [];
res.data.content.forEach((item,index)=>{
if(item.areaclass == '采区'){
caiqu1.push(item);
}else if(item.areaclass == '卸区'){
xiequ1.push(item);
}
});
this.$nextTick(()=>{
let caiquCenArr1 = [];
caiqu1.forEach((item1,index1)=>{
let caiquCenObj1 = {};
caiquCenObj1.value = item1.name;
caiquCenObj1.label = item1.name;
HttpReq.truckDispatching.RegionalCaiDianQuery({size:9999,areaName:item1.name}).then((res1) => {
if(res1.code == 200 && res1.data.totalElements != 0){
let caiquCenArr2 = [];
res1.data.content.forEach((item2,index2)=>{
let caiquCenObj2 = {};
caiquCenObj2.value = item2.name;
caiquCenObj2.label = item2.name;
caiquCenArr2.push(caiquCenObj2);
})
caiquCenObj1.children = caiquCenArr2;
};
caiquCenArr1.push(caiquCenObj1);
})
});
let xiequCenArr1 = [];
xiequ1.forEach((item1,index1)=>{
let xiequCenObj1 = {};
xiequCenObj1.value = item1.name;
xiequCenObj1.label = item1.name;
xiequCenArr1.push(xiequCenObj1);
});
this.entruckingData = caiquCenArr1;
this.detrainingData = xiequCenArr1;
})
};
})
},
//修改初始值
inputInitialFn(){
let lastData = {};
lastData.id = this.query.id;
lastData.loadAvgTime = this.query.loading;
lastData.unloadAvgTime = this.query.unload;
lastData.pathRatio = this.query.coefficient;
HttpReq.truckDispatching.apiRatioUpdate(lastData).then((res) => {})
},
//添加关键点
addKeyPoints(){
this.addKeyPointsAble = true;
this.$refs.mars3dViewerMapMethod.btnStartDraw();
},
handleChange1() {
console.log(this.entruckingValue1);
},
handleChange2() {
},
// 地图构造完成回调
onMapload(map) {
// 以下为演示代码
// 创建entity图层
const graphicLayer = new this.mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
// 2.在layer上绑定监听事件
graphicLayer.on(this.mars3d.EventType.click, function (event) {
console.log('监听layer，单击了矢量对象', event)
})
graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
console.log('监听layer，鼠标移入了矢量对象', event)
})
graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
console.log('监听layer，鼠标移出了矢量对象', event)
})
// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
graphicLayer.bindPopup('我是layer上绑定的Popup', {
anchor: [0, -10]
})
// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
graphicLayer.bindContextMenu([
{
text: '删除对象',
iconCls: 'fa fa-trash-o',
callback: function (e) {
const graphic = e.graphic
if (graphic) {
graphicLayer.removeGraphic(graphic)
}
}
}
])
},
},
};
</script>
......@@ -166,8 +243,7 @@ export default {
-webkit-flex-direction: row;
}
.content-within {
flex: 1;
//background: blue;
}
.content-right {
width: 450px;
......@@ -180,6 +256,17 @@ export default {
//background: yellow;
}
}
.contentRight{
width: 300px;
position: absolute;
right: 3vw;
.button-box {
width: 300px;
height: 200px;
position: relative;
bottom: -160px;
}
}
}
.mapcontainer3 {
height: 50vh;
......
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