This commit is contained in:
duanxiaohai 2024-07-24 21:05:07 +08:00
parent 389044f703
commit a932d5f902
2 changed files with 228 additions and 61 deletions

View File

@ -9,7 +9,8 @@
</div>
</div>
</div>
<div style="width: 97.5%">
<div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table
border
:data="data.tableData"
@ -46,7 +47,8 @@
</div>
</div>
</div>
<div style="width: 97.5%">
<div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table
border
:data="data.pagedData"
@ -100,7 +102,8 @@
</span>
</div>
</div>
<div style="width: 97.5%">
<div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table
border
:data="data.tableData2"
@ -688,7 +691,7 @@ const tableHeaderColor = (arg) => {
letterSpacing: "1px",
fontSize: "15px",
height: "79px",
backgroundColor: "#455F8A",
backgroundColor: "rgba(23, 62, 115)",
color: "#fff",
border: "none",
textAlign: "center",
@ -901,6 +904,21 @@ onMounted(() => {
}
}
}
.backgroundVirtual {
position: absolute;
top: 0;
width: 100%;
height: 79px;
// background: linear-gradient(
// 270deg,
// rgba(0, 52, 131, 0.20) 0%,
// rgba(0, 32, 83, 0.30) 50%,
// rgba(0, 60, 131, 0.40) 100%
// );
box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
// backdrop-filter: blur(0px);
z-index: 99;
}
}
</style>
<style lang="scss" scoped>

View File

@ -11,8 +11,13 @@
<div class="title_line"></div>
</div>
<div class="content">
<div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
@click="getData(item.id, item.age), getDatas('溪口镇', item.age)" :key="index">
<div
class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="getData(item.id, item.age), getDatas('溪口镇', item.age)"
:key="index"
>
<div class="content_item_name">{{ item.ages }}</div>
<div class="content_item_value">{{ item.rksl }}</div>
</div>
@ -142,6 +147,9 @@ const cs_dd_arr = ref([]);
const cfjiedao = ref("");
const jrcs = ref(false);
const title_choose = ref("");
//
const sfdd = ref(false);
const xuanzhongCs = ref([]);
//
const colorList = [
{
@ -174,6 +182,8 @@ const colorList = [
];
//
const csh = () => {
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = "";
cfjiedao.value = "";
cs_un_choose_arr.value.forEach((item, index) => {
@ -194,6 +204,15 @@ const csh = () => {
cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[index]);
});
jdm_arr.value = [];
jdm_number_arr.value = [];
fwq_list_arr.value = [];
cs_qk_arr.value = [];
cs_name_arr.value = [];
cs_number_name_arr.value = [];
cs_choose_arr.value = [];
cs_un_choose_arr.value = [];
cs_dd_arr.value = [];
goMapCenter([119.178783, 29.034583], 11);
};
//
@ -290,72 +309,72 @@ const xkzDk = reactive([]);
const xkzCenter = reactive([
{
name: "溪口村",
center: [119.175728, 28.846981],
center: [119.2002156322304, 28.83866363229786],
number: "50",
},
{
name: "扁石村",
center: [119.158971, 28.856232],
center: [119.18143177857742, 28.858795781247416],
number: "50",
},
{
name: "大村",
center: [119.175309, 28.862776],
name: "大村",
center: [119.15947390269743, 28.856881986353613],
number: "50",
},
{
name: "枫林村",
center: [119.205442, 28.862981],
center: [119.2244601402551, 28.874916936765324],
number: "50",
},
{
name: "双港口村",
center: [119.211353, 28.872576],
center: [119.2112370831526, 28.873145674638753],
number: "50",
},
{
name: "灵上村",
center: [119.175805, 28.868218],
center: [119.18997199384468, 28.871170115155575],
number: "50",
},
{
name: "灵下村",
center: [119.168797, 28.871674],
center: [119.19215588030731, 28.890692457149832],
number: "50",
},
{
name: "下徐村",
center: [119.175667, 28.878136],
center: [119.13517530022014, 28.877528537725134],
number: "50",
},
{
name: "大沃口村",
center: [119.17661, 28.880171],
center: [119.17629950196843, 28.895987778606404],
number: "50",
},
{
name: "寺下村",
center: [119.1648, 28.90016],
center: [119.15115841066512, 28.913624042836545],
number: "50",
},
{
name: "大阳家村",
center: [119.176573, 28.898746],
center: [119.16442376733693, 28.89890581872806],
number: "50",
},
{
name: "石角村",
center: [119.125078, 28.912612],
center: [119.12327500764461, 28.911094612057784],
number: "50",
},
{
name: "红罗村",
center: [119.184318, 28.913218],
center: [119.18884846618927, 28.911017362099795],
number: "50",
},
{
name: "冷水村",
center: [119.193226, 28.93395],
center: [119.19787638778016, 28.934598743672993],
number: "50",
},
{
@ -371,13 +390,14 @@ const BMAP = (name) => {
// console.log(name, 666);
//
map.addEventListener("click", function (e) {
// console.log(e.latlng, name, 777);
console.log(`${e.latlng.lng},${e.latlng.lat} `, name, 777);
xkzCenter.forEach((item, index) => {
if (item.name == name) {
item.center = [e.latlng.lng, e.latlng.lat];
}
// console.log(item.center);
});
console.log(xkzCenter,888);
// console.log(xkzCenter,888);
// addCs();
//
if (currentMarker !== null) {
@ -485,7 +505,7 @@ const addPolygonCounty = () => {
}
});
console.log(jrcs.value);
if ((choose.value.person = 9999)) {
if ((choose.value.person = "")) {
addCs2();
} else {
addCs();
@ -493,6 +513,8 @@ const addPolygonCounty = () => {
goMapCenter(jdCenter, 13);
} else {
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = "";
cs_qk_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]);
@ -509,6 +531,15 @@ const addPolygonCounty = () => {
cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[index]);
});
jdm_arr.value = [];
jdm_number_arr.value = [];
fwq_list_arr.value = [];
cs_qk_arr.value = [];
cs_name_arr.value = [];
cs_number_name_arr.value = [];
cs_choose_arr.value = [];
cs_un_choose_arr.value = [];
cs_dd_arr.value = [];
}
}
@ -521,7 +552,6 @@ const addPolygonCounty = () => {
const addJd = () => {
mapTownCount.map((item, index) => {
goMapCenter([119.178783, 29.034581], 11);
createCustomOverlayJd(item, index);
});
};
@ -577,11 +607,13 @@ const addPolygonCountyCs = () => {
});
map.addOverlay(cs_qk_arr.value[index]);
cs_qk_arr.value[index].addEventListener("click", () => {
sfdd.value = true;
console.log(66666666, item.name);
console.log(111, xkzDk);
xkzCenter.forEach((a, b) => {
if (a.name == item.name) {
cs_dd_arr.value.push(a);
xuanzhongCs.value.push(a);
}
});
chooseCsList.value.length = 0;
@ -603,9 +635,16 @@ const addPolygonCountyCs = () => {
cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]);
});
cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index);
});
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);
});
}
console.log("chooseCsList.value", chooseCsList.value);
console.log("unChooseList.value", unChooseList.value);
addCsChoose();
@ -659,6 +698,7 @@ const addCsUnChoose = () => {
});
map.addOverlay(cs_un_choose_arr.value[index]);
cs_un_choose_arr.value[index].addEventListener("click", () => {
sfdd.value = true;
cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[index]);
});
@ -672,9 +712,11 @@ const addCsUnChoose = () => {
chooseCsList.value.length = 0;
unChooseList.value.length = 0;
cs_dd_arr.value = [];
xuanzhongCs.value = [];
xkzCenter.forEach((a, b) => {
if (a.name == item.name) {
cs_dd_arr.value.push(a);
xuanzhongCs.value.push(a);
}
});
xkzDk.forEach((itemm, indexx) => {
@ -688,9 +730,16 @@ const addCsUnChoose = () => {
cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]);
});
cs_dd_arr.value.map((item1, index1) => {
DGcreateCs(item1, index1);
});
if (choose.value.person == "") {
console.log(1111111111, cs_dd_arr.value);
cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index);
});
} else {
cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index);
});
}
addCsChoose();
addCsUnChoose();
});
@ -999,6 +1048,66 @@ const DGcreateCs = (polygon, indexx) => {
type: "customOverlay",
},
});
console.log(cs_dd_arr.value);
map.addOverlay(cs_dd_arr.value[indexx]);
};
const DGcreateCs2 = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
div.style.color = "#333";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.display = "flex";
div.style.justifyContent = "space-between";
div.style.alignItems = "center";
div.style.cursor = "pointer";
div.style.padding = "5px";
div.style.minWidth = "90px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
title.style.fontSize = "10px";
title.style.fontWeight = "600";
title.style.color = "#000000";
div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title));
content.appendChild(div);
var number = document.createElement("div");
number.style.fontSize = "10px";
number.style.fontWeight = "600";
number.style.color = "black";
div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div);
let img2 = document.createElement("img");
img2.style.width = "20px";
img2.style.height = "26px";
img2.src = this.properties.imgSrc2;
content.appendChild(div);
content.appendChild(img2);
return content;
}
cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetY: 0,
properties: {
title: polygon.name,
number: polygon.number,
imgSrc2: dwd,
type: "customOverlay",
},
});
map.addOverlay(cs_dd_arr.value[indexx]);
};
//
@ -1131,7 +1240,7 @@ const xuanran = () => {
// }
};
const choose = ref({
person: 9999,
person: "",
bq: 9999,
fwq: 9999,
yaosu: 9999,
@ -1139,17 +1248,17 @@ const choose = ref({
const changeRs = (id) => {
if (choose.value.person == id) {
// chooseArr.value = chooseArr.value.filter((item) => item !== "person");
choose.value.person = 9999;
choose.value.person = "";
jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]);
});
if (cs_number_name_arr.value?.length) {
cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]);
});
cs_number_name_arr.value.length = 0;
addCs();
}
// if (cs_number_name_arr.value?.length) {
// cs_number_name_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_number_name_arr.value[index]);
// });
// cs_number_name_arr.value.length = 0;
// addCs();
// }
addJd();
// if (chooseArr.value.includes("jd_number")) {
// removeAllPolygon("person");
@ -1173,13 +1282,13 @@ const changeRs = (id) => {
jdm_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_arr.value[index]);
});
if (cs_name_arr.value?.length) {
cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]);
});
cs_name_arr.value.length = 0;
addCs2();
}
// if (cs_name_arr.value?.length) {
// cs_name_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_name_arr.value[index]);
// });
// cs_name_arr.value.length = 0;
// addCs2();
// }
if (jdm_number_arr.value?.length) {
jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]);
@ -1193,7 +1302,7 @@ const changeRs = (id) => {
};
const changebq = (id) => {
choose.value.bq = id;
choose.value.person = 9999;
choose.value.person = "";
};
const changeFwq = (id, list, center) => {
if (choose.value.fwq == id) {
@ -1936,7 +2045,7 @@ const yaosuTotal = ref([
},
]);
const getData = async (i, e) => {
console.log('iiii',i);
console.log("iiii", i);
await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
@ -1973,18 +2082,59 @@ const getData = async (i, e) => {
}
};
const getDatas = async (e, i) => {
await http.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || null}`).then((res) => {
if (res.code == 200) {
res.data.committee.map((item) => {
xkzCenter.map((items) => {
if (item.committee == items.name) {
items.number = item.rksl;
}
await http
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => {
if (res.code == 200) {
res.data.committee.map((item) => {
xkzCenter.map((items) => {
if (item.committee == items.name) {
items.number = item.rksl;
}
});
});
});
console.log(xkzCenter);
}
});
console.log(xkzCenter);
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]);
});
console.log(cs_dd_arr.value, "cs_dd_arr.value");
if (title_choose.value == "") {
} else {
if (sfdd.value) {
console.log("yyyy");
if (choose.value.person == "") {
cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[index]);
});
cs_dd_arr.value = [...xuanzhongCs.value];
console.log("rrrrrrrrr", cs_dd_arr.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];
console.log("rrrrriiii", cs_dd_arr.value);
cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index);
});
}
} else {
console.log("yyyy3333333");
if (choose.value.person == "") {
addCs();
} else {
addCs2();
}
}
}
}
});
};
const reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
@ -2006,7 +2156,6 @@ onMounted(() => {
reset_font();
initMap();
getData();
getDatas('溪口镇', null)
});
</script>
<style lang="scss" scoped>