From 9b25112e7fba15150620b7a7491fd69d0098e5a4 Mon Sep 17 00:00:00 2001
From: 86191 <2160251938@qq.com>
Date: Mon, 23 Sep 2024 19:37:18 +0800
Subject: [PATCH] =?UTF-8?q?fix():=E9=87=8D=E6=9E=84=E7=94=B5=E5=AD=90?=
 =?UTF-8?q?=E5=9B=B4=E6=A0=8F=E4=BB=A5=E5=8F=8A=E5=9B=B4=E6=A0=8F=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                 |  14 +
 src/api/fence/fence.js            |  95 ++++--
 src/api/fence/group.js            |  33 +-
 src/components/SelectLocation.vue |  97 ------
 src/views/fence/group.vue         | 498 ++++++++++++++++++++++++++++++
 src/views/fence/list.vue          | 337 ++++++++++++++++++++
 src/views/fence/map.vue           | 188 +++++++++++
 src/views/fence/test.vue          |  89 ++++++
 8 files changed, 1220 insertions(+), 131 deletions(-)
 create mode 100644 src/views/fence/group.vue
 create mode 100644 src/views/fence/list.vue
 create mode 100644 src/views/fence/map.vue
 create mode 100644 src/views/fence/test.vue

diff --git a/public/index.html b/public/index.html
index 99f7ed8..7979f9f 100644
--- a/public/index.html
+++ b/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>
diff --git a/src/api/fence/fence.js b/src/api/fence/fence.js
index 12cc4dd..47eb96c 100644
--- a/src/api/fence/fence.js
+++ b/src/api/fence/fence.js
@@ -1,44 +1,79 @@
 import request from '@/utils/request'
-
 // 查询电子围栏列表
-export function listFence(query) {
+export function listFence(data) {
   return request({
-    url: '/fence/fence/list',
-    method: 'get',
-    params: query
-  })
-}
-
-// 查询电子围栏详细
-export function getFence(fenceId) {
-  return request({
-    url: '/fence/fence/' + fenceId,
-    method: 'get'
-  })
-}
-
-// 新增电子围栏
-export function addFence(data) {
-  return request({
-    url: '/fence/fence',
+    url: '/fence/fence/fenceselectList',
     method: 'post',
-    data: data
+    data
   })
 }
 
-// 修改电子围栏
-export function updateFence(data) {
+// 查询电子围栏选择列表
+export function fenceArray(data) {
   return request({
-    url: '/fence/fence',
-    method: 'put',
-    data: data
+    url: '/fence/fence/fenceArray',
+    method: 'post',
+    data
   })
 }
 
-// 删除电子围栏
-export function delFence(fenceId) {
+//添加
+export function addfence(data) {
   return request({
-    url: '/fence/fence/' + fenceId,
-    method: 'delete'
+    url: '/fence/fence/add',
+    method: 'post',
+    data
+  })
+}
+//修改
+export function updfence(data) {
+  return request({
+    url: `/fence/fence/upd/${data.id}`,
+    method: 'post',
+    data
+  })
+}
+
+//删除
+export function delElectronById(id) {
+  return request({
+    url: '/fence/fence/delElectronById/'+id,
+    method: 'post',
+    data
+  })
+}
+
+//根据id设置围栏
+export function setFenceWay(data) {
+  return request({
+    url: '/fence/fence/setFenceWay',
+    method: 'post',
+    data
+  })
+}
+
+
+//开启围栏
+export function openFence(id) {
+  return request({
+    url: '/fence/fence/open/'+id,
+    method: 'post',
+    data
+  })
+}
+//回显
+export function findElectronicByid(id) {
+  return request({
+    url: '/fence/fence/findElectronicByid/'+id,
+    method: 'post',
+  })
+}
+
+//关闭围栏
+export function closeFence(id) {
+  return request({
+    url: '/fence/fence/close/'+id,
+    method: 'post',
+    data
   })
 }
diff --git a/src/api/fence/group.js b/src/api/fence/group.js
index 486c1e5..1e519e1 100644
--- a/src/api/fence/group.js
+++ b/src/api/fence/group.js
@@ -1,9 +1,34 @@
 import request from '@/utils/request'
 
-//查询围栏组
-export function selectGroupList() {
+// 查询围栏组列表
+export function selectGroupList(data) {
   return request({
-    url: '/fence/tbGroup/selectTbGroupList',
-    method: 'get'
+    url: '/fence/group/selectGroupList',
+    method: 'post',
+    data
+  })
+}
+
+//添加
+export function addGroup(data) {
+  return request({
+    url: '/fence/group/addGroup',
+    method: 'post',
+    data
+  })
+}
+//修改
+export function updGroup(data) {
+  return request({
+    url: `/fence/group/updGroup/${data.id}`,
+    method: 'post',
+    data
+  })
+}
+//添加
+export function findGroupByid(id) {
+  return request({
+    url: '/fence/group/findGroupByid/'+id,
+    method: 'post',
   })
 }
diff --git a/src/components/SelectLocation.vue b/src/components/SelectLocation.vue
index 6a9892c..0f3e6d1 100644
--- a/src/components/SelectLocation.vue
+++ b/src/components/SelectLocation.vue
@@ -1,84 +1,3 @@
-<!--<template>-->
-<!--  <div class="location-container">-->
-<!--    <div id="map"></div>-->
-<!--    <el-button @click="openPolyEditor">绘制</el-button>-->
-<!--    <el-button @click="closePolyEditor">保存围栏</el-button>-->
-<!--    <el-button type="primary" @click="confirmSelection">确认选择</el-button>-->
-<!--  </div>-->
-<!--</template>-->
-
-<!--<script>-->
-<!--export default {-->
-<!--  name:'SelectLocation',-->
-<!--  data() {-->
-<!--    return {-->
-<!--      selectedLocation:null,// 存储选中的经纬度信息-->
-<!--      map:null,-->
-<!--      polygonEditor:null,-->
-<!--      polygon:null,-->
-<!--    };-->
-<!--  },-->
-<!--  mounted() {-->
-<!--    this.initMap();-->
-<!--  },-->
-<!--  methods:{-->
-<!--    initMap() {-->
-<!--      // 确保页面加载完成后初始化地图-->
-<!--      this.$nextTick(() => {-->
-<!--        this.map = new AMap.Map('map',{-->
-<!--          resizeEnable:true,-->
-<!--          center:[116.397428,39.90923],// 默认中心点-->
-<!--          zoom:13,-->
-<!--        });-->
-<!--      });-->
-<!--    },-->
-<!--    openPolyEditor() {-->
-<!--      if (!this.polygon) {-->
-<!--        this.polygon = new AMap.Polygon({-->
-<!--          map:this.map,-->
-<!--          path:[],// 初始为空，可以让用户自己绘制-->
-<!--          strokeColor:"#FF33FF",// 线颜色-->
-<!--          strokeOpacity:0.8,// 线透明度-->
-<!--          strokeWeight:2,// 线宽-->
-<!--          fillColor:"#1791fc",// 填充颜色-->
-<!--          fillOpacity:0.35,// 填充透明度-->
-<!--        });-->
-
-<!--        this.map.add(this.polygon);-->
-<!--      }-->
-
-<!--      this.map.plugin(["AMap.PolyEditor"],() => {-->
-<!--        this.polygonEditor = new AMap.PolyEditor(this.map,this.polygon);-->
-<!--        this.polygonEditor.open();-->
-<!--      });-->
-<!--    },-->
-<!--    closePolyEditor() {-->
-<!--      if (this.polygonEditor) {-->
-<!--        this.polygonEditor.close();-->
-<!--        const path = this.polygon.getPath();-->
-<!--        this.selectedLocation = path.map(point => ({-->
-<!--          lng:point.lng,-->
-<!--          lat:point.lat,-->
-<!--        }));-->
-<!--      }-->
-<!--    },-->
-<!--    confirmSelection() {-->
-<!--      this.$emit('locationSelected',this.selectedLocation);-->
-<!--    },-->
-<!--  },-->
-<!--};-->
-<!--</script>-->
-
-<!--<style scoped>-->
-<!--#map {-->
-<!--  width:100%;-->
-<!--  height:400px;-->
-<!--}-->
-<!--</style>-->
-
-
-
-
 <template>
   <!-- 控制按钮组 -->
   <div class="main">
@@ -92,7 +11,6 @@
       <div class="ebox">
         <el-button-group>
           <el-button type="info" icon="el-icon-circle-plus-outline" @click="drawRectangle">绘制围栏</el-button>
-          <el-button type="success" icon="el-icon-success" @click="saveRectangle">保存围栏</el-button>
         </el-button-group>
       </div>
     </section>
@@ -220,21 +138,6 @@ export default {
     },
 
 
-    //保存围栏
-    saveRectangle() {
-
-      this.carFence.fenceCreate = new Date().toLocaleString()
-      var s = JSON.stringify(this.paths)
-      this.carFence.fenceText=s
-      console.log(this.carFence.fenceText)
-      // 取消编辑状态
-      this.polyEditors.forEach(item => { item.close(); });
-      this.polyEditorsBefore.forEach(item => { item.close(); });
-      this.dialogFormVisible = true
-      // 保存  console.log(this.paths,this.path)=>成功（重新刷新页面）
-      // ...
-      this.handleLocationSelected()
-    },
     //获取后台数据
     init() {
       const that = this
diff --git a/src/views/fence/group.vue b/src/views/fence/group.vue
new file mode 100644
index 0000000..67f8d52
--- /dev/null
+++ b/src/views/fence/group.vue
@@ -0,0 +1,498 @@
+<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>
+
+      <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>
+          <span style="margin-left: 10px" v-show="scope.row.priority==11">十一级围栏组</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">
+            <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 = "添加围栏组";
+    },
+    /** 修改按钮操作 */
+    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>
diff --git a/src/views/fence/list.vue b/src/views/fence/list.vue
new file mode 100644
index 0000000..17701f1
--- /dev/null
+++ b/src/views/fence/list.vue
@@ -0,0 +1,337 @@
+<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="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}
+      })
+    },
+    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/sysCorpuscleFence/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>
diff --git a/src/views/fence/map.vue b/src/views/fence/map.vue
new file mode 100644
index 0000000..e4da7b4
--- /dev/null
+++ b/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>
diff --git a/src/views/fence/test.vue b/src/views/fence/test.vue
new file mode 100644
index 0000000..081929f
--- /dev/null
+++ b/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>