diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 4b9f02b..69aae93 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -168,6 +168,9 @@
居住
未居住
+ { map.addOverlay(marker); currentMarker = marker; }; -//点击人口数 +//点击人口数(关键字存age) const buten = async (item) => { - getData(item.age); - getDatas(cfJd.value, item.age); + if (choose.value.person == item.age) { + choose.value.person = ""; + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + addJd(); + + if (title_jd.value == "") { + } else { + if (sfdd.value) { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); + } else { + addCs(); + } + } + } else { + getData(item.age); + getDatas(cfJd.value, item.age); + } }; -//点击特殊标签 +//点击特殊标签(关键字存name) const buten2 = async (item) => { //取消时不请求 if (choose.value.person == item.id) { @@ -1192,17 +1244,18 @@ const getDatas = async (e, i, y = true) => { }); }; const getDatas2 = async (e, i, cs) => { + //i1用来防止i清空,用来渲染单个点位 let i1 = i; if ( - i == "cjr" || - i == "dibian" || - i == "db" || - i == "gxy" || - i == "tnb" || - i == "tyjr" || - i == "kjer" || - i == "ge" || - i == "tk" + i == "残疾人" || + i == "低边" || + i == "低保" || + i == "高血压" || + i == "糖尿病" || + i == "退役军人" || + i == "困境儿童" || + i == "孤儿" || + i == "特困" ) { i = ""; } @@ -1244,43 +1297,6 @@ const getDatas2 = async (e, i, cs) => { // }); let before_age = ""; res.data.age.forEach((item, index) => { - // if (index == 0) { - // personTotal.value.push({ - // rksl: item.rksl, - // age: item.age + "", - // ages: item.age + "岁", - // percent: item.percent, - // }); - // before_age = item.age; - // console.log("执行111", before_age); - // } else { - // if (item.age - before_age == 1) { - // personTotal.value.push({ - // rksl: item.rksl, - // age: item.age + "", - // ages: item.age + "岁", - // percent: item.percent, - // }); - // before_age = item.age; - // } else { - // for (let i = 0; i < item.age - before_age - 1; i++) { - // ++before_age; - // personTotal.value.push({ - // rksl: 0, - // age: before_age + "", - // ages: before_age + "岁", - // percent: 0.0, - // }); - // } - // personTotal.value.push({ - // rksl: item.rksl, - // age: item.age + "", - // ages: item.age + "岁", - // percent: item.percent, - // }); - // before_age = item.age; - // } - // } if (index == 0 && item.age == 0) { personTotal.value.push({ rksl: item.rksl, @@ -1351,15 +1367,15 @@ const getDatas2 = async (e, i, cs) => { } }); if ( - i1 == "cjr" || - i1 == "dibian" || - i1 == "db" || - i1 == "gxy" || - i1 == "tnb" || - i1 == "tyjr" || - i1 == "kjer" || - i1 == "ge" || - i1 == "tk" + i1 == "残疾人" || + i1 == "低边" || + i1 == "低保" || + i1 == "高血压" || + i1 == "糖尿病" || + i1 == "退役军人" || + i1 == "困境儿童" || + i1 == "孤儿" || + i1 == "特困" ) { } else { if (choose.value.person == "") { @@ -1383,32 +1399,19 @@ const getDataBq = async (jd, cs) => { if (res.code == 200) { tsbqTotal.value.length = 0; res.data.forEach((item, index) => { - let idd = ""; - tsbq_id_total.value.forEach((itemm, indexx) => { - if (item.bq == itemm.name) { - idd = itemm.id; - } - }); + // let idd = ""; + // tsbq_id_total.value.forEach((itemm, indexx) => { + // if (item.bq == itemm.name) { + // idd = itemm.id; + // } + // }); tsbqTotal.value.push({ - id: idd, + id: item.bq, name: item.bq, rksl: item.rs || 0, tagId: item.tagId, }); }); - // for (let name in res.data) { - // let idd = ""; - // for (let v = 0; v < tsbq_id_total.value.length; v++) { - // if (tsbq_id_total.value[v].name == name) { - // idd = tsbq_id_total.value[v].id; - // } - // } - // tsbqTotal.value.push({ - // id: idd, - // name: name, - // rksl: res.data[name] || 0, - // }); - // } } }); }; @@ -1423,7 +1426,7 @@ const getDataBqs2 = async (jd, cs, bq, f = true) => { let vv = 0; let tagIdBq; tsbq_id_total.value.forEach((item, index) => { - if (bq == item.id) { + if (bq == item.name) { tagIdBq = item.tagId; } }); @@ -1512,7 +1515,7 @@ const getDataBqs3 = async (jd, cs, bq) => { let vv = 0; let tagIdBq; tsbq_id_total.value.forEach((item, index) => { - if (bq == item.id) { + if (bq == item.name) { tagIdBq = item.tagId; } }); @@ -1566,8 +1569,10 @@ const getDataBqs3 = async (jd, cs, bq) => { //特殊标签单独获取各个街道人数 const getDataBqJD = async (bq) => { let data = {}; + console.log(tsbq_id_total.value); + tsbq_id_total.value.forEach((item, index) => { - if (bq == item.id) { + if (bq == item.name) { data = { tagId: item.tagId, }; @@ -1592,40 +1597,40 @@ const getDataBqJD = async (bq) => { }; //人口,标签切换执行 const changeRs = (id) => { - if (choose.value.person == id) { - choose.value.person = ""; - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd(); - } else { - choose.value.person = id; - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd2(); - } + // if (choose.value.person == id) { + // choose.value.person = ""; + // jdm_number_arr.value.forEach((item, index) => { + // map.removeOverlay(jdm_number_arr.value[index]); + // }); + // addJd(); + // } else { + choose.value.person = id; + jdm_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_arr.value[index]); + }); + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + addJd2(); + // } }; const changeRs2 = (id) => { - if (choose.value.person == id) { - choose.value.person = ""; - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd(); - } else { - choose.value.person = id; - jdm_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_arr.value[index]); - }); - jdm_number_arr.value.forEach((item, index) => { - map.removeOverlay(jdm_number_arr.value[index]); - }); - addJd2(); - } + // if (choose.value.person == id) { + // choose.value.person = ""; + // jdm_number_arr.value.forEach((item, index) => { + // map.removeOverlay(jdm_number_arr.value[index]); + // }); + // addJd(); + // } else { + choose.value.person = id; + jdm_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_arr.value[index]); + }); + jdm_number_arr.value.forEach((item, index) => { + map.removeOverlay(jdm_number_arr.value[index]); + }); + addJd2(); + // } }; //----------资源要素------------ //判断数组中是否包含某个字符 @@ -1641,51 +1646,66 @@ const removeCharFromArray = (arr, charToRemove) => { const changeys = (name) => { if (yaosuList.value.includes(name)) { yaosuList.value = yaosuList.value.filter((ch) => ch !== name); - // yaosuIcon.value[name].sj.forEach((item, index) => { - // map.removeOverlay( yaosuIcon.value[name].sj[index]); - // }); + yaosuIcon.value[name].sj.forEach((item, index) => { + map.removeOverlay(yaosuIcon.value[name].sj[index].overlay); + }); } else { yaosuList.value.push(name); - // getZyys(name); + let url; + let img + yaosuTotal.value.forEach((item, index) => { + if (item.name == name) { + url = item.url; + img=item.img + } + }); + getZyys(url, name,img); } }; -const getZyys = (name) => { - http.get(``).then((res) => { +const getZyys = (url, name,img) => { + http.get(url).then((res) => { if (res.code == 200) { - res.data.map((item, index) => { - createZyys(item, index, name); + yaosuIcon.value[name].sj = res.data; + yaosuIcon.value[name].sj.forEach((item, index) => { + item.img = img; + item.overlay = null; + item.center = []; + item.center.push(Number(item.jd)); + item.center.push(Number(item.wd)); + }); + yaosuIcon.value[name].sj.forEach((itemm, indexx) => { + createZyys(itemm,indexx,name) }); } }); }; -// 添加资源要素的图标 +// 添加资源要素的图标(overlay存放标记点) const createZyys = (polygon, indexx, name) => { - // data.fwqCoordinates = polygon.point; function createLabelDOM() { var content = document.createElement("div"); 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); + content.style.height = "30px"; + content.style.width = "30px"; let img2 = document.createElement("img"); img2.style.width = "20px"; - img2.style.height = "20px"; + img2.style.height = "26px"; img2.src = this.properties.imgSrc2; content.appendChild(img2); return content; } - yaosuIcon.value[name].sj[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.point), + yaosuIcon.value[name].sj[indexx].overlay = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), opacity: 0.5, offsetY: -10, properties: { - imgSrc2: polygon.img2, + imgSrc2: polygon.img, type: "customOverlay", }, }); - map.addOverlay(yaosuIcon.value[name].sj[indexx]); + map.addOverlay( yaosuIcon.value[name].sj[indexx].overlay); }; //----------资源要素------------ //点击街道,回到街道 @@ -1711,15 +1731,15 @@ const to_jd = (item_name) => { getDatas(cfJd.value, ""); } if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); getDatas(cfJd.value, "", false); @@ -1760,20 +1780,19 @@ const open_detail = () => { } else if (choose.value.person == "6666") { age = ""; } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { - console.log(88888); age = ""; tsbq_id_total.value.forEach((item, index) => { - if (choose.value.person == item.id) { + if (choose.value.person == item.name) { tagId = item.tagId; } }); @@ -1812,19 +1831,19 @@ const handlePagination = (current) => { } else if (choose.value.person == "6666") { age = ""; } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { age = ""; tsbq_id_total.value.forEach((item, index) => { - if (choose.value.person == item.id) { + if (choose.value.person == item.name) { tagId = item.tagId; } }); @@ -1861,7 +1880,8 @@ const person_detail = (age, tagId) => { if (res.code == 200) { tableType.data = res.data; res.data.forEach((item, index) => { - item.index = index + 1 + (pagination.currentPage - 1) * pagination.pageSize; + item.index = + index + 1 + (pagination.currentPage - 1) * pagination.pageSize; }); pagination.total = res.count; } @@ -2273,15 +2293,15 @@ const addPolygonCounty = () => { getDatas(cfJd.value, ""); } if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); getDatas(cfJd.value, "", false); @@ -2435,15 +2455,15 @@ const createCustomOverlayJd2 = (polygon, indexx) => { if (choose.value.person == "6666") { num = "swrs"; } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { num = "numbers"; } else { @@ -2512,7 +2532,7 @@ const addPolygonCountyCs = () => { strokeWeight: 2, strokeOpacity: 0.8, fillColor: fillColor, - fillOpacity: 0.7, + fillOpacity: 0.5, name: item.name, zIndex: 99, }); @@ -2549,15 +2569,15 @@ const addPolygonCountyCs = () => { }); getDataBq(cfJd.value, cfCs.value); if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } else { @@ -2658,56 +2678,25 @@ const addCsUnChoose = () => { unChooseList.value.push(itemm); } }); - // cs_un_choose_arr.value.forEach((item, index) => { - // map.removeOverlay(cs_qk_arr.value[index]); - // }); - // getDataBqs(cfJd.value, cfCs.value); + getDataBq(cfJd.value, cfCs.value); - // if (choose.value.person == 1) { - // getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串 - // } else { - // getDatas2(cfJd.value, choose.value.person - 1, cfCs.value); - // } + getDatas2(cfJd.value, choose.value.person, cfCs.value); - // getDatas2(cfJd.value, choose.value.person, cfCs.value); - // if ( - // choose.value.person == "cjr" || - // choose.value.person == "dibian" || - // choose.value.person == "db" || - // choose.value.person == "gxy" || - // choose.value.person == "tnb" || - // choose.value.person == "tyjr" || - // choose.value.person == "kjer" - // ) { - // getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); - // } - // if (choose.value.person == "") { - // cs_dd_arr.value.map((item, index) => { - // DGcreateCs(item, index); - // }); - // } else + if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } - // 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); - // }); - // } + addCsChoose(); addCsUnChoose(); }); @@ -2831,15 +2820,15 @@ const createCs2 = (polygon, indexx) => { if (choose.value.person == "6666") { num = "swrs"; } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { num = "numbers"; } else { @@ -2859,18 +2848,7 @@ const createCs2 = (polygon, indexx) => { map.addOverlay(cs_number_name_arr.value[indexx]); cs_number_name_arr.value[indexx].addEventListener("click", () => { cfCsZs.value = polygon.name; - // if ( - // choose.value.person == "cjr" || - // choose.value.person == "dibian" || - // choose.value.person == "db" || - // choose.value.person == "gxy" || - // choose.value.person == "tnb" || - // choose.value.person == "tyjr" || - // choose.value.person == "kjer" - // ) { - // } else { open_detail(); - // } }); }; //添加单个村社 @@ -2979,15 +2957,15 @@ const DGcreateCs2 = (polygon, indexx) => { if (choose.value.person == "6666") { num = "swrs"; } else if ( - choose.value.person == "cjr" || - choose.value.person == "dibian" || - choose.value.person == "db" || - choose.value.person == "gxy" || - choose.value.person == "tnb" || - choose.value.person == "tyjr" || - choose.value.person == "kjer" || - choose.value.person == "ge" || - choose.value.person == "tk" + choose.value.person == "残疾人" || + choose.value.person == "低边" || + choose.value.person == "低保" || + choose.value.person == "高血压" || + choose.value.person == "糖尿病" || + choose.value.person == "退役军人" || + choose.value.person == "困境儿童" || + choose.value.person == "孤儿" || + choose.value.person == "特困" ) { num = "numbers"; } else { @@ -3008,18 +2986,7 @@ const DGcreateCs2 = (polygon, indexx) => { cs_dd_arr.value[indexx].addEventListener("click", () => { console.log(cfJd.value, polygon.name); cfCsZs.value = polygon.name; - // if ( - // choose.value.person == "cjr" || - // choose.value.person == "dibian" || - // choose.value.person == "db" || - // choose.value.person == "gxy" || - // choose.value.person == "tnb" || - // choose.value.person == "tyjr" || - // choose.value.person == "kjer" - // ) { - // } else { open_detail(); - // } }); }; //适配 @@ -3430,12 +3397,13 @@ onMounted(() => { .zyys { .zyys_content { + height: 200px; margin-top: 20px; box-sizing: border-box; display: flex; justify-content: space-between; flex-flow: row wrap; - + overflow: auto; .zyys_content_item { width: 110px; height: 54px; @@ -3469,6 +3437,9 @@ onMounted(() => { background-size: 100% 100%; } } + .zyys_content::-webkit-scrollbar { + display: none; + } } }