修改

src/App.vue

@@ -6,4 +6,6 @@
 
 <script setup></script>
 
-<style scoped lang="less"></style>
+<style scoped lang="less">
+@import "./assets/font/font.less";
+</style>

src/assets/font/font.less

+@font-face {
+  font-family: 'YouSheBiaoTiHei-Regular';
+  src: url('../font/字体/优设标题黑.ttf'); 
+  font-weight: normal;
+  font-style: normal;
+}
\ No newline at end of file

src/components/CircleProgress.vue

@@ -85,7 +85,5 @@ onUnmounted(() => {
 .double-circle-container {
   .vw(width, 120);
   .vh(height,120);
-  // width: 120px;
-  // height: 120px;
 }
 </style>

src/components/CommonComplete.vue

@@ -63,7 +63,7 @@ const props = defineProps({
         display: flex;
         justify-content: space-between;
         p {
-          height: 10px;
+          .vh(height,10);
         }
         .pro-title {
           .font(12);

src/components/Map.vue

 <template>
-  <!-- <div class="map-container">
-    <div id="container" ref="mapRef"></div>
-  </div> -->
-
   <div class="tourism">
-    <div style="background-color: #ffffff">
-      <div id="container"></div>
-    </div>
+    <div id="container"></div>
   </div>
 </template>
 <script setup>
@@ -14,7 +8,6 @@ import AMapLoader from "@amap/amap-jsapi-loader";
 import { onMounted } from "vue";
 import gansuLine from "./gansu.json";
 let map = null;
-// 注意：要想市级区域正常显示，必须添加安全密钥
 window._AMapSecurityConfig = {
   securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
 };
@@ -30,48 +23,59 @@ const handleInitMap = () => {
         //设置地图容器id
         viewMode: "2D",
         zoom: 4, //初始化地图级别
-        center: [113.808299, 34.791787], //初始化地图中心点位置
+        center: [100.808299, 35.791787], //初始化地图中心点位置
+        expandZoomRange: true, // 开启显示范围设置
         mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
+        rotateEnable: false, // 是否可以旋转
+        copyrightControl: false,
+        logoControl: false,
       });
-      let districtSearch = new AMap.DistrictSearch({
-        subdistrict: 0, //获取边界不需要返回下级行政区
-        extensions: "all", //返回行政区边界坐标组等具体信息
-        level: "province", //查询行政级别为 市 province-省 district-市
-      });
-      // handleDistrict(districtSearch);
+      const mapSize = map.getSize();
+      mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
+      const minZoom = 4;
+      // map.on("zoomchange", function (e) {
+      //   map.getZoom() < 2 ? map.setZoom(minZoom) : map.setZoom(15);
+      // });
+      handleDistrict();
       addPolylines();
       handleAddMarket();
     })
     .catch((e) => {
-      console.log(e);
+      // console.log(e);
     });
 };
 // 高亮和描边
-const handleDistrict = (districtSearch) => {
+const handleDistrict = () => {
+  let districtSearch = new AMap.DistrictSearch({
+    subdistrict: 0, //获取边界不需要返回下级行政区
+    extensions: "all", //返回行政区边界坐标组等具体信息
+    level: "province", //查询行政级别为 市 province-省 district-市
+  });
   let polygons = [];
-  // let arr = ["湖北省", "湖南省"]; //此处为高亮的市名
+  let arr = ["中华人民共和国"]; //此处为高亮的市名
+  // arr.forEach((item) => {
   districtSearch.search("中华人民共和国", function (status, result) {
     // 查询成功时，result即为对应的行政区信息
     // map.remove(polygons); //清除上次结果
     let bounds = result.districtList[0].boundaries;
-    if (bounds) {
-      for (let i = 0, l = bounds.length; i < l; i++) {
-        //生成行政区划polygon
-        let polygon = new AMap.Polygon({
-          strokeWeight: 1,
-          path: bounds[i],
-          fillOpacity: 0.4,
-          fillColor: "#80d8ff",
-          strokeColor: "#0091ea",
-        });
-        polygons.push(polygon);
-      }
-    }
+    // if (bounds) {
+    //   for (let i = 0, l = bounds.length; i < l; i++) {
+    //     //生成行政区划polygon
+    //     let polygon = new AMap.Polygon({
+    //       strokeWeight: 1,
+    //       path: bounds[i],
+    //       fillOpacity: 0.4,
+    //       fillColor: "#80d8ff",
+    //       strokeColor: "#0091ea",
+    //     });
+    //     polygons.push(polygon);
+    //   }
+    // }
     // 描边
     for (let i = 0; i < bounds.length; i++) {
       let outerPolyline = new AMap.Polyline({
         path: bounds[i],
-        strokeColor: "#0435F9",
+        strokeColor: "#72A8FF",
         strokeWeight: 3,
         map: map,
       });
@@ -80,6 +84,7 @@ const handleDistrict = (districtSearch) => {
     map.add(polygons);
     map.setFitView(polygons); //视口自适应
   });
+  // });
 };
 // 添加新路线
 const addPolylines = () => {
@@ -90,7 +95,7 @@ const addPolylines = () => {
       let polylineObj = new AMap.Polyline({
         path: lnglats,
         strokeWeight: 4,
-        strokeColor: "red",
+        strokeColor: "#F0E82A",
         extData: geojson.properties, // 自定义属性数据
       });
       // 生成新的路线，用于覆盖旧的
@@ -101,16 +106,31 @@ const addPolylines = () => {
         isOutline: true,
         borderWeight: 2,
         outlineColor: "rgba(0, 221, 235, 1)",
+        cursor: "pointer",
       });
       map.add(newPolyline);
       newPolyline.hide();
+
       // 获取路线数据
       const properties = polylineObj.getExtData();
       // 填报内容
       let content = `
-        <div class="infoWindow">
-          <p class="infoWindow-title">${properties.name}</p>
-        </div>
+          <div class="infoWindow-title">项目OOI</div>
+          <div class="infoWindow-content">
+              <p>
+                <span class="infoWindow-content-title">数据01:</span>
+                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
+              </p>
+              <p>
+                <span class="infoWindow-content-title">数据02:</span>
+                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
+              </p>
+              <p>
+                <span class="infoWindow-content-title">数据03:</span>
+                <span class="infoWindow-content-value">${properties.amount}<span class="infoWindow-unit">单位</span></span>
+              </p>
+            </div>
+          <div class="infoWindow-bottom"></div>
         `;
       // 创建 infoWindow 实例
       let infoWindow = new AMap.InfoWindow({
@@ -123,7 +143,6 @@ const addPolylines = () => {
 
       // 鼠标经过
       polylineObj.on("mouseover", function (e) {
-        console.log(e, "243234");
         newPolyline.show();
         infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
       });
@@ -226,51 +245,57 @@ onMounted(() => {
 <style scoped lang="less">
 .tourism {
   width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
-#container {
-  padding: 0px;
-  margin: 0px auto;
-  width: 100%;
-  height: 800px;
+  .vh(height, 709);
 }
 .custom-content-marker {
   position: relative;
   width: 25px;
   height: 34px;
 }
-/deep/.infoWindow {
-  color: #fff;
-  background-image: url("../assets/images/infoWindow.png");
+/deep/.infoWindow-title {
+  background-image: url("../assets/images/标题.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
-  // line-height: 32px;
-  // padding: 1px 0 25px 25px;
-  padding-left: 30px;
-  // padding-top: 8px;
-  width: 315px;
-  height: 220px;
-}
-/deep/.infoWindow-title {
-  display: flex;
-  align-items: center;
-  justify-items: flex-start;
-  height: 70px;
-  line-height: 70px;
-  .font(16);
+  width: 299px;
+  line-height: 56px;
+  padding-left: 10px;
   font-weight: 700;
 }
 /deep/.infoWindow-content {
-  .font(24);
-  position: relative;
-  span {
-    display: inline-block;
-    position: absolute;
-    top: -50%;
-  }
+  background-image: url("../assets/images/信息文本.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 299px;
+  height: 100x;
+  padding-left: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+/deep/.infoWindow-bottom {
+  background-image: url("../assets/images/下标.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-top: 1px;
+  height: 22px;
+}
+/deep/.infoWindow-content-title {
+  font-size: 18px;
+  color: #fff;
+  font-weight: 400;
+}
+/deep/.infoWindow-content-value {
+  font-weight: 400;
+  font-size: 24px;
+  color: #93d2ff;
+}
+/deep/.infoWindow-unit {
+  font-size: 20px;
+  color: #93d2ff;
+  display: inline-block;
+  margin-left: 3px;
 }
 /deep/.anchorPoint {
   position: absolute;
@@ -280,4 +305,12 @@ onMounted(() => {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+/deep/.amap-logo {
+  display: none;
+  opacity: 0 !important;
+}
+/deep/.amap-copyright {
+  opacity: 0;
+}
 </style>

src/components/Operation.vue

@@ -80,7 +80,6 @@ const completeList = reactive([
 .construct-container {
   display: flex;
   .construct-left {
-    // width: 65%;
     flex: 1;
     height: 100%;
     .construct-left-map {
@@ -93,7 +92,7 @@ const completeList = reactive([
     flex-direction: column;
     justify-content: space-between;
     .info-title {
-      .vw(width, 200);
+      .vw(width, 220);
       .vh(height, 30);
       .vh(line-height, 30);
       .vw(margin-left,10);

src/components/ProjectApproval.vue

@@ -5,9 +5,11 @@
       <div class="stat-card__value">{{ item.value }}</div>
     </div>
   </div>
+  <Map />
 </template>
 
 <script setup>
+import Map from "./Map.vue";
 import { onMounted, reactive, watch, ref } from "vue";
 
 const props = defineProps({

src/layouts/MainLayout.vue

@@ -78,10 +78,6 @@ const menuRoutes = computed(() => {
   return mainRoute?.children || [];
 });
 
-const hanldeChangeLang = (type) => {
-  localStorage.setItem("lang", type);
-};
-
 // 处理退出登录
 const handleLogout = () => {
   // 清除登录状态

src/views/homePage/index.vue

@@ -77,11 +77,10 @@ import Construct from "@/components/Construct.vue";
 import ProjectApproval from "@/components/ProjectApproval.vue";
 import Operation from "@/components/Operation.vue";
 import { reactive, ref } from "vue";
-import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs";
 
 const selectedLeftBtn = ref("equity");
 const selectedRightBtn = ref("");
-const selectedContentBtn = ref(3);
+const selectedContentBtn = ref(1);
 const selectedContentName = ref("立项");
 const isFullscreen = ref(false);
 const showPopup = ref(false);
@@ -213,6 +212,7 @@ window.addEventListener("fullscreenchange", () => {
       letter-spacing: 3px;
       .vh(margin-top, -15);
       .font(24);
+      font-family: HelveticaNeue;
     }
     .header-left {
       display: flex;
@@ -220,21 +220,24 @@ window.addEventListener("fullscreenchange", () => {
       align-items: center;
       padding-left: 75px;
       .nav-btn {
-        width: 100%;
-        .vh(line-height, 40);
+        .vh(line-height, 36);
+        .font(14);
         cursor: pointer;
         color: #fff;
-        .font(14);
         background-repeat: no-repeat;
-        background-size: cover;
+        background-size: 100%, 100%;
         background-position: center;
 
         &:not(.active) {
           background-image: url("../../assets/images/left-btn.png");
+          .vh(height,36);
+          .vw(width,208);
         }
 
         &.active {
           background-image: url("../../assets/images/left-hlightBtn.png");
+          .vh(height,36);
+          .vw(width,208);
         }
       }
     }
@@ -243,21 +246,24 @@ window.addEventListener("fullscreenchange", () => {
       justify-content: center;
       align-items: center;
       .nav-btn {
-        width: 100%;
-        .vh(line-height, 40);
+        .vh(line-height, 36);
+        .font(14);
         cursor: pointer;
         color: #fff;
-        .font(14);
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
 
         &:not(.active) {
           background-image: url("../../assets/images/right-btn.png");
+          .vh(height,36);
+          .vw(width,208);
         }
 
         &.active {
           background-image: url("../../assets/images/right-hight-btn.png");
+          .vh(height,36);
+          .vw(width,208);
         }
       }
     }