feat:修改物候回答页面逻辑

src/i18n/recordDetails-messages.js

@@ -34,7 +34,7 @@ export const recordDetailsZh = {
     phenologyIssue: "是否有60%的荔枝进入膨果期?",
     currentStatus: "当前现状：当前{label}进入到{period}",
     uploadPhoto: "点击上传照片",
-    confirmInfo: "确认信息",
+    confirmInfo: "点击记录巡园照片",
     abnormalBanner: "发现异常，拍照记录",
     abnormalBannerDesc: "系统为您智能匹配农事方案",
     abnormalRecord: "异常记录",
@@ -121,7 +121,7 @@ export const recordDetailsEn = {
     phenologyIssue: "Have 60% of lychee trees entered fruit expansion?",
     currentStatus: "Status: {label} entered {period}",
     uploadPhoto: "Upload photos",
-    confirmInfo: "Confirm",
+    confirmInfo: "Tap to record patrol photos",
     abnormalBanner: "Report abnormality with photos",
     abnormalBannerDesc: "Smart farm work recommendations for you",
     abnormalRecord: "Abnormal log",

src/views/old_mini/recordDetails/components/RiskAssessPopup.vue

@@ -0,0 +1,63 @@
+<template>
+    <popup v-model:show="showValue" round class="risk-assess-popup" teleport="body">
+        <img class="risk-assess-popup__img" :src="imageSrc" alt="" />
+        <div class="risk-assess-popup__desc">
+            <div>
+                经过飞鸟智慧大脑计算，今日出现高温<span class="highlight">干旱风险3级</span>，今日温度35摄氏度，<span class="highlight">SPEI干旱指数-0.5</span>，目前处于 果皮速长期，对高温敏感。
+            </div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { Popup } from "vant";
+import defaultImg from "@/assets/img/common/sd-4.jpg";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    image: {
+        type: String,
+        default: "",
+    },
+});
+
+const emit = defineEmits(["update:show"]);
+
+const showValue = computed({
+    get: () => props.show,
+    set: (value) => emit("update:show", value),
+});
+
+const imageSrc = computed(() => props.image || defaultImg);
+</script>
+
+<style scoped lang="scss">
+.risk-assess-popup {
+    width: 100%;
+    padding: 10px;
+
+    &__img {
+        width: 100%;
+        height: 150px;
+        object-fit: cover;
+        border-radius: 8px;
+    }
+
+    &__desc {
+        margin-top: 10px;
+        padding: 10px;
+        border-radius: 5px;
+        background: rgba(167, 167, 167, 0.1);
+        color: #3C3C3C;
+
+        .highlight {
+            color: #2199f8;
+            font-weight: 500;
+        }
+    }
+}
+</style>

src/views/old_mini/recordDetails/index.vue

@@ -14,7 +14,7 @@
                 <span>{{ t('agriRecord.phenologyWorkName') }}</span>
                 <div class="question">{{ workDetail.interaction_issue }}</div>
             </div>
-            <div class="record-body" :style="{ paddingBottom: recordType === 'phenology' ? '10px' : '90px' }">
+            <div class="record-body">
                 <div class="card-wrap" v-if="recordType === 'growth'">
                     <div class="card-item">
                         <span class="item-label">{{ t('recordDetails.scienceLabel') }}</span>
@@ -132,7 +132,7 @@
                         </div>
                     </div>
                 </div>
-                <!-- <div class="tabs-list" v-if="!showMap">
+                <!-- <div class="tabs-list" v-if="showMap">
                     <div class="item-tab" :class="{ 'item-tab--active': activeTab === index }"
                         v-for="(item, index) in tabsList" :key="index" @click="handleTabClick(index)">{{ item.label }}
                     </div>
@@ -148,7 +148,7 @@
                             </el-input>
                         </div>
                         <div class="my-map">
-                            <div class="map-container" ref="mapContainer">
+                            <div class="map-container" ref="recordMapContainer">
                                 <div class="tip">{{ t('recordDetails.drawTip') }}</div>
                             </div>
                             <div class="confirm-btn-wrap">
@@ -173,15 +173,6 @@
                             />
                         </div>
                         <div class="confirm-btn-wrap">
-                            <uploader @click="handleUploadClick" :before-read="beforeReadUpload" class="upload-wrap"
-                                multiple :max-count="10" :after-read="afterReadUpload">
-                                <div class="upload-btn">
-                                    <el-icon>
-                                        <Plus />
-                                    </el-icon>
-                                    <span>{{ t('recordDetails.uploadPhoto') }}</span>
-                                </div>
-                            </uploader>
                             <div class="confirm-btn" @click="hanldeSubmit">{{ t('recordDetails.confirmInfo') }}</div>
                         </div>
                     </div>
@@ -195,21 +186,24 @@
             <div class="bottom-btn secondary-btn">{{ $t('转发记录') }}</div>
         </div> -->
 
-        <!-- <UploadProgressPopup ref="uploadProgressPopupRef" v-model:show="showUploadProgressPopup"
-            :popup-image-upload-loading="popupImageUploadLoading" :init-img-arr="initImgArr"
-            @cancel="handleCancelUploadPopup" @confirm="handleConfirmUpload" @handleUpload="handleUploadSuccess">
+        <RiskAssessPopup v-model:show="showRiskAssessPopup" />
+
+        <!-- 物候 上传弹窗 -->
+        <UploadProgressPopup ref="phenologyUploadPopupRef" v-model:show="showPhenologyUploadPopup"
+            @cancel="handleCancelPhenologyUploadPopup" :upload-required="false" @confirm="handleConfirmPhenologyUpload">
             <template #header>
                 <div class="upload-progress-title">
-                    <span class="label">{{ $t('当前现状：') }}</span>
-                    <span class="value">{{ $t('60% 进入红黄叶进程') }}</span>
+                    <!-- <span class="label">{{ $t('当前现状：') }}</span> -->
+                    <span class="value">{{ currentStatusText }}</span>
                 </div>
             </template>
-        </UploadProgressPopup> -->
+        </UploadProgressPopup>
 
-        <UploadProgressPopup ref="uploadProgressPopupRef" v-model:show="showUploadProgressPopup"
-            :popup-image-upload-loading="popupImageUploadLoading" :init-img-arr="initImgArr"
+        <!-- 病虫害 上传弹窗 -->
+        <UploadProgressPopup ref="pestUploadPopupRef" v-model:show="showPestUploadPopup"
+            :popup-image-upload-loading="pestPopupImageUploadLoading" :init-img-arr="pestInitImgArr"
             :confirm-text="t('recordDetails.confirmUpload')" :upload-required="false"
-            @reset="handleUploadPopupReset" @cancel="handleCancelUploadPopup" @confirm="handleConfirmUpload">
+            @reset="handlePestUploadPopupReset" @cancel="handleCancelPestUploadPopup" @confirm="handleConfirmPestUpload">
             <template #header>
                 <div class="upload-form">
                     <div class="form-item special-input">
@@ -246,17 +240,15 @@ import customHeader from "@/components/customHeader.vue";
 import PhenologyTrackTimelineItem from "@/components/pageComponents/PhenologyTrackTimelineItem.vue";
 import GrowthStageTimeline from "@/components/pageComponents/GrowthStageTimeline.vue";
 import UploadProgressPopup from "@/components/popup/UploadProgressPopup.vue";
+import RiskAssessPopup from "./components/RiskAssessPopup.vue";
 import { ref, onActivated, watch, nextTick, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { useI18n } from '@/i18n';
 import { RECORD_KEY_MAP } from '@/i18n/recordTextMap';
-import { Uploader, TextEllipsis } from "vant";
+import { TextEllipsis } from "vant";
 import { ElMessage } from "element-plus";
-import UploadFile from "@/utils/upliadFile";
-import { getFileExt } from "@/utils/util";
 import IndexMap from "./map/index.js";
-import { Plus } from "@element-plus/icons-vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -284,6 +276,7 @@ function goPartitionManage() {
 }
 
 const showMap = ref(false);
+const showRiskAssessPopup = ref(false);
 
 /** 病虫害态势监控：分类选择（接入接口后可绑定 workDetail） */
 const pestTopIndex = ref(0);
@@ -365,7 +358,7 @@ const handlePestDetailClick = (index) => {
 };
 
 const indexMap = new IndexMap();
-const mapContainer = ref(null);
+const recordMapContainer = ref(null);
 const uploadMapContainer = ref(null);
 const location = ref(null);
 const input = ref('');
@@ -418,22 +411,40 @@ const formData = ref({
     regionName: '',
 });
 
-function destroyUploadMap() {
+function destroyMap() {
     if (indexMap.kmap?.destroy) {
         indexMap.kmap.destroy();
     }
     indexMap.kmap = null;
 }
 
+function ensureRecordMap() {
+    if (!recordMapContainer.value) return false;
+    location.value = getFarmMapLocation();
+    destroyMap();
+    indexMap.initMap(location.value, recordMapContainer.value, { editable: false, movable: false });
+    return Boolean(indexMap.kmap);
+}
+
+function syncRecordMapView() {
+    nextTick(() => {
+        setTimeout(() => {
+            if (showMap.value) return;
+            if (!ensureRecordMap()) return;
+            resizeMap();
+        }, 250);
+    });
+}
+
 function ensureUploadMap() {
     if (!uploadMapContainer.value) return false;
     location.value = getFarmMapLocation();
-    destroyUploadMap();
+    destroyMap();
     indexMap.initMap(location.value, uploadMapContainer.value, { editable: false, movable: false });
     return Boolean(indexMap.kmap);
 }
 
-function resizeUploadMap() {
+function resizeMap() {
     indexMap.kmap?.map?.updateSize?.();
 }
 
@@ -443,24 +454,24 @@ function syncUploadMapView() {
     nextTick(() => {
         setTimeout(() => {
             if (!ensureUploadMap()) return;
-            resizeUploadMap();
+            resizeMap();
             if (geometryArr.length) {
                 indexMap.setAreaGeometry(geometryArr);
-                resizeUploadMap();
+                resizeMap();
             }
         }, 250);
     });
 }
 
 function syncFormFromMapConfirmPayload() {
-    if (!showUploadProgressPopup.value) return;
+    if (!showPestUploadPopup.value) return;
     syncUploadMapView();
 }
 
 const handleAbnormalRecord = () => {
     formData.value.ratio = '';
     formData.value.regionName = '';
-    showUploadProgressPopup.value = true;
+    showPestUploadPopup.value = true;
 };
 
 const handleMapClick = () => {
@@ -471,31 +482,29 @@ const handleMapClick = () => {
     });
 }
 
-const showUploadProgressPopup = ref(false);
+const showPhenologyUploadPopup = ref(false);
+const showPestUploadPopup = ref(false);
 
-watch(showUploadProgressPopup, (show) => {
+watch(showPestUploadPopup, (show) => {
     if (show) {
         syncUploadMapView();
     } else {
-        destroyUploadMap();
+        destroyMap();
+        if (!showMap.value) {
+            syncRecordMapView();
+        }
     }
 });
 
-const initImgArr = ref([]);
-const uploadProgressPopupRef = ref(null);
+const pestInitImgArr = ref([]);
+const phenologyUploadPopupRef = ref(null);
+const pestUploadPopupRef = ref(null);
 const phenologyTrackTimelineRef = ref(null);
-const popupImageUploadLoading = ref(false);
-const uploadFileObj = new UploadFile();
-const miniUserId = localStorage.getItem("MINI_USER_ID");
-
-const handleUploadPopupReset = () => {
-    initImgArr.value = [];
-    popupImageUploadLoading.value = false;
-};
+const pestPopupImageUploadLoading = ref(false);
 
-const beforeReadUpload = (file) => {
-    showUploadProgressPopup.value = true;
-    return true;
+const handlePestUploadPopupReset = () => {
+    pestInitImgArr.value = [];
+    pestPopupImageUploadLoading.value = false;
 };
 
 const curStage = ref({});
@@ -515,53 +524,34 @@ function labelPercentToProgress(label) {
 }
 
 const hanldeSubmit = () => {
-    const farmData = JSON.parse(localStorage.getItem('selectedFarmData'))
-    const time = new Date().toISOString()
+    showPhenologyUploadPopup.value = true;
+};
+
+const handleCancelPhenologyUploadPopup = () => {
+    showPhenologyUploadPopup.value = false;
+};
+
+const handleConfirmPhenologyUpload = () => {
+    const farmData = JSON.parse(localStorage.getItem('selectedFarmData'));
+    const time = new Date().toISOString();
     const params = {
         farm_id: farmData.farm_id,
         farm_variety: farmData.farm_variety,
         current_code: curCode.value,
         new_start_date: time.slice(0, 10),
         progress: labelPercentToProgress(curStage.value.label),
-    }
+    };
     VE_API.monitor.farmPhenologyAdjust(params).then(res => {
         if (res.code === 200) {
-            ElMessage.success(t('recordDetails.confirmSuccess'))
-        }
-    })
-}
-
-const afterReadUpload = async (data) => {
-    initImgArr.value = [];
-    if (!Array.isArray(data)) {
-        data = [data];
-    }
-    popupImageUploadLoading.value = true;
-    try {
-        for (const file of data) {
-            const fileVal = file.file;
-            file.status = "uploading";
-            file.message = "上传中...";
-            const ext = getFileExt(fileVal.name);
-            const key = `birdseye-look-mini/${miniUserId}/${new Date().getTime()}.${ext}`;
-            const resFilename = await uploadFileObj.put(key, fileVal);
-            if (resFilename) {
-                file.status = "done";
-                file.message = "";
-                initImgArr.value.push(resFilename);
-            } else {
-                file.status = "failed";
-                file.message = "上传失败";
-                ElMessage.error("图片上传失败，请稍后再试！");
-            }
+            showPhenologyUploadPopup.value = false;
+            phenologyTrackTimelineRef.value?.refresh?.();
+            ElMessage.success(t('recordDetails.confirmSuccess'));
         }
-    } finally {
-        popupImageUploadLoading.value = false;
-    }
+    });
 };
 
-const handleCancelUploadPopup = () => {
-    showUploadProgressPopup.value = false;
+const handleCancelPestUploadPopup = () => {
+    showPestUploadPopup.value = false;
     store.commit('recordDetails/CLEAR_MAP_CONFIRM_PAYLOAD');
 };
 
@@ -579,7 +569,7 @@ function validateAbnormalRatio() {
     return true;
 }
 
-const handleConfirmUpload = (imgArr) => {
+const handleConfirmPestUpload = (imgArr) => {
     if (!validateAbnormalRatio()) return;
 
     if (recordType.value === 'pest') {
@@ -605,7 +595,7 @@ const handleConfirmUpload = (imgArr) => {
     }
     VE_API.record.writeFarmRecord(params).then(res => {
         if (res.code === 200) {
-            showUploadProgressPopup.value = false;
+            showPestUploadPopup.value = false;
             store.commit('recordDetails/CLEAR_MAP_CONFIRM_PAYLOAD');
             phenologyTrackTimelineRef.value?.refresh?.();
             ElMessage.success(t('recordDetails.confirmSuccess'));
@@ -615,8 +605,6 @@ const handleConfirmUpload = (imgArr) => {
     });
 };
 
-const handleUploadClick = () => { };
-
 const activeTab = ref(0);
 
 const handleTabClick = (index) => {
@@ -764,9 +752,8 @@ onActivated(async () => {
         getGrowthAnomalyInfo();
     }
     getFindPhenologyInfo();
-    if (showMap.value) {
-        location.value = "POINT(113.6142086995688 23.585836479509055)";
-        indexMap.initMap(location.value, mapContainer.value);
+    if (!showMap.value) {
+        syncRecordMapView();
     }
 });
 
@@ -991,6 +978,7 @@ const getFindPhenologyInfo = async () => {
 
                     .question-box {
                         border: 1px solid #2199F8;
+                        background: rgba(33, 153, 248, 0.1);
                         border-radius: 5px;
                         padding: 8px;
                         color: #5A5A5A;
@@ -1047,37 +1035,6 @@ const getFindPhenologyInfo = async () => {
                         margin: 10px 0;
                     }
                 }
-
-                .no-map-wrap {
-                    .confirm-btn-wrap {
-                        div {
-                            font-size: 14px;
-                            flex: none;
-                        }
-
-                        .upload-wrap {
-                            width: calc(100% - 96px - 13px);
-                            padding: 0;
-                            background: rgba(255, 149, 61, 0.1);
-                            color: #FF953D;
-                            border-radius: 4px;
-                            display: flex;
-                            justify-content: center;
-                            border: 1px solid #FF953D;
-
-                            .upload-btn {
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                gap: 3px;
-                            }
-                        }
-
-                        .confirm-btn {
-                            width: 96px;
-                        }
-                    }
-                }
             }
 
             .card-wrap+.card-wrap {