This commit is contained in:
姚宇浩 2024-07-30 13:36:02 +08:00
parent 5fb88a2d2f
commit 8f92fe77cf
1 changed files with 206 additions and 202 deletions

View File

@ -739,204 +739,10 @@ const jbfwqTotal = ref([
],
},
]); //
//
const changeFwq = async (id, name, names) => {
if (choose.value.fwq == id) {
choose.value.fwq = null;
csh(); //
addPolygonCounty(); //
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); //
});
fwq_list_arr.value = [];
map.removeOverlay(circle); //
circle = null;
// drawACircle("hide"); //
} else {
clear()
await getServiceCircle(names, name);
if (fwqList.value.length !== 0) {
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); //
});
map.removeOverlay(circle); //
circle = null;
fwq_list_arr.value = [];
choose.value.fwq = id;
map.clearOverlays(); //
choose.value.person = "";
addggfwq(); //
setTimeout(() => {
goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //
}, 500);
} else {
ElMessage.warning("无数据");
}
}
};
//
const getServiceCircle = async (communityName, townName) => {
try {
const response = await http.get(
`/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`
);
if (response.code === 200) {
updateFwqList(response.data, townName, communityName);
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
//
const addggfwq = () => {
if (fwqList.value.length !== 0) {
data.fwqCoordinates1 = [];
data.fwqCoordinates2 = [];
fwqList.value.map((item, index) => {
data.fwqCoordinates1.push(item.point[0]);
data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index);
});
function calculateAverage(coordinates) {
const numericCoordinates = coordinates.map(Number); //
const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); //
const average = sum / numericCoordinates.length; //
return parseFloat(average.toFixed(5)); // 5
}
data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
drawACircle();
} else {
ElMessage.warning("无数据");
}
};
//
var circle;
const drawACircle = (v) => {
console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
if (!circle) {
var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
circle = new BMapGL.Circle(point, 1000, {
strokeColor: "yellow",
strokeWeight: 2,
strokeOpacity: 0.8,
fillOpacity: 0.1,
strokeStyle: "dashed",
zIndex: 99,
// fillColor: "yellow",
});
map.addOverlay(circle);
}
};
const fwqList = ref([]);
//
const createCustomOverlay = (polygon, indexx) => {
// data.fwqCoordinates = polygon.point;
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
div.style.color = "#ddd";
div.style.padding = `${polygon.padding}`;
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px";
div.style.borderRadius = "10px";
div.style.display = "flex";
div.style.justifyContent = "center";
div.style.alignItems = "center";
div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
div.style.cursor = "pointer";
div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
title.style.fontSize = "14px";
title.style.fontWeight = "700";
title.style.marginLeft = "0px";
title.style.color = `${polygon.textColor}`;
div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title));
let img2 = document.createElement("img");
img2.style.width = "20px";
img2.style.height = "20px";
img2.src = this.properties.imgSrc2;
content.appendChild(div);
content.appendChild(img2);
// div.onclick = function () {
// addPolygonTown(this.getAttribute('name'))
// removeCustomOverlay()
// addStage(this.getAttribute('name'))
// state.mapStatus = 1
// }
return content;
}
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point),
opacity: 0.5,
offsetY: 0,
properties: {
title: polygon.name,
imgSrc2: polygon.img2,
type: "customOverlay",
},
});
// var labelopts = {
// position: new BMapGL.Point(polygon.point[0], polygon.point[1]), //
// offset: new BMapGL.Size(0, -97), //
// };
// var label = new BMapGL.Label(polygon.name, labelopts);
// label.setStyle({
// color: "#fff",
// borderRadius: "1px",
// padding: "5px 13px",
// // background: `url(${b1s}) no-repeat 0/100% 100%`,
// fontSize: "15px",
// lineHeight: "20px",
// border: "0",
// transform: "translateX(-50%)",
// });
map.addOverlay(fwq_list_arr.value[indexx]);
};
const updateFwqList = (data, townName, communityName) => {
let updatedFwqList = [];
jbfwqTotal.value.forEach((town) => {
if (town.name === townName) {
town.child.forEach((community) => {
if (community.name === communityName) {
updatedFwqList = data
.filter(
(item) => item.xzjd === townName && item.csq === communityName
)
.map((item) => ({
x: 53,
y: 0,
img: fwqbg1,
img2: b2,
name: item.zyysmc,
point: [item.jd, item.wd],
padding: "4px 8px 10px",
textColor: "#fff",
bgColor: "#00b050",
}));
community.fwqList = updatedFwqList;
}
});
}
});
fwqList.value = updatedFwqList;
// console.log(jbfwqTotal.value[4].child[0], "");
};
//
const yaosuTotal = ref([
{
@ -1569,6 +1375,203 @@ const to_jd = (item_name) => {
}
// }
};
//-------------------
//
const changeFwq = async (id, name, names) => {
if (choose.value.fwq == id) {
choose.value.fwq = null;
csh(); //
addPolygonCounty(); //
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); //
});
fwq_list_arr.value = [];
map.removeOverlay(circle); //
circle = null;
// drawACircle("hide"); //
} else {
csh()
await getServiceCircle(names, name);
if (fwqList.value.length !== 0) {
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); //
});
map.removeOverlay(circle); //
circle = null;
fwq_list_arr.value = [];
choose.value.fwq = id;
map.clearOverlays(); //
// choose.value.person = "";
addggfwq(); //
setTimeout(() => {
goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //
}, 500);
} else {
ElMessage.warning("无数据");
}
}
};
//
const getServiceCircle = async (communityName, townName) => {
try {
const response = await http.get(
`/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`
);
if (response.code === 200) {
updateFwqList(response.data, townName, communityName);
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
//
const addggfwq = () => {
if (fwqList.value.length !== 0) {
data.fwqCoordinates1 = [];
data.fwqCoordinates2 = [];
fwqList.value.map((item, index) => {
data.fwqCoordinates1.push(item.point[0]);
data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index);
});
function calculateAverage(coordinates) {
const numericCoordinates = coordinates.map(Number); //
const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); //
const average = sum / numericCoordinates.length; //
return parseFloat(average.toFixed(5)); // 5
}
data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
drawACircle();
} else {
ElMessage.warning("无数据");
}
};
//
const drawACircle = (v) => {
console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
if (!circle) {
var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
circle = new BMapGL.Circle(point, 1000, {
strokeColor: "yellow",
strokeWeight: 2,
strokeOpacity: 0.8,
fillOpacity: 0.1,
strokeStyle: "dashed",
zIndex: 99,
// fillColor: "yellow",
});
map.addOverlay(circle);
}
};
//
const createCustomOverlay = (polygon, indexx) => {
// data.fwqCoordinates = polygon.point;
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "40px";
content.style.width = "40px";
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
var div = document.createElement("div");
div.style.color = "#ddd";
div.style.padding = `${polygon.padding}`;
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "12px";
div.style.borderRadius = "10px";
div.style.display = "flex";
div.style.justifyContent = "center";
div.style.alignItems = "center";
div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
div.style.cursor = "pointer";
div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
title.style.fontSize = "14px";
title.style.fontWeight = "700";
title.style.marginLeft = "0px";
title.style.color = `${polygon.textColor}`;
div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title));
let img2 = document.createElement("img");
img2.style.width = "20px";
img2.style.height = "20px";
img2.src = this.properties.imgSrc2;
content.appendChild(div);
content.appendChild(img2);
// div.onclick = function () {
// addPolygonTown(this.getAttribute('name'))
// removeCustomOverlay()
// addStage(this.getAttribute('name'))
// state.mapStatus = 1
// }
return content;
}
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point),
opacity: 0.5,
offsetY: 0,
properties: {
title: polygon.name,
imgSrc2: polygon.img2,
type: "customOverlay",
},
});
// var labelopts = {
// position: new BMapGL.Point(polygon.point[0], polygon.point[1]), //
// offset: new BMapGL.Size(0, -97), //
// };
// var label = new BMapGL.Label(polygon.name, labelopts);
// label.setStyle({
// color: "#fff",
// borderRadius: "1px",
// padding: "5px 13px",
// // background: `url(${b1s}) no-repeat 0/100% 100%`,
// fontSize: "15px",
// lineHeight: "20px",
// border: "0",
// transform: "translateX(-50%)",
// });
map.addOverlay(fwq_list_arr.value[indexx]);
};
const updateFwqList = (data, townName, communityName) => {
let updatedFwqList = [];
jbfwqTotal.value.forEach((town) => {
if (town.name === townName) {
town.child.forEach((community) => {
if (community.name === communityName) {
updatedFwqList = data
.filter(
(item) => item.xzjd === townName && item.csq === communityName
)
.map((item) => ({
x: 53,
y: 0,
img: fwqbg1,
img2: b2,
name: item.zyysmc,
point: [item.jd, item.wd],
padding: "4px 8px 10px",
textColor: "#fff",
bgColor: "#00b050",
}));
community.fwqList = updatedFwqList;
}
});
}
});
fwqList.value = updatedFwqList;
// console.log(jbfwqTotal.value[4].child[0], "");
};
//------------------------------
//----------------
//
@ -2587,11 +2590,12 @@ onMounted(() => {
.jbggfwq {
.jbggfwq_content {
height: 550px;
height: 500px;
overflow: auto;
margin-top: 15px;
display: flex;
flex-direction: column;
margin-top: 15px;
margin-bottom: 34px;
.jbggfwq_content_item {
margin-bottom: 5px;
@ -2610,8 +2614,8 @@ onMounted(() => {
width: 370px;
display: flex;
flex-flow: row wrap;
border-radius: 6px;
overflow: hidden;
// border-radius: 6px;
.jbggfwq_content_item_right_item {
cursor: pointer;
@ -2666,7 +2670,6 @@ onMounted(() => {
}
.zyys {
margin-top: 25px;
.zyys_content {
margin-top: 20px;
box-sizing: border-box;
@ -2675,14 +2678,14 @@ onMounted(() => {
flex-flow: row wrap;
.zyys_content_item {
width: 110px;
height: 54px;
cursor: pointer;
margin-bottom: 15px;
margin-bottom: 20px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
width: 110px;
height: 42px;
background: rgba(124, 151, 180, 0.8);
.zyys_content_item_left {
@ -2710,6 +2713,7 @@ onMounted(() => {
}
}
.title {
.title_name {
cursor: pointer;