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,61 +1037,85 @@ 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 (res.code == 200) {
+      if (cfJd.value == "") {
-        if (cfJd.value == "") {
+        personTotal.value = [
-          personTotal.value = [
+          {
-            {
+            id: "9999",
-              id: "9999",
+            ages: "总人口",
-              ages: "总人口",
+            age: "",
-              age: "",
+            value: "res.data.total",
-              value: "res.data.total",
+          },
-            },
+          {
-            {
+            id: "6666",
-              id: "6666",
+            name: "近一年死亡",
-              name: "近一年死亡",
+            value: "5650",
-              value: "5650",
+            ages: "近一年死亡",
-              ages: "近一年死亡",
+            age: "1000",
-              age: "1000",
+            percent: "",
-              percent: "",
+          },
-            },
+        ];
-          ];
+        personTotal.value[0].rksl = res.data.total;
-          personTotal.value[0].rksl = res.data.total;
+        personTotal.value[0].ages = "总人口";
-          personTotal.value[0].ages = "总人口";
+        personTotal.value[1].rksl = res.data.swrs;
-          personTotal.value[1].rksl = res.data.swrs;
+        personTotal.value[1].ages = "近一年死亡";
-          personTotal.value[1].ages = "近一年死亡";
+        personTotal.value[1].percent = res.data.swrsPercent;
-          personTotal.value[1].percent = res.data.swrsPercent;
+        res.data.age.forEach((item, index) => {
-          res.data.age.forEach((item, index) => {
+          personTotal.value.push({
-            personTotal.value.push({
+            id: index + 1,
-              id: index + 1,
+            rksl: item.rksl,
-              rksl: item.rksl,
+            age: item.age + "",
-              age: item.age + "",
+            ages: item.age + "岁",
-              ages: item.age + "岁",
+            percent: item.percent,
-              percent: item.percent,
-            });
-          });
-        }
-        // console.log("人口", personTotal.value);
-        mapTownCount.map((item) => {
-          item.swrs = 0;
-          res.data.townWwrs.map((items) => {
-            if (items.xzjd == item.name) {
-              item.swrs = items.swrs;
-            }
           });
         });
-        mapTownCount.map((item) => {
+        // console.log(personTotal.value,"111");
-          item.number = 0;
+      }
-          res.data.town.map((items) => {
+      mapTownCount.map((item) => {
-            if (items.town == item.name) {
+        item.swrs = 0;
-              item.number = items.rksl;
+        res.data.townWwrs.map((items) => {
-            }
+          if (items.xzjd == item.name) {
-          });
+            item.swrs = items.swrs;
+          }
+        });
+      });
+      mapTownCount.map((item) => {
+        item.number = 0;
+        res.data.town.map((items) => {
+          if (items.town == item.name) {
+            item.number = items.rksl;
+          }
+        });
+      });
+      // 年龄百分比
+      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);
   }
@@ -1873,7 +2010,7 @@ const loadCs = (name) => {
 };
 //添加村社区块
 const addPolygonCountyCs = () => {
-  console.log(11111111111111,xkzDk);
+  console.log(11111111111111, xkzDk);
   xkzDk.map((item, index) => {
     let num = index % 9;
     let fillColor = colorList[num].bg;
@@ -1893,8 +2030,9 @@ 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;
         // sfdd.value = true;
@@ -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,22 +677,22 @@ const rowState = (row) => {
               background-color: rgba(255, 255, 255, 0.2);
               border-radius: 5px;
               // overflow: hidden;
-            }
 
-            .progress-bar {
+              .progress-bar {
-              height: 100%;
+                height: 100%;
-              background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
+                background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
-              border-radius: 0px 100px 100px 0px;
+                border-radius: 0px 100px 100px 0px;
-              transition: width 0.3s ease;
+                transition: width 0.3s ease;
-              position: relative;
+                position: relative;
-            }
+                span {
-            .progress-bar span {
+                  position: absolute;
-              position: absolute;
+                  right: -10px;
-              right: -10px;
+                  top: -30%;
-              top: -30%;
+                  transform: translateY(-50%);
-              transform: translateY(-50%);
+                  color: #fff;
-              color: #fff;
+                  font-size: 18px;
-              font-size: 18px;
+                }
+              }
             }
           }
           img {

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 替换成空，这个
       },