Browse Source

fix: 地图渲染问题

刘秀芳 2 days ago
parent
commit
79e5f56fa6

+ 1 - 0
src/views/old_mini/modify_work/completedWork.vue

@@ -446,6 +446,7 @@ const onConfirmExecuteTime = (date) => {
                         path: "/task_condition",
                     });
                 }else{
+                    ElMessage.success("操作成功");
                     getDetail(query.value.id);
                 }
             }

+ 24 - 6
src/views/old_mini/task_condition/components/interact.vue

@@ -214,18 +214,36 @@ onActivated(() => {
             if (mapContainer.value) {
                 mapPoint.value = store.state.home.miniUserLocationPoint;
                 indexMap.initMap(mapPoint.value, mapContainer.value, true);
+                // 等待地图初始化完成后再加载数据
+                setTimeout(() => {
+                    resetAndLoad();
+                }, 300);
+                return;
             }
         } else {
-            // 如果地图已初始化,更新地图尺寸(解决页面切换后地图不显示的问题)
+            // 如果地图已初始化,需要等待 tab 切换完成,容器完全可见后再更新尺寸
+            // Tab 切换时容器可能被隐藏,需要更长的延迟确保容器可见
             if (mapContainer.value && indexMap.kmap.map) {
-                // 等待容器完全可见后再更新尺寸
-                setTimeout(() => {
-                    indexMap.kmap.map.updateSize();
-                }, 100);
+                // 检查容器是否可见
+                const checkAndUpdateSize = () => {
+                    const container = mapContainer.value;
+                    if (container) {
+                        const rect = container.getBoundingClientRect();
+                        // 如果容器可见(有宽度和高度),更新地图尺寸
+                        if (rect.width > 0 && rect.height > 0) {
+                            indexMap.kmap.map.updateSize();
+                        } else {
+                            // 如果容器不可见,继续等待
+                            setTimeout(checkAndUpdateSize, 100);
+                        }
+                    }
+                };
+                // 延迟检查,确保 tab 切换完成
+                setTimeout(checkAndUpdateSize, 200);
             }
         }
+        resetAndLoad();
     });
-    resetAndLoad();
 });
 
 // 监听 activeIndex 变化,重新加载数据

+ 27 - 9
src/views/old_mini/task_condition/components/task.vue

@@ -181,7 +181,6 @@ function getTaskCount(flowStatus, index) {
         .then(({ data }) => {
             if (Array.isArray(data)) {
                 taskCounts.value[index] = data.length;
-                console.log('taskCounts.value', taskCounts.value);
                 calendarRef.value && calendarRef.value.setCounts(index, taskCounts.value[index]);
 
                 if (index === 0) {
@@ -275,20 +274,39 @@ onActivated(() => {
             if (mapContainer.value) {
                 mapPoint.value = store.state.home.miniUserLocationPoint;
                 indexMap.initMap(mapPoint.value, mapContainer.value, true);
+                // 等待地图初始化完成后再加载数据
+                setTimeout(() => {
+                    initTaskCounts();
+                    getSimpleList();
+                }, 300);
+                return;
             }
         } else {
-            // 如果地图已初始化,更新地图尺寸(解决页面切换后地图不显示的问题)
+            // 如果地图已初始化,需要等待 tab 切换完成,容器完全可见后再更新尺寸
+            // Tab 切换时容器可能被隐藏,需要更长的延迟确保容器可见
             if (mapContainer.value && indexMap.kmap.map) {
-                // 等待容器完全可见后再更新尺寸
-                setTimeout(() => {
-                    indexMap.kmap.map.updateSize();
-                }, 100);
+                // 检查容器是否可见
+                const checkAndUpdateSize = () => {
+                    const container = mapContainer.value;
+                    if (container) {
+                        const rect = container.getBoundingClientRect();
+                        // 如果容器可见(有宽度和高度),更新地图尺寸
+                        if (rect.width > 0 && rect.height > 0) {
+                            indexMap.kmap.map.updateSize();
+                        } else {
+                            // 如果容器不可见,继续等待
+                            setTimeout(checkAndUpdateSize, 100);
+                        }
+                    }
+                };
+                // 延迟检查,确保 tab 切换完成
+                setTimeout(checkAndUpdateSize, 200);
             }
         }
+        // 初始化时获取所有状态的数量
+        initTaskCounts();
+        getSimpleList();
     });
-    // 初始化时获取所有状态的数量
-    initTaskCounts();
-    getSimpleList();
 });
 
 // 标记是否正在通过日期选择切换筛选(避免 watch 清除日期筛选)

+ 21 - 4
src/views/old_mini/user/index.vue

@@ -109,16 +109,33 @@ onMounted(() => {
 onActivated(() => {
     // 确保地图已初始化,使用 nextTick 等待 DOM 更新
     nextTick(() => {
-        // 检查地图实例是否已初始化
-        if (!indexMap.kmap) {
-            // 如果地图未初始化,重新初始化
+        // 检查地图实例是否已初始化,并且绑定到正确的容器
+        const isMapValid = indexMap.kmap && 
+                          indexMap.kmap.map && 
+                          mapContainer.value &&
+                          indexMap.kmap.map.getTargetElement() === mapContainer.value;
+        
+        if (!isMapValid) {
+            // 如果地图未初始化或绑定到错误的容器,重新初始化
             if (mapContainer.value) {
                 const point = store.state.home.miniUserLocationPoint;
                 indexMap.initMap(point, mapContainer.value, true);
+                // 等待地图初始化完成后再加载数据
+                setTimeout(() => {
+                    getUserList();
+                }, 200);
+            } else {
+                getUserList();
             }
+        } else {
+            // 如果地图已初始化且绑定正确,更新地图尺寸(解决页面切换后地图不显示的问题)
+            setTimeout(() => {
+                indexMap.kmap.map.updateSize();
+            }, 100);
+            // 地图已存在,直接加载数据(数据加载完成后会自动调用 initData 更新缩放)
+            getUserList();
         }
     });
-    getUserList();
 });
 
 const activeNames = ref([1]);