This commit is contained in:
duanxiaohai
parent
4f414f6e32
commit
d85b084c8d
|
|
@ -180,6 +180,7 @@
|
|||
"properties": {
|
||||
"gml_id": "layer_township_pg.28415",
|
||||
"name": "驿前村",
|
||||
"center":[119.17929881887696,29.05284453515582],
|
||||
"layer": "乡镇",
|
||||
"code": "330825001000",
|
||||
"grade": 4,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 替换成空，这个
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue