This commit is contained in:
duanxiaohai
parent
ba6e53d44b
commit
dc0501c193
|
|
@ -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) => {
|
||||
await http
|
||||
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
personTotal.value = [{
|
||||
id: '0',
|
||||
personTotal.value = [
|
||||
{
|
||||
id: "0",
|
||||
ages: "总人口",
|
||||
age: '',
|
||||
age: "",
|
||||
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) => {
|
||||
console.log(index);
|
||||
personTotal.value.push({
|
||||
id: index + 1,
|
||||
rksl: item.rksl,
|
||||
age: item.age + '',
|
||||
ages: item.age + '岁'
|
||||
})
|
||||
})
|
||||
age: item.age + "",
|
||||
ages: item.age + "岁",
|
||||
});
|
||||
});
|
||||
res.data.town.map((item) => {
|
||||
mapTownCount.map((items) => {
|
||||
if (item.town == items.name) {
|
||||
items.number = item.rksl
|
||||
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,7 +2259,7 @@ onMounted(() => {
|
|||
/* 为了兼容性，添加渐变背景到IE */
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
span{
|
||||
span {
|
||||
display: block;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 34px;
|
||||
|
|
@ -2255,7 +2267,12 @@ onMounted(() => {
|
|||
// line-height: 44px;
|
||||
letter-spacing: 4px;
|
||||
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;
|
||||
/* 为了兼容性，添加渐变背景到IE */
|
||||
|
|
|
|||
Loading…
Reference in New Issue