完成电子围栏绘制

src/api/system/fence.js

@@ -22,3 +22,11 @@ export function insertFenceObject(form)  {
     data: form,
   })
 }
+//更新电子围栏数据
+export function updateIdFenceData(form)  {
+  return request({
+    url: '/fence/fence/update',
+    method: 'post',
+    data: form,
+  })
+}

src/views/electronicFence/InsertFence.vue

@@ -84,7 +84,9 @@
               </el-table-column>
               <el-table-column label="操作" width="110">
                 <template slot-scope="scope">
-                 <el-button type="text" @click="">绘制围栏</el-button>
+                  <i v-if="scope.row.fenceData==null">
+                    <el-button type="text" @click="gotoFence(scope.row)">绘制围栏</el-button>
+                  </i>
                 </template>
               </el-table-column>
             </el-table>
@@ -184,6 +186,9 @@ export default {
           alert(res.msg);
         })
       },
+      gotoFence(val){
+        this.$router.push({path:('/electronicFence/MapContainer'), query:{fenceId:val.fenceId}})
+      },
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {

src/views/electronicFence/MapContainer.vue

@@ -3,6 +3,7 @@
     <div class="dashboard-text">name: {{ name }}</div>
     <div id="container"></div>
     <el-button type="primary" @click="drawPolygon">绘制多边形</el-button>
+    <el-button type="primary" @click="yesInsertFence">确定</el-button>
   </div>
 </template>
 
@@ -10,7 +11,9 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》, AMapLoader
 import AMapLoader from '@amap/amap-jsapi-loader';
-  export default {
+import {updateIdFenceData} from "@/api/system/fence";
+
+export default {
     //import引入的组件需要注入到对象中才能使用"
       components: {},
       props: {},
@@ -21,6 +24,10 @@ import AMapLoader from '@amap/amap-jsapi-loader';
         name: "map-view",
         map: null,
         mouseTool: null,
+        form:{
+          fenceId: 0,
+          fenceData: '',
+        }
       };
     },
     //计算属性 类似于data概念",
@@ -66,11 +73,26 @@ import AMapLoader from '@amap/amap-jsapi-loader';
       },
       drawPolygonComplate(event){
         console.log(event.obj.getPath())
-        alert("覆盖对象绘制完成")
+        console.log(event.obj.getPath().lng)
+        var polyPoints = event.obj.getPath();
+        for (var i = 0; i < polyPoints.length; i++) {
+          this.form.fenceData += polyPoints[i].lng + "," + polyPoints[i].lat + ";";
+        }
+        console.log(this.form.fenceData)
+
+        updateIdFenceData(this.form).then(res=>{
+          alert(res.msg)
+          this.$router.push('/electronicFence/InsertFence')
+        })
+
+      },
+      yesInsertFence() {
+        alert(this.form.fenceId)
       }
     },
     //生命周期 - 创建完成（可以访问当前this实例）",
     created() {
+      this.form.fenceId=this.$route.query.fenceId;
     },
     //生命周期 - 挂载完成（可以访问DOM元素）",
     mounted() {