parent
83658c86fe
commit
78ae327fb9
@ -1,9 +1,63 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
//地块列表分页
|
||||
export function getBlockPage(query) { |
||||
return request({ |
||||
url: '/traceability/block/page', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 获得农作物信息;分页
|
||||
export function getCropperPage(query) { |
||||
return request({ |
||||
url: '/traceability/cropper/page', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 获得种植历史分页
|
||||
export function getGrowRecordPage(query) { |
||||
return request({ |
||||
url: '/traceability/grow-record/page', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 获得采收记录分页
|
||||
export function getRecoveryRecordPage(query) { |
||||
return request({ |
||||
url: '/traceability/recovery-record/page', |
||||
method: 'get', |
||||
params: query |
||||
}) |
||||
} |
||||
|
||||
// 创建地块信息
|
||||
export function createBlock(data) { |
||||
return request({ |
||||
url: '/traceability/block/create', |
||||
method: 'post', |
||||
data: data |
||||
}) |
||||
} |
||||
|
||||
// 删除地块信息
|
||||
export function deleteBlock(id) { |
||||
return request({ |
||||
url: '/traceability/block/delete?id=' + id, |
||||
method: 'delete' |
||||
}) |
||||
} |
||||
|
||||
// 更新地块信息
|
||||
export function updateBlock(data) { |
||||
return request({ |
||||
url: '/traceability/block/update', |
||||
method: 'put', |
||||
data: data |
||||
}) |
||||
} |
||||
File diff suppressed because one or more lines are too long
@ -1,19 +1,416 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
<view class="content"> |
||||
<view class="map-view"> |
||||
<map |
||||
id="map" |
||||
v-if="formData.positionStr && formData.positionStr != ''" |
||||
class="m-map" |
||||
:longitude="longitude" |
||||
:latitude="latitude" |
||||
:polygons="polygons" |
||||
enable-satellite="true" |
||||
></map> |
||||
<view class="no-map" v-else> |
||||
<uv-empty icon="https://cdn.uviewui.com/uview/demo/empty/history.png"></uv-empty> |
||||
</view> |
||||
<view class="map-btn-group"> |
||||
<button v-if="formData.positionStr && formData.positionStr != ''" @click="reset">清除地块</button> |
||||
<button v-else @click="drawMap">绘制地块</button> |
||||
</view> |
||||
</view> |
||||
<view class="form-box"> |
||||
<uni-forms label-width="80px" ref="valiForm" :rules="rules" :modelValue="formData"> |
||||
<uni-forms-item label="地块名称" required name="blockName"> |
||||
<uni-easyinput v-model="formData.blockName" placeholder="请输入地块名称"></uni-easyinput> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="标识颜色" name="blockColor"> |
||||
<view |
||||
class="color" |
||||
:style="{ |
||||
background: formData.blockColor |
||||
}" |
||||
@click="openColor" |
||||
></view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块类型" required name="blockType"> |
||||
<uni-data-select v-model="formData.blockType" :localdata="range"></uni-data-select> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块面积" required name="blockArea"> |
||||
<uni-easyinput v-model="formData.blockArea" placeholder="请输入地块面积"> |
||||
<template #right> |
||||
<view class="input-slot-right">亩</view> |
||||
</template> |
||||
</uni-easyinput> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块坐标" name="positionStr"> |
||||
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<button type="primary" @click="submit('valiForm')">提交</button> |
||||
</view> |
||||
|
||||
<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'; |
||||
import { createBlock } from '@/api/system/block/block.js'; |
||||
// 引入SDK核心类 |
||||
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js'); |
||||
var qqmapsdk; |
||||
var self; |
||||
export default { |
||||
data() { |
||||
return { |
||||
data: [], |
||||
IsOption: false, |
||||
polygons: [], |
||||
longitude: null, |
||||
latitude: null, |
||||
range: [], |
||||
formData: { |
||||
blockName: undefined, |
||||
blockColor: undefined, |
||||
blockType: undefined, |
||||
blockArea: undefined, |
||||
positionStr: undefined, |
||||
baseId: undefined |
||||
}, |
||||
rules: { |
||||
blockName: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '地块名不能为空' |
||||
} |
||||
] |
||||
}, |
||||
blockArea: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '面积名不能为空' |
||||
} |
||||
] |
||||
}, |
||||
blockType: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '地块类型不能为空' |
||||
} |
||||
] |
||||
} |
||||
// positionStr: { |
||||
// rules: [ |
||||
// { |
||||
// required: true, |
||||
// errorMessage: '请先绘制地块' |
||||
// } |
||||
// ] |
||||
// } |
||||
} |
||||
}; |
||||
}, |
||||
onShow() { |
||||
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE); |
||||
arr.forEach((item) => { |
||||
item.text = item.label; |
||||
}); |
||||
this.range = arr; |
||||
}, |
||||
onLoad(options) { |
||||
if (options.val) { |
||||
console.log(JSON.parse(decodeURIComponent(options.val))); |
||||
const obj = JSON.parse(decodeURIComponent(options.val)); |
||||
this.formData.blockArea = obj.blockArea; |
||||
this.formData.positionStr = obj.positionStr; |
||||
this.initmapPolygon(); |
||||
} |
||||
self = this; |
||||
// self.getAuthorizeInfo(); |
||||
// 实例化API核心类 |
||||
qqmapsdk = new QQMapWX({ |
||||
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A' |
||||
}); |
||||
}, |
||||
methods: { |
||||
openColor() { |
||||
this.$refs.pickerColor.open(); |
||||
}, |
||||
confirm(e) { |
||||
this.formData.blockColor = e.hex; |
||||
if (this.polygons.length > 0) { |
||||
this.polygons[0].strokeColor = e.hex; |
||||
this.polygons[0].fillColor = e.hex + '5c'; |
||||
} |
||||
}, |
||||
|
||||
toLocation: function (obj) { |
||||
self.mapCtx.moveToLocation(obj); |
||||
self.mapCtx.translateMarker({ |
||||
markerId: 1, |
||||
autoRotate: true, |
||||
duration: 100, |
||||
destination: { |
||||
latitude: obj.latitude, |
||||
longitude: obj.longitude |
||||
}, |
||||
animationEnd() { |
||||
console.log('animation end'); |
||||
} |
||||
}); |
||||
}, |
||||
// 位置授权 |
||||
getAuthorizeInfo() { |
||||
uni.authorize({ |
||||
scope: 'scope.userLocation', |
||||
success() { |
||||
// 允许授权 |
||||
self.getLocationInfo(); |
||||
}, |
||||
fail() { |
||||
// 拒绝授权 |
||||
self.openConfirm(); |
||||
console.log('你拒绝了授权，无法获得周边信息'); |
||||
} |
||||
}); |
||||
}, |
||||
// 获取地理位置 |
||||
getLocationInfo() { |
||||
uni.getLocation({ |
||||
type: 'wgs84', |
||||
success(res) { |
||||
console.log(res, '当前位置'); |
||||
self.toLocation(res); |
||||
self.latitude = res.latitude; |
||||
self.longitude = res.longitude; |
||||
// uni.openLocation({ |
||||
// latitude: latitude, |
||||
// longitude: longitude, |
||||
// success: function () { |
||||
// console.log('success'); |
||||
// } |
||||
// }) |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 再次获取授权 |
||||
// 当用户第一次拒绝后再次请求授权 |
||||
openConfirm() { |
||||
uni.showModal({ |
||||
title: '请求授权当前位置', |
||||
content: '需要获取您的地理位置，请确认授权', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
uni.openSetting(); // 打开地图权限设置 |
||||
} else if (res.cancel) { |
||||
uni.showToast({ |
||||
title: '你拒绝了授权，无法获得周边信息', |
||||
icon: 'none', |
||||
duration: 1000 |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
poitap: function (e) { |
||||
console.log(e, 'poitap'); |
||||
var obj = e.detail; |
||||
self.searchKey = obj.name; |
||||
// this.$api.msg(e) |
||||
self.toLocation(obj); |
||||
}, |
||||
// 取消删除 |
||||
Cancel: function () {}, |
||||
|
||||
submit(ref) { |
||||
let this_ = this |
||||
if (this.formData.positionStr == undefined || this.formData.positionStr == '') { |
||||
uni.showToast({ |
||||
title: `请先绘制地块`, |
||||
icon: 'error' |
||||
}); |
||||
return false; |
||||
} |
||||
this.$refs[ref] |
||||
.validate() |
||||
.then((res) => { |
||||
console.log('success', res); |
||||
createBlock(res) |
||||
.then((res) => { |
||||
uni.showToast({ |
||||
title: `创建成功`, |
||||
duration: 1500, |
||||
success() { |
||||
setTimeout(()=>{ |
||||
this_.reset(); |
||||
uni.switchTab({ |
||||
url: '/pages/block/index' |
||||
}); |
||||
},1500) |
||||
} |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err); |
||||
}); |
||||
}, |
||||
drawMap() { |
||||
uni.navigateTo({ |
||||
url: '/sunPages/drawMap/drawMap' |
||||
}); |
||||
}, |
||||
reset() { |
||||
this.formData = { |
||||
blockName: undefined, |
||||
blockColor: undefined, |
||||
blockType: undefined, |
||||
blockArea: undefined, |
||||
positionStr: undefined, |
||||
baseId: undefined |
||||
}; |
||||
this.polygons = []; |
||||
}, |
||||
initmapPolygon() { |
||||
let this_ = this; |
||||
const mapCon = uni.createMapContext('map'); |
||||
const arr = JSON.parse(this.formData.positionStr); |
||||
const center = this_.calculateCenter(arr); |
||||
let Arr = arr.map((item) => { |
||||
const obj = { |
||||
latitude: item[1], |
||||
longitude: item[0] |
||||
}; |
||||
return obj; |
||||
}); |
||||
console.log(Arr); |
||||
let Obj = { |
||||
points: Arr, |
||||
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor : '#007969', |
||||
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor + '5c' : '#0079695c', |
||||
zIndex: 1 |
||||
}; |
||||
this_.$nextTick(() => { |
||||
this_.polygons.push(Obj); |
||||
mapCon.includePoints({ |
||||
padding: [20, 20, 20, 20], |
||||
points: Arr |
||||
}); |
||||
this_.longitude = center[0]; |
||||
this_.latitude = center[1]; |
||||
}); |
||||
}, |
||||
//计算中心点 |
||||
calculateCenter(coordinates) { |
||||
let sumLat = 0; |
||||
let sumLng = 0; |
||||
coordinates.forEach((coord) => { |
||||
sumLat += coord[0]; |
||||
sumLng += coord[1]; |
||||
}); |
||||
const count = coordinates.length; |
||||
const centerLat = sumLat / count; |
||||
const centerLng = sumLng / count; |
||||
return [centerLat, centerLng]; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
<style scoped lang="scss"> |
||||
.content { |
||||
background-color: #f1f1f1; |
||||
overflow: hidden; |
||||
min-height: 100vh; |
||||
color: #646464; |
||||
font-size: 40rpx; |
||||
} |
||||
.option { |
||||
max-height: 300rpx; |
||||
width: 90%; |
||||
line-height: 60rpx; |
||||
position: fixed; |
||||
top: 110rpx; |
||||
z-index: 99999; |
||||
border-radius: 150rpx; |
||||
overflow: scroll; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
.column_item { |
||||
padding: 0 40rpx; |
||||
height: 60rpx; |
||||
font-size: 28rpx; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
margin: 0rpx auto; |
||||
background-color: #00000080; |
||||
text-overflow: ellipsis; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
} |
||||
.column_item:active { |
||||
background-color: #8f8f94; |
||||
} |
||||
|
||||
.page-section-gap { |
||||
width: 100%; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 0; |
||||
} |
||||
.color { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
border-radius: 6rpx; |
||||
border: solid 1rpx #d0d0d0; |
||||
background-color: transparent; |
||||
} |
||||
.input-slot-right { |
||||
background-color: #eee; |
||||
padding: 10rpx; |
||||
} |
||||
.map-view { |
||||
width: 100%; |
||||
height: 500rpx; |
||||
overflow: hidden; |
||||
position: relative; |
||||
margin-bottom: 30rpx; |
||||
|
||||
.m-map { |
||||
width: 100%; |
||||
height: 110%; |
||||
} |
||||
|
||||
.map-btn-group { |
||||
position: absolute; |
||||
z-index: 9; |
||||
bottom: 20rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
} |
||||
.form-box { |
||||
padding: 40rpx 20rpx; |
||||
margin: 0 20rpx; |
||||
background: #fff; |
||||
box-shadow: 0 0 10px 1px #dadada; |
||||
border-radius: 15rpx; |
||||
|
||||
/deep/ .uni-forms-item { |
||||
align-items: center; |
||||
|
||||
&:last-child { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,32 @@ |
||||
<template> |
||||
<view> |
||||
<web-view :src="src"></web-view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
positionStr: null, |
||||
blockColor: null, |
||||
blockName: null, |
||||
blockType: null, |
||||
id: null, |
||||
str: null, |
||||
src:'' |
||||
}; |
||||
}, |
||||
onLoad(options) { |
||||
if (options.str) { |
||||
this.str = options.str; |
||||
this.src = 'http://192.168.130.193:8848/H5/map.html?str=' + this.str |
||||
}else{ |
||||
this.src = 'http://192.168.130.193:8848/H5/map.html?str=null' |
||||
} |
||||
console.log(this.src) |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"></style> |
||||
@ -1,19 +1,435 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
<view class="content"> |
||||
<view class="map-view"> |
||||
<map |
||||
id="map" |
||||
v-if="formData.positionStr && formData.positionStr != ''" |
||||
class="m-map" |
||||
:longitude="longitude" |
||||
:latitude="latitude" |
||||
:polygons="polygons" |
||||
enable-satellite="true" |
||||
></map> |
||||
<view class="no-map" v-else> |
||||
<uv-empty icon="https://cdn.uviewui.com/uview/demo/empty/history.png"></uv-empty> |
||||
</view> |
||||
<view class="map-btn-group"> |
||||
<button v-if="formData.positionStr && formData.positionStr != ''" @click="drawMap(formData)">编辑地块</button> |
||||
<button v-else @click="drawMap(formData)">绘制地块</button> |
||||
</view> |
||||
</view> |
||||
<view class="form-box"> |
||||
<uni-forms label-width="80px" ref="valiForm" :rules="rules" :modelValue="formData"> |
||||
<uni-forms-item label="" required name="id"> |
||||
<uni-easyinput v-model="formData.id" placeholder=""></uni-easyinput> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块名称" required name="blockName"> |
||||
<uni-easyinput v-model="formData.blockName" placeholder="请输入地块名称"></uni-easyinput> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="标识颜色" name="blockColor"> |
||||
<view |
||||
class="color" |
||||
:style="{ |
||||
background: formData.blockColor |
||||
}" |
||||
@click="openColor" |
||||
></view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块类型" required name="blockType"> |
||||
<uni-data-select v-model="formData.blockType" :localdata="range"></uni-data-select> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块面积" required name="blockArea"> |
||||
<uni-easyinput v-model="formData.blockArea" placeholder="请输入地块面积"> |
||||
<template #right> |
||||
<view class="input-slot-right">亩</view> |
||||
</template> |
||||
</uni-easyinput> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="地块坐标" name="positionStr"> |
||||
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<button type="primary" @click="submit('valiForm')">提交</button> |
||||
</view> |
||||
|
||||
<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
|
||||
import { getDictDatas, DICT_TYPE } from '@/utils/dict'; |
||||
import { updateBlock } from '@/api/system/block/block.js'; |
||||
// 引入SDK核心类 |
||||
var QQMapWX = require('@/plugins/qqmap-wx-jssdk.min.js'); |
||||
var qqmapsdk; |
||||
var self; |
||||
export default { |
||||
data() { |
||||
return { |
||||
data: [], |
||||
IsOption: false, |
||||
polygons: [], |
||||
longitude: null, |
||||
latitude: null, |
||||
range: [], |
||||
realName: undefined, |
||||
formData: { |
||||
id: undefined, |
||||
blockName: undefined, |
||||
blockColor: undefined, |
||||
blockType: undefined, |
||||
blockArea: undefined, |
||||
positionStr: undefined, |
||||
baseId: undefined |
||||
}, |
||||
rules: { |
||||
blockName: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '地块名不能为空' |
||||
} |
||||
] |
||||
}, |
||||
blockArea: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '面积名不能为空' |
||||
} |
||||
] |
||||
}, |
||||
blockType: { |
||||
rules: [ |
||||
{ |
||||
required: true, |
||||
errorMessage: '地块类型不能为空' |
||||
} |
||||
] |
||||
} |
||||
// positionStr: { |
||||
// rules: [ |
||||
// { |
||||
// required: true, |
||||
// errorMessage: '请先绘制地块' |
||||
// } |
||||
// ] |
||||
// } |
||||
} |
||||
}; |
||||
}, |
||||
onShow() { |
||||
let arr = this.getDictDatas(DICT_TYPE.LAND_TYPE); |
||||
arr.forEach((item) => { |
||||
item.text = item.label; |
||||
}); |
||||
this.range = arr; |
||||
}, |
||||
onLoad(options) { |
||||
if (options.val) { |
||||
const obj = JSON.parse(decodeURIComponent(options.val)); |
||||
console.log(obj); |
||||
this.formData = obj; |
||||
this.initmapPolygon(); |
||||
} |
||||
if (options.data) { |
||||
const obj = JSON.parse(options.data); |
||||
this.formData = obj; |
||||
this.initmapPolygon(); |
||||
console.log(this.formData); |
||||
} |
||||
// self = this; |
||||
// self.getAuthorizeInfo(); |
||||
// 实例化API核心类 |
||||
qqmapsdk = new QQMapWX({ |
||||
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A' |
||||
}); |
||||
}, |
||||
methods: { |
||||
openColor() { |
||||
this.$refs.pickerColor.open(); |
||||
}, |
||||
confirm(e) { |
||||
this.formData.blockColor = e.hex; |
||||
if (this.polygons.length > 0) { |
||||
this.polygons[0].strokeColor = e.hex; |
||||
this.polygons[0].fillColor = e.hex + '5c'; |
||||
} |
||||
}, |
||||
|
||||
toLocation: function (obj) { |
||||
self.mapCtx.moveToLocation(obj); |
||||
self.mapCtx.translateMarker({ |
||||
markerId: 1, |
||||
autoRotate: true, |
||||
duration: 100, |
||||
destination: { |
||||
latitude: obj.latitude, |
||||
longitude: obj.longitude |
||||
}, |
||||
animationEnd() { |
||||
console.log('animation end'); |
||||
} |
||||
}); |
||||
}, |
||||
// 位置授权 |
||||
getAuthorizeInfo() { |
||||
uni.authorize({ |
||||
scope: 'scope.userLocation', |
||||
success() { |
||||
// 允许授权 |
||||
self.getLocationInfo(); |
||||
}, |
||||
fail() { |
||||
// 拒绝授权 |
||||
self.openConfirm(); |
||||
console.log('你拒绝了授权，无法获得周边信息'); |
||||
} |
||||
}); |
||||
}, |
||||
// 获取地理位置 |
||||
getLocationInfo() { |
||||
uni.getLocation({ |
||||
type: 'wgs84', |
||||
success(res) { |
||||
console.log(res, '当前位置'); |
||||
self.toLocation(res); |
||||
self.latitude = res.latitude; |
||||
self.longitude = res.longitude; |
||||
// uni.openLocation({ |
||||
// latitude: latitude, |
||||
// longitude: longitude, |
||||
// success: function () { |
||||
// console.log('success'); |
||||
// } |
||||
// }) |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
// 再次获取授权 |
||||
// 当用户第一次拒绝后再次请求授权 |
||||
openConfirm() { |
||||
uni.showModal({ |
||||
title: '请求授权当前位置', |
||||
content: '需要获取您的地理位置，请确认授权', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
uni.openSetting(); // 打开地图权限设置 |
||||
} else if (res.cancel) { |
||||
uni.showToast({ |
||||
title: '你拒绝了授权，无法获得周边信息', |
||||
icon: 'none', |
||||
duration: 1000 |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
poitap: function (e) { |
||||
console.log(e, 'poitap'); |
||||
var obj = e.detail; |
||||
self.searchKey = obj.name; |
||||
// this.$api.msg(e) |
||||
self.toLocation(obj); |
||||
}, |
||||
// 取消删除 |
||||
Cancel: function () {}, |
||||
|
||||
submit(ref) { |
||||
let this_ = this; |
||||
if (this.formData.positionStr == undefined || this.formData.positionStr == '') { |
||||
uni.showToast({ |
||||
title: `请先绘制地块`, |
||||
icon: 'error' |
||||
}); |
||||
return false; |
||||
} |
||||
this.$refs[ref] |
||||
.validate() |
||||
.then((res) => { |
||||
console.log('success', res); |
||||
updateBlock(res) |
||||
.then((res) => { |
||||
uni.showToast({ |
||||
title: `修改成功`, |
||||
duration: 1500, |
||||
success() { |
||||
setTimeout(() => { |
||||
this_.reset(); |
||||
uni.switchTab({ |
||||
url: '/pages/block/index' |
||||
}); |
||||
}, 1500); |
||||
} |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log(err); |
||||
}); |
||||
}) |
||||
.catch((err) => { |
||||
console.log('err', err); |
||||
}); |
||||
}, |
||||
drawMap(val) { |
||||
const str = encodeURIComponent(JSON.stringify(val)) |
||||
uni.navigateTo({ |
||||
url:'/sunPages/drawMap/drawMap?str=' + str |
||||
}); |
||||
}, |
||||
reset() { |
||||
this.formData = { |
||||
id: undefined, |
||||
blockName: undefined, |
||||
blockColor: undefined, |
||||
blockType: undefined, |
||||
blockArea: undefined, |
||||
positionStr: undefined, |
||||
baseId: undefined |
||||
}; |
||||
this.polygons = []; |
||||
}, |
||||
resetBlock() { |
||||
this.polygons = []; |
||||
this.formData.positionStr = undefined; |
||||
}, |
||||
initmapPolygon() { |
||||
let this_ = this; |
||||
const mapCon = uni.createMapContext('map'); |
||||
const arr = JSON.parse(this.formData.positionStr); |
||||
const center = this_.calculateCenter(arr); |
||||
let Arr = arr.map((item) => { |
||||
const obj = { |
||||
latitude: item[1], |
||||
longitude: item[0] |
||||
}; |
||||
return obj; |
||||
}); |
||||
console.log(Arr); |
||||
let Obj = { |
||||
points: Arr, |
||||
strokeColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor : '#007969', |
||||
fillColor: this_.formData.blockColor && this_.formData.blockColor != null ? this_.formData.blockColor + '5c' : '#0079695c', |
||||
zIndex: 1 |
||||
}; |
||||
this_.$nextTick(() => { |
||||
this_.polygons.push(Obj); |
||||
mapCon.includePoints({ |
||||
padding: [20, 20, 20, 20], |
||||
points: Arr |
||||
}); |
||||
this_.longitude = center[0]; |
||||
this_.latitude = center[1]; |
||||
}); |
||||
}, |
||||
//计算中心点 |
||||
calculateCenter(coordinates) { |
||||
let sumLat = 0; |
||||
let sumLng = 0; |
||||
coordinates.forEach((coord) => { |
||||
sumLat += coord[0]; |
||||
sumLng += coord[1]; |
||||
}); |
||||
const count = coordinates.length; |
||||
const centerLat = sumLat / count; |
||||
const centerLng = sumLng / count; |
||||
return [centerLat, centerLng]; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
<style scoped lang="scss"> |
||||
.content { |
||||
background-color: #f1f1f1; |
||||
overflow: hidden; |
||||
min-height: 100vh; |
||||
color: #646464; |
||||
font-size: 40rpx; |
||||
} |
||||
.option { |
||||
max-height: 300rpx; |
||||
width: 90%; |
||||
line-height: 60rpx; |
||||
position: fixed; |
||||
top: 110rpx; |
||||
z-index: 99999; |
||||
border-radius: 150rpx; |
||||
overflow: scroll; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
.column_item { |
||||
padding: 0 40rpx; |
||||
height: 60rpx; |
||||
font-size: 28rpx; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
margin: 0rpx auto; |
||||
background-color: #00000080; |
||||
text-overflow: ellipsis; |
||||
color: #fff; |
||||
white-space: nowrap; |
||||
} |
||||
.column_item:active { |
||||
background-color: #8f8f94; |
||||
} |
||||
|
||||
.page-section-gap { |
||||
width: 100%; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 0; |
||||
} |
||||
.color { |
||||
width: 50rpx; |
||||
height: 50rpx; |
||||
border-radius: 6rpx; |
||||
border: solid 1rpx #d0d0d0; |
||||
background-color: transparent; |
||||
} |
||||
.input-slot-right { |
||||
background-color: #eee; |
||||
padding: 10rpx; |
||||
} |
||||
.map-view { |
||||
width: 100%; |
||||
height: 500rpx; |
||||
overflow: hidden; |
||||
position: relative; |
||||
margin-bottom: 30rpx; |
||||
|
||||
.m-map { |
||||
width: 100%; |
||||
height: 110%; |
||||
} |
||||
|
||||
.map-btn-group { |
||||
position: absolute; |
||||
z-index: 9; |
||||
bottom: 20rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
} |
||||
} |
||||
.form-box { |
||||
padding: 40rpx 20rpx; |
||||
margin: 0 20rpx; |
||||
background: #fff; |
||||
box-shadow: 0 0 10px 1px #dadada; |
||||
border-radius: 15rpx; |
||||
|
||||
/deep/ .uni-forms-item { |
||||
align-items: center; |
||||
|
||||
&:last-child,{ |
||||
display: none; |
||||
} |
||||
&:first-child{ |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue