diff --git a/package.json b/package.json
index 6a46cc5..2ed93d6 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/MuYu-Cloud.git"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
diff --git a/src/api/fence/add.js b/src/api/fence/add.js
new file mode 100644
index 0000000..c29fcfc
--- /dev/null
+++ b/src/api/fence/add.js
@@ -0,0 +1,41 @@
+import request from "@/utils/request";
+
+//编辑围栏
+export function updateFenceMapAddr(data) {
+  return request({
+    url: '/baseFence/updateFence',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data : data
+  })
+}
+
+
+//添加围栏
+export function insertFence(data) {
+  return request({
+    url: '/baseFence/insertFence',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data : data
+  })
+}
+
+//查询围栏
+export function fenceList(data) {
+  return request({
+    url: 'carBase/baseFence/fenceListAndPage',
+    headers: {
+      isToken: false,
+      repeatSubmit: false
+    },
+    method: 'post',
+    data : data
+  })
+}
diff --git a/src/main.js b/src/main.js
index 5fa57b0..8fc3cec 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,7 @@ import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
 
+
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
diff --git a/src/router/index.js b/src/router/index.js
index adc3786..fd7e475 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -73,6 +73,7 @@ export const constantRoutes = [
       }
     ]
   },
+
   {
     path: '/user',
     component: Layout,
diff --git a/src/views/car/fence.vue b/src/views/car/fence.vue
new file mode 100644
index 0000000..3c6489c
--- /dev/null
+++ b/src/views/car/fence.vue
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-button type="success" @click="insert">添加围栏</el-button>
+
+    <el-table :data="fenceData" style="width: 100%">
+
+
+<!--      <el-table-column label="围栏编号" width="180">-->
+<!--        <template slot-scope="scope">-->
+<!--          <span>{{scope.row.fenceId}}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+
+
+      <el-table-column label="围栏名称" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.fenceName}}</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column label="行驶状态" width="180">
+        <template slot-scope="scope">
+          <span v-if="scope.row.driveStatus===1">驶入</span>
+          <span v-if="scope.row.driveStatus===2">驶出</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="围栏状态" width="180">
+        <template slot-scope="scope">
+          <span v-if="scope.row.driveStatus===0">停用</span>
+          <span v-if="scope.row.driveStatus===1">开启</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="围栏坐标" width="180">
+        <template slot-scope="scope">
+          <span>{{scope.row.fenceLocation}}</span>
+        </template>
+      </el-table-column>
+
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" @click="dialogVisible = true">编辑围栏</el-button>
+          <el-button type="text">编辑</el-button>
+          <el-button type="text">删除</el-button>
+        </template>
+      </el-table-column>
+
+
+    </el-table>
+
+    <el-dialog :visible.sync="dialogVisible" width="70%">
+      <maps/>
+    </el-dialog>
+
+
+  </div>
+
+
+
+
+</template>
+
+<script>
+import maps from '@/views/car/gaode.vue'
+import {fenceList, insertFence} from "@/api/fence/add";
+import log from "@/views/monitor/job/log.vue";
+export default {
+  name: "fence",
+  data() {
+    return {
+      // tableData:[{
+      //   fenceId:"2",
+      //   fenceName:"区域1",
+      //   driveStatus:1,
+      //   fenceStatus:1
+      // }],
+      dialogVisible:false,
+      //围栏列表
+      fenceData:[],
+      total:0,
+      //查询多条件
+      selectQuery:{
+        pageNum:1,
+        pageSize:5
+      }
+    };
+  },
+  components: {
+      maps
+  },
+
+  methods: {
+    insert() {
+      insertFence(this.tableData).then(res =>{
+        console.log(res)
+      })
+    },
+    getFenceList() {
+      fenceList(this.selectQuery).then(res =>{
+        this.fenceData = res.data.rows
+        this.total = res.data.total
+
+      })
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getFenceList();
+  }
+};
+</script>
+
+
+
diff --git a/src/views/car/gaode.vue b/src/views/car/gaode.vue
new file mode 100644
index 0000000..a0cc428
--- /dev/null
+++ b/src/views/car/gaode.vue
@@ -0,0 +1,569 @@
+<template>
+  <div>
+    <div id="container" ></div>
+    <div class="input-card" style="width: 200px">
+      <h4 style="margin-bottom: 10px; font-weight: 600">围栏操作</h4>
+      <button class="btn" @click="drawPolygon()" style="margin-bottom: 5px">开始编辑围栏</button>
+      <button class="btn" @click="updateFence()" style="margin-bottom: 5px">录入围栏</button>
+    </div>
+
+  </div>
+</template>
+<script>
+import AMapLoader from "@amap/amap-jsapi-loader";
+import {updateFenceMapAddr} from "@/api/fence/add";
+export default {
+
+  data(){
+    return {
+      flag: false,
+      mouseTool:null,
+      mapAddr:'',
+      fence:{
+        fenceLocation:""
+      }
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+        this.initMap();},
+      500
+    )
+  },
+  methods: {
+    initMap() {
+      AMapLoader.load({
+        key: '9a267a434f26f5dd5a87fb89d128f745', // 申请好的Web端开发者Key，首次调用 load 时必填
+        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+        plugins: ['AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        // Loca: {//这个是数据可视化
+        //   version: '2.0',
+        // },
+        // AMapUI: {//重点就是这个
+        //   version: '1.1',
+        //   plugins: ['misc/PathSimplifier', 'overlay/SimpleMarker']//SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
+        // }
+      }).then((AMap) => {
+        var map = new AMap.Map("container", {
+          center: [116.434381, 39.898515],
+          zoom: 14
+        });
+
+        this.mouseTool = new AMap.MouseTool(map)
+
+
+        this.mouseTool.on('draw', (event) => {
+          // event.obj 为绘制出来的覆盖物对象
+          log.info('覆盖物对象绘制完成')
+        })
+
+        var map = new AMap.Map('container', {
+          zoom: 14
+        });
+
+        this.mouseTool = new AMap.MouseTool(map);
+
+        //监听draw事件可获取画好的覆盖物
+        var overlays = [];
+        this.mouseTool.on('draw',  (e) => {
+          //绘制多边形;
+          overlays.push(e.obj);
+          //获取坐标;
+          console.log(e.obj.getPath());
+          //格式化坐标;
+          var polyPoints = e.obj.getPath();
+          var arr = "";
+          for (var i = 0; i < polyPoints.length; i++) {
+            this.mapAddr += polyPoints[i].lng + "," + polyPoints[i].lat + ";";
+          }
+          console.log("牛逼啊?"+this.mapAddr);//121.540994,29.870174;121.55138,29.858116;121.55756,29.874193;
+
+        })
+
+        //多边形样式;
+        this.mouseTool.polygon({
+          strokeColor: "#1E9FFF",
+          strokeWeight: 2,
+          strokeStyle: 'dashed',
+          strokeOpacity: 1,
+          fillOpacity: 0.1,
+          fillColor: '#1E9FFF',
+          zIndex: 50,
+        });
+
+        //清除覆盖物;
+        var radios = document.getElementsByName('func');
+        document.getElementById('clear').onclick =  () => {
+          map.remove(overlays)
+          overlays = [];
+        }
+      })
+    },
+
+    updateFence() {
+      updateFenceMapAddr(this.fence).then(res =>{
+        console.log(res)
+          // this.$router.push("/views/car/fence")
+      })
+    },
+
+
+
+    drawPolygon () {
+      this.mouseTool.polygon({
+        strokeColor: "#FF33FF",
+        strokeOpacity: 1,
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillColor: '#1791fc',
+        fillOpacity: 0.4,
+        // 线样式还支持 'dashed'
+        strokeStyle: "solid",
+        // strokeStyle是dashed时有效
+        // strokeDasharray: [30,10],
+      })
+    },
+
+
+
+  }
+}
+</script>
+<style>
+#container {
+  width: 100%;
+  height: 850px;
+}
+html {
+  font-size: 15px;
+}
+.amap-copyright{
+  box-sizing: content-box
+}
+* {
+  box-sizing: border-box
+}
+.input-textarea{
+  color:grey;
+  height:8em;
+  overflow:auto;
+  border-radius:0.4rem;
+  border:1px solid #ced4da;
+  margin-bottom:1rem;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+  font-weight: 300;
+  color: #111213;
+}
+
+hr {
+  margin: 0.5rem 0;
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, .1)
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.4rem;
+}
+
+label, .btn {
+  margin-left: 0;
+  font-size: 1rem;
+}
+
+button, input, select {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: visible;
+  text-transform: none
+}
+
+[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type=checkbox], input[type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0 0.5rem 0 0;
+}
+
+h4 {
+  font-family: inherit;
+  line-height: 1.8;
+  font-weight: 300;
+  color: inherit;
+  font-size: 1.1rem;
+  margin-top: 0;
+  margin-bottom: .5rem
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: 1px solid transparent;
+  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  background-color: transparent;
+  background-image: none;
+  color: #25A5F7;
+  border-color: #25A5F7;
+  padding: .25rem .5rem;
+  line-height: 1.5;
+  border-radius: 1rem;
+  -webkit-appearance: button;
+  cursor:pointer;
+}
+
+.btn:hover {
+  color: #fff;
+  background-color: #25A5F7;
+  border-color: #25A5F7
+}
+
+.btn:hover {
+  text-decoration: none
+}
+
+.input-item {
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 3rem;
+}
+
+.input-item:last-child {
+  margin-bottom: 0;
+}
+
+.input-item>select, .input-item>input[type=text], .input-item>input[type=date] {
+  position: relative;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  width: 1%;
+  margin-bottom: 0;
+}
+
+.input-item>select:not(:last-child), .input-item>input[type=text]:not(:last-child), .input-item>input[type=date]:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0
+}
+
+.input-item>select:not(:first-child), .input-item>input[type=text]:not(:first-child), .input-item>input[type=date]:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0
+}
+
+.input-item-prepend {
+  margin-right: -1px;
+}
+
+.input-item-text, input[type=text],input[type=date], select {
+  height: calc(2.2rem + 2px);
+}
+
+.input-item-text {
+  width: 6rem;
+  text-align: justify;
+  padding: 0.4rem 0.7rem;
+  display: inline-block;
+  text-justify: distribute-all-lines;
+  /*ie6-8*/
+  text-align-last: justify;
+  /* ie9*/
+  -moz-text-align-last: justify;
+  /*ff*/
+  -webkit-text-align-last: justify;
+  /*chrome 20+*/
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #e9ecef;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.input-item-text input[type=checkbox], .input-item-text input[type=radio] {
+  margin-top: 0
+}
+
+.input-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border-radius: .25rem;
+  width: 22rem;
+  border-width: 0;
+  border-radius: 0.4rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  padding: 0.75rem 1.25rem;
+}
+
+.input-text {
+  line-height: 2rem;
+  margin-right: 2rem;
+}
+
+.info hr {
+  margin-right: 0;
+  margin-left: 0;
+  border-top-color: grey;
+}
+
+.info {
+  padding: .75rem 1.25rem;
+  margin-bottom: 1rem;
+  border-radius: .25rem;
+  position: fixed;
+  top: 1rem;
+  background-color: white;
+  width: auto;
+  min-width: 22rem;
+  border-width: 0;
+  right: 1rem;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+}
+
+.code {
+  left: 1.5rem;
+  right: 1.5rem;
+  top: 1.5rem;
+  bottom: 1.5rem;
+  overflow: auto;
+  margin-bottom: 0rem;
+}
+
+.code .btn {
+  top: 1rem;
+  position: absolute;
+  right: 1rem;
+}
+
+.code .result {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  bottom: 1rem;
+  position: absolute;
+  top: 5.5rem;
+  right: 1rem;
+  left: 1rem;
+  overflow: auto;
+}
+
+.code .status {
+  color: #80adff;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.code h4 {
+  display: inline-block;
+  max-width: 20rem;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+}
+
+select, input[type=text], input[type=date] {
+  display: inline-block;
+  width: 100%;
+  padding: .375rem 1.75rem .375rem .75rem;
+  line-height: 1.5;
+  color: #495057;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;
+  background-size: 8px 10px;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none
+}
+
+input[type=text],input[type=date] {
+  background: #fff;
+  padding: .375rem .75rem;
+}
+
+select:focus, input[type=text]:focus, input[type=date]:focus {
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 .1rem rgba(128, 189, 255, .1)
+}
+
+.btn:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+select:focus::-ms-value, input[type=text]:focus::-ms-value,input[type=date]:focus::-ms-value {
+  color: #495057;
+  background-color: #fff
+}
+
+
+/* native toastr */
+.native-toast {
+  position: fixed;
+  background-color: rgba(50, 50, 50, .8);
+  border-radius: 33px;
+  color: white;
+  left: 50%;
+  text-align: center;
+  padding: 6px 12px;
+  opacity: 0;
+  z-index: 99999;
+  transition: transform .25s, opacity .25s, top .25s;
+  box-sizing: border-box;
+}
+
+.native-toast-bottom {
+  bottom: 50px;
+  -ms-transform: translateX(-50%) translateY(50px);
+  transform: translateX(-50%) translateY(50px)
+}
+
+.native-toast-bottom.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-bottom.native-toast-edge {
+  bottom: 0;
+}
+
+.native-toast-top {
+  top: 50px;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-top.native-toast-shown {
+  opacity: 1;
+  -ms-transform: translateX(-50%) translateY(0);
+  transform: translateX(-50%) translateY(0);
+}
+
+.native-toast-top.native-toast-edge {
+  top: 0;
+}
+
+.native-toast-center {
+  top: 0;
+  -ms-transform: translateX(-50%) translateY(-50px);
+  transform: translateX(-50%) translateY(-50px)
+}
+
+.native-toast-center.native-toast-shown {
+  opacity: 1;
+  top: 50%;
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.native-toast-edge {
+  border-radius: 0;
+  width: 100%;
+  text-align: left;
+}
+
+@media screen and (min-width: 40rem) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 18rem;
+  }
+}
+
+/*
+  max-width does not seem to work in small screen?
+*/
+
+/*@media screen and (max-width: 768px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 400px;
+  }
+}
+
+@media screen and (max-width: 468px) {
+  .native-toast:not(.native-toast-edge) {
+    max-width: 300px;
+  }
+}*/
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}
+</style>