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

gx

This commit is contained in:
duanxiaohai 2024-07-30 13:24:58 +08:00
parent ad93ed72ce 8ea4c73c44
commit 5fb88a2d2f
3 changed files with 1609 additions and 1800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -68,7 +68,7 @@ const router = createRouter({
{ {
name: '首页地图2', name: '首页地图2',
path: '/home/index/map2', path: '/home/index/map2',
component: () => import('../view/map_copy.vue'), component: () => import('../view/sy_mapcopy.vue'),
}, },
] ]
}, },

225
src/view/map_copy.vue
View File

@ -23,7 +23,13 @@
:key="index" :key="index"
> >
<div class="content_item_name">{{ ageLess0(item.ages) }}</div> <div class="content_item_name">{{ ageLess0(item.ages) }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_bg" v-if="index!=0 &&index!=1"></div>
<div class="content_item_value">
<div class="content_item_percent" v-if="item.ages != '总人口'">
{{ item.percent }}%
</div>
{{ item.rksl }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -114,6 +120,7 @@ import {
watch, watch,
nextTick, nextTick,
} from "vue"; } from "vue";
import tools from "@/utils/tools";
import initializeMap from "@/utils/mapInitializer.js"; import initializeMap from "@/utils/mapInitializer.js";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import mapTown from "@/assets/json/ly.json"; import mapTown from "@/assets/json/ly.json";
@ -307,7 +314,7 @@ const tsbq_id_total = ref([
id: "tyjr", id: "tyjr",
}, },
{ {
name: "困难儿童", name: "困境儿童",
id: "kjer", id: "kjer",
}, },
]); ]);
@ -316,7 +323,7 @@ const chooseCsList = ref([]);
//单选未中社区区块 //单选未中社区区块
const unChooseList = ref([]); const unChooseList = ref([]);
const sqname = ref(); const sqname = ref();
const townName = ref(); // const townName = ref();
//地图街道设置(存放数量) //地图街道设置(存放数量)
const mapTownCount = reactive([ const mapTownCount = reactive([
{ {
@ -410,105 +417,6 @@ const personTotal = ref([
ages: "总人口", ages: "总人口",
age: "1000", age: "1000",
}, },
{
id: 1,
name: "1岁以下",
value: "26737",
ages: "1岁以下",
age: "1000",
},
{
id: 2,
name: "1岁",
value: "26737",
ages: "1岁",
age: "1000",
},
{
id: 3,
name: "2岁",
value: "26737",
ages: "2岁",
age: "1000",
},
{
id: 4,
name: "3岁",
value: "26737",
ages: "3岁",
age: "1000",
},
{
id: 5,
name: "4岁",
value: "26737",
ages: "4岁",
age: "1000",
},
{
id: 6,
name: "5岁",
value: "26737",
ages: "5岁",
age: "1000",
},
{
id: 7,
name: "6岁",
value: "26737",
ages: "6岁",
age: "1000",
},
{
id: 8,
name: "7岁",
value: "26737",
ages: "7岁",
age: "1000",
},
{
id: 9,
name: "8岁",
value: "26737",
ages: "8岁",
age: "1000",
},
{
id: 10,
name: "9岁",
value: "26737",
ages: "9岁",
age: "1000",
},
{
id: 11,
name: "10岁",
value: "26737",
ages: "10岁",
age: "1000",
},
{
id: 12,
name: "11岁",
value: "26737",
ages: "11岁",
age: "1000",
},
{
id: 13,
name: "12岁",
value: "26737",
ages: "12岁",
age: "1000",
},
{
id: 14,
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
age: "1000",
},
]); ]);
//特殊标签 //特殊标签
const tsbqTotal = ref([ const tsbqTotal = ref([
@ -1025,22 +933,25 @@ const getData = async (i, e) => {
}, },
{ {
id: "6666", id: "6666",
name: "死亡总人口", name: "近一年死亡",
value: "5650", value: "5650",
ages: "死亡总人口", ages: "近一年死亡",
age: "1000", age: "1000",
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;
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,
}); });
}); });
} }
@ -1086,22 +997,25 @@ const getDatas = async (e, i) => {
}, },
{ {
id: "6666", id: "6666",
name: "死亡总人口", name: "近一年死亡",
value: "5650", value: "5650",
ages: "死亡总人口", ages: "近一年死亡",
age: "1000", age: "1000",
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;
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,
}); });
}); });
} }
@ -1192,22 +1106,24 @@ const getDatas2 = async (e, i, cs) => {
}, },
{ {
id: "6666", id: "6666",
name: "死亡总人口", name: "近一年死亡",
value: "5650", value: "5650",
ages: "死亡总人口", ages: "近一年死亡",
age: "1000", age: "1000",
}, },
]; ];
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;
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,
}); });
}); });
xkzCenter.map((item) => { xkzCenter.map((item) => {
@ -1223,6 +1139,7 @@ const getDatas2 = async (e, i, cs) => {
}; };
//特殊标签 //特殊标签
//获取特殊标签 //获取特殊标签
//特殊标签列表数据请求
const getDataBq = async (jd, cs) => { const getDataBq = async (jd, cs) => {
await http await http
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`) .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
@ -1246,27 +1163,6 @@ const getDataBq = async (jd, cs) => {
}); });
}; };
const getDataBqs = async (jd, cs, bq) => { const getDataBqs = async (jd, cs, bq) => {
let data = {};
let vv = 0;
if (cs == "" && jd == "") {
data = {
tsbq: bq,
};
vv = 1;
} else if (cs == "") {
data = {
xzjd: jd,
tsbq: bq,
};
vv = 2;
} else {
data = {
xzjd: jd,
tsbq: bq,
csq: cs,
};
vv = 3;
}
await getDataBqJD(bq); await getDataBqJD(bq);
getDataBqs2(cfJd.value, cfCs.value, bq); getDataBqs2(cfJd.value, cfCs.value, bq);
// await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => { // await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
@ -1282,6 +1178,7 @@ const getDataBqs = async (jd, cs, bq) => {
// } // }
// }); // });
}; };
//特殊标签获取街道内部人数
const getDataBqs2 = async (jd, cs, bq, f = true) => { const getDataBqs2 = async (jd, cs, bq, f = true) => {
//f用来判断执不执行changeRs2 //f用来判断执不执行changeRs2
let data = {}; let data = {};
@ -1349,7 +1246,7 @@ const getDataBqs2 = async (jd, cs, bq, f = true) => {
}); });
} }
} else { } else {
console.log("hhhhh", xkzCenter); // console.log("hhhhh", xkzCenter);
if (choose.value.person == "") { if (choose.value.person == "") {
addCs(); addCs();
} else { } else {
@ -1428,10 +1325,10 @@ const to_jd = (item_name) => {
map.removeOverlay(currentMarker); map.removeOverlay(currentMarker);
} }
townName.value = item_name; // townName.value = item_name;
// if (item_name == cfJd.value) { // if (item_name == cfJd.value) {
// } else { // } else {
console.log(111, choose.value.person); // console.log(111, choose.value.person);
cfJd.value = item_name; cfJd.value = item_name;
let jdCenter = []; let jdCenter = [];
if (item_name == "溪口镇") { if (item_name == "溪口镇") {
@ -1455,10 +1352,14 @@ const to_jd = (item_name) => {
} else if (choose.value.person != "") { } else if (choose.value.person != "") {
if (choose.value.person == "9999") { if (choose.value.person == "9999") {
getDatas("溪口镇", ""); getDatas("溪口镇", "");
} else {
if (choose.value.person == 1) {
getDatas("溪口镇", "0"); //0岁传字符串
} else { } else {
getDatas("溪口镇", choose.value.person - 1); getDatas("溪口镇", choose.value.person - 1);
} }
} }
}
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -1514,10 +1415,9 @@ const addPolygonCounty = () => {
map.addOverlay(polygon); map.addOverlay(polygon);
polygon.addEventListener("click", () => { polygon.addEventListener("click", () => {
townName.value = item.name; // townName.value = item.name;
if (item.name == cfJd.value) { if (item.name == cfJd.value) {
} else { } else {
console.log(111, choose.value.person);
cfJd.value = item.name; cfJd.value = item.name;
let jdCenter = []; let jdCenter = [];
if (item.name == "溪口镇") { if (item.name == "溪口镇") {
@ -1542,10 +1442,14 @@ const addPolygonCounty = () => {
} else if (choose.value.person != "") { } else if (choose.value.person != "") {
if (choose.value.person == "9999") { if (choose.value.person == "9999") {
getDatas("溪口镇", ""); getDatas("溪口镇", "");
} else {
if (choose.value.person == 1) {
getDatas("溪口镇", "0"); //0岁传字符串
} else { } else {
getDatas("溪口镇", choose.value.person - 1); getDatas("溪口镇", choose.value.person - 1);
} }
} }
}
if (title_jd.value == item.name) { if (title_jd.value == item.name) {
} else { } else {
title_jd.value = item.name; title_jd.value = item.name;
@ -1660,7 +1564,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
title.appendChild(document.createTextNode(this.properties.title)); title.appendChild(document.createTextNode(this.properties.title));
content.appendChild(div); content.appendChild(div);
var number = document.createElement("div"); var number = document.createElement("div");
number.style.fontSize = "11px"; number.style.fontSize = "12px";
number.style.fontWeight = "600"; number.style.fontWeight = "600";
number.style.color = "#FEFF6C"; number.style.color = "#FEFF6C";
number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)"; number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
@ -1921,7 +1825,7 @@ const addCsUnChoose = () => {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index); DGcreateCs2(item, index);
}); });
}, 800); }, 400);
} }
addCsChoose(); addCsChoose();
addCsUnChoose(); addCsUnChoose();
@ -2224,6 +2128,7 @@ const reset_font = () => {
} }
}; };
onMounted(() => { onMounted(() => {
tools.data.set("token","6b0e380b4a8f46baae4923f83faf670d");
reset_font(); reset_font();
initMap(); initMap();
getData(); getData();
@ -2294,23 +2199,36 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 18px;
padding-left: 24px;
padding-right: 5px;
width: 48%; width: 48%;
height: 57px; position: relative;
// height: 57px;
background-image: url(@/assets/images/map/unchoose.png); background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 18px;
}
.content_item_bg{
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background:RGBA(53, 85, 114, 0.8);
z-index:-1;
} }
.content_item:first-child { .content_item:first-child {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 18px;
padding-left: 24px;
width: 100%; width: 100%;
height: 57px; // height: 57px;
background-image: url(@/assets/images/map/unchoose.png); background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -2322,9 +2240,10 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 18px;
padding-left: 24px;
width: 100%; width: 100%;
height: 57px; // height: 57px;
background-image: url(@/assets/images/map/unchoose.png); background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
@ -2346,6 +2265,14 @@ onMounted(() => {
top: 7.5px; top: 7.5px;
left: -13px; left: -13px;
} }
.content_item_value {
display: flex;
.content_item_percent {
margin-right: 5px;
color: #6bfeff;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
}
.choose { .choose {
background-image: url(@/assets/images/map/choose.png) !important; background-image: url(@/assets/images/map/choose.png) !important;
@ -2379,13 +2306,15 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 24px; padding: 18px;
padding-left: 24px;
width: 48%; width: 48%;
height: 57px; // height: 57px;
background-image: url(@/assets/images/map/unchoose.png); background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 12px; margin-bottom: 12px;
font-size: 18px;
} }
// .content_item:last-child { // .content_item:last-child {

3198
src/view/sy_map copy.vue → src/view/sy_mapcopy.vue
View File

File diff suppressed because it is too large Load Diff