|
|
@@ -1,1354 +0,0 @@
|
|
|
-<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 client-wrap">
|
|
|
- <el-select v-model="ruleForm.speciesItem" filterable class="select-item specie-select"
|
|
|
- multiple :max-collapse-tags="3" collapse-tags placeholder="种植作物(可多选)" @change="changeSpecie">
|
|
|
- <el-option v-for="(item, index) in specieList" :key="index"
|
|
|
- :label="item.name" :value="{ value: item.id, ...item }" />
|
|
|
- </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="请输入联系人电话" type="number" 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 label="农场名称" prop="name">
|
|
|
- <el-input placeholder="请输入您的农场名称" v-model="ruleForm.name" autocomplete="off"
|
|
|
- @input="handleFarmNameInput" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item 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>
|
|
|
- </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"
|
|
|
- />
|
|
|
- <!-- 成熟收获时间弹窗 -->
|
|
|
- <harvest-time-popup
|
|
|
- v-model:show="showHarvestPopup"
|
|
|
- :crops="harvestCrops"
|
|
|
- @confirm="handleHarvestConfirm"
|
|
|
- />
|
|
|
-</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 harvestTimePopup from "@/components/popup/harvestTimePopup.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 showHarvestPopup = ref(false);
|
|
|
-const harvestCrops = ref([]);
|
|
|
-const pendingCreateParams = ref(null);
|
|
|
-
|
|
|
-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 = "";
|
|
|
-
|
|
|
- // 如果是编辑模式，等待品类列表加载完成后再回填数据
|
|
|
- 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);
|
|
|
- getSpecieList();
|
|
|
- }
|
|
|
- // 确保地图已初始化，使用 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.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: [],
|
|
|
- name: "",
|
|
|
- fzr: "",
|
|
|
- tel: "",
|
|
|
- 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" }],
|
|
|
- mu: [
|
|
|
- { required: true, message: "请输入农场面积", trigger: "blur" },
|
|
|
- { validator: validateMianji, trigger: ["blur", "change"] },
|
|
|
- ],
|
|
|
- speciesItem: [{ required: true, message: "请选择种植作物", trigger: ["blur", "change"] }],
|
|
|
- name: [{ required: true, message: "请输入您的农场名称", trigger: ["blur", "change"] }],
|
|
|
- fzr: [{ required: true, message: "请输入联系人姓名", trigger: ["blur", "change"] }],
|
|
|
- tel: [
|
|
|
- { required: true, message: "请输入联系人电话", trigger: ["blur", "change"] },
|
|
|
- {
|
|
|
- pattern: /^1[3-9]\d{9}$/,
|
|
|
- message: "请输入正确的手机号码",
|
|
|
- trigger: ["blur", "change"],
|
|
|
- },
|
|
|
- ],
|
|
|
- defaultFarm: [{ required: true, message: "请选择是否为默认农场", trigger: "blur" }],
|
|
|
- baseType: [{ required: true, message: "请选择基地类别", trigger: "blur" }],
|
|
|
-});
|
|
|
-
|
|
|
-const curRole = localStorage.getItem("SET_USER_CUR_ROLE");
|
|
|
-
|
|
|
-// 成熟收获时间弹窗确认
|
|
|
-const handleHarvestConfirm = (list) => {
|
|
|
- if (!pendingCreateParams.value) return;
|
|
|
- const { params, mainSpecies } = pendingCreateParams.value;
|
|
|
-
|
|
|
- // 将成熟时间附加到参数中（可按需要调整字段名）
|
|
|
- const harvestInfo = (list || []).map((item) => ({
|
|
|
- name: item.name,
|
|
|
- month: item.month,
|
|
|
- day: item.day,
|
|
|
- }));
|
|
|
-
|
|
|
- // 处理 geom 参数，如果是数组需要序列化
|
|
|
- const queryParams = {
|
|
|
- ...params,
|
|
|
- ...route.query,
|
|
|
- harvestInfo: JSON.stringify(harvestInfo),
|
|
|
- };
|
|
|
- if (Array.isArray(queryParams.geom)) {
|
|
|
- queryParams.geom = JSON.stringify(queryParams.geom);
|
|
|
- }
|
|
|
- if (queryParams.speciesContainer && typeof queryParams.speciesContainer === "object") {
|
|
|
- queryParams.speciesContainer = JSON.stringify(queryParams.speciesContainer);
|
|
|
- }
|
|
|
- delete queryParams.speciesItem;
|
|
|
- queryParams.speciesName = mainSpecies?.name;
|
|
|
-
|
|
|
- showHarvestPopup.value = false;
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- router.push({
|
|
|
- path: "/prescription",
|
|
|
- query: queryParams,
|
|
|
- });
|
|
|
- }, 500);
|
|
|
-
|
|
|
- pendingCreateParams.value = null;
|
|
|
-};
|
|
|
-
|
|
|
-const submitForm = (formEl) => {
|
|
|
- if (!formEl) return;
|
|
|
- formEl.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- const speciesList = Array.isArray(ruleForm.speciesItem) ? ruleForm.speciesItem : (ruleForm.speciesItem ? [ruleForm.speciesItem] : []);
|
|
|
- const mainSpecies = speciesList[0];
|
|
|
- const speciesContainer = speciesList.map((item) => ({
|
|
|
- speciesId: item?.id ?? null,
|
|
|
- containerId: item?.defaultContainerId ?? null,
|
|
|
- }));
|
|
|
- const params = {
|
|
|
- ...ruleForm,
|
|
|
- wkt: centerPoint.value,
|
|
|
- speciesContainer,
|
|
|
- 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.id = route.query.farmId;
|
|
|
- }
|
|
|
-
|
|
|
- // let pageData = null;
|
|
|
- // if (route.query.miniJson) {
|
|
|
- // const json = JSON.parse(route.query.miniJson);
|
|
|
- // console.log('json', json);
|
|
|
- // // pageData = JSON.parse(json.paramsPage);
|
|
|
- // }
|
|
|
-
|
|
|
- if (route.query.type !== "edit") {
|
|
|
- // 创建模式下先弹出成熟收获时间弹窗
|
|
|
- harvestCrops.value = speciesList.map((item) => ({
|
|
|
- name: item.name || "",
|
|
|
- month: "",
|
|
|
- day: "",
|
|
|
- }));
|
|
|
- pendingCreateParams.value = {
|
|
|
- params,
|
|
|
- mainSpecies,
|
|
|
- };
|
|
|
- showHarvestPopup.value = true;
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // const apiCall = route.query.type === "edit" ? VE_API.basic_farm.saveBasicFarmInfoByExpertV3({...params, expertMiniUserId: '81881'}) : 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(`/growth_report`);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // } 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("水稻") || item.name.includes("荔枝"))
|
|
|
- );
|
|
|
- specieList.value = litchiList;
|
|
|
- // 返回空列表时，重置已选品类，避免保留上一次默认项
|
|
|
- if (litchiList.length === 0) {
|
|
|
- ruleForm.speciesItem = [];
|
|
|
- return litchiList;
|
|
|
- }
|
|
|
- // //列表有值时，默认选中第一项
|
|
|
- // if (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 current = Array.isArray(v) ? v[v.length - 1] : v;
|
|
|
- // 选择后立即更新该字段的校验状态，避免错误提示残留
|
|
|
- nextTick(() => {
|
|
|
- if (!ruleFormRef.value) return;
|
|
|
- if (Array.isArray(ruleForm.speciesItem) && ruleForm.speciesItem.length > 0) {
|
|
|
- ruleFormRef.value.clearValidate(["speciesItem"]);
|
|
|
- return;
|
|
|
- }
|
|
|
- ruleFormRef.value.validateField("speciesItem");
|
|
|
- });
|
|
|
- // 只有在创建模式下且用户没有手动修改过农场名称时，才自动设置农场名称
|
|
|
- if (route.query.type !== "edit" && !isFarmNameManuallyModified.value && farmCity.value && current) {
|
|
|
- ruleForm.name = farmCity.value + current.name + "农场";
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/**
|
|
|
- * 格式化日期为 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)}`,
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- json?.from && router.replace(`/${json.from}`);
|
|
|
- // 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() {
|
|
|
- // 只有在创建模式下且用户没有手动修改过农场名称且已选择品类时，才自动更新农场名称
|
|
|
- const mainSpecies = Array.isArray(ruleForm.speciesItem)
|
|
|
- ? ruleForm.speciesItem[0]
|
|
|
- : ruleForm.speciesItem;
|
|
|
- if (route.query.type !== "edit" && !isFarmNameManuallyModified.value && mainSpecies && farmCity.value) {
|
|
|
- ruleForm.name = farmCity.value + mainSpecies.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 (Array.isArray(editData.regionList) && editData.regionList.length > 0) {
|
|
|
- const selected = [];
|
|
|
- const speciesIdSet = new Set();
|
|
|
- editData.regionList.forEach((region) => {
|
|
|
- const targetId = region.speciesId;
|
|
|
- if (targetId == null) return;
|
|
|
- // 去重：同一个 speciesId 只保留一条
|
|
|
- const speciesKey = String(targetId);
|
|
|
- if (speciesIdSet.has(speciesKey)) return;
|
|
|
- const match = specieList.value.find((s) => String(s.id) === String(targetId));
|
|
|
- if (match) {
|
|
|
- speciesIdSet.add(speciesKey);
|
|
|
- selected.push({
|
|
|
- value: match.id,
|
|
|
- ...match,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- if (selected.length > 0) {
|
|
|
- ruleForm.speciesItem = selected;
|
|
|
- }
|
|
|
- } else if (editData.speciesId && editData.speciesName) {
|
|
|
- // 兼容旧数据：只有单个品类字段时，按原逻辑回显一个
|
|
|
- const species = {
|
|
|
- value: editData.speciesId,
|
|
|
- id: editData.speciesId,
|
|
|
- name: editData.speciesName,
|
|
|
- defaultContainerId: editData.containerId,
|
|
|
- };
|
|
|
- ruleForm.speciesItem = [species];
|
|
|
- }
|
|
|
-
|
|
|
- // 设置地址信息
|
|
|
- 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;
|
|
|
- // }
|
|
|
- // }
|
|
|
-
|
|
|
- // width: 90%;
|
|
|
-
|
|
|
- ::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: min-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 {
|
|
|
- // min-width: 80px;
|
|
|
- // margin-left: 10px;
|
|
|
- // }
|
|
|
- }
|
|
|
-
|
|
|
- ::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 {
|
|
|
- width: 100%;
|
|
|
- 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