|
|
@@ -0,0 +1,207 @@
|
|
|
+<template>
|
|
|
+ <div class="edit-map">
|
|
|
+ <custom-header name="确认农场区域"></custom-header>
|
|
|
+ <div class="edit-map-content">
|
|
|
+ <div class="edit-map-tip">操作提示：拖动圆点，即可调整地块边界</div>
|
|
|
+ <div class="map-container" ref="mapContainer"></div>
|
|
|
+ <div class="edit-map-footer">
|
|
|
+ <div class="footer-back" @click="goBack">
|
|
|
+ <img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="footer-address-box">
|
|
|
+ <div class="footer-address">
|
|
|
+ <div class="address-title">111</div>
|
|
|
+ <div class="address-detail">2222</div>
|
|
|
+ </div>
|
|
|
+ <div class="address-btn" @click="goBack">修改地址</div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-map-footer-btn">
|
|
|
+ <div class="btn-cancel" @click="goBack">取消</div>
|
|
|
+ <div class="btn-confirm" @click="confirm">确认</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 地形/建模航线提示弹窗（复用 droneConsultPopup：terrainRoute 立即获取 → terrainRouteSuccess 航线已生成） -->
|
|
|
+ <drone-consult-popup v-model:show="showTerrainRoutePopup" :type="terrainPopupType"
|
|
|
+ @confirm="onTerrainRouteConfirm" />
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import customHeader from "@/components/customHeader.vue";
|
|
|
+import DroneConsultPopup from "@/components/popup/droneConsultPopup.vue";
|
|
|
+import { ref, onMounted, onActivated, onDeactivated } from "vue";
|
|
|
+import DrawRegionMap from "./map/drawRegionMap.js";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+import { convertPointToArray } from "@/utils/index";
|
|
|
+import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+const mapContainer = ref(null);
|
|
|
+const drawRegionMap = new DrawRegionMap();
|
|
|
+
|
|
|
+const type = ref('droneConsult');
|
|
|
+const gardenName = ref('荔博园')
|
|
|
+const showTerrainRoutePopup = ref(false);
|
|
|
+/** 弹窗类型：terrainRoute 立即获取 | terrainRouteSuccess 航线已生成 */
|
|
|
+const terrainPopupType = ref("terrainRoute");
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
|
|
|
+ drawRegionMap.initMap(point, mapContainer.value);
|
|
|
+});
|
|
|
+
|
|
|
+onActivated(() => {
|
|
|
+ const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
|
|
|
+
|
|
|
+ // 先绘制地块
|
|
|
+ const polygonData = route.query.polygonData;
|
|
|
+
|
|
|
+ if (polygonData) {
|
|
|
+ drawRegionMap.setAreaGeometry(JSON.parse(polygonData)?.geometryArr);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 再设置地图中心位置，确保视图在 mapCenter
|
|
|
+ drawRegionMap.setMapPosition(convertPointToArray(point));
|
|
|
+});
|
|
|
+
|
|
|
+onDeactivated(() => {
|
|
|
+ drawRegionMap.clearLayer()
|
|
|
+})
|
|
|
+const goBack = () => {
|
|
|
+ // drawRegionMap.clearLayer()
|
|
|
+ router.back()
|
|
|
+};
|
|
|
+
|
|
|
+const onTerrainRouteConfirm = () => {
|
|
|
+ if (terrainPopupType.value === "terrainRoute") {
|
|
|
+ setTimeout(() => {
|
|
|
+ terrainPopupType.value = "terrainRouteSuccess";
|
|
|
+ showTerrainRoutePopup.value = true;
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ showTerrainRoutePopup.value = false;
|
|
|
+ router.back();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const confirm = () => {
|
|
|
+ if (type.value === "droneConsult") {
|
|
|
+ terrainPopupType.value = "terrainRoute";
|
|
|
+ showTerrainRoutePopup.value = true;
|
|
|
+ }
|
|
|
+ // const polygonData = drawRegionMap.getAreaGeometry();
|
|
|
+ // sessionStorage.setItem("drawRegionPolygonData", JSON.stringify(polygonData));
|
|
|
+ // router.back();
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.edit-map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .edit-map-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .edit-map-tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 23px;
|
|
|
+ left: calc(50% - 256px / 2);
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 9px 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-map-footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 80px;
|
|
|
+ left: 12px;
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-end;
|
|
|
+
|
|
|
+ .footer-back {
|
|
|
+ padding: 6px 7px 9px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+
|
|
|
+ .back-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-address-box {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 19px 0 14px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 14px;
|
|
|
+ padding: 14px 12px;
|
|
|
+
|
|
|
+ .footer-address {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(0, 0, 0, 0.6);
|
|
|
+
|
|
|
+ .address-title {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .address-btn {
|
|
|
+ color: #2199f8;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ border-radius: 25px;
|
|
|
+ padding: 6px 10px;
|
|
|
+ flex: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .edit-map-footer-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ flex: 1;
|
|
|
+ max-width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-radius: 25px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-confirm {
|
|
|
+ background: #000;
|
|
|
+ background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi