src/api/system/device.js

@@ -105,3 +105,22 @@ export function addFence(data) {
     data: data
   })
 }
+export function getFenceList(data) {
+  return request({
+    url: `/system/electronic/fence/list/device/${data}`,
+    method: 'get',
+  })
+}
+export function deleteFence(data) {
+  return request({
+    url: `/system/electronic/fence/${data}`,
+    method: 'delete',
+  })
+}
+export function updateFence(data) {
+  return request({
+    url: '/system/electronic/fence/edit',
+    method: 'put',
+    data: data
+  })
+}

src/views/system/device/index.vue

@@ -558,28 +558,27 @@
       <pagination v-show="logTotal > 0" :total="logTotal" :page.sync="logQuery.pageNum" :limit.sync="logQuery.pageSize"
         @pagination="getDeviceLog" />
     </el-dialog>
-    <el-dialog title="电子围栏" :visible.sync="fenceOpen" width="1200px" :before-close="beforeClose" destroy-on-close :close-on-click-modal="false">
+    <el-dialog title="电子围栏" :visible.sync="fenceOpen" width="1200px" :before-close="beforeClose" destroy-on-close
+      :close-on-click-modal="false">
       <div id="map">
         <el-row class="map-tool">
           <el-select size="mini" v-model="fenceName" @change="selectFence">
-            <el-option v-for="(item, index) in fenceList" :key="index" :label="item.fenceName"
-              :value="item.fenceName"></el-option>
+            <el-option v-for="item in fenceList" :key="item.name" :label="item.name" :value="item.name"></el-option>
           </el-select>
           <el-button size="mini" type="primary" style="margin-left: 10px;" @click="editAdd">新增</el-button>
           <el-button size="mini" type="warning" @click="editUpdate">修改</el-button>
-          <el-button size="mini" type="danger">删除</el-button>
+          <el-button size="mini" type="danger" @click="editDelete">删除</el-button>
         </el-row>
         <el-form class="update-tool" :model="fenceInfo" label-width="70px" size="mini" v-show="fenceEdit">
           <el-form-item label="围栏名称">
-            <el-input size="mini" v-model="fenceInfo.fenceName"></el-input>
+            <el-input size="mini" v-model="fenceInfo.name"></el-input>
           </el-form-item>
           <el-form-item label="开始时间">
-            <el-time-picker v-model="fenceInfo.start_time" value-format="HH:mm" placeholder="选择日期时间">
+            <el-time-picker v-model="fenceInfo.start_time" value-format="timestamp" placeholder="选择日期时间">
             </el-time-picker>
           </el-form-item>
           <el-form-item label="结束时间">
-            <el-time-picker v-model="fenceInfo.end_time" :picker-options="{ minTime: fenceInfo.startTime }"
-              value-format="HH:mm" placeholder="选择日期时间">
+            <el-time-picker v-model="fenceInfo.end_time" value-format="timestamp" placeholder="选择日期时间">
             </el-time-picker>
           </el-form-item>
           <el-form-item label="围栏类型">
@@ -654,7 +653,10 @@ import {
   getRollRate,
   getDeviceLog,
   setDeviceInterval,
-  addFence
+  addFence,
+  getFenceList,
+  deleteFence,
+  updateFence
 }
   from "@/api/system/device";
 import { listProfile, getProfile } from "@/api/system/profile";
@@ -813,7 +815,8 @@ export default {
       fenceData: {},
       fenceList: [],
       fenceName: null,
-      add_flag: true
+      add_flag: true,
+      checkedFence: null
     };
   },
   created() {
@@ -840,9 +843,6 @@ export default {
     this.getDicts('sys_user_type').then(res => {
       this.clientType = res.data
     })
-    this.getDicts('sys_fence_type').then(res => {
-      this.fenceType = res.data
-    })
   },
   watch: {
     'form.grantType': {
@@ -1130,6 +1130,7 @@ export default {
       this.echartsQuery.pageSize = 10
       this.setEcharts(e)
     },
+    // 创建表格
     setEcharts(tab) {
       let mychart = echarts.init(document.querySelector('.echart'))
       if (tab == 0) {
@@ -1351,30 +1352,57 @@ export default {
         })
       }
     },
+    // 提交围栏
     subFence() {
       this.fenceEditor.close()
       if (this.add_flag) {
-        this.fenceInfo.deviceid = this.setUser.deviceId
+        this.fenceInfo.deviceId = this.setUser.id
         console.log(this.fenceInfo);
-        // addFence(this.fenceInfo).then(res => {
-
-        // })
-        this.fenceList.push(this.fenceInfo)
+        addFence(this.fenceInfo).then(res => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess('添加成功')
+            this.getFence()
+          }
+        })
       } else {
-        this.fenceList.map(item => {
-          if (item.fenceName == this.fenceInfo.fenceName) {
-            item = this.fenceInfo
+        let data = {
+          name: this.fenceInfo.name,
+          type: this.fenceInfo.type,
+          start_time: this.fenceInfo.start_time,
+          end_time: this.fenceInfo.end_time,
+          deviceId: this.fenceInfo.deviceId,
+          id: this.fenceInfo.id,
+          state: this.fenceInfo.state,
+          geofence_type: this.fenceInfo.geofence_type,
+        }
+        if (this.fenceInfo.geofence_type == 0) {
+          data.center = this.fenceInfo.center,
+            data.radius = this.fenceInfo.radius
+        } else if (this.fenceInfo.geofence_type == 1) {
+          data.points = this.fenceInfo.points
+        }
+        console.log(data);
+        updateFence(data).then(res => {
+          if (res.code == 200) {
+            this.$modal.msgSuccess('修改成功')
+            this.getFence()
           }
         })
       }
       this.fenceEdit = false
     },
+    // 切换围栏按钮
     switchFenceType(e) {
-      if (e == 'circle') {
-        if (this.fence) {
-          this.fenceEditor.close()
+      if (this.fence) {
           this.map.remove(this.fence)
-        }
+          this.fence = null
+      }
+      if (this.fenceEditor) {
+        this.fenceEditor.close()
+        this.fenceEditor = null
+      }
+      if (e == 'circle') {
+        delete this.fenceInfo.points
         this.fenceBtn = '圆形'
         this.fenceInfo.geofence_type = 0
         let radius = 500
@@ -1397,7 +1425,7 @@ export default {
         this.fenceEditor.open()
         this.fenceEditor.on('end', (e) => {
           this.fenceInfo.radius = radius
-          this.fenceInfo.lnglat = lnglat
+          this.fenceInfo.center = `${lnglat.lng},${lnglat.lat}`
         })
         this.fenceEditor.on('adjust', (e) => {
           radius = e.radius
@@ -1406,10 +1434,6 @@ export default {
           lnglat = e.lnglat
         })
       } else if (e == 'rect') {
-        if (this.fence) {
-          this.fenceEditor.close()
-          this.map.remove(this.fence)
-        }
         this.fenceBtn = '矩形'
         let center = this.map.getCenter()
         var southWest = new AMap.LngLat(center.lng + 0.01, center.lat + 0.005)
@@ -1431,11 +1455,10 @@ export default {
         this.fenceEditor = new AMap.RectangleEditor(this.map, this.fence)
         this.fenceEditor.open()
       } else if (e == 'polygon') {
-        if (this.fence) {
-          this.fenceEditor.close()
-          this.map.remove(this.fence)
-        }
         this.fenceBtn = '多边形'
+        this.fenceInfo.geofence_type = 1
+        delete this.fenceInfo.radius
+        delete this.fenceInfo.center
         let center = this.map.getCenter()
         let path = [
           [center.lng - 0.01, center.lat + 0.005],
@@ -1458,70 +1481,182 @@ export default {
         this.fenceEditor = new AMap.PolygonEditor(this.map, this.fence);
         this.fenceEditor.open();
         this.fenceEditor.on('end', (e) => {
-          this.fenceInfo.path = e.target._opts.path
+          let arr = []
+          e.target._opts.path.map(item => {
+            arr.push(item.join(','))
+          })
+          this.fenceInfo.points = arr.join(';')
         })
       }
     },
+    // 围栏新增
     editAdd() {
-      this.fenceEdit = true
-      this.add_flag = true
-      if (this.fence == null) {
-        this.switchFenceType('circle')
+      if (this.fenceList.length < 3) {
+        this.fenceEdit = true
+        this.add_flag = true
+        // this.fenceInfo.name = null
+        // this.fenceInfo.start_time = null
+        // this.fenceInfo.end_time = null
+        // this.fenceInfo.type = null
+        // this.fenceInfo.state = null
+        if (this.fence) {
+          this.map.remove(this.fence)
+          this.fence = null
+        }
+        if (this.fenceEditor) {
+          this.fenceEditor.close()
+          this.fenceEditor = null
+        }
+        if (this.fenceName) {
+          this.fenceName = null
+        }
+        if (this.fence == null) {
+          this.switchFenceType('circle')
+        }
+      } else {
+        this.$modal.msgError('最多只能创建三个围栏')
       }
     },
+    // 取消绘制
     editCancel() {
       this.fenceEdit = false
       this.map.remove(this.fence)
+      this.fenceEditor.close()
       this.fence = null
       this.fenceEditor = null
     },
+    // 修改围栏
     editUpdate() {
-      this.add_flag = false
-      this.fenceEdit = true
       if (this.fence) {
-        if (this.fence._opts.radius) {
-        this.fenceEditor = new AMap.CircleEditor(this.map, this.fence)
-        let radius = this.fenceInfo.radius
-        let lnglat = this.fenceInfo.lnglat
-        this.fenceEditor.open()
-        this.fenceEditor.on('end', (e) => {
-          this.fenceInfo.radius = radius
-          this.fenceInfo.lnglat = lnglat
-        })
-        this.fenceEditor.on('adjust', (e) => {
-          radius = e.radius
-        })
-        this.fenceEditor.on('move', (e) => {
-          lnglat = e.lnglat
-        })
+        this.add_flag = false
+        this.fenceEdit = true
+        if (this.fenceEditor) {
+          this.fenceEditor.close()
+        }
+        if (this.fenceInfo.geofence_type == 0) {
+          this.fenceBtn = '圆形'
+          this.fenceEditor = new AMap.CircleEditor(this.map, this.fence)
+          let radius = this.fenceInfo.radius
+          let lnglat = new AMap.LngLat(this.fenceInfo.center.split(',')[0], this.fenceInfo.center.split(',')[1])
+          this.fenceEditor.open()
+          this.fenceEditor.on('end', (e) => {
+            this.fenceInfo.radius = radius
+            this.fenceInfo.center = `${lnglat.lng},${lnglat.lat}`
+          })
+          this.fenceEditor.on('adjust', (e) => {
+            radius = e.radius
+          })
+          this.fenceEditor.on('move', (e) => {
+            lnglat = e.lnglat
+          })
+        } else if (this.fenceInfo.geofence_type == 1) {
+          this.fenceBtn = '多边形'
+          this.fence.setOptions({ draggable: true })
+          this.fenceEditor = new AMap.PolygonEditor(this.map, this.fence);
+          this.fenceEditor.open();
+          this.fenceEditor.on('end', (e) => {
+            let arr = []
+            e.target._opts.path.map(item => {
+              arr.push(item.join(','))
+            })
+            this.fenceInfo.points = arr.join(';')
+          })
         }
       }
     },
+    // 删除围栏
+    editDelete() {
+      deleteFence(this.fenceInfo.id).then(res => {
+        if (res.code == 200) {
+          this.$modal.msgSuccess('删除成功')
+          this.getFence()
+          if (this.fence) {
+            this.map.remove(this.fence)
+            this.fence = null
+          }
+          if (this.fenceEditor) {
+            this.fenceEditor.close()
+            this.fenceEditor = null
+          }
+        }
+      })
+    },
+    // 选择围栏
     selectFence(e) {
       this.fenceList.map(item => {
-        if (item.fenceName == e) {
+        if (item.name == e) {
           if (this.fence) {
             this.map.remove(this.fence)
           }
-          if (item.type == 'circle') {
-            this.fence = new AMap.Circle({
-              center: item.lnglat,
-              radius: item.radius, //半径
-              borderWeight: 3,
-              fillOpacity: 0.4,
-              strokeStyle: 'dashed',
-              strokeDasharray: [10, 10],
-              // 线样式还支持 'dashed'
-              fillColor: '#1791fc',
-              zIndex: 50,
-            })
-            this.map.add(this.fence);
-            this.map.setCenter(item.lnglat)
-            this.map.setFitView([this.fence])
+          if (this.fenceEditor) {
+            this.fenceEditor.close()
           }
+          this.fenceInfo = item
+          this.getFenceInfo(item.key, item.sid, item.gfid).then(res => {
+            if (res.data.results[0].shape.radius) {
+              this.fenceInfo.center = res.data.results[0].shape.center
+              this.fenceInfo.radius = res.data.results[0].shape.radius
+              this.fenceInfo.geofence_type = 0
+              let lnglat = new AMap.LngLat(res.data.results[0].shape.center.split(',')[0], res.data.results[0].shape.center.split(',')[1])
+              this.fence = new AMap.Circle({
+                center: lnglat,
+                radius: res.data.results[0].shape.radius, //半径
+                borderWeight: 3,
+                fillOpacity: 0.4,
+                strokeStyle: 'dashed',
+                strokeDasharray: [10, 10],
+                // 线样式还支持 'dashed'
+                fillColor: '#1791fc',
+                zIndex: 50,
+              })
+              this.map.add(this.fence);
+              this.map.setCenter(lnglat)
+              this.map.setFitView([this.fence])
+            } else if (res.data.results[0].shape.points) {
+              let arr = res.data.results[0].shape.points.split(';')
+              let path = []
+              arr.map(item => {
+                path.push(item.split(','))
+              })
+              console.log(path);
+              this.fenceInfo.points = res.data.results[0].shape.points
+              this.fenceInfo.geofence_type = 1
+              this.fence = new AMap.Polygon({
+                path: path,
+                strokeColor: "#FF33FF",
+                strokeWeight: 6,
+                strokeOpacity: 0.2,
+                fillOpacity: 0.4,
+                fillColor: '#1791fc',
+                zIndex: 50,
+                bubble: true,
+                // draggable: true,
+              })
+              this.map.add(this.fence);
+              this.map.setFitView([this.fence])
+            }
+          })
         }
       })
     },
+    // 获取围栏信息
+    getFenceInfo(key, sid, gfid) {
+      return new Promise((resolve, reject) => {
+        axios({
+          url: 'https://tsapi.amap.com/v1/track/geofence/list',
+          method: 'GET',
+          params: {
+            key: key,
+            sid: sid,
+            gfids: gfid,
+            outputshape: 1
+          }
+        }).then((res) => {
+          resolve(res.data)
+        })
+      })
+    },
+    // 创建地图
     createMap() {
       window._AMapSecurityConfig = {
         securityJsCode: 'e91e92cbd76e89c48f3ff1d6180f288c'
@@ -1559,10 +1694,23 @@ export default {
               } else {
                 this.$modal.msgError('获取定位失败')
               }
+              this.getFence()
             });
           })
       })
     },
+    getFence() {
+      getFenceList(this.setUser.id).then(res => {
+        console.log('list', res);
+        if (res.code == 200) {
+          res.rows.map(item => {
+            item.start_time = item.startTime
+            item.end_time = item.endTime
+          })
+          this.fenceList = res.rows
+        }
+      })
+    },
     getUserList() {
       this.loading = true;
       listProfile(this.userForm).then(response => {
@@ -1694,6 +1842,8 @@ export default {
       this.grantType = grantType
       let { data: deviceModel } = await this.getDicts('sys_device_type')
       this.deviceModel = deviceModel
+      let { data: fenceType } = await this.getDicts('sys_fence_type')
+      this.fenceType = fenceType
       await listDevice(this.queryParams).then(response => {
         this.deviceList = response.rows;
         this.deviceList.map(item => {