|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="mapdata">
|
|
<div class="mapdata">
|
|
|
- <div id="container" ref="container" style="width:1100px"></div>
|
|
|
|
|
|
|
+ <div id="container" ref="container" style="width:1200px"></div>
|
|
|
<div class="left">
|
|
<div class="left">
|
|
|
- <el-input v-model="value" type="textarea" :rows="30" ></el-input>
|
|
|
|
|
|
|
+ <el-input v-model="value" type="textarea" :rows="38" ></el-input>
|
|
|
<el-button @click="refresh" type="primary" style="width: 80px;align-self: flex-end">刷新</el-button>
|
|
<el-button @click="refresh" type="primary" style="width: 80px;align-self: flex-end">刷新</el-button>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@@ -26,14 +26,24 @@ export default {
|
|
|
texts: [], // 白色text合集
|
|
texts: [], // 白色text合集
|
|
|
redrects: [], // 红色rect合集
|
|
redrects: [], // 红色rect合集
|
|
|
redtexts: [], // 白色text合集
|
|
redtexts: [], // 白色text合集
|
|
|
- value:'哈哈哈'
|
|
|
|
|
|
|
+ value:''
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
-
|
|
|
|
|
|
|
+ watch:{
|
|
|
|
|
+ '$route.query.workareaId':{
|
|
|
|
|
+ handler(newValue){
|
|
|
|
|
+ if(newValue){
|
|
|
|
|
+ this.value=newValue
|
|
|
|
|
+ this.getWorkAreaInfo()
|
|
|
|
|
+ this.initKonva();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.initKonva();
|
|
this.initKonva();
|
|
|
this.getWorkAreaInfo()
|
|
this.getWorkAreaInfo()
|
|
|
- console.log(this.$route.query.workareaId,'workareaId');
|
|
|
|
|
|
|
+ console.log(this.$route.query.workareaId,'workareaId');
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
@@ -41,19 +51,26 @@ export default {
|
|
|
const workareaId=this.$route.query.workareaId;
|
|
const workareaId=this.$route.query.workareaId;
|
|
|
getWorkareaInfo(workareaId).then(response => {
|
|
getWorkareaInfo(workareaId).then(response => {
|
|
|
console.log(response,'工作区域预览接口调用');
|
|
console.log(response,'工作区域预览接口调用');
|
|
|
- this.value= response.data.map;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ if (response.data.map) {
|
|
|
|
|
+ try {
|
|
|
|
|
+ let map = JSON.parse(response.data.map)
|
|
|
|
|
+ this.value = JSON.stringify(map, null, 4)
|
|
|
|
|
+ } catch (err) {}
|
|
|
|
|
+ }
|
|
|
console.log(this.value,'Value')
|
|
console.log(this.value,'Value')
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
refresh(){
|
|
refresh(){
|
|
|
|
|
+
|
|
|
this.initKonva();
|
|
this.initKonva();
|
|
|
},
|
|
},
|
|
|
initKonva() {
|
|
initKonva() {
|
|
|
// 创建舞台
|
|
// 创建舞台
|
|
|
this.stage = new Konva.Stage({
|
|
this.stage = new Konva.Stage({
|
|
|
container: this.$refs.container, // 容器元素
|
|
container: this.$refs.container, // 容器元素
|
|
|
- width: 1100,
|
|
|
|
|
- height: 790,
|
|
|
|
|
|
|
+ width: 1200,
|
|
|
|
|
+ height: 830,
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// 创建图层
|
|
// 创建图层
|
|
@@ -92,7 +109,7 @@ export default {
|
|
|
|
|
|
|
|
// 绘制无限网格
|
|
// 绘制无限网格
|
|
|
drawGrid(cellWidth, cellHeight, gridColor) {
|
|
drawGrid(cellWidth, cellHeight, gridColor) {
|
|
|
- const width = 1100;
|
|
|
|
|
|
|
+ const width = 1200;
|
|
|
const height = 830;
|
|
const height = 830;
|
|
|
|
|
|
|
|
// 绘制竖线
|
|
// 绘制竖线
|
|
@@ -125,27 +142,27 @@ export default {
|
|
|
this.redrects = [];
|
|
this.redrects = [];
|
|
|
this.redtexts = [];
|
|
this.redtexts = [];
|
|
|
this.selectedText = [];
|
|
this.selectedText = [];
|
|
|
-
|
|
|
|
|
- const positions = [
|
|
|
|
|
- { row: 2, col: 9, pointName: "E-1" },
|
|
|
|
|
- { row: 2, col: 11, pointName: "E-2" },
|
|
|
|
|
- { row: 2, col: 13, pointName: "E-3" },
|
|
|
|
|
- { row: 4, col: 9, pointName: "E-4" },
|
|
|
|
|
- { row: 4, col: 11, pointName: "E-5" },
|
|
|
|
|
- { row: 4, col: 13, pointName: "E-6" },
|
|
|
|
|
- { row: 6, col: 9, pointName: "E-7" },
|
|
|
|
|
- { row: 6, col: 11, pointName: "E-8" },
|
|
|
|
|
- { row: 6, col: 13, pointName: "E-9" },
|
|
|
|
|
- { row: 8, col: 9, pointName: "E-10" },
|
|
|
|
|
- { row: 8, col: 11, pointName: "E-11" },
|
|
|
|
|
- { row: 8, col: 13, pointName: "E-12" },
|
|
|
|
|
- { row: 10, col: 9, pointName: "E-13" },
|
|
|
|
|
- { row: 10, col: 11, pointName: "E-14" },
|
|
|
|
|
- { row: 10, col: 13, pointName: "E-15" },
|
|
|
|
|
- { row: 12, col: 9, pointName: "E-16" },
|
|
|
|
|
- { row: 12, col: 11, pointName: "E-17" },
|
|
|
|
|
- { row: 12, col: 13, pointName: "E-18" },
|
|
|
|
|
- ];
|
|
|
|
|
|
|
+ const positions=JSON.parse(this.value)
|
|
|
|
|
+ // const positions = [
|
|
|
|
|
+ // { row: 2, col: 9, pointName: "E-1" },
|
|
|
|
|
+ // { row: 2, col: 11, pointName: "E-2" },
|
|
|
|
|
+ // { row: 2, col: 13, pointName: "E-3" },
|
|
|
|
|
+ // { row: 4, col: 9, pointName: "E-4" },
|
|
|
|
|
+ // { row: 4, col: 11, pointName: "E-5" },
|
|
|
|
|
+ // { row: 4, col: 13, pointName: "E-6" },
|
|
|
|
|
+ // { row: 6, col: 9, pointName: "E-7" },
|
|
|
|
|
+ // { row: 6, col: 11, pointName: "E-8" },
|
|
|
|
|
+ // { row: 6, col: 13, pointName: "E-9" },
|
|
|
|
|
+ // { row: 8, col: 9, pointName: "E-10" },
|
|
|
|
|
+ // { row: 8, col: 11, pointName: "E-11" },
|
|
|
|
|
+ // { row: 8, col: 13, pointName: "E-12" },
|
|
|
|
|
+ // { row: 10, col: 9, pointName: "E-13" },
|
|
|
|
|
+ // { row: 10, col: 11, pointName: "E-14" },
|
|
|
|
|
+ // { row: 10, col: 13, pointName: "E-15" },
|
|
|
|
|
+ // { row: 12, col: 9, pointName: "E-16" },
|
|
|
|
|
+ // { row: 12, col: 11, pointName: "E-17" },
|
|
|
|
|
+ // { row: 12, col: 13, pointName: "E-18" },
|
|
|
|
|
+ // ];
|
|
|
|
|
|
|
|
positions.forEach((pos, index) => {
|
|
positions.forEach((pos, index) => {
|
|
|
const x = pos.col * 50; // 每个单元格宽度为50
|
|
const x = pos.col * 50; // 每个单元格宽度为50
|