This commit is contained in:
姚宇浩 2024-07-25 11:37:36 +08:00
parent c3773ead5d
commit c5aff17ed5
1 changed files with 121 additions and 65 deletions

View File

@ -15,7 +15,7 @@
class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="getData(item.id, item.age), getDatas('溪口镇', item.age)"
@click="buten(item)"
:key="index"
>
<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_un_choose_arr = ref([]);
const cs_dd_arr = ref([]);
//
const marker = ref([]);
//
const cfjiedao = ref("");
const jrcs = ref(false);
const title_choose = ref("");
//
const sfdd = ref(false);
const xuanzhongCs = ref([]);
//
const cfJd = ref("");
//
const colorList = [
{
@ -214,6 +218,7 @@ const csh = () => {
cs_un_choose_arr.value = [];
cs_dd_arr.value = [];
goMapCenter([119.178783, 29.034583], 11);
getData();
};
//
const chooseCsList = ref([]);
@ -391,12 +396,12 @@ const BMAP = (name) => {
//
map.addEventListener("click", function (e) {
console.log(`${e.latlng.lng},${e.latlng.lat} `, name, 777);
xkzCenter.forEach((item, index) => {
if (item.name == name) {
item.center = [e.latlng.lng, e.latlng.lat];
}
// console.log(item.center);
});
// xkzCenter.forEach((item, index) => {
// if (item.name == name) {
// item.center = [e.latlng.lng, e.latlng.lat];
// }
// // console.log(item.center);
// });
// console.log(xkzCenter,888);
// addCs();
//
@ -405,7 +410,7 @@ const BMAP = (name) => {
}
//
let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
var marker = new BMapGL.Marker(
marker.value = new BMapGL.Marker(
new BMapGL.Point(e.latlng.lng, e.latlng.lat),
{
icon: icons,
@ -413,8 +418,8 @@ const BMAP = (name) => {
);
//
map.addOverlay(marker);
currentMarker = marker;
map.addOverlay(marker.value);
currentMarker = marker.value;
// addCs();
});
};
@ -494,6 +499,8 @@ const addPolygonCounty = () => {
cfjiedao.value = item.name;
let jdCenter = [];
if (item.name == "溪口镇") {
cfJd.value = item.name;
getDatas2("溪口镇", choose.value.person);
if (!title_choose.value.includes("溪口镇")) {
title_choose.value = title_choose.value + `>${item.name}`;
}
@ -510,7 +517,7 @@ const addPolygonCounty = () => {
} else {
addCs2();
}
console.log('dbfjdsbfjds',choose.value.person);
console.log("dbfjdsbfjds", choose.value.person);
goMapCenter(jdCenter, 13);
} else {
// xuanzhongCs.value = [];
@ -539,6 +546,7 @@ const addPolygonCounty = () => {
// cs_choose_arr.value = [];
// cs_un_choose_arr.value = [];
// cs_dd_arr.value = [];
cfJd.value = "";
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = "";
@ -570,6 +578,7 @@ const addPolygonCounty = () => {
cs_choose_arr.value = [];
cs_un_choose_arr.value = [];
cs_dd_arr.value = [];
getData();
}
}
@ -593,6 +602,7 @@ const addJd2 = () => {
mapTownCount.map((item, index) => {
createCustomOverlayJd2(item, index);
});
// if (center_now.value[0] == 119.178783) {
// goMapCenter([119.178783, 29.034581], 11);
// }
@ -688,7 +698,7 @@ const addCsChoose = () => {
chooseCsList.value.map((item, index) => {
console.log("item11", item.name);
sqname.value = item.name;
BMAP(item.name);
// BMAP(item.name);
let fillColor = "blue";
//
let points = [];
@ -785,7 +795,8 @@ const createCustomOverlayJd = (polygon, indexx) => {
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "20px";
content.style.width = "20px";
var div = document.createElement("div");
div.style.color = "#333";
div.style.whiteSpace = "nowrap";
@ -803,32 +814,6 @@ const createCustomOverlayJd = (polygon, indexx) => {
div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title));
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;
}
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
@ -850,7 +835,8 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "30px";
content.style.width = "30px";
var div = document.createElement("div");
div.style.color = "#333";
div.style.whiteSpace = "nowrap";
@ -873,7 +859,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
number.style.fontSize = "9px";
number.style.fontWeight = "600";
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)";
div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div);
@ -915,6 +901,7 @@ const addCs = () => {
//(,)
const addCs2 = () => {
xkzCenter.map((item, index) => {
console.log("addCs2", item);
createCs2(item, index);
});
};
@ -926,7 +913,8 @@ const createCs2 = (polygon, indexx) => {
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
content.style.height = "45px";
content.style.width = "45px";
var div = document.createElement("div");
div.style.color = "#333";
div.style.whiteSpace = "nowrap";
@ -955,7 +943,7 @@ const createCs2 = (polygon, indexx) => {
number.style.color = "black";
div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div);
// content.appendChild(div);
let img2 = document.createElement("img");
img2.style.width = "20px";
img2.style.height = "26px";
@ -965,6 +953,7 @@ const createCs2 = (polygon, indexx) => {
content.appendChild(img2);
return content;
}
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
@ -985,6 +974,8 @@ const createCs = (polygon, indexx) => {
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "45px";
content.style.width = "45px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
@ -1037,6 +1028,8 @@ const DGcreateCs = (polygon, indexx) => {
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
@ -1088,6 +1081,8 @@ const DGcreateCs2 = (polygon, indexx) => {
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
@ -1154,6 +1149,8 @@ const createCustomOverlay = (polygon, indexx) => {
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
@ -1257,7 +1254,7 @@ const choose = ref({
});
const changeRs = (id) => {
if (choose.value.person == id) {
console.log('重复');
console.log("重复");
// chooseArr.value = chooseArr.value.filter((item) => item !== "person");
choose.value.person = "";
jdm_number_arr.value.forEach((item, index) => {
@ -1289,6 +1286,7 @@ const changeRs = (id) => {
// }
// chooseArr.value.push("person");
console.log("new");
choose.value.person = id;
choose.value.bq = 9999;
jdm_arr.value.forEach((item, index) => {
@ -1297,6 +1295,9 @@ const changeRs = (id) => {
jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]);
});
addJd2();
// if (cs_name_arr.value?.length) {
// cs_name_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_name_arr.value[index]);
@ -1313,7 +1314,7 @@ const changeRs = (id) => {
// jdm_arr.value.forEach((item, index) => {
// map.removeOverlay(jdm_arr.value[index]);
// });
addJd2();
// removeAllPolygon("person");
// xuanran();
}
@ -2062,12 +2063,17 @@ const yaosuTotal = ref([
wz: true,
},
]);
const buten = async (item) => {
getData(item.id, item.age);
getDatas("溪口镇", item.age);
};
const getData = async (i, e) => {
console.log("iiii", i);
await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
if (res.code == 200) {
if (cfJd.value == "") {
personTotal.value = [
{
id: "0",
@ -2086,6 +2092,7 @@ const getData = async (i, e) => {
ages: item.age + "岁",
});
});
}
res.data.town.map((item) => {
mapTownCount.map((items) => {
if (item.town == items.name) {
@ -2104,6 +2111,27 @@ const getDatas = async (e, i) => {
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => {
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) => {
xkzCenter.map((items) => {
if (item.committee == items.name) {
@ -2111,6 +2139,7 @@ const getDatas = async (e, i) => {
}
});
});
console.log(xkzCenter);
cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]);
@ -2118,6 +2147,7 @@ const getDatas = async (e, i) => {
cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]);
});
console.log(cs_dd_arr.value, "cs_dd_arr.value");
if (title_choose.value == "") {
} else {
@ -2143,7 +2173,6 @@ const getDatas = async (e, i) => {
});
}
} else {
console.log("yyyy3333333");
if (choose.value.person == "") {
addCs();
} else {
@ -2154,6 +2183,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 = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
let height =
@ -2174,6 +2229,7 @@ onMounted(() => {
reset_font();
initMap();
getData();
BMAP();
});
</script>
<style lang="scss" scoped>