地图预览界面优化

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

@@ -2,8 +2,32 @@
   <div class="mapdata">
     <div id="container" ref="container" style="width:1200px"></div>
     <div class="left">
-      <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-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span style="font-size: 18px">地图预览</span>
+          <span
+            style="
+                float: right;
+                padding: 1px 0;
+                font-size: 22px;
+                cursor: pointer;
+              "
+            type="text"
+            @click="goBack"
+          >×</span
+          >
+        </div>
+        <div style="height: 100%;padding-bottom:10px">
+          <el-input v-model="value" type="textarea" :rows="34" ></el-input>
+
+        </div>
+        <div class="bottombtn" style="width:100%;height: 35px;padding: 10px 0 0">
+        <el-button @click="save" type="primary" icon="el-icon-edit" style="float: right; height: 33px; line-height: 2px">保存</el-button>
+        <el-button @click="reset" type="primary" icon="el-icon-refresh"  style="float: right; height: 33px; line-height: 2px;margin: 0 10px">重置</el-button>
+        <el-button @click="view" type="primary" icon="el-icon-view" style="float: right; height: 33px; line-height: 2px">预览</el-button>
+        </div>
+      </el-card>
+
     </div>
   </div>
 
@@ -27,6 +51,7 @@ export default {
       redtexts: [], // 白色text合集
       value:'',
       form:{},//拿到单个数据
+      orignData:null,//原始数据
     };
   },
   watch:{
@@ -47,34 +72,86 @@ export default {
   },
 
   methods: {
+    goBack(){
+      this.$router.push('/mes/md/workarea');
+    },
     getWorkAreaInfo(){
       const workareaId=this.$route.query.workareaId;
       getWorkareaInfo(workareaId).then(response => {
         console.log(response,'工作区域预览接口调用');
         this.form=response.data;
+
         if (response.data.map) {
           try {
             let map = JSON.parse(response.data.map)
             this.value = JSON.stringify(map, null, 4)
+            this.orignData=this.value
           } catch (err) {}
         }
         this.initKonva();
         // console.log(this.value,'Value')
       })
     },
-    refresh(){
-      this.initKonva();
-      this.form.map=this.value
-      updateWorkarea(this.form).then(response => {
-        console.log(response,'修改车间区域地图 ');
-      })
+    // 重置
+    reset(){
+      this.value = this.orignData;
+      this.initKonva(); // 重新初始化 Konva
+    },
+    // 预览
+    view(){
+      if(this.isJson(this.value)){
+        this.form.map=this.value
+        this.initKonva();
+      }else {
+        this.$message({
+          type: 'error',
+          message: '地图数据格式不正确，请输入有效的 JSON 格式!'
+        });
+      }
+    },
+    save() {
+      this.$confirm('请确认是否保存修改内容', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 校验 this.value 是否为有效的 JSON
+        if (this.isJson(this.value)) {
+          this.form.map = this.value;
+          updateWorkarea(this.form).then(response => {
+            console.log(response, '修改车间区域地图');
+            this.$router.push('/mes/md/workarea');
+            this.$message({
+              type: 'success',
+              message: '保存成功!'
+            });
+          });
+        } else {
+          this.$message({
+            type: 'error',
+            message: '地图数据格式不正确，请输入有效的 JSON 格式!'
+          });
+        }
+      }).catch(() => {
+        // 取消操作
+      });
+    },
+
+    // 校验字符串是否为有效的 JSON
+    isJson(str) {
+      try {
+        JSON.parse(str);
+        return true;
+      } catch (e) {
+        return false;
+      }
     },
     initKonva() {
       // 创建舞台
       this.stage = new Konva.Stage({
         container: this.$refs.container, // 容器元素
         width: 1200,
-        height: 830,
+        height: 860,
       });
 
       // 创建图层
@@ -114,7 +191,7 @@ export default {
     // 绘制无限网格
     drawGrid(cellWidth, cellHeight, gridColor) {
       const width = 1200;
-      const height = 830;
+      const height = 860;
 
       // 绘制竖线
       for (let i = 0; i <= width; i += cellWidth) {