{
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
- .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
- .then((res) => {
- if (res.code == 200) {
- if (cfJd.value == "") {
- personTotal.value = [
- {
- id: "9999",
- ages: "总人口",
- age: "",
- value: "res.data.total",
- },
- {
- id: "6666",
- name: "近一年死亡",
- value: "5650",
- ages: "近一年死亡",
- age: "1000",
- percent: "",
- },
- ];
- personTotal.value[0].rksl = res.data.total;
- personTotal.value[0].ages = "总人口";
- personTotal.value[1].rksl = res.data.swrs;
- personTotal.value[1].ages = "近一年死亡";
- personTotal.value[1].percent = res.data.swrsPercent;
- res.data.age.forEach((item, index) => {
- personTotal.value.push({
- id: index + 1,
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- 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;
- }
+ try {
+ const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`);
+ if (res.code == 200) {
+ if (cfJd.value == "") {
+ personTotal.value = [
+ {
+ id: "9999",
+ ages: "总人口",
+ age: "",
+ value: "res.data.total",
+ },
+ {
+ id: "6666",
+ name: "近一年死亡",
+ value: "5650",
+ ages: "近一年死亡",
+ age: "1000",
+ percent: "",
+ },
+ ];
+ personTotal.value[0].rksl = res.data.total;
+ personTotal.value[0].ages = "总人口";
+ personTotal.value[1].rksl = res.data.swrs;
+ personTotal.value[1].ages = "近一年死亡";
+ personTotal.value[1].percent = res.data.swrsPercent;
+ res.data.age.forEach((item, index) => {
+ personTotal.value.push({
+ id: index + 1,
+ rksl: item.rksl,
+ age: item.age + "",
+ ages: item.age + "岁",
+ percent: item.percent,
});
});
- mapTownCount.map((item) => {
- item.number = 0;
- res.data.town.map((items) => {
- if (items.town == item.name) {
- item.number = items.rksl;
- }
- });
+ // console.log(personTotal.value,"111");
+ }
+ mapTownCount.map((item) => {
+ item.swrs = 0;
+ 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;
+ }
+}
diff --git a/src/view/sy_table.vue b/src/view/sy_table.vue
index bf315b1..9cc0f7a 100644
--- a/src/view/sy_table.vue
+++ b/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(() => {
- let token = tools.data.get("token");
- // console.log(token, "token");
- if (token == null) {
- ElMessage.error("请重新登录!");
- window.location.href =
- "http://220.191.238.50:996/api/login?returnURL=" + window.location.href;
- }
-});
+// onMounted(() => {
+// let token = tools.data.get("token");
+// // console.log(token, "token");
+// if (token == null) {
+// ElMessage.error("请重新登录!");
+// 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 {
- height: 100%;
- background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
- border-radius: 0px 100px 100px 0px;
- transition: width 0.3s ease;
- position: relative;
- }
- .progress-bar span {
- position: absolute;
- right: -10px;
- top: -30%;
- transform: translateY(-50%);
- color: #fff;
- font-size: 18px;
+ .progress-bar {
+ height: 100%;
+ background: linear-gradient(90deg, #31ffd8 0%, #00e5ff 100%);
+ border-radius: 0px 100px 100px 0px;
+ transition: width 0.3s ease;
+ position: relative;
+ span {
+ position: absolute;
+ right: -10px;
+ top: -30%;
+ transform: translateY(-50%);
+ color: #fff;
+ font-size: 18px;
+ }
+ }
}
}
img {
diff --git a/vite.config.js b/vite.config.js
index abd9471..7708875 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理
"/api": {
// 匹配到啥来进行方向代理
- // target: "http://192.168.2.17:8095/", //刘进
- target: "http://220.191.238.50:996/", //线上
+ target: "http://10.0.0.65:8095/", //刘进
+ // target: "http://220.191.238.50:996/", //线上
changeOrigin: true, //是否支持跨域
//rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空，这个
},