diff --git a/src/assets/images/map/j11.png b/src/assets/images/map/j11.png new file mode 100644 index 0000000..2863831 Binary files /dev/null and b/src/assets/images/map/j11.png differ diff --git a/src/assets/images/map/j11_map.png b/src/assets/images/map/j11_map.png new file mode 100644 index 0000000..8af80d0 Binary files /dev/null and b/src/assets/images/map/j11_map.png differ diff --git a/src/assets/images/sxt_detail.png b/src/assets/images/sxt_detail.png new file mode 100644 index 0000000..a1dedf1 Binary files /dev/null and b/src/assets/images/sxt_detail.png differ diff --git a/src/assets/images/sxt_map.png b/src/assets/images/sxt_map.png new file mode 100644 index 0000000..a022330 Binary files /dev/null and b/src/assets/images/sxt_map.png differ diff --git a/src/view/dialog/dialogMapDp.vue b/src/view/dialog/dialogMapDp.vue index e351c81..3df0c0d 100644 --- a/src/view/dialog/dialogMapDp.vue +++ b/src/view/dialog/dialogMapDp.vue @@ -41,6 +41,7 @@
{ + return {}; + }, + }, + loadTable: { + type: Boolean, + default: () => { + return false; + }, }, }); -const emit = defineEmits(["close", "handle"]); +const emit = defineEmits(["close", "handle", "loadTables"]); const handleRowClick = (row, column, event) => { // row 是当前行的数据 - console.log(row); - emit("openMessage", {nm: row.nm, identNo: row.identNo}); + emit("openMessage", { nm: row.nm, identNo: row.identNo }); // router.push({ // path: `/home/index/person`, // query: {nm: row.nm, identNo: row.identNo,type:'map'}, @@ -158,6 +166,7 @@ const handleRowClick = (row, column, event) => { }; // 详情弹框 const dialogShow = ref(); +const loadT = ref(); const data = reactive({ title: "", columns: [], @@ -173,7 +182,7 @@ watch( () => props.dialogShow, (newVal, oldVal) => { dialogShow.value = newVal; - // data.tableData = props.tableData; + loadT.value = newVal; data.columns = props.columns; } ); @@ -181,6 +190,7 @@ watch( () => props.tableData, (newVal, oldVal) => { data.tableData = props.tableData; + loadT.value = false; tableKey.value = Math.random(); } ); @@ -319,10 +329,10 @@ const handle = (current) => { .custom-table-font { font-size: 10px; } -:deep(.el-table:not(.el-table--border) .el-table__cell){ +:deep(.el-table:not(.el-table--border) .el-table__cell) { padding: 3px 0px; } -:deep(.el-pagination ){ +:deep(.el-pagination) { transform: scale(0.8); } diff --git a/src/view/person/index.vue b/src/view/person/index.vue index cf0e93e..c9ab514 100644 --- a/src/view/person/index.vue +++ b/src/view/person/index.vue @@ -98,10 +98,8 @@

返回

-
- - - +
+
@@ -1206,9 +1204,13 @@ onMounted(() => { } .videoCamera { position: absolute; - top: 8px; + top: -10px; right: 30px; cursor: pointer; + img{ + width: 46px; + height: 46px; + } } .widu { min-width: 40px !important; diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 68670a5..7b035e7 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -169,11 +169,14 @@
未居住
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
数据加载中...
+
+
@@ -215,6 +236,8 @@ import j7 from "@/assets/images/map/j7.png"; import j8 from "@/assets/images/map/j8.png"; import j9 from "@/assets/images/map/j9.png"; import j10 from "@/assets/images/map/j10.png"; +import j11 from "@/assets/images/map/j11.png"; +import j11_map from "@/assets/images/map/j11_map.png"; import dwd from "@/assets/images/map/dwd.png"; import fwqbg1 from "@/assets/images/map/qlv.png"; import fwqbg2 from "@/assets/images/map/qlan.png"; @@ -233,6 +256,9 @@ import AED from "@/assets/images/map/AED.png"; import Dialog from "./dialog/dialogMapDp.vue"; import personDetail from "./person/index.vue"; //--------定义参数------- +//加载 +const loadingss = ref(false); +const loadTable = ref(false); //是否打开人物详情 const openD = ref(true); const message = ref({}); @@ -670,7 +696,8 @@ const yaosuTotal = ref([ { id: 11, name: "摄像头", - img: j0, + img: j11, + img_map:j11_map, wz: false, url: "/api/ggfwyth/ysyzt/getJashsxt", }, @@ -818,6 +845,7 @@ const tableType = reactive({ { label: "", property: "sxt", + width: "50px", type: "slot", }, ], @@ -847,7 +875,7 @@ const initMap = () => { //点击龙游县初始化 const csh = () => { clear(); - xkzDk.length = 0; + map.removeEventListener("click", markera); if (currentMarker !== null) { map.removeOverlay(currentMarker); @@ -890,6 +918,8 @@ const clear = () => { cs_choose_arr.value = []; cs_un_choose_arr.value = []; cs_dd_arr.value = []; + xkzCenter.length = 0; + xkzDk.length = 0; }; //定义地图中点 const goMapCenter = (point, zoom) => { @@ -958,8 +988,10 @@ const buten = async (item) => { } } } else { - getData(item.age); - getDatas(cfJd.value, item.age); + loadingss.value = true; + await getData(item.age); + await getDatas(cfJd.value, item.age); + loadingss.value = false; } }; //点击特殊标签(关键字存name) @@ -996,7 +1028,9 @@ const buten2 = async (item) => { } } } else { - getDataBqs(cfJd.value, cfCs.value, item.id); + loadingss.value = true; + await getDataBqs(cfJd.value, cfCs.value, item.id); + loadingss.value = false; } }; //人口 @@ -1092,7 +1126,7 @@ const getDatas = async (e, i, y = true) => { if (i == "9999") { i = ""; } - await http + http .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) .then((res) => { if (res.code == 200) { @@ -1213,8 +1247,12 @@ const getDatas = async (e, i, y = true) => { } else { if (y) { if (choose.value.person == "") { + console.log(1111111111); + addCs(); } else { + console.log(2222222222); + addCs2(); } } @@ -1420,7 +1458,10 @@ const getDataBq = async (jd, cs) => { }; const getDataBqs = async (jd, cs, bq) => { await getDataBqJD(bq); - getDataBqs2(cfJd.value, cfCs.value, bq); + if (cfJd.value == "") { + } else { + await getDataBqs2(cfJd.value, cfCs.value, bq); + } }; //特殊标签获取街道内部人数 const getDataBqs2 = async (jd, cs, bq) => { @@ -1565,6 +1606,90 @@ const getDataBqs3 = async (jd, cs, bq) => { } }); }; +//点击地图区块进入社区取消await的影响 +const getDataBqs4 = async (jd, cs, bq) => { + //f用来判断执不执行changeRs2 + let data = {}; + let vv = 0; + let tagIdBq; + tsbq_id_total.value.forEach((item, index) => { + if (bq == item.name) { + tagIdBq = item.tagId; + } + }); + if (cs == "" && jd == "") { + data = { + tagId: tagIdBq, + }; + vv = 1; + } else if (cs == "") { + data = { + town: jd, + tagId: tagIdBq, + }; + vv = 2; + } else { + data = { + town: jd, + tagId: tagIdBq, + committee: cs, + }; + vv = 3; + } + http.get(`/api/ggfwyth/ysyzt/getBqRsByTownAndCommittee`, data).then((res) => { + if (res.code == 200) { + if (cfJd.value != "") { + xkzCenter.map((item) => { + item.numbers = 0; + res.data.map((items) => { + if (items.committee == item.name) { + item.numbers = items.rs; + } + }); + }); + } + + 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]); + }); + if (title_jd.value == "") { + } else { + if (sfdd.value) { + if (choose.value.person == "") { + 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 { + 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) => { + DGcreateCs2(item, index); + }); + } + } else { + if (choose.value.person == "") { + addCs(); + } else { + addCs2(); + } + } + } + loadingss.value = false; + } + }); +}; //特殊标签单独获取各个街道人数 const getDataBqJD = async (bq) => { let data = {}; @@ -1641,23 +1766,26 @@ const changeys = (name) => { yaosuList.value.push(name); let url; let img; + let img_map; yaosuTotal.value.forEach((item, index) => { if (item.name == name) { url = item.url; img = item.img; + img_map=item.img_map; } }); if (name == "摄像头") { - getZyys(url, name, img); + getZyys(url, name, img,img_map); } } }; -const getZyys = (url, name, img) => { +const getZyys = (url, name, img,img_map) => { http.get(url).then((res) => { if (res.code == 200) { yaosuIcon.value[name].sj = res.data; yaosuIcon.value[name].sj.forEach((item, index) => { item.img = img; + item.img_map = img_map; item.overlay = null; item.center = []; item.center.push(Number(item.jd)); @@ -1693,7 +1821,7 @@ const createZyys = (polygon, indexx, name) => { opacity: 0.5, offsetY: -10, properties: { - imgSrc2: polygon.img, + imgSrc2: polygon.img_map, type: "customOverlay", }, } @@ -1702,26 +1830,29 @@ const createZyys = (polygon, indexx, name) => { }; //----------资源要素------------ //点击街道，回到街道 -const to_jd = (item_name) => { +const to_jd = async (item_name) => { + loadingss.value = true; clear(); title_jd.value = item_name; map.removeEventListener("click", markera); if (currentMarker !== null) { map.removeOverlay(currentMarker); } - - // townName.value = item_name; - // if (item_name == cfJd.value) { - // } else { - // console.log(111, choose.value.person); cfJd.value = item_name; let jdCenter = []; BMAP(); loadCs(item_name); addPolygonCountyCs(); + mapTownCount.map((itemm) => { + if (itemm.name == item_name) { + jdCenter = itemm.center; + } + }); + goMapCenter(jdCenter, 13); getDataBq(cfJd.value, ""); if (choose.value.person == "") { - getDatas(cfJd.value, ""); + await getDatas(cfJd.value, ""); + loadingss.value = false; } if ( choose.value.person == "残疾人" || @@ -1734,33 +1865,17 @@ const to_jd = (item_name) => { choose.value.person == "孤儿" || choose.value.person == "特困" ) { - getDataBqs2(cfJd.value, cfCs.value, choose.value.person); - getDatas(cfJd.value, "", false); + await getDatas(cfJd.value, "", false); + getDataBqs4(cfJd.value, cfCs.value, choose.value.person); } else if (choose.value.person != "") { if (choose.value.person == "9999") { - getDatas(cfJd.value, ""); + await getDatas(cfJd.value, ""); + loadingss.value = false; } else { - // if (choose.value.person == 1) { - // getDatas(cfJd.value, "0"); //0岁传字符串 - // } else { - // getDatas(cfJd.value, choose.value.person); - // } - getDatas(cfJd.value, choose.value.person); + await getDatas(cfJd.value, choose.value.person); + loadingss.value = false; } } - // if (title_jd.value == item.name) { - // } else { - // title_jd.value = item.name; - // } - - mapTownCount.map((itemm) => { - if (itemm.name == item_name) { - jdCenter = itemm.center; - } - }); - goMapCenter(jdCenter, 13); - - // } }; //详情 const open_detail = () => { @@ -1768,8 +1883,8 @@ const open_detail = () => { let tagId; if (choose.value.person == "9999") { age = ""; - person_detail(age); dialogShow.value = true; + person_detail(age); } else if (choose.value.person == "6666") { age = ""; } else if ( @@ -1789,12 +1904,14 @@ const open_detail = () => { tagId = item.tagId; } }); - person_detail(age, tagId); dialogShow.value = true; + + person_detail(age, tagId); } else { + dialogShow.value = true; + age = choose.value.person; person_detail(age); - dialogShow.value = true; } }; const close = () => { @@ -2269,21 +2386,28 @@ const addPolygonCounty = () => { }); map.addOverlay(polygon); - polygon.addEventListener("click", () => { + polygon.addEventListener("click", async () => { // townName.value = item.name; if (item.name == cfJd.value) { } else { + loadingss.value = true; clear(); xkzDk.length = 0; cfJd.value = item.name; let jdCenter = []; - // if (item.name == "溪口镇") { BMAP(); loadCs(item.name); addPolygonCountyCs(); - getDataBq(cfJd.value, ""); + mapTownCount.map((itemm) => { + if (itemm.name == item.name) { + jdCenter = itemm.center; + } + }); + goMapCenter(jdCenter, 13); + await getDataBq(cfJd.value, ""); if (choose.value.person == "") { - getDatas(cfJd.value, ""); + await getDatas(cfJd.value, ""); + loadingss.value = false; } if ( choose.value.person == "残疾人" || @@ -2296,38 +2420,22 @@ const addPolygonCounty = () => { choose.value.person == "孤儿" || choose.value.person == "特困" ) { - getDataBqs2(cfJd.value, cfCs.value, choose.value.person); - getDatas(cfJd.value, "", false); + await getDatas(cfJd.value, "", false); + //使用await把loading放外面，没效果，所以把loading放接口里面 + getDataBqs4(cfJd.value, cfCs.value, choose.value.person); } else if (choose.value.person != "") { if (choose.value.person == "9999") { - getDatas(cfJd.value, ""); + await getDatas(cfJd.value, ""); + loadingss.value = false; } else { - getDatas(cfJd.value, choose.value.person); + await getDatas(cfJd.value, choose.value.person); + loadingss.value = false; } } if (title_jd.value == item.name) { } else { title_jd.value = item.name; } - - mapTownCount.map((itemm) => { - if (itemm.name == item.name) { - jdCenter = itemm.center; - } - }); - goMapCenter(jdCenter, 13); - // } - // else { - // loadCs(item.name); - // addPolygonCountyCs(); - // // map.removeEventListener("click", markera); - // // if (currentMarker !== null) { - // // map.removeOverlay(currentMarker); - // // } - // // clear(); - // // getData(); - // // getDataBq(); - // } } }); } @@ -2479,6 +2587,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => { //加载村社信息 const loadCs = (name) => { xkzCenter.length = 0; + xkzDk.length = 0; cssj.forEach((item, index) => { if (item.name == name) { csqk.value = item.sj; @@ -2525,13 +2634,13 @@ const addPolygonCountyCs = () => { strokeWeight: 2, strokeOpacity: 0.8, fillColor: fillColor, - fillOpacity: 0.5, + fillOpacity: 0.3, name: item.name, zIndex: 99, }); map.addOverlay(cs_qk_arr.value[index]); - cs_qk_arr.value[index].addEventListener("click", () => { - // console.log("名字", item.name); + cs_qk_arr.value[index].addEventListener("click", async () => { + loadingss.value = true; cs_dd_arr.value = []; cfCs.value = item.name; title_cs.value = item.name; @@ -2551,6 +2660,8 @@ const addPolygonCountyCs = () => { unChooseList.value.push(itemm); } }); + addCsChoose(); + addCsUnChoose(); cs_qk_arr.value.forEach((item, index) => { map.removeOverlay(cs_qk_arr.value[index]); }); @@ -2560,7 +2671,7 @@ const addPolygonCountyCs = () => { cs_number_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_number_name_arr.value[index]); }); - getDataBq(cfJd.value, cfCs.value); + await getDataBq(cfJd.value, cfCs.value); if ( choose.value.person == "残疾人" || choose.value.person == "低边" || @@ -2572,29 +2683,13 @@ const addPolygonCountyCs = () => { choose.value.person == "孤儿" || choose.value.person == "特困" ) { - getDataBqs3(cfJd.value, cfCs.value, choose.value.person); + await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } else { - // getDataBqs(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); - addCsChoose(); - addCsUnChoose(); - // 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); - // }); - // } + + await getDatas2(cfJd.value, choose.value.person, cfCs.value); + + loadingss.value = false; }); } }); @@ -2614,7 +2709,7 @@ const addCsChoose = () => { strokeWeight: 2, strokeOpacity: 0.8, fillColor: fillColor, - fillOpacity: 0.4, + fillOpacity: 0.3, name: item.name, zIndex: 99, }); @@ -2636,12 +2731,13 @@ const addCsUnChoose = () => { strokeWeight: 2, strokeOpacity: 0.8, fillColor: fillColor, - fillOpacity: 0.5, + fillOpacity: 0.3, 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[index].addEventListener("click", async () => { + loadingss.value = true; cfCs.value = item.name; title_cs.value = cfCs.value; sfdd.value = true; @@ -2671,11 +2767,10 @@ const addCsUnChoose = () => { unChooseList.value.push(itemm); } }); - - getDataBq(cfJd.value, cfCs.value); - - getDatas2(cfJd.value, choose.value.person, cfCs.value); - + addCsChoose(); + addCsUnChoose(); + await getDataBq(cfJd.value, cfCs.value); + await getDatas2(cfJd.value, choose.value.person, cfCs.value); if ( choose.value.person == "残疾人" || choose.value.person == "低边" || @@ -2687,11 +2782,9 @@ const addCsUnChoose = () => { choose.value.person == "孤儿" || choose.value.person == "特困" ) { - getDataBqs3(cfJd.value, cfCs.value, choose.value.person); + await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } - - addCsChoose(); - addCsUnChoose(); + loadingss.value = false; }); } }); @@ -3008,14 +3101,16 @@ const reset_font2 = () => { document.querySelector(".detail").style.transform = "scale(" + width / 1920 + "," + height / 1080 + ")"; }; -onMounted(() => { +onMounted(async () => { // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d"); + loadingss.value = true; reset_font(); initMap(); getData(); - getDataBq(); BMAP(); getFwq(); + await getDataBq(); + loadingss.value = false; }); @@ -3435,6 +3530,138 @@ onMounted(() => { } } } +//加载动画 +.loadBody { + width: 100%; + height: 100%; + z-index: 999; + background: rgba(0, 0, 0, 0); + position: absolute; + .load { + box-sizing: border-box; + position: absolute; + left: 50%; + top: 50%; + width: 120px; + height: 120px; + background: rgba(0, 0, 0, 0.3); + border-radius: 8px; + backdrop-filter: blur(2px); + transform: translate(-50%, -50%); + z-index: 99999; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + .icon { + //加载 + .loading, + .loading > div { + position: relative; + box-sizing: border-box; + } + + .loading { + display: block; + font-size: 0; + color: #ffffff; + } + + .loading > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; + } + + .loading { + width: 50px; + height: 50px; + } + + .loading > div { + position: absolute; + width: 8px; + height: 8px; + margin-top: -4px; + margin-left: -4px; + border-radius: 100%; + animation: ball-spin-clockwise-fade 1s infinite linear; + } + + .loading > div:nth-child(1) { + top: 5%; + left: 50%; + animation-delay: -0.875s; + } + + .loading > div:nth-child(2) { + top: 18.1801948466%; + left: 81.8198051534%; + animation-delay: -0.75s; + } + + .loading > div:nth-child(3) { + top: 50%; + left: 95%; + animation-delay: -0.625s; + } + + .loading > div:nth-child(4) { + top: 81.8198051534%; + left: 81.8198051534%; + animation-delay: -0.5s; + } + + .loading > div:nth-child(5) { + top: 94.9999999966%; + left: 50.0000000005%; + animation-delay: -0.375s; + } + + .loading > div:nth-child(6) { + top: 81.8198046966%; + left: 18.1801949248%; + animation-delay: -0.25s; + } + + .loading > div:nth-child(7) { + top: 49.9999750815%; + left: 5.0000051215%; + animation-delay: -0.125s; + } + + .loading > div:nth-child(8) { + top: 18.179464974%; + left: 18.1803700518%; + animation-delay: 0s; + } + + + @keyframes ball-spin-clockwise-fade { + 50% { + opacity: 0.25; + transform: scale(0.5); + } + + 100% { + opacity: 1; + transform: scale(1); + } + } + } + .text { + margin-top: 10px; + font-family: PingFangSC, PingFang SC; + font-weight: 600; + font-size: 12px; + color: #ffffff; + line-height: 22px; + letter-spacing: 2px; + text-align: center; + } + } +} .title { background-image: url(@/assets/images/map/map_title_bg.png); @@ -3639,3 +3866,4 @@ onMounted(() => { z-index: 9998; } +