|
|
|
|
@ -13,8 +13,6 @@ const settingsStore = useSettingsStore()
|
|
|
|
|
const theme = computed(() => settingsStore.theme)
|
|
|
|
|
// 显示地块列表
|
|
|
|
|
const showMassifList = ref(true)
|
|
|
|
|
// 显示地块表单
|
|
|
|
|
const showMassifForm = ref(false)
|
|
|
|
|
const massifFormRef = ref(null)
|
|
|
|
|
// 当前地块
|
|
|
|
|
const currentMassif = ref(null)
|
|
|
|
|
@ -56,9 +54,9 @@ const protract = ref(false)
|
|
|
|
|
// 显示鼠标绘制
|
|
|
|
|
const createdMouse = ref(false)
|
|
|
|
|
|
|
|
|
|
// 文本标记
|
|
|
|
|
// 文本标记-地块名称
|
|
|
|
|
const componentText = ref([])
|
|
|
|
|
// 折线标记
|
|
|
|
|
// 折线标记-网格线
|
|
|
|
|
const gridLines = ref([])
|
|
|
|
|
// 地块列表
|
|
|
|
|
const polygonList = reactive([
|
|
|
|
|
@ -115,6 +113,157 @@ const polygonList = reactive([
|
|
|
|
|
fillColor: undefined
|
|
|
|
|
}
|
|
|
|
|
])
|
|
|
|
|
// 垄列表
|
|
|
|
|
const ridgeList = ref([
|
|
|
|
|
{
|
|
|
|
|
id:1,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'测试垄1',
|
|
|
|
|
path:[
|
|
|
|
|
[
|
|
|
|
|
116.337386,
|
|
|
|
|
39.979027
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337395,
|
|
|
|
|
39.978409
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:2,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'测试垄2',
|
|
|
|
|
path:[
|
|
|
|
|
[
|
|
|
|
|
116.337528,
|
|
|
|
|
39.979023
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.337535,
|
|
|
|
|
39.97841
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:3,
|
|
|
|
|
polygonId:2,
|
|
|
|
|
title:'测试垄3',
|
|
|
|
|
path:[
|
|
|
|
|
[
|
|
|
|
|
116.338439,
|
|
|
|
|
39.978878
|
|
|
|
|
],
|
|
|
|
|
[
|
|
|
|
|
116.338442,
|
|
|
|
|
39.978705
|
|
|
|
|
]
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
// 植株列表
|
|
|
|
|
const plantList = ref([
|
|
|
|
|
{
|
|
|
|
|
id:1,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'001',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337387,
|
|
|
|
|
39.978945
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:2,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'002',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337388,
|
|
|
|
|
39.978853
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:3,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'003',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337387,
|
|
|
|
|
39.978761
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:4,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'004',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.33739,
|
|
|
|
|
39.978668
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:5,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'005',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337395,
|
|
|
|
|
39.978581
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:6,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'006',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.33739,
|
|
|
|
|
39.978492
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:7,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'007',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337529,
|
|
|
|
|
39.978852
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:8,
|
|
|
|
|
polygonId:1,
|
|
|
|
|
title:'008',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.337531,
|
|
|
|
|
39.978672
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:9,
|
|
|
|
|
polygonId:2,
|
|
|
|
|
title:'002',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.338442,
|
|
|
|
|
39.97879
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id:10,
|
|
|
|
|
polygonId:2,
|
|
|
|
|
title:'003',
|
|
|
|
|
path:
|
|
|
|
|
[
|
|
|
|
|
116.338445,
|
|
|
|
|
39.978705
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
const polygonTemp = ref(null)
|
|
|
|
|
// 鼠标绘制地块完成
|
|
|
|
|
const draw = (value) => {
|
|
|
|
|
@ -328,6 +477,7 @@ const toAddMassif = () => {
|
|
|
|
|
:path="polygonTemp"
|
|
|
|
|
@addnode="updateMassif"
|
|
|
|
|
@removenode="updateMassif"
|
|
|
|
|
:zooms="[13,20]"
|
|
|
|
|
@adjust="updateMassif"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:editable="true"
|
|
|
|
|
@ -336,17 +486,52 @@ const toAddMassif = () => {
|
|
|
|
|
<el-amap-marker
|
|
|
|
|
v-if="control.massifLabel"
|
|
|
|
|
v-for="comText in componentText"
|
|
|
|
|
:zooms="[13,20]"
|
|
|
|
|
:position="comText.position"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:label="{content:comText.text,offset:[-50,0]}">
|
|
|
|
|
:label="{content:comText.text,offset:[-25,0]}">
|
|
|
|
|
<div></div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<!--折线-网格线-->
|
|
|
|
|
<el-amap-polyline
|
|
|
|
|
v-if="control.massifGrid"
|
|
|
|
|
v-for="grid in gridLines"
|
|
|
|
|
:zooms="[16,20]"
|
|
|
|
|
stroke-color="#e36ea4"
|
|
|
|
|
:path="grid"
|
|
|
|
|
:visible="true">
|
|
|
|
|
</el-amap-polyline>
|
|
|
|
|
<!--折线-垄-->
|
|
|
|
|
<el-amap-polyline
|
|
|
|
|
v-if="control.showRidge"
|
|
|
|
|
v-for="ridge in ridgeList"
|
|
|
|
|
:zooms="[16,20]"
|
|
|
|
|
:strokeWeight="5"
|
|
|
|
|
strokeColor="#a4e36e"
|
|
|
|
|
:path="ridge.path"
|
|
|
|
|
:visible="true">
|
|
|
|
|
</el-amap-polyline>
|
|
|
|
|
<!--点标记-垄标签-->
|
|
|
|
|
<el-amap-marker
|
|
|
|
|
v-if="control.ridgeLabel"
|
|
|
|
|
v-for="ridge in ridgeList"
|
|
|
|
|
:position="ridge.path[0]"
|
|
|
|
|
:zooms="[16,20]"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:label="{content:`<span style='color: #a4e36e'>${ridge.title}</span>`,offset:[-25,-10]}">
|
|
|
|
|
<div></div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<!--点标记-植株标签-->
|
|
|
|
|
<el-amap-marker
|
|
|
|
|
v-if="control.plantLabel"
|
|
|
|
|
v-for="plant in plantList"
|
|
|
|
|
:position="plant.path"
|
|
|
|
|
:visible="true"
|
|
|
|
|
:zooms="[16,20]"
|
|
|
|
|
:label="{content:`<span style='color: #a4e36e'>${plant.title}</span>`,offset:[0,0]}">
|
|
|
|
|
<div v-if="control.showPlant" style="border-radius: 50%;height: 15px;width: 15px" :style="{background:'#a4e36e'}"></div>
|
|
|
|
|
<div v-else></div>
|
|
|
|
|
</el-amap-marker>
|
|
|
|
|
<div class="top-block">
|
|
|
|
|
<base-right-control v-if="!protract" v-model="control"/>
|
|
|
|
|
<!--左侧操作区-->
|
|
|
|
|
@ -508,6 +693,7 @@ const toAddMassif = () => {
|
|
|
|
|
|
|
|
|
|
//地块列表
|
|
|
|
|
.massif-list {
|
|
|
|
|
max-height: 650px;
|
|
|
|
|
.title-icon {
|
|
|
|
|
padding: 6px 5px 4px 5px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
