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

gx

This commit is contained in:
姚宇浩 2024-07-24 15:24:39 +08:00
parent e6e2092913
commit a4a8a28ec3
1 changed files with 106 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
src/view/sy_map.vue
View File

@ -1,16 +1,21 @@
<template> <template>
<div class="module"> <div class="module">
<teleport to="body"> <teleport to="body">
<div id="map" style="width: 100vw; height: 100vh; "></div> <div id="map" style="width: 100vw; height: 100vh"></div>
<div class="left" style="width: 517px;"> <div class="left" style="width: 517px">
<div class="lyx"> <div class="lyx">
<div class="title"> <div class="title">
<div class="title_name">{{ title_choose }}</div> <div class="title_name">{{ title_choose }}</div>
<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="changeRs(item.id)" :key="index"> class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="changeRs(item.id)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.value }}</div> <div class="content_item_value">{{ item.value }}</div>
</div> </div>
@ -22,26 +27,39 @@
<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.bq }" <div
@click="changebq(item.id)" :key="index"> class="content_item"
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.bq }"
@click="changebq(item.id)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.value }}</div> <div class="content_item_value">{{ item.value }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right" style="width: 517px;"> <div class="right" style="width: 517px">
<div class="jbggfwq"> <div class="jbggfwq">
<div class="title"> <div class="title">
<div class="title_name">基本公共服务圈</div> <div class="title_name">基本公共服务圈</div>
<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="changeFwq(itemm.id, itemm.fwqList, itemm.center)"> class="jbggfwq_content_item_right_item"
v-for="itemm in item.child"
:class="{ choose: itemm.id == choose.fwq }"
@click="changeFwq(itemm.id, itemm.fwqList, itemm.center)"
>
{{ itemm.name }} {{ itemm.name }}
</div> </div>
</div> </div>
@ -54,8 +72,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>
@ -63,9 +86,7 @@
</div> </div>
</div> </div>
</teleport> </teleport>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
@ -368,9 +389,9 @@ const addPolygonCounty = () => {
console.log(item.name); console.log(item.name);
let jdCenter = []; let jdCenter = [];
if (item.name == "溪口镇") { if (item.name == "溪口镇") {
title_choose.value = '龙游县' if (!title_choose.value.includes("溪口镇")) {
title_choose.value = title_choose.value + `>${item.name}`; title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value); }
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -378,7 +399,15 @@ const addPolygonCounty = () => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
goMapCenter(jdCenter, 14); addCs();
goMapCenter(jdCenter, 13);
} else {
cs_qk_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]);
});
cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]);
});
} }
}); });
} }
@ -471,32 +500,32 @@ const createCustomOverlayJd = (polygon, indexx) => {
div.appendChild(title); div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title)); title.appendChild(document.createTextNode(this.properties.title));
content.appendChild(div); content.appendChild(div);
div.onclick = function () { // div.onclick = function () {
let jdCenter = []; // let jdCenter = [];
if (polygon.name == "溪口镇") { // if (polygon.name == "溪口镇") {
if (!title_choose.value.includes("溪口镇")) { // if (!title_choose.value.includes("溪口镇")) {
title_choose.value = title_choose.value + `>${polygon.name}`; // title_choose.value = title_choose.value + `>${polygon.name}`;
} // }
chooseArr.value.push("jd_noNumber"); // chooseArr.value.push("jd_noNumber");
loadCs(); // loadCs();
addPolygonCountyCs(); // addPolygonCountyCs();
mapTownCount.map((item) => { // mapTownCount.map((item) => {
if (item.name == "溪口镇") { // if (item.name == "溪口镇") {
jdCenter = item.center; // jdCenter = item.center;
} // }
}); // });
center_now.value = jdCenter; // center_now.value = jdCenter;
addCs(); // addCs();
goMapCenter(jdCenter, 14); // goMapCenter(jdCenter, 14);
}else{ // } else {
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]);
}); // });
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]);
}); // });
} // }
}; // };
return content; return content;
} }
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
@ -544,21 +573,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
div.appendChild(number); div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number)); number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div); content.appendChild(div);
div.onclick = function () { // div.onclick = function () {
let jdCenter = []; // let jdCenter = [];
if (polygon.name == "溪口镇") { // if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`; // title_choose.value = title_choose.value + `>${polygon.name}`;
loadCs(); // loadCs();
addPolygonCountyCs(); // addPolygonCountyCs();
mapTownCount.map((item) => { // mapTownCount.map((item) => {
if (item.name == "溪口镇") { // if (item.name == "溪口镇") {
jdCenter = item.center; // jdCenter = item.center;
} // }
}); // });
addCs2(); // addCs2();
goMapCenter(jdCenter, 14); // goMapCenter(jdCenter, 14);
} // }
}; // };
return content; return content;
} }
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
@ -603,7 +632,7 @@ const createCs2 = (polygon, indexx) => {
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "5px"; div.style.padding = "5px";
div.style.minWidth = "100px"; div.style.minWidth = "90px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
@ -619,7 +648,7 @@ const createCs2 = (polygon, indexx) => {
var number = document.createElement("div"); var number = document.createElement("div");
number.style.fontSize = "10px"; number.style.fontSize = "10px";
number.style.fontWeight = "600"; number.style.fontWeight = "600";
number.style.color = "rgba(0, 255, 189, 1)"; number.style.color = "black";
div.appendChild(number); div.appendChild(number);
number.appendChild(document.createTextNode(this.properties.number)); number.appendChild(document.createTextNode(this.properties.number));
content.appendChild(div); content.appendChild(div);
@ -1638,13 +1667,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;
@ -1802,13 +1835,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;