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

245
src/view/sy_map.vue
View File

@ -11,8 +11,13 @@
<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="getData(item.id, item.age)" :key="index">
<div
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_value">{{ item.rksl }}</div>
</div>
@ -24,8 +29,13 @@
<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>
@ -39,11 +49,19 @@
<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>
@ -56,8 +74,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>
@ -156,7 +179,7 @@ const colorList = [
//点击龙游县初始化
const csh = () => {
title_choose.value = "";
cfjiedao.value='';
cfjiedao.value = "";
cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_un_choose_arr.value[index]);
});
@ -186,7 +209,6 @@ const mapTownCount = reactive([
name: "龙洲街道",
center: [119.1573083, 28.9799445],
number: "1000",
},
{
name: "东华街道",
@ -344,25 +366,7 @@ const xkzCenter = reactive([
]);
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; // 用于保存当前标记的引用
const BMAP = () => {
// 添加鼠标点击事件监听器
map.addEventListener("click", function (e) {
@ -1149,101 +1153,100 @@ const personTotal = ref([
id: 0,
name: "总人口",
value: "1724114",
ages: '总人口',
age: '1000'
ages: "总人口",
age: "1000",
},
{
id: 1,
name: "0岁",
value: "26737",
ages: '0岁',
age: '1000'
ages: "0岁",
age: "1000",
},
{
id: 2,
name: "1岁",
value: "26737",
ages: '1岁',
age: '1000'
ages: "1岁",
age: "1000",
},
{
id: 3,
name: "2岁",
value: "26737",
ages: '2岁',
age: '1000'
ages: "2岁",
age: "1000",
},
{
id: 4,
name: "3岁",
value: "26737",
ages: '3岁',
age: '1000'
ages: "3岁",
age: "1000",
},
{
id: 5,
name: "4岁",
value: "26737",
ages: '4岁',
age: '1000'
ages: "4岁",
age: "1000",
},
{
id: 6,
name: "5岁",
value: "26737",
ages: '5岁',
age: '1000'
ages: "5岁",
age: "1000",
},
{
id: 7,
name: "6岁",
value: "26737",
ages: '6岁',
age: '1000'
ages: "6岁",
age: "1000",
},
{
id: 8,
name: "7岁",
value: "26737",
ages: '7岁',
age: '1000'
ages: "7岁",
age: "1000",
},
{
id: 9,
name: "8岁",
value: "26737",
ages: '8岁',
age: '1000'
ages: "8岁",
age: "1000",
},
{
id: 10,
name: "9岁",
value: "26737",
ages: '9岁',
age: '1000'
ages: "9岁",
age: "1000",
},
{
id: 11,
name: "10岁",
value: "26737",
ages: '10岁',
age: '1000'
ages: "10岁",
age: "1000",
},
{
id: 12,
name: "11岁",
value: "26737",
ages: '11岁',
age: '1000'
ages: "11岁",
age: "1000",
},
{
id: 13,
name: "12岁",
value: "26737",
ages: '12岁',
age: '1000'
ages: "12岁",
age: "1000",
},
]);
@ -1851,37 +1854,41 @@ const yaosuTotal = ref([
},
]);
const getData = async (i, e) => {
await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ''}`).then((res) => {
if (res.code == 200) {
personTotal.value = [{
id: '0',
ages: "总人口",
age: '',
value: "res.data.total",
},]
personTotal.value[0].rksl = res.data.total
personTotal.value[0].ages = '总人口'
res.data.age.forEach((item, index) => {
console.log(index);
personTotal.value.push({
id: index + 1,
rksl: item.rksl,
age: item.age + '',
ages: item.age + '岁'
})
})
res.data.town.map((item) => {
mapTownCount.map((items) => {
if (item.town == items.name) {
items.number = item.rksl
}
})
})
}
});
await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
if (res.code == 200) {
personTotal.value = [
{
id: "0",
ages: "总人口",
age: "",
value: "res.data.total",
},
];
personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口";
res.data.age.forEach((item, index) => {
console.log(index);
personTotal.value.push({
id: index + 1,
rksl: item.rksl,
age: item.age + "",
ages: item.age + "岁",
});
});
res.data.town.map((item) => {
mapTownCount.map((items) => {
if (item.town == items.name) {
items.number = item.rksl;
}
});
});
}
});
console.log(mapTownCount, 10001);
if (i) {
changeRs(i)
changeRs(i);
}
};
const reset_font = () => {
@ -1891,22 +1898,19 @@ const reset_font = () => {
document.querySelector(".header_content").style.transformOrigin = "top left";
document.querySelector(".header_content").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")";
if (
document.querySelector(".left")) {
if (document.querySelector(".left")) {
document.querySelector(".left").style.transformOrigin = "bottom left";
document.querySelector(".left").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")";
document.querySelector(".right").style.transformOrigin = "bottom right";
document.querySelector(".right").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")";
}
};
onMounted(() => {
reset_font()
reset_font();
initMap();
getData()
getData();
});
</script>
<style lang="scss" scoped>
@ -1934,13 +1938,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;
@ -2098,13 +2106,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;
@ -2247,20 +2259,25 @@ onMounted(() => {
/* 为了兼容性，添加渐变背景到IE */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
span{
span {
display: block;
font-family: YouSheBiaoTiHei;
font-size: 34px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
margin-bottom: 15px;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
/* 使文字没有背景颜色的背景 */
background-clip: text;
/* 为了兼容性，添加渐变背景到IE */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: YouSheBiaoTiHei;
font-size: 34px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
margin-bottom: 15px;
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 40%,
#00ffff 100%
);
/* 使文字没有背景颜色的背景 */
background-clip: text;
/* 为了兼容性，添加渐变背景到IE */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}