围栏合一

src/views/car/fence.vue

@@ -42,7 +42,7 @@
 
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button type="text" @click="dialogVisible = true">编辑围栏</el-button>
+          <el-button type="text" @click="updialog(scope.row)">编辑围栏</el-button>
           <el-button type="text">编辑</el-button>
           <el-button type="text">删除</el-button>
         </template>
@@ -52,7 +52,12 @@
     </el-table>
 
     <el-dialog :visible.sync="dialogVisible" width="70%">
-      <maps/>
+      <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>
     </el-dialog>
 
 
@@ -64,19 +69,15 @@
 </template>
 
 <script>
-import maps from '@/views/car/gaode.vue'
+import {fenceList, insertFence, updateFenceMapAddr} from "@/api/fence/add";
-import {fenceList, insertFence} from "@/api/fence/add";
 import log from "@/views/monitor/job/log.vue";
+import AMapLoader from "@amap/amap-jsapi-loader";
 export default {
   name: "fence",
   data() {
     return {
-      // tableData:[{
+      mouseTool:null,
-      //   fenceId:"2",
+      mapAddr:'',
-      //   fenceName:"区域1",
-      //   driveStatus:1,
-      //   fenceStatus:1
-      // }],
       dialogVisible:false,
       //围栏列表
       fenceData:[],
@@ -85,14 +86,105 @@ export default {
       selectQuery:{
         pageNum:1,
         pageSize:5
+      },
+      updateFences:{
+        fenceLocation:""
       }
     };
   },
-  components: {
+  mounted() {
-      maps
+    setTimeout(() => {
+        this.initMap();},
+      500
+    )
   },
 
   methods: {
+    updialog(data) {
+      this.dialogVisible=true
+      this.updateFences = data
+    },
+    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() {
+     this.updateFences.fenceLocation = this.mapAddr
+      console.log(this.updateFences)
+      updateFenceMapAddr(this.updateFences).then(res =>{
+        if (res.data.code === 200){
+          alert("围栏编辑成功!")
+          this.dialogVisible=false
+          this.updateFences = {
+
+          }
+        }
+      })
+    },
     insert() {
       insertFence(this.tableData).then(res =>{
         console.log(res)
@@ -104,7 +196,23 @@ export default {
         this.total = res.data.total
 
       })
-    }
+    },
+
+
+    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],
+      })
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）",
   created() {
@@ -112,6 +220,443 @@ export default {
   }
 };
 </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>
+