gx

src/assets/json/cssj.json

@@ -180,6 +180,7 @@
           "properties": {
             "gml_id": "layer_township_pg.28415",
             "name": "驿前村",
+            "center":[119.17929881887696,29.05284453515582],
             "layer": "乡镇",
             "code": "330825001000",
             "grade": 4,

src/view/sy_mapcopy.vue

@@ -14,6 +14,56 @@
             </div>
             <div class="title_line"></div>
           </div>
+          <div class="age-container">
+            <div class="progress-wrapper">
+              <div
+                v-for="(item, index) in PopulationRatio"
+                :class="[
+                  'progress-container',
+                  {
+                    'above-line': index % 2 !== 0,
+                    'below-line': index % 2 === 0,
+                  },
+                ]"
+                :style="{
+                  width: item.progress + '%',
+                  backgroundColor: item.bgColor,
+                }"
+              >
+                <span
+                  :style="{ color: item.bgColor }"
+                  :class="[
+                    {
+                      'above-line2': index % 2 !== 0,
+                      'below-line2': index % 2 === 0,
+                    },
+                  ]"
+                  >{{ item.progress + "%" }}</span
+                >
+                <span
+                  style="color: #fff; white-space: nowrap"
+                  :class="[
+                    {
+                      'above-line1': index % 2 !== 0,
+                      'below-line1': index % 2 === 0,
+                    },
+                  ]"
+                  >{{ item.age }}</span
+                >
+                <div
+                  class="age-line"
+                  :style="{
+                    backgroundColor: item.bgColor,
+                  }"
+                ></div>
+                <div
+                  class="dot"
+                  :style="{ backgroundColor: item.bgColor }"
+                ></div>
+              </div>
+            </div>
+          </div>
+
           <div class="content">
             <div
               class="content_item"
@@ -413,6 +463,69 @@ const personTotal = ref([
     age: "1000",
   },
 ]);
+//人口数比例
+const PopulationRatio = ref([
+  {
+    id: 0,
+    age: "1-10岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(246, 214, 120, 1)",
+  },
+  {
+    id: 1,
+    age: "11-20岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(243, 254, 128, 1)",
+  },
+  {
+    id: 2,
+    age: "21-30岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(164, 241, 119, 1)",
+  },
+  {
+    id: 3,
+    age: "31-40岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(110, 255, 201, 1)",
+  },
+  {
+    id: 4,
+    age: "41-50岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(105, 201, 241, 1)",
+  },
+  {
+    id: 5,
+    age: "51-60岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(107, 138, 244, 1)",
+  },
+  {
+    id: 6,
+    age: "61-70岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(161, 128, 255, 1)",
+  },
+  {
+    id: 7,
+    age: "71-80岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(179, 238, 147, 1)",
+  },
+  {
+    id: 8,
+    age: "81-90岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(190, 255, 246, 1)",
+  },
+  {
+    id: 9,
+    age: "91-100岁",
+    progress: 10, //进度条占比
+    bgColor: "rgba(222, 173, 98, 1)",
+  },
+]);
 //特殊标签
 const tsbqTotal = ref([
   {
@@ -896,7 +1009,7 @@ const BMAP = () => {
   map.addEventListener("click", markera);
 };
 const markera = (e) => {
-  console.log(e.latlng.lng, e.latlng.lat);
+  console.log(`${e.latlng.lng},${e.latlng.lat}`);
   // 检查并移除当前标记
   if (currentMarker !== null) {
     map.removeOverlay(currentMarker);
@@ -924,9 +1037,8 @@ const getData = async (i, e) => {
   if (e == "9999") {
     e = "";
   }
-  await http
+  try {
-    .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
+    const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`);
-    .then((res) => {
     if (res.code == 200) {
       if (cfJd.value == "") {
         personTotal.value = [
@@ -959,8 +1071,8 @@ const getData = async (i, e) => {
             percent: item.percent,
           });
         });
+        // console.log(personTotal.value,"111");
       }
-        // console.log("人口", personTotal.value);
       mapTownCount.map((item) => {
         item.swrs = 0;
         res.data.townWwrs.map((items) => {
@@ -977,8 +1089,33 @@ const getData = async (i, e) => {
           }
         });
       });
+      // 年龄百分比
+      const agename = [
+        "09Percent",
+        "1019Percent",
+        "2029Percent",
+        "3039Percent",
+        "4049Percent",
+        "5059Percent",
+        "6069Percent",
+        "7079Percent",
+        "8089Percent",
+        "9099Percent",
+        "100nlPercent",
+      ];
+      if (res.data.ageGroupsPercent) {
+        console.log(PopulationRatio.value[0].progress);
+        agename.forEach((key, index) => {
+          if (PopulationRatio.value[index]) {
+            PopulationRatio.value[index].progress =
+              res.data.ageGroupsPercent[key];
           }
         });
+      }
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
   if (i) {
     changeRs(i);
   }
@@ -1893,7 +2030,8 @@ const addPolygonCountyCs = () => {
       });
       map.addOverlay(cs_qk_arr.value[index]);
       cs_qk_arr.value[index].addEventListener("click", () => {
-        alert(item.name);
+        // alert(item.name);
+        console.log(item.name);
 
         // cfCs.value = item.name;
         // title_cs.value = item.name;
@@ -2426,7 +2564,7 @@ onMounted(() => {
       flex-flow: row wrap;
       justify-content: space-between;
       color: #ffffff;
-      height: 450px;
+      height: 350px;
       overflow: auto;
 
       .content_item {
@@ -2793,4 +2931,133 @@ onMounted(() => {
     border-bottom: 2px dashed #ffffff;
   }
 }
+
+.age-container {
+  position: relative;
+  width: 450px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+
+  .progress-wrapper {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+  }
+
+  .progress-container {
+    position: relative;
+    transition: width 0.3s ease;
+    height: 10px;
+    background-color: rgba(255, 255, 255, 0.2);
+
+    &.above-line {
+      .dot {
+        top: -20px;
+      }
+
+      .age-line {
+        top: -30px;
+      }
+
+      span {
+        &.above-line1 {
+          top: -55px;
+        }
+      }
+
+      &:nth-child(even) {
+        .dot {
+          top: -20px;
+        }
+
+        .age-line {
+          top: -18px;
+        }
+
+        span {
+          top: -40px;
+        }
+      }
+    }
+
+    &.below-line {
+      .dot {
+        top: 20px;
+      }
+
+      .age-line {
+        top: 5px;
+      }
+
+      span {
+        &.below-line1 {
+          top: 40px;
+        }
+      }
+
+      &:nth-child(odd) {
+        .dot {
+          top: 20px;
+        }
+
+        .age-line {
+          top: 5px;
+        }
+
+        span {
+          top: 24px;
+        }
+      }
+    }
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .age-line {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 2px;
+      height: 20px;
+    }
+
+    span {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 18px;
+
+      &.above-line1 {
+        top: -50px;
+      }
+
+      &.below-line1 {
+        top: 50px;
+      }
+      &.above-line2 {
+        top: -55px !important; //上面百分比
+      }
+
+      &.below-line2 {
+        top: 40px !important ; //下面百分比
+      }
+    }
+  }
+
+  .progress-container:first-child {
+    border-radius: 5px 0 0 5px;
+  }
+
+  .progress-container:last-child {
+    border-radius: 0 5px 5px 0;
+  }
+}
 </style>

src/view/sy_table.vue

@@ -165,15 +165,15 @@ import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
 
-onMounted(() => {
+// onMounted(() => {
-  let token = tools.data.get("token");
+//   let token = tools.data.get("token");
-  // console.log(token, "token");
+//   // console.log(token, "token");
-  if (token == null) {
+//   if (token == null) {
-    ElMessage.error("请重新登录!");
+//     ElMessage.error("请重新登录!");
-    window.location.href =
+//     window.location.href =
-      "http://220.191.238.50:996/api/login?returnURL=" + window.location.href;
+//       "http://220.191.238.50:996/api/login?returnURL=" + window.location.href;
-  }
+//   }
-});
+// });
 
 const router = useRouter();
 const routers = useRoute();
@@ -640,15 +640,13 @@ const rowState = (row) => {
           .tableBoxTop {
             width: 510px;
             height: 210px;
-            // background-image: url(@/assets/sy-table/sy-table3.png);
             background-repeat: no-repeat;
             background-size: 100% 100%;
-            // background-color: pink;
             padding: 15px 28px;
             box-sizing: border-box;
             margin-right: 20px;
             margin-bottom: 20px;
-            position: relative; /* Add this */
+            position: relative;
             .tableBoxTops {
               display: flex;
               align-items: center;
@@ -679,7 +677,6 @@ const rowState = (row) => {
               background-color: rgba(255, 255, 255, 0.2);
               border-radius: 5px;
               // overflow: hidden;
-            }
 
               .progress-bar {
                 height: 100%;
@@ -687,8 +684,7 @@ const rowState = (row) => {
                 border-radius: 0px 100px 100px 0px;
                 transition: width 0.3s ease;
                 position: relative;
-            }
+                span {
-            .progress-bar span {
                   position: absolute;
                   right: -10px;
                   top: -30%;
@@ -697,6 +693,8 @@ const rowState = (row) => {
                   font-size: 18px;
                 }
               }
+            }
+          }
           img {
             width: 24px;
             height: 24px;

vite.config.js

@@ -15,8 +15,8 @@ export default defineConfig({
       // 第一个代理
       "/api": {
         // 匹配到啥来进行方向代理
-        // target: "http://192.168.2.17:8095/", //刘进
+        target: "http://10.0.0.65:8095/", //刘进
-        target: "http://220.191.238.50:996/", //线上
+        // target: "http://220.191.238.50:996/", //线上
         changeOrigin: true, //是否支持跨域
         //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
       },