From 2b0c4c474899484b7adb62712ee6361817f02f48 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期五, 15 九月 2023 14:52:58 +0800
Subject: [PATCH] #地图编辑器
---
src/main/webapp/views/home/map_edit.html | 461 ---------------------------------------------------------
1 files changed, 1 insertions(+), 460 deletions(-)
diff --git a/src/main/webapp/views/home/map_edit.html b/src/main/webapp/views/home/map_edit.html
index d042949..f70fb19 100644
--- a/src/main/webapp/views/home/map_edit.html
+++ b/src/main/webapp/views/home/map_edit.html
@@ -1,460 +1 @@
-<!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 class="pointBox pointBoxStart"></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 @click="map[mapI][mapJ].value = 10" class="pointBox pointBoxStart"></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
- }
-
- if(j == 2 || j==5 || j==8 || j==11 || j==13 || j==16 || j== 18 || j== 21 || j== 24 || j== 27 || j== 29 || j== 32 ||
- j== 35 || j== 38 || j== 41 || j== 44 || j== 47 || j== 50){
- x.push({
- value: -1,
- data: '',
- top: 1000,
- bottom: 1000,
- left: 1000,
- right: 1000,
- x: i,
- y: j
- })
- continue
- }
- if(i==25 || i==58){
- x.push({
- value: -1,
- data: '',
- top: 1000,
- bottom: 1000,
- left: 1000,
- right: 1000,
- x: i,
- y: j
- })
- continue
- }
-
- if((j == 1 || j==3) && i <= 24){
- x.push({
- value: -1,
- data: '',
- top: 1000,
- bottom: 1000,
- left: 1000,
- right: 1000,
- x: i,
- y: j
- })
- continue
- }
-
- if(j == 4 && i <= 10){
- x.push({
- value: -1,
- data: '',
- top: 1000,
- bottom: 1000,
- left: 1000,
- right: 1000,
- x: i,
- y: j
- })
- continue
- }
-
- if((j==40 || j== 42) && i <= 37){
- x.push({
- value: -1,
- data: '',
- top: 1000,
- bottom: 1000,
- left: 1000,
- right: 1000,
- x: i,
- y: j
- })
- continue
- }
-
- if( j >= 43 && i <= 58){
- x.push({
- value: -1,
- 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>
\ No newline at end of file
+<!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.e02887d3.css rel=preload as=style><link href=js/app.273a0dab.js rel=preload as=script><link href=js/chunk-vendors.9ed0ec45.js rel=preload as=script><link href=css/app.e02887d3.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.273a0dab.js></script></body></html>
\ No newline at end of file
--
Gitblit v1.9.1