gx

src/view/sy_map.vue

@@ -8,13 +8,8 @@
           <div class="title_line"></div>
         </div>
         <div class="content">
-          <div
+          <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
-            class="content_item"
+            @click="changeRs(item.id)" :key="index">
-            v-for="(item, index) in personTotal"
-            :class="{ choose: item.id == choose.person }"
-            @click="changeRs(item.id)"
-            :key="index"
-          >
             <div class="content_item_name">{{ item.name }}</div>
             <div class="content_item_value">{{ item.value }}</div>
           </div>
@@ -26,13 +21,8 @@
           <div class="title_line"></div>
         </div>
         <div class="content">
-          <div
+          <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
-            class="content_item"
+            @click="changebq(item.id)" :key="index">
-            v-for="(item, index) in tsbqTotal"
-            :class="{ choose: item.id == choose.bq }"
-            @click="changebq(item.id)"
-            :key="index"
-          >
             <div class="content_item_name">{{ item.name }}</div>
             <div class="content_item_value">{{ item.value }}</div>
           </div>
@@ -46,19 +36,11 @@
           <div class="title_line"></div>
         </div>
         <div class="jbggfwq_content">
-          <div
+          <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
-            class="jbggfwq_content_item"
-            v-for="(item, index) in jbfwqTotal"
-            :key="index"
-          >
             <div class="jbggfwq_content_item_left">{{ item.name }}</div>
             <div class="jbggfwq_content_item_right">
-              <div
+              <div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
-                class="jbggfwq_content_item_right_item"
+                :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
-                v-for="itemm in item.child"
-                :class="{ choose: itemm.id == choose.fwq }"
-                @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)"
-              >
                 {{ itemm.name }}
               </div>
             </div>
@@ -71,13 +53,8 @@
           <div class="title_line"></div>
         </div>
         <div class="zyys_content">
-          <div
+          <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
-            class="zyys_content_item"
+            :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
-            v-for="(item, index) in yaosuTotal"
-            :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
-            @click="changeys(item.id)"
-            :key="index"
-          >
             <img :src="item.img" class="zyys_content_item_left" />
             <div class="zyys_content_item_right">{{ item.name }}</div>
           </div>
@@ -96,6 +73,7 @@ import {
   computed,
   defineProps,
   watch,
+  nextTick,
 } from "vue";
 import mapTown from "@/assets/json/ly.json";
 import xkz from "@/assets/json/xkz.json";
@@ -301,15 +279,21 @@ const addPolygonCounty = () => {
 };
 //添加街道名
 const addJd = () => {
+  goMapCenter([119.178783, 29.034581], 12);
   mapTownCount.map((item) => {
     createCustomOverlayJd(item);
   });
+  goMapCenter([119.178783, 29.034583], 12);
+
+
 };
 //添加街道名2含数量
 const addJd2 = () => {
+  goMapCenter([119.178783, 29.034581], 12);
   mapTownCount.map((item) => {
     createCustomOverlayJd2(item);
   });
+  goMapCenter([119.178783, 29.034583], 12);
 };
 //加载村社信息
 const loadCs = () => {
@@ -550,6 +534,7 @@ const goMapCenter = (point, zoom) => {
   map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
 };
 const removeAllPolygon = (e) => {
+
   let allOverlay = map.getOverlays();
   console.log("allOverlay", allOverlay);
   for (let i = 0; i < allOverlay.length; i++) {
@@ -557,10 +542,14 @@ const removeAllPolygon = (e) => {
   }
   if (e == "fwq") {
     addPolygonCounty();
+    nextTick(() => {
       addJd();
+    })
   } else {
     addPolygonCounty();
+    nextTick(() => {
       addJd2();
+    })
   }
 };
 //选项设置
@@ -1240,15 +1229,18 @@ onMounted(() => {
 ::v-deep .anchorBL {
   display: none;
 }
+
 .module {
   display: flex;
   width: 100%;
   height: 100%;
   position: relative;
 }
+
 #id {
   z-index: 10;
 }
+
 //左侧弹框
 .left {
   box-sizing: border-box;
@@ -1257,17 +1249,13 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(
+  background: linear-gradient(270deg,
-      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%
+      rgba(0, 60, 131, 0.74) 100%),
-    ),
+    radial-gradient(128% 99% at 100% 46%,
-    radial-gradient(
-      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%
+      rgba(0, 61, 134, 0.42) 100%);
-    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -1275,6 +1263,7 @@ onMounted(() => {
   flex-direction: column;
   z-index: 12;
   overflow: hidden;
+
   //人口数
   .lyx {
     .content {
@@ -1286,6 +1275,7 @@ onMounted(() => {
       color: #ffffff;
       height: 450px;
       overflow: auto;
+
       .content_item {
         cursor: pointer;
         box-sizing: border-box;
@@ -1300,6 +1290,7 @@ onMounted(() => {
         background-size: 100% 100%;
         margin-bottom: 12px;
       }
+
       .content_item:first-child {
         box-sizing: border-box;
         display: flex;
@@ -1313,9 +1304,11 @@ onMounted(() => {
         background-size: 100% 100%;
         margin-bottom: 12px;
       }
+
       .content_item_name {
         position: relative;
       }
+
       .content_item_name::before {
         content: "";
         position: absolute;
@@ -1327,19 +1320,23 @@ onMounted(() => {
         top: 7.5px;
         left: -13px;
       }
+
       .choose {
         background-image: url(@/assets/images/map/choose.png) !important;
         background-repeat: no-repeat !important;
         background-size: 100% 100% !important;
       }
     }
+
     .content::-webkit-scrollbar {
       display: none;
     }
   }
+
   //特殊标签
   .tsbq {
     margin-top: 40px;
+
     .content {
       box-sizing: border-box;
       margin-top: 20px;
@@ -1364,6 +1361,7 @@ onMounted(() => {
         background-size: 100% 100%;
         margin-bottom: 12px;
       }
+
       .content_item:last-child {
         box-sizing: border-box;
         display: flex;
@@ -1377,9 +1375,11 @@ onMounted(() => {
         background-size: 100% 100%;
         margin-bottom: 12px;
       }
+
       .content_item_name {
         position: relative;
       }
+
       .content_item_name::before {
         content: "";
         position: absolute;
@@ -1391,17 +1391,20 @@ onMounted(() => {
         top: 7.5px;
         left: -13px;
       }
+
       .choose {
         background-image: url(@/assets/images/map/choose.png) !important;
         background-repeat: no-repeat !important;
         background-size: 100% 100% !important;
       }
     }
+
     .content::-webkit-scrollbar {
       display: none;
     }
   }
 }
+
 //右侧弹框
 .right {
   box-sizing: border-box;
@@ -1410,17 +1413,13 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(
+  background: linear-gradient(270deg,
-      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%
+      rgba(0, 60, 131, 0.74) 100%),
-    ),
+    radial-gradient(128% 99% at 100% 46%,
-    radial-gradient(
-      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%
+      rgba(0, 61, 134, 0.42) 100%);
-    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -1428,6 +1427,7 @@ onMounted(() => {
   flex-direction: column;
   z-index: 12;
   overflow: hidden;
+
   .jbggfwq {
     .jbggfwq_content {
       height: 550px;
@@ -1435,21 +1435,25 @@ onMounted(() => {
       margin-top: 15px;
       display: flex;
       flex-direction: column;
+
       .jbggfwq_content_item {
         margin-bottom: 5px;
         display: flex;
         // align-items: center;
         color: #ffffff;
+
         .jbggfwq_content_item_left {
           margin-right: 10px;
           width: 80px;
           height: 48px;
           line-height: 48px;
         }
+
         .jbggfwq_content_item_right {
           width: 370px;
           display: flex;
           flex-flow: row wrap;
+
           .jbggfwq_content_item_right_item {
             cursor: pointer;
             box-sizing: border-box;
@@ -1460,6 +1464,7 @@ onMounted(() => {
             background: rgba(124, 151, 180, 0.8);
             padding: 10px;
           }
+
           .choose {
             background-image: url(@/assets/images/map/choose.png);
             background-repeat: no-repeat;
@@ -1468,10 +1473,12 @@ onMounted(() => {
         }
       }
     }
+
     .jbggfwq_content::-webkit-scrollbar {
       display: none;
     }
   }
+
   .zyys {
     .zyys_content {
       margin-top: 20px;
@@ -1479,6 +1486,7 @@ onMounted(() => {
       display: flex;
       justify-content: space-between;
       flex-flow: row wrap;
+
       .zyys_content_item {
         cursor: pointer;
         margin-bottom: 15px;
@@ -1489,19 +1497,23 @@ onMounted(() => {
         width: 110px;
         height: 42px;
         background: rgba(124, 151, 180, 0.8);
+
         .zyys_content_item_left {
           width: 18px;
           height: 18px;
           margin-right: 3px;
         }
+
         .zyys_content_item_right {
           font-weight: 500;
           font-size: 16px;
         }
       }
+
       .wz {
         width: 150px;
       }
+
       .choose {
         background-image: url(@/assets/images/map/choose.png);
         background-repeat: no-repeat;
@@ -1510,6 +1522,7 @@ onMounted(() => {
     }
   }
 }
+
 .title {
   .title_name {
     font-family: YouSheBiaoTiHei;
@@ -1525,6 +1538,7 @@ onMounted(() => {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
+
   .title_line {
     height: 4px;
     width: 100%;