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

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
duanxiaohai 2024-07-25 11:48:15 +08:00
parent 4b96e8896e 8f52a5c27d
commit b0dce9c0b7
1 changed files with 105 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
src/view/sy_map.vue
View File

@ -15,7 +15,7 @@
class="content_item" class="content_item"
v-for="(item, index) in personTotal" v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }" :class="{ choose: item.id == choose.person }"
@click="getData(item.id, item.age), getDatas('溪口镇', item.age)" @click="buten(item)"
:key="index" :key="index"
> >
<div class="content_item_name">{{ item.ages }}</div> <div class="content_item_name">{{ item.ages }}</div>
@ -143,13 +143,17 @@ const cs_number_name_arr = ref([]);
const cs_choose_arr = ref([]); const cs_choose_arr = ref([]);
const cs_un_choose_arr = ref([]); const cs_un_choose_arr = ref([]);
const cs_dd_arr = ref([]); const cs_dd_arr = ref([]);
//点击点
const marker = ref([]);
//
const cfjiedao = ref(""); const cfjiedao = ref("");
const jrcs = ref(false); const jrcs = ref(false);
const title_choose = ref(""); const title_choose = ref("");
//是否单点社区 //是否单点社区
const sfdd = ref(false); const sfdd = ref(false);
const xuanzhongCs = ref([]); const xuanzhongCs = ref([]);
//存放街道
const cfJd = ref("");
//村社颜色列表 //村社颜色列表
const colorList = [ const colorList = [
{ {
@ -214,6 +218,7 @@ const csh = () => {
cs_un_choose_arr.value = []; cs_un_choose_arr.value = [];
cs_dd_arr.value = []; cs_dd_arr.value = [];
goMapCenter([119.178783, 29.034583], 11); goMapCenter([119.178783, 29.034583], 11);
getData();
}; };
//选中社区 //选中社区
const chooseCsList = ref([]); const chooseCsList = ref([]);
@ -532,6 +537,7 @@ const addPolygonCounty = () => {
// cs_choose_arr.value = []; // cs_choose_arr.value = [];
// cs_un_choose_arr.value = []; // cs_un_choose_arr.value = [];
// cs_dd_arr.value = []; // cs_dd_arr.value = [];
cfJd.value = "";
xuanzhongCs.value = []; xuanzhongCs.value = [];
sfdd.value = false; sfdd.value = false;
title_choose.value = ""; title_choose.value = "";
@ -563,6 +569,7 @@ const addPolygonCounty = () => {
cs_choose_arr.value = []; cs_choose_arr.value = [];
cs_un_choose_arr.value = []; cs_un_choose_arr.value = [];
cs_dd_arr.value = []; cs_dd_arr.value = [];
getData();
} }
} }
@ -586,6 +593,7 @@ const addJd2 = () => {
mapTownCount.map((item, index) => { mapTownCount.map((item, index) => {
createCustomOverlayJd2(item, index); createCustomOverlayJd2(item, index);
}); });
// if (center_now.value[0] == 119.178783) { // if (center_now.value[0] == 119.178783) {
// goMapCenter([119.178783, 29.034581], 11); // goMapCenter([119.178783, 29.034581], 11);
// } // }
@ -777,7 +785,8 @@ const createCustomOverlayJd = (polygon, indexx) => {
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "20px";
content.style.width = "20px";
var div = document.createElement("div"); var div = document.createElement("div");
div.style.color = "#333"; div.style.color = "#333";
div.style.whiteSpace = "nowrap"; div.style.whiteSpace = "nowrap";
@ -795,32 +804,6 @@ const createCustomOverlayJd = (polygon, indexx) => {
div.appendChild(title); div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title)); title.appendChild(document.createTextNode(this.properties.title));
content.appendChild(div); content.appendChild(div);
// div.onclick = function () {
// let jdCenter = [];
// if (polygon.name == "溪口镇") {
// if (!title_choose.value.includes("溪口镇")) {
// title_choose.value = title_choose.value + `>${polygon.name}`;
// }
// chooseArr.value.push("jd_noNumber");
// loadCs();
// addPolygonCountyCs();
// mapTownCount.map((item) => {
// if (item.name == "溪口镇") {
// jdCenter = item.center;
// }
// });
// center_now.value = jdCenter;
// addCs();
// goMapCenter(jdCenter, 14);
// } else {
// cs_qk_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_qk_arr.value[index]);
// });
// cs_name_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_name_arr.value[index]);
// });
// }
// };
return content; return content;
} }
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
@ -842,7 +825,8 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "30px";
content.style.width = "30px";
var div = document.createElement("div"); var div = document.createElement("div");
div.style.color = "#333"; div.style.color = "#333";
div.style.whiteSpace = "nowrap"; div.style.whiteSpace = "nowrap";
@ -907,6 +891,7 @@ const addCs = () => {
//创建村社(人数,标签) //创建村社(人数,标签)
const addCs2 = () => { const addCs2 = () => {
xkzCenter.map((item, index) => { xkzCenter.map((item, index) => {
console.log("addCs2", item);
createCs2(item, index); createCs2(item, index);
}); });
}; };
@ -918,7 +903,8 @@ const createCs2 = (polygon, indexx) => {
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "45px";
content.style.width = "45px";
var div = document.createElement("div"); var div = document.createElement("div");
div.style.color = "#333"; div.style.color = "#333";
div.style.whiteSpace = "nowrap"; div.style.whiteSpace = "nowrap";
@ -947,7 +933,7 @@ const createCs2 = (polygon, indexx) => {
number.style.color = "black"; number.style.color = "black";
div.appendChild(number); div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number)); number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div); // content.appendChild(div);
let img2 = document.createElement("img"); let img2 = document.createElement("img");
img2.style.width = "20px"; img2.style.width = "20px";
img2.style.height = "26px"; img2.style.height = "26px";
@ -957,6 +943,7 @@ const createCs2 = (polygon, indexx) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
@ -977,6 +964,8 @@ const createCs = (polygon, indexx) => {
content.style.display = "flex"; content.style.display = "flex";
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.height = "45px";
content.style.width = "45px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div"); var div = document.createElement("div");
@ -1029,6 +1018,8 @@ const DGcreateCs = (polygon, indexx) => {
content.style.display = "flex"; content.style.display = "flex";
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div"); var div = document.createElement("div");
@ -1080,6 +1071,8 @@ const DGcreateCs2 = (polygon, indexx) => {
content.style.display = "flex"; content.style.display = "flex";
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div"); var div = document.createElement("div");
@ -1146,6 +1139,8 @@ const createCustomOverlay = (polygon, indexx) => {
content.style.display = "flex"; content.style.display = "flex";
content.style.flexDirection = "column"; content.style.flexDirection = "column";
content.style.alignItems = "center"; content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div"); var div = document.createElement("div");
@ -1281,6 +1276,7 @@ const changeRs = (id) => {
// } // }
// chooseArr.value.push("person"); // chooseArr.value.push("person");
console.log("new"); console.log("new");
choose.value.person = id; choose.value.person = id;
choose.value.bq = 9999; choose.value.bq = 9999;
jdm_arr.value.forEach((item, index) => { jdm_arr.value.forEach((item, index) => {
@ -1289,6 +1285,9 @@ const changeRs = (id) => {
jdm_number_arr.value.forEach((item, index) => { jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]); map.removeOverlay(jdm_number_arr.value[index]);
}); });
addJd2();
// if (cs_name_arr.value?.length) { // if (cs_name_arr.value?.length) {
// cs_name_arr.value.forEach((item, index) => { // cs_name_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_name_arr.value[index]); // map.removeOverlay(cs_name_arr.value[index]);
@ -1305,7 +1304,7 @@ const changeRs = (id) => {
// jdm_arr.value.forEach((item, index) => { // jdm_arr.value.forEach((item, index) => {
// map.removeOverlay(jdm_arr.value[index]); // map.removeOverlay(jdm_arr.value[index]);
// }); // });
addJd2();
// removeAllPolygon("person"); // removeAllPolygon("person");
// xuanran(); // xuanran();
} }
@ -2054,30 +2053,36 @@ const yaosuTotal = ref([
wz: true, wz: true,
}, },
]); ]);
const buten = async (item) => {
getData(item.id, item.age);
getDatas("溪口镇", item.age);
};
const getData = async (i, e) => { const getData = async (i, e) => {
console.log("iiii", i); console.log("iiii", i);
await http await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`) .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
personTotal.value = [ if (cfJd.value == "") {
{ personTotal.value = [
id: "0", {
ages: "总人口", id: "0",
age: "", ages: "总人口",
value: "res.data.total", age: "",
}, value: "res.data.total",
]; },
personTotal.value[0].rksl = res.data.total; ];
personTotal.value[0].ages = "总人口"; personTotal.value[0].rksl = res.data.total;
res.data.age.forEach((item, index) => { personTotal.value[0].ages = "总人口";
personTotal.value.push({ res.data.age.forEach((item, index) => {
id: index + 1, personTotal.value.push({
rksl: item.rksl, id: index + 1,
age: item.age + "", rksl: item.rksl,
ages: item.age + "岁", age: item.age + "",
ages: item.age + "岁",
});
}); });
}); }
res.data.town.map((item) => { res.data.town.map((item) => {
mapTownCount.map((items) => { mapTownCount.map((items) => {
if (item.town == items.name) { if (item.town == items.name) {
@ -2096,6 +2101,27 @@ const getDatas = async (e, i) => {
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
if (cfJd.value !== "") {
personTotal.value = [
{
id: "0",
ages: "总人口",
age: "",
value: "res.data.total",
},
];
personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口";
res.data.age.forEach((item, index) => {
personTotal.value.push({
id: index + 1,
rksl: item.rksl,
age: item.age + "",
ages: item.age + "岁",
});
});
}
res.data.committee.map((item) => { res.data.committee.map((item) => {
xkzCenter.map((items) => { xkzCenter.map((items) => {
if (item.committee == items.name) { if (item.committee == items.name) {
@ -2103,6 +2129,7 @@ const getDatas = async (e, i) => {
} }
}); });
}); });
console.log(xkzCenter); console.log(xkzCenter);
cs_name_arr.value.forEach((item, index) => { cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]); map.removeOverlay(cs_name_arr.value[index]);
@ -2110,6 +2137,7 @@ const getDatas = async (e, i) => {
cs_number_name_arr.value.forEach((item, index) => { cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]); map.removeOverlay(cs_number_name_arr.value[index]);
}); });
console.log(cs_dd_arr.value, "cs_dd_arr.value"); console.log(cs_dd_arr.value, "cs_dd_arr.value");
if (title_choose.value == "") { if (title_choose.value == "") {
} else { } else {
@ -2135,7 +2163,6 @@ const getDatas = async (e, i) => {
}); });
} }
} else { } else {
console.log("yyyy3333333");
if (choose.value.person == "") { if (choose.value.person == "") {
addCs(); addCs();
} else { } else {
@ -2146,6 +2173,32 @@ const getDatas = async (e, i) => {
} }
}); });
}; };
const getDatas2 = async (e, i) => {
await http
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => {
if (res.code == 200) {
personTotal.value = [
{
id: "0",
ages: "总人口",
age: "",
value: "res.data.total",
},
];
personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口";
res.data.age.forEach((item, index) => {
personTotal.value.push({
id: index + 1,
rksl: item.rksl,
age: item.age + "",
ages: item.age + "岁",
});
});
}
});
};
const reset_font = () => { const reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth; let width = document.documentElement.clientWidth || document.body.clientWidth;
let height = let height =
@ -2166,6 +2219,7 @@ onMounted(() => {
reset_font(); reset_font();
initMap(); initMap();
getData(); getData();
BMAP();
}); });
</script> </script>