This commit is contained in:
duanxiaohai
parent
389044f703
commit
a932d5f902
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue