预览地图路由修复

src/router/index.js

@@ -167,7 +167,7 @@ export const dynamicRoutes = [
         path: 'MapData',
         component: () => import('@/views/mes/md/workarea/MapData'),
         name: 'MapData',
-        meta: { title: '预览', activeMenu: '/mes/md/workares' },
+        meta: { title: '预览', activeMenu: '/mes/md/workarea/MapData' },
       },
     ]
   },

src/views/mes/md/workarea/MapData.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="mapdata">
-    <div id="container" ref="container" style="width:1100px"></div>
+    <div id="container" ref="container" style="width:1200px"></div>
     <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>
 
     </div>
@@ -26,14 +26,24 @@ export default {
       texts: [], // 白色text合集
       redrects: [], // 红色rect合集
       redtexts: [], // 白色text合集
-      value:'哈哈哈'
+      value:''
     };
   },
-
+  watch:{
+    '$route.query.workareaId':{
+      handler(newValue){
+        if(newValue){
+          this.value=newValue
+          this.getWorkAreaInfo()
+          this.initKonva();
+        }
+      }
+    }
+  },
   mounted() {
     this.initKonva();
     this.getWorkAreaInfo()
-   console.log(this.$route.query.workareaId,'workareaId');
+    console.log(this.$route.query.workareaId,'workareaId');
   },
 
   methods: {
@@ -41,19 +51,26 @@ export default {
       const workareaId=this.$route.query.workareaId;
       getWorkareaInfo(workareaId).then(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')
       })
     },
     refresh(){
+
       this.initKonva();
     },
     initKonva() {
       // 创建舞台
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
-        width: 1100,
-        height: 790,
+        width: 1200,
+        height: 830,
       });
 
       // 创建图层
@@ -92,7 +109,7 @@ export default {
 
     // 绘制无限网格
     drawGrid(cellWidth, cellHeight, gridColor) {
-      const width = 1100;
+      const width = 1200;
       const height = 830;
 
       // 绘制竖线
@@ -125,27 +142,27 @@ export default {
       this.redrects = [];
       this.redtexts = [];
       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) => {
         const x = pos.col * 50; // 每个单元格宽度为50

src/views/mes/md/workarea/index.vue

@@ -38,10 +38,10 @@
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-          >搜索</el-button
+        >搜索</el-button
         >
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
-          >重置</el-button
+        >重置</el-button
         >
       </el-form-item>
     </el-form>
@@ -55,7 +55,7 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['mes:wa:waa:add']"
-          >新增
+        >新增
         </el-button>
       </el-col>
       <!--            <el-col :span="1.5">-->
@@ -78,7 +78,7 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['mes:wa:waa:batchremove']"
-          >批量删除
+        >批量删除
         </el-button>
       </el-col>
       <!--      <el-col :span="1.5">-->
@@ -109,7 +109,7 @@
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:wa:waa:query']"
-            >{{ scope.row.workareaId }}
+          >{{ scope.row.workareaId }}
           </el-button>
         </template>
       </el-table-column>
@@ -119,7 +119,7 @@
             type="text"
             @click="handleView(scope.row)"
             v-hasPermi="['mes:wa:waa:query']"
-            >{{ scope.row.workareaCode }}
+          >{{ scope.row.workareaCode }}
           </el-button>
         </template>
       </el-table-column>
@@ -146,7 +146,7 @@
         </template> -->
         <template slot-scope="scope">
           <el-button size="mini" type="text" @click="look(scope.row)"
-            >预览
+          >预览
           </el-button>
         </template>
       </el-table-column>
@@ -165,7 +165,7 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['mes:wa:waa:edit']"
-            >编辑
+          >编辑
           </el-button>
           <el-button
             size="mini"
@@ -173,7 +173,7 @@
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['mes:wa:waa:remove']"
-            >删除
+          >删除
           </el-button>
         </template>
       </el-table-column>
@@ -198,12 +198,12 @@ import {
   delWorkarea,
   listAllWorkshop,
 } from "@/api/mes/wa/workarea";
-import MapData from "./MapData.vue";
+
 import { genCode } from "@/api/system/autocode/rule";
 import { mapState } from "vuex";
 
 export default {
-  name: "Workarea",
+  name: "index",
   dicts: ["mes_calendar_type"],
 
   data() {
@@ -332,7 +332,6 @@ export default {
       this.open = true;
       this.title = "添加工作区域";
       this.optType = "add";
-
       this.EditId = null;
     },
     // 查询明细按钮操作
@@ -355,7 +354,6 @@ export default {
         console.log(response, "获取单条工作区域数据");
         this.form = response.data;
         this.open = true;
-
         this.title = "修改工作区域信息";
         this.optType = "edit";
       });
@@ -401,7 +399,7 @@ export default {
       // this.mapData = row.map; // 将行的地图数据赋值给 mapData
       const data = row.workareaId;
       console.log(this.mapData, "数据复制成功");
-      this.$router.push(`/mes/wa/workarea/MapData?workareaId=${data}`);
+      this.$router.push(`/mes/md/workarea/index/MapData?workareaId=${data}`);
       // this.dialogVisibleMap = true; // 显示地图预览弹框
     },
     updateMapData(selectedPoints) {

src/views/mes/sop/sopm/NewSop.vue

@@ -268,7 +268,6 @@ export default {
   computed: {
     ...mapGetters("sopSelectPoints", ["getSopTitle"]),
   },
-  
   methods: {
     ...mapActions("sopSelectPoints", [
       "setSelectSopPoints",