This commit is contained in:
duanxiaohai 2024-07-26 00:22:11 +08:00
commit c037d3600b
1 changed files with 192 additions and 106 deletions

View File

@ -32,12 +32,12 @@
<div <div
class="content_item" class="content_item"
v-for="(item, index) in tsbqTotal" v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.bq }" :class="{ choose: item.id == choose.person }"
@click="changebq(item.id)" @click="buten2(item)"
:key="index" :key="index"
> >
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.value }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -205,6 +205,10 @@ const tsbq_id_total = ref([
name: "糖尿病", name: "糖尿病",
id: "tnb", id: "tnb",
}, },
{
name: "退役军人",
id: "tyjr",
},
]); ]);
// //
const csh = () => { const csh = () => {
@ -517,6 +521,7 @@ const addPolygonCounty = () => {
BMAP(); BMAP();
if (choose.value.person == 0) { if (choose.value.person == 0) {
getDatas("溪口镇", ""); getDatas("溪口镇", "");
getDataBq(cfJd.value, "");
} else { } else {
getDatas("溪口镇", choose.value.person); getDatas("溪口镇", choose.value.person);
} }
@ -531,43 +536,17 @@ const addPolygonCounty = () => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
if (choose.value.person == "") { // if (choose.value.person == "") {
addCs(); // addCs();
} else { // } else {
addCs2(); // addCs2();
} // }
goMapCenter(jdCenter, 13); goMapCenter(jdCenter, 13);
} else { } else {
map.removeEventListener("click", markera); map.removeEventListener("click", markera);
if (currentMarker !== null) { if (currentMarker !== null) {
map.removeOverlay(currentMarker); map.removeOverlay(currentMarker);
} }
// xuanzhongCs.value = [];
// sfdd.value = false;
// title_choose.value = "";
// 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]);
// });
// cs_choose_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_choose_arr.value[index]);
// });
// cs_un_choose_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_un_choose_arr.value[index]);
// });
// cs_dd_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_dd_arr.value[index]);
// });
// fwq_list_arr.value = [];
// cs_qk_arr.value = [];
// cs_name_arr.value = [];
// cs_number_name_arr.value = [];
// cs_choose_arr.value = [];
// cs_un_choose_arr.value = [];
// cs_dd_arr.value = [];
cfJd.value = ""; cfJd.value = "";
cfCs.value = ""; cfCs.value = "";
xuanzhongCs.value = []; xuanzhongCs.value = [];
@ -781,6 +760,7 @@ const addCsUnChoose = () => {
xkzCenter.forEach((a, b) => { xkzCenter.forEach((a, b) => {
if (a.name == item.name) { if (a.name == item.name) {
cs_dd_arr.value.push(a); cs_dd_arr.value.push(a);
console.log("44444444444", a);
xuanzhongCs.value.push(a); xuanzhongCs.value.push(a);
} }
}); });
@ -794,16 +774,19 @@ const addCsUnChoose = () => {
cs_un_choose_arr.value.forEach((item, index) => { cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]); map.removeOverlay(cs_qk_arr.value[index]);
}); });
getDatas2(cfJd.value, choose.value.person, cfCs.value);
if (choose.value.person == "") { if (choose.value.person == "") {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index); DGcreateCs(item, index);
}); });
} else { } else {
cs_dd_arr.value.map((item, index) => { setTimeout(() => {
DGcreateCs2(item, index); cs_dd_arr.value.map((item, index) => {
}); console.log("渲染", item);
DGcreateCs2(item, index);
});
}, 300);
} }
getDatas2(cfJd.value, choose.value.person, cfCs.value);
addCsChoose(); addCsChoose();
addCsUnChoose(); addCsUnChoose();
}); });
@ -904,13 +887,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
}; };
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
console.log(11111);
num = "swrs";
} else {
console.log(222222);
num = "number";
}
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { jdm_number_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,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
type: "customOverlay", type: "customOverlay",
}, },
}); });
@ -976,14 +967,19 @@ const createCs2 = (polygon, indexx) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} else {
num = "number";
}
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,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
imgSrc2: dwd, imgSrc2: dwd,
type: "customOverlay", type: "customOverlay",
}, },
@ -1097,6 +1093,10 @@ const DGcreateCs = (polygon, indexx) => {
map.addOverlay(cs_dd_arr.value[indexx]); map.addOverlay(cs_dd_arr.value[indexx]);
}; };
const DGcreateCs2 = (polygon, indexx) => { const DGcreateCs2 = (polygon, indexx) => {
console.log(choose.value.person, "单个村社", polygon);
console.log("单个村社", polygon.name);
console.log("单个村社", polygon.number);
console.log("单个村社", polygon.swrs);
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -1144,13 +1144,20 @@ const DGcreateCs2 = (polygon, indexx) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} else {
num = "number";
}
console.log("单个", num);
cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { cs_dd_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,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
imgSrc2: dwd, imgSrc2: dwd,
type: "customOverlay", type: "customOverlay",
}, },
@ -1292,26 +1299,25 @@ const changeRs = (id) => {
} }
}; };
const changebq = (id) => { const changebq = (id) => {
// choose.value.bq = id; if (choose.value.person == id) {
// choose.value.person = ""; choose.value.person = "";
if (choose.value.bq == id) { jdm_number_arr.value.forEach((item, index) => {
choose.value.bq = 999; map.removeOverlay(jdm_number_arr.value[index]);
// jdm_number_arr.value.forEach((item, index) => { });
// map.removeOverlay(jdm_number_arr.value[index]); jdm_arr.value.forEach((item, index) => {
// }); map.removeOverlay(jdm_arr.value[index]);
// jdm_arr.value.forEach((item, index) => { });
// map.removeOverlay(jdm_arr.value[index]); addJd();
// });
// addJd();
} else { } else {
choose.value.bq = id; choose.value.person = 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]);
// }); });
// 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]);
// }); });
// addJd(); // addJd2();
addJd();
} }
// choose.value.person = id; // choose.value.person = id;
}; };
@ -2067,8 +2073,10 @@ const buten = async (item) => {
getDatas("溪口镇", item.age); getDatas("溪口镇", item.age);
}; };
const buten2 = async (item) => { const buten2 = async (item) => {
getDataBq(item.id, item.age); console.log(item.id);
// getDataBq(item.id, item.age);
// getDatas("", item.age); // getDatas("", item.age);
getDataBqs(cfJd.value, cfCs.value, item.id);
}; };
// //
const getData = async (i, e) => { const getData = async (i, e) => {
@ -2084,9 +2092,18 @@ const getData = async (i, e) => {
age: "", age: "",
value: "res.data.total", value: "res.data.total",
}, },
{
id: "6666",
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
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].ages = "死亡";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
@ -2096,14 +2113,15 @@ const getData = async (i, e) => {
}); });
}); });
} }
// res.data.town.map((item) => { mapTownCount.map((item) => {
// mapTownCount.map((items) => { // item.number = 0;
// if (item.town == items.name) { res.data.townWwrs.map((items) => {
// items.number = item.rksl; if (items.xzjd == item.name) {
// } item.swrs = items.swrs;
// }); }
// }); });
console.log(111, res.data.townWwrs); });
console.log(mapTownCount);
mapTownCount.map((item) => { mapTownCount.map((item) => {
item.number = 0; item.number = 0;
res.data.town.map((items) => { res.data.town.map((items) => {
@ -2132,9 +2150,18 @@ const getDatas = async (e, i) => {
age: "", age: "",
value: "res.data.total", value: "res.data.total",
}, },
{
id: "6666",
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
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].ages = "死亡";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
@ -2144,7 +2171,6 @@ const getDatas = async (e, i) => {
}); });
}); });
} }
// 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) {
@ -2152,6 +2178,16 @@ const getDatas = async (e, i) => {
// } // }
// }); // });
// }); // });
xkzCenter.map((item) => {
// item.number = 0;
res.data.committeeSwrs.map((items) => {
if (items.csq == item.name) {
item.swrs = items.swrs;
}
});
});
console.log(xkzCenter);
xkzCenter.map((item) => { xkzCenter.map((item) => {
item.number = 0; item.number = 0;
res.data.committee.map((items) => { res.data.committee.map((items) => {
@ -2189,6 +2225,7 @@ const getDatas = async (e, i) => {
}); });
} }
} else { } else {
console.log("hhhhh", xkzCenter);
if (choose.value.person == "") { if (choose.value.person == "") {
addCs(); addCs();
} else { } else {
@ -2213,9 +2250,18 @@ const getDatas2 = async (e, i, cs) => {
age: "", age: "",
value: "res.data.total", value: "res.data.total",
}, },
{
id: "6666",
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
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].ages = "死亡";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
@ -2224,34 +2270,25 @@ const getDatas2 = async (e, i, cs) => {
ages: item.age + "岁", ages: item.age + "岁",
}); });
}); });
xkzCenter.map((item) => {
item.swrs = 0;
res.data.committeeSwrs.map((items) => {
if (items.csq == item.name) {
item.swrs = items.swrs;
}
});
});
} }
}); });
}; };
// //
const getDataBq = async (i, e) => { const getDataBq = async (jd, cs) => {
await http await http
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${e || ""}&xzjd=${i || ""}`) .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
.then((res) => { .then((res) => {
console.log(66666666666);
if (res.code == 200) { if (res.code == 200) {
if (cfJd.value == "") { 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 + "",
// });
// });
tsbqTotal.value.length = 0; tsbqTotal.value.length = 0;
for (let name in res.data) { for (let name in res.data) {
let idd = ""; let idd = "";
@ -2287,6 +2324,54 @@ const getDataBq = async (i, e) => {
} }
}); });
}; };
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 http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
if (res.code == 200) {
// if (cfJd.value == "") {
// res.data.forEach((item, index) => {
// tsbqTotal.value.push({
// id: index + 1,
// rksl: item.rksl,
// age: item.age + "",
// ages: item.age + "",
// });
// });
// }
if (vv == 1) {
mapTownCount.map((item) => {
item.number = 0;
res.data.map((items) => {
if (items.xzjd == item.name) {
item.number = items.rs;
}
});
});
}
changeRs(bq);
}
});
};
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 =
@ -2307,7 +2392,7 @@ onMounted(() => {
reset_font(); reset_font();
initMap(); initMap();
getData(); getData();
// getDataBq(); getDataBq();
BMAP(); BMAP();
}); });
</script> </script>
@ -2396,19 +2481,20 @@ onMounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 12px; margin-bottom: 12px;
} }
// .content_item:last-child {
// box-sizing: border-box; .content_item:nth-child(2) {
// display: flex; box-sizing: border-box;
// align-items: center; display: flex;
// justify-content: space-between; align-items: center;
// padding: 24px; justify-content: space-between;
// width: 100%; padding: 24px;
// height: 57px; width: 100%;
// background-image: url(@/assets/images/map/unchoose.png); height: 57px;
// background-repeat: no-repeat; background-image: url(@/assets/images/map/unchoose.png);
// background-size: 100% 100%; background-repeat: no-repeat;
// margin-bottom: 12px; background-size: 100% 100%;
// } margin-bottom: 12px;
}
.content_item_name { .content_item_name {
position: relative; position: relative;
@ -2598,6 +2684,7 @@ onMounted(() => {
:nth-child(4n).jbggfwq_content_item_right_item::after { :nth-child(4n).jbggfwq_content_item_right_item::after {
opacity: 0; opacity: 0;
} }
:last-child.jbggfwq_content_item_right_item::after { :last-child.jbggfwq_content_item_right_item::after {
opacity: 0; opacity: 0;
} }
@ -2677,7 +2764,6 @@ onMounted(() => {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
span { span {
cursor: pointer;
display: block; display: block;
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
font-size: 34px; font-size: 34px;