This commit is contained in:
汪汇 2024-07-24 17:18:27 +08:00
parent 97c8e04edc
commit de9a394ec1
3 changed files with 123 additions and 68 deletions

View File

@ -31,7 +31,6 @@ const reset_font = () => {
let height = let height =
document.documentElement.clientHeight || document.body.clientHeight; document.documentElement.clientHeight || document.body.clientHeight;
console.log(width, height)
document.querySelector("#m").style.transformOrigin = "top left"; document.querySelector("#m").style.transformOrigin = "top left";
document.querySelector("#m").style.transform = document.querySelector("#m").style.transform =
@ -54,11 +53,9 @@ const reset_font = () => {
}; };
onMounted(() => { onMounted(() => {
reset_font(); reset_font();
reset_font();
}); });
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
reset_font(); reset_font();
reset_font();
}); });
</script> </script>

View File

@ -9,15 +9,10 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
<div <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
class="content_item" @click="getData(item.id, item.age)" :key="index">
v-for="(item, index) in personTotal" <div class="content_item_name">{{ item.ages }}</div>
:class="{ choose: item.id == choose.person }" <div class="content_item_value">{{ item.rksl }}</div>
@click="changeRs(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> </div>
@ -27,13 +22,8 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
<div <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
class="content_item" @click="changebq(item.id)" :key="index">
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>
@ -47,19 +37,11 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="jbggfwq_content"> <div class="jbggfwq_content">
<div <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
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 <div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
class="jbggfwq_content_item_right_item" :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
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>
@ -72,13 +54,8 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="zyys_content"> <div class="zyys_content">
<div <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
class="zyys_content_item" :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
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>
@ -129,6 +106,8 @@ import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png"; import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.png"; import b6 from "@/assets/images/map/b6.png";
import xcbg from "@/assets/images/map/xcbg.png"; import xcbg from "@/assets/images/map/xcbg.png";
import http from "@/utils/request.js";
// //
const jdm_arr = ref([]); const jdm_arr = ref([]);
const jdm_number_arr = ref([]); const jdm_number_arr = ref([]);
@ -177,6 +156,7 @@ const mapTownCount = reactive([
name: "龙洲街道", name: "龙洲街道",
center: [119.1573083, 28.9799445], center: [119.1573083, 28.9799445],
number: "1000", number: "1000",
}, },
{ {
name: "东华街道", name: "东华街道",
@ -438,6 +418,7 @@ const addPolygonCounty = () => {
const addJd = () => { const addJd = () => {
mapTownCount.map((item, index) => { mapTownCount.map((item, index) => {
goMapCenter([119.178783, 29.034581], 11);
createCustomOverlayJd(item, index); createCustomOverlayJd(item, index);
}); });
}; };
@ -1022,71 +1003,101 @@ const personTotal = ref([
id: 0, id: 0,
name: "总人口", name: "总人口",
value: "1724114", value: "1724114",
ages: '总人口',
age: '1000'
}, },
{ {
id: 1, id: 1,
name: "1岁", name: "0岁",
value: "26737", value: "26737",
ages: '0岁',
age: '1000'
}, },
{ {
id: 2, id: 2,
name: "2岁", name: "1岁",
value: "26737", value: "26737",
ages: '1岁',
age: '1000'
}, },
{ {
id: 3, id: 3,
name: "3岁", name: "2岁",
value: "26737", value: "26737",
ages: '2岁',
age: '1000'
}, },
{ {
id: 4, id: 4,
name: "4岁", name: "3岁",
value: "26737", value: "26737",
ages: '3岁',
age: '1000'
}, },
{ {
id: 5, id: 5,
name: "5岁", name: "4岁",
value: "26737", value: "26737",
ages: '4岁',
age: '1000'
}, },
{ {
id: 6, id: 6,
name: "6岁", name: "5岁",
value: "26737", value: "26737",
ages: '5岁',
age: '1000'
}, },
{ {
id: 7, id: 7,
name: "7岁", name: "6岁",
value: "26737", value: "26737",
ages: '6岁',
age: '1000'
}, },
{ {
id: 8, id: 8,
name: "8岁", name: "7岁",
value: "26737", value: "26737",
ages: '7岁',
age: '1000'
}, },
{ {
id: 9, id: 9,
name: "9岁", name: "8岁",
value: "26737", value: "26737",
ages: '8岁',
age: '1000'
}, },
{ {
id: 10, id: 10,
name: "10岁", name: "9岁",
value: "26737", value: "26737",
ages: '9岁',
age: '1000'
}, },
{ {
id: 11, id: 11,
name: "11岁", name: "10岁",
value: "26737", value: "26737",
ages: '10岁',
age: '1000'
}, },
{ {
id: 12, id: 12,
name: "12岁", name: "11岁",
value: "26737", value: "26737",
ages: '11岁',
age: '1000'
}, },
{ {
id: 13, id: 13,
name: "13岁", name: "12岁",
value: "26737", value: "26737",
ages: '12岁',
age: '1000'
}, },
]); ]);
@ -1693,8 +1704,63 @@ const yaosuTotal = ref([
wz: true, wz: true,
}, },
]); ]);
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
}
})
})
}
});
console.log(mapTownCount, 10001);
if (i) {
changeRs(i)
}
};
const reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
let height =
document.documentElement.clientHeight || document.body.clientHeight;
document.querySelector(".header_content").style.transformOrigin = "top left";
document.querySelector(".header_content").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")";
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(() => { onMounted(() => {
reset_font()
initMap(); initMap();
getData()
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -1722,17 +1788,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
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;
@ -1890,17 +1952,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
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;

View File

@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理 // 第一个代理
"/api": { "/api": {
// 匹配到啥来进行方向代理 // 匹配到啥来进行方向代理
// target: "http://192.168.2.17:8095/", //刘进 target: "http://192.168.2.17:8095/", //刘进
target: "http://220.191.238.50:996/", //线上 // target: "http://220.191.238.50:996/", //线上
changeOrigin: true, //是否支持跨域 changeOrigin: true, //是否支持跨域
//rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个 //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个
}, },