xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/view/sy_details.vue
View File

@ -9,7 +9,8 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width: 97.5%"> <div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table <el-table
border border
:data="data.tableData" :data="data.tableData"
@ -46,7 +47,8 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width: 97.5%"> <div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table <el-table
border border
:data="data.pagedData" :data="data.pagedData"
@ -100,7 +102,8 @@
</span> </span>
</div> </div>
</div> </div>
<div style="width: 97.5%"> <div style="width: 97.5%;position: relative">
<div class="backgroundVirtual"></div>
<el-table <el-table
border border
:data="data.tableData2" :data="data.tableData2"
@ -688,7 +691,7 @@ const tableHeaderColor = (arg) => {
letterSpacing: "1px", letterSpacing: "1px",
fontSize: "15px", fontSize: "15px",
height: "79px", height: "79px",
backgroundColor: "#455F8A", backgroundColor: "rgba(23, 62, 115)",
color: "#fff", color: "#fff",
border: "none", border: "none",
textAlign: "center", 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>
<style lang="scss" scoped> <style lang="scss" scoped>

235
src/view/sy_map.vue
View File

@ -11,8 +11,13 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
<div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }" <div
@click="getData(item.id, item.age), getDatas('溪口镇', item.age)" :key="index"> 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_name">{{ item.ages }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -142,6 +147,9 @@ const cs_dd_arr = ref([]);
const cfjiedao = ref(""); const cfjiedao = ref("");
const jrcs = ref(false); const jrcs = ref(false);
const title_choose = ref(""); const title_choose = ref("");
//是否单点社区
const sfdd = ref(false);
const xuanzhongCs = ref([]);
//村社颜色列表 //村社颜色列表
const colorList = [ const colorList = [
{ {
@ -174,6 +182,8 @@ const colorList = [
]; ];
//点击龙游县初始化 //点击龙游县初始化
const csh = () => { const csh = () => {
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = ""; title_choose.value = "";
cfjiedao.value = ""; cfjiedao.value = "";
cs_un_choose_arr.value.forEach((item, index) => { cs_un_choose_arr.value.forEach((item, index) => {
@ -194,6 +204,15 @@ const csh = () => {
cs_dd_arr.value.forEach((item, index) => { cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[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); goMapCenter([119.178783, 29.034583], 11);
}; };
//选中社区 //选中社区
@ -290,72 +309,72 @@ const xkzDk = reactive([]);
const xkzCenter = reactive([ const xkzCenter = reactive([
{ {
name: "溪口村", name: "溪口村",
center: [119.175728, 28.846981], center: [119.2002156322304, 28.83866363229786],
number: "50", number: "50",
}, },
{ {
name: "扁石村", name: "扁石村",
center: [119.158971, 28.856232], center: [119.18143177857742, 28.858795781247416],
number: "50", number: "50",
}, },
{ {
name: "大垅村", name: "大垄村",
center: [119.175309, 28.862776], center: [119.15947390269743, 28.856881986353613],
number: "50", number: "50",
}, },
{ {
name: "枫林村", name: "枫林村",
center: [119.205442, 28.862981], center: [119.2244601402551, 28.874916936765324],
number: "50", number: "50",
}, },
{ {
name: "双港口村", name: "双港口村",
center: [119.211353, 28.872576], center: [119.2112370831526, 28.873145674638753],
number: "50", number: "50",
}, },
{ {
name: "灵上村", name: "灵上村",
center: [119.175805, 28.868218], center: [119.18997199384468, 28.871170115155575],
number: "50", number: "50",
}, },
{ {
name: "灵下村", name: "灵下村",
center: [119.168797, 28.871674], center: [119.19215588030731, 28.890692457149832],
number: "50", number: "50",
}, },
{ {
name: "下徐村", name: "下徐村",
center: [119.175667, 28.878136], center: [119.13517530022014, 28.877528537725134],
number: "50", number: "50",
}, },
{ {
name: "大沃口村", name: "大沃口村",
center: [119.17661, 28.880171], center: [119.17629950196843, 28.895987778606404],
number: "50", number: "50",
}, },
{ {
name: "寺下村", name: "寺下村",
center: [119.1648, 28.90016], center: [119.15115841066512, 28.913624042836545],
number: "50", number: "50",
}, },
{ {
name: "大阳家村", name: "大阳家村",
center: [119.176573, 28.898746], center: [119.16442376733693, 28.89890581872806],
number: "50", number: "50",
}, },
{ {
name: "石角村", name: "石角村",
center: [119.125078, 28.912612], center: [119.12327500764461, 28.911094612057784],
number: "50", number: "50",
}, },
{ {
name: "红罗村", name: "红罗村",
center: [119.184318, 28.913218], center: [119.18884846618927, 28.911017362099795],
number: "50", number: "50",
}, },
{ {
name: "冷水村", name: "冷水村",
center: [119.193226, 28.93395], center: [119.19787638778016, 28.934598743672993],
number: "50", number: "50",
}, },
{ {
@ -371,13 +390,14 @@ const BMAP = (name) => {
// console.log(name, 666); // console.log(name, 666);
// 添加鼠标点击事件监听器 // 添加鼠标点击事件监听器
map.addEventListener("click", function (e) { 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) => { xkzCenter.forEach((item, index) => {
if (item.name == name) { if (item.name == name) {
item.center = [e.latlng.lng, e.latlng.lat]; item.center = [e.latlng.lng, e.latlng.lat];
} }
// console.log(item.center);
}); });
console.log(xkzCenter,888); // console.log(xkzCenter,888);
// addCs(); // addCs();
// 检查并移除当前标记 // 检查并移除当前标记
if (currentMarker !== null) { if (currentMarker !== null) {
@ -485,7 +505,7 @@ const addPolygonCounty = () => {
} }
}); });
console.log(jrcs.value); console.log(jrcs.value);
if ((choose.value.person = 9999)) { if ((choose.value.person = "")) {
addCs2(); addCs2();
} else { } else {
addCs(); addCs();
@ -493,6 +513,8 @@ const addPolygonCounty = () => {
goMapCenter(jdCenter, 13); goMapCenter(jdCenter, 13);
} else { } else {
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = ""; title_choose.value = "";
cs_qk_arr.value.forEach((item, index) => { cs_qk_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]); map.removeOverlay(cs_qk_arr.value[index]);
@ -509,6 +531,15 @@ const addPolygonCounty = () => {
cs_dd_arr.value.forEach((item, index) => { cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[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 = () => { const addJd = () => {
mapTownCount.map((item, index) => { mapTownCount.map((item, index) => {
goMapCenter([119.178783, 29.034581], 11);
createCustomOverlayJd(item, index); createCustomOverlayJd(item, index);
}); });
}; };
@ -577,11 +607,13 @@ const addPolygonCountyCs = () => {
}); });
map.addOverlay(cs_qk_arr.value[index]); map.addOverlay(cs_qk_arr.value[index]);
cs_qk_arr.value[index].addEventListener("click", () => { cs_qk_arr.value[index].addEventListener("click", () => {
sfdd.value = true;
console.log(66666666, item.name); console.log(66666666, item.name);
console.log(111, xkzDk); console.log(111, xkzDk);
xkzCenter.forEach((a, b) => { xkzCenter.forEach((a, b) => {
if (a.name == item.name) { if (a.name == item.name) {
cs_dd_arr.value.push(a); cs_dd_arr.value.push(a);
xuanzhongCs.value.push(a);
} }
}); });
chooseCsList.value.length = 0; chooseCsList.value.length = 0;
@ -603,9 +635,16 @@ const addPolygonCountyCs = () => {
cs_number_name_arr.value.forEach((item, index) => { cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]); map.removeOverlay(cs_number_name_arr.value[index]);
}); });
if (choose.value.person == "") {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index); DGcreateCs(item, index);
}); });
} else {
cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index);
});
}
console.log("chooseCsList.value", chooseCsList.value); console.log("chooseCsList.value", chooseCsList.value);
console.log("unChooseList.value", unChooseList.value); console.log("unChooseList.value", unChooseList.value);
addCsChoose(); addCsChoose();
@ -659,6 +698,7 @@ const addCsUnChoose = () => {
}); });
map.addOverlay(cs_un_choose_arr.value[index]); map.addOverlay(cs_un_choose_arr.value[index]);
cs_un_choose_arr.value[index].addEventListener("click", () => { cs_un_choose_arr.value[index].addEventListener("click", () => {
sfdd.value = true;
cs_dd_arr.value.forEach((item, index) => { cs_dd_arr.value.forEach((item, index) => {
map.removeOverlay(cs_dd_arr.value[index]); map.removeOverlay(cs_dd_arr.value[index]);
}); });
@ -672,9 +712,11 @@ const addCsUnChoose = () => {
chooseCsList.value.length = 0; chooseCsList.value.length = 0;
unChooseList.value.length = 0; unChooseList.value.length = 0;
cs_dd_arr.value = []; cs_dd_arr.value = [];
xuanzhongCs.value = [];
xkzCenter.forEach((a, b) => { xkzCenter.forEach((a, b) => {
if (a.name == item.name) { if (a.name == item.name) {
cs_dd_arr.value.push(a); cs_dd_arr.value.push(a);
xuanzhongCs.value.push(a);
} }
}); });
xkzDk.forEach((itemm, indexx) => { xkzDk.forEach((itemm, indexx) => {
@ -688,9 +730,16 @@ const addCsUnChoose = () => {
cs_un_choose_arr.value.forEach((item, index) => { cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]); map.removeOverlay(cs_qk_arr.value[index]);
}); });
cs_dd_arr.value.map((item1, index1) => { if (choose.value.person == "") {
DGcreateCs(item1, index1); 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(); addCsChoose();
addCsUnChoose(); addCsUnChoose();
}); });
@ -999,6 +1048,66 @@ const DGcreateCs = (polygon, indexx) => {
type: "customOverlay", 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]); map.addOverlay(cs_dd_arr.value[indexx]);
}; };
//创建公共服务圈 //创建公共服务圈
@ -1131,7 +1240,7 @@ const xuanran = () => {
// } // }
}; };
const choose = ref({ const choose = ref({
person: 9999, person: "",
bq: 9999, bq: 9999,
fwq: 9999, fwq: 9999,
yaosu: 9999, yaosu: 9999,
@ -1139,17 +1248,17 @@ const choose = ref({
const changeRs = (id) => { const changeRs = (id) => {
if (choose.value.person == id) { if (choose.value.person == id) {
// chooseArr.value = chooseArr.value.filter((item) => item !== "person"); // chooseArr.value = chooseArr.value.filter((item) => item !== "person");
choose.value.person = 9999; choose.value.person = "";
jdm_number_arr.value.forEach((item, index) => { jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]); map.removeOverlay(jdm_number_arr.value[index]);
}); });
if (cs_number_name_arr.value?.length) { // if (cs_number_name_arr.value?.length) {
cs_number_name_arr.value.forEach((item, index) => { // cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]); // map.removeOverlay(cs_number_name_arr.value[index]);
}); // });
cs_number_name_arr.value.length = 0; // cs_number_name_arr.value.length = 0;
addCs(); // addCs();
} // }
addJd(); addJd();
// if (chooseArr.value.includes("jd_number")) { // if (chooseArr.value.includes("jd_number")) {
// removeAllPolygon("person"); // removeAllPolygon("person");
@ -1173,13 +1282,13 @@ const changeRs = (id) => {
jdm_arr.value.forEach((item, index) => { jdm_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_arr.value[index]); map.removeOverlay(jdm_arr.value[index]);
}); });
if (cs_name_arr.value?.length) { // if (cs_name_arr.value?.length) {
cs_name_arr.value.forEach((item, index) => { // cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]); // map.removeOverlay(cs_name_arr.value[index]);
}); // });
cs_name_arr.value.length = 0; // cs_name_arr.value.length = 0;
addCs2(); // addCs2();
} // }
if (jdm_number_arr.value?.length) { if (jdm_number_arr.value?.length) {
jdm_number_arr.value.forEach((item, index) => { jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]); map.removeOverlay(jdm_number_arr.value[index]);
@ -1193,7 +1302,7 @@ const changeRs = (id) => {
}; };
const changebq = (id) => { const changebq = (id) => {
choose.value.bq = id; choose.value.bq = id;
choose.value.person = 9999; choose.value.person = "";
}; };
const changeFwq = (id, list, center) => { const changeFwq = (id, list, center) => {
if (choose.value.fwq == id) { if (choose.value.fwq == id) {
@ -1936,7 +2045,7 @@ const yaosuTotal = ref([
}, },
]); ]);
const getData = async (i, e) => { const getData = async (i, e) => {
console.log('iiii',i); console.log("iiii", i);
await http await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`) .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => { .then((res) => {
@ -1973,7 +2082,9 @@ const getData = async (i, e) => {
} }
}; };
const getDatas = async (e, i) => { const getDatas = async (e, i) => {
await http.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || null}`).then((res) => { await http
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => {
if (res.code == 200) { if (res.code == 200) {
res.data.committee.map((item) => { res.data.committee.map((item) => {
xkzCenter.map((items) => { xkzCenter.map((items) => {
@ -1983,6 +2094,45 @@ const getDatas = async (e, i) => {
}); });
}); });
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();
}
}
}
} }
}); });
}; };
@ -2006,7 +2156,6 @@ onMounted(() => {
reset_font(); reset_font();
initMap(); initMap();
getData(); getData();
getDatas('溪口镇', null)
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>