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

gx

This commit is contained in:
duanxiaohai 2024-07-24 17:23:26 +08:00
parent ba6e53d44b
commit dc0501c193
1 changed files with 131 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src/view/sy_map.vue
View File

@ -11,8 +11,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="getData(item.id, item.age)" :key="index"> class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="getData(item.id, item.age)"
:key="index"
>
<div class="content_item_name">{{ item.ages }}</div> <div class="content_item_name">{{ item.ages }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -24,8 +29,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.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>
@ -39,11 +49,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="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>
@ -56,8 +74,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>
@ -156,7 +179,7 @@ const colorList = [
//点击龙游县初始化 //点击龙游县初始化
const csh = () => { const csh = () => {
title_choose.value = ""; title_choose.value = "";
cfjiedao.value=''; cfjiedao.value = "";
cs_un_choose_arr.value.forEach((item, index) => { cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_un_choose_arr.value[index]); map.removeOverlay(cs_un_choose_arr.value[index]);
}); });
@ -186,7 +209,6 @@ const mapTownCount = reactive([
name: "龙洲街道", name: "龙洲街道",
center: [119.1573083, 28.9799445], center: [119.1573083, 28.9799445],
number: "1000", number: "1000",
}, },
{ {
name: "东华街道", name: "东华街道",
@ -344,25 +366,7 @@ const xkzCenter = reactive([
]); ]);
var map = null; var map = null;
// 鼠标点击添加点位 // 鼠标点击添加点位
// const BMAP = () => {
// // 添加鼠标点击事件监听器
// map.addEventListener("click", function (e) {
// // map.clearOverlays();
// let icons = "";
// icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
// console.log(e.latlng);
// var marker = new BMapGL.Marker(
// new BMapGL.Point(e.latlng.lng, e.latlng.lat),
// {
// icon: icons,
// }
// ); // 创建点
// map.addOverlay(marker); // 将标注添加到地图中
// });
// };
let currentMarker = null; // 用于保存当前标记的引用 let currentMarker = null; // 用于保存当前标记的引用
const BMAP = () => { const BMAP = () => {
// 添加鼠标点击事件监听器 // 添加鼠标点击事件监听器
map.addEventListener("click", function (e) { map.addEventListener("click", function (e) {
@ -1149,101 +1153,100 @@ const personTotal = ref([
id: 0, id: 0,
name: "总人口", name: "总人口",
value: "1724114", value: "1724114",
ages: '总人口', ages: "总人口",
age: '1000' age: "1000",
}, },
{ {
id: 1, id: 1,
name: "0岁", name: "0岁",
value: "26737", value: "26737",
ages: '0岁', ages: "0岁",
age: '1000' age: "1000",
}, },
{ {
id: 2, id: 2,
name: "1岁", name: "1岁",
value: "26737", value: "26737",
ages: '1岁', ages: "1岁",
age: '1000' age: "1000",
}, },
{ {
id: 3, id: 3,
name: "2岁", name: "2岁",
value: "26737", value: "26737",
ages: '2岁', ages: "2岁",
age: '1000' age: "1000",
}, },
{ {
id: 4, id: 4,
name: "3岁", name: "3岁",
value: "26737", value: "26737",
ages: '3岁', ages: "3岁",
age: '1000' age: "1000",
}, },
{ {
id: 5, id: 5,
name: "4岁", name: "4岁",
value: "26737", value: "26737",
ages: '4岁', ages: "4岁",
age: '1000' age: "1000",
}, },
{ {
id: 6, id: 6,
name: "5岁", name: "5岁",
value: "26737", value: "26737",
ages: '5岁', ages: "5岁",
age: '1000' age: "1000",
}, },
{ {
id: 7, id: 7,
name: "6岁", name: "6岁",
value: "26737", value: "26737",
ages: '6岁', ages: "6岁",
age: '1000' age: "1000",
}, },
{ {
id: 8, id: 8,
name: "7岁", name: "7岁",
value: "26737", value: "26737",
ages: '7岁', ages: "7岁",
age: '1000' age: "1000",
}, },
{ {
id: 9, id: 9,
name: "8岁", name: "8岁",
value: "26737", value: "26737",
ages: '8岁', ages: "8岁",
age: '1000' age: "1000",
}, },
{ {
id: 10, id: 10,
name: "9岁", name: "9岁",
value: "26737", value: "26737",
ages: '9岁', ages: "9岁",
age: '1000' age: "1000",
}, },
{ {
id: 11, id: 11,
name: "10岁", name: "10岁",
value: "26737", value: "26737",
ages: '10岁', ages: "10岁",
age: '1000' age: "1000",
}, },
{ {
id: 12, id: 12,
name: "11岁", name: "11岁",
value: "26737", value: "26737",
ages: '11岁', ages: "11岁",
age: '1000' age: "1000",
}, },
{ {
id: 13, id: 13,
name: "12岁", name: "12岁",
value: "26737", value: "26737",
ages: '12岁', ages: "12岁",
age: '1000' age: "1000",
}, },
]); ]);
@ -1851,37 +1854,41 @@ const yaosuTotal = ref([
}, },
]); ]);
const getData = async (i, e) => { const getData = async (i, e) => {
await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ''}`).then((res) => { await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
if (res.code == 200) { if (res.code == 200) {
personTotal.value = [{ personTotal.value = [
id: '0', {
id: "0",
ages: "总人口", ages: "总人口",
age: '', age: "",
value: "res.data.total", value: "res.data.total",
},] },
personTotal.value[0].rksl = res.data.total ];
personTotal.value[0].ages = '总人口' personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
console.log(index); console.log(index);
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
rksl: item.rksl, rksl: item.rksl,
age: item.age + '', age: item.age + "",
ages: item.age + '岁' ages: item.age + "岁",
}) });
}) });
res.data.town.map((item) => { res.data.town.map((item) => {
mapTownCount.map((items) => { mapTownCount.map((items) => {
if (item.town == items.name) { if (item.town == items.name) {
items.number = item.rksl items.number = item.rksl;
} }
}) });
}) });
} }
}); });
console.log(mapTownCount, 10001); console.log(mapTownCount, 10001);
if (i) { if (i) {
changeRs(i) changeRs(i);
} }
}; };
const reset_font = () => { const reset_font = () => {
@ -1891,22 +1898,19 @@ const reset_font = () => {
document.querySelector(".header_content").style.transformOrigin = "top left"; document.querySelector(".header_content").style.transformOrigin = "top left";
document.querySelector(".header_content").style.transform = document.querySelector(".header_content").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")"; "scale(" + width / 1920 + "," + height / 1080 + ")";
if ( if (document.querySelector(".left")) {
document.querySelector(".left")) {
document.querySelector(".left").style.transformOrigin = "bottom left"; document.querySelector(".left").style.transformOrigin = "bottom left";
document.querySelector(".left").style.transform = document.querySelector(".left").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")"; "scale(" + width / 1920 + "," + height / 1080 + ")";
document.querySelector(".right").style.transformOrigin = "bottom right"; document.querySelector(".right").style.transformOrigin = "bottom right";
document.querySelector(".right").style.transform = document.querySelector(".right").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")"; "scale(" + width / 1920 + "," + height / 1080 + ")";
} }
}; };
onMounted(() => { onMounted(() => {
reset_font() reset_font();
initMap(); initMap();
getData() getData();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -1934,13 +1938,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;
@ -2098,13 +2106,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;
@ -2255,7 +2267,12 @@ onMounted(() => {
// line-height: 44px; // line-height: 44px;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px; margin-bottom: 15px;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%); background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 40%,
#00ffff 100%
);
/* 使文字没有背景颜色的背景 */ /* 使文字没有背景颜色的背景 */
background-clip: text; background-clip: text;
/* 为了兼容性，添加渐变背景到IE */ /* 为了兼容性，添加渐变背景到IE */