feat():围栏组：围栏组多对多电子围栏

public/index.html

@@ -7,6 +7,20 @@
   <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   <link href="<%= BASE_URL %>favicon.ico" rel="icon">
   <title><%= webpackConfig.name %></title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+  <style>
+    html,
+    body,
+    #container {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <title>多边形编辑器吸附功能</title>
+  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
+  <script src="https://webapi.amap.com/maps?v=2.0&key=defb21facca687bad1bb8e956b7d67dd&plugin=AMap.PolygonEditor"></script>
+  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
   <!--[if lt IE 11]>
   <script>window.location.href = '/html/ie.html';</script><![endif]-->
   <style>

src/api/fence/fence.js

@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+// 查询电子围栏列表
+export function listFence(data) {
+  return request({
+    url: '/vehicles/fence/fenceselectList',
+    method: 'post',
+    data
+  })
+}
+
+// 查询电子围栏选择列表
+export function fenceArray(data) {
+  return request({
+    url: '/vehicles/fence/fenceArray',
+    method: 'post',
+    data
+  })
+}
+
+//添加
+export function addfence(data) {
+  return request({
+    url: '/vehicles/fence/add',
+    method: 'post',
+    data
+  })
+}
+//修改
+export function updfence(data) {
+  return request({
+    url: `/vehicles/fence/upd/${data.id}`,
+    method: 'post',
+    data
+  })
+}
+
+//删除
+export function delElectronById(id) {
+  return request({
+    url: '/vehicles/fence/delElectronById/'+id,
+    method: 'post',
+    data
+  })
+}
+
+//根据id设置围栏
+export function setFenceWay(data) {
+  return request({
+    url: '/vehicles/fence/setFenceWay',
+    method: 'post',
+    data
+  })
+}
+
+
+//开启围栏
+export function openFence(id) {
+  return request({
+    url: '/vehicles/fence/open/'+id,
+    method: 'post',
+    data
+  })
+}
+//回显
+export function findElectronicByid(id) {
+  return request({
+    url: '/vehicles/fence/findElectronicByid/'+id,
+    method: 'post',
+  })
+}
+
+//关闭围栏
+export function closeFence(id) {
+  return request({
+    url: '/vehicles/fence/close/'+id,
+    method: 'post',
+    data
+  })
+}

src/api/fence/group.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 查询围栏组列表
+export function selectGroupList(data) {
+  return request({
+    url: '/vehicles/group/selectGroupList',
+    method: 'post',
+    data
+  })
+}
+
+//添加
+export function addGroup(data) {
+  return request({
+    url: '/vehicles/group/addGroup',
+    method: 'post',
+    data
+  })
+}
+//修改
+export function updGroup(data) {
+  return request({
+    url: `/vehicles/group/updGroup/${data.id}`,
+    method: 'post',
+    data
+  })
+}
+//添加
+export function findGroupByid(id) {
+  return request({
+    url: '/vehicles/group/findGroupByid/'+id,
+    method: 'post',
+  })
+}

src/api/vehicle/info.js

@@ -1,73 +0,0 @@
-import request from '@/utils/request'
-
-// 查询车辆信息列表
-export function listInfo(query) {
-  return request({
-    url: '/vehicle/info/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询车辆信息详细
-export function getInfo(id) {
-  return request({
-    url: '/vehicle/info/' + id,
-    method: 'get'
-  })
-}
-
-// 新增车辆信息
-export function addInfo(data) {
-  return request({
-    url: '/vehicle/info',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改车辆信息
-export function updateInfo(data) {
-  return request({
-    url: '/vehicle/info',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除车辆信息
-export function delInfo(id) {
-  return request({
-    url: '/vehicle/info/' + id,
-    method: 'delete'
-  })
-}
-
-export function realTimeLocus(vin){
-  return request({
-    url: '/vehicle/info/realTimeLocus/' + vin,
-    method: 'get'
-  })
-}
-
-export function realTimeLocusDel(vin){
-  return request({
-    url: '/vehicle/info/realTimeLocus/' + vin,
-    method: 'delete'
-  })
-}
-
-export function getVehicleDataByVin(vin){
-  return request({
-    url: '/vehicle/info/data/' + vin,
-    method: 'get'
-  })
-}
-export function getVehicleIndexData(){
-  return request({
-    url: '/vehicle/info/indexData/',
-    method: 'get'
-  })
-}
-
-

src/api/vehicle/move.js

@@ -1,70 +0,0 @@
-import request from '@/utils/request'
-
-// 查询车辆运行记录列表
-export function listMove(query) {
-  return request({
-    url: '/vehicle/move/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询车辆运行记录详细
-export function getMove(id) {
-  return request({
-    url: '/vehicle/move/' + id,
-    method: 'get'
-  })
-}
-
-// 新增车辆运行记录
-export function addMove(data) {
-  return request({
-    url: '/vehicle/move',
-    method: 'post',
-    data: data
-  })
-}
-
-// 修改车辆运行记录
-export function updateMove(data) {
-  return request({
-    url: '/vehicle/move',
-    method: 'put',
-    data: data
-  })
-}
-
-// 删除车辆运行记录
-export function delMove(id) {
-  return request({
-    url: '/vehicle/move/' + id,
-    method: 'delete'
-  })
-}
-
-
-
-// 准备开始历史数据
-export function historyMoveStart(vin,startTime, endTime) {
-  return request({
-    url: '/vehicle/move/historyMove/' + vin + "/" + startTime + "/" + endTime,
-    method: 'get'
-  })
-}
-// 查看结束历史数据
-export function historyMoveDel(vin) {
-  return request({
-    url: '/vehicle/move/historyMove/' + vin,
-    method: 'DELETE'
-  })
-}
-
-
-// 历史数据
-export function historyMove(vin) {
-  return request({
-    url: '/vehicle/move/history/' + vin,
-    method: 'get'
-  })
-}

src/views/fence/fences/index.vue

@@ -10,6 +10,17 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+<!--      fenceBusiness-->
+<!--      <el-form-item label="业务类型" prop="fenceBusiness">-->
+<!--        <el-select v-model="queryParams.fenceBusiness" placeholder="请选择业务类型" clearable size="small">-->
+<!--          <el-option-->
+<!--            v-for="dict in fenceAlarmTypeOptions"-->
+<!--            :key="dict.dictValue"-->
+<!--            :label="dict.dictLabel"-->
+<!--            :value="dict.dictValue"-->
+<!--          />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
       <el-form-item label="围栏类型" prop="fenceType">
         <el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
           <el-option
@@ -86,7 +97,13 @@
     <el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="围栏名称" align="center" prop="fenceName" />
-      <el-table-column label="围栏类型" align="center" prop="fenceType" >
+<!--      vehicle_fence_business-->
+      <el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
       <template slot-scope="scope">
         <dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
       </template>
@@ -143,6 +160,16 @@
         <el-form-item label="围栏名称" prop="fenceName">
           <el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
         </el-form-item>
+<!--        <el-form-item label="业务类型" prop="fenceType">-->
+<!--          <el-select v-model="form.fenceBusiness" placeholder="请选择业务类型">-->
+<!--            <el-option-->
+<!--              v-for="dict in fenceAlarmTypeOptions"-->
+<!--              :key="dict.dictValue"-->
+<!--              :label="dict.dictLabel"-->
+<!--              :value="dict.dictValue"-->
+<!--            ></el-option>-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
         <el-form-item label="围栏类型" prop="fenceType">
           <el-select v-model="form.fenceType" placeholder="请选择围栏类型">
             <el-option
@@ -196,7 +223,7 @@ import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehi
 import FaultDraw from "@/views/fence/AMAP/index.vue";
 export default {
   name: "fence",
-  dicts: ['sys_normal_disable','yes_no','vehicle_fence_type'],
+  dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
   components: { FaultDraw },
   data() {
     return {
@@ -222,6 +249,8 @@ export default {
       fenceAlarmTypeOptions: [],
       // 围栏状态字典
       statusOptions: [],
+      // 围栏业务类型字典
+      // fenceAlarmBusinessOptions: [],
       // 查询参数
       queryParams: {
         // pageNum: 1,
@@ -229,6 +258,7 @@ export default {
         fenceName: null,
         fenceType: null,
         state: null,
+        fenceBusiness: null,
       },
       // 表单参数
       form: {},
@@ -251,6 +281,9 @@ export default {
     this.getDicts("yes_no").then(response => {
       this.statusOptions = response.data;
     });
+    // this.getDicts("vehicle_fence_business").then(response => {
+    //   this.fenceAlarmBusinessOptions = response.data;
+    // });
   },
   methods: {
     /** 查询电子围栏列表 */
@@ -265,12 +298,16 @@ export default {
     },
     // 围栏类型字典翻译
     fenceAlarmTypeFormat(row, column) {
-      return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceAlarmType);
+      return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
     },
     // 围栏状态字典翻译
     statusFormat(row, column) {
       return this.selectDictLabel(this.statusOptions, row.state);
     },
+    // 围栏状态字典翻译
+    // fenceAlarmBusiness(row, column) {
+    //   return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
+    // },
     // 取消按钮
     cancel() {
       this.open = false;

src/views/fence/group.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="app-container">
+
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="围栏组名称" prop="fenceName">
+        <el-input
+          v-model="queryParams.fenceName"
+          clearable
+          placeholder="请输入围栏名称"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="优先级" prop="priority">
+        <el-option label="一级围栏组" value="1"></el-option>
+        <el-option label="二级围栏组" value="2"></el-option>
+        <el-option label="三级围栏组" value="3"></el-option>
+        <el-option label="四级围栏组" value="4"></el-option>
+        <el-option label="五级围栏组" value="5"></el-option>
+        <el-option label="六级围栏组" value="6"></el-option>
+        <el-option label="七级围栏组" value="7"></el-option>
+        <el-option label="八级围栏组" value="8"></el-option>
+        <el-option label="九级围栏组" value="9"></el-option>
+        <el-option label="十级围栏组" value="10"></el-option>
+      </el-form-item>
+<!--      <el-form-item label="类型" prop="fenceType">-->
+<!--        <el-select v-model="queryParams.fenceType" clearable placeholder="围栏状态">-->
+<!--          <el-option-->
+<!--            v-for="dict in dict.type.sys_fence_type"-->
+<!--            :key="dict.value"-->
+<!--            :label="dict.label"-->
+<!--            :value="dict.value"-->
+<!--          />-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" clearable placeholder="围栏状态">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:notice:add']"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          type="primary"
+          @click="handleAdd"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:notice:edit']"
+          :disabled="single"
+          icon="el-icon-edit"
+          plain
+          size="mini"
+          type="success"
+          @click="handleUpdate"
+        >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['vehicles:sysCorpuscleFence:export']"
+        >导出</el-button>
+      </el-col>
+
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="groupList"
+      style="width: 100%">
+      <el-table-column
+        label="id"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="围栏名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.groupName}}</span>
+        </template>
+      </el-table-column>
+<!--      <el-table-column-->
+<!--        label="围栏类型"-->
+<!--        width="180">-->
+<!--        <template slot-scope="scope">-->
+<!--          <dict-tag :options="dict.type.sys_fence_type" :value="scope.row.groupType"/>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+      <el-table-column
+        label="围栏状态"
+        width="180">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="围栏优先级"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px" v-show=" scope.row.priority==1">一级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==2">二级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==3">三级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==4">四级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==5">五级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==6">六级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==7">七级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==8">八级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==9">九级围栏组</span>
+          <span style="margin-left: 10px" v-show=" scope.row.priority==10">十级围栏组</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="success"
+            class="el-icon-connection"
+            @click="boundFence(scope.row)">围栏信息</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="900px">
+
+      <el-steps :active="active" finish-status="success">
+         <el-step title="步骤 1" description="围栏组基础信息"></el-step>
+          <el-step title="步骤 2" description="绑定围栏"></el-step>
+      </el-steps>
+
+
+<div v-show="active==0">
+      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
+        <el-row>
+          <el-col :span="20">
+            <el-form-item label="围栏组名称" prop="groupName">
+              <el-input v-model="form.groupName" placeholder="请输入围栏组名称"/>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="20">
+            <el-form-item label="优先级" prop="priority">
+              <el-input-number v-model="form.priority" @change="handleChange" :min="0" :max="99" label="优先级范围在(0-99)"></el-input-number>
+            </el-form-item>
+          </el-col>
+        </el-row>
+<!--        <el-row>-->
+<!--          <el-col :span="20">-->
+<!--            <el-form-item label="围栏类型" prop="noticeType">-->
+<!--              <el-select v-model="form.groupType" placeholder="请选择围栏类型">-->
+<!--                <el-option-->
+<!--                  v-for="dict in dict.type.sys_fence_type"-->
+<!--                  :key="dict.value"-->
+<!--                  :label="dict.label"-->
+<!--                  :value="dict.value"-->
+<!--                ></el-option>-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+<!--        </el-row>-->
+        <el-row>
+          <el-col :span="20">
+            <el-form-item label="围栏组状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+
+
+</div>
+      <div v-show="active==1">
+      <el-table
+        ref="multipleTable"
+        :data="fenceList"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+        <el-table-column
+          label="id"
+          width="120">
+          <template slot-scope="scope">{{ scope.row.id }}</template>
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="电子围栏名称"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="longitudeLatitude"
+          label="围栏位置编码"
+         >
+        </el-table-column>
+
+
+      </el-table>
+
+      </div>
+      <div slot="footer" class="dialog-footer">
+
+
+        <el-button style="margin-top: 12px;" @click="active--" v-show="active===1">上一步</el-button>
+        <el-button style="margin-top: 12px;" @click="active++" v-show="active===0">下一步</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+
+
+
+      </div>
+    </el-dialog>
+
+    <el-drawer
+      size="60%"
+      :title="title"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose">
+
+      <el-table
+        v-loading="loading"
+        ref="multipleTable"
+        :data="fenceList"
+        tooltip-effect="dark"
+        style="width: 100%"
+        @selection-change="handleSelectionChange">
+        <el-table-column
+          label="id"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.id }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="围栏名称"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.name}}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="围栏类型"
+          width="180">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="围栏位置"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.longitudeLatitude}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-button
+              type="warning"
+              class="el-icon-view"
+              @click="lookFence(scope.row)"></el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete1(scope.row)">解除绑定</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div>
+        <el-button
+          type="primary"
+          size="mini"
+          @click="closeDrawer()">确认</el-button>
+      </div>
+
+    </el-drawer>
+
+  </div>
+</template>
+
+<script>
+
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {addGroup, findGroupByid, selectGroupList, updGroup} from "@/api/fence/group";
+import {fenceArray, findElectronicByid, listFence} from "@/api/fence/fence";
+import { delDept } from '@/api/system/dept'
+export default {
+  name: "group",
+  dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
+  data() {
+    return {
+      testList:[],
+//进度条
+      active: 0,
+      //抽屉
+      drawer: false,
+      direction: 'rtl',
+      // 非单个禁用
+      single: true,
+      showSearch: true,
+      groupList:[],
+      fenceList:[],
+      queryParams:{},
+      // 遮罩层
+      loading: false,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 围栏组表单参数
+      form: {
+        //被选择的电子围栏
+        electronicFenceRespList: [],
+      },
+      // 表单校验
+      rules: {
+        fenceType: [
+          {required: true, message: "围栏类型不能为空", trigger: "blur"}
+        ],
+        name: [
+          {required: true, message: "围栏名称不能为空", trigger: "blur"}
+        ],
+      }
+    }
+  },
+
+  mounted() {
+    // 可以在这里添加一些初始化逻辑
+    console.log('Component is mounted, checking if the table reference is available:', this.$refs.multipleTable);
+  },
+
+  created() {
+    this.getList();
+    this.fenceArrayList();
+  },
+  methods: {
+    //查看电子围栏
+    lookFence(row){
+      if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
+        this.$modal.msgError("请先设置电子围栏");
+        return;
+      }
+      this.$router.push({
+        path:'map',
+        query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
+      })
+    },
+    //控制抽屉
+    closeDrawer(){
+      this.drawer=false;
+    },
+
+    /** 查询电子围栏列表 */
+    selectFence(row) {
+
+      findGroupByid(row.id).then(response => {
+        this.fenceList = response.data.electronicFenceRespList;
+      });
+    },
+
+    handleClose(done) {
+      this.$confirm('确认关闭？')
+        .then(_ => {
+          done();
+        })
+        .catch(_ => {});
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    handleSelectionChange(val) {
+      this.form.electronicFenceRespList = val;
+    },
+    //打开绑定围栏的功能
+    boundFence(row){
+        this.title = "绑定的电子围栏";
+        this.selectFence(row);
+      this.drawer = true;
+    },
+
+    handleDelete(row){
+      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
+        return delDept(row.deptId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+
+    handleDelete1(row){
+      this.$modal.confirm('是否确认解除名称为"' + row.deptName + '"的数据项？').then(function () {
+        return delDept(row.deptId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("解除绑定成功");
+      }).catch(() => {
+      });
+    },
+
+// 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+    fenceArrayList(){
+      fenceArray().then(res => {
+        console.log(res)
+        this.fenceList = res.data;
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.open = true;
+      this.title = "添加围栏组";
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('vehicles/fence/export', {
+        ...this.queryParams
+      }, `vehicle_fence.xlsx`)
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.title="修改围栏组";
+      this.open = true;
+      findGroupByid(row.id).then(response => {
+        this.form = response.data;
+        let rows = response.data.electronicFenceRespList;
+        console.log(rows)
+        if (rows!=null&&rows!=undefined&&rows!=''){
+          rows.forEach(row => {
+            console.log(row);
+            this.$refs.multipleTable.toggleRowSelection(this.fenceList[row.id-1]);
+          });
+        }
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            updGroup(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addGroup(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 查询围栏列表 */
+    getList() {
+      this.loading=true;
+      selectGroupList(this.queryParams).then(res => {
+        console.log(res)
+        this.groupList = res.data;
+        this.loading=false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+
+  }
+};
+</script>

src/views/fence/group/index.vue

@@ -0,0 +1,396 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="围栏名称" prop="fenceName">
+        <el-input
+          v-model="queryParams.fenceName"
+          placeholder="请输入围栏名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="围栏类型" prop="fenceType">
+        <el-select v-model="queryParams.fenceType" placeholder="请选择围栏类型" clearable size="small">
+          <el-option
+            v-for="dict in fenceAlarmTypeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="围栏状态" prop="state">
+        <el-select v-model="queryParams.state" placeholder="请选择围栏状态" clearable size="small">
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['vehicles:sysCorpuscleFence:addSysCorpuscleFence']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['vehicles:sysCorpuscleFence:updSysCorpuscleFence']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['vehicles:sysCorpuscleFence:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <!--    :formatter="statusFormat"-->
+    <!--    :formatter="fenceAlarmTypeFormat"-->
+    <el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="围栏名称" align="center" prop="fenceName" />
+      <!--      vehicle_fence_business-->
+      <el-table-column label="业务类型" align="fenceBusiness" prop="fenceBusiness" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.vehicle_fence_business" :value="scope.row.fenceBusiness"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="围栏类型" align="fenceType" prop="fenceType" >
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.vehicle_fence_type" :value="scope.row.fenceType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="围栏状态" align="state" prop="state">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.yes_no" :value="scope.row.state"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="围栏位置" align="center" prop="fencePosition" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+
+        <template slot-scope="scope">
+          <el-button
+            type="warning"
+            class="el-icon-view"
+            @click="lookFence(scope.row)"></el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="showFaultDraw(scope.row)"
+          >绘制围栏</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['vehicle:fence:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['vehicle:fence:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改电子围栏对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-input v-show="false" v-model="form.id" />
+        <el-form-item label="围栏名称" prop="fenceName">
+          <el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
+        </el-form-item>
+        <el-form-item label="围栏类型" prop="fenceType">
+          <el-select v-model="form.fenceType" placeholder="请选择围栏类型">
+            <el-option
+              v-for="dict in fenceAlarmTypeOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="围栏状态：" prop="state">
+          <el-radio-group v-model="form.state">
+            <el-radio
+              v-for="dict in dict.type.yes_no"
+              :key="dict.value"
+              :label="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-drawer
+      v-if="faultDrawStatus"
+      :title="drawerTitle"
+      :visible.sync="drawer"
+      :direction="direction"
+      :before-close="handleClose"
+      size="100%">
+      <fault-draw ref="faultDraw" v-if="faultDrawStatus" v-bind:id="fenceId" @handleClose="handleClose"></fault-draw>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import { listFence, getFence, delFence, addFence, updateFence } from "@/api/vehicle/fence";
+import FaultDraw from "@/views/fence/AMAP/index.vue";
+export default {
+  name: "fence",
+  dicts: ['sys_normal_disable','vehicle_fence_business','vehicle_fence_type','yes_no'],
+  components: { FaultDraw },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 电子围栏表格数据
+      fenceList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 围栏类型字典
+      fenceAlarmTypeOptions: [],
+      // 围栏状态字典
+      statusOptions: [],
+      // 围栏业务类型字典
+      // fenceAlarmBusinessOptions: [],
+      // 查询参数
+      queryParams: {
+        // pageNum: 1,
+        // pageSize: 10,
+        fenceName: null,
+        fenceType: null,
+        state: null,
+        fenceBusiness: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+      ,
+      drawer: false,
+      direction: 'rtl',
+      drawerTitle:"",
+      fenceId: "",
+      faultDrawStatus:false,
+    };
+  },
+  created() {
+    this.getList();
+    this.getDicts("vehicle_fence_type").then(response => {
+      this.fenceAlarmTypeOptions = response.data;
+    });
+    this.getDicts("yes_no").then(response => {
+      this.statusOptions = response.data;
+    });
+    // this.getDicts("vehicle_fence_business").then(response => {
+    //   this.fenceAlarmBusinessOptions = response.data;
+    // });
+  },
+  methods: {
+    /** 查询电子围栏列表 */
+    getList() {
+      this.loading = true;
+      listFence(this.queryParams).then(response => {
+        this.fenceList = response.data;
+        // this.total = response.data.total;
+        this.loading = false;
+        console.log("列表"+response.data)
+      });
+    },
+    // 围栏类型字典翻译
+    fenceAlarmTypeFormat(row, column) {
+      return this.selectDictLabel(this.fenceAlarmTypeOptions, row.fenceType);
+    },
+    // 围栏状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.statusOptions, row.state);
+    },
+    // 围栏状态字典翻译
+    // fenceAlarmBusiness(row, column) {
+    //   return this.selectDictLabel(this.fenceAlarmBusinessOptions, row.state);
+    // },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        fenceName: null,
+        fenceAlarmType: null,
+        status: 0,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加电子围栏";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getFence(id).then(response => {
+        this.form = response.data;
+        console.log(response)
+        this.open = true;
+        this.title = "修改电子围栏";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          alert(this.form.id)
+          if (this.form.id != null) {
+            updateFence(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addFence(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除电子围栏编号为"' + ids + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function() {
+        return delFence(ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('vehicles/sysCorpuscleFence/export', {
+        ...this.queryParams
+      }, `vehicle_fence.xlsx`)
+    },
+    lookFence(row){
+      if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
+        this.$modal.msgError("请先设置电子围栏");
+        return;
+      }
+      this.$router.push({
+        path:'map',
+        query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
+      })
+    },
+    showFaultDraw(row){
+      this.drawer = true;
+      this.drawerTitle = "绘制围栏：" + row.fenceName ;
+      this.fenceId = row.id;
+      this.faultDrawStatus = true;
+    },
+    handleClose(){
+      this.drawer = false;
+      this.faultDrawStatus = false;
+    }
+  }
+};
+</script>

src/views/fence/list.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="app-container">
+    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
+      <el-form-item label="围栏名称" prop="fenceName">
+        <el-input
+          v-model="queryParams.fenceName"
+          clearable
+          placeholder="请输入围栏名称"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="围栏类型" prop="fenceType">
+        <el-select v-model="queryParams.fenceType" clearable placeholder="围栏类型">
+          <el-option
+            v-for="dict in dict.type.sys_fence_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="围栏状态" prop="status">
+        <el-select v-model="queryParams.status" clearable placeholder="围栏状态">
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:notice:add']"
+          icon="el-icon-plus"
+          plain
+          size="mini"
+          type="primary"
+          @click="handleAdd"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:notice:edit']"
+          :disabled="single"
+          icon="el-icon-edit"
+          plain
+          size="mini"
+          type="success"
+          @click="handleUpdate"
+        >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['vehicles:sysCorpuscleFence:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['vehicles:sysCorpuscleFence:export']"
+        >导出</el-button>
+      </el-col>
+
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      ref="multipleTable"
+      :data="fenceList"
+      tooltip-effect="dark"
+      style="width: 100%"
+      @selection-change="handleSelectionChange">
+      <el-table-column
+        label="id"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="围栏名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.name}}</span>
+        </template>
+      </el-table-column>
+<!--fenceType-->
+      <el-table-column
+        label="围栏类型"
+        width="180">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_fence_type" :value="scope.row.fenceType"/>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="围栏状态"
+        width="180">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_notice_status" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+<!--      <el-table-column-->
+<!--        label="围栏位置"-->
+<!--        width="180">-->
+<!--        <template slot-scope="scope">-->
+<!--          <span style="margin-left: 10px">{{ scope.row.longitudeLatitude}}</span>-->
+<!--        </template>-->
+<!--      </el-table-column>-->
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="warning"
+            class="el-icon-view"
+            @click="lookFence(scope.row)"></el-button>
+          <el-button
+            type="success"
+            class="el-icon-map-location"
+            @click="handleFence(scope.row)">绘制围栏</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog :title="title" :visible.sync="open" append-to-body width="600px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="围栏名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入围栏名称"/>
+            </el-form-item>
+          </el-col>
+
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="围栏类型" prop="noticeType">
+              <el-select v-model="form.fenceType" placeholder="请选择围栏类型">
+                <el-option
+                  v-for="dict in dict.type.sys_fence_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="围栏状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in dict.type.sys_normal_disable"
+                  :key="dict.value"
+                  :label="dict.value"
+                >{{ dict.label }}
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+
+  </div>
+</template>
+
+<script>
+
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {addfence, findElectronicByid, listFence, updfence} from "@/api/fence/fence";
+import {addDept, delDept, getDept, listDept, listDeptExcludeChild, updateDept} from "@/api/system/dept";
+
+export default {
+  name: "list",
+  dicts: ['sys_normal_disable','sys_fence_type','sys_notice_status'],
+  data() {
+    return {
+      // 非单个禁用
+      single: true,
+      showSearch: true,
+      fenceList:[],
+      queryParams:{},
+      // 遮罩层
+      loading: false,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        fenceType: [
+          {required: true, message: "围栏类型不能为空", trigger: "blur"}
+        ],
+        name: [
+          {required: true, message: "围栏名称不能为空", trigger: "blur"}
+        ],
+      }
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    handleSelectionChange(){
+
+    },
+    //绘制电子围栏
+    handleFence(row){
+      this.$router.push({
+        path:'map',
+        query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:1}
+      })
+    },
+    //查看电子围栏
+    lookFence(row){
+      if (row.longitudeLatitude==null||row.longitudeLatitude==undefined||row.longitudeLatitude==''){
+        this.$modal.msgError("请先设置电子围栏");
+        return;
+      }
+      this.$router.push({
+        path:'map',
+        query:{id:row.id,longitudeLatitude:row.longitudeLatitude,open:0}
+      })
+      alert("位置："+row.longitudeLatitude)
+    },
+    handleDelete(row){
+      this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function () {
+        return delDept(row.deptId);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    },
+
+// 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        status: "0"
+      };
+      this.resetForm("form");
+    },
+
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.open = true;
+      this.title = "添加围栏";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      findElectronicByid(row.id).then(response => {
+        console.log(response)
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改围栏";
+      });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('vehicles/fence/export', {
+        ...this.queryParams
+      }, `vehicle_fence.xlsx`)
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != undefined) {
+            updfence(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addfence(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 查询围栏列表 */
+    getList() {
+      this.loading=true;
+      listFence(this.queryParams).then(res => {
+        console.log(res)
+       this.fenceList = res.data;
+        this.loading=false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+  }
+};
+
+
+</script>

src/views/fence/map.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div id="container"></div>
+    <div class="input-card" style="width: 120px">
+      <button class="btn" @click="returnlist" style="margin-bottom: 5px">返回电子围栏</button>
+      <div v-show="open==1">
+        <button class="btn" @click="startEditing" style="margin-bottom: 5px">开始绘制围栏</button>
+        <button class="btn" @click="endEditing" style="margin-bottom: 5px">保存围栏</button>
+        <button class="btn" @click="createPolygon" style="margin-bottom: 5px">多边形绘制</button>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import {setFenceWay} from "@/api/fence/fence";
+
+export default {
+  name: 'AmapPolygonEditor',
+  data() {
+    return {
+      map: null,
+      //展示操作
+      open: 0,
+      fenceWay: {
+        id: null,
+        longitudeLatitude: '',
+      },
+      polygonEcho: null,
+      polygon1: null,
+      polygon2: null,
+      //回显围栏位置
+      pathEcho: null,
+      polyEditor: null,
+    };
+  },
+  mounted() {
+    this.initMap();
+  },
+  created() {
+    this.fenceWay.id = this.$route.query.id;
+    this.open = this.$route.query.open;
+  },
+  methods: {
+
+    //初始化地图
+    initMap() {
+      this.pathEcho = this.$route.query.longitudeLatitude;
+      console.log(this.pathEcho);
+      // 初始化地图
+      this.map = new AMap.Map('container', {
+        center: [116.471354, 39.994257],
+        zoom: 16.8,
+      });
+
+      //  创建多边形
+      //   const path1 = [[116.475334, 39.997534], [116.476627, 39.998315], [116.478603, 39.99879], [116.478529, 40.000296], [116.475082, 40.000151], [116.473421, 39.998717]];
+      //   const path2 = [[116.474595, 40.001321], [116.473526, 39.999865], [116.476284, 40.000917]];
+      //
+      //   this.polygon1 = new AMap.Polygon({
+      //     path: path1
+      //   });
+      //   this.polygon2 = new AMap.Polygon({
+      //     path: path2
+      //   });
+
+      if (this.pathEcho != null && this.pathEcho != undefined) {
+        // 将字符串按分号分割
+        const pointPairs = this.pathEcho.split(';');
+        const points = [];
+
+        for (const pair of pointPairs) {
+          // 去除空格
+          const trimmedPair = pair.trim();
+          if (trimmedPair) {
+            // 将每一对经纬度按逗号分割
+            const [lng, lat] = trimmedPair.split(',').map(Number);
+            points.push([lng, lat]);
+
+          }
+        }
+        this.polygon1 = new AMap.Polygon({
+          //points 是经纬度数组
+          path: points
+        });
+
+        this.map.add([this.polygon1]);
+
+        this.polygon1.on('dblclick', () => {
+          this.polyEditor.setTarget(this.polygon1);
+          this.polyEditor.open();
+        });
+      }
+
+      this.map.setFitView();
+
+      // 初始化多边形编辑器
+      this.polyEditor = new AMap.PolygonEditor(this.map);
+      //  this.polyEditor.addAdsorbPolygons([this.polygon1, this.polygon2]);
+
+      // 监听添加事件
+      this.polyEditor.on('add', (data) => {
+        // event.obj 为绘制出来的覆盖物对象
+        let path = data.obj.getPath(); // 获取多边形的路径
+        let str = "";
+        let pathArr = [];
+        for (let i = 0; i < path.length; i++) {
+          pathArr.push([path[i].getLng(), path[i].getLat()]);
+          this.fenceWay.longitudeLatitude += path[i].getLng() + "," + path[i].getLat() + ";";
+        }
+        // 这个就是绘制的点的坐标数组
+        // this.addForm.latlng = str;  // 转换为字符串
+        console.log(this.fenceWay.longitudeLatitude)
+        console.log(data);
+        const polygon = data.target;
+
+        this.polyEditor.addAdsorbPolygons(polygon);
+
+        polygon.on('dblclick', () => {
+          this.polyEditor.setTarget(polygon);
+          this.polyEditor.open();
+        });
+      });
+
+      // 双击多边形开始编辑
+      //  this.polygon1.on('dblclick', () => {
+      //    this.polyEditor.setTarget(this.polygon1);
+      //    this.polyEditor.open();
+      //  });
+      //  this.polygon2.on('dblclick', () => {
+      //    this.polyEditor.setTarget(this.polygon2);
+      //    this.polyEditor.open();
+      //  });
+    },
+
+    //返回围栏列表
+    returnlist() {
+      this.$router.push({
+        path: 'list'
+      })
+
+    },
+    createPolygon() {
+      this.polyEditor.close();
+      this.polyEditor.setTarget();
+      this.polyEditor.open();
+    },
+
+    //开始编辑
+    startEditing() {
+      this.polyEditor.open();
+    },
+    //结束编辑
+    endEditing() {
+      this.polyEditor.close();
+      console.log(this.longitudeLatitude)
+      setFenceWay(this.fenceWay).then(res => {
+        if (200 == res.code) {
+          this.$modal.msgSuccess("设置位置成功");
+          this.$router.push({
+            path: 'list'
+          })
+        }
+      })
+    }
+  }
+};
+</script>
+
+<style scoped>
+#container {
+  width: 100%;
+  height: 100vh;
+}
+
+.input-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1000;
+}
+
+.btn {
+  display: block;
+  margin-bottom: 5px;
+}
+</style>

src/views/fence/test.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="app-container">
+  <el-table
+    ref="multipleTable"
+    :data="tableData"
+    tooltip-effect="dark"
+    style="width: 100%"
+    @selection-change="handleSelectionChange">
+    <el-table-column
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      label="日期"
+      width="120">
+      <template slot-scope="scope">{{ scope.row.date }}</template>
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="姓名"
+      width="120">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="地址"
+      show-overflow-tooltip>
+    </el-table-column>
+  </el-table>
+  <div style="margin-top: 20px">
+    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
+    <el-button @click="toggleSelection()">取消选择</el-button>
+  </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [{
+        date: '2016-05-03',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-02',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-04',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-01',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-08',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-06',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2016-05-07',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }],
+      multipleSelection: []
+    }
+  },
+
+  methods: {
+    toggleSelection(rows) {
+      if (rows) {
+        rows.forEach(row => {
+          console.log(row)
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+      } else {
+        this.$refs.multipleTable.clearSelection();
+      }
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    }
+  }
+}
+</script>