|
|
|
|
@ -1,24 +1,36 @@ |
|
|
|
|
<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> |
|
|
|
|
<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> |
|
|
|
|
<image style="margin: 80rpx auto 20rpx; height: 330rpx;" src="https://sy.hbcjy.com/prod-api/admin-api/infra/file/23/get/08bb1813a2093a06c57e2733fc46034b30e4f98dac67d7106c5bf7db1d84d5a0.png" mode=""></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="map-btn-group"> |
|
|
|
|
<button v-if="formData.positionStr && formData.positionStr != ''" @click="reset">清除地块</button> |
|
|
|
|
<button v-else @click="drawMap(formData)">绘制地块</button> |
|
|
|
|
<view v-if="formData.positionStr && formData.positionStr != ''" @click="clearMap"> |
|
|
|
|
<image src="@/static/images/icon_enclosure.svg"></image> |
|
|
|
|
<view class="text">清除</view> |
|
|
|
|
</view> |
|
|
|
|
<view v-else @click="drawMap(formData)"> |
|
|
|
|
<image src="@/static/images/icon_enclosure.svg"></image> |
|
|
|
|
<view class="text">绘制</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="v-form v-container"> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="form-box"> |
|
|
|
|
<uni-forms label-width="80px" ref="valiForm" :rules="rules" :modelValue="formData"> |
|
|
|
|
<view class="v-form-item"> |
|
|
|
|
<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 label="地块坐标" name="positionStr"> |
|
|
|
|
<uni-forms-item label="" name="positionStr"> |
|
|
|
|
<uni-easyinput disabled v-model="formData.positionStr" placeholder="地块坐标"></uni-easyinput> |
|
|
|
|
</uni-forms-item> |
|
|
|
|
</view> |
|
|
|
|
@ -26,9 +38,13 @@ |
|
|
|
|
<uni-easyinput v-model="formData.blockName" placeholder="请输入地块名称"></uni-easyinput> |
|
|
|
|
</uni-forms-item> |
|
|
|
|
<uni-forms-item label="标识颜色" name="blockColor"> |
|
|
|
|
<view class="color" :style="{ |
|
|
|
|
<view |
|
|
|
|
class="color" |
|
|
|
|
:style="{ |
|
|
|
|
background: formData.blockColor |
|
|
|
|
}" @click="openColor"></view> |
|
|
|
|
}" |
|
|
|
|
@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> |
|
|
|
|
@ -40,11 +56,8 @@ |
|
|
|
|
</template> |
|
|
|
|
</uni-easyinput> |
|
|
|
|
</uni-forms-item> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</uni-forms> |
|
|
|
|
|
|
|
|
|
<view class="fixed fixedBottom v-container"><button class="v-primary-btn large" @click="submit('valiForm')">提交</button></view> |
|
|
|
|
<button class="v-primary-btn large" type="primary" @click="submit('valiForm')">提交</button> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<uv-pick-color ref="pickerColor" @confirm="confirm"></uv-pick-color> |
|
|
|
|
@ -52,18 +65,13 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
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 { |
|
|
|
|
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: [], |
|
|
|
|
@ -82,22 +90,28 @@ |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
blockName: { |
|
|
|
|
rules: [{ |
|
|
|
|
rules: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
errorMessage: '地块名不能为空' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
blockArea: { |
|
|
|
|
rules: [{ |
|
|
|
|
rules: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
errorMessage: '面积名不能为空' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}, |
|
|
|
|
blockType: { |
|
|
|
|
rules: [{ |
|
|
|
|
rules: [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
errorMessage: '地块类型不能为空' |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
// positionStr: { |
|
|
|
|
// rules: [ |
|
|
|
|
@ -131,15 +145,13 @@ |
|
|
|
|
this.initmapPolygon(); |
|
|
|
|
console.log(this.formData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
self = this; |
|
|
|
|
// self.getAuthorizeInfo(); |
|
|
|
|
// 实例化API核心类 |
|
|
|
|
qqmapsdk = new QQMapWX({ |
|
|
|
|
key: 'PEFBZ-ELL64-MVDUZ-KDV4N-RISMO-VCB7A' |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
onUnload() { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
openColor() { |
|
|
|
|
@ -153,7 +165,7 @@ |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
toLocation: function(obj) { |
|
|
|
|
toLocation: function (obj) { |
|
|
|
|
self.mapCtx.moveToLocation(obj); |
|
|
|
|
self.mapCtx.translateMarker({ |
|
|
|
|
markerId: 1, |
|
|
|
|
@ -223,7 +235,7 @@ |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
poitap: function(e) { |
|
|
|
|
poitap: function (e) { |
|
|
|
|
console.log(e, 'poitap'); |
|
|
|
|
var obj = e.detail; |
|
|
|
|
self.searchKey = obj.name; |
|
|
|
|
@ -231,7 +243,7 @@ |
|
|
|
|
self.toLocation(obj); |
|
|
|
|
}, |
|
|
|
|
// 取消删除 |
|
|
|
|
Cancel: function() {}, |
|
|
|
|
Cancel: function () {}, |
|
|
|
|
|
|
|
|
|
submit(ref) { |
|
|
|
|
let this_ = this |
|
|
|
|
@ -252,12 +264,12 @@ |
|
|
|
|
title: `创建成功`, |
|
|
|
|
duration: 1500, |
|
|
|
|
success() { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
this_.reset(); |
|
|
|
|
uni.reLaunch({ |
|
|
|
|
url: '/pages/block/index' |
|
|
|
|
}); |
|
|
|
|
}, 1500) |
|
|
|
|
},1500) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
@ -270,7 +282,6 @@ |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
drawMap(val) { |
|
|
|
|
console.log(val) |
|
|
|
|
const str = encodeURIComponent(JSON.stringify(val)) |
|
|
|
|
uni.redirectTo({ |
|
|
|
|
url: '/sunPages/drawMap/drawMap?str=' + str |
|
|
|
|
@ -287,6 +298,11 @@ |
|
|
|
|
}; |
|
|
|
|
this.polygons = []; |
|
|
|
|
}, |
|
|
|
|
clearMap(){ |
|
|
|
|
this.polygons = []; |
|
|
|
|
this.formData.positionStr= null |
|
|
|
|
this.formData.blockArea= null |
|
|
|
|
}, |
|
|
|
|
initmapPolygon() { |
|
|
|
|
let this_ = this; |
|
|
|
|
const mapCon = uni.createMapContext('map'); |
|
|
|
|
@ -302,10 +318,8 @@ |
|
|
|
|
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', |
|
|
|
|
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(() => { |
|
|
|
|
@ -332,23 +346,21 @@ |
|
|
|
|
return [centerLat, centerLng]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.not-show { |
|
|
|
|
.not-show { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
} |
|
|
|
|
.content { |
|
|
|
|
background-color: #f1f1f1; |
|
|
|
|
overflow: hidden; |
|
|
|
|
min-height: 100vh; |
|
|
|
|
color: #646464; |
|
|
|
|
font-size: 40rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.option { |
|
|
|
|
} |
|
|
|
|
.option { |
|
|
|
|
max-height: 300rpx; |
|
|
|
|
width: 90%; |
|
|
|
|
line-height: 60rpx; |
|
|
|
|
@ -359,9 +371,8 @@ |
|
|
|
|
overflow: scroll; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.column_item { |
|
|
|
|
} |
|
|
|
|
.column_item { |
|
|
|
|
padding: 0 40rpx; |
|
|
|
|
height: 60rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
@ -372,33 +383,29 @@ |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
color: #fff; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.column_item:active { |
|
|
|
|
} |
|
|
|
|
.column_item:active { |
|
|
|
|
background-color: #8f8f94; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.page-section-gap { |
|
|
|
|
.page-section-gap { |
|
|
|
|
width: 100%; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
z-index: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.color { |
|
|
|
|
} |
|
|
|
|
.color { |
|
|
|
|
width: 50rpx; |
|
|
|
|
height: 50rpx; |
|
|
|
|
border-radius: 6rpx; |
|
|
|
|
border: solid 1rpx #d0d0d0; |
|
|
|
|
background-color: transparent; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.input-slot-right { |
|
|
|
|
} |
|
|
|
|
.input-slot-right { |
|
|
|
|
background-color: #eee; |
|
|
|
|
padding: 10rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.map-view { |
|
|
|
|
} |
|
|
|
|
.map-view { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 500rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
@ -412,14 +419,29 @@ |
|
|
|
|
|
|
|
|
|
.map-btn-group { |
|
|
|
|
position: absolute; |
|
|
|
|
background-color: #fff; |
|
|
|
|
padding: 14rpx 30rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
z-index: 9; |
|
|
|
|
bottom: 20rpx; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
} |
|
|
|
|
right: 30rpx; |
|
|
|
|
box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 52rpx; |
|
|
|
|
height: 52rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.form-box { |
|
|
|
|
.text { |
|
|
|
|
margin-top: -4px; |
|
|
|
|
color: #14c171; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.form-box { |
|
|
|
|
padding: 40rpx 20rpx; |
|
|
|
|
margin: 0 20rpx; |
|
|
|
|
background: #fff; |
|
|
|
|
@ -428,11 +450,13 @@ |
|
|
|
|
|
|
|
|
|
/deep/ .uni-forms-item { |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
display: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.no-map{ |
|
|
|
|
width: 100%; |
|
|
|
|
height: fit-content; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
