地图修改

src/components/CommonMap.vue

 <template>
-  <div class="tourism">
-    <div id="container"></div>
-  </div>
+  <div id="container"></div>
 </template>
 <script setup>
 import AMapLoader from "@amap/amap-jsapi-loader";
-import { nextTick, onMounted, reactive, ref } from "vue";
+import {
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  onUnmounted,
+  onActivated,
+  defineEmits,
+} from "vue";
+
+// 定义事件
+const emit = defineEmits(["province-selected"]);
 import gansuLine from "./newLine.json";
 let map = null;
 window._AMapSecurityConfig = {
@@ -25,7 +34,7 @@ const handleInitMap = () => {
       map = new AMap.Map("container", {
         //设置地图容器id
         viewMode: "2D",
-        zoom: 4, //初始化地图级别
+        zoom: 4, //根据屏幕宽度设置初始化地图级别
         center: [100.808299, 35.791787], //初始化地图中心点位置
         expandZoomRange: true, // 开启显示范围设置
         mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
@@ -34,22 +43,24 @@ const handleInitMap = () => {
         copyrightControl: false,
         logoControl: false,
       });
-      const mapSize = map.getSize();
-      mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
-      const minZoom = 4;
+
+      // 根据不同屏幕大小设置缩放
+      // const mapSize = map.getSize();
+      // if (mapSize && mapSize.width < 780) {
+      //   map.setZoom(3.5);
+      // }
       handleDistrict();
       addPolylines();
       handleAddMarket(selectName);
     })
     .catch((e) => {});
-  // if (map) return true;
 };
 // 高亮和描边
 const handleDistrict = () => {
   let districtSearch = new AMap.DistrictSearch({
     subdistrict: 0, //获取边界不需要返回下级行政区
     extensions: "all", //返回行政区边界坐标组等具体信息
-    level: "province", //查询行政级别为 市 province-省 district-市
+    level: "province", //查询行政级别为 市 province-省 district-
   });
   let polygons = [];
   districtSearch.search("中华人民共和国", function (status, result) {
@@ -136,25 +147,21 @@ const addPolylines = () => {
       });
 
       // 鼠标双击
-      polylineObj.on("dblclick", function (e) {
-        const data = polylineObj.getExtData();
-        // showProject(data);
-      });
+      polylineObj.on("dblclick", function (e) {});
       return polylineObj;
     },
   });
   map.add(geojsonObj);
 };
 // 添加标记
-let currentMarkers = []; // 存储当前显示的标记
+let currentMarkers = [];
 const handleAddMarket = (selectName) => {
   // 清除之前的所有标记
   if (currentMarkers.length > 0) {
     map.remove(currentMarkers);
     currentMarkers = [];
   }
-
-  // 额外确保清除所有标记（防止其他地方创建的标记）
+  // 清除所有标记
   if (map) {
     map.getAllOverlays("marker").forEach((marker) => {
       map.remove(marker);
@@ -176,6 +183,8 @@ const handleAddMarket = (selectName) => {
       { number: 2, position: [117.0009, 36.6758], province: "山东省" },
       // 河北
       { number: 1, position: [114.5025, 38.0455], province: "河北省" },
+      // 甘肃
+      { number: 10, position: [103.8236, 36.058], province: "甘肃省" },
     ],
     试运营: [
       // 四川
@@ -258,6 +267,69 @@ const handleAddMarket = (selectName) => {
       infoWindow.close();
     });
 
+    // 点击事件：聚焦到对应省份并显示省份地图
+    marker.on("click", function (e) {
+      const provinceName = markerData.province; // 例如：甘肃省
+      emit("province-selected", true);
+
+      // 创建省份搜索
+      let districtSearch = new AMap.DistrictSearch({
+        subdistrict: 0,
+        extensions: "all",
+        level: "province",
+      });
+
+      // 搜索并定位到省份
+      districtSearch.search(provinceName, function (status, result) {
+        if (status === "complete") {
+          let bounds = result.districtList[0].boundaries;
+          if (bounds && bounds.length > 0) {
+            // 清除所有边界线（中国地图边界）
+            map.getAllOverlays("polyline").forEach((polyline) => {
+              map.remove(polyline);
+            });
+            
+            // 清除所有标记点
+            map.getAllOverlays("marker").forEach((marker) => {
+              map.remove(marker);
+            });
+            
+            // 清除所有覆盖物
+            map.getAllOverlays("polygon").forEach((polygon) => {
+              map.remove(polygon);
+            });
+            
+            // 绘制省份边界线
+            for (let i = 0; i < bounds.length; i++) {
+              let provincePolyline = new AMap.Polyline({
+                path: bounds[i],
+                strokeColor: "#72A8FF",
+                strokeWeight: 3,
+                map: map,
+              });
+              map.add(provincePolyline);
+            }
+            
+            // 绘制省份填充区域（可选）
+            let provincePolygon = new AMap.Polygon({
+              path: bounds[0],
+              strokeColor: "#72A8FF",
+              strokeWeight: 2,
+              fillColor: "rgba(114, 168, 255, 0.1)",
+              fillOpacity: 0.3,
+            });
+            map.add(provincePolygon);
+            
+            // 重新添加新路线（确保新路线显示在地图上）
+            addPolylines();
+            
+            // 设置地图视图到该省份
+            map.setFitView([provincePolygon]);
+            map.setZoom(8);
+          }
+        }
+      });
+    });
     currentMarkers.push(marker);
   }
 };
@@ -269,27 +341,83 @@ const updateMarkers = (selectName) => {
 // 重置地图到初始状态
 const resetMap = () => {
   if (map) {
+    // 清除所有边界线（包括省份边界线）
+    map.getAllOverlays("polyline").forEach((polyline) => {
+      map.remove(polyline);
+    });
+    
+    // 清除所有标记点
+    map.getAllOverlays("marker").forEach((marker) => {
+      map.remove(marker);
+    });
+    
+    // 清除所有覆盖物
+    map.getAllOverlays("polygon").forEach((polygon) => {
+      map.remove(polygon);
+    });
+    
+    // 重新绘制全国边界
+    handleDistrict();
+    
+    // 恢复当前阶段的标记点
+    let selectName = sessionStorage.getItem("selectedContentBtn");
+    handleAddMarket(selectName);
+    
+    // 设置地图视图
     map.setZoom(4);
     map.setCenter([100.808299, 35.791787]);
-    const mapSize = map.getSize();
-    mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
   }
 };
 
+// 返回全国地图视图
+const backToCountry = () => {
+  resetMap();
+};
+
 // 暴露方法给父组件
 defineExpose({
   updateMarkers,
   resetMap,
+  backToCountry,
 });
 onMounted(() => {
   handleInitMap();
+  // 监听窗口大小变化
+  window.addEventListener("resize", handleResize);
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+  if (map) {
+    map.resize();
+  }
+};
+
+// 组件卸载时移除事件监听
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+});
+
+onActivated(() => {
+  nextTick(() => {
+    const container = document.getElementById("container");
+    if (container) {
+      container.style.width = "100%";
+      container.style.height = "100%";
+    }
+    map ? map.resize() : handleInitMap();
+  });
 });
 </script>
 
 <style scoped lang="less">
 .tourism {
   width: 100%;
-  .vh(height, 600);
+  height: 100%;
+}
+#container {
+  width: 100%;
+  height: 100%;
 }
 .custom-content-marker {
   position: relative;
@@ -404,4 +532,4 @@ onMounted(() => {
 :deep(.amap-copyright) {
   opacity: 0;
 }
-</style>
+</style>
\ No newline at end of file

src/style.css

@@ -50,8 +50,8 @@ html, body {
 }
 
 #container {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  /* width: 100%; */
+  /* height: 100%;
+  overflow: hidden; */
 }
 

src/views/homePage/components/Construct.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
       <div class="construct-left-map">
         <Map ref="mapRef" />
       </div>
@@ -51,7 +48,7 @@ import {
   onUnmounted,
   shallowReactive,
   defineOptions,
-  onActivated
+  onActivated,
 } from "vue";
 import CircleProgress from "./CircleProgress.vue";
 
@@ -85,7 +82,7 @@ onActivated(() => {
   if (mapRef.value && mapRef.value.resetMap) {
     mapRef.value.resetMap();
   }
-  
+
   // 确保显示建设阶段的标记
   if (mapRef.value && mapRef.value.updateMarkers) {
     mapRef.value.updateMarkers("建设");
@@ -96,9 +93,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
   display: flex;
-  .vh(margin-top,10);
+  height: 100%;
+  width: 100%;
   .construct-left {
-    width: 100%;
+    flex: 1;
     height: 100%;
     .tag-image {
       img {
@@ -106,22 +104,22 @@ onActivated(() => {
       }
     }
     .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
     }
   }
   .construct-right {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    .vh(height,700);
+    justify-content: space-around;
+    height: 100%;
     .info-title {
       .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
       .font(16);
       .vw(padding-left,20);
-      .vh(margin-bottom,15);
+      .vh(margin-bottom,10);
+      .vh(margin-top,15);
       text-align: left;
       color: #fff;
       white-space: nowrap;

src/views/homePage/components/Operation.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
       <div class="construct-left-map">
         <Map ref="mapRef" />
       </div>
@@ -44,7 +41,7 @@ import {
   onMounted,
   onUnmounted,
   defineOptions,
-  onActivated
+  onActivated,
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
@@ -110,7 +107,7 @@ onActivated(() => {
   if (mapRef.value && mapRef.value.resetMap) {
     mapRef.value.resetMap();
   }
-  
+
   // 确保显示运营阶段的标记
   if (mapRef.value && mapRef.value.updateMarkers) {
     mapRef.value.updateMarkers("运营");
@@ -121,8 +118,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
   display: flex;
+  height: 100%;
+  width: 100%;
   .construct-left {
-    width: 100%;
+    flex: 1;
     height: 100%;
     .tag-image {
       img {
@@ -130,15 +129,14 @@ onActivated(() => {
       }
     }
     .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
     }
   }
   .construct-right {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    .vh(height,612);
+    justify-content: space-around;
+    height: 100%;
     .info-title {
       .vw(width, 180);
       .vh(height, 30);

src/views/homePage/components/ProjectApproval.vue

 <template>
   <div class="project-container">
     <CommonTotal :numberList="initiationList" />
+    <div class="map-wrapper">
+      <Map ref="mapRef" @province-selected="onProvinceSelected" />
+      <div class="back-to-country-btn" @click="backToCountry" v-show="showBackBtn">
+        返回全国
+      </div>
+    </div>
   </div>
-  <Map ref="mapRef" />
 </template>
 
 <script setup>
@@ -16,7 +21,7 @@ import {
   computed,
   shallowRef,
   defineOptions,
-  onActivated
+  onActivated,
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
@@ -32,6 +37,7 @@ const props = defineProps({
 });
 
 const mapRef = ref(null);
+const showBackBtn = ref(false);
 // 使用静态数据避免重复创建
 const STATIC_DATA = {
   立项: [
@@ -70,10 +76,33 @@ watch(
   { immediate: true }
 );
 
+// 返回全国地图
+const backToCountry = () => {
+  if (mapRef.value && mapRef.value.backToCountry) {
+    mapRef.value.backToCountry();
+    showBackBtn.value = false;
+  }
+};
+
+// 监听省份选择事件
+const onProvinceSelected = (show) => {
+  showBackBtn.value = show;
+};
+
+// 监听地图缩放级别来显示/隐藏返回按钮
+const handleMapZoomChange = () => {
+  if (mapRef.value) {
+    // 这里可以添加监听地图缩放变化的逻辑
+    // 当缩放级别大于某个值时显示返回按钮
+    showBackBtn.value = true;
+  }
+};
+
 // 组件被激活时重置地图
 onActivated(() => {
   if (mapRef.value && mapRef.value.resetMap) {
     mapRef.value.resetMap();
+    showBackBtn.value = false;
   }
 });
 </script>
@@ -81,7 +110,39 @@ onActivated(() => {
 <style scoped lang="less">
 .project-container {
   display: flex;
-  justify-content: center;
+  flex-direction: column; // 垂直排列子元素
+  justify-content: center; // 水平居中
+  align-items: center; // 垂直居中
   .vh(margin-top, 20);
+  height: 100%;
+  width: 100%;
+
+  .map-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .back-to-country-btn {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: rgba(4, 66, 126, 0.9);
+      border: 1px solid #00ddeb;
+      border-radius: 4px;
+      color: #fff;
+      padding: 8px 16px;
+      cursor: pointer;
+      font-size: 14px;
+      z-index: 1000;
+      backdrop-filter: blur(4px);
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: rgba(0, 221, 235, 0.2);
+        border-color: #fff;
+        transform: scale(1.05);
+      }
+    }
+  }
 }
 </style>

src/views/homePage/components/trialOperations.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <!-- <div class="tag-image">
-        <img src="@/assets/images/建设.png" />
-      </div> -->
       <div class="construct-left-map">
         <Map ref="mapRef" />
       </div>
@@ -44,7 +41,7 @@ import {
   onMounted,
   onUnmounted,
   defineOptions,
-  onActivated
+  onActivated,
 } from "vue";
 
 // 定义组件名称，用于keep-alive缓存
@@ -125,7 +122,7 @@ onActivated(() => {
   if (mapRef.value && mapRef.value.resetMap) {
     mapRef.value.resetMap();
   }
-  
+
   // 确保显示试运营阶段的标记
   if (mapRef.value && mapRef.value.updateMarkers) {
     mapRef.value.updateMarkers("试运营");
@@ -136,8 +133,10 @@ onActivated(() => {
 <style scoped lang="less">
 .construct-container {
   display: flex;
+  height: 100%;
+  width: 100%;
   .construct-left {
-    width: 100%;
+    flex: 1;
     height: 100%;
     .tag-image {
       img {
@@ -145,15 +144,14 @@ onActivated(() => {
       }
     }
     .construct-left-map {
-      .vh(height, 700);
-      .vh(padding-top, 4);
+      height: 100%;
     }
   }
   .construct-right {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    .vh(height,612);
+    justify-content: space-around;
+    height: 100%;
     .info-title {
       .vw(width, 180);
       .vh(height, 30);

src/views/homePage/index.vue

@@ -34,9 +34,7 @@
           融资建设投资
         </div>
       </div>
-    </div>
-    <div class="content">
-      <div class="fullscreen-btn">
+      <div class="header-fullscreen">
         <span @click="toggleFullscreen" class="fullscreen-text">
           <el-icon :size="18">
             <full-screen />
@@ -44,6 +42,8 @@
           {{ isFullscreen ? "退出全屏" : "全屏" }}
         </span>
       </div>
+    </div>
+    <div class="content">
       <div class="content-btn">
         <span
           v-for="item in navList"
@@ -56,11 +56,21 @@
       <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
         <ProjectApproval
           :currentName="selectedContentName"
+          :isFullscreen="isFullscreen"
           v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
         />
-        <Construct v-else-if="selectedContentBtn === 2" />
-        <Operation v-else-if="selectedContentBtn === 4" />
-        <TrialOperations v-else-if="selectedContentBtn === 3" />
+        <Construct
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 2"
+        />
+        <Operation
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 4"
+        />
+        <TrialOperations
+          :isFullscreen="isFullscreen"
+          v-else-if="selectedContentBtn === 3"
+        />
       </keep-alive>
     </div>
     <div class="bottom"></div>
@@ -133,23 +143,6 @@ const selectContentBtn = (item) => {
   }, 100);
 };
 
-// 暂时注释未使用的函数，避免lint警告
-// const showProjectPopup = (event) => {
-//   currentProject.value = {
-//     name: "项目001",
-//     data: [
-//       { label: "数据01", value: "3654.89", unit: "单位" },
-//       { label: "数据02", value: "3654.89", unit: "单位" },
-//       { label: "数据03", value: "3654.89", unit: "单位" },
-//     ],
-//   };
-//   popupStyle.value = {
-//     left: `${event.clientX}px`,
-//     top: `${event.clientY - 100}px`,
-//   };
-//   showPopup.value = true;
-// };
-
 // 全屏切换功能
 const toggleFullscreen = () => {
   const homeContainer = document.querySelector(".home-container");
@@ -165,6 +158,8 @@ const toggleFullscreen = () => {
     }
 
     homeContainer.style.height = "100%";
+    // 移除全屏类
+    homeContainer.classList.remove("fullscreen");
   } else {
     // 进入全屏
     if (homeContainer.requestFullscreen) {
@@ -176,6 +171,8 @@ const toggleFullscreen = () => {
     }
 
     homeContainer.style.height = "100vh";
+    // 添加全屏类
+    homeContainer.classList.add("fullscreen");
   }
 
   isFullscreen.value = !isFullscreen.value;
@@ -188,14 +185,22 @@ onMounted(() => {
 
 // 监听全屏变化事件
 window.addEventListener("fullscreenchange", () => {
+  const homeContainer = document.querySelector(".home-container");
+
   if (!document.fullscreenElement) {
     isFullscreen.value = false;
-    const homeContainer = document.querySelector(".home-container");
-    if (homeContainer) homeContainer.style.height = "100%";
+    if (homeContainer) {
+      homeContainer.style.height = "100%";
+      // 移除全屏类
+      homeContainer.classList.remove("fullscreen");
+    }
   } else {
     isFullscreen.value = true;
-    const homeContainer = document.querySelector(".home-container");
-    if (homeContainer) homeContainer.style.height = "100vh";
+    if (homeContainer) {
+      homeContainer.style.height = "100vh";
+      // 添加全屏类
+      homeContainer.classList.add("fullscreen");
+    }
   }
 });
 </script>
@@ -208,7 +213,7 @@ window.addEventListener("fullscreenchange", () => {
   // background-position: center;
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, #04427E, #095DCC);
+  background: linear-gradient(to bottom, #04427e, #095dcc);
   overflow: hidden;
   color: #fff;
   display: flex;
@@ -220,16 +225,31 @@ window.addEventListener("fullscreenchange", () => {
     display: flex;
     justify-content: center;
     align-items: flex-end;
+    position: relative; // 为绝对定位提供参考
+
+    .header-fullscreen {
+      position: absolute;
+      right: 20px;
+      bottom: 0; // 与导航按钮底部对齐
+      cursor: pointer;
+      span {
+        color: white;
+        font-weight: 700;
+        .font(14);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+    }
+
     .header-middile {
       background-image: url("@/assets/images/头部bg.png");
       background-repeat: no-repeat;
       background-position: center;
-      // background-size: 170% 100%;
       background-size: cover;
       letter-spacing: 1px;
       font-weight: 400;
       font-family: "YouSheBiaoTiHei";
-      // .vw(width,950);
       .vh(height,75);
       display: flex;
       justify-content: center;
@@ -247,11 +267,6 @@ window.addEventListener("fullscreenchange", () => {
         .font(24);
         flex: 0.8;
       }
-
-      // @media screen and (max-width: 1280px) {
-      //   flex: 0.4;
-      //   .font(20);
-      // }
     }
     .header-left {
       display: flex;
@@ -307,13 +322,37 @@ window.addEventListener("fullscreenchange", () => {
     }
   }
   .content {
-    flex: 1;
+    width: 100%;
     .vw(padding-left, 20);
     .vw(padding-right, 20);
     .vh(margin-top,-16px);
+    height: calc(100vh - 190px);
+
+    // 根据屏幕宽度调整高度，确保在不同尺寸下都能显示底部图标
+    @media screen and (max-width: 1450px) {
+      height: calc(100vh - 180px);
+    }
+
+    @media screen and (max-width: 1280px) {
+      height: calc(100vh - 170px);
+    }
+
+    // 全屏模式下的高度调整
+    .fullscreen & {
+      height: calc(100vh - 120px);
+
+      @media screen and (max-width: 1450px) {
+        height: calc(100vh - 110px);
+      }
+
+      @media screen and (max-width: 1280px) {
+        height: calc(100vh - 100px);
+      }
+      @media screen and (max-width: 1920px) {
+        height: calc(100vh - 80px);
+      }
+    }
     .content-btn {
-      // .vh(margin-top,0);
-      // .vh(margin-bottom,20);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -326,7 +365,7 @@ window.addEventListener("fullscreenchange", () => {
         justify-content: center;
         cursor: pointer;
         flex-shrink: 0;
-        color: #fff; // 补充文字颜色（匹配蓝色按钮的白色文字）
+        color: #fff;
       }
 
       // 立项按钮
@@ -394,18 +433,5 @@ window.addEventListener("fullscreenchange", () => {
     width: 100%;
     .vh(height, 110);
   }
-  .fullscreen-btn {
-    display: flex;
-    cursor: pointer;
-    span {
-      margin-left: auto;
-      color: white;
-      font-weight: 700;
-      .font(16);
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-  }
 }
 </style>