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;
}
+