地图修改

src/components/CommonMap.vue

@@ -263,9 +263,20 @@ const updateMarkers = (selectName) => {
   handleAddMarket(selectName);
 };
 
+// 重置地图到初始状态
+const resetMap = () => {
+  if (map) {
+    map.setZoom(4);
+    map.setCenter([100.808299, 35.791787]);
+    const mapSize = map.getSize();
+    mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
+  }
+};
+
 // 暴露方法给父组件
 defineExpose({
   updateMarkers,
+  resetMap,
 });
 onMounted(() => {
   handleInitMap();
@@ -276,9 +287,6 @@ onMounted(() => {
 .tourism {
   width: 100%;
   .vh(height, 600);
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
 }
 .custom-content-marker {
   position: relative;

src/views/homePage/components/Construct.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/images/建设.png" />
       </div> -->
       <div class="construct-left-map">
-        <Map />
+        <Map ref="mapRef" />
       </div>
     </div>
     <div class="construct-right">
@@ -51,6 +51,7 @@ import {
   onUnmounted,
   shallowReactive,
   defineOptions,
+  onActivated
 } from "vue";
 import CircleProgress from "./CircleProgress.vue";
 
@@ -58,6 +59,9 @@ import CircleProgress from "./CircleProgress.vue";
 defineOptions({
   name: "Construct",
 });
+
+// 地图组件引用
+const mapRef = ref(null);
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
   { title: "总个数", value: "10", unit: "个" },
@@ -75,6 +79,18 @@ const recycleList = shallowReactive([
   { title: "2025年完成投资", value: "*", unit: "亿元" },
   { title: "完成率", value: "*", unit: "" },
 ]);
+
+// 组件被激活时重置地图
+onActivated(() => {
+  if (mapRef.value && mapRef.value.resetMap) {
+    mapRef.value.resetMap();
+  }
+  
+  // 确保显示建设阶段的标记
+  if (mapRef.value && mapRef.value.updateMarkers) {
+    mapRef.value.updateMarkers("建设");
+  }
+});
 </script>
 
 <style scoped lang="less">

src/views/homePage/components/Operation.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/images/建设.png" />
       </div> -->
       <div class="construct-left-map">
-        <Map />
+        <Map ref="mapRef" />
       </div>
     </div>
     <div class="construct-right">
@@ -44,12 +44,16 @@ import {
   onMounted,
   onUnmounted,
   defineOptions,
+  onActivated
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
 defineOptions({
   name: "Operation",
 });
+
+// 地图组件引用
+const mapRef = ref(null);
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
   { title: "总个数", value: "2", unit: "个" },
@@ -100,6 +104,18 @@ const completeList = shallowReactive([
     cumulativeValue: "*",
   },
 ]);
+
+// 组件被激活时重置地图
+onActivated(() => {
+  if (mapRef.value && mapRef.value.resetMap) {
+    mapRef.value.resetMap();
+  }
+  
+  // 确保显示运营阶段的标记
+  if (mapRef.value && mapRef.value.updateMarkers) {
+    mapRef.value.updateMarkers("运营");
+  }
+});
 </script>
 
 <style scoped lang="less">

src/views/homePage/components/ProjectApproval.vue

@@ -16,6 +16,7 @@ import {
   computed,
   shallowRef,
   defineOptions,
+  onActivated
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
@@ -68,6 +69,13 @@ watch(
   },
   { immediate: true }
 );
+
+// 组件被激活时重置地图
+onActivated(() => {
+  if (mapRef.value && mapRef.value.resetMap) {
+    mapRef.value.resetMap();
+  }
+});
 </script>
 
 <style scoped lang="less">

src/views/homePage/components/trialOperations.vue

@@ -5,7 +5,7 @@
         <img src="@/assets/images/建设.png" />
       </div> -->
       <div class="construct-left-map">
-        <Map />
+        <Map ref="mapRef" />
       </div>
     </div>
     <div class="construct-right">
@@ -44,12 +44,16 @@ import {
   onMounted,
   onUnmounted,
   defineOptions,
+  onActivated
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
 defineOptions({
-  name: "Operation",
+  name: "TrialOperations",
 });
+
+// 地图组件引用
+const mapRef = ref(null);
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
   { title: "总个数", value: "9", unit: "个" },
@@ -115,6 +119,18 @@ const completeList = shallowReactive([
     cumulativeValue: "-7.94",
   },
 ]);
+
+// 组件被激活时重置地图
+onActivated(() => {
+  if (mapRef.value && mapRef.value.resetMap) {
+    mapRef.value.resetMap();
+  }
+  
+  // 确保显示试运营阶段的标记
+  if (mapRef.value && mapRef.value.updateMarkers) {
+    mapRef.value.updateMarkers("试运营");
+  }
+});
 </script>
 
 <style scoped lang="less">

src/views/homePage/index.vue

@@ -53,7 +53,7 @@
           >{{ item.name }}
         </span>
       </div>
-      <!-- <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations"> -->
+      <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
         <ProjectApproval
           :currentName="selectedContentName"
           v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
@@ -61,7 +61,7 @@
         <Construct v-else-if="selectedContentBtn === 2" />
         <Operation v-else-if="selectedContentBtn === 4" />
         <TrialOperations v-else-if="selectedContentBtn === 3" />
-      <!-- </keep-alive> -->
+      </keep-alive>
     </div>
     <div class="bottom"></div>
   </div>