动态设置电子围栏

实现电子围栏半径动态变化。

组件用的是uview,因为修改和添加是用的同一个页面，所以导航栏是自定的。

主要是利用@tap="mapTap"事件和组件中的滑动选择器，实现功能需求。

<template>
	<view>
		<view class="shebei-con">
			<view class="fl" style="width: 520rpx;">
				<view class="sbc-fl">
					<view class="word">设备类型</view>
					<view style="margin-left: 40rpx;">
						<uni-section title="" type="line">
							<uni-data-select v-model="selectVal" :selectImg="selectImg" :localdata="range"
								@change="selectChange"></uni-data-select>
						</uni-section>
					</view>
				</view>
				<view class="sbc-fl" style="margin-top: 20rpx;">
					<view class="word">名称</view>
					<view style="margin-left: 40rpx;">
						<u--input style="width: 360rpx;height: 48rpx;" placeholder="请输入围栏名称" border="surround"
							v-model="name"></u--input>
					</view>
				</view>
			</view>
			<view class="save-btn" @click="submitFun">保存</view>
		</view>
		<view>
			<u-slider v-model="sliderValue" step="10" min="50" max="200" activeColor="#3c9cff" inactiveColor="#c0c4cc"
				@change="changeSlider" :showValue="true"></u-slider>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map1" style="width: 100%; height: calc(100vh - 100rpx);" :latitude="latitude"
					:longitude="longitude" :markers="covers" :circles="circles" @tap="mapTap">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		deviceTypelist,
		DevicefenceAdd,
		DevicefenceUpdate
	} from '@/Api/setApi.js'
	export default {
		data() {
			return {
				id: '1', // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 0,
				longitude: 0,
				covers: [{
					latitude: 0,
					longitude: 0,
					iconPath: '/static/imgs/position.png',
					width: 20,
					height: 20,
				}],
				circles: [{
					latitude: 0,
					longitude: 0,
					color: '#318cff',
					fillColor: '#b9d6f954',
					radius: 100,
				}],
				selectVal: 0,
				range: [],
				name: '',
				sliderValue: 100,
				titleData: '添加电子围栏'
			}
		},
		onReady() {
			this.changeNavStyle()
		},
		onLoad(e) {
			if (e.data == -1) {
				this.titleData = '添加电子围栏'
				this.dingWeiFun()
			} else {
				let fenceSetData = uni.getStorageSync('setFenceData')
				this.titleData = '修改电子围栏'
				this.name = fenceSetData.name
				this.longitude = fenceSetData.longitude
				this.latitude = fenceSetData.latitude
				this.sliderValue = fenceSetData.radius
				this.covers[0].longitude = fenceSetData.longitude
				this.covers[0].latitude = fenceSetData.latitude
				this.circles[0].longitude = this.longitude
				this.circles[0].latitude = this.latitude
				this.circles[0].radius = 150
				
			}
		},
		onShow() {
			let that = this
			deviceTypelist().then(res => {
				this.range = res.data
			})
		},
		methods: {
			submitFun() {
				if(this.titleData=="添加电子围栏"){
					DevicefenceAdd({
						name: this.name,
						device_id: this.selectVal,
						longitude: this.circles[0].longitude,
						latitude: this.circles[0].latitude,
						radius: this.circles[0].radius
					}).then(res => {
						this.$fun.toast(res.msg)
						if(res.code==1){
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}
					})
				}else{
					DevicefenceUpdate({
						device_fence_id:uni.getStorageSync('setFenceData').id,
						name: this.name,
						device_id: this.selectVal,
						longitude: this.circles[0].longitude,
						latitude: this.circles[0].latitude,
						radius: this.circles[0].radius
					}).then(res=>{
						this.$fun.toast(res.msg)
						if(res.code==1){
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}
					})
				}
			},
			dingWeiFun() {
				let that = this
				uni.getLocation({
					type: 'gcj02  ', // 返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.covers[0].longitude = res.longitude
						that.covers[0].latitude = res.latitude
						that.circles[0].longitude = res.longitude
						that.circles[0].latitude = res.latitude
					},
					fail: function(res) {
						console.log(res);
					}
				});
			},
			selectChange(e) {
				this.selectVal = e
			},
			mapTap(e) {
				// console.log(e.detail.longitude, 'klkl');
				this.covers[0].latitude = e.detail.latitude
				this.covers[0].longitude = e.detail.longitude
				this.circles[0].latitude = e.detail.latitude
				this.circles[0].longitude = e.detail.longitude
			},
			changeNavStyle() {
				uni.setNavigationBarTitle({
					title: this.titleData
				});
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#318cff'
				});
			},
			changeSlider(val) {
				this.circles[0].radius = val
			}
		}
	}
</script>

<style lang="scss" scoped>
	.save-btn {
		width: 116rpx;
		height: 72rpx;
		background: #318CFF;
		border-radius: 8rpx;
		color: #fff;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
	}

	/deep/ .uni-select__input-placeholder {
		font-size: 28rpx;
		color: #d3d6dc;
	}

	/deep/ .uni-stat-select {
		width: 360rpx;
		height: 48rpx;
	}

	/deep/ .uni-select {
		width: 340rpx;
		height: 66rpx;
	}

	/deep/ .uni-select__input-text {
		color: #666;
	}

	.fl {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: column;
	}

	.sbc-fl {
		width: 520rpx;
		display: flex;
		align-items: center;
	}

	.shebei-con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		font-size: 28rpx;

		.word {
			width: 120rpx;
		}
	}
</style>