|
|
@@ -19,7 +19,11 @@
|
|
|
<div class="bottom-btn primary-btn" @click="handleConfirmDraw">{{ t("agriFile.confirmArea") }}</div>
|
|
|
</div>
|
|
|
<RegionNamePopup v-model:show="showRegionNamePopup" @confirm="handleFarmNameConfirm" />
|
|
|
- <add-zone-info-popup v-model:show="showZoneInfoPopup" @confirm="handleZoneInfoConfirm" />
|
|
|
+ <add-zone-info-popup
|
|
|
+ v-model:show="showZoneInfoPopup"
|
|
|
+ :polygon="drawnPolygon"
|
|
|
+ @confirm="handleZoneInfoConfirm"
|
|
|
+ />
|
|
|
|
|
|
<tip-popup v-model:show="showExecuteSuccessPopup" type="executeSuccess" text="分区/相册已创建成功" buttonText="完成" @confirm="handleComplete">
|
|
|
<!-- <template #footer>
|
|
|
@@ -72,55 +76,55 @@ const mapContainer = ref(null);
|
|
|
const mapManage = new MapManage();
|
|
|
const showRegionNamePopup = ref(false);
|
|
|
const showZoneInfoPopup = ref(false);
|
|
|
+/** 确认勾画后传给信息弹窗提交的范围 WKT */
|
|
|
+const drawnPolygon = ref("");
|
|
|
|
|
|
const DEFAULT_MAP_LOCATION = "POINT(113.6142086995688 23.585836479509055)";
|
|
|
-const FARM_DRAW_LOCATION = "POINT(113.31812938867188 23.002427029296875)";
|
|
|
const ZONE_STYLE = {
|
|
|
fill: "rgba(33, 153, 248, 0.35)",
|
|
|
fillSelected: "rgba(33, 153, 248, 0.45)",
|
|
|
stroke: "#2199F8",
|
|
|
};
|
|
|
|
|
|
-/** 新增相册时展示的已有品种种植范围(mock,中心点附近) */
|
|
|
-const REGION_CENTER = [113.31812938867188, 23.002427029296875];
|
|
|
-const MOCK_VARIETY_ZONE_DEFS = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- name: "桂味",
|
|
|
- dlng: -0.0032,
|
|
|
- dlat: 0.0021,
|
|
|
- delta: 0.00115,
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- name: "糯米糍",
|
|
|
- dlng: 0.0028,
|
|
|
- dlat: 0.0016,
|
|
|
- delta: 0.00105,
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-function squarePolygonWkt(lng, lat, delta = 0.001) {
|
|
|
- const ring = [
|
|
|
- [lng - delta, lat + delta * 0.7],
|
|
|
- [lng + delta * 0.35, lat + delta],
|
|
|
- [lng + delta, lat - delta * 0.2],
|
|
|
- [lng + delta * 0.15, lat - delta],
|
|
|
- [lng - delta * 0.85, lat - delta * 0.45],
|
|
|
- [lng - delta, lat + delta * 0.7],
|
|
|
- ];
|
|
|
- return `POLYGON((${ring.map((point) => point.join(" ")).join(", ")}))`;
|
|
|
+/** 已有分区种植范围样式 */
|
|
|
+const EXISTING_ZONE_STYLE = {
|
|
|
+ fill: "rgba(0, 0, 0, 0.38)",
|
|
|
+ stroke: "rgba(200, 200, 200, 0.55)",
|
|
|
+};
|
|
|
+
|
|
|
+const existingVarietyZones = ref([]);
|
|
|
+
|
|
|
+function mapExistingZoneItem(zone) {
|
|
|
+ const polygon = typeof zone?.polygon === "string" ? zone.polygon.trim() : "";
|
|
|
+ if (!polygon) return null;
|
|
|
+ return {
|
|
|
+ id: zone.zone_id,
|
|
|
+ name: zone.zone_name || "",
|
|
|
+ fill: EXISTING_ZONE_STYLE.fill,
|
|
|
+ stroke: EXISTING_ZONE_STYLE.stroke,
|
|
|
+ polygon,
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
-function getMockVarietyZones() {
|
|
|
- const [lng, lat] = REGION_CENTER;
|
|
|
- return MOCK_VARIETY_ZONE_DEFS.map((item) => ({
|
|
|
- id: item.id,
|
|
|
- name: item.name,
|
|
|
- fill: 'rgba(0, 0, 0, 0.38)',
|
|
|
- stroke: 'rgba(200, 200, 200, 0.55)',
|
|
|
- polygon: squarePolygonWkt(lng + item.dlng, lat + item.dlat, item.delta),
|
|
|
- }));
|
|
|
+async function fetchExistingVarietyZones() {
|
|
|
+ const farm = getFarmData();
|
|
|
+ const farmId = farm.farm_id ?? farm.id;
|
|
|
+ if (farmId == null || farmId === "") {
|
|
|
+ existingVarietyZones.value = [];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ const res = await VE_API.questionnaire.getZones({ farm_id: farmId });
|
|
|
+ const zones = Array.isArray(res?.data?.zones)
|
|
|
+ ? res.data.zones
|
|
|
+ : Array.isArray(res?.data)
|
|
|
+ ? res.data
|
|
|
+ : [];
|
|
|
+ existingVarietyZones.value = zones.map(mapExistingZoneItem).filter(Boolean);
|
|
|
+ } catch (e) {
|
|
|
+ console.warn("[addZone] getZones failed", e);
|
|
|
+ existingVarietyZones.value = [];
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const userLocation = ref(
|
|
|
@@ -179,6 +183,8 @@ function getFarmMapLocation() {
|
|
|
return DEFAULT_MAP_LOCATION;
|
|
|
}
|
|
|
|
|
|
+const getFarmType = computed(() => getFarmData().variety_name);
|
|
|
+
|
|
|
function getDefaultMapLocation() {
|
|
|
return (
|
|
|
toPointWkt(localStorage.getItem("MINI_USER_LOCATION_POINT")) ||
|
|
|
@@ -192,15 +198,15 @@ function getDefaultMapCoordinate() {
|
|
|
}
|
|
|
|
|
|
function getFarmDrawCoordinate() {
|
|
|
- return util.wktCastGeom(FARM_DRAW_LOCATION).getFirstCoordinate();
|
|
|
+ return util.wktCastGeom(getFarmMapLocation()).getFirstCoordinate();
|
|
|
}
|
|
|
|
|
|
function getMapLocation() {
|
|
|
- if (isFarmDrawMode.value || isRegionDrawMode.value) return FARM_DRAW_LOCATION;
|
|
|
+ if (isFarmDrawMode.value || isRegionDrawMode.value) return getFarmMapLocation();
|
|
|
return getDefaultMapLocation();
|
|
|
}
|
|
|
|
|
|
-function initMapView() {
|
|
|
+async function initMapView() {
|
|
|
if (!mapContainer.value) return;
|
|
|
mapManage.destroyMap();
|
|
|
mapManage.initMap(getMapLocation(), mapContainer.value, {
|
|
|
@@ -220,7 +226,8 @@ function initMapView() {
|
|
|
mapManage.showCenterMarker(getFarmDrawCoordinate(), POINT_ICON.plant);
|
|
|
}
|
|
|
if (isRegionDrawMode.value) {
|
|
|
- mapManage.setExistingVarietyZones(getMockVarietyZones());
|
|
|
+ await fetchExistingVarietyZones();
|
|
|
+ mapManage.setExistingVarietyZones(existingVarietyZones.value);
|
|
|
mapManage.setMapPosition(getFarmDrawCoordinate());
|
|
|
}
|
|
|
}
|
|
|
@@ -248,7 +255,7 @@ const handleClearDraw = () => {
|
|
|
// 只清当前勾画,保留已有品种种植范围
|
|
|
mapManage.clearLayer();
|
|
|
if (isRegionDrawMode.value) {
|
|
|
- mapManage.setExistingVarietyZones(getMockVarietyZones());
|
|
|
+ mapManage.setExistingVarietyZones(existingVarietyZones.value);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
@@ -262,6 +269,7 @@ const handleConfirmDraw = () => {
|
|
|
ElMessage.warning("新绘制范围不能与已有品种种植范围重叠");
|
|
|
return;
|
|
|
}
|
|
|
+ drawnPolygon.value = toMultiPolygonWkt(mapManage.mergeGeometryWkts(payload.geometryArr));
|
|
|
if (isFarmDrawMode.value) {
|
|
|
showRegionNamePopup.value = true;
|
|
|
return;
|