You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
10 KiB
444 lines
10 KiB
<template>
|
|
<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">
|
|
<view class="not-show">
|
|
<uni-forms-item label="" required name="baseId">
|
|
<uni-easyinput v-model="formData.baseId" placeholder=""></uni-easyinput>
|
|
</uni-forms-item>
|
|
<uni-forms-item class="not-show" label="" required name="id">
|
|
<uni-easyinput v-model="formData.id" placeholder=""></uni-easyinput>
|
|
</uni-forms-item>
|
|
</view>
|
|
<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>
|
|
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: this.$store.state.user.baseId
|
|
},
|
|
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.formData.baseId=this.$store.state.user.baseId
|
|
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'
|
|
});
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
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.reLaunch({
|
|
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.redirectTo({
|
|
url:'/sunPages/drawMap/drawMap?str=' + str
|
|
});
|
|
},
|
|
reset() {
|
|
this.formData = {
|
|
id: undefined,
|
|
blockName: undefined,
|
|
blockColor: undefined,
|
|
blockType: undefined,
|
|
blockArea: undefined,
|
|
positionStr: undefined,
|
|
baseId: this.$store.state.user.baseId
|
|
};
|
|
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: [30, 30, 30, 30],
|
|
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 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>
|
|
|