xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-08-01 09:58:26 +08:00
parent 4f414f6e32
commit d85b084c8d
4 changed files with 351 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/json/cssj.json
View File

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

283
src/view/sy_mapcopy.vue
View File

@ -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
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
try {
const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`);
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);
}
@ -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,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>

28
src/view/sy_table.vue
View File

@ -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,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;
}
.progress-bar span {
span {
position: absolute;
right: -10px;
top: -30%;
@ -697,6 +693,8 @@ const rowState = (row) => {
font-size: 18px;
}
}
}
}
img {
width: 24px;
height: 24px;

4
vite.config.js
View File

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