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

gx

This commit is contained in:
duanxiaohai 2024-07-30 13:11:05 +08:00
parent 1acf0feb4a
commit ad93ed72ce
2 changed files with 97 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/view/map_copy.vue
View File

@ -1921,7 +1921,7 @@ const addCsUnChoose = () => {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index); DGcreateCs2(item, index);
}); });
}, 100); }, 800);
} }
addCsChoose(); addCsChoose();
addCsUnChoose(); addCsUnChoose();

135
src/view/sy_map.vue
View File

@ -12,8 +12,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="buten(item)" :key="index"> class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
:key="index"
>
<div class="content_item_name">{{ ageLess0(item.ages) }}</div> <div class="content_item_name">{{ ageLess0(item.ages) }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -25,8 +30,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 tsbqTotal" :class="{ choose: item.id == choose.person }" <div
@click="buten2(item)" :key="index"> class="content_item"
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.person }"
@click="buten2(item)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -40,19 +50,19 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="jbggfwq_content"> <div class="jbggfwq_content">
<div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index"> <div
class="jbggfwq_content_item"
v-for="(item, index) in jbfwqTotal"
:key="index"
>
<div class="jbggfwq_content_item_left">{{ item.name }}</div> <div class="jbggfwq_content_item_left">{{ item.name }}</div>
<div class="jbggfwq_content_item_right"> <div class="jbggfwq_content_item_right">
<div class="jbggfwq_content_item_right_item" v-for="itemm in item.child" <div
:class="{ choose: itemm.id == choose.fwq }" @click=" class="jbggfwq_content_item_right_item"
changeFwq( v-for="itemm in item.child"
itemm.id, :class="{ choose: itemm.id == choose.fwq }"
itemm.fwqList, @click="changeFwq(itemm.id, item.name, itemm.name)"
itemm.center, >
item.name,
itemm.name
)
">
{{ itemm.name }} {{ itemm.name }}
</div> </div>
</div> </div>
@ -65,8 +75,13 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="zyys_content"> <div class="zyys_content">
<div class="zyys_content_item" v-for="(item, index) in yaosuTotal" <div
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index"> class="zyys_content_item"
v-for="(item, index) in yaosuTotal"
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
@click="changeys(item.id)"
:key="index"
>
<img :src="item.img" class="zyys_content_item_left" /> <img :src="item.img" class="zyys_content_item_left" />
<div class="zyys_content_item_right">{{ item.name }}</div> <div class="zyys_content_item_right">{{ item.name }}</div>
</div> </div>
@ -88,6 +103,7 @@ import {
watch, watch,
nextTick, nextTick,
} from "vue"; } from "vue";
import { ElMessage } from "element-plus";
import initializeMap from "@/utils/mapInitializer.js"; import initializeMap from "@/utils/mapInitializer.js";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import mapTown from "@/assets/json/ly.json"; import mapTown from "@/assets/json/ly.json";
@ -440,8 +456,7 @@ const BMAP = () => {
// 添加服务圈 // 添加服务圈
var circle; var circle;
const drawACircle = (v) => { const drawACircle = (v) => {
console.log("经纬度",data.fwqCoordinates1, data.fwqCoordinates2,data.fwqCoordinates); console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
// forEach;
if (!circle) { if (!circle) {
var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
circle = new BMapGL.Circle(point, 1000, { circle = new BMapGL.Circle(point, 1000, {
@ -456,16 +471,16 @@ const drawACircle = (v) => {
map.addOverlay(circle); map.addOverlay(circle);
} }
if (v === "hide") { // if (v === "hide") {
circle.hide(); // circle.hide();
} else { // } else {
circle.show(); // circle.show();
map.addOverlay(circle); // map.addOverlay(circle);
map.setViewport({ // map.setViewport({
center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2), // center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2),
zoom: 14, // zoom: 14,
}); // });
} // }
}; };
const initMap = () => { const initMap = () => {
@ -1247,7 +1262,7 @@ const DGcreateCs2 = (polygon, indexx) => {
}; };
//创建公共服务圈 //创建公共服务圈
const addggfwq = () => { const addggfwq = () => {
if (fwqList.value) { if (fwqList.value.length !== 0) {
data.fwqCoordinates1 = []; data.fwqCoordinates1 = [];
data.fwqCoordinates2 = []; data.fwqCoordinates2 = [];
fwqList.value.map((item, index) => { fwqList.value.map((item, index) => {
@ -1255,21 +1270,22 @@ const addggfwq = () => {
data.fwqCoordinates2.push(item.point[1]); data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index); createCustomOverlay(item, index);
}); });
function calculateAverage(coordinates) { function calculateAverage(coordinates) {
const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和
return sum / numericCoordinates.length; // 计算平均值 const average = sum / numericCoordinates.length; // 计算平均值
return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字
} }
data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
// console.log(average1,average2, 555);
drawACircle(); drawACircle();
} else {
ElMessage.warning("无数据");
} }
}; };
// 添加公共服务圈的图标 // 添加公共服务圈的图标
const createCustomOverlay = (polygon, indexx) => { const createCustomOverlay = (polygon, indexx) => {
data.fwqCoordinates = polygon.point; // data.fwqCoordinates = polygon.point;
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -1440,7 +1456,9 @@ const changebq = (id) => {
// choose.value.person = id; // choose.value.person = id;
}; };
//点击服务圈村 //点击服务圈村
const changeFwq = async (id, list, center, name, names) => { const changeFwq = async (id, name, names) => {
console.log("fwqid", choose.value.fwq, id);
console.log(fwqList.value, "无");
if (choose.value.fwq == id) { if (choose.value.fwq == id) {
choose.value.fwq = null; choose.value.fwq = null;
csh(); //地图初始化 csh(); //地图初始化
@ -1448,16 +1466,29 @@ const changeFwq = async (id, list, center, name, names) => {
fwq_list_arr.value.forEach((item, index) => { fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
}); });
drawACircle("hide"); //隐藏服务圈 圆 fwq_list_arr.value = [];
map.removeOverlay(circle); // 清空服务圈 圆
circle = null;
// drawACircle("hide"); //隐藏服务圈 圆
} else { } else {
await getServiceCircle(names, name); 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; choose.value.fwq = id;
map.clearOverlays(); //清空地图上所有的覆盖物 map.clearOverlays(); //清空地图上所有的覆盖物
choose.value.person = ""; choose.value.person = "";
addggfwq(); //创建公共服务圈 addggfwq(); //创建公共服务圈
setTimeout(() => { setTimeout(() => {
goMapCenter([data.fwqCoordinates1,data.fwqCoordinates2], 16); //中心点缩放 goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放
}, 500); }, 500);
} else {
ElMessage.warning("无数据");
}
} }
}; };
@ -2686,13 +2717,17 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient(270deg, background: linear-gradient(
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100%), rgba(0, 60, 131, 0.74) 100%
radial-gradient(128% 99% at 100% 46%, ),
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100%); rgba(0, 61, 134, 0.42) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -2864,13 +2899,17 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient(270deg, background: linear-gradient(
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100%), rgba(0, 60, 131, 0.74) 100%
radial-gradient(128% 99% at 100% 46%, ),
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100%); rgba(0, 61, 134, 0.42) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -3029,10 +3068,12 @@ onMounted(() => {
// line-height: 44px; // line-height: 44px;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px; margin-bottom: 15px;
background: linear-gradient(180deg, background: linear-gradient(
180deg,
#ffffff 0%, #ffffff 0%,
#ffffff 40%, #ffffff 40%,
#00ffff 100%); #00ffff 100%
);
/* 使文字没有背景颜色的背景 */ /* 使文字没有背景颜色的背景 */
background-clip: text; background-clip: text;
/* 为了兼容性，添加渐变背景到IE */ /* 为了兼容性，添加渐变背景到IE */