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 6f4aa22..e11dc4b 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -169,11 +169,14 @@
未居住
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
数据加载中...
+
+
@@ -215,6 +236,7 @@ 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/sxt_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"; @@ -232,10 +254,10 @@ import xcbg from "@/assets/images/map/xcbg.png"; import AED from "@/assets/images/map/AED.png"; import Dialog from "./dialog/dialogMapDp.vue"; import personDetail from "./person/index.vue"; -import { ElLoading } from "element-plus"; //--------定义参数------- //加载 -var loading; +const loadingss = ref(false); +const loadTable = ref(false); //是否打开人物详情 const openD = ref(true); const message = ref({}); @@ -673,7 +695,7 @@ const yaosuTotal = ref([ { id: 11, name: "摄像头", - img: j0, + img: j11, wz: false, url: "/api/ggfwyth/ysyzt/getJashsxt", }, @@ -821,6 +843,7 @@ const tableType = reactive({ { label: "", property: "sxt", + width: "50px", type: "slot", }, ], @@ -961,14 +984,10 @@ const buten = async (item) => { } } } else { - loading = ElLoading.service({ - lock: true, - text: "加载中...", - background: "rgba(0, 0, 0, 0)", - }); + loadingss.value = true; await getData(item.age); await getDatas(cfJd.value, item.age); - loading.close(); + loadingss.value = false; } }; //点击特殊标签(关键字存name) @@ -1005,12 +1024,9 @@ const buten2 = async (item) => { } } } else { - loading = ElLoading.service({ - lock: true, - text: "加载中...", - background: "rgba(0, 0, 0, 0)", - }); - getDataBqs(cfJd.value, cfCs.value, item.id); + loadingss.value = true; + await getDataBqs(cfJd.value, cfCs.value, item.id); + loadingss.value = false; } }; //人口 @@ -1106,7 +1122,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) { @@ -1227,8 +1243,12 @@ const getDatas = async (e, i, y = true) => { } else { if (y) { if (choose.value.person == "") { + console.log(1111111111); + addCs(); } else { + console.log(2222222222); + addCs2(); } } @@ -1434,8 +1454,10 @@ const getDataBq = async (jd, cs) => { }; const getDataBqs = async (jd, cs, bq) => { await getDataBqJD(bq); - await getDataBqs2(cfJd.value, cfCs.value, bq); - loading.close(); + if (cfJd.value == "") { + } else { + await getDataBqs2(cfJd.value, cfCs.value, bq); + } }; //特殊标签获取街道内部人数 const getDataBqs2 = async (jd, cs, bq) => { @@ -1580,6 +1602,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 = {}; @@ -1717,26 +1823,28 @@ 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, ""); } if ( choose.value.person == "残疾人" || @@ -1749,33 +1857,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 = () => { @@ -1783,8 +1875,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 ( @@ -1804,12 +1896,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 = () => { @@ -1892,6 +1986,7 @@ const person_detail = (age, tagId) => { index + 1 + (pagination.currentPage - 1) * pagination.pageSize; }); pagination.total = res.count; + } }); }; @@ -2288,11 +2383,7 @@ const addPolygonCounty = () => { // townName.value = item.name; if (item.name == cfJd.value) { } else { - loading = ElLoading.service({ - lock: true, - text: "加载中...", - background: "rgba(0, 0, 0, 0)", - }); + loadingss.value = true; clear(); xkzDk.length = 0; cfJd.value = item.name; @@ -2309,6 +2400,7 @@ const addPolygonCounty = () => { await getDataBq(cfJd.value, ""); if (choose.value.person == "") { await getDatas(cfJd.value, ""); + loadingss.value = false; } if ( choose.value.person == "残疾人" || @@ -2321,21 +2413,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") { await getDatas(cfJd.value, ""); + loadingss.value = false; } else { await getDatas(cfJd.value, choose.value.person); + loadingss.value = false; } } if (title_jd.value == item.name) { } else { title_jd.value = item.name; } - - loading.close(); } }); } @@ -2533,17 +2626,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", async () => { - loading = ElLoading.service({ - lock: true, - text: "数据加载中...", - background: "rgba(0, 0, 0, 0)", - }); + loadingss.value = true; cs_dd_arr.value = []; cfCs.value = item.name; title_cs.value = item.name; @@ -2592,7 +2681,7 @@ const addPolygonCountyCs = () => { await getDatas2(cfJd.value, choose.value.person, cfCs.value); - loading.close(); + loadingss.value = false; }); } }); @@ -2612,7 +2701,7 @@ const addCsChoose = () => { strokeWeight: 2, strokeOpacity: 0.8, fillColor: fillColor, - fillOpacity: 0.4, + fillOpacity: 0.3, name: item.name, zIndex: 99, }); @@ -2634,17 +2723,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", async () => { - loading = ElLoading.service({ - lock: true, - text: "数据加载中...", - background: "rgba(0, 0, 0, 0)", - }); + loadingss.value = true; cfCs.value = item.name; title_cs.value = cfCs.value; sfdd.value = true; @@ -2691,7 +2776,7 @@ const addCsUnChoose = () => { ) { await getDataBqs3(cfJd.value, cfCs.value, choose.value.person); } - loading.close(); + loadingss.value = false; }); } }); @@ -3008,14 +3093,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 +3522,179 @@ 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.la-dark { + color: #333; + } + + .loading > div { + display: inline-block; + float: none; + background-color: currentColor; + border: 0 solid currentColor; + } + + .loading { + width: 50px; + height: 50px; + } + + .loading > div { + position: absolute; + top: 50%; + left: 50%; + 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; + } + + .loading.la-sm { + width: 16px; + height: 16px; + } + + .loading.la-sm > div { + width: 4px; + height: 4px; + margin-top: -2px; + margin-left: -2px; + } + + .loading.la-2x { + width: 64px; + height: 64px; + } + + .loading.la-2x > div { + width: 16px; + height: 16px; + margin-top: -8px; + margin-left: -8px; + } + + .loading.la-3x { + width: 96px; + height: 96px; + } + + .loading.la-3x > div { + width: 24px; + height: 24px; + margin-top: -12px; + margin-left: -12px; + } + + @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 +3899,4 @@ onMounted(() => { z-index: 9998; } +