This commit is contained in:
parent
e6e2092913
commit
a4a8a28ec3
|
|
@ -1,16 +1,21 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<teleport to="body">
|
||||
<div id="map" style="width: 100vw; height: 100vh; "></div>
|
||||
<div class="left" style="width: 517px;">
|
||||
<div id="map" style="width: 100vw; height: 100vh"></div>
|
||||
<div class="left" style="width: 517px">
|
||||
<div class="lyx">
|
||||
<div class="title">
|
||||
<div class="title_name">{{ title_choose }}</div>
|
||||
<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="changeRs(item.id)" :key="index">
|
||||
<div
|
||||
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_value">{{ item.value }}</div>
|
||||
</div>
|
||||
|
|
@ -22,26 +27,39 @@
|
|||
<div class="title_line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div 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"
|
||||
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_value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right" style="width: 517px;">
|
||||
<div class="right" style="width: 517px">
|
||||
<div class="jbggfwq">
|
||||
<div class="title">
|
||||
<div class="title_name">基本公共服务圈</div>
|
||||
<div class="title_line"></div>
|
||||
</div>
|
||||
<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_right">
|
||||
<div 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)">
|
||||
<div
|
||||
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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,8 +72,13 @@
|
|||
<div class="title_line"></div>
|
||||
</div>
|
||||
<div class="zyys_content">
|
||||
<div 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">
|
||||
<div
|
||||
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" />
|
||||
<div class="zyys_content_item_right">{{ item.name }}</div>
|
||||
</div>
|
||||
|
|
@ -63,9 +86,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
|
|
@ -368,9 +389,9 @@ const addPolygonCounty = () => {
|
|||
console.log(item.name);
|
||||
let jdCenter = [];
|
||||
if (item.name == "溪口镇") {
|
||||
title_choose.value = '龙游县'
|
||||
title_choose.value = title_choose.value + `>${item.name}`;
|
||||
console.log(title_choose.value);
|
||||
if (!title_choose.value.includes("溪口镇")) {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
}
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
|
|
@ -378,7 +399,15 @@ const addPolygonCounty = () => {
|
|||
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);
|
||||
title.appendChild(document.createTextNode(this.properties.title));
|
||||
content.appendChild(div);
|
||||
div.onclick = function () {
|
||||
let jdCenter = [];
|
||||
if (polygon.name == "溪口镇") {
|
||||
if (!title_choose.value.includes("溪口镇")) {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
}
|
||||
chooseArr.value.push("jd_noNumber");
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
if (item.name == "溪口镇") {
|
||||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
center_now.value = jdCenter;
|
||||
addCs();
|
||||
goMapCenter(jdCenter, 14);
|
||||
}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]);
|
||||
});
|
||||
}
|
||||
};
|
||||
// div.onclick = function () {
|
||||
// let jdCenter = [];
|
||||
// if (polygon.name == "溪口镇") {
|
||||
// if (!title_choose.value.includes("溪口镇")) {
|
||||
// title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
// }
|
||||
// chooseArr.value.push("jd_noNumber");
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// mapTownCount.map((item) => {
|
||||
// if (item.name == "溪口镇") {
|
||||
// jdCenter = item.center;
|
||||
// }
|
||||
// });
|
||||
// center_now.value = jdCenter;
|
||||
// addCs();
|
||||
// goMapCenter(jdCenter, 14);
|
||||
// } 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]);
|
||||
// });
|
||||
// }
|
||||
// };
|
||||
return content;
|
||||
}
|
||||
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
|
|
@ -544,21 +573,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
|
|||
div.appendChild(number);
|
||||
number.appendChild(document.createTextNode(this.properties.number));
|
||||
content.appendChild(div);
|
||||
div.onclick = function () {
|
||||
let jdCenter = [];
|
||||
if (polygon.name == "溪口镇") {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
if (item.name == "溪口镇") {
|
||||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
addCs2();
|
||||
goMapCenter(jdCenter, 14);
|
||||
}
|
||||
};
|
||||
// div.onclick = function () {
|
||||
// let jdCenter = [];
|
||||
// if (polygon.name == "溪口镇") {
|
||||
// title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// mapTownCount.map((item) => {
|
||||
// if (item.name == "溪口镇") {
|
||||
// jdCenter = item.center;
|
||||
// }
|
||||
// });
|
||||
// addCs2();
|
||||
// goMapCenter(jdCenter, 14);
|
||||
// }
|
||||
// };
|
||||
return content;
|
||||
}
|
||||
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
|
|
@ -603,7 +632,7 @@ const createCs2 = (polygon, indexx) => {
|
|||
div.style.alignItems = "center";
|
||||
div.style.cursor = "pointer";
|
||||
div.style.padding = "5px";
|
||||
div.style.minWidth = "100px";
|
||||
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);
|
||||
|
|
@ -619,7 +648,7 @@ const createCs2 = (polygon, indexx) => {
|
|||
var number = document.createElement("div");
|
||||
number.style.fontSize = "10px";
|
||||
number.style.fontWeight = "600";
|
||||
number.style.color = "rgba(0, 255, 189, 1)";
|
||||
number.style.color = "black";
|
||||
div.appendChild(number);
|
||||
number.appendChild(document.createTextNode(this.properties.number));
|
||||
content.appendChild(div);
|
||||
|
|
@ -1638,13 +1667,17 @@ onMounted(() => {
|
|||
bottom: 0;
|
||||
width: 520px;
|
||||
height: 960px;
|
||||
background: linear-gradient(270deg,
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 52, 131, 0.69) 0%,
|
||||
rgba(0, 32, 83, 0.77) 50%,
|
||||
rgba(0, 60, 131, 0.74) 100%),
|
||||
radial-gradient(128% 99% at 100% 46%,
|
||||
rgba(0, 60, 131, 0.74) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
128% 99% at 100% 46%,
|
||||
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);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 30px 26px;
|
||||
|
|
@ -1802,13 +1835,17 @@ onMounted(() => {
|
|||
bottom: 0;
|
||||
width: 520px;
|
||||
height: 960px;
|
||||
background: linear-gradient(270deg,
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(0, 52, 131, 0.69) 0%,
|
||||
rgba(0, 32, 83, 0.77) 50%,
|
||||
rgba(0, 60, 131, 0.74) 100%),
|
||||
radial-gradient(128% 99% at 100% 46%,
|
||||
rgba(0, 60, 131, 0.74) 100%
|
||||
),
|
||||
radial-gradient(
|
||||
128% 99% at 100% 46%,
|
||||
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);
|
||||
backdrop-filter: blur(3px);
|
||||
padding: 30px 26px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue