|
|
@@ -57,23 +57,76 @@ const isGuidedFlow = ref(false);
|
|
|
// 每个品种（tab）对应的地块数据草稿：key 为 tab index，value 为 { geomArr, geom }
|
|
|
const regionsDraftByIndex = ref({});
|
|
|
const submitting = ref(false);
|
|
|
+// 仅在首次进入页面时根据路由 varietyId 定位一次，避免后续刷新覆盖当前流程进度
|
|
|
+const hasAppliedInitialVariety = ref(false);
|
|
|
|
|
|
const type = ref(null);
|
|
|
const varietyTabs = ref([]);
|
|
|
const activeVariety = ref(0);
|
|
|
const regionGeom = ref(null);
|
|
|
|
|
|
+const isValidGeom = (geom) => {
|
|
|
+ if (typeof geom !== "string") return false;
|
|
|
+ const normalized = geom.trim();
|
|
|
+ if (!normalized) return false;
|
|
|
+ if (["[]", "{}", "null", "undefined", '""'].includes(normalized)) return false;
|
|
|
+ return true;
|
|
|
+};
|
|
|
+
|
|
|
+const resolveInitialVarietyIndex = (regionList) => {
|
|
|
+ const queryVarietyId = route.query?.varietyId;
|
|
|
+ if (!queryVarietyId || !Array.isArray(regionList) || regionList.length === 0) return 0;
|
|
|
+ const queryId = String(queryVarietyId).trim();
|
|
|
+ const matchedIndex = regionList.findIndex((item) => {
|
|
|
+ const candidateIds = [item?.typeId, item?.varietyId, item?.id]
|
|
|
+ .filter((v) => v !== undefined && v !== null)
|
|
|
+ .map((v) => String(v).trim());
|
|
|
+ return candidateIds.includes(queryId);
|
|
|
+ });
|
|
|
+ return matchedIndex >= 0 ? matchedIndex : 0;
|
|
|
+};
|
|
|
+
|
|
|
+const getReadonlyVarietyRegions = (activeIndex) => {
|
|
|
+ if (!Array.isArray(varietyTabs.value) || varietyTabs.value.length === 0) return [];
|
|
|
+ const readonlyRegions = [];
|
|
|
+ for (let i = 0; i < varietyTabs.value.length; i++) {
|
|
|
+ if (i === activeIndex) continue;
|
|
|
+ const tab = varietyTabs.value[i];
|
|
|
+ if (!tab) continue;
|
|
|
+ const draftGeom = regionsDraftByIndex.value[i]?.geom;
|
|
|
+ const geometry = draftGeom || tab.geom;
|
|
|
+ if (!isValidGeom(geometry)) continue;
|
|
|
+ readonlyRegions.push({
|
|
|
+ geometry,
|
|
|
+ label: tab.regionName || "",
|
|
|
+ displayMode: "readonlyVariety",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return readonlyRegions;
|
|
|
+};
|
|
|
+
|
|
|
+const renderReadonlyVarietyRegions = (activeIndex) => {
|
|
|
+ if (drawRegionMap && typeof drawRegionMap.setStatusRegions === "function") {
|
|
|
+ drawRegionMap.setStatusRegions(getReadonlyVarietyRegions(activeIndex));
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const handleVarietyClick = (tab, index) => {
|
|
|
activeVariety.value = index;
|
|
|
- regionGeom.value = tab.geom;
|
|
|
+ const currentGeom = regionsDraftByIndex.value[index]?.geom || tab.geom;
|
|
|
+ regionGeom.value = currentGeom;
|
|
|
+ // 地图尚未初始化时，仅更新状态，不做图层绘制，避免首次进入重复叠加
|
|
|
+ if (!drawRegionMap.kmap) return;
|
|
|
|
|
|
- // 每次切换/重绘地块前先清空，避免多边形叠加残留
|
|
|
+ // 每次切换/重绘地块前先清空“当前可编辑图层”
|
|
|
if (drawRegionMap.kmap?.polygonLayer?.source) {
|
|
|
drawRegionMap.kmap.polygonLayer.source.clear();
|
|
|
}
|
|
|
- if (tab.geom?.length) {
|
|
|
+ // 渲染当前品种之前的已勾画地块（灰色只读 + 品种名）
|
|
|
+ renderReadonlyVarietyRegions(index);
|
|
|
+ if (isValidGeom(currentGeom)) {
|
|
|
setTimeout(() => {
|
|
|
- drawRegionMap.setAreaGeometry([tab.geom], true);
|
|
|
+ drawRegionMap.setAreaGeometry([currentGeom], true);
|
|
|
}, 50);
|
|
|
}
|
|
|
};
|
|
|
@@ -93,8 +146,9 @@ async function fetchFarmSubjectDetail() {
|
|
|
|
|
|
|
|
|
if (data?.regionList?.length) {
|
|
|
- if(route.query?.varietyId) {
|
|
|
- activeVariety.value = data?.regionList.findIndex(item => item.typeId == route.query?.varietyId);
|
|
|
+ if (!hasAppliedInitialVariety.value && route.query?.varietyId) {
|
|
|
+ activeVariety.value = resolveInitialVarietyIndex(data?.regionList);
|
|
|
+ hasAppliedInitialVariety.value = true;
|
|
|
}
|
|
|
|
|
|
point.value = data.farmLocation;
|
|
|
@@ -105,6 +159,7 @@ async function fetchFarmSubjectDetail() {
|
|
|
|
|
|
onActivated(async () => {
|
|
|
activeVariety.value = 0;
|
|
|
+ hasAppliedInitialVariety.value = false;
|
|
|
// keep-alive 场景下再次进入前先销毁旧地图实例，避免重复 init 导致图层状态错位
|
|
|
if (drawRegionMap.kmap) {
|
|
|
drawRegionMap.abortOngoingDrawSketch?.();
|
|
|
@@ -117,17 +172,29 @@ onActivated(async () => {
|
|
|
|
|
|
drawRegionMap.initMap(point.value, mapContainer.value, editable, true, true);
|
|
|
|
|
|
+ // 首次进入时，fetch 阶段可能先于地图初始化触发了 tab 渲染；
|
|
|
+ // 这里在地图可用后再补渲一次，确保“其他品种只读地块”能显示出来
|
|
|
+ if (varietyTabs.value.length > 0 && varietyTabs.value[activeVariety.value]) {
|
|
|
+ handleVarietyClick(varietyTabs.value[activeVariety.value], activeVariety.value);
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
// 从编辑态进入仅查看时，需重新初始化为不可编辑
|
|
|
if (viewOnly.value && drawRegionMap.kmap && drawRegionMap.editable) {
|
|
|
drawRegionMap.destroyMap();
|
|
|
drawRegionMap.initMap(point.value, mapContainer.value, false, true, false);
|
|
|
+ if (varietyTabs.value.length > 0 && varietyTabs.value[activeVariety.value]) {
|
|
|
+ handleVarietyClick(varietyTabs.value[activeVariety.value], activeVariety.value);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 从仅查看进入勾画（编辑）时，需重新初始化为可编辑
|
|
|
if (!viewOnly.value && drawRegionMap.kmap && !drawRegionMap.editable) {
|
|
|
drawRegionMap.destroyMap();
|
|
|
drawRegionMap.initMap(point.value, mapContainer.value, true, true, true);
|
|
|
+ if (varietyTabs.value.length > 0 && varietyTabs.value[activeVariety.value]) {
|
|
|
+ handleVarietyClick(varietyTabs.value[activeVariety.value], activeVariety.value);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 查看模式下已通过 fitAllRegions 适配；编辑模式再设置地图中心
|
|
|
@@ -308,7 +375,10 @@ const handleEditRegion = () => {
|
|
|
|
|
|
drawRegionMap.initMap(point.value, mapContainer.value, true, true, true);
|
|
|
|
|
|
- if (varietyTabs.value.length && regionGeom.value.length) {
|
|
|
+ // 切到编辑态后立即补渲“其他品种只读地块”，避免首次点击编辑时不显示
|
|
|
+ renderReadonlyVarietyRegions(activeVariety.value);
|
|
|
+
|
|
|
+ if (varietyTabs.value.length && regionGeom.value?.length) {
|
|
|
drawRegionMap.setAreaGeometry([regionGeom.value],true);
|
|
|
}
|
|
|
// 切到编辑态后，统一自适应到所有区域，避免画面偏移
|
wangsisi