gx

src/view/sy_map.vue

@@ -11,8 +11,13 @@
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
+            <div
-              @click="getData(item.id, item.age)" :key="index">
+              class="content_item"
+              v-for="(item, index) in personTotal"
+              :class="{ choose: item.id == choose.person }"
+              @click="getData(item.id, item.age)"
+              :key="index"
+            >
               <div class="content_item_name">{{ item.ages }}</div>
               <div class="content_item_value">{{ item.rksl }}</div>
             </div>
@@ -24,8 +29,13 @@
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
+            <div
-              @click="changebq(item.id)" :key="index">
+              class="content_item"
+              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>
@@ -39,11 +49,19 @@
             <div class="title_line"></div>
           </div>
           <div class="jbggfwq_content">
-            <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
+            <div
+              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 class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
+                <div
-                  :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
+                  class="jbggfwq_content_item_right_item"
+                  v-for="itemm in item.child"
+                  :class="{ choose: itemm.id == choose.fwq }"
+                  @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)"
+                >
                   {{ itemm.name }}
                 </div>
               </div>
@@ -56,8 +74,13 @@
             <div class="title_line"></div>
           </div>
           <div class="zyys_content">
-            <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
+            <div
-              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
+              class="zyys_content_item"
+              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>
@@ -156,7 +179,7 @@ const colorList = [
 //点击龙游县初始化
 const csh = () => {
   title_choose.value = "";
-  cfjiedao.value='';
+  cfjiedao.value = "";
   cs_un_choose_arr.value.forEach((item, index) => {
     map.removeOverlay(cs_un_choose_arr.value[index]);
   });
@@ -186,7 +209,6 @@ const mapTownCount = reactive([
     name: "龙洲街道",
     center: [119.1573083, 28.9799445],
     number: "1000",
-
   },
   {
     name: "东华街道",
@@ -344,25 +366,7 @@ const xkzCenter = reactive([
 ]);
 var map = null;
 // 鼠标点击添加点位
-// const BMAP = () => {
-//   // 添加鼠标点击事件监听器
-
-//   map.addEventListener("click", function (e) {
-//     // map.clearOverlays();
-//     let icons = "";
-//     icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
-//     console.log(e.latlng);
-//     var marker = new BMapGL.Marker(
-//       new BMapGL.Point(e.latlng.lng, e.latlng.lat),
-//       {
-//         icon: icons,
-//       }
-//     ); // 创建点
-//     map.addOverlay(marker); // 将标注添加到地图中
-//   });
-// };
 let currentMarker = null; // 用于保存当前标记的引用
-
 const BMAP = () => {
   // 添加鼠标点击事件监听器
   map.addEventListener("click", function (e) {
@@ -1149,101 +1153,100 @@ const personTotal = ref([
     id: 0,
     name: "总人口",
     value: "1724114",
-    ages: '总人口',
+    ages: "总人口",
-    age: '1000'
+    age: "1000",
-
   },
   {
     id: 1,
     name: "0岁",
     value: "26737",
-    ages: '0岁',
+    ages: "0岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 2,
     name: "1岁",
     value: "26737",
-    ages: '1岁',
+    ages: "1岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 3,
     name: "2岁",
     value: "26737",
-    ages: '2岁',
+    ages: "2岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 4,
     name: "3岁",
     value: "26737",
-    ages: '3岁',
+    ages: "3岁",
-    age: '1000'
+    age: "1000",
   },
 
   {
     id: 5,
     name: "4岁",
     value: "26737",
-    ages: '4岁',
+    ages: "4岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 6,
     name: "5岁",
     value: "26737",
-    ages: '5岁',
+    ages: "5岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 7,
     name: "6岁",
     value: "26737",
-    ages: '6岁',
+    ages: "6岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 8,
     name: "7岁",
     value: "26737",
-    ages: '7岁',
+    ages: "7岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 9,
     name: "8岁",
     value: "26737",
-    ages: '8岁',
+    ages: "8岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 10,
     name: "9岁",
     value: "26737",
-    ages: '9岁',
+    ages: "9岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 11,
     name: "10岁",
     value: "26737",
-    ages: '10岁',
+    ages: "10岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 12,
     name: "11岁",
     value: "26737",
-    ages: '11岁',
+    ages: "11岁",
-    age: '1000'
+    age: "1000",
   },
   {
     id: 13,
     name: "12岁",
     value: "26737",
-    ages: '12岁',
+    ages: "12岁",
-    age: '1000'
+    age: "1000",
   },
 ]);
 
@@ -1851,37 +1854,41 @@ const yaosuTotal = ref([
   },
 ]);
 const getData = async (i, e) => {
-  await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ''}`).then((res) => {
+  await http
-    if (res.code == 200) {
+    .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
-      personTotal.value = [{
+    .then((res) => {
-        id: '0',
+      if (res.code == 200) {
-        ages: "总人口",
+        personTotal.value = [
-        age: '',
+          {
-        value: "res.data.total",
+            id: "0",
-      },]
+            ages: "总人口",
-      personTotal.value[0].rksl = res.data.total
+            age: "",
-      personTotal.value[0].ages = '总人口'
+            value: "res.data.total",
-      res.data.age.forEach((item, index) => {
+          },
-        console.log(index);
+        ];
-        personTotal.value.push({
+        personTotal.value[0].rksl = res.data.total;
-          id: index + 1,
+        personTotal.value[0].ages = "总人口";
-          rksl: item.rksl,
+        res.data.age.forEach((item, index) => {
-          age: item.age + '',
+          console.log(index);
-          ages: item.age + '岁'
+          personTotal.value.push({
-        })
+            id: index + 1,
-      })
+            rksl: item.rksl,
-      res.data.town.map((item) => {
+            age: item.age + "",
-        mapTownCount.map((items) => {
+            ages: item.age + "岁",
-          if (item.town == items.name) {
+          });
-            items.number = item.rksl
+        });
-          }
+        res.data.town.map((item) => {
-        })
+          mapTownCount.map((items) => {
-      })
+            if (item.town == items.name) {
-    }
+              items.number = item.rksl;
-  });
+            }
+          });
+        });
+      }
+    });
   console.log(mapTownCount, 10001);
   if (i) {
-    changeRs(i)
+    changeRs(i);
   }
 };
 const reset_font = () => {
@@ -1891,22 +1898,19 @@ const reset_font = () => {
   document.querySelector(".header_content").style.transformOrigin = "top left";
   document.querySelector(".header_content").style.transform =
     "scale(" + width / 1920 + "," + height / 1080 + ")";
-  if (
+  if (document.querySelector(".left")) {
-    document.querySelector(".left")) {
     document.querySelector(".left").style.transformOrigin = "bottom left";
     document.querySelector(".left").style.transform =
       "scale(" + width / 1920 + "," + height / 1080 + ")";
     document.querySelector(".right").style.transformOrigin = "bottom right";
     document.querySelector(".right").style.transform =
       "scale(" + width / 1920 + "," + height / 1080 + ")";
-
   }
-
 };
 onMounted(() => {
-  reset_font()
+  reset_font();
   initMap();
-  getData()
+  getData();
 });
 </script>
 <style lang="scss" scoped>
@@ -1934,13 +1938,17 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(270deg,
+  background: linear-gradient(
+      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;
@@ -2098,13 +2106,17 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(270deg,
+  background: linear-gradient(
+      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;
@@ -2247,20 +2259,25 @@ onMounted(() => {
     /* 为了兼容性，添加渐变背景到IE */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    span{
+    span {
       display: block;
-          font-family: YouSheBiaoTiHei;
+      font-family: YouSheBiaoTiHei;
-    font-size: 34px;
+      font-size: 34px;
-    font-weight: 900;
+      font-weight: 900;
-    // line-height: 44px;
+      // line-height: 44px;
-    letter-spacing: 4px;
+      letter-spacing: 4px;
-    margin-bottom: 15px;
+      margin-bottom: 15px;
-    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
+      background: linear-gradient(
-    /* 使文字没有背景颜色的背景 */
+        180deg,
-    background-clip: text;
+        #ffffff 0%,
-    /* 为了兼容性，添加渐变背景到IE */
+        #ffffff 40%,
-    -webkit-background-clip: text;
+        #00ffff 100%
-    -webkit-text-fill-color: transparent;
+      );
+      /* 使文字没有背景颜色的背景 */
+      background-clip: text;
+      /* 为了兼容性，添加渐变背景到IE */
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
   }