Ver Fonte

feat:修改勾画地图的bug和切换品种弹窗逻辑

wangsisi há 4 dias atrás
pai
commit
a3240582ed

+ 35 - 65
src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -115,20 +115,14 @@
             </template>
         </div>
     </div>
-    <!-- 图片弹窗 -->
-    <popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
-        <album-carousel class="popup-content" :key="imageList?.length" labelText="" :imgData="currentImageData"
-            :images="imageList" :imgType="imgType" disableClick></album-carousel>
-    </popup>
 </template>
 
 <script setup>
 import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
-import { Empty, Popup } from "vant";
+import { Empty, showImagePreview } from "vant";
 import { base_img_url2 } from "@/api/config";
-import AlbumCarousel from "@/components/album_compoents/albumCarousel";
 
 const router = useRouter();
 
@@ -221,8 +215,6 @@ const uniqueTimestamp = ref(Date.now());
 let resizeObserver = null;
 // 标记是否为空数据
 const isEmpty = ref(false);
-// 控制图片弹窗显示/隐藏
-const showImagePopup = ref(false);
 // 标记是否正在请求数据,防止重复请求
 const isRequesting = ref(false);
 // 记录上一次请求的 farmId,避免相同 farmId 重复请求
@@ -330,28 +322,38 @@ const fetchImageUrls = async (params) => {
     }
 };
 
-// 点击图片
-const imgType = ref('');
-const imageList = ref([]);
-const currentImageData = ref({});
-const handleImageClick = (fw) => {
-    if (fw.sourceType !== 7) {
-        imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
-        imageList.value = fw.sourceDataJson.resFilename || [];
-    } else {
-        imgType.value = '';
-        imageList.value = fw.sourceDataJson.executeImageUrls || [];
-    }
-    currentImageData.value = {
-        ...fw,
-        executeName: fw.sourceDataJson.executorName,
-        executeDate: formatDate(fw.updateTime),
-        farmName: fw.sourceDataJson.farmName,
-        prescriptionList: fw.sourceDataJson.pesticideFertilizerNames,
-        farmWorkName: fw.sourceDataJson.farmWorkName,
-        droneDate: formatDateToYYMMDD(fw.updateTime)
+// 与 albumCarouselItem.getPhotoSrc 一致:拼 CDN 前缀;无水印预览用 Vant ImagePreview
+const resolveFarmWorkImagePath = (photo) => {
+    if (photo == null) return "";
+    if (typeof photo === "string") return photo;
+    return photo.cloudFilename || photo.filename || "";
+};
+
+const buildFarmWorkPreviewUrls = (fw) => {
+    const sd = fw?.sourceDataJson;
+    if (!sd) return [];
+    const toFullUrl = (path) => {
+        if (!path) return "";
+        if (/^https?:\/\//i.test(path)) return path;
+        return base_img_url2 + path;
     };
-    showImagePopup.value = true;
+    if (fw.sourceType === 7) {
+        const arr = sd.executeImageUrls || [];
+        return arr.map((p) => toFullUrl(resolveFarmWorkImagePath(p))).filter(Boolean);
+    }
+    const arr = sd.resFilename || [];
+    return arr.map((p) => toFullUrl(resolveFarmWorkImagePath(p))).filter(Boolean);
+};
+
+const handleImageClick = (fw) => {
+    const images = buildFarmWorkPreviewUrls(fw);
+    if (!images.length) return;
+    showImagePreview({
+        images,
+        startPosition: 0,
+        closeable: true,
+        showIndex: true,
+    });
 };
 
 // 顶部物候标题:相邻两段 phenologyName 相同时只显示一次(保留第一段)
@@ -806,19 +808,9 @@ watch(
 
 const handleStatusDetail = (fw) => {
     router.push({
-        path: "/work_detail",
-        query: { farmWorkLibId: fw.farmWorkLibId, farmId: props.farmId },
-    })
-    // router.push({
-    //     path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/status_detail",
-    //     query: { farmId: props.farmId, regionId: props.regionId,date: fw.createTime.slice(0,10) },
-    // });
-    // if (props.pageType === 'agri_record') {
-    //     router.push({
-    //         path: "/status_detail",
-    //         query: { miniJson: JSON.stringify({ farmWorkLibId: fw.farmWorkLibId, farmWorkRecordId: fw.farmWorkRecordId, farmId: props.farmId }) },
-    //     });
-    // }
+        path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/work_detail",
+        query: { farmId: props.farmId, regionId: props.regionId,date: fw?.createTime?.slice(0,10),farmWorkLibId: fw?.farmWorkLibId },
+    });
 };
 
 // 格式化日期为 MM-DD 格式
@@ -842,17 +834,6 @@ const formatDateForAPI = (dateStr) => {
     return `${y}-${m}-${d}`;
 };
 
-// 格式化日期为 YYMMDD 格式(如:260110,26为年份,01为月份,10为日)
-const formatDateToYYMMDD = (dateStr) => {
-    if (!dateStr) return "";
-    const date = new Date(dateStr);
-    if (Number.isNaN(date.getTime())) return "";
-    const y = `${date.getFullYear()}`.substring(2); // 获取后两位年份,如 2026 -> 26
-    const m = `${date.getMonth() + 1}`.padStart(2, "0");
-    const d = `${date.getDate()}`.padStart(2, "0");
-    return `${y}${m}${d}`;
-};
-
 // 获取下一个即将到来的节气(当前节气)的 progress
 const getNextTermProgress = () => {
     if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
@@ -1410,14 +1391,3 @@ watch(
     }
 }
 </style>
-
-<style lang="scss" scoped>
-.image-popup {
-    width: 327px;
-    border-radius: 8px;
-
-    .popup-content {
-        width: 100%;
-    }
-}
-</style>

+ 2 - 51
src/components/popup/selectRegionPopup.vue

@@ -18,7 +18,6 @@
 import { Popup } from "vant";
 import { computed, ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
 import DrawRegionMap from "@/views/old_mini/interactionList/map/drawRegionMap.js";
-import * as util from "@/common/ol_common.js";
 
 const props = defineProps({
     show: {
@@ -42,16 +41,6 @@ const props = defineProps({
         type: String,
         default: "POINT (113.6142086995688 23.585836479509055)",
     },
-    /** 默认要回显的区域,多边形 WKT 数组 */
-    geometryArr: {
-        type: Array,
-        default: () => [],
-    },
-    /** 默认区域的面积文案(单位:亩,可选) */
-    areaText: {
-        type: [String, Number],
-        default: "",
-    },
 });
 
 const emit = defineEmits(["update:show", "skip", "confirm"]);
@@ -77,46 +66,8 @@ const handleConfirm = () => {
 const initMap = () => {
     if (!mapContainer.value) return;
     if (drawRegionMap.kmap) return;
-    // 在弹窗中以只读模式展示地图
-    drawRegionMap.initMap(props.centerPoint, mapContainer.value, false, true, false);
-    // 默认回显一个区域:优先使用外部传入的 geometryArr,没有则基于中心点生成一个小方形区域
-    let geometryArr = Array.isArray(props.geometryArr) && props.geometryArr.length > 0 ? props.geometryArr : [];
-    if (!geometryArr.length && props.centerPoint) {
-        try {
-            const match = props.centerPoint.match(/POINT\s*\(\s*([0-9.+-]+)\s+([0-9.+-]+)\s*\)/i);
-            if (match) {
-                const lng = Number(match[1]);
-                const lat = Number(match[2]);
-                const dLng = 0.0007;
-                const dLat = 0.0007;
-                const points = [
-                    [lng - dLng, lat - dLat],
-                    [lng - dLng, lat + dLat],
-                    [lng + dLng, lat + dLat],
-                    [lng + dLng, lat - dLat],
-                    [lng - dLng, lat - dLat],
-                ];
-                const polygonWkt = `POLYGON((${points.map(([x, y]) => `${x} ${y}`).join(",")}))`;
-                geometryArr = [polygonWkt];
-            }
-        } catch (e) {
-            // 解析失败则不回显默认区域
-        }
-    }
-    if (geometryArr.length) {
-        drawRegionMap.setAreaGeometry(geometryArr, true, props.areaText);
-    }
-
-    // 在区域中心落一个点位(使用与勾画页相同的图标)
-    try {
-        const geom = util.wktCastGeom(props.centerPoint);
-        if (geom && typeof geom.getFirstCoordinate === "function") {
-            const coord = geom.getFirstCoordinate(); // 地图投影坐标
-            drawRegionMap.setMapPoint(coord);
-        }
-    } catch (e) {
-        // 解析失败则忽略点位
-    }
+    // 在弹窗中以只读模式展示地图(仅中心点,不回显地块)
+    drawRegionMap.initMap(props.centerPoint, mapContainer.value, false, false, true);
 };
 
 const destroyMap = () => {

+ 3 - 1
src/views/old_mini/agri_record/index.vue

@@ -32,7 +32,7 @@
                 <img class="example-img" src="@/assets/img/monitor/example.png" alt="">
             </template>
             <div class="archives-time-line-content">
-                <archives-farm-time-line :farmId="farmIdData" :containerId="containerData"
+                <archives-farm-time-line :farmId="farmIdData" :regionId="regionData" :containerId="containerData"
                     pageType="agri_record"></archives-farm-time-line>
             </div>
         </div>
@@ -95,10 +95,12 @@ const getVarietyTabs = async () => {
 
 const farmIdData = ref(null);
 const containerData = ref(null);
+const regionData = ref(null);
 const handleVarietyClick = (tab, index) => {
     activeVariety.value = index;
     farmIdData.value = tab.farmId;
     containerData.value = tab.containerId;
+    regionData.value = tab.regionId;
 };
 
 const showFarmPopup = ref(false); // 农场领取成功弹窗

+ 6 - 0
src/views/old_mini/interactionList/map/drawRegionMap.js

@@ -219,6 +219,12 @@ class DrawRegionMap {
         }
     }
 
+    /** 取消当前未完成的勾画(草图在 Draw 的 overlay 上,仅 clear 多边形图层去不掉) */
+    abortOngoingDrawSketch() {
+        if (!this.kmap || !this.kmap.draw || typeof this.kmap.draw.abortDrawing !== "function") return;
+        this.kmap.draw.abortDrawing();
+    }
+
     /**
      * 销毁地图实例(用于从编辑态切换到仅查看时重新初始化)
      */

+ 9 - 6
src/views/old_mini/monitor/index.vue

@@ -23,7 +23,7 @@
             <!-- 品种选择 -->
             <div class="variety-tabs" v-if="varietyTabs.length > 0">
                 <div v-for="(v, index) in varietyTabs" :key="index" class="variety-tab"
-                    :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index,true)">
+                    :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
                     {{ v.regionName }}
                 </div>
             </div>
@@ -60,7 +60,7 @@
     </div>
 
     <!-- 勾选区域引导弹窗 -->
-    <select-region-popup v-model:show="showSelectRegionPopup" :image="selectRegionImage" title="勾选 妃子笑 区域"
+    <select-region-popup v-model:show="showSelectRegionPopup" :image="selectRegionImage" :title="titlePopup"
         sub-title="精准匹配农情信息,高效管理分区" @confirm="handleGoSelectRegion" @skip="handleSkipSelectRegion" />
 
     <!-- 农事执行弹窗 -->
@@ -114,13 +114,16 @@ const getVarietyTabs = async () => {
 
 const farmIdData = ref(null);
 const regionData = ref(null);
-const handleVarietyClick = (tab, index, isShowSelectRegionPopup = false) => {
+const titlePopup = ref("");
+const handleVarietyClick = (tab, index) => {
+    console.log(tab, 'tab');
     activeVariety.value = index;
     farmIdData.value = tab.farmId;
     regionData.value = tab.regionId;
-    // if(isShowSelectRegionPopup) {
-    //     showSelectRegionPopup.value = true;
-    // }
+    if(tab.lastViewTime == null) {
+        titlePopup.value = `勾选 ${tab.regionName} 区域`;
+        showSelectRegionPopup.value = true;
+    }
 };
 
 const date = ref(new Date());

+ 2 - 0
src/views/old_mini/monitor/subPages/darwArea.vue

@@ -146,6 +146,8 @@ const resetPolygon = () => {
         }
     )
         .then(() => {
+            // 先取消进行中的勾画草图(未完成时线条在 Draw 的 overlay 上,清 source 去不掉)
+            drawRegionMap.abortOngoingDrawSketch();
             // 只清空当前可编辑多边形,不影响只读状态图层
             if (drawRegionMap.kmap && drawRegionMap.kmap.polygonLayer && drawRegionMap.kmap.polygonLayer.source) {
                 drawRegionMap.kmap.polygonLayer.source.clear();