From cdf011559247d03412b5a2475f0eb85382d5da2b Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Thu, 25 Jul 2024 22:57:16 +0800 Subject: [PATCH] gx --- src/view/sy_map.vue | 228 +++++++++++++++++++++++++++++--------------- 1 file changed, 151 insertions(+), 77 deletions(-) diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 1c51f28..4dca4a4 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -11,8 +11,13 @@
-
+
{{ item.ages }}
{{ item.rksl }}
@@ -24,8 +29,13 @@
-
+
{{ item.name }}
{{ item.rksl }}
@@ -39,11 +49,19 @@
-
+
{{ item.name }}
-
+
{{ itemm.name }}
@@ -56,8 +74,13 @@
-
+
{{ item.name }}
@@ -182,6 +205,10 @@ const tsbq_id_total = ref([ name: "糖尿病", id: "tnb", }, + { + name: "退役军人", + id: "tyjr", + }, ]); //点击龙游县初始化 const csh = () => { @@ -494,7 +521,7 @@ const addPolygonCounty = () => { BMAP(); if (choose.value.person == 0) { getDatas("溪口镇", ""); - getDataBq(cfJd.value, '') + getDataBq(cfJd.value, ""); } else { getDatas("溪口镇", choose.value.person); } @@ -509,43 +536,17 @@ const addPolygonCounty = () => { jdCenter = item.center; } }); - if (choose.value.person == "") { - addCs(); - } else { - addCs2(); - } + // if (choose.value.person == "") { + // addCs(); + // } else { + // addCs2(); + // } goMapCenter(jdCenter, 13); } else { map.removeEventListener("click", markera); if (currentMarker !== null) { 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 = ""; cfCs.value = ""; xuanzhongCs.value = []; @@ -759,6 +760,7 @@ const addCsUnChoose = () => { xkzCenter.forEach((a, b) => { if (a.name == item.name) { cs_dd_arr.value.push(a); + console.log("44444444444", a); xuanzhongCs.value.push(a); } }); @@ -772,16 +774,19 @@ const addCsUnChoose = () => { cs_un_choose_arr.value.forEach((item, index) => { map.removeOverlay(cs_qk_arr.value[index]); }); + getDatas2(cfJd.value, choose.value.person, cfCs.value); if (choose.value.person == "") { cs_dd_arr.value.map((item, index) => { DGcreateCs(item, index); }); } else { - cs_dd_arr.value.map((item, index) => { - DGcreateCs2(item, index); - }); + setTimeout(() => { + cs_dd_arr.value.map((item, index) => { + console.log("渲染", item); + DGcreateCs2(item, index); + }); + }, 300); } - getDatas2(cfJd.value, choose.value.person, cfCs.value); addCsChoose(); addCsUnChoose(); }); @@ -882,13 +887,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => { }; 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, { point: new BMapGL.Point(...polygon.center), opacity: 0.5, offsetY: 0, properties: { title: polygon.name, - number: polygon.number, + number: polygon[`${num}`], type: "customOverlay", }, }); @@ -954,14 +967,19 @@ const createCs2 = (polygon, indexx) => { content.appendChild(img2); return content; } - + let num = ""; + if (choose.value.person == "6666") { + num = "swrs"; + } else { + num = "number"; + } cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { point: new BMapGL.Point(...polygon.center), opacity: 0.5, offsetY: 0, properties: { title: polygon.name, - number: polygon.number, + number: polygon[`${num}`], imgSrc2: dwd, type: "customOverlay", }, @@ -1075,6 +1093,10 @@ const DGcreateCs = (polygon, indexx) => { map.addOverlay(cs_dd_arr.value[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() { var content = document.createElement("div"); content.style.display = "flex"; @@ -1122,13 +1144,20 @@ const DGcreateCs2 = (polygon, indexx) => { content.appendChild(img2); 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, { point: new BMapGL.Point(...polygon.center), opacity: 0.5, offsetY: 0, properties: { title: polygon.name, - number: polygon.number, + number: polygon[`${num}`], imgSrc2: dwd, type: "customOverlay", }, @@ -2079,7 +2108,7 @@ const getData = async (i, e) => { personTotal.value.push({ id: index + 1, rksl: item.rksl, - age: item.age + '', + age: item.age + "", ages: item.age + "岁", }); }); @@ -2102,7 +2131,7 @@ const getData = async (i, e) => { }); }); } - console.log(mapTownCount, 'mapTownCount'); + console.log(mapTownCount, "mapTownCount"); }); if (i) { changeRs(i); @@ -2122,9 +2151,18 @@ const getDatas = async (e, i) => { age: "", value: "res.data.total", }, + { + id: "6666", + name: "死亡总人口", + value: "5650", + ages: "死亡总人口", + age: "1000", + }, ]; personTotal.value[0].rksl = res.data.total; personTotal.value[0].ages = "总人口"; + personTotal.value[1].rksl = res.data.swrs; + personTotal.value[1].ages = "死亡"; res.data.age.forEach((item, index) => { personTotal.value.push({ id: index + 1, @@ -2141,6 +2179,14 @@ const getDatas = async (e, i) => { // } // }); // }); + xkzCenter.map((item) => { + item.swrs = 0; + res.data.committeeSwrs.map((items) => { + if (items.csq == item.name) { + item.swrs = items.swrs; + } + }); + }); xkzCenter.map((item) => { item.number = 0; res.data.committee.map((items) => { @@ -2178,6 +2224,7 @@ const getDatas = async (e, i) => { }); } } else { + console.log("hhhhh", xkzCenter); if (choose.value.person == "") { addCs(); } else { @@ -2202,9 +2249,18 @@ const getDatas2 = async (e, i, cs) => { age: "", value: "res.data.total", }, + { + id: "6666", + name: "死亡总人口", + value: "5650", + ages: "死亡总人口", + age: "1000", + }, ]; personTotal.value[0].rksl = res.data.total; personTotal.value[0].ages = "总人口"; + personTotal.value[1].rksl = res.data.swrs; + personTotal.value[1].ages = "死亡"; res.data.age.forEach((item, index) => { personTotal.value.push({ id: index + 1, @@ -2213,6 +2269,14 @@ const getDatas2 = async (e, i, cs) => { ages: item.age + "岁", }); }); + xkzCenter.map((item) => { + item.swrs = 0; + res.data.committeeSwrs.map((items) => { + if (items.csq == item.name) { + item.swrs = items.swrs; + } + }); + }); } }); }; @@ -2303,7 +2367,7 @@ const getDataBqs = async (jd, cs, bq) => { }); }); } - changeRs(bq) + changeRs(bq); } }); }; @@ -2357,13 +2421,17 @@ onMounted(() => { bottom: 0; width: 520px; height: 960px; - background: linear-gradient(270deg, + background: linear-gradient( + 270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100%), - radial-gradient(128% 99% at 100% 46%, + rgba(0, 60, 131, 0.74) 100% + ), + radial-gradient( + 128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100%); + rgba(0, 61, 134, 0.42) 100% + ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); padding: 30px 26px; @@ -2484,19 +2552,19 @@ onMounted(() => { margin-bottom: 12px; } - .content_item:last-child { - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: space-between; - padding: 24px; - width: 100%; - height: 57px; - background-image: url(@/assets/images/map/unchoose.png); - background-repeat: no-repeat; - background-size: 100% 100%; - margin-bottom: 12px; - } + // .content_item:last-child { + // box-sizing: border-box; + // display: flex; + // align-items: center; + // justify-content: space-between; + // padding: 24px; + // width: 100%; + // height: 57px; + // background-image: url(@/assets/images/map/unchoose.png); + // background-repeat: no-repeat; + // background-size: 100% 100%; + // margin-bottom: 12px; + // } .content_item_name { position: relative; @@ -2535,13 +2603,17 @@ onMounted(() => { bottom: 0; width: 520px; height: 960px; - background: linear-gradient(270deg, + background: linear-gradient( + 270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100%), - radial-gradient(128% 99% at 100% 46%, + rgba(0, 60, 131, 0.74) 100% + ), + radial-gradient( + 128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100%); + rgba(0, 61, 134, 0.42) 100% + ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); padding: 30px 26px; @@ -2698,10 +2770,12 @@ onMounted(() => { // line-height: 44px; letter-spacing: 4px; margin-bottom: 15px; - background: linear-gradient(180deg, - #ffffff 0%, - #ffffff 40%, - #00ffff 100%); + background: linear-gradient( + 180deg, + #ffffff 0%, + #ffffff 40%, + #00ffff 100% + ); /* 使文字没有背景颜色的背景 */ background-clip: text; /* 为了兼容性，添加渐变背景到IE */