| | |
|---|
| | | <!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> |
|---|
| | | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>default</title><link href=css/app.7cc7872b.css rel=preload as=style><link href=js/app.e3dc6995.js rel=preload as=script><link href=js/chunk-vendors.9ed0ec45.js rel=preload as=script><link href=css/app.7cc7872b.css rel=stylesheet></head><body><noscript><strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js/chunk-vendors.9ed0ec45.js></script><script src=js/app.e3dc6995.js></script></body></html> |
|---|
