Selaa lähdekoodia

feat:修改弹窗逻辑显示和地图bug

wangsisi 6 päivää sitten
vanhempi
commit
4315951dea

+ 1 - 0
src/components/popup/agriExecutePopup.vue

@@ -122,6 +122,7 @@ const handleExecuted = () => {
         font-size: 26px;
         margin-bottom: 14px;
         font-family: "PangMenZhengDao";
+        color: #0785E8;
     }
 
     .abnormal-info {

+ 21 - 7
src/components/popup/farmInfoPopup.vue

@@ -152,6 +152,10 @@ const props = defineProps({
         type: [String, Number],
         default: "",
     },
+    oldUser: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const city = ref("");
@@ -286,8 +290,6 @@ watch(
     () => props.show,
     (newVal) => {
         if (newVal) {
-            // 重置步骤为第一步
-            currentStep.value = 1;
             // 重置物候期列表和表单数据
             phenologyList.value = [];
             phenologyData.value = {};
@@ -311,6 +313,13 @@ watch(
                 formRef.value?.clearValidate();
                 phenologyFormRef.value?.clearValidate();
             });
+
+            if(props.oldUser){
+                currentStep.value = 2;
+                getCurrentAndNextPhenology()
+            }else{
+                currentStep.value = 1;
+            }
         }
     }
 );
@@ -371,12 +380,17 @@ const handleConfirm = async () => {
                 expertMiniUserId: props.expertMiniUserId,
                 containerId: specieList.value.find(item => item.id === formData.value.speciesId)?.defaultContainerId,
             }
-            const { code, msg } = await VE_API.farm.saveFarm(params);
-            if (code === 0) {
+            if(!props.oldUser){
+                const { code, msg } = await VE_API.farm.saveFarm(params);
+                if (code === 0) {
+                    ElMessage.success("农场信息确认成功");
+                    emit("update:show", false);
+                } else {
+                    ElMessage.error(msg || '农场信息确认失败');
+                }
+            }else{
                 ElMessage.success("农场信息确认成功");
                 emit("update:show", false);
-            } else {
-                ElMessage.error(msg || '农场信息确认失败');
             }
         } catch (error) {
             console.log("物候期表单验证失败", error);
@@ -406,7 +420,7 @@ const getCurrentAndNextPhenology = async () => {
     try {
         const { data } = await VE_API.home.getCurrentAndNextPhenology({ 
             expertMiniUserId: props.expertMiniUserId,
-            containerId: specieList.value.find(item => item.id === formData.value.speciesId)?.defaultContainerId,
+            containerId: specieList.value.find(item => item.id === formData.value.speciesId)?.defaultContainerId || '26',
         });
         if (data && Array.isArray(data)) {
             phenologyList.value = data;

+ 5 - 5
src/views/old_mini/home/index.vue

@@ -113,8 +113,8 @@ const handleAgriLater = () => {
 
 const handleAgriExecuted = () => {
     console.log("我已执行111",agriExecuteData.value);
-    if(agriExecuteData.value.executedButtonText === '查看任务'){
-        router.push("/interaction_list?expertMiniUserId=81881");
+    if(agriExecuteData.value.executedButtonText === '开始采集'){
+        router.push("/interaction_list?expertMiniUserId=81881&oldUser=true");
     }else{
         // 显示执行轨迹弹窗
         showExecuteTracePopup.value = true;
@@ -245,10 +245,10 @@ const checkHasUnrepliedTriggeredInteraction = async () => {
     if (data && data.interactionTypeName?.length) {
         agriExecuteData.value = {
             expertName: data.expertName || "韦帮稳",
-            title: data.interactionTypeName,
-            abnormalText: data.reason,
+            title: data.interactionTypeName || "新梢长势评估",
+            abnormalText: data.reason || '秋梢健壮是来年成花的关键,及时记录新梢萌动时间,可精准预测嫩叶旺长期,便于提前补充营养,防治病虫。',
             exampleImg: JSON.parse(data.exampleImagesJson)[0],
-            executedButtonText: '查看任务',
+            executedButtonText: '开始采集',
         };
         showAgriExecutePopup.value = true;
     }

+ 80 - 42
src/views/old_mini/interactionList/index.vue

@@ -17,20 +17,8 @@
                 </div>
             </div>
 
-            <!-- 展开状态内容 -->
-            <div class="expanded-content" v-show="item.isConfirmed != null && item.expanded">
-                <!-- 原因说明 -->
-                <div class="reason-text">原因: {{ item.reason }}</div>
-
-                <!-- 图片展示 -->
-                <div class="uploaded-images" v-show="item.imagePaths.length > 0">
-                    <img class="uploaded-img" v-for="image in item.imagePaths" :key="image" :src="base_img_url2 + image"
-                        alt="" />
-                </div>
-            </div>
-
             <!-- 未上传状态内容 -->
-            <div class="uploaded-content">
+            <div class="uploaded-content" v-show="item.isConfirmed == null || item.expanded">
                 <div class="content-wrapper">
                     <div class="item-desc">{{ item.reason }}</div>
                     <div class="example-wrapper">
@@ -46,7 +34,34 @@
                         </div>
                     </div>
                 </div>
-                <uploader class="upload-wrap" multiple :max-count="10" :after-read="afterReadUpload" v-show="item.isConfirmed == null">
+
+                <!-- 展开状态内容 -->
+                <div class="expanded-content"
+                    v-show="item.isConfirmed != null && item.expanded && item.imagePaths.length > 0">
+                    <!-- 原因说明 -->
+                    <div class="reason-text">上传照片({{ item.exampleImagesJson.length }}张)</div>
+                    <!-- 图片展示 -->
+                    <div class="uploaded-images">
+                        <img class="uploaded-img" v-for="image in item.imagePaths" :key="image"
+                            :src="base_img_url2 + image" alt="" />
+                    </div>
+                    <!-- <div class="continue-upload-btn">
+                        <el-icon><Plus /></el-icon>
+                        <span>继续上传照片</span>
+                    </div> -->
+                    <uploader class="upload-wrap continue-upload-btn" multiple :max-count="10" :after-read="afterReadUpload">
+                        <div class="upload-btn">
+                            <el-icon>
+                                <Plus />
+                            </el-icon>
+                            <span>继续上传照片</span>
+                        </div>
+                    </uploader>
+                </div>
+
+                <!-- 上传按钮 -->
+                <uploader class="upload-wrap" multiple :max-count="10" :after-read="afterReadUpload"
+                    v-show="item.isConfirmed == null">
                     <div class="upload-btn">
                         <el-icon>
                             <Plus />
@@ -54,31 +69,37 @@
                         <span>点击上传照片</span>
                     </div>
                 </uploader>
-                <!-- <div class="question-wrapper">
+
+                <div class="question-wrapper" v-show="item.isConfirmed != null">
                     <div class="question-text">
                         <span class="text-title">{{ item.phenologyName }}占比</span>
                         <el-input v-model="item.replyText" type="number" style="width: 80px" />
                         <span class="text-unit">%</span>
                     </div>
-                    <div class="draw-region-btn" @click="handleDrawRegion(item)">勾画发生区域</div>
-                </div> -->
+                    <div class="draw-region-btn" @click="handleDrawRegion(item)">查看发生区域</div>
+                </div>
+
                 <!-- 输入框 -->
                 <div class="input-wrapper">
                     <el-input v-model="item.remark" placeholder="请输入您咨询的问题" clearable />
                 </div>
 
                 <!-- 按钮区域 -->
-                <div class="button-group">
+                <div class="button-group" v-show="item.isConfirmed == null">
                     <div class="btn-not-reached" @click="handleNotReached(item)">{{ item.cancelButtonName }}</div>
                     <div class="btn-confirm" @click="handleConfirm(item)">确认提交</div>
                 </div>
             </div>
 
             <!-- 比例信息(已上传状态显示) -->
-            <div class="proportion-info" v-show="item.isConfirmed != null">
-                <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{ item.replyText
+            <div class="proportion-info" :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }"
+                v-show="item.isConfirmed != null">
+                <template v-if="!item.expanded">
+                    <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{
+                        item.replyText
                     }}%</span>
-                <span class="proportion-text" v-else>暂无数据</span>
+                    <span class="proportion-text" v-else>暂无数据</span>
+                </template>
                 <div class="toggle-btn" @click="toggleExpand(item)">
                     <span>{{ item.expanded ? "收起" : "展开" }}</span>
                     <el-icon :class="{ rotate: !item.expanded }">
@@ -91,15 +112,11 @@
         <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
     </div>
     <!-- 农场信息完善弹窗 -->
-    <farm-info-popup :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
+    <farm-info-popup :oldUser="oldUser" :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
 
     <!-- 示例照片轮播组件 -->
-    <example-popup
-        v-model:show="showExamplePopup"
-        :images="exampleList"
-        :start-index="exampleStartIndex"
-        title="蒂蛀虫示例图"
-    />
+    <example-popup v-model:show="showExamplePopup" :images="exampleList" :start-index="exampleStartIndex"
+        title="蒂蛀虫示例图" />
     <!-- 照片上传进度 -->
     <popup v-model:show="showUploadProgressPopup" round class="upload-progress-popup">
         <div class="upload-progress-title">
@@ -168,7 +185,6 @@ const mapContainer = ref(null);
 // 从 sessionStorage 中回显已勾画的区域
 const renderRegionFromSession = () => {
     const polygonStr = sessionStorage.getItem("drawRegionPolygonData");
-    console.log("polygonStr", polygonStr);
     if (!polygonStr) return;
     try {
         const polygonData = JSON.parse(polygonStr);
@@ -189,7 +205,7 @@ const miniUserId = localStorage.getItem("MINI_USER_ID");
 const afterReadUpload = async (data) => {
     initImgArr.value = [];
     drawRegionMap.clearLayer && drawRegionMap.clearLayer();
-    // sessionStorage.removeItem("drawRegionPolygonData");
+    sessionStorage.removeItem("drawRegionPolygonData");
     if (!Array.isArray(data)) {
         data = [data];
     }
@@ -215,7 +231,18 @@ const afterReadUpload = async (data) => {
     if (initImgArr.value.length > 0) {
         showUploadProgressPopup.value = true;
         setTimeout(() => {
-            drawRegionMap.initMap("POINT (113.6142086995688 23.585836479509055)", mapContainer.value, false, false,false);
+            // 只在第一次时初始化地图,后续复用已有实例
+            if (!drawRegionMap.kmap) {
+                drawRegionMap.initMap(
+                    "POINT (113.6142086995688 23.585836479509055)",
+                    mapContainer.value,
+                    false,
+                    false,
+                    false
+                );
+            }
+            // 每次打开弹窗都尝试根据 sessionStorage 回显最新地块
+            renderRegionFromSession();
         }, 100);
     }
 };
@@ -337,9 +364,9 @@ const toggleExpand = (item) => {
 const handleDrawRegion = (item) => {
     console.log("勾画发生区域", item);
     const polygonData = sessionStorage.getItem("drawRegionPolygonData");
-    if(polygonData){
+    if (polygonData) {
         router.push(`/draw_region?polygonData=${polygonData}`);
-    }else{
+    } else {
         router.push(`/draw_region`);
     }
 };
@@ -354,16 +381,20 @@ const openMorePopup = (images) => {
     morePopupRef.value.openPopup();
 }
 
+const oldUser = ref(false);
 onMounted(() => {
     // 初始化加载
     getFarmList();
     // 加载数据
     loadData();
+    oldUser.value = query.value.oldUser && Boolean(query.value.oldUser);
+    if(oldUser.value){
+        showFarmInfoPopup.value = true;
+    }
 });
 
 // 页面从勾画页返回时,如果组件被 keep-alive 缓存,则会触发 onActivated,在此再做一次回显
 onActivated(() => {
-    console.log("onActivated");
     renderRegionFromSession();
 });
 
@@ -439,7 +470,7 @@ const getFarmList = async () => {
                 align-items: center;
 
                 .item-header {
-                    div{
+                    div {
                         color: #2199f8;
                         background: rgba(33, 153, 248, 0.1);
                     }
@@ -448,17 +479,17 @@ const getFarmList = async () => {
         }
 
         .expanded-content {
-            .reason-text {
-                padding-top: 12px;
-                color: #969696;
-                font-size: 14px;
-            }
+            background: rgba(33, 153, 248, 0.1);
+            border-radius: 5px;
+            padding: 10px;
+            border: 0.5px solid #2199F8;
+            margin-top: 12px;
 
             .uploaded-images {
                 display: flex;
                 flex-wrap: wrap;
                 gap: 8px;
-                margin: 12px 0;
+                margin-top: 8px;
 
                 .uploaded-img {
                     width: calc((100vw - 68px) / 4);
@@ -467,6 +498,12 @@ const getFarmList = async () => {
                     object-fit: cover;
                 }
             }
+
+            .continue-upload-btn {
+                border: 0.5px solid rgba(33, 153, 248, 0.5);
+                border-radius: 4px;
+                background: #FFFFFF;
+            }
         }
 
         .uploaded-content {
@@ -686,7 +723,8 @@ const getFarmList = async () => {
             display: flex;
             align-items: center;
             gap: 6px;
-            .label-text{
+
+            .label-text {
                 width: 220px;
             }
         }

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

@@ -89,16 +89,13 @@ class DrawRegionMap {
      * @param {string|number} areaText 显示的面积(单位:亩),可选
      */
     setAreaGeometry(geometryArr, needFitView = false, areaText) {
-        console.log("geometryArr", geometryArr);
         // 兜底保护:geometryArr 可能为 undefined/null 或空数组
         if (!Array.isArray(geometryArr) || geometryArr.length === 0) return;
         // 地图实例或图层尚未初始化时也直接返回,避免报错
         if (!this.kmap || !this.kmap.polygonLayer || !this.kmap.polygonLayer.source) return;
-        console.log("this.kmap");
 
         let that = this;
         geometryArr.map(item => {
-            console.log("item", item);
             // 不使用 setLayerWkt,而是手动添加要素,避免自动缩放视图
             const format = new WKT()
             const mapProjection = that.kmap.map.getView().getProjection()
@@ -137,7 +134,6 @@ class DrawRegionMap {
                 }
                 f.setStyle(styles);
             }
-            console.log("f", f);
             that.kmap.polygonLayer.source.addFeature(f)
         })
         // 根据参数决定是否需要自适应地块范围