此处将新增和修改写在了一个el-dialog中。该电子围栏主要的步骤如下：
1.不选择围栏类型时，只显示地图
2.选择围栏后，（此处以圆形为例）触发鹰眼和比例尺控件
3.使用AMap.MouseTool 画圆，获取半径和圆心
4.高德地图中AMap.MouseTool只支持画圆，但是不能修改，在这里我处理的方式是，使用AMap.MouseTool获取半径和圆心，清除图形。再使用AMap.CircleEditor构建圆进入编辑状态。
5.常规处理数据，将后端所需数据传过去
6.回显问题，我这里是自己定义了一个get方法，思路跟之前较为接近，先获取圆的数据，然后使用AMap.CircleEditor
其他几种思路相似，行政区域使用的AMap.DistrictSearch。
行政区域三级下拉组件可以去看看我的另一篇文章
(5条消息) 省市区（默认二级）三级下拉选择框组件_敲代码的小辣条的博客-CSDN博客
代码如下：
<template>
<el-dialog
:append-to-body="true"
:visible.sync="dialog"
:title="isAdd ? '新增' : '编辑'"
:close-on-click-modal="false"
:before-close="resetForm"
width="1200px"
v-loading="dialogLoading"
>
<div class="container">
<div class="sidebar">
<el-form
ref="ruleForm"
:model="form"
:rules="rules"
size="small"
label-width="210px"
:before-close="handleClose"
>
<el-form-item label="电子围栏名称：" prop="name">
<el-input
v-model.trim="form.name"
placeholder=""
style="width: 240px;"
/>
</el-form-item>
<el-form-item label="所属机构：" prop="deptId">
<treeselect
v-model="form.deptId"
:multiple="false"
:clearable="false"
:options="deptOption"
:normalizer="normalizer"
placeholder=""
style="width: 240px;"
/>
</el-form-item>
<el-form-item label="启用状态：" prop="status">
<el-select
v-model="form.status"
placeholder=""
style="width: 240px;"
>
<el-option
v-for="item in supThis.dict['enableStatus']"
:key="item.id"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>
<el-form-item label="使用场景：" prop="useCase">
<el-select
v-model="form.useCase"
placeholder=""
style="width: 240px;"
>
<el-option
v-for="item in supThis.dict['useCase']"
:key="item.id"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>
<div v-if="form.useCase === '1' || form.useCase === '2'">
<el-form-item label="持续时长（秒）：" prop="durationTime">
<el-input
v-model.trim="form.durationTime"
placeholder=""
style="width: 240px;"
/>
</el-form-item>
</div>
<div v-if="form.useCase === '4'">
<el-form-item label="物流追踪持续时长（天）：" prop="durationTime">
<el-input
v-model.trim="form.durationTime"
placeholder=""
style="width: 240px;"
/>
</el-form-item>
</div>
<el-form-item label="围栏类型：" prop="fenceType">
<el-select
v-model="form.fenceType"
placeholder=""
style="width: 240px;"
@change="selChange"
>
<el-option
v-for="item in supThis.dict['fenceType']"
:key="item.id"
:label="item.dictValue"
:value="item.dictKey"
/>
</el-select>
</el-form-item>
<div v-if="fenceTypeShow">
<el-form-item label="行政区域：" prop="areaList">
<area-select
v-model="form.areaList"
placeholder=""
style="width: 240px;"
type="three"
@change="fenceSelChange"
ref="selArea"
/>
</el-form-item>
</div>
<el-form-item label="围栏描述：">
<el-input
v-model.trim="form.description"
placeholder=""
style="width: 240px;"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="loading" type="primary" @click="doSubmit"
>提交</el-button
>
<el-button @click="removeFence" class="btn" type="primary"
>清除围栏</el-button
>
<el-button @click="cancel">取消</el-button>
</div>
<div>
<Button @click="addFence" v-show="false">添加围栏</Button>
<Button @click="removeFence" v-show="false">清除围栏</Button>
</div>
</div>
<div class="map">
<el-amap
ref="map"
class="amap-box"
:zoom="12"
:plugin="mapInfo.plugin"
:events="mapInfo.events"
:amap-manager="amapManager"
v-show="isShow"
/>
</div>
</el-dialog>
</template>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
import { add, update, getDetail } from '@/api/gb6/fence/config'
import VueAMap from 'vue-amap'
import { number } from 'echarts'
let amapManager = new VueAMap.AMapManager()
export default {
inject: ['reload'],
name: 'Form',
props: {
isAdd: {
type: Boolean,
required: true
},
supThis: {
type: Object,
default: null
}
},
data() {
return {
isEditFlag: false,
isShow: false,
dialogLoading: false,
id: null,
dialog: false,
loading: false,
radius: 0,
form: {
name: null,
deptId: null,
status: null,
useCase: null,
durationTime: null,
deviationLength: null,
fenceType: null,
areaList: [],
fenceData: {},
fenceJson: {}
},
fenceTypeShow: false,
amapManager,
zoom: 12,
center: [106.5572085, 29.6154994],
events: {
init(o) {
this.mapInfo.map = o
}
},
listData: {},
searchOption: {
city: '重庆',
citylimit: false
},
fenceForm: {
coordinate: [],
fenceData: {}
},
type: null,
mouseTool: null,
overlays: [],
rules: {
name: [
{ required: true, message: '请输入电子围栏名称', trigger: 'blur' }
],
deptId: [
{ required: true, message: '请选择所属机构', trigger: 'change' }
],
status: [
{ required: true, message: '请选择启用状态', trigger: 'change' }
],
useCase: [
{ required: true, message: '请选择使用场景', trigger: 'change' }
],
durationTime: [
{ required: true, message: '请输入持续时长', trigger: 'blur' },
{ pattern: /^\d+$/, message: '持续时长必须为数字', trigger: 'blur' }
],
deviationLength: [
{ required: true, message: '请输入偏差范围', trigger: 'blur' },
{ pattern: /^\d+$/, message: '偏差范围必须为数字', trigger: 'blur' }
],
fenceType: [
{ required: true, message: '请选择围栏类型', trigger: 'change' }
],
areaList: [
{ required: true, message: '请选择行政区域', trigger: 'blur' }
]
},
deptOption: [],
point: [],
mapInfo: {
map: null,
navgtr: null, // 巡航器
pathSimplifierIns: null, // 巡航轨迹路线
plugin: [
{ pName: 'OverView', isOpen: true },
'Scale',
'ToolBar',
'CircleEditor'
],
events: {
init: o => {
this.mapInfo.map = o
},
click(e) {
this.point = [e.lnglat.getLng(), e.lnglat.getLat()]
}
}
}
}
},
created() {
if (!AMap.User) {
location.reload()
}
},
mounted() {
setTimeout(() => {
this.isShow = true
}, 500)
},
methods: {
returnPath() {},
fenceSelChange(val, area) {
let map = amapManager.getMap()
map.clearMap()
map.plugin('AMap.DistrictSearch', function() {
var district = new AMap.DistrictSearch({
extensions: 'all',
level: 'district'
})
district.search(area, function(status, result) {
let bounds = result.districtList[0].boundaries
let polygons = []
if (bounds) {
for (var i = 0, l = bounds.length; i < l; i++) {
let polygon = new AMap.Polygon({
map: map,
strokeWeight: 1,
path: bounds[i],
fillOpacity: 0.7,
fillColor: '#7889d3',
strokeColor: '#CC66CC'
})
polygons.push(polygon)
}
map.setFitView()
}
})
})
},
selChange(type) {
let map = amapManager.getMap()
map.clearMap()
this.$nextTick(() => {
map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], function() {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
map.addControl(new AMap.OverView({ isOpen: true }))
})
})
this.removeFence()
this.form.fenceType = type
if (type === '1') {
this.fenceTypeShow = false
this.addFence('circle')
} else if (type === '2') {
this.fenceTypeShow = false
this.addFence('rectangle')
} else if (type === '3') {
this.fenceTypeShow = false
this.addFence('polygon')
} else if (type === '4') {
this.fenceTypeShow = true
}
},
addFence(type) {
let fenceData = {}
this.type = type
let _this = this
let map = amapManager.getMap()
if (this.fenceForm.coordinate.length > 0) {
this.$Message.error('围栏已存在!')
return
}
if (this.type) {
map.remove(this.type)
}
map.plugin(['AMap.MouseTool'], function() {
let mouseTool = new AMap.MouseTool(map)
_this.mouseTool = mouseTool
//添加事件
if (type === 'circle') {
mouseTool.circle()
AMap.event.addListener(mouseTool, 'draw', function(e) {
_this.fenceForm.coordinate = []
let path = e.obj.getPath()
path.forEach(e => {
_this.fenceForm.coordinate.push([e.getLng(), e.getLat()])
})
mouseTool.close(false)
// console.log('lujing', e.obj.getPath()) //获取路径/范围
// console.log('banjing', e.obj.getRadius()) //获取半径
_this.radius = e.obj.getRadius().toFixed(0)
// console.log('zhongxindian', e.obj.getCenter()) //获取中心点
let centerLng = e.obj.getCenter().lng
let centerLat = e.obj.getCenter().lat
_this.center = [centerLng, centerLat]
// 清除原来的圆
map.clearMap()
// 进入编辑模式
var circle = new AMap.Circle({
center: _this.center,
radius: _this.radius, //半径
borderWeight: 3,
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50
})
map.add(circle)
map.plugin(['AMap.CircleEditor'], function() {
circleEditor = new AMap.CircleEditor(map, circle)
circleEditor.open()
let newLng = ''
let newLat = ''
let newRadius = ''
let fenceData = {
CIRCLE_LONG: centerLng + '',
CIRCLE_LAT: centerLat + '',
RADIUS: _this.radius + ''
}
circleEditor.on('move', function(lnglat) {
// console.log(lnglat.lnglat.lng, lnglat.lnglat.lat) //调整后的圆心坐标
fenceData.CIRCLE_LONG = lnglat.lnglat.lng.toFixed(6) + ''
fenceData.CIRCLE_LAT = lnglat.lnglat.lat.toFixed(6) + ''
})
circleEditor.on('adjust', function(event) {
// log.info('触发事件：adjust')
// console.log(event.radius);//调整后的半径
fenceData.RADIUS = event.radius.toFixed(2) + ''
})
circleEditor.on('end', function(event) {
log.info('触发事件： end')
// event.target 即为编辑后的圆形对象
})
// fenceData={
// CIRCLE_LONG: newLng,
// CIRCLE_LAT: newLat,
// RADIUS: newRadius
// }
_this.fenceForm.fenceData = fenceData
})
// 缩放地图到合适的视野级别
map.setFitView([circle])
var circleEditor = new AMap.CircleEditor(map, circle)
})
// 矩形绘制
} else if (type === 'rectangle') {
mouseTool.rectangle()
AMap.event.addListener(mouseTool, 'draw', function(e) {
_this.fenceForm.coordinate = []
let path = e.obj.getPath()
path.forEach(e => {
_this.fenceForm.coordinate.push([e.getLng(), e.getLat()])
})
mouseTool.close(false)
fenceData = []
// console.log('lujing', e.obj.getPath()) //获取路径/范围
let fenceDataItem = {}
e.obj.getPath().forEach(item => {
fenceDataItem = {
LONG: item.lng + '',
LAT: item.lat + ''
}
fenceData.push(fenceDataItem)
})
_this.fenceForm.fenceData = fenceData
// 清除原来的矩形
map.clearMap()
// 进入编辑模式
var southWest = new AMap.LngLat(
Number(fenceData[3].LONG).toFixed(3),
Number(fenceData[3].LAT).toFixed(3)
)
var northEast = new AMap.LngLat(
Number(fenceData[1].LONG).toFixed(3),
Number(fenceData[1].LAT).toFixed(3)
)
var bounds = new AMap.Bounds(southWest, northEast)
var rectangle = new AMap.Rectangle({
bounds: bounds,
borderWeight: 3,
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50
})
map.add(rectangle)
// 缩放地图到合适的视野级别
map.plugin(['AMap.RectangleEditor'], function() {
let rectangleEditor = new AMap.RectangleEditor(map, rectangle)
rectangleEditor.open()
let newPath = []
let fenceData = [
{
LONG: '116.356',
LAT: '39.894'
},
{
LONG: '116.418',
LAT: '39.894'
},
{
LONG: '116.418',
LAT: '39.859'
},
{
LONG: '116.356',
LAT: '39.859'
}
]
let fenceDataItem = {}
rectangleEditor.on('adjust', function(event) {
log.info('触发事件：adjust')
// console.log('northeast',event.Rd.northeast);
let northeast = event.Rd.northeast
// console.log('southwest',event.Rd.southwest);
let southwest = event.Rd.southwest
fenceData[0] = {
LONG: southwest.lng.toFixed(3) + '',
LAT: northeast.lat.toFixed(3) + ''
}
fenceData[1] = {
LONG: northeast.lng.toFixed(3) + '',
LAT: northeast.lat.toFixed(3) + ''
}
fenceData[2] = {
LONG: northeast.lng.toFixed(3) + '',
LAT: southwest.lat.toFixed(3) + ''
}
fenceData[3] = {
LONG: southwest.lng.toFixed(3) + '',
LAT: southwest.lat.toFixed(3) + ''
}
_this.fenceForm.fenceData = fenceData
})
rectangleEditor.on('end', function(event) {
log.info('触发事件： end')
// event.target 即为编辑后的矩形对象
})
// newPath.forEach(item => {
// fenceDataItem={
// LONG: item.lng+'',
// LAT: item.lat+''
// }
// fenceData.push(fenceDataItem)
// });
_this.fenceForm.fenceData = fenceData
})
// 缩放地图到合适的视野级别
map.setFitView([rectangle])
})
} else if (type === 'polygon') {
let map = amapManager.getMap()
// 多边形绘制
mouseTool.polygon()
AMap.event.addListener(mouseTool, 'draw', function(e) {
_this.fenceForm.coordinate = []
let path = e.obj.getPath()
path.forEach(e => {
_this.fenceForm.coordinate.push([e.getLng(), e.getLat()])
})
mouseTool.close(false)
// console.log('lujing', e.obj.getPath()) //获取路径/范围
let fenceData = []
let fenceDataItem = {}
e.obj.getPath().forEach(item => {
fenceDataItem = {
LONG: item.lng + '',
LAT: item.lat + ''
}
fenceData.push(fenceDataItem)
})
_this.fenceForm.fenceData = fenceData
// 清除原来的圆
map.clearMap()
// 引入多边形编辑器插件
let paths = _this.fenceForm.coordinate
var polygon = new AMap.Polygon({
path: paths,
strokeColor: '#FF33FF',
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
bubble: true
})
map.add([polygon])
map.setFitView()
map.plugin(['AMap.PolyEditor'], function() {
// 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
var polyEditor = new AMap.PolyEditor(map, polygon)
// polyEditor.open()
// 开启编辑模式
polyEditor.open()
polyEditor.on('adjust', function(event) {
log.info('触发事件：adjust')
let path=event.target.w.path
let pathData={}
let data=[]
path.forEach(item=>{
for(let key in item){
if(key==='lng'){
pathData.LANG=item[key]+''
}else if(key==='lat'){
pathData.LAT=item[key]+''
}
}
data.push(pathData)
pathData={}
})
_this.fenceForm.fenceData=data
})
})
})
}
})
},
removeFence() {
this.isEditFlag = true
let map = amapManager.getMap()
map.clearMap()
this.form.fenceType = ''
this.fenceForm.coordinate = []
if (this.mouseTool) {
this.mouseTool.close(true)
}
if (this.type) {
amapManager.getMap().remove(this.type)
}
},
onSearchResult(pois) {
let latSum = 0
let lngSum = 0
if (pois.length > 0) {
pois.forEach(poi => {
let { lng, lat } = poi
lngSum += lng
latSum += lat
})
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length
}
this.center = [center.lng, center.lat]
this.zoom = 15
}
},
get() {
getDetail(this.id).then(res => {
let _this = this
this.form = res.data.data
let fenceReturnData = JSON.parse(this.form.fenceJson)
let fenceDataArr = []
for (let key in fenceReturnData) {
fenceDataArr.push(fenceReturnData[key])
}
if (this.form.fenceType === '4') {
this.fenceTypeShow = true
fenceDataArr[0] = fenceDataArr[0].slice(0, -4)
fenceDataArr[1] = fenceDataArr[1].slice(0, -2)
this.form.areaList = fenceDataArr
this.isEditFlag = true
this.fenceSelChange(fenceDataArr, fenceDataArr[2])
}
if (fenceReturnData.RADIUS) {
var circle = new AMap.Circle({
center: new AMap.LngLat(
fenceReturnData.CIRCLE_LONG,
fenceReturnData.CIRCLE_LAT
), // 圆心位置
radius: fenceReturnData.RADIUS, // 圆半径
fillColor: '#00b0ff', // 圆形填充颜色
strokeColor: '#80d8ff', // 描边颜色
strokeWeight: 1, // 描边宽度
fillOpacity: 0.3 //透明度
})
let map = amapManager.getMap()
map.add(circle)
map.plugin(['AMap.CircleEditor'], function() {
_this.isEditFlag = false
circleEditor = new AMap.CircleEditor(map, circle)
circleEditor.open()
// console.log('fenceJson', res.data.data.fenceJson)
let data = JSON.parse(res.data.data.fenceJson)
let fenceData = {
CIRCLE_LONG: data.CIRCLE_LONG,
CIRCLE_LAT: data.CIRCLE_LAT,
RADIUS: data.RADIUS
}
circleEditor.on('move', function(lnglat) {
// console.log(lnglat.lnglat.lng, lnglat.lnglat.lat) //调整后的圆心坐标
fenceData.CIRCLE_LONG = lnglat.lnglat.lng.toFixed(6) + ''
fenceData.CIRCLE_LAT = lnglat.lnglat.lat.toFixed(6) + ''
_this.fenceForm.fenceData.CIRCLE_LONG = fenceData.CIRCLE_LONG
_this.fenceForm.fenceData.CIRCLE_LAT = fenceData.CIRCLE_LAT
})
circleEditor.on('adjust', function(event) {
// log.info('触发事件：adjust')
// console.log(event.radius) //调整后的半径
fenceData.RADIUS = event.radius.toFixed(2) + ''
_this.fenceForm.fenceData.RADIUS = fenceData.RADIUS
})
circleEditor.on('end', function(event) {
log.info('触发事件： end')
// event.target 即为编辑后的圆形对象
})
_this.fenceForm.fenceData = fenceData
})
// 缩放地图到合适的视野级别
map.setFitView([circle])
var circleEditor = new AMap.CircleEditor(map, circle)
// 矩形回显
} else if (fenceReturnData[0] && this.form.fenceType === '2') {
let map = amapManager.getMap()
let fenceReturnData = JSON.parse(res.data.data.fenceJson)
var southWest = new AMap.LngLat(
Number(fenceReturnData[3].LONG),
Number(fenceReturnData[3].LAT)
)
var northEast = new AMap.LngLat(
Number(fenceReturnData[1].LONG),
Number(fenceReturnData[1].LAT)
)
var bounds = new AMap.Bounds(southWest, northEast)
var rectangle = new AMap.Rectangle({
bounds: bounds,
borderWeight: 3,
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50
})
map.add(rectangle)
// 缩放地图到合适的视野级别
map.plugin(['AMap.RectangleEditor'], function() {
let rectangleEditor = new AMap.RectangleEditor(map, rectangle)
rectangleEditor.open()
let newPath = []
let fenceData = [
{
LONG: fenceReturnData[0].LONG,
LAT: fenceReturnData[0].LAT
},
{
LONG: fenceReturnData[1].LONG,
LAT: fenceReturnData[1].LAT
},
{
LONG: fenceReturnData[2].LONG,
LAT: fenceReturnData[2].LAT
},
{
LONG: fenceReturnData[3].LONG,
LAT: fenceReturnData[3].LAT
}
]
let fenceDataItem = {}
// // console.log('lujing',e.obj.getPath()) //获取路径/范围
rectangleEditor.on('adjust', function(event) {
log.info('触发事件：adjust')
let northeast = event.Rd.northeast
let southwest = event.Rd.southwest
fenceData[0] = {
LONG: southwest.lng.toFixed(3) + '',
LAT: northeast.lat.toFixed(3) + ''
}
fenceData[1] = {
LONG: northeast.lng.toFixed(3) + '',
LAT: northeast.lat.toFixed(3) + ''
}
fenceData[2] = {
LONG: northeast.lng.toFixed(3) + '',
LAT: southwest.lat.toFixed(3) + ''
}
fenceData[3] = {
LONG: southwest.lng.toFixed(3) + '',
LAT: southwest.lat.toFixed(3) + ''
}
_this.fenceForm.fenceData = fenceData
})
rectangleEditor.on('end', function(event) {
log.info('触发事件： end')
_this.fenceForm.fenceData = fenceData
})
// 缩放地图到合适的视野级别
map.setFitView([rectangle])
}
else if(this.form.fenceType==='3'){
// 多边形回显
// 数据处理
let dataArr=[]
let pathData=[]
let map = amapManager.getMap()
_this.fenceForm.fenceData=fenceReturnData
fenceReturnData.forEach(item=>{
for(let key in item){
pathData.push(Number(item[key]))
}
dataArr.push(pathData)
pathData=[]
})
let path = dataArr
var polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: 50,
bubble: true,
})
map.add([polygon])
map.plugin(["AMap.PolyEditor"],function(){
_this.isEditFlag=true
let polyEditor = new AMap.PolyEditor(map,polygon);
// 进入编辑模式
polyEditor.open()
polyEditor.on('adjust', function(event) {
log.info('触发事件：adjust')
let path=event.target.w.path
let pathData={}
let data=[]
path.forEach(item=>{
for(let key in item){
if(key==='lng'){
pathData.LANG=item[key]+''
}else if(key==='lat'){
pathData.LAT=item[key]+''
}
}
data.push(pathData)
pathData={}
})
_this.fenceForm.fenceData=data
})
})
}
})
},
cancel() {
this.dialog = false
this.form = {}
this.reload()
},
async doSubmit() {
let _this = this
// console.log('ref', this.$refs.ruleForm)
_this.$refs.ruleForm.validate(valid => {
if (valid) {
this.loading = true
if (this.isAdd) {
this.doAdd()
} else this.doEdit()
} else {
return false
}
})
},
doAdd() {
let _this = this
_this.form.fenceJson = _this.fenceForm.fenceData
let name = this.form.name
if (this.form.areaList.length !== 0 && this.form.fenceType === '4') {
this.form.areaList[0] = this.form.areaList[0] + '0000'
this.form.areaList[1] = this.form.areaList[1] + '00'
this.form.fenceJson = {
province: this.form.areaList[0],
city: this.form.areaList[1],
area: this.form.areaList[2]
}
this.form.fenceJson = JSON.stringify(this.form.fenceJson)
} else {
this.form.fenceJson = JSON.stringify(this.fenceForm.fenceData)
}
const param = new FormData()
for (const key in this.form) {
if (this.form[key]) param.append(key, this.form[key] + '')
}
add(this.form)
.then(() => {
this.$message({
message: '新增成功！',
type: 'success',
showClose: true
})
this.loading = false
this.supThis.search()
})
.catch(err => {
this.loading = false
})
this.isEditFlag = false
this.reload()
},
doEdit() {
let _this = this
if (_this.isEditFlag) {
_this.form.fenceJson = JSON.stringify(_this.fenceForm.fenceData)
if (_this.form.fenceType === '4') {
if (this.form.areaList.length !== 0) {
this.form.areaList[0] = this.form.areaList[0] + '0000'
this.form.areaList[1] = this.form.areaList[1] + '00'
this.form.fenceJson = {
province: this.form.areaList[0],
city: this.form.areaList[1],
area: this.form.areaList[2]
}
}
this.form.fenceJson = JSON.stringify(this.form.fenceJson)
} else {
_this.form.fenceJson = JSON.stringify(_this.fenceForm.fenceData)
}
const param = new FormData()
for (const key in this.form) {
if (_this.form[key]) param.append(key, _this.form[key] + '')
}
} else {
_this.form.fenceJson = JSON.stringify(_this.fenceForm.fenceData)
}
update(this.form)
.then(() => {
this.$message({
message: '修改成功！',
type: 'success',
showClose: true
})
this.loading = false
this.supThis.search()
})
.catch(err => {
this.loading = false
})
this.isEditFlag = false
this.reload()
},
normalizer(node) {
if (node.children && !node.children.length) delete node.children
return {
id: node.id,
label: node.deptName,
children: node.children
}
},
resetForm() {
this.dialog = false
this.$refs['ruleForm'].resetFields()
for (const key in this.form) {
if (this.form[key] instanceof Array) this.form[key] = []
else this.form[key] = null
}
this.form = {}
this.fenceForm = {}
this.reload()
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done()
})
.catch(_ => {})
}
}
}
</script>
<style lang="scss" scoped>
.container {
display: flex;
.sidebar {
width: 500px;
margin: 0 20px 0 0;
.dialog-footer {
text-align: center;
}
}
.map {
flex: 1;
position: relative;
.btn {
position: absolute;
right: 0;
top: 0;
margin-left: 15px;
}
}
}
/deep/.amap-icon img,
.amap-marker-content img {
width: 12px;
height: 12px;
}
</style>有任何问题欢迎留言。
1574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
