fase()坐标

src/api/goods/map.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request'
+
+// 查询围栏组列表
+export function selectFenceGroups(data) {
+  return request({
+    url: '/rule/map/selectFenceGroups',
+    method: 'post',
+    data
+  })
+}
+
+// 查询围栏列表
+export function selectFence(data) {
+  return request({
+    url: '/rule/map/selectFence',
+    method: 'post',
+    data
+  })
+}
+
+// 查询企业列表
+export function selectFenceGroupsById(carId) {
+  return request({
+    url: '/rule/map/selectFenceGroupsById/' + carId,
+    method: 'post'
+  })
+}
+
+export function getSel(data) {
+  return request({
+    url: '/rule/map/getSel',
+    method: 'post',
+    data
+  })
+}
+
+export function setSel(r) {
+  return request({
+    url: '/rule/map/setSel?r=' + r,
+    method: 'post'
+  })
+}

src/views/client/car/index.vue

@@ -154,6 +154,11 @@
           >删除</el-button>
         </template>
       </el-table-column>
+      <el-table-column label="查看围栏">
+        <span slot-scope="scope">
+          <el-button type="text" @click="fence(scope.row.carId)">查看围栏</el-button>
+        </span>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -167,9 +172,6 @@
     <!-- 添加或修改车辆信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="车辆识别码" prop="vin">
-          <el-input v-model="form.vin" placeholder="请输入车辆识别码" />
-        </el-form-item>
         <el-form-item label="品牌" prop="brand">
           <el-input v-model="form.brand" placeholder="请输入品牌" />
         </el-form-item>
@@ -286,6 +288,9 @@ export default {
         console.log(res.data)
       })
     },
+    fence(carId) {
+      this.$router.push({path: '/client/sever/fence',query:{carId:carId}})
+    },
     /** 查询车辆信息列表 */
     getList() {
       this.loading = true;

src/views/client/sever/fence/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    {{fenceGroups.groupsName}}下属围栏
+    <el-table :data="fenceGroups.fenceList">
+      <el-table-column prop="fenceName" label="围栏名称"></el-table-column>
+      <el-table-column prop="fenceType" label="围栏类型"></el-table-column>
+      <el-table-column prop="radius" label="半径"></el-table-column>
+      <el-table-column prop="eventType" label="驶入驶出"></el-table-column>
+      <el-table-column prop="staut" label="围栏状态">
+        <span slot-scope="scope">
+          <span v-if="scope.row.staut == 0">启用</span>
+          <span v-if="scope.row.staut == -1">禁止</span>
+        </span>
+      </el-table-column>
+      <el-table-column prop="polygonPoints" label="坐标"></el-table-column>
+      <el-table-column label="增加围栏">
+        <span slot-scope="scope">
+          <el-button type="text" @click="add(scope.row.groupId)">增加围栏</el-button>
+        </span>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {selectFenceGroups, selectFenceGroupsById} from "@/api/goods/map";
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    // 这里存放数据"
+    return {
+      carId: this.$route.query.carId,
+      fenceGroups: {}
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 监控data中的数据变化",
+  watch: {},
+  // 方法集合",
+  methods: {
+    getInfo() {
+      selectFenceGroupsById(this.carId).then(res => {
+        this.fenceGroups = res.data
+        console.log(res.data)
+      })
+    },
+    add(groupId) {
+      this.$router.push({path:'/client/sever/map',groupId:groupId})
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getInfo()
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, // 生命周期 - 创建之前",
+  beforeMount() {
+  }, // 生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, // 生命周期 - 更新之前",
+  updated() {
+  }, // 生命周期 - 更新之后",
+  beforeDestroy() {
+  }, // 生命周期 - 销毁之前",
+  destroyed() {
+  }, // 生命周期 - 销毁完成",
+  activated() {
+  } // 如果页面有keep-alive缓存功能，这个函数会触发",
+}
+</script>
+<style scoped>
+
+</style>

src/views/client/sever/map/MapContainer.vue

@@ -3,11 +3,13 @@
     <el-button type="primary" @click="drawRectangle">绘制多边形</el-button>
     <el-button type="primary" @click="editRectangle">编辑多边形</el-button>
     <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
+    <el-button type="primary" @click="sel">查看</el-button>
     <div id="amapContainer"></div>
   </div>
 </template>
 
 <script>
+import { getSel, setSel } from "@/api/goods/map";
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 export default {
@@ -19,6 +21,7 @@ export default {
   data() {
     // 这里存放数据"
     return {
+      groupId: this.$route.query.groupId,
       path: [], //当前绘制多边形经纬度数组
       polygonItem: [], // 地图上绘制所有的多边形对象
       polyEditors: [] //所有编辑对象的数组
@@ -30,6 +33,17 @@ export default {
   watch: {},
   // 方法集合",
   methods: {
+    sel() {
+      const jsonData = JSON.stringify(this.polygonItem[0].w.path)
+      console.log(jsonData)
+      const jsonPare = JSON.parse(jsonData)
+      jsonPare.forEach(res => {
+        console.log(res)
+      })
+      getSel(jsonPare).then(res => {
+        console.log(res.data)
+      })
+    },
     // 地图初始化
     intAmap (callBack) {
       this.AMap = window.AMap;