feat:添加上传提示弹窗

src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -786,16 +786,16 @@ watch(
 );
 
 const handleStatusDetail = (fw) => {
-    // router.push({
-    //     path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/status_detail",
-    //     query: { miniJson: JSON.stringify({ id: fw.id }) },
-    // });
-    if (props.pageType === 'agri_record') {
-        router.push({
-            path: "/status_detail",
-            query: { miniJson: JSON.stringify({ farmWorkLibId: fw.farmWorkLibId, farmWorkRecordId: fw.farmWorkRecordId, farmId: props.farmId }) },
-        });
-    }
+    router.push({
+        path: props.pageType === 'agri_plan' ? "/agricultural_detail" : "/status_detail",
+        query: { miniJson: JSON.stringify({ id: fw.id }) },
+    });
+    // if (props.pageType === 'agri_record') {
+    //     router.push({
+    //         path: "/status_detail",
+    //         query: { miniJson: JSON.stringify({ farmWorkLibId: fw.farmWorkLibId, farmWorkRecordId: fw.farmWorkRecordId, farmId: props.farmId }) },
+    //     });
+    // }
 };
 
 // 格式化日期为 MM-DD 格式

src/components/popup/uploadTips.vue

@@ -0,0 +1,117 @@
+<template>
+    <popup v-model:show="showValue" round class="upload-tips-popup" teleport="body">
+        <div class="title">上传提示</div>
+        <div class="tips-box">
+            <Highlight class="tips-text" source-string="请使用 水印相机 APP 进行拍摄照片照片需要显示 时间和位置 水印"
+                :keywords="['水印相机 APP', '时间和位置']" />
+        </div>
+        <div class="img-box">
+            <img src="@/assets/img/monitor/upload-tip-img.png" alt="">
+            <div class="img-text">示例图片</div>
+            <div class="img-info">
+                <span class="img-time">14:33</span>
+                <div class="info-text">
+                    <span>2026.03.11 星期三</span>
+                    <span class="address">广州市从化区江埔街九里步</span>
+                </div>
+            </div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { Popup, Highlight } from "vant";
+import { computed } from "vue";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["update:show", "know", "next"]);
+
+const showValue = computed({
+    get: () => props.show,
+    set: (value) => emit("update:show", value),
+});
+
+const handleKnow = () => {
+    emit("know");
+    emit("update:show", false);
+};
+
+const handleNext = () => {
+    emit("next");
+    emit("update:show", false);
+};
+</script>
+
+<style scoped lang="scss">
+.upload-tips-popup {
+    width: 100%;
+    padding: 20px 18px;
+
+    .title {
+        font-size: 28px;
+        color: #2F2F2F;
+        font-family: "PangMenZhengDao";
+        text-align: center;
+    }
+
+    .tips-box {
+        padding: 12px 10px;
+        background: rgba(33, 153, 248, 0.1);
+        border-radius: 5px;
+        margin: 10px 0 12px 0;
+
+        .tips-text {
+            font-size: 16px;
+            line-height: 30px;
+            text-align: center;
+        }
+    }
+
+    .img-box {
+        width: 100%;
+        height: 210px;
+        position: relative;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+
+        .img-text {
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: rgba(0, 0, 0, 0.7);
+            color: #fff;
+            font-size: 12px;
+            padding: 4px 12px;
+            border-radius: 8px 0 8px 0;
+        }
+
+        .img-info {
+            position: absolute;
+            bottom: 15px;
+            left: 0;
+            color: #fff;
+            text-align: center;
+            width: 100%;
+            .img-time {
+                font-size: 36px;
+            }
+            .info-text {
+                font-size: 13px;
+                margin-top: 5px;
+                .address{
+                    margin-left: 12px;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/interactionList/index.vue

@@ -1,6 +1,7 @@
 <template>
     <custom-header name="农情互动" bgColor="#f2f4f5"></custom-header>
     <div class="interaction-list" ref="interactionListRef">
+        <!-- <div class="tips-text">由于系统审核，您照片拍摄位置与农场相差超 3 公里，请在农场现场使用水印相机重新拍摄上传，谢谢配合</div> -->
         <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
             :class="{ 'uploaded-item': item.questionStatus !== 3 }">
             <!-- 标题区域 -->
@@ -9,6 +10,10 @@
                     <div class="title">{{ item.interactionTypeName }}</div>
                     <div class="status" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">{{
                         urgentType[item.urgent] }}</div>
+                    <!-- <div class="location-error">
+                        <el-icon size="16"><InfoFilled /></el-icon>
+                        <span>提交有误</span>
+                    </div> -->
                 </div>
                 <div class="upload-status" v-show="item.questionStatus !== 3">
                     <el-icon class="status-icon">
@@ -117,6 +122,8 @@
                         确认提交
                     </div>
                 </div>
+
+                <div class="invite-btn">邀请农情互动</div>
             </div>
 
             <!-- 比例信息（已上传状态显示） -->
@@ -192,6 +199,8 @@
 
     <!-- 查看更多弹窗 -->
     <more-popup ref="morePopupRef" />
+
+    <upload-tips v-model:show="showUploadTipsPopup" />
 </template>
 <script setup>
 import { ref, onActivated, computed, onUnmounted } from "vue";
@@ -208,6 +217,9 @@ import DrawRegionMap from "./map/drawRegionMap.js";
 import UploadFile from "@/utils/upliadFile";
 import { getFileExt } from "@/utils/util";
 import MorePopup from "./components/morePopup.vue";
+import UploadTips from "@/components/popup/uploadTips.vue";
+
+const showUploadTipsPopup = ref(false);
 
 const interactionListRef = ref(null);
 const SCROLL_KEY = 'interactionListScrollTop';
@@ -464,7 +476,8 @@ const showExample = (item, index, options = {}) => {
 const loadData = async () => {
     loading.value = true;
     try {
-        const { data } = await VE_API.home.listTriggeredByFarm({ farmId: localStorage.getItem("selectedFarmId"),interactionTypeId:'' })
+        const { data } = await VE_API.home.listTriggeredByFarm({ farmId: 98156,interactionTypeId:'' })
+        // const { data } = await VE_API.home.listTriggeredByFarm({ farmId: localStorage.getItem("selectedFarmId"),interactionTypeId:'' })
         listData.value = data.map(item => {
             // question 按 || 切割成数组，用于循环渲染
             const questionStr = item.question != null ? String(item.question) : '';
@@ -694,6 +707,15 @@ const handleSubmitAll = () => {
     box-sizing: border-box;
     overflow-y: auto;
 
+    .tips-text{
+        color: #FA7406;
+        padding: 5px 10px;
+        border: 1px solid #FA7406;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        background: #fff;
+    }
+
     .list-item {
         background: #ffffff;
         border-radius: 6px;
@@ -739,6 +761,15 @@ const handleSubmitAll = () => {
                         background: rgba(238, 70, 70, 0.1);
                     }
                 }
+                .location-error{
+                    display: flex;
+                    align-items: center;
+                    font-family: "Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif";
+                    color: #FA7406;
+                    gap: 4px;
+                    font-size: 14px;
+                    background: #fff;
+                }
             }
 
             .upload-status {
@@ -960,6 +991,16 @@ const handleSubmitAll = () => {
             }
         }
 
+        .invite-btn{
+            color: #2199f8;
+            border: 1px solid rgba(33, 153, 248, 0.2);
+            border-radius: 4px;
+            padding: 5px;
+            text-align: center;
+            margin-top: 12px;
+            background: rgba(33, 153, 248, 0.1);
+        }
+
         .proportion-info {
             display: flex;
             justify-content: space-between;

src/views/old_mini/monitor/index.vue

@@ -9,7 +9,7 @@
         <!-- 作物档案 -->
         <div class="archives-time-line">
             <div class="archives-time-line-header">
-                <div class="line-title">作物档案</div>
+                <div class="line-title" @click="handlePage">作物档案</div>
                 <div class="header-right">
                     <div class="add-variety-btn" @click="handleAddVariety">
                         <el-icon size="12"><Plus /></el-icon>
@@ -87,6 +87,10 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
 import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
 
+const handlePage = () => {
+    router.push("/interaction_list");
+}
+
 // 品种选择（作物档案内）- 根据主体ID动态获取分区列表
 const varietyTabs = ref([]);
 const activeVariety = ref(0);

src/views/old_mini/monitor/subPages/agriculturalDetail.vue

@@ -15,14 +15,19 @@
             <div class="card-wrap">
                 <div class="card-box photo-card">
                     <div class="card-title">农情照片</div>
-                    <div class="area-btns">
-                        <div v-for="(area, idx) in areaList" :key="idx" class="area-btn"
-                            :class="{ active: activeAreaIndex === idx }" @click="activeAreaIndex = idx">
-                            {{ area }}区
+                    <div class="ratio-tip">出现新梢的果树占比为5%</div>
+                    <div class="photo-grid">
+                        <div
+                            v-for="photo in photoList"
+                            :key="photo.id"
+                            class="photo-item"
+                            @click="handlePhotoClick(photo)"
+                        >
+                            <img :src="photo.url" alt="农情照片" />
                         </div>
                     </div>
-                    <div class="ratio-tip">出现新梢的果树占比为{{ currentRatio }}%</div>
                 </div>
+
             </div>
         </div>
     </div>
@@ -30,9 +35,13 @@
 
 <script setup>
 import { useRouter, useRoute } from "vue-router";
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import customHeader from "@/components/customHeader.vue";
 
+import { Popup } from "vant";
+import AlbumCarousel from "@/components/album_compoents/albumCarousel";
+import { base_img_url2 } from "@/api/config";
+
 const router = useRouter();
 const route = useRoute();
 
@@ -51,13 +60,34 @@ if (route.query.miniJson) {
 const samplingTime = ref("2025.05.06");
 const samplingDesc = ref("本次飞巡采样了1区、2区和5区,拍摄了120棵树");
 
-// 区域列表与当前选中
-const areaList = ref(["1", "2", "3", "3"]);
-const activeAreaIndex = ref(0);
-
-// 当前选中区的占比（示例数据，可按区区分）
-const ratioByArea = ["5", "8", "12", "12"];
-const currentRatio = computed(() => ratioByArea[activeAreaIndex.value] ?? "5");
+// 农情照片示例列表（后续可替换为接口数据）
+const photoList = ref(
+    Array.from({ length: 25 }).map((_, index) => ({
+        id: index + 1,
+        url: "https://picsum.photos/200/200?random=10",
+    }))
+);
+
+// 图片弹窗相关
+const showImagePopup = ref(false);
+const imgType = ref("");
+const imageList = ref([]);
+const currentImageData = ref({});
+
+const handlePhotoClick = (photo) => {
+    // 暂时使用当前页面的假数据 URL，直接传给轮播组件
+    // imageList.value = photoList.value.map((p) => p.url);
+    // imgType.value = "";
+    // currentImageData.value = {
+    //     executeName: "",
+    //     executeDate: samplingTime.value,
+    //     farmName: "",
+    //     prescriptionList: [],
+    //     farmWorkName: "农情照片",
+    //     droneDate: "",
+    // };
+    // showImagePopup.value = true;
+};
 
 </script>
 
@@ -71,79 +101,82 @@ const currentRatio = computed(() => ratioByArea[activeAreaIndex.value] ?? "5");
         padding: 12px;
         padding-bottom: 24px;
         box-sizing: border-box;
-    }
-}
 
-.card-wrap {
-    margin-bottom: 12px;
-}
-
-.card-box {
-    background: #fff;
-    border-radius: 8px;
-    padding: 12px 16px;
-    box-sizing: border-box;
-}
-
-.sampling-card {
-    .sampling-title {
-        font-size: 16px;
-        font-weight: 500;
-        color: #333;
-        margin-bottom: 6px;
-    }
+        .card-wrap {
+            margin-bottom: 12px;
 
-    .sampling-desc {
-        font-size: 14px;
-        color: #767676;
-        line-height: 1.5;
-    }
-}
-
-.photo-card {
-    .card-title {
-        font-size: 16px;
-        font-weight: bold;
-        color: #333;
-        margin-bottom: 12px;
-    }
+            .card-box {
+                background: #fff;
+                border-radius: 8px;
+                padding: 12px 16px;
+                box-sizing: border-box;
+            }
 
-    .area-btns {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 8px;
-        margin-bottom: 12px;
-        overflow-x: auto;
-        padding-bottom: 4px;
-        -webkit-overflow-scrolling: touch;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
+            .sampling-card {
+                .sampling-title {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #333;
+                    margin-bottom: 6px;
+                }
+
+                .sampling-desc {
+                    font-size: 14px;
+                    color: rgba(0, 0, 0, 0.5);
+                }
+            }
 
-        .area-btn {
-            padding: 0 14px;
-            height: 32px;
-            line-height: 32px;
-            font-size: 14px;
-            color: #333;
-            background: #f2f3f5;
-            border-radius: 16px;
-            white-space: nowrap;
-
-            &.active {
-                background: #2199f8;
-                color: #fff;
+            .photo-card {
+                .card-title {
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: #333;
+                    margin-bottom: 12px;
+                }
+
+                .ratio-tip {
+                    font-size: 14px;
+                    color: #2199f8;
+                    padding: 10px 12px;
+                    background: rgba(33, 153, 248, 0.08);
+                    border-radius: 8px;
+                }
+
+                .photo-grid {
+                    margin-top: 12px;
+                    display: grid;
+                    grid-template-columns: repeat(4, 1fr);
+                    grid-gap: 6px;
+
+                    .photo-item {
+                        position: relative;
+                        width: 100%;
+                        padding-bottom: 100%;
+                        border-radius: 8px;
+                        overflow: hidden;
+                        background: #e5f5e5;
+
+                        img {
+                            position: absolute;
+                            inset: 0;
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            display: block;
+                        }
+                    }
+                }
             }
         }
     }
+}
+
+.image-popup {
+    width: 327px;
+    border-radius: 8px;
 
-    .ratio-tip {
-        font-size: 14px;
-        color: #2199f8;
-        padding: 10px 12px;
-        background: rgba(33, 153, 248, 0.08);
-        border-radius: 8px;
+    .popup-content {
+        width: 100%;
     }
 }
-</style>
+</style>

src/views/old_mini/monitor/subPages/darwArea.vue

@@ -19,9 +19,10 @@
                 <div class="footer-back" @click="goBack">
                     <img class="back-icon" src="@/assets/img/home/go-back.png" alt="" />
                 </div>
-                <div class="edit-map-footer-btn" v-if="!viewOnly">
-                    <div class="btn-reset" @click="resetPolygon">重置区域</div>
-                    <div class="btn-confirm" @click="confirm">确认</div>
+                <div class="edit-map-footer-btn confirm-btn-box" v-if="!viewOnly">
+                    <!-- <div class="btn-reset" @click="resetPolygon">重置区域</div>
+                    <div class="btn-confirm" @click="confirm">确认</div> -->
+                    <div class="btn-confirm" @click="confirm">编辑区域</div>
                 </div>
             </div>
         </div>
@@ -51,7 +52,7 @@ const route = useRoute();
 const mapContainer = ref(null);
 const drawRegionMap = new DrawRegionMap();
 
-const showSuccessPopup = ref(true);
+const showSuccessPopup = ref(false);
 
 const type = ref(null);
 const varietyTabs = ref([]);
@@ -326,6 +327,9 @@ const handleSelectNextVariety = () => {
                 background: #fff;
                 padding: 10px 12px 20px 12px;
                 box-sizing: border-box;
+                &.confirm-btn-box{
+                    justify-content: center;
+                }
 
                 div {
                     width: 100px;
@@ -338,9 +342,9 @@ const handleSelectNextVariety = () => {
                 }
 
                 .btn-confirm {
-                    background: #000;
-                    background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
+                    background: #2199F8;
                     color: #fff;
+                    border: 1px solid #2199F8;
                 }
             }
         }