<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>库位地图编辑</title>
|
<script type="text/javascript" src="../../static/js/vue.min.js"></script>
|
<style>
|
.pointContainer {
|
display: flex;
|
justify-content: center;
|
margin-top: 1px;
|
}
|
|
.pointBox {
|
background: #bababa;
|
width: 30px;
|
height: 30px;
|
margin-right: 1px;
|
}
|
|
.pointBoxGreen {
|
background: #00ff7f !important;
|
}
|
|
.pointBoxBlue {
|
background: #55aaff !important;
|
}
|
|
.pointBoxRed {
|
background: #ff0000 !important;
|
}
|
|
.pointBoxStart {
|
background: #ffaa00 !important;
|
}
|
|
.pointBoxEnd {
|
background: #ff55ff !important;
|
}
|
|
.pointBoxStation {
|
background: #ffff00 !important;
|
}
|
|
.chargeStation {
|
background: #ffaa7f !important;
|
}
|
</style>
|
</head>
|
<body>
|
<div id="app" style="display: flex;justify-content: flex-start;" @click="bgClick()">
|
<div style="margin-right: 100px;">
|
<div>Col:<input type="text" v-model="col" /></div>
|
<div>Row:<input type="text" v-model="row" /></div>
|
<div>
|
<button @click="generate">生成数据</button>
|
<button @click="printData">显示数据</button>
|
</div>
|
<div>
|
<div>
|
禁止区域：
|
<div class="pointBox"></div>
|
</div>
|
<div>
|
库位：
|
<div class="pointBox pointBoxBlue"></div>
|
</div>
|
<div>
|
堆垛机：
|
<div class="pointBox pointBoxGreen"></div>
|
</div>
|
<div>
|
轨迹：
|
<div class="pointBox pointBoxRed"></div>
|
</div>
|
<div>
|
站点：
|
<div class="pointBox pointBoxStation"></div>
|
</div>
|
<div>
|
充电桩：
|
<div class="pointBox chargeStation"></div>
|
</div>
|
</div>
|
<div>
|
<div>起点：<input type="text" v-model="startPosition"></div>
|
<div>终点：<input type="text" v-model="endPosition"></div>
|
<div><button @click="calcPath">计算路径</button></div>
|
</div>
|
<div>
|
<textarea v-model="importData"></textarea>
|
<button @click="importDataClick">导入数据</button>
|
</div>
|
</div>
|
|
<div>
|
<div class="pointContainer" v-for="(x,index) in map" :key="index">
|
<div v-for="(y,ind) in x" :key="ind">
|
<div v-if="map[index][ind].value < 0" class="pointBox"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click.left="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 0" class="pointBox pointBoxBlue"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 3" class="pointBox pointBoxGreen"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 4" class="pointBox pointBoxStation"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 5" class="pointBox chargeStation"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 9" class="pointBox pointBoxRed"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 10" class="pointBox pointBoxStart"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
<div v-else-if="map[index][ind].value == 11" class="pointBox pointBoxEnd"
|
@contextmenu.prevent="rightEvent(index,ind,$event)" @click="switchBox(index,ind)"></div>
|
</div>
|
</div>
|
</div>
|
|
<div>
|
{{ mapData }}
|
</div>
|
|
<div v-if="rightBox" @click.stop="" :style="{left: rightBoxLeft,top: rightBoxTop}"
|
style="position: absolute;height: 270px;width: 200px;background-color: antiquewhite;padding: 10px;">
|
<div>
|
value:
|
<div style="display: flex;justify-content: space-between;">
|
<div @click="map[mapI][mapJ].value = -1" class="pointBox"></div>
|
<div @click="map[mapI][mapJ].value = 0" class="pointBox pointBoxBlue"></div>
|
<div @click="map[mapI][mapJ].value = 3" class="pointBox pointBoxGreen"></div>
|
<div @click="map[mapI][mapJ].value = 4" class="pointBox pointBoxStation"></div>
|
<div @click="map[mapI][mapJ].value = 5" class="pointBox chargeStation"></div>
|
</div>
|
</div>
|
<div>
|
data: <input type="text" v-model="map[mapI][mapJ].data">
|
</div>
|
<div>
|
top: <input type="text" v-model="map[mapI][mapJ].top">
|
</div>
|
<div>
|
bottom: <input type="text" v-model="map[mapI][mapJ].bottom">
|
</div>
|
<div>
|
left: <input type="text" v-model="map[mapI][mapJ].left">
|
</div>
|
<div>
|
right: <input type="text" v-model="map[mapI][mapJ].right">
|
</div>
|
</div>
|
</div>
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
map: [],
|
col: 25,
|
row: 15,
|
mapData: "",
|
importData: null,
|
startPosition: "0500501",
|
endPosition: "0802501",
|
mapI: 0,
|
mapJ: 0,
|
rightBox: false,
|
rightBoxTop: "0px",
|
rightBoxLeft: "0px"
|
},
|
watch: {
|
map: {
|
deep: true,
|
handler(val) {
|
this.printData()
|
}
|
}
|
},
|
methods: {
|
generate() {
|
let tmp = []
|
//实际区域增加两行两列禁区
|
let rowR = Number(this.row) + Number(2)
|
let colR = Number(this.col) + Number(2)
|
console.log(rowR, colR)
|
for (var i = 0; i < rowR; i++) {
|
let x = []
|
for (var j = 0; j < colR; j++) {
|
if (i == 0 || i == rowR - 1) {
|
// x.push(-1)
|
x.push({
|
value: -1,
|
data: '',
|
top: 1000,
|
bottom: 1000,
|
left: 1000,
|
right: 1000,
|
x: i,
|
y: j
|
})
|
continue
|
}
|
|
if (j == 0) {
|
// x.push(-1)
|
x.push({
|
value: -1,
|
data: '',
|
top: 1000,
|
bottom: 1000,
|
left: 1000,
|
right: 1000,
|
x: i,
|
y: j
|
})
|
continue
|
}
|
|
if (j == colR - 1) {
|
let calc = (this.row - i + 1) * -1
|
// x.push(calc == 0 ? -1 : calc)
|
x.push({
|
value: calc == 0 ? -1 : calc,
|
data: '',
|
top: 1000,
|
bottom: 1000,
|
left: 1000,
|
right: 1000,
|
x: i,
|
y: j
|
})
|
continue
|
}
|
// x.push(0)
|
x.push({
|
value: 0,
|
data: '',
|
top: 1000,
|
bottom: 1000,
|
left: 1000,
|
right: 1000,
|
x: i,
|
y: j
|
})
|
}
|
tmp.push(x)
|
}
|
|
this.map = tmp
|
this.printData()
|
},
|
switchBox(x, y) {
|
let tmp = this.map
|
console.log(x, y, tmp[x][y])
|
switch (tmp[x][y].value) {
|
case -1:
|
tmp[x][y].value = 0
|
break;
|
case 0:
|
tmp[x][y].value = 3
|
break;
|
case 3:
|
tmp[x][y].value = 4
|
break;
|
case 4:
|
tmp[x][y].value = 5
|
break;
|
case 5:
|
tmp[x][y].value = -1
|
break;
|
default:
|
tmp[x][y].value = -1
|
}
|
this.map = tmp
|
this.$forceUpdate()
|
this.printData()
|
this.rightBox = false
|
},
|
printData() {
|
// let tmp = this.map
|
// let data = []
|
// tmp.forEach((item,index) => {
|
// let data2 = []
|
// item.forEach((val,idx) => {
|
// let valJson = {
|
// value: val,
|
// data: '',
|
// top: '',
|
// bottom: '',
|
// left: '',
|
// right: ''
|
// }
|
// data2.push(valJson)
|
// })
|
// data.push(data2)
|
// })
|
|
// this.mapData = JSON.stringify(data)
|
this.mapData = JSON.stringify(this.map)
|
},
|
importDataClick() {
|
let tmp = JSON.parse(this.importData);
|
let data = []
|
tmp.forEach((item, index) => {
|
let data2 = []
|
item.forEach((val, idx) => {
|
let json = {
|
value: val.value,
|
data: val.data,
|
top: val.top == null ? 1000: val.top,
|
bottom: val.bottom == null ? 1000:val.bottom,
|
left: val.left == null ? 1000:val.left,
|
right: val.right == null ? 1000:val.right
|
}
|
data2.push(json)
|
})
|
data.push(data2)
|
})
|
this.map = data
|
this.printData()
|
},
|
calcPath() {
|
let that = this
|
let param = new URLSearchParams()
|
param.append('startPosition', this.startPosition)
|
param.append('endPosition', this.endPosition)
|
param.append('map', JSON.stringify(this.map))
|
this.$axios({
|
method: "post",
|
url: "http://127.0.0.1:8081/calc",
|
data: param
|
}).then((res) => {
|
let data = res.data
|
let tmp = that.map
|
console.log(data)
|
data.forEach((item, index) => {
|
let x = item.x
|
let y = item.y
|
tmp[x][y] = 9
|
|
if (index == 0) {
|
tmp[x][y] = 10
|
}
|
|
if (index == data.length - 1) {
|
tmp[x][y] = 11
|
}
|
that.map = tmp
|
})
|
this.$forceUpdate()
|
this.printData()
|
}).catch((error) => {
|
console.log(error)
|
})
|
},
|
rightEvent(x, y, e) {
|
this.rightBox = true
|
this.mapI = x
|
this.mapJ = y
|
this.rightBoxTop = e.y + "px"
|
this.rightBoxLeft = e.x + "px"
|
},
|
bgClick() {
|
this.rightBox = false
|
}
|
}
|
})
|
</script>
|
</body>
|
</html>
|
