JiaSu
/
sugarbreed-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

基地地图完成

Browse Source
master
贾肃 5 months ago
parent e47bc80887
commit 7ff42130ee
2 changed files with 122 additions and 86 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 49
      src/views/system/base/massifForm.vue
  2. 157
      src/views/system/base/massifMap.vue

49
src/views/system/base/massifForm.vue
Unescape View File

@ -28,7 +28,12 @@ const selectOptions = reactive({
}) })
let emit = defineEmits(['beforeSubmit','submitSuccess']); let emit = defineEmits(['beforeSubmit','submitSuccess']);
const loading = ref(false) const loading = ref(false)
// 显示表单抽屉
const showDrawer = ref(false) const showDrawer = ref(false)
const dataLoading = ref(false)
// 页面状态 1添加 2修改 3查看
const formStatus = ref(1)
// 表单数据
const formData = ref({}) const formData = ref({})
const resetForm = (params) => { const resetForm = (params) => {
formData.value = { formData.value = {
@ -44,10 +49,19 @@ const resetForm = (params) => {
} }
} }
const toAdd = (params = {}) => { const toAdd = (params = {}) => {
formStatus.value = 1
resetForm(deepClone(params)) resetForm(deepClone(params))
uploadJsonData.value = [] uploadJsonData.value = []
showDrawer.value = true showDrawer.value = true
} }
const toUpdate = (row) => {
formStatus.value = 2
showDrawer.value = true
}
const toView = (row) => {
formStatus.value = 3
showDrawer.value = true
}
// 计算地块面积(亩) // 计算地块面积(亩)
const calculateArea = () => { const calculateArea = () => {
let value = []; let value = [];
@ -104,7 +118,9 @@ const saveMassif = () => {
},2000) },2000)
} }
defineExpose({ defineExpose({
toAdd toAdd,
toUpdate,
toView
}) })
</script> </script>
@ -112,39 +128,44 @@ defineExpose({
<div> <div>
<left-drawer v-model="showDrawer" width="40%"> <left-drawer v-model="showDrawer" width="40%">
<div class="title"> <div class="title">
新增地块 <div v-if="formStatus === 1">新增地块</div>
<div v-if="formStatus === 2">编辑地块</div>
<div v-if="formStatus === 3">地块详情</div>
</div> </div>
<div class="form"> <div class="form">
<el-form v-model="formData" label-position="top"> <el-form v-model="formData" :label-position="formStatus===3?'left':'top'">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24"> <el-col :span="24">
<title-divider title="基本信息"/> <title-divider title="基本信息"/>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="地块名称" prop="name"> <el-form-item label="地块名称" prop="name">
<el-input placeholder="请输入地块名称"></el-input> <el-input placeholder="请输入地块名称" v-if="formStatus!==3"></el-input>
<div v-else>{{formData.name}}</div>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-tooltip <el-tooltip
content="点击[亩]字可以自动计算坐标点面积" content="点击[亩]字可以自动计算坐标点面积"
placement="top" placement="top"
:disabled="formStatus===3"
> >
<el-form-item label="地块面积" prop="name"> <el-form-item label="地块面积" prop="name">
<el-input v-model="formData.area"> <el-input v-model="formData.area" v-if="formStatus!==3">
<template #append><el-button @click="calculateArea">亩</el-button></template> <template #append><el-button @click="calculateArea">亩</el-button></template>
</el-input> </el-input>
<div v-if="formStatus===3">{{formData.area}}亩</div>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="所属基地/资源圃" prop="name"> <el-form-item label="所属基地/资源圃" prop="name">
<el-input disabled></el-input> <el-input disabled v-if="formStatus!==3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="地块性质" prop="name"> <el-form-item label="地块性质" prop="name">
<el-select placeholder="请选择地块性质" clearable> <el-select placeholder="请选择地块性质" clearable v-if="formStatus!==3">
<el-option v-for="item in selectOptions.massifType" :key="item.value" :label="item.label" <el-option v-for="item in selectOptions.massifType" :key="item.value" :label="item.label"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
@ -152,7 +173,7 @@ defineExpose({
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="当前作物" prop="name"> <el-form-item label="当前作物" prop="name">
<el-select placeholder="请选择当前作物" clearable multiple> <el-select placeholder="请选择当前作物" clearable multiple v-if="formStatus!==3">
<el-option v-for="item in selectOptions.cropClass" :key="item.value" :label="item.label" <el-option v-for="item in selectOptions.cropClass" :key="item.value" :label="item.label"
:value="item.value"></el-option> :value="item.value"></el-option>
</el-select> </el-select>
@ -160,18 +181,18 @@ defineExpose({
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="当前状态" prop="name"> <el-form-item label="当前状态" prop="name">
<el-switch></el-switch> <el-switch v-if="formStatus!==3"></el-switch>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="备注" prop="name"> <el-form-item label="备注" prop="name">
<el-input placeholder="请输入备注"></el-input> <el-input placeholder="请输入备注" v-if="formStatus!==3"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<title-divider title="坐标信息" style="margin-top: 10px"/> <title-divider title="坐标信息" style="margin-top: 10px"/>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24" v-if="formStatus!==3">
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
坐标上传方式 坐标上传方式
@ -200,7 +221,7 @@ defineExpose({
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col v-if="formData.coordinateType === 1" :span="24" v-for="(item,index) in formData.coordinateList" <el-col v-if="formData.coordinateType === 1 && formStatus!==3" :span="24" v-for="(item,index) in formData.coordinateList"
:key="index" style="margin-top: 10px"> :key="index" style="margin-top: 10px">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="11"> <el-col :span="11">
@ -220,7 +241,7 @@ defineExpose({
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="24" v-if="formData.coordinateType === 2"> <el-col :span="24" v-if="formData.coordinateType === 2 || formStatus===3">
<el-table :data="uploadJsonData" border style="margin-top: 10px"> <el-table :data="uploadJsonData" border style="margin-top: 10px">
<el-table-column prop="name" label="坐标序号" width="100" align="center"> <el-table-column prop="name" label="坐标序号" width="100" align="center">
<template #default="scope"> <template #default="scope">
@ -235,7 +256,7 @@ defineExpose({
</el-form> </el-form>
</div> </div>
<template #footer> <template #footer>
<el-button type="primary" :loading="loading" @click="saveMassif">保存</el-button> <el-button v-if="formStatus!==3" type="primary" :loading="loading" @click="saveMassif">保存</el-button>
<el-button @click="showDrawer = false">取消</el-button> <el-button @click="showDrawer = false">取消</el-button>
</template> </template>
</left-drawer> </left-drawer>

157
src/views/system/base/massifMap.vue
Unescape View File

@ -164,10 +164,10 @@ const polygonList = reactive([
// 垄列表 // 垄列表
const ridgeList = ref([ const ridgeList = ref([
{ {
id:1, id: 1,
polygonId:1, polygonId: 1,
title:'测试垄1', title: '测试垄1',
path:[ path: [
[ [
116.337386, 116.337386,
39.979027 39.979027
@ -179,10 +179,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:2, id: 2,
polygonId:1, polygonId: 1,
title:'测试垄2', title: '测试垄2',
path:[ path: [
[ [
116.337528, 116.337528,
39.979023 39.979023
@ -194,10 +194,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:3, id: 3,
polygonId:2, polygonId: 2,
title:'测试垄3', title: '测试垄3',
path:[ path: [
[ [
116.338439, 116.338439,
39.978878 39.978878
@ -209,10 +209,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:1, id: 1,
polygonId:1, polygonId: 1,
title:'垄1', title: '垄1',
path:[ path: [
[ [
107.585681, 107.585681,
22.481152 22.481152
@ -224,10 +224,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:2, id: 2,
polygonId:1, polygonId: 1,
title:'垄28', title: '垄28',
path:[ path: [
[ [
107.585536, 107.585536,
22.481152 22.481152
@ -239,10 +239,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:3, id: 3,
polygonId:2, polygonId: 2,
title:'垄1', title: '垄1',
path:[ path: [
[ [
107.585526, 107.585526,
22.481149 22.481149
@ -254,10 +254,10 @@ const ridgeList = ref([
] ]
}, },
{ {
id:3, id: 3,
polygonId:2, polygonId: 2,
title:'垄43', title: '垄43',
path:[ path: [
[ [
107.585274, 107.585274,
22.481137 22.481137
@ -272,9 +272,9 @@ const ridgeList = ref([
// 植株列表 // 植株列表
const plantList = ref([ const plantList = ref([
{ {
id:1, id: 1,
polygonId:1, polygonId: 1,
title:'001', title: '001',
path: path:
[ [
116.337387, 116.337387,
@ -282,9 +282,9 @@ const plantList = ref([
] ]
}, },
{ {
id:2, id: 2,
polygonId:1, polygonId: 1,
title:'002', title: '002',
path: path:
[ [
116.337388, 116.337388,
@ -292,9 +292,9 @@ const plantList = ref([
] ]
}, },
{ {
id:3, id: 3,
polygonId:1, polygonId: 1,
title:'003', title: '003',
path: path:
[ [
116.337387, 116.337387,
@ -302,9 +302,9 @@ const plantList = ref([
] ]
}, },
{ {
id:4, id: 4,
polygonId:1, polygonId: 1,
title:'004', title: '004',
path: path:
[ [
116.33739, 116.33739,
@ -312,9 +312,9 @@ const plantList = ref([
] ]
}, },
{ {
id:5, id: 5,
polygonId:1, polygonId: 1,
title:'005', title: '005',
path: path:
[ [
116.337395, 116.337395,
@ -322,9 +322,9 @@ const plantList = ref([
] ]
}, },
{ {
id:6, id: 6,
polygonId:1, polygonId: 1,
title:'006', title: '006',
path: path:
[ [
116.33739, 116.33739,
@ -332,9 +332,9 @@ const plantList = ref([
] ]
}, },
{ {
id:7, id: 7,
polygonId:1, polygonId: 1,
title:'007', title: '007',
path: path:
[ [
116.337529, 116.337529,
@ -342,9 +342,9 @@ const plantList = ref([
] ]
}, },
{ {
id:8, id: 8,
polygonId:1, polygonId: 1,
title:'008', title: '008',
path: path:
[ [
116.337531, 116.337531,
@ -352,9 +352,9 @@ const plantList = ref([
] ]
}, },
{ {
id:9, id: 9,
polygonId:2, polygonId: 2,
title:'002', title: '002',
path: path:
[ [
116.338442, 116.338442,
@ -362,9 +362,9 @@ const plantList = ref([
] ]
}, },
{ {
id:10, id: 10,
polygonId:2, polygonId: 2,
title:'003', title: '003',
path: path:
[ [
116.338445, 116.338445,
@ -516,7 +516,7 @@ const clickCurrentMassif = (item) => {
center.value = turf.center(points).geometry.coordinates center.value = turf.center(points).geometry.coordinates
} }
// 删除地块 // 删除地块
const delMassif = (item,index) => { const delMassif = (item, index) => {
ElMessageBox.confirm( ElMessageBox.confirm(
'地块删除后，将无法被找回，是否人要删除该地块？', '地块删除后，将无法被找回，是否人要删除该地块？',
'删除地块', '删除地块',
@ -525,19 +525,25 @@ const delMassif = (item,index) => {
cancelButtonText: '不，我再想想', cancelButtonText: '不，我再想想',
customClass: 'message-box' customClass: 'message-box'
} }
).then(()=>{ ).then(() => {
polygonList.splice(index,1) polygonList.splice(index, 1)
ElMessage.success(`${item.label || '地块'}删除成功`) ElMessage.success(`${item.label || '地块'}删除成功`)
}) })
} }
const updMassifStatus = (item,enabled) => { const updMassifStatus = (item, enabled) => {
item.enabled = enabled item.enabled = enabled
ElMessage.success(`${item.title || '地块'}状态已更新为${enabled?'启用':'禁用'}`) ElMessage.success(`${item.title || '地块'}状态已更新为${enabled ? '启用' : '禁用'}`)
} }
// 打开添加弹窗 // 打开添加弹窗
const toAddMassif = () => { const toAddMassif = () => {
massifFormRef.value.toAdd() massifFormRef.value.toAdd()
} }
const toUpdateMassif = (row) => {
massifFormRef.value.toUpdate(row)
}
const toViewMassif = (row) => {
massifFormRef.value.toView(row)
}
</script> </script>
<template> <template>
@ -634,7 +640,8 @@ const toAddMassif = () => {
:visible="true" :visible="true"
:zooms="[16,20]" :zooms="[16,20]"
:label="{content:`<span style='color: #a4e36e'>${plant.title}</span>`,offset:[0,0]}"> :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-if="control.showPlant" style="border-radius: 50%;height: 15px;width: 15px"
:style="{background:'#a4e36e'}"></div>
<div v-else></div> <div v-else></div>
</el-amap-marker> </el-amap-marker>
<div class="top-block"> <div class="top-block">
@ -649,7 +656,8 @@ const toAddMassif = () => {
<el-popover placement="bottom" :width="70" trigger="hover"> <el-popover placement="bottom" :width="70" trigger="hover">
<template #reference> <template #reference>
<el-button type="primary" plain icon="Plus"> <el-button type="primary" plain icon="Plus">
新增地块<i-down theme="outline" size="20" :fill="theme"/> 新增地块
<i-down theme="outline" size="20" :fill="theme"/>
</el-button> </el-button>
</template> </template>
<div> <div>
@ -701,17 +709,17 @@ const toAddMassif = () => {
<i-more theme="outline" size="24" fill="#5c5e5d"/> <i-more theme="outline" size="24" fill="#5c5e5d"/>
</template> </template>
<div> <div>
<div class="more-item"> <div class="more-item" @click="toViewMassif(item)">
地块详情 地块详情
</div> </div>
<div class="more-item"> <div class="more-item" @click="toUpdateMassif(item)">
编辑地块 编辑地块
</div> </div>
<div class="more-item" @click="delMassif(item,index)"> <div class="more-item" @click="delMassif(item,index)">
删除地块 删除地块
</div> </div>
<div class="more-item" @click="updMassifStatus(item,!item.enabled)"> <div class="more-item" @click="updMassifStatus(item,!item.enabled)">
{{ item.enabled?'禁用':'启用' }}地块 {{ item.enabled ? '禁用' : '启用' }}地块
</div> </div>
</div> </div>
</el-popover> </el-popover>
@ -799,6 +807,8 @@ const toAddMassif = () => {
//地块列表 //地块列表
.massif-list { .massif-list {
max-height: 650px; max-height: 650px;
overflow: auto;
.title-icon { .title-icon {
padding: 6px 5px 4px 5px; padding: 6px 5px 4px 5px;
display: inline-block; display: inline-block;
@ -825,7 +835,6 @@ const toAddMassif = () => {
border-radius: 5px; border-radius: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08); border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 10px; padding: 10px;
margin: 0 -5px;
.massif-item-right { .massif-item-right {
display: flex; display: flex;
@ -861,16 +870,19 @@ const toAddMassif = () => {
background: none; background: none;
color: #FFFFFF; color: #FFFFFF;
} }
.more-item { .more-item {
text-align: center; text-align: center;
//鼠标悬浮变成点击 //鼠标悬浮变成点击
cursor: pointer; cursor: pointer;
padding: 5px 0; padding: 5px 0;
&:hover { &:hover {
background-color: var(--el-color-primary-light-9); background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
//绘制操作区 //绘制操作区
.protract-control { .protract-control {
position: absolute; position: absolute;
@ -879,18 +891,21 @@ const toAddMassif = () => {
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.el-popover.el-popper{ .el-popover.el-popper {
min-width: 100px; min-width: 100px;
padding: 5px; padding: 5px;
} }
//修改确认弹窗样式 //修改确认弹窗样式
.message-box { .message-box {
--el-messagebox-width: 450px; --el-messagebox-width: 450px;
padding: 20px; padding: 20px;
.el-message-box__message{
.el-message-box__message {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.el-message-box__btns { .el-message-box__btns {
justify-content: center; justify-content: center;
} }

Write Preview
Loading…
Cancel
Save