|
|
@@ -20,7 +20,7 @@
|
|
|
v-for="(item, index) in locationOptions.list"
|
|
|
:key="index"
|
|
|
:label="item.title"
|
|
|
- :value="item.point"
|
|
|
+ :value="{ value: item.point, item }"
|
|
|
>
|
|
|
<span>{{ item.title }}</span>
|
|
|
<span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district }}</span>
|
|
|
@@ -29,59 +29,71 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 创建 -->
|
|
|
- <div class="create-box">
|
|
|
- <div class="box-content">
|
|
|
- <div class="create-title">
|
|
|
- <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
|
|
|
- 创建农场
|
|
|
- </div>
|
|
|
- <div class="create-content">
|
|
|
- <div class="create-from">
|
|
|
- <el-form
|
|
|
- ref="ruleFormRef"
|
|
|
- :model="ruleForm"
|
|
|
- :rules="rules"
|
|
|
- label-width="auto"
|
|
|
- class="demo-ruleForm"
|
|
|
- >
|
|
|
- <el-form-item label="农场位置" prop="position">
|
|
|
- <div class="position-wrap">
|
|
|
- <el-input placeholder="农场面积" readonly v-model="ruleForm.position" autocomplete="off" />
|
|
|
- <div class="draw-btn">点击勾选地块</div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农场面积" prop="area">
|
|
|
- <el-input placeholder="勾选地块获得农场面积" v-model="ruleForm.area" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="种植作物" prop="period">
|
|
|
- <div class="select-wrap">
|
|
|
- <el-select
|
|
|
- v-model="ruleForm.type"
|
|
|
- placeholder="作物类型"
|
|
|
- >
|
|
|
- <el-option label="荔枝" value="lichi" />
|
|
|
- <el-option label="龙眼" value="ly" />
|
|
|
- </el-select>
|
|
|
- <el-select
|
|
|
- v-model="ruleForm.period"
|
|
|
- placeholder="物候期"
|
|
|
- class="period-select"
|
|
|
- >
|
|
|
- <el-option label="秋梢期" value="秋梢期" />
|
|
|
- <el-option label="开花期" value="开花期" />
|
|
|
- <el-option label="膨果期" value="膨果期" />
|
|
|
- <el-option label="成熟期" value="成熟期" />
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="农场名称" prop="name">
|
|
|
- <el-input placeholder="请输入您的农场名称" v-model="ruleForm.name" autocomplete="off" />
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <div class="create-wrap">
|
|
|
+ <div class="create-box">
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="create-title">
|
|
|
+ <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
|
|
|
+ 创建农场
|
|
|
</div>
|
|
|
- <div class="create-btn">
|
|
|
- <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
|
|
|
- <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">立即创建</div>
|
|
|
+ <div class="create-content">
|
|
|
+ <div class="create-from">
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="auto"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="农场位置" prop="position">
|
|
|
+ <div class="position-wrap">
|
|
|
+ <el-input
|
|
|
+ placeholder="农场位置"
|
|
|
+ readonly
|
|
|
+ v-model="ruleForm.position"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ <div class="draw-btn" @click="toSubPage">点击勾选地块</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场面积" prop="area">
|
|
|
+ <el-input
|
|
|
+ placeholder="勾选地块获得农场面积"
|
|
|
+ v-model="ruleForm.area"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="种植作物" prop="period">
|
|
|
+ <div class="select-wrap">
|
|
|
+ <el-select v-model="ruleForm.type" placeholder="作物类型">
|
|
|
+ <el-option label="荔枝" value="lichi" />
|
|
|
+ <el-option label="龙眼" value="ly" />
|
|
|
+ </el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.period"
|
|
|
+ placeholder="物候期"
|
|
|
+ class="period-select"
|
|
|
+ >
|
|
|
+ <el-option label="秋梢期" value="秋梢期" />
|
|
|
+ <el-option label="开花期" value="开花期" />
|
|
|
+ <el-option label="膨果期" value="膨果期" />
|
|
|
+ <el-option label="成熟期" value="成熟期" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场名称" prop="name">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入您的农场名称"
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="create-btn">
|
|
|
+ <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
|
|
|
+ <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">立即创建</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -93,9 +105,10 @@
|
|
|
<script setup>
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
import IndexMap from "./map/index.js";
|
|
|
-import { useRoute } from "vue-router";
|
|
|
+import { useRoute, useRouter } from "vue-router";
|
|
|
import { onMounted, ref, reactive } from "vue";
|
|
|
const route = useRoute();
|
|
|
+const router = useRouter();
|
|
|
|
|
|
const indexMap = new IndexMap();
|
|
|
const mapContainer = ref(null);
|
|
|
@@ -141,9 +154,10 @@ const remoteMethod = async (keyword) => {
|
|
|
};
|
|
|
|
|
|
const handleSearchRes = (v) => {
|
|
|
- const parts = v.split(",");
|
|
|
+ const parts = v.value.split(",");
|
|
|
const coordinateArray = [parseFloat(parts[1]), parseFloat(parts[0])];
|
|
|
indexMap.setMapPosition(coordinateArray);
|
|
|
+ ruleForm.position = v.item?.title || v.item?.address;
|
|
|
};
|
|
|
|
|
|
// 表单
|
|
|
@@ -177,7 +191,12 @@ const submitForm = (formEl) => {
|
|
|
const resetForm = (formEl) => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
+ router.go(-1)
|
|
|
};
|
|
|
+
|
|
|
+function toSubPage() {
|
|
|
+ router.push("/edit_map");
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -188,7 +207,7 @@ const resetForm = (formEl) => {
|
|
|
overflow: hidden;
|
|
|
.map-container {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(100% - 240px);
|
|
|
}
|
|
|
.farm-content {
|
|
|
position: absolute;
|
|
|
@@ -258,11 +277,17 @@ const resetForm = (formEl) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .create-wrap {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(180deg, transparent 0%, #f5f7fb 20%);
|
|
|
+ }
|
|
|
+
|
|
|
.create-box {
|
|
|
pointer-events: all;
|
|
|
- position: absolute;
|
|
|
- bottom: 10px;
|
|
|
- left: 12px;
|
|
|
+ margin: 0 12px 10px 12px;
|
|
|
width: calc(100% - 24px);
|
|
|
background: #e0f1fe;
|
|
|
border-radius: 14px;
|
|
|
@@ -275,14 +300,14 @@ const resetForm = (formEl) => {
|
|
|
content: "";
|
|
|
width: 79px;
|
|
|
height: 72px;
|
|
|
- background: url("@/assets/img/home/creat-bg.png") no-repeat center /100% 100%;
|
|
|
+ background: url("@/assets/img/home/creat-bg.png") no-repeat center / 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.create-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 12px 6px 12px 12px;
|
|
|
- color: #0089F5;
|
|
|
+ color: #0089f5;
|
|
|
font-size: 18px;
|
|
|
font-weight: bold;
|
|
|
.title-icon {
|
|
|
@@ -339,6 +364,9 @@ const resetForm = (formEl) => {
|
|
|
.el-form-item__label {
|
|
|
color: #000;
|
|
|
}
|
|
|
+ .el-form-item__error {
|
|
|
+ top: 117%;
|
|
|
+ }
|
|
|
.el-form-item {
|
|
|
position: relative;
|
|
|
&::after {
|
|
|
@@ -366,8 +394,8 @@ const resetForm = (formEl) => {
|
|
|
height: 30px;
|
|
|
line-height: 30px;
|
|
|
box-sizing: border-box;
|
|
|
- color: #2199F8;
|
|
|
- border: 1px solid #2199F8;
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
background: rgba(33, 153, 248, 0.1);
|
|
|
border-radius: 20px;
|
|
|
font-size: 12px;
|
|
|
@@ -375,31 +403,32 @@ const resetForm = (formEl) => {
|
|
|
}
|
|
|
}
|
|
|
.create-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- .btn-item {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- padding: 0 11px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-radius: 34px;
|
|
|
- font-size: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- &.sencond-btn {
|
|
|
- border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- &.primary-btn {
|
|
|
- background: linear-gradient(180deg, #76C3FF, #2199F8);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 10px;
|
|
|
+ .btn-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 11px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 34px;
|
|
|
+ font-size: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.sencond-btn {
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
+ color: #666666;
|
|
|
}
|
|
|
- .btn-item + .btn-item {
|
|
|
- margin-left: 5px;
|
|
|
+ &.primary-btn {
|
|
|
+ background: linear-gradient(180deg, #76c3ff, #2199f8);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+ .btn-item + .btn-item {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
