|
|
@@ -0,0 +1,1338 @@
|
|
|
+<template>
|
|
|
+ <div class="create-farm">
|
|
|
+ <custom-header :name="paramsType === 'client' ? '新增用户' : paramsType === 'edit' ? '编辑农场' : '创建农场'"
|
|
|
+ :isGoBack="true" @goback="backgToHome"></custom-header>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <div class="map-container" ref="mapContainer"></div>
|
|
|
+ <div class="farm-content">
|
|
|
+ <div class="top-mask"></div>
|
|
|
+ <div class="farm-filter">
|
|
|
+ <el-select v-model="locationVal" filterable remote reserve-keyword placeholder="搜索位置"
|
|
|
+ :remote-method="remoteMethod" :loading="loading" @change="handleSearchRes"
|
|
|
+ popper-class="location-search-popper">
|
|
|
+ <el-option v-for="(item, index) in locationOptions.list" :key="index" :label="item.title"
|
|
|
+ :value="{ value: item.point, item }">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ <span class="sub-title">{{ item.province }}{{ item.city }}{{ item.district || '' }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 创建 -->
|
|
|
+ <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="" />
|
|
|
+ {{ paramsType === "client" ? "新增用户" : paramsType === "edit" ? "编辑农场" : "创建农场" }}
|
|
|
+ </div>
|
|
|
+ <div class="create-content">
|
|
|
+ <div class="create-from">
|
|
|
+ <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
|
|
|
+ <el-form-item label="农场位置" prop="address">
|
|
|
+ <div class="position-wrap">
|
|
|
+ <el-input placeholder="农场位置" readonly v-model="ruleForm.address"
|
|
|
+ autocomplete="off" />
|
|
|
+ <div class="draw-btn" @click="toSubPage">
|
|
|
+ {{ hasDefaultPolygon ? "点击勾选地块" : "新增地块" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="种植作物" prop="speciesItem">
|
|
|
+ <div class="select-wrap specie-wrap">
|
|
|
+ <el-select @change="changeSpecie" class="select-item specie-select"
|
|
|
+ v-model="ruleForm.speciesItem" placeholder="品类">
|
|
|
+ <el-option v-for="(item, index) in specieList" :key="index"
|
|
|
+ :label="item.name" :value="{ value: item.id, ...item }" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="ruleForm.typeIds" multiple collapse-tags
|
|
|
+ placeholder="品种(可多选)" class="period-select select-item period-select">
|
|
|
+ <el-option v-for="(item, index) in fruitsList" :key="index"
|
|
|
+ :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系人" prop="fzr">
|
|
|
+ <div class="area-box">
|
|
|
+ <el-input placeholder="请输入联系人姓名" v-model="ruleForm.fzr" autocomplete="off"
|
|
|
+ style="width: fit-content" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联系电话" prop="tel">
|
|
|
+ <div class="area-box">
|
|
|
+ <el-input placeholder="请输入联系人电话" v-model="ruleForm.tel" autocomplete="off"
|
|
|
+ style="width: fit-content" />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场面积" prop="mu">
|
|
|
+ <div class="area-box">
|
|
|
+ <el-input :placeholder="isFromEditMap ? '勾选地块获得农场面积' : '请输入农场的真实面积'
|
|
|
+ " v-model="ruleForm.mu" :readonly="isFromEditMap" type="text"
|
|
|
+ autocomplete="off" style="width: fit-content" @input="handleMianjiInput"
|
|
|
+ @keypress="handleMianjiKeypress" />
|
|
|
+ <div class="unit">亩</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="paramsType !== 'farmer'" label="客户类型" prop="userType"
|
|
|
+ class="select-wrap client-wrap">
|
|
|
+ <el-select class="select-item" v-model="ruleForm.userType" placeholder="请选择">
|
|
|
+ <el-option label="普通用户" :value="1" />
|
|
|
+ <el-option label="托管用户" :value="2" />
|
|
|
+ <el-option label="优质客户" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="农场名称" prop="name">
|
|
|
+ <el-input placeholder="请输入您的农场名称" v-model="ruleForm.name" autocomplete="off"
|
|
|
+ @input="handleFarmNameInput" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="paramsType === 'farmer'" label="基地类别" prop="baseType"
|
|
|
+ class="select-wrap client-wrap">
|
|
|
+ <el-select placeholder="请选择" v-model="ruleForm.baseType" autocomplete="off">
|
|
|
+ <el-option v-for="(item, index) in baseTypeList" :key="index"
|
|
|
+ :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- <Checkbox
|
|
|
+ v-if="paramsType !== 'client' && curRole == 0"
|
|
|
+ class="checkbox"
|
|
|
+ icon-size="18px"
|
|
|
+ shape="square"
|
|
|
+ v-model="ruleForm.defaultFarm"
|
|
|
+ >是否勾选为默认农场</Checkbox
|
|
|
+ > -->
|
|
|
+ </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)">
|
|
|
+ {{
|
|
|
+ paramsType === "client"
|
|
|
+ ? "添加"
|
|
|
+ : paramsType === "edit"
|
|
|
+ ? "确认修改"
|
|
|
+ : "立即创建"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 农情采集成功弹窗 -->
|
|
|
+ <tip-popup v-model:show="showSuccessPopup" type="success" text="农情采集成功" @confirm="handlePopupConfirm"
|
|
|
+ @handleClickOverlay="handlePopupConfirm" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import IndexMap from "./map/index.js";
|
|
|
+import { useRoute, useRouter } from "vue-router";
|
|
|
+import { mapLocation } from "./map/index.js";
|
|
|
+import { onMounted, ref, reactive, watch, onActivated, nextTick,onDeactivated } from "vue";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import { convertPointToArray } from "@/utils/index";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import { Checkbox } from "vant";
|
|
|
+import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
+import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const router = useRouter();
|
|
|
+const store = useStore();
|
|
|
+
|
|
|
+const indexMap = new IndexMap();
|
|
|
+const mapContainer = ref(null);
|
|
|
+
|
|
|
+// 农情采集成功弹窗
|
|
|
+const showSuccessPopup = ref(false);
|
|
|
+
|
|
|
+const handlePopupConfirm = () => {
|
|
|
+ showSuccessPopup.value = false;
|
|
|
+ router.replace(`/home`);
|
|
|
+};
|
|
|
+
|
|
|
+// 标记是否从编辑地图页面确认返回
|
|
|
+const isFromEditMap = ref(false);
|
|
|
+
|
|
|
+// 标记是否已创建默认地块
|
|
|
+const hasDefaultPolygon = ref(false);
|
|
|
+
|
|
|
+// 标记用户是否手动修改过农场名称
|
|
|
+const isFarmNameManuallyModified = ref(false);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 根据中心点生成指定边长的正方形地块WKT
|
|
|
+ * @param {Array} center - 中心点坐标 [lng, lat]
|
|
|
+ * @param {Number} sideLength - 正方形边长(米)
|
|
|
+ * @returns {Object} 包含WKT字符串和面积(亩)的对象
|
|
|
+ */
|
|
|
+function generateSquarePolygonBySideLength(center, sideLength) {
|
|
|
+ // 确保输入是数字类型
|
|
|
+ const lng = parseFloat(center[0]);
|
|
|
+ const lat = parseFloat(center[1]);
|
|
|
+
|
|
|
+ // 半边长(米)
|
|
|
+ const halfSide = sideLength / 2;
|
|
|
+
|
|
|
+ // 纬度方向:1度约等于111000米
|
|
|
+ const latDelta = halfSide / 111000;
|
|
|
+
|
|
|
+ // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
|
|
|
+ const lngDelta = halfSide / (111000 * Math.cos((lat * Math.PI) / 180));
|
|
|
+
|
|
|
+ // 计算四个顶点(逆时针顺序)
|
|
|
+ const topLeft = [lng - lngDelta, lat + latDelta];
|
|
|
+ const topRight = [lng + lngDelta, lat + latDelta];
|
|
|
+ const bottomRight = [lng + lngDelta, lat - latDelta];
|
|
|
+ const bottomLeft = [lng - lngDelta, lat - latDelta];
|
|
|
+
|
|
|
+ // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
|
|
|
+ // 明确使用join来格式化坐标点
|
|
|
+ const formatPoint = (point) => `${point[0]} ${point[1]}`;
|
|
|
+ const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft].map(formatPoint).join(", ");
|
|
|
+
|
|
|
+ // 注意：MULTIPOLYGON 和括号之间需要有一个空格
|
|
|
+ const wkt = `MULTIPOLYGON (((${coordinates})))`;
|
|
|
+
|
|
|
+ // 计算面积(亩): 边长200米 = 40,000平方米 ≈ 60亩
|
|
|
+ const areaInSquareMeters = sideLength * sideLength;
|
|
|
+ const areaInMu = (areaInSquareMeters / 666.67).toFixed(2);
|
|
|
+
|
|
|
+ return { wkt, area: areaInMu };
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 根据中心点和亩数生成正方形地块WKT
|
|
|
+ * @param {Array} center - 中心点坐标 [lng, lat]
|
|
|
+ * @param {Number} mu - 面积(亩)
|
|
|
+ * @returns {Object} 包含WKT字符串和面积(亩)的对象
|
|
|
+ */
|
|
|
+function generateSquarePolygonByMu(center, mu) {
|
|
|
+ // 确保输入是数字类型
|
|
|
+ const lng = parseFloat(center[0]);
|
|
|
+ const lat = parseFloat(center[1]);
|
|
|
+
|
|
|
+ // 1亩 ≈ 666.67平方米
|
|
|
+ const areaInSquareMeters = mu * 666.67;
|
|
|
+ // 正方形边长(米)
|
|
|
+ const sideLength = Math.sqrt(areaInSquareMeters);
|
|
|
+ // 半边长(米)
|
|
|
+ const halfSide = sideLength / 2;
|
|
|
+
|
|
|
+ // 纬度方向:1度约等于111000米
|
|
|
+ const latDelta = halfSide / 111000;
|
|
|
+
|
|
|
+ // 经度方向:需要根据纬度调整,1度约等于111000 * cos(lat)米
|
|
|
+ const lngDelta = halfSide / (111000 * Math.cos((lat * Math.PI) / 180));
|
|
|
+
|
|
|
+ // 计算四个顶点(逆时针顺序)
|
|
|
+ const topLeft = [lng - lngDelta, lat + latDelta];
|
|
|
+ const topRight = [lng + lngDelta, lat + latDelta];
|
|
|
+ const bottomRight = [lng + lngDelta, lat - latDelta];
|
|
|
+ const bottomLeft = [lng - lngDelta, lat - latDelta];
|
|
|
+
|
|
|
+ // 生成MULTIPOLYGON格式的WKT(需要闭合,所以第一个点要重复)
|
|
|
+ const formatPoint = (point) => `${point[0]} ${point[1]}`;
|
|
|
+ const coordinates = [topLeft, topRight, bottomRight, bottomLeft, topLeft].map(formatPoint).join(", ");
|
|
|
+
|
|
|
+ // 注意：MULTIPOLYGON 和括号之间需要有一个空格
|
|
|
+ const wkt = `MULTIPOLYGON (((${coordinates})))`;
|
|
|
+
|
|
|
+ return { wkt, area: parseFloat(mu).toFixed(2) };
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ // 清除上一次的地块数据，确保每次进入都是全新状态
|
|
|
+ store.commit("home/SET_FARM_POLYGON", null);
|
|
|
+ isFromEditMap.value = false; // 初始化时可以手动输入
|
|
|
+ hasDefaultPolygon.value = false; // 初始化时没有默认地块
|
|
|
+
|
|
|
+ centerPoint.value = store.state.home.miniUserLocationPoint;
|
|
|
+ // const arr = convertPointToArray(centerPoint.value);
|
|
|
+ // getLocationName(`${arr[1]},${arr[0]}`);
|
|
|
+ indexMap.initMap(centerPoint.value, mapContainer.value);
|
|
|
+
|
|
|
+ // 不再初始化时绘制默认地块，等待用户点击"新增地块"按钮
|
|
|
+ // 清空地块和面积数据
|
|
|
+ polygonArr.value = null;
|
|
|
+ ruleForm.mu = "";
|
|
|
+ ruleForm.typeIds = [];
|
|
|
+
|
|
|
+ // 如果是编辑模式，等待品类列表加载完成后再回填数据
|
|
|
+ if (route.query.type === "edit" && store.state.home.editFarmData) {
|
|
|
+ getSpecieList().then(() => {
|
|
|
+ populateEditData();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ getSpecieList();
|
|
|
+ }
|
|
|
+ getBaseTypeList();
|
|
|
+});
|
|
|
+
|
|
|
+const polygonArr = ref(null);
|
|
|
+const paramsType = ref(null);
|
|
|
+onActivated(() => {
|
|
|
+ const centerPointVal = sessionStorage.getItem('centerPoint') ? JSON.parse(sessionStorage.getItem('centerPoint')) : null;
|
|
|
+ paramsType.value = route.query.type;
|
|
|
+
|
|
|
+ centerPoint.value = centerPointVal || store.state.home.miniUserLocationPoint;
|
|
|
+ const arr = convertPointToArray(centerPoint.value);
|
|
|
+ getLocationName(`${arr[1]},${arr[0]}`);
|
|
|
+ // 仅在携带 isReload 标记、且不是编辑/小程序回流场景时，认为是一次全新创建，重置表单和地块，
|
|
|
+ // 避免破坏原有自动生成农场名称等逻辑
|
|
|
+ if (route.query.isReload && paramsType.value !== "edit" && !route.query.miniJson) {
|
|
|
+ // 重置表单字段到初始值
|
|
|
+ ruleFormRef.value && ruleFormRef.value.resetFields();
|
|
|
+ // 重置与地块绘制相关的内部状态
|
|
|
+ polygonArr.value = null;
|
|
|
+ isFromEditMap.value = false;
|
|
|
+ hasDefaultPolygon.value = false;
|
|
|
+ // 重置农场名称手动修改标记，允许自动生成农场名称
|
|
|
+ isFarmNameManuallyModified.value = false;
|
|
|
+ // 清空上一次地块缓存
|
|
|
+ store.commit("home/SET_FARM_POLYGON", null);
|
|
|
+ }
|
|
|
+ // 确保地图已初始化，使用 nextTick 等待 DOM 更新
|
|
|
+ nextTick(() => {
|
|
|
+ // 检查地图实例是否已初始化
|
|
|
+ if (!indexMap.kmap) {
|
|
|
+ // 如果地图未初始化，重新初始化
|
|
|
+ if (mapContainer.value) {
|
|
|
+ centerPoint.value = store.state.home.miniUserLocationPoint;
|
|
|
+ const arr = convertPointToArray(centerPoint.value);
|
|
|
+ indexMap.initMap(centerPoint.value, mapContainer.value);
|
|
|
+ }
|
|
|
+ // 等待地图初始化完成后再继续
|
|
|
+ setTimeout(() => {
|
|
|
+ handleMapUpdate();
|
|
|
+ }, 100);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ handleMapUpdate();
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+onDeactivated(() => {
|
|
|
+ sessionStorage.setItem('centerPoint', JSON.stringify(centerPoint.value));
|
|
|
+});
|
|
|
+
|
|
|
+// 处理地图更新的逻辑
|
|
|
+function handleMapUpdate() {
|
|
|
+ if (route.query.isReload) {
|
|
|
+ // 清除旧的地块数据
|
|
|
+ store.commit("home/SET_FARM_POLYGON", null);
|
|
|
+ isFromEditMap.value = false; // 从home进入，可以手动输入
|
|
|
+ hasDefaultPolygon.value = false; // 重置默认地块状态
|
|
|
+
|
|
|
+ centerPoint.value = store.state.home.miniUserLocationPoint;
|
|
|
+ const arr = convertPointToArray(centerPoint.value);
|
|
|
+ getLocationName(`${arr[1]},${arr[0]}`);
|
|
|
+ indexMap.setMapPosition(arr);
|
|
|
+
|
|
|
+ indexMap.clearLayer();
|
|
|
+
|
|
|
+ // 不再自动生成默认地块，等待用户点击"新增地块"
|
|
|
+ polygonArr.value = null;
|
|
|
+ ruleForm.mu = "";
|
|
|
+ ruleForm.typeIds = [];
|
|
|
+ ruleForm.defaultFarm = 0;
|
|
|
+
|
|
|
+ return; // 直接返回，不执行下面的逻辑
|
|
|
+ }
|
|
|
+
|
|
|
+ indexMap.clearLayer();
|
|
|
+ // 绘制勾画范围（从edit_map返回的情况）
|
|
|
+ const polygonData = store.state.home.polygonData;
|
|
|
+
|
|
|
+ // 优先处理从编辑地图页面返回的数据
|
|
|
+ if (polygonData) {
|
|
|
+ // 检查地块数据是否有效（数组存在且不为空）
|
|
|
+ const hasValidGeometry =
|
|
|
+ polygonData.geometryArr && Array.isArray(polygonData.geometryArr) && polygonData.geometryArr.length > 0;
|
|
|
+
|
|
|
+ if (hasValidGeometry) {
|
|
|
+ // 用户从edit_map返回，且有有效的地块数据
|
|
|
+ // 根据 isConfirmed 判断是否锁定输入框
|
|
|
+ if (polygonData.isConfirmed) {
|
|
|
+ // 用户点击了"确认"按钮，锁定输入框并显示精确面积
|
|
|
+ isFromEditMap.value = true;
|
|
|
+ ruleForm.mu = polygonData.mianji;
|
|
|
+ } else {
|
|
|
+ // 用户点击了"取消"，不锁定输入框，面积保持原样
|
|
|
+ isFromEditMap.value = false;
|
|
|
+ // 面积输入框保持之前的值，不更新
|
|
|
+ }
|
|
|
+ // 使用 nextTick 确保地图渲染完成后再设置地块
|
|
|
+ nextTick(() => {
|
|
|
+ indexMap.setAreaGeometry(polygonData.geometryArr);
|
|
|
+ });
|
|
|
+ polygonArr.value = polygonData.geometryArr;
|
|
|
+ // 有地块数据时，标记已创建默认地块
|
|
|
+ hasDefaultPolygon.value = true;
|
|
|
+ } else {
|
|
|
+ // 用户在编辑页面删除了所有地块
|
|
|
+ // 重置所有状态
|
|
|
+ polygonArr.value = null;
|
|
|
+ ruleForm.mu = "";
|
|
|
+ isFromEditMap.value = false;
|
|
|
+ hasDefaultPolygon.value = false;
|
|
|
+ ruleForm.defaultFarm = 0;
|
|
|
+ }
|
|
|
+ } else if (route.query.type === "edit" && store.state.home.editFarmData) {
|
|
|
+ // 如果是编辑模式且没有从编辑地图返回的数据，回填原始编辑数据
|
|
|
+ populateEditData();
|
|
|
+ } else if (centerPoint.value && polygonArr.value) {
|
|
|
+ // 没有新的编辑数据，保持当前地块
|
|
|
+ // 同样需要检查数据有效性
|
|
|
+ if (Array.isArray(polygonArr.value) && polygonArr.value.length > 0) {
|
|
|
+ nextTick(() => {
|
|
|
+ indexMap.setAreaGeometry(polygonArr.value);
|
|
|
+ });
|
|
|
+ // 保持 hasDefaultPolygon 状态
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索
|
|
|
+const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
|
|
|
+
|
|
|
+const locationVal = ref(null);
|
|
|
+const locationOptions = reactive({
|
|
|
+ list: [],
|
|
|
+});
|
|
|
+const loading = ref(false);
|
|
|
+const remoteMethod = async (keyword) => {
|
|
|
+ if (keyword) {
|
|
|
+ locationOptions.list = [];
|
|
|
+ loading.value = true;
|
|
|
+ const params = {
|
|
|
+ key: MAP_KEY,
|
|
|
+ keyword,
|
|
|
+ location: route.query.userLocation || "113.61702297075017,23.584863449735067",
|
|
|
+ };
|
|
|
+ await VE_API.old_mini_map.getCtiyList({ word: keyword }).then(({ data }) => {
|
|
|
+ if (data && data.length) {
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ VE_API.old_mini_map.search(params).then(({ data }) => {
|
|
|
+ loading.value = false;
|
|
|
+ data.forEach((item) => {
|
|
|
+ item.point = item.location.lat + "," + item.location.lng;
|
|
|
+ locationOptions.list.push(item);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ locationOptions.list = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const handleSearchRes = (v) => {
|
|
|
+ const parts = v.value.split(",");
|
|
|
+ let { latitude, longitude } = transformFromGCJToWGS(parseFloat(parts[0]), parseFloat(parts[1]));
|
|
|
+ const coordinateArray = [longitude, latitude];
|
|
|
+ indexMap.setMapPosition(coordinateArray);
|
|
|
+ centerPoint.value = `POINT (${coordinateArray[0]} ${coordinateArray[1]})`;
|
|
|
+ ruleForm.address = v.item?.title || v.item?.address;
|
|
|
+ pointAddress.value = v.item?.province + v.item?.city + (v.item?.district || '');
|
|
|
+ // 更新farmCity以便后续更新农场名称
|
|
|
+ farmCity.value = v.item?.city + (v.item?.district || "");
|
|
|
+ // 地址修改后，如果满足条件则自动更新农场名称
|
|
|
+ updateFarmNameIfNeeded();
|
|
|
+ getSpecieList();
|
|
|
+};
|
|
|
+
|
|
|
+// 表单
|
|
|
+const ruleFormRef = ref(null);
|
|
|
+const ruleForm = reactive({
|
|
|
+ address: "",
|
|
|
+ mu: "",
|
|
|
+ speciesItem: null,
|
|
|
+ typeIds: [],
|
|
|
+ name: "",
|
|
|
+ fzr: "",
|
|
|
+ tel: "",
|
|
|
+ userType: 1,
|
|
|
+ baseType: null,
|
|
|
+ defaultFarm: 0, // 0:否 1:是
|
|
|
+});
|
|
|
+// 自定义验证规则：验证面积必须是大于0的数字
|
|
|
+const validateMianji = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error("请输入农场面积"));
|
|
|
+ } else {
|
|
|
+ const num = parseFloat(value);
|
|
|
+ if (isNaN(num)) {
|
|
|
+ callback(new Error("面积必须是数字"));
|
|
|
+ } else if (num <= 0) {
|
|
|
+ callback(new Error("面积必须大于0"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const rules = reactive({
|
|
|
+ address: [{ required: true, message: "请选择农场位置", trigger: "blur" }],
|
|
|
+ userType: [{ required: true, message: "请选择客户类型", trigger: "blur" }],
|
|
|
+ mu: [
|
|
|
+ { required: true, message: "请输入农场面积", trigger: "blur" },
|
|
|
+ { validator: validateMianji, trigger: ["blur", "change"] },
|
|
|
+ ],
|
|
|
+ speciesItem: [{ required: true, message: "请选择品类", trigger: "blur" }],
|
|
|
+ typeIds: [{ required: true, message: "请选择品种", trigger: "blur" }],
|
|
|
+ name: [{ required: true, message: "请输入您的农场名称", trigger: ["blur", "change"] }],
|
|
|
+ fzr: [{ required: true, message: "请输入联系人姓名", trigger: ["blur", "change"] }],
|
|
|
+ tel: [
|
|
|
+ { required: true, message: "请输入联系人电话", trigger: ["blur"] },
|
|
|
+ {
|
|
|
+ pattern: /^1[3-9]\d{9}$/,
|
|
|
+ message: "请输入正确的手机号码",
|
|
|
+ trigger: ["blur"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ defaultFarm: [{ required: true, message: "请选择是否为默认农场", trigger: "blur" }],
|
|
|
+ baseType: [{ required: true, message: "请选择基地类别", trigger: "blur" }],
|
|
|
+});
|
|
|
+
|
|
|
+const curRole = localStorage.getItem("SET_USER_CUR_ROLE");
|
|
|
+
|
|
|
+const submitForm = (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ const params = {
|
|
|
+ ...ruleForm,
|
|
|
+ wkt: centerPoint.value,
|
|
|
+ speciesId: ruleForm.speciesItem?.id,
|
|
|
+ containerId: ruleForm.speciesItem?.defaultContainerId,
|
|
|
+ agriculturalCreate: route.query.type === "client" ? 1 : 0,
|
|
|
+ // 编辑时geom不是数组，新增时是数组
|
|
|
+ geom:
|
|
|
+ route.query.type === "edit"
|
|
|
+ ? polygonArr.value && polygonArr.value.length > 0
|
|
|
+ ? polygonArr.value[0]
|
|
|
+ : null
|
|
|
+ : polygonArr.value,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 如果是编辑模式，添加农场ID
|
|
|
+ if (route.query.type === "edit" && route.query.farmId) {
|
|
|
+ params.farmId = route.query.farmId;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (route.query.type === "client" || route.query.type === "farmer") {
|
|
|
+ // 处理 geom 参数，如果是数组需要序列化
|
|
|
+ const queryParams = {
|
|
|
+ ...params,
|
|
|
+ ...route.query,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 如果 geom 是数组，需要序列化为 JSON 字符串
|
|
|
+ if (Array.isArray(queryParams.geom)) {
|
|
|
+ queryParams.geom = JSON.stringify(queryParams.geom);
|
|
|
+ }
|
|
|
+ delete queryParams.speciesItem;
|
|
|
+ queryParams.speciesName = ruleForm.speciesItem?.name;
|
|
|
+ // 根据 typeIds 获取对应的名字
|
|
|
+ if (ruleForm.typeIds && ruleForm.typeIds.length > 0 && fruitsList.value.length > 0) {
|
|
|
+ queryParams.typeNames = JSON.stringify(ruleForm.typeIds
|
|
|
+ .map(id => {
|
|
|
+ const typeItem = fruitsList.value.find(item => item.id === id);
|
|
|
+ return typeItem ? typeItem.name : null;
|
|
|
+ })
|
|
|
+ .filter(name => name !== null));
|
|
|
+ }
|
|
|
+ console.log('queryParams', queryParams.typeNames)
|
|
|
+
|
|
|
+ router.push({
|
|
|
+ path: "/prescription",
|
|
|
+ query: queryParams,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // if(route.query.type === "farmer") {
|
|
|
+ // VE_API.farm.saveFarm({...params, expertMiniUserId: route.query.expertMiniUserId}).then((res) => {
|
|
|
+ // if (res.code === 0) {
|
|
|
+ // router.go(-1);
|
|
|
+ // } else {
|
|
|
+ // ElMessage.error(res.msg || '创建失败');
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ const apiCall = route.query.type === "edit" ? VE_API.farm.updateFarm(params) : VE_API.farm.saveFarm(params);
|
|
|
+
|
|
|
+ apiCall.then((res) => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success(route.query.type === "edit" ? "修改成功" : "创建成功");
|
|
|
+ // 重置表单和地块数据
|
|
|
+ ruleFormRef.value.resetFields();
|
|
|
+ store.commit("home/SET_FARM_POLYGON", null);
|
|
|
+ store.commit("home/SET_EDIT_FARM_DATA", null); // 清除编辑数据
|
|
|
+ polygonArr.value = null;
|
|
|
+ isFromEditMap.value = false;
|
|
|
+
|
|
|
+ if (route.query.type !== "edit" && curRole == 0) {
|
|
|
+ localStorage.setItem("selectedFarmId", res.data.id);
|
|
|
+ localStorage.setItem("selectedFarmName", res.data.name);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据来源页面决定跳转目标
|
|
|
+ const fromPage = route.query.from;
|
|
|
+ if (fromPage && fromPage !== "details") {
|
|
|
+ // 如果是从monitor页面来的
|
|
|
+ router.replace(`/${fromPage}`);
|
|
|
+ } else if (fromPage === "details") {
|
|
|
+ router.go(-1);
|
|
|
+ } else {
|
|
|
+ if (route.query.miniJson) {
|
|
|
+ const json = JSON.parse(route.query.miniJson);
|
|
|
+ //上传图片
|
|
|
+ VE_API.ali
|
|
|
+ .uploadImg({
|
|
|
+ farmId: res.data.id,
|
|
|
+ images: json.images,
|
|
|
+ uploadDate: formatDate(new Date()),
|
|
|
+ })
|
|
|
+ .then(({ code, msg }) => {
|
|
|
+ if (code === 0) {
|
|
|
+ showSuccessPopup.value = true;
|
|
|
+ } else {
|
|
|
+ ElMessage.error(msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ router.replace(`/home`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ ElMessage.error(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const resetForm = (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.resetFields();
|
|
|
+ // 清除地块数据
|
|
|
+ store.commit("home/SET_FARM_POLYGON", null);
|
|
|
+ polygonArr.value = null;
|
|
|
+ isFromEditMap.value = false;
|
|
|
+ hasDefaultPolygon.value = false; // 重置默认地块状态
|
|
|
+
|
|
|
+ // 根据来源页面决定返回目标
|
|
|
+ const fromPage = route.query.from;
|
|
|
+ if (fromPage && fromPage !== "details") {
|
|
|
+ router.replace(`/${fromPage}`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ router.go(-1);
|
|
|
+};
|
|
|
+
|
|
|
+const centerPoint = ref(null);
|
|
|
+
|
|
|
+function toSubPage() {
|
|
|
+ // 如果还没有默认地块，先创建默认地块
|
|
|
+ if (!hasDefaultPolygon.value) {
|
|
|
+ if (centerPoint.value) {
|
|
|
+ const arr = convertPointToArray(centerPoint.value);
|
|
|
+ const squareData = generateSquarePolygonBySideLength(arr, 200); // 200米边长
|
|
|
+ const geometryData = {
|
|
|
+ geometryArr: [squareData.wkt],
|
|
|
+ mianji: squareData.area,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 绘制默认地块
|
|
|
+ indexMap.setAreaGeometry(geometryData.geometryArr);
|
|
|
+
|
|
|
+ // 保存地块数据
|
|
|
+ polygonArr.value = geometryData.geometryArr;
|
|
|
+
|
|
|
+ // 标记已创建默认地块
|
|
|
+ hasDefaultPolygon.value = true;
|
|
|
+
|
|
|
+ // 不跳转，停留在当前页面
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已有默认地块，则跳转到编辑页面
|
|
|
+ // 保存到store中以便在编辑页面回显
|
|
|
+ if (polygonArr.value) {
|
|
|
+ const polygonData = {
|
|
|
+ geometryArr: polygonArr.value,
|
|
|
+ mianji: ruleForm.mu || "", // 保存用户输入的面积，如果没有输入则为空
|
|
|
+ isConfirmed: false, // 标记：还未从编辑页面确认返回
|
|
|
+ };
|
|
|
+ store.commit("home/SET_FARM_POLYGON", polygonData);
|
|
|
+ }
|
|
|
+
|
|
|
+ router.push(
|
|
|
+ `/edit_map?mapCenter=${centerPoint.value}&pointName=${ruleForm.address}&pointAddress=${pointAddress.value}&from=${route.query.from}&type=${route.query.type}`
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const pointAddress = ref(null);
|
|
|
+const farmCity = ref(null);
|
|
|
+function getLocationName(location) {
|
|
|
+ const params = {
|
|
|
+ key: MAP_KEY,
|
|
|
+ location,
|
|
|
+ };
|
|
|
+ VE_API.old_mini_map.location(params).then(({ result }) => {
|
|
|
+ // locationVal.value = result.formatted_addresses.recommend;
|
|
|
+ const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
|
|
|
+ ruleForm.address = add;
|
|
|
+ pointAddress.value = result.address;
|
|
|
+ farmCity.value = result.address_component?.city + (result.address_component?.district || "");
|
|
|
+ // 地址修改后，如果满足条件则自动更新农场名称
|
|
|
+ updateFarmNameIfNeeded();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => mapLocation.data,
|
|
|
+ (newValue, oldValue) => {
|
|
|
+ if (newValue) {
|
|
|
+ let { latitude, longitude } = transformFromWGSToGCJ(newValue[1], newValue[0]);
|
|
|
+ centerPoint.value = `POINT (${newValue[0]} ${newValue[1]})`;
|
|
|
+ getLocationName(`${latitude},${longitude}`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+const specieList = ref([]);
|
|
|
+function getSpecieList() {
|
|
|
+ return VE_API.farm.fetchSpecieList({ point: centerPoint.value }).then(({ data }) => {
|
|
|
+ const list = Array.isArray(data) ? data : [];
|
|
|
+ // 只保留名称包含“荔枝”的品类
|
|
|
+ const litchiList = list.filter((item) => item?.name && item.name.includes("荔枝"));
|
|
|
+ specieList.value = litchiList;
|
|
|
+ // 非编辑模式且当前未选择品类时，默认选中第一项
|
|
|
+ if (route.query.type !== "edit" && !ruleForm.speciesItem && litchiList.length > 0) {
|
|
|
+ const first = { value: litchiList[0].id, ...litchiList[0] };
|
|
|
+ ruleForm.speciesItem = first;
|
|
|
+ // 同步触发品类变更逻辑（加载品种、自动生成农场名等）
|
|
|
+ changeSpecie(first);
|
|
|
+ }
|
|
|
+ return litchiList;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const baseTypeList = ref([]);
|
|
|
+function getBaseTypeList() {
|
|
|
+ return VE_API.farm.fetchBaseTypeList().then(({ data }) => {
|
|
|
+ baseTypeList.value = data || [];
|
|
|
+ return data;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function changeSpecie(v) {
|
|
|
+ // const data = await checkExistsEnabledScheme(v.defaultContainerId);
|
|
|
+ // if (!data) {
|
|
|
+ // ElMessage.warning("该品类暂无可用方案，请选择其他品类");
|
|
|
+ // ruleForm.speciesItem = "";
|
|
|
+ // ruleForm.typeIds = [];
|
|
|
+ // fruitsList.value = [];
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+ getFruitsTypeItemList(v.id);
|
|
|
+ // 清空品种选择
|
|
|
+ ruleForm.typeIds = [];
|
|
|
+ // 只有在创建模式下且用户没有手动修改过农场名称时，才自动设置农场名称
|
|
|
+ if (route.query.type !== "edit" && !isFarmNameManuallyModified.value && farmCity.value) {
|
|
|
+ ruleForm.name = farmCity.value + v.name + "农场";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//判断是否存在可用方案
|
|
|
+async function checkExistsEnabledScheme(containerId) {
|
|
|
+ const { data } = await VE_API.home.existsEnabledScheme({ containerId });
|
|
|
+ return data;
|
|
|
+}
|
|
|
+
|
|
|
+const fruitsList = ref([]);
|
|
|
+function getFruitsTypeItemList(parentId) {
|
|
|
+ VE_API.farm.fruitsTypeItemList({ parentId }).then(({ data }) => {
|
|
|
+ fruitsList.value = data;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 格式化日期为 YYYY-MM-DD 格式
|
|
|
+ * @param {Date} date - 日期对象
|
|
|
+ * @returns {string} 格式化后的日期字符串
|
|
|
+ */
|
|
|
+function formatDate(date) {
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
|
+ const day = String(date.getDate()).padStart(2, "0");
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+}
|
|
|
+
|
|
|
+function backgToHome() {
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+
|
|
|
+ // 根据来源页面决定返回目标
|
|
|
+ const fromPage = route.query.from;
|
|
|
+ if (route.query.miniJson) {
|
|
|
+ const json = JSON.parse(route.query.miniJson);
|
|
|
+ if (json.isMini) {
|
|
|
+ const dropdownGardenItem = ref({
|
|
|
+ organId: json.farmId,
|
|
|
+ periodId: json.periodId,
|
|
|
+ name: json.name,
|
|
|
+ page: "create_farm",
|
|
|
+ showFarmSelect: true,
|
|
|
+ images: json.images,
|
|
|
+ });
|
|
|
+ wx.miniProgram.reLaunch({
|
|
|
+ url: `/pages/subPages/new_recognize/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const paramsPage = JSON.parse(json.paramsPage);
|
|
|
+ if(paramsPage.isFarmer){
|
|
|
+ router.replace('/home');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (fromPage && fromPage !== "details") {
|
|
|
+ if (route.query.type === "farmer") {
|
|
|
+ router.go(-1);
|
|
|
+ } else {
|
|
|
+ router.replace(`/${fromPage}`);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ router.go(-1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理面积按键输入 - 只允许数字和小数点
|
|
|
+function handleMianjiKeypress(event) {
|
|
|
+ // 如果是从编辑地图返回的，不允许手动修改
|
|
|
+ if (isFromEditMap.value) {
|
|
|
+ event.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const charCode = event.which ? event.which : event.keyCode;
|
|
|
+ const char = String.fromCharCode(charCode);
|
|
|
+
|
|
|
+ // 允许数字 (0-9) 和小数点 (.)
|
|
|
+ if (!/^[0-9.]$/.test(char)) {
|
|
|
+ event.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已经有小数点，不允许再输入小数点
|
|
|
+ const currentValue = ruleForm.mu || "";
|
|
|
+ if (char === "." && currentValue.includes(".")) {
|
|
|
+ event.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 不允许以小数点开头
|
|
|
+ if (char === "." && !currentValue) {
|
|
|
+ event.preventDefault();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理农场名称输入
|
|
|
+function handleFarmNameInput() {
|
|
|
+ // 标记用户已手动修改过农场名称
|
|
|
+ isFarmNameManuallyModified.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+// 根据地址更新农场名称（如果满足条件）
|
|
|
+function updateFarmNameIfNeeded() {
|
|
|
+ // 只有在创建模式下且用户没有手动修改过农场名称且已选择品类时，才自动更新农场名称
|
|
|
+ if (route.query.type !== "edit" && !isFarmNameManuallyModified.value && ruleForm.speciesItem && farmCity.value) {
|
|
|
+ ruleForm.name = farmCity.value + ruleForm.speciesItem.name + "农场";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 回填编辑数据
|
|
|
+function populateEditData() {
|
|
|
+ const editData = store.state.home.editFarmData;
|
|
|
+ if (!editData) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 回填基本信息
|
|
|
+ ruleForm.name = editData.name || "";
|
|
|
+ ruleForm.fzr = editData.fzr || "";
|
|
|
+ ruleForm.tel = editData.tel || "";
|
|
|
+ ruleForm.baseType = editData.baseType || null;
|
|
|
+ ruleForm.defaultFarm = editData.defaultOption || 0;
|
|
|
+ ruleForm.mu = editData.mianji || "";
|
|
|
+ ruleForm.address = editData.address || "";
|
|
|
+
|
|
|
+ // 设置地图中心点
|
|
|
+ if (editData.pointWkt) {
|
|
|
+ centerPoint.value = editData.pointWkt;
|
|
|
+ const arr = convertPointToArray(editData.pointWkt);
|
|
|
+ indexMap.setMapPosition(arr);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理地块数据
|
|
|
+ if (editData.geomWkt) {
|
|
|
+ polygonArr.value = [editData.geomWkt];
|
|
|
+ indexMap.setAreaGeometry([editData.geomWkt]);
|
|
|
+ hasDefaultPolygon.value = true;
|
|
|
+ isFromEditMap.value = true; // 编辑模式下锁定面积输入
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理作物数据
|
|
|
+ if (editData.speciesId && editData.speciesName) {
|
|
|
+ // 设置品类 - 需要匹配模板中的数据结构
|
|
|
+ ruleForm.speciesItem = {
|
|
|
+ value: editData.speciesId,
|
|
|
+ id: editData.speciesId,
|
|
|
+ name: editData.speciesName,
|
|
|
+ defaultContainerId: editData.containerId,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取品种列表
|
|
|
+ getFruitsTypeItemList(editData.speciesId);
|
|
|
+
|
|
|
+ // 设置品种
|
|
|
+ if (editData.typeIds) {
|
|
|
+ ruleForm.typeIds = editData.typeIds;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置地址信息
|
|
|
+ if (editData.district) {
|
|
|
+ try {
|
|
|
+ const districtInfo = JSON.parse(editData.district);
|
|
|
+ pointAddress.value = districtInfo.province + districtInfo.city + (districtInfo?.district || '');
|
|
|
+ } catch (e) {
|
|
|
+ console.warn("解析地址信息失败:", e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 处理面积输入
|
|
|
+let mianjiInputTimer = null;
|
|
|
+function handleMianjiInput(value) {
|
|
|
+ // 如果是从编辑地图返回的，不允许手动修改
|
|
|
+ if (isFromEditMap.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 过滤非法字符，只保留数字和小数点
|
|
|
+ let filteredValue = value.replace(/[^\d.]/g, "");
|
|
|
+
|
|
|
+ // 确保只有一个小数点
|
|
|
+ const parts = filteredValue.split(".");
|
|
|
+ if (parts.length > 2) {
|
|
|
+ filteredValue = parts[0] + "." + parts.slice(1).join("");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 限制小数点后最多2位
|
|
|
+ if (parts.length === 2 && parts[1].length > 2) {
|
|
|
+ filteredValue = parts[0] + "." + parts[1].substring(0, 2);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新输入框的值（如果被过滤了）
|
|
|
+ if (filteredValue !== value) {
|
|
|
+ ruleForm.mu = filteredValue;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除之前的定时器
|
|
|
+ if (mianjiInputTimer) {
|
|
|
+ clearTimeout(mianjiInputTimer);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 防抖处理，用户停止输入500ms后再更新地块
|
|
|
+ mianjiInputTimer = setTimeout(() => {
|
|
|
+ const mu = parseFloat(filteredValue);
|
|
|
+
|
|
|
+ // 验证输入的有效性
|
|
|
+ if (!mu || isNaN(mu) || mu <= 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 根据亩数重新生成地块
|
|
|
+ if (centerPoint.value) {
|
|
|
+ const arr = convertPointToArray(centerPoint.value);
|
|
|
+ const squareData = generateSquarePolygonByMu(arr, mu);
|
|
|
+
|
|
|
+ const geometryData = {
|
|
|
+ geometryArr: [squareData.wkt],
|
|
|
+ mianji: squareData.area,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 清除旧地块
|
|
|
+ indexMap.clearLayer();
|
|
|
+ // 绘制新地块
|
|
|
+ indexMap.setAreaGeometry(geometryData.geometryArr);
|
|
|
+
|
|
|
+ // 更新状态
|
|
|
+ polygonArr.value = geometryData.geometryArr;
|
|
|
+ // 标记已创建默认地块
|
|
|
+ hasDefaultPolygon.value = true;
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep {
|
|
|
+ .el-form-item--default {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.create-farm {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .map-container {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 320px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .checkbox {
|
|
|
+ padding: 0 12px 6px;
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .farm-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .top-mask {
|
|
|
+ height: 100px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .farm-filter {
|
|
|
+ pointer-events: all;
|
|
|
+ margin: 12px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.4);
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 12px;
|
|
|
+ top: 9px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background: url("@/assets/img/home/search.png") no-repeat center center / 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ padding-left: 34px;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .el-select__selected-item,
|
|
|
+ .el-select__placeholder,
|
|
|
+ .el-select__input {
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+
|
|
|
+ &.is-transparent {
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select {
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ .el-input.is-focus .el-input__wrapper {
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ padding-left: 18px;
|
|
|
+ font-size: 11px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.is-focus {
|
|
|
+ .el-input__inner {
|
|
|
+ color: #ccc;
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-wrap {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(180deg, transparent 0%, #f5f7fb 20%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-box {
|
|
|
+ pointer-events: all;
|
|
|
+ margin: 0 12px 10px 12px;
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ background: #e0f1fe;
|
|
|
+ border-radius: 14px;
|
|
|
+
|
|
|
+ .box-content {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 2px;
|
|
|
+ content: "";
|
|
|
+ width: 79px;
|
|
|
+ height: 72px;
|
|
|
+ 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;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ width: 18px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-content {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 12px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+
|
|
|
+ .create-from {
|
|
|
+
|
|
|
+ .select-wrap {
|
|
|
+ display: flex;
|
|
|
+ &.specie-wrap {
|
|
|
+ flex: 1;
|
|
|
+ gap: 12px;
|
|
|
+ .specie-select {
|
|
|
+ min-width: 56px;
|
|
|
+ width: 56px;
|
|
|
+ }
|
|
|
+ .period-select {
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__selection {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // width: 86%;
|
|
|
+ ::v-deep {
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select__wrapper {
|
|
|
+ background: none;
|
|
|
+ box-shadow: none;
|
|
|
+ gap: 2px;
|
|
|
+ padding: 4px 2px;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select__selection {
|
|
|
+ flex: none;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select__placeholder {
|
|
|
+ color: #000;
|
|
|
+ position: static;
|
|
|
+ transform: none;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.client-wrap {
|
|
|
+ ::v-deep {
|
|
|
+ .el-select__wrapper {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .select-item {
|
|
|
+ // width: fit-content;
|
|
|
+ // }
|
|
|
+ .period-select {
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-item {
|
|
|
+ min-width: 76px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .el-form-item__label {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__error {
|
|
|
+ top: 117%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 60px;
|
|
|
+ bottom: -5px;
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ height: 1px;
|
|
|
+ background: rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__wrapper {
|
|
|
+ box-shadow: none;
|
|
|
+ padding: 1px 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .area-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .unit {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .position-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .draw-btn {
|
|
|
+ flex: none;
|
|
|
+ padding: 0 12px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-btn {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.primary-btn {
|
|
|
+ background: linear-gradient(180deg, #76c3ff, #2199f8);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-item+.btn-item {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.location-search-popper {
|
|
|
+ .el-select-dropdown__list {
|
|
|
+ max-width: 96vw;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub-title {
|
|
|
+ padding-left: 6px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi