|
@@ -74,7 +74,6 @@
|
|
|
<el-select
|
|
<el-select
|
|
|
v-model="ruleForm.typeId"
|
|
v-model="ruleForm.typeId"
|
|
|
placeholder="品种"
|
|
placeholder="品种"
|
|
|
- @change="changeTypeId"
|
|
|
|
|
class="period-select select-item"
|
|
class="period-select select-item"
|
|
|
>
|
|
>
|
|
|
<el-option
|
|
<el-option
|
|
@@ -126,8 +125,15 @@
|
|
|
placeholder="请输入您的农场名称"
|
|
placeholder="请输入您的农场名称"
|
|
|
v-model="ruleForm.name"
|
|
v-model="ruleForm.name"
|
|
|
autocomplete="off"
|
|
autocomplete="off"
|
|
|
|
|
+ @input="handleFarmNameInput"
|
|
|
/>
|
|
/>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
|
|
+ <el-form-item label="默认农场" prop="default-farm" class="defaultFarm">
|
|
|
|
|
+ <radio-group class="radio-group" v-model="ruleForm.defaultFarm" direction="horizontal">
|
|
|
|
|
+ <radio class="radio-item" :name="true">是</radio>
|
|
|
|
|
+ <radio class="radio-item" :name="false">否</radio>
|
|
|
|
|
+ </radio-group>
|
|
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
</el-form>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="create-btn">
|
|
<div class="create-btn">
|
|
@@ -153,6 +159,7 @@ import { onMounted, ref, reactive, watch, onActivated } from "vue";
|
|
|
import { useStore } from "vuex";
|
|
import { useStore } from "vuex";
|
|
|
import { convertPointToArray } from "@/utils/index";
|
|
import { convertPointToArray } from "@/utils/index";
|
|
|
import { ElMessage } from "element-plus";
|
|
import { ElMessage } from "element-plus";
|
|
|
|
|
+import { RadioGroup, Radio } from "vant";
|
|
|
import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";
|
|
import { transformFromGCJToWGS, transformFromWGSToGCJ } from "@/utils/WSCoordinate.js";
|
|
|
|
|
|
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
@@ -168,6 +175,9 @@ const isFromEditMap = ref(false);
|
|
|
// 标记是否已创建默认地块
|
|
// 标记是否已创建默认地块
|
|
|
const hasDefaultPolygon = ref(false);
|
|
const hasDefaultPolygon = ref(false);
|
|
|
|
|
|
|
|
|
|
+// 标记用户是否手动修改过农场名称
|
|
|
|
|
+const isFarmNameManuallyModified = ref(false);
|
|
|
|
|
+
|
|
|
/**
|
|
/**
|
|
|
* 根据中心点生成指定边长的正方形地块WKT
|
|
* 根据中心点生成指定边长的正方形地块WKT
|
|
|
* @param {Array} center - 中心点坐标 [lng, lat]
|
|
* @param {Array} center - 中心点坐标 [lng, lat]
|
|
@@ -270,7 +280,14 @@ onMounted(() => {
|
|
|
ruleForm.mu = '';
|
|
ruleForm.mu = '';
|
|
|
ruleForm.typeId = '';
|
|
ruleForm.typeId = '';
|
|
|
|
|
|
|
|
- getSpecieList();
|
|
|
|
|
|
|
+ // 如果是编辑模式,等待品类列表加载完成后再回填数据
|
|
|
|
|
+ if (route.query.type === 'edit' && store.state.home.editFarmData) {
|
|
|
|
|
+ getSpecieList().then(() => {
|
|
|
|
|
+ populateEditData();
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ getSpecieList();
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const polygonArr = ref(null);
|
|
const polygonArr = ref(null);
|
|
@@ -295,10 +312,17 @@ onActivated(() => {
|
|
|
polygonArr.value = null;
|
|
polygonArr.value = null;
|
|
|
ruleForm.mu = '';
|
|
ruleForm.mu = '';
|
|
|
ruleForm.typeId = '';
|
|
ruleForm.typeId = '';
|
|
|
|
|
+ ruleForm.defaultFarm = false;
|
|
|
|
|
|
|
|
return; // 直接返回,不执行下面的逻辑
|
|
return; // 直接返回,不执行下面的逻辑
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ // 如果是编辑模式,回填数据
|
|
|
|
|
+ if (route.query.type === 'edit' && store.state.home.editFarmData) {
|
|
|
|
|
+ populateEditData();
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
indexMap.clearLayer();
|
|
indexMap.clearLayer();
|
|
|
// 绘制勾画范围(从edit_map返回的情况)
|
|
// 绘制勾画范围(从edit_map返回的情况)
|
|
|
const polygonData = store.state.home.polygonData;
|
|
const polygonData = store.state.home.polygonData;
|
|
@@ -331,6 +355,7 @@ onActivated(() => {
|
|
|
ruleForm.mu = '';
|
|
ruleForm.mu = '';
|
|
|
isFromEditMap.value = false;
|
|
isFromEditMap.value = false;
|
|
|
hasDefaultPolygon.value = false;
|
|
hasDefaultPolygon.value = false;
|
|
|
|
|
+ ruleForm.defaultFarm = false;
|
|
|
}
|
|
}
|
|
|
} else if (centerPoint.value && polygonArr.value) {
|
|
} else if (centerPoint.value && polygonArr.value) {
|
|
|
// 没有新的编辑数据,保持当前地块
|
|
// 没有新的编辑数据,保持当前地块
|
|
@@ -399,6 +424,7 @@ const ruleForm = reactive({
|
|
|
name: "",
|
|
name: "",
|
|
|
fzr: "",
|
|
fzr: "",
|
|
|
tel: "",
|
|
tel: "",
|
|
|
|
|
+ defaultFarm:0, // 0:否 1:是
|
|
|
});
|
|
});
|
|
|
// 自定义验证规则:验证面积必须是大于0的数字
|
|
// 自定义验证规则:验证面积必须是大于0的数字
|
|
|
const validateMianji = (rule, value, callback) => {
|
|
const validateMianji = (rule, value, callback) => {
|
|
@@ -434,6 +460,7 @@ const rules = reactive({
|
|
|
trigger: "blur"
|
|
trigger: "blur"
|
|
|
}
|
|
}
|
|
|
],
|
|
],
|
|
|
|
|
+ defaultFarm: [{ required: true, message: "请选择是否为默认农场", trigger: "blur" }],
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
const submitForm = (formEl) => {
|
|
const submitForm = (formEl) => {
|
|
@@ -445,22 +472,36 @@ const submitForm = (formEl) => {
|
|
|
wkt: centerPoint.value,
|
|
wkt: centerPoint.value,
|
|
|
speciesId: ruleForm.speciesItem?.id,
|
|
speciesId: ruleForm.speciesItem?.id,
|
|
|
containerId: ruleForm.speciesItem?.defaultContainerId,
|
|
containerId: ruleForm.speciesItem?.defaultContainerId,
|
|
|
- geom: polygonArr.value,
|
|
|
|
|
|
|
+ // 编辑时geom不是数组,新增时是数组
|
|
|
|
|
+ geom: route.query.type === 'edit'
|
|
|
|
|
+ ? (polygonArr.value && polygonArr.value.length > 0 ? polygonArr.value[0] : null)
|
|
|
|
|
+ : polygonArr.value,
|
|
|
};
|
|
};
|
|
|
- VE_API.farm.saveFarm(params).then((res) => {
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 如果是编辑模式,添加农场ID
|
|
|
|
|
+ if (route.query.type === 'edit' && route.query.farmId) {
|
|
|
|
|
+ params.farmId = route.query.farmId;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const apiCall = route.query.type === 'edit'
|
|
|
|
|
+ ? VE_API.farm.updateFarm(params)
|
|
|
|
|
+ : VE_API.farm.saveFarm(params);
|
|
|
|
|
+
|
|
|
|
|
+ apiCall.then((res) => {
|
|
|
if(res.code === 0) {
|
|
if(res.code === 0) {
|
|
|
- ElMessage.success("创建成功");
|
|
|
|
|
|
|
+ ElMessage.success(route.query.type === 'edit' ? "修改成功" : "创建成功");
|
|
|
// 重置表单和地块数据
|
|
// 重置表单和地块数据
|
|
|
ruleFormRef.value.resetFields();
|
|
ruleFormRef.value.resetFields();
|
|
|
store.commit("home/SET_FARM_POLYGON", null);
|
|
store.commit("home/SET_FARM_POLYGON", null);
|
|
|
|
|
+ store.commit("home/SET_EDIT_FARM_DATA", null); // 清除编辑数据
|
|
|
polygonArr.value = null;
|
|
polygonArr.value = null;
|
|
|
isFromEditMap.value = false;
|
|
isFromEditMap.value = false;
|
|
|
|
|
|
|
|
// 根据来源页面决定跳转目标
|
|
// 根据来源页面决定跳转目标
|
|
|
const fromPage = route.query.from;
|
|
const fromPage = route.query.from;
|
|
|
if (fromPage === 'monitor') {
|
|
if (fromPage === 'monitor') {
|
|
|
- // 如果是从monitor页面来的,跳转回monitor页面并刷新农场列表
|
|
|
|
|
- router.replace(`/${fromPage}`);
|
|
|
|
|
|
|
+ // 如果是从monitor页面来的,跳转回monitor页面并刷新农场列表和基本信息弹窗
|
|
|
|
|
+ router.replace(`/${fromPage}?refreshFarmInfo=true`);
|
|
|
} else {
|
|
} else {
|
|
|
// 默认跳转到首页
|
|
// 默认跳转到首页
|
|
|
router.replace("/home?reload=true&showSuccess=true");
|
|
router.replace("/home?reload=true&showSuccess=true");
|
|
@@ -546,7 +587,7 @@ function getLocationName(location) {
|
|
|
const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
|
|
const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
|
|
|
ruleForm.address = add;
|
|
ruleForm.address = add;
|
|
|
pointAddress.value = result.address;
|
|
pointAddress.value = result.address;
|
|
|
- farmCity.value = result.address_component?.city || '';
|
|
|
|
|
|
|
+ farmCity.value = result.address_component?.city + result.address_component?.district || '';
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -564,18 +605,20 @@ watch(
|
|
|
const specieList = ref([]);
|
|
const specieList = ref([]);
|
|
|
|
|
|
|
|
function getSpecieList() {
|
|
function getSpecieList() {
|
|
|
- VE_API.farm.fetchSpecieList().then(({ data }) => {
|
|
|
|
|
|
|
+ return VE_API.farm.fetchSpecieList().then(({ data }) => {
|
|
|
specieList.value = data;
|
|
specieList.value = data;
|
|
|
|
|
+ return data;
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function changeSpecie(v) {
|
|
function changeSpecie(v) {
|
|
|
getFruitsTypeItemList(v.id);
|
|
getFruitsTypeItemList(v.id);
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-function changeTypeId(v) {
|
|
|
|
|
- const fruitsName = fruitsList.value.find(item => item.id === v).name;
|
|
|
|
|
- ruleForm.name = farmCity.value + fruitsName + "农场";
|
|
|
|
|
|
|
+ // 清空品种选择
|
|
|
|
|
+ ruleForm.typeId = '';
|
|
|
|
|
+ // 只有在创建模式下且用户没有手动修改过农场名称时,才自动设置农场名称
|
|
|
|
|
+ if (route.query.type !== 'edit' && !isFarmNameManuallyModified.value) {
|
|
|
|
|
+ ruleForm.name = farmCity.value + v.name + "农场";
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const fruitsList = ref([]);
|
|
const fruitsList = ref([]);
|
|
@@ -628,6 +671,72 @@ function handleMianjiKeypress(event) {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+// 处理农场名称输入
|
|
|
|
|
+function handleFarmNameInput() {
|
|
|
|
|
+ // 标记用户已手动修改过农场名称
|
|
|
|
|
+ isFarmNameManuallyModified.value = true;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 回填编辑数据
|
|
|
|
|
+function populateEditData() {
|
|
|
|
|
+ const editData = store.state.home.editFarmData;
|
|
|
|
|
+ if (!editData) {
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 回填基本信息
|
|
|
|
|
+ ruleForm.name = editData.name || '';
|
|
|
|
|
+ ruleForm.fzr = editData.fzr || '';
|
|
|
|
|
+ ruleForm.tel = editData.tel || '';
|
|
|
|
|
+ ruleForm.defaultFarm = editData.defaultOption || false;
|
|
|
|
|
+ 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.typeId) {
|
|
|
|
|
+ ruleForm.typeId = editData.typeId;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 设置地址信息
|
|
|
|
|
+ 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;
|
|
let mianjiInputTimer = null;
|
|
|
function handleMianjiInput(value) {
|
|
function handleMianjiInput(value) {
|
|
@@ -707,7 +816,12 @@ function handleMianjiInput(value) {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
.map-container {
|
|
.map-container {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: calc(100% - 240px);
|
|
|
|
|
|
|
+ height: calc(100% - 320px);
|
|
|
|
|
+ }
|
|
|
|
|
+ .radio-group {
|
|
|
|
|
+ .radio-item {
|
|
|
|
|
+ margin-right: 30px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.farm-content {
|
|
.farm-content {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -891,6 +1005,12 @@ function handleMianjiInput(value) {
|
|
|
height: 1px;
|
|
height: 1px;
|
|
|
background: rgba(0, 0, 0, 0.08);
|
|
background: rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
}
|
|
|
|
|
+ &.default-farm {
|
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
|
+ &::after {
|
|
|
|
|
+ background: none;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.el-input__wrapper {
|
|
.el-input__wrapper {
|
|
|
box-shadow: none;
|
|
box-shadow: none;
|