diff --git a/src/view/home.vue b/src/view/home.vue index b7e8f53..2867d35 100644 --- a/src/view/home.vue +++ b/src/view/home.vue @@ -31,7 +31,6 @@ const reset_font = () => { let height = document.documentElement.clientHeight || document.body.clientHeight; - console.log(width, height) document.querySelector("#m").style.transformOrigin = "top left"; document.querySelector("#m").style.transform = @@ -54,11 +53,9 @@ const reset_font = () => { }; onMounted(() => { reset_font(); - reset_font(); }); window.addEventListener("resize", function () { reset_font(); - reset_font(); }); diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index a5b31bd..89175e6 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -5,19 +5,16 @@
-
{{ title_choose }}
+
+ 龙游县{{ title_choose }} +
-
-
{{ item.name }}
-
{{ item.value }}
+
+
{{ item.ages }}
+
{{ item.rksl }}
@@ -27,13 +24,8 @@
-
+
{{ item.name }}
{{ item.value }}
@@ -47,19 +39,11 @@
-
+
{{ item.name }}
-
+
{{ itemm.name }}
@@ -72,13 +56,8 @@
-
+
{{ item.name }}
@@ -129,7 +108,7 @@ import b4 from "@/assets/images/map/b4.png"; import b5 from "@/assets/images/map/b5.png"; import b6 from "@/assets/images/map/b6.png"; import xcbg from "@/assets/images/map/xcbg.png"; - +import http from "@/utils/request.js"; import AED from "@/assets/images/map/AED.png"; //删除 const jdm_arr = ref([]); @@ -138,8 +117,12 @@ const fwq_list_arr = ref([]); const cs_qk_arr = ref([]); const cs_name_arr = ref([]); const cs_number_name_arr = ref([]); +const cs_choose_arr = ref([]); +const cs_un_choose_arr = ref([]); // -const title_choose = ref("龙游县"); +const cfjiedao = ref(""); +const jrcs = ref(false); +const title_choose = ref(""); //村社颜色列表 const colorList = [ { @@ -170,6 +153,30 @@ const colorList = [ bg: "RGBA(27, 91, 55, 1)", }, ]; +//点击龙游县初始化 +const csh = () => { + title_choose.value = ""; + cfjiedao.value=''; + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_qk_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + goMapCenter([119.178783, 29.034583], 11); +}; +//选中社区 +const chooseCsList = ref([]); +const unChooseList = ref([]); //中心点坐标 const center_now = ref([]); const center_center = ref([119.178783, 29.034583]); @@ -179,6 +186,7 @@ const mapTownCount = reactive([ name: "龙洲街道", center: [119.1573083, 28.9799445], number: "1000", + }, { name: "东华街道", @@ -435,8 +443,22 @@ const addPolygonCounty = () => { map.addOverlay(polygon); polygon.addEventListener("click", () => { console.log(item.name); - if (title_choose.value.includes("溪口镇")) { + + // if(item.name !== "溪口镇"){ + // jrcs.value=false; + // console.log( jrcs.value,'000'); + // } + // if (jrcs.value && item.name != "溪口镇") { + // console.log(1); + // } else { + // console.log(2); + + // jrcs.value=true; + if (item.name == cfjiedao.value) { + console.log(2222); } else { + console.log(111); + cfjiedao.value = item.name; let jdCenter = []; if (item.name == "溪口镇") { if (!title_choose.value.includes("溪口镇")) { @@ -449,18 +471,27 @@ const addPolygonCounty = () => { jdCenter = item.center; } }); + console.log(jrcs.value); addCs(); goMapCenter(jdCenter, 13); } else { - title_choose.value = "龙游县"; + 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]); + }); } } + + // } }); } }); @@ -469,6 +500,7 @@ const addPolygonCounty = () => { const addJd = () => { mapTownCount.map((item, index) => { + goMapCenter([119.178783, 29.034581], 11); createCustomOverlayJd(item, index); }); }; @@ -524,30 +556,94 @@ const addPolygonCountyCs = () => { }); map.addOverlay(cs_qk_arr.value[index]); cs_qk_arr.value[index].addEventListener("click", () => { - console.log(111); - // let jdCenter = []; - // if (item.name == "溪口镇") { - // if (!title_choose.value.includes("溪口镇")) { - // title_choose.value = title_choose.value + `>${item.name}`; - // } - // loadCs(); - // addPolygonCountyCs(); - // mapTownCount.map((item) => { - // if (item.name == "溪口镇") { - // jdCenter = item.center; - // } - // }); - // addCs(); - // goMapCenter(jdCenter, 13); - // } else { - // 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]); - // }); - // } + console.log(item.name); + console.log(111, xkzDk); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + title_choose.value = title_choose.value + `>${item.name}`; + cs_qk_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + console.log("chooseCsList.value", chooseCsList.value); + console.log("unChooseList.value", unChooseList.value); + addCsChoose(); + addCsUnChoose(); + }); + } + }); +}; +//添加选中社区 +const addCsChoose = () => { + chooseCsList.value.map((item, index) => { + console.log("item", item); + let fillColor = "blue"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + cs_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.4, + name: item.name, + zIndex: 99, + }); + map.addOverlay(cs_choose_arr.value[index]); + } + }); +}; +//添加未选中社区 +const addCsUnChoose = () => { + unChooseList.value.map((item, index) => { + let fillColor = "RGBA(125, 140, 154, 1)"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.5, + name: item.name, + zIndex: 99, + }); + map.addOverlay(cs_un_choose_arr.value[index]); + cs_un_choose_arr.value[index].addEventListener("click", () => { + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + title_choose.value = title_choose.value.slice(0, -4); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + title_choose.value = title_choose.value + `>${item.name}`; + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + addCsChoose(); + addCsUnChoose(); }); } }); @@ -1053,71 +1149,101 @@ const personTotal = ref([ id: 0, name: "总人口", value: "1724114", + ages: '总人口', + age: '1000' + }, { id: 1, - name: "1岁", + name: "0岁", value: "26737", + ages: '0岁', + age: '1000' }, { id: 2, - name: "2岁", + name: "1岁", value: "26737", + ages: '1岁', + age: '1000' }, { id: 3, - name: "3岁", + name: "2岁", value: "26737", + ages: '2岁', + age: '1000' }, { id: 4, - name: "4岁", + name: "3岁", value: "26737", + ages: '3岁', + age: '1000' }, + { id: 5, - name: "5岁", + name: "4岁", value: "26737", + ages: '4岁', + age: '1000' }, { id: 6, - name: "6岁", + name: "5岁", value: "26737", + ages: '5岁', + age: '1000' }, { id: 7, - name: "7岁", + name: "6岁", value: "26737", + ages: '6岁', + age: '1000' }, { id: 8, - name: "8岁", + name: "7岁", value: "26737", + ages: '7岁', + age: '1000' }, { id: 9, - name: "9岁", + name: "8岁", value: "26737", + ages: '8岁', + age: '1000' }, { id: 10, - name: "10岁", + name: "9岁", value: "26737", + ages: '9岁', + age: '1000' }, { id: 11, - name: "11岁", + name: "10岁", value: "26737", + ages: '10岁', + age: '1000' }, { id: 12, - name: "12岁", + name: "11岁", value: "26737", + ages: '11岁', + age: '1000' }, { id: 13, - name: "13岁", + name: "12岁", value: "26737", + ages: '12岁', + age: '1000' }, ]); @@ -1724,8 +1850,63 @@ const yaosuTotal = ref([ wz: true, }, ]); +const getData = async (i, e) => { + await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ''}`).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) => { + console.log(index); + personTotal.value.push({ + id: index + 1, + rksl: item.rksl, + age: item.age + '', + ages: item.age + '岁' + }) + }) + res.data.town.map((item) => { + mapTownCount.map((items) => { + if (item.town == items.name) { + items.number = item.rksl + } + }) + }) + } + }); + console.log(mapTownCount, 10001); + if (i) { + changeRs(i) + } +}; +const reset_font = () => { + let width = document.documentElement.clientWidth || document.body.clientWidth; + let height = + document.documentElement.clientHeight || document.body.clientHeight; + document.querySelector(".header_content").style.transformOrigin = "top left"; + document.querySelector(".header_content").style.transform = + "scale(" + width / 1920 + "," + height / 1080 + ")"; + if ( + document.querySelector(".left")) { + document.querySelector(".left").style.transformOrigin = "bottom left"; + document.querySelector(".left").style.transform = + "scale(" + width / 1920 + "," + height / 1080 + ")"; + document.querySelector(".right").style.transformOrigin = "bottom right"; + document.querySelector(".right").style.transform = + "scale(" + width / 1920 + "," + height / 1080 + ")"; + + } + +}; onMounted(() => { + reset_font() initMap(); + getData() });