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. 25
      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']);
const loading = ref(false)
// 显示表单抽屉
const showDrawer = ref(false)
const dataLoading = ref(false)
// 页面状态 1添加 2修改 3查看
const formStatus = ref(1)
// 表单数据
const formData = ref({})
const resetForm = (params) => {
formData.value = {
@ -44,10 +49,19 @@ const resetForm = (params) => {
}
}
const toAdd = (params = {}) => {
formStatus.value = 1
resetForm(deepClone(params))
uploadJsonData.value = []
showDrawer.value = true
}
const toUpdate = (row) => {
formStatus.value = 2
showDrawer.value = true
}
const toView = (row) => {
formStatus.value = 3
showDrawer.value = true
}
// 计算地块面积(亩)
const calculateArea = () => {
let value = [];
@ -104,7 +118,9 @@ const saveMassif = () => {
},2000)
}
defineExpose({
toAdd
toAdd,
toUpdate,
toView
})
</script>
@ -112,39 +128,44 @@ defineExpose({
<div>
<left-drawer v-model="showDrawer" width="40%">
<div class="title">
新增地块
<div v-if="formStatus === 1">新增地块</div>
<div v-if="formStatus === 2">编辑地块</div>
<div v-if="formStatus === 3">地块详情</div>
</div>
<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-col :span="24">
<title-divider title="基本信息"/>
</el-col>
<el-col :span="12">
<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-col>
<el-col :span="12">
<el-tooltip
content="点击[亩]字可以自动计算坐标点面积"
placement="top"
:disabled="formStatus===3"
>
<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>
</el-input>
<div v-if="formStatus===3">{{formData.area}}亩</div>
</el-form-item>
</el-tooltip>
</el-col>
<el-col :span="12">
<el-form-item label="所属基地/资源圃" prop="name">
<el-input disabled></el-input>
<el-input disabled v-if="formStatus!==3"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<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"
:value="item.value"></el-option>
</el-select>
@ -152,7 +173,7 @@ defineExpose({
</el-col>
<el-col :span="12">
<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"
:value="item.value"></el-option>
</el-select>
@ -160,18 +181,18 @@ defineExpose({
</el-col>
<el-col :span="12">
<el-form-item label="当前状态" prop="name">
<el-switch></el-switch>
<el-switch v-if="formStatus!==3"></el-switch>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="name">
<el-input placeholder="请输入备注"></el-input>
<el-input placeholder="请输入备注" v-if="formStatus!==3"></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<title-divider title="坐标信息" style="margin-top: 10px"/>
</el-col>
<el-col :span="24">
<el-col :span="24" v-if="formStatus!==3">
<el-row>
<el-col :span="16">
坐标上传方式
@ -200,7 +221,7 @@ defineExpose({
</el-col>
</el-row>
</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">
<el-row :gutter="10">
<el-col :span="11">
@ -220,7 +241,7 @@ defineExpose({
</el-col>
</el-row>
</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-column prop="name" label="坐标序号" width="100" align="center">
<template #default="scope">
@ -235,7 +256,7 @@ defineExpose({
</el-form>
</div>
<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>
</template>
</left-drawer>

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

@ -538,6 +538,12 @@ const updMassifStatus = (item,enabled) => {
const toAddMassif = () => {
massifFormRef.value.toAdd()
}
const toUpdateMassif = (row) => {
massifFormRef.value.toUpdate(row)
}
const toViewMassif = (row) => {
massifFormRef.value.toView(row)
}
</script>
<template>
@ -634,7 +640,8 @@ const toAddMassif = () => {
: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-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">
@ -649,7 +656,8 @@ const toAddMassif = () => {
<el-popover placement="bottom" :width="70" trigger="hover">
<template #reference>
<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>
</template>
<div>
@ -701,10 +709,10 @@ const toAddMassif = () => {
<i-more theme="outline" size="24" fill="#5c5e5d"/>
</template>
<div>
<div class="more-item">
<div class="more-item" @click="toViewMassif(item)">
地块详情
</div>
<div class="more-item">
<div class="more-item" @click="toUpdateMassif(item)">
编辑地块
</div>
<div class="more-item" @click="delMassif(item,index)">
@ -799,6 +807,8 @@ const toAddMassif = () => {
//地块列表
.massif-list {
max-height: 650px;
overflow: auto;
.title-icon {
padding: 6px 5px 4px 5px;
display: inline-block;
@ -825,7 +835,6 @@ const toAddMassif = () => {
border-radius: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 10px;
margin: 0 -5px;
.massif-item-right {
display: flex;
@ -861,16 +870,19 @@ const toAddMassif = () => {
background: none;
color: #FFFFFF;
}
.more-item {
text-align: center;
//鼠标悬浮变成点击
cursor: pointer;
padding: 5px 0;
&:hover {
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
}
//绘制操作区
.protract-control {
position: absolute;
@ -883,14 +895,17 @@ const toAddMassif = () => {
min-width: 100px;
padding: 5px;
}
//修改确认弹窗样式
.message-box {
--el-messagebox-width: 450px;
padding: 20px;
.el-message-box__message {
text-align: center;
width: 100%;
}
.el-message-box__btns {
justify-content: center;
}

Write Preview
Loading…
Cancel
Save