Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
duanxiaohai
commit
ba6e53d44b
|
|
@ -31,7 +31,6 @@ const reset_font = () => {
|
|||
let height =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
|
||||
console.log(width, height)
|
||||
|
||||
document.querySelector("#m").style.transformOrigin = "top left";
|
||||
document.querySelector("#m").style.transform =
|
||||
|
|
@ -54,11 +53,9 @@ const reset_font = () => {
|
|||
};
|
||||
onMounted(() => {
|
||||
reset_font();
|
||||
reset_font();
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
reset_font();
|
||||
reset_font();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,19 +5,16 @@
|
|||
<div class="left" style="width: 517px">
|
||||
<div class="lyx">
|
||||
<div class="title">
|
||||
<div class="title_name">{{ title_choose }}</div>
|
||||
<div class="title_name">
|
||||
<span @click="csh()">龙游县</span>{{ 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_name">{{ item.name }}</div>
|
||||
<div class="content_item_value">{{ item.value }}</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -27,13 +24,8 @@
|
|||
<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>
|
||||
|
|
@ -47,19 +39,11 @@
|
|||
<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>
|
||||
|
|
@ -72,13 +56,8 @@
|
|||
<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>
|
||||
|
|
@ -129,7 +108,7 @@ import b4 from "@/assets/images/map/b4.png";
|
|||
import b5 from "@/assets/images/map/b5.png";
|
||||
import b6 from "@/assets/images/map/b6.png";
|
||||
import xcbg from "@/assets/images/map/xcbg.png";
|
||||
|
||||
import http from "@/utils/request.js";
|
||||
import AED from "@/assets/images/map/AED.png";
|
||||
//删除
|
||||
const jdm_arr = ref([]);
|
||||
|
|
@ -138,8 +117,12 @@ const fwq_list_arr = ref([]);
|
|||
const cs_qk_arr = ref([]);
|
||||
const cs_name_arr = ref([]);
|
||||
const cs_number_name_arr = ref([]);
|
||||
const cs_choose_arr = ref([]);
|
||||
const cs_un_choose_arr = ref([]);
|
||||
//
|
||||
const title_choose = ref("龙游县");
|
||||
const cfjiedao = ref("");
|
||||
const jrcs = ref(false);
|
||||
const title_choose = ref("");
|
||||
//村社颜色列表
|
||||
const colorList = [
|
||||
{
|
||||
|
|
@ -170,6 +153,30 @@ const colorList = [
|
|||
bg: "RGBA(27, 91, 55, 1)",
|
||||
},
|
||||
];
|
||||
//点击龙游县初始化
|
||||
const csh = () => {
|
||||
title_choose.value = "";
|
||||
cfjiedao.value='';
|
||||
cs_un_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||||
});
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_choose_arr.value[index]);
|
||||
});
|
||||
cs_number_name_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||||
});
|
||||
cs_name_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_name_arr.value[index]);
|
||||
});
|
||||
cs_qk_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_qk_arr.value[index]);
|
||||
});
|
||||
goMapCenter([119.178783, 29.034583], 11);
|
||||
};
|
||||
//选中社区
|
||||
const chooseCsList = ref([]);
|
||||
const unChooseList = ref([]);
|
||||
//中心点坐标
|
||||
const center_now = ref([]);
|
||||
const center_center = ref([119.178783, 29.034583]);
|
||||
|
|
@ -179,6 +186,7 @@ const mapTownCount = reactive([
|
|||
name: "龙洲街道",
|
||||
center: [119.1573083, 28.9799445],
|
||||
number: "1000",
|
||||
|
||||
},
|
||||
{
|
||||
name: "东华街道",
|
||||
|
|
@ -435,8 +443,22 @@ const addPolygonCounty = () => {
|
|||
map.addOverlay(polygon);
|
||||
polygon.addEventListener("click", () => {
|
||||
console.log(item.name);
|
||||
if (title_choose.value.includes("溪口镇")) {
|
||||
|
||||
// if(item.name !== "溪口镇"){
|
||||
// jrcs.value=false;
|
||||
// console.log( jrcs.value,'000');
|
||||
// }
|
||||
// if (jrcs.value && item.name != "溪口镇") {
|
||||
// console.log(1);
|
||||
// } else {
|
||||
// console.log(2);
|
||||
|
||||
// jrcs.value=true;
|
||||
if (item.name == cfjiedao.value) {
|
||||
console.log(2222);
|
||||
} else {
|
||||
console.log(111);
|
||||
cfjiedao.value = item.name;
|
||||
let jdCenter = [];
|
||||
if (item.name == "溪口镇") {
|
||||
if (!title_choose.value.includes("溪口镇")) {
|
||||
|
|
@ -449,18 +471,27 @@ const addPolygonCounty = () => {
|
|||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
console.log(jrcs.value);
|
||||
addCs();
|
||||
goMapCenter(jdCenter, 13);
|
||||
} else {
|
||||
title_choose.value = "龙游县";
|
||||
title_choose.value = "";
|
||||
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]);
|
||||
});
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_choose_arr.value[index]);
|
||||
});
|
||||
cs_un_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -469,6 +500,7 @@ const addPolygonCounty = () => {
|
|||
|
||||
const addJd = () => {
|
||||
mapTownCount.map((item, index) => {
|
||||
goMapCenter([119.178783, 29.034581], 11);
|
||||
createCustomOverlayJd(item, index);
|
||||
});
|
||||
};
|
||||
|
|
@ -524,30 +556,94 @@ const addPolygonCountyCs = () => {
|
|||
});
|
||||
map.addOverlay(cs_qk_arr.value[index]);
|
||||
cs_qk_arr.value[index].addEventListener("click", () => {
|
||||
console.log(111);
|
||||
// let jdCenter = [];
|
||||
// if (item.name == "溪口镇") {
|
||||
// if (!title_choose.value.includes("溪口镇")) {
|
||||
// title_choose.value = title_choose.value + `>${item.name}`;
|
||||
// }
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// mapTownCount.map((item) => {
|
||||
// if (item.name == "溪口镇") {
|
||||
// jdCenter = item.center;
|
||||
// }
|
||||
// });
|
||||
// addCs();
|
||||
// goMapCenter(jdCenter, 13);
|
||||
// } else {
|
||||
// title_choose.value = "龙游县";
|
||||
// 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]);
|
||||
// });
|
||||
// }
|
||||
console.log(item.name);
|
||||
console.log(111, xkzDk);
|
||||
chooseCsList.value.length = 0;
|
||||
unChooseList.value.length = 0;
|
||||
xkzDk.forEach((itemm, indexx) => {
|
||||
if (itemm.name == item.name) {
|
||||
chooseCsList.value.push(itemm);
|
||||
} else {
|
||||
unChooseList.value.push(itemm);
|
||||
}
|
||||
});
|
||||
title_choose.value = title_choose.value + `>${item.name}`;
|
||||
cs_qk_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_qk_arr.value[index]);
|
||||
});
|
||||
console.log("chooseCsList.value", chooseCsList.value);
|
||||
console.log("unChooseList.value", unChooseList.value);
|
||||
addCsChoose();
|
||||
addCsUnChoose();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
//添加选中社区
|
||||
const addCsChoose = () => {
|
||||
chooseCsList.value.map((item, index) => {
|
||||
console.log("item", item);
|
||||
let fillColor = "blue";
|
||||
//地区的坐标范围
|
||||
let points = [];
|
||||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||||
if (points.length) {
|
||||
//创建面
|
||||
cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
|
||||
strokeColor: fillColor,
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.8,
|
||||
fillColor: fillColor,
|
||||
fillOpacity: 0.4,
|
||||
name: item.name,
|
||||
zIndex: 99,
|
||||
});
|
||||
map.addOverlay(cs_choose_arr.value[index]);
|
||||
}
|
||||
});
|
||||
};
|
||||
//添加未选中社区
|
||||
const addCsUnChoose = () => {
|
||||
unChooseList.value.map((item, index) => {
|
||||
let fillColor = "RGBA(125, 140, 154, 1)";
|
||||
//地区的坐标范围
|
||||
let points = [];
|
||||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||||
if (points.length) {
|
||||
//创建面
|
||||
cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
|
||||
strokeColor: fillColor,
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.8,
|
||||
fillColor: fillColor,
|
||||
fillOpacity: 0.5,
|
||||
name: item.name,
|
||||
zIndex: 99,
|
||||
});
|
||||
map.addOverlay(cs_un_choose_arr.value[index]);
|
||||
cs_un_choose_arr.value[index].addEventListener("click", () => {
|
||||
cs_un_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||||
});
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_choose_arr.value[index]);
|
||||
});
|
||||
title_choose.value = title_choose.value.slice(0, -4);
|
||||
chooseCsList.value.length = 0;
|
||||
unChooseList.value.length = 0;
|
||||
xkzDk.forEach((itemm, indexx) => {
|
||||
if (itemm.name == item.name) {
|
||||
chooseCsList.value.push(itemm);
|
||||
} else {
|
||||
unChooseList.value.push(itemm);
|
||||
}
|
||||
});
|
||||
title_choose.value = title_choose.value + `>${item.name}`;
|
||||
cs_un_choose_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_qk_arr.value[index]);
|
||||
});
|
||||
addCsChoose();
|
||||
addCsUnChoose();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1053,71 +1149,101 @@ const personTotal = ref([
|
|||
id: 0,
|
||||
name: "总人口",
|
||||
value: "1724114",
|
||||
ages: '总人口',
|
||||
age: '1000'
|
||||
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "1岁",
|
||||
name: "0岁",
|
||||
value: "26737",
|
||||
ages: '0岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "2岁",
|
||||
name: "1岁",
|
||||
value: "26737",
|
||||
ages: '1岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "3岁",
|
||||
name: "2岁",
|
||||
value: "26737",
|
||||
ages: '2岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "4岁",
|
||||
name: "3岁",
|
||||
value: "26737",
|
||||
ages: '3岁',
|
||||
age: '1000'
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
name: "5岁",
|
||||
name: "4岁",
|
||||
value: "26737",
|
||||
ages: '4岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "6岁",
|
||||
name: "5岁",
|
||||
value: "26737",
|
||||
ages: '5岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "7岁",
|
||||
name: "6岁",
|
||||
value: "26737",
|
||||
ages: '6岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "8岁",
|
||||
name: "7岁",
|
||||
value: "26737",
|
||||
ages: '7岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "9岁",
|
||||
name: "8岁",
|
||||
value: "26737",
|
||||
ages: '8岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "10岁",
|
||||
name: "9岁",
|
||||
value: "26737",
|
||||
ages: '9岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "11岁",
|
||||
name: "10岁",
|
||||
value: "26737",
|
||||
ages: '10岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "12岁",
|
||||
name: "11岁",
|
||||
value: "26737",
|
||||
ages: '11岁',
|
||||
age: '1000'
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "13岁",
|
||||
name: "12岁",
|
||||
value: "26737",
|
||||
ages: '12岁',
|
||||
age: '1000'
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
@ -1724,8 +1850,63 @@ const yaosuTotal = ref([
|
|||
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(() => {
|
||||
reset_font()
|
||||
initMap();
|
||||
getData()
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -1753,17 +1934,13 @@ 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;
|
||||
|
|
@ -1921,17 +2098,13 @@ 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;
|
||||
|
|
@ -2061,6 +2234,7 @@ onMounted(() => {
|
|||
|
||||
.title {
|
||||
.title_name {
|
||||
display: flex;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
|
|
@ -2073,6 +2247,21 @@ onMounted(() => {
|
|||
/* 为了兼容性，添加渐变背景到IE */
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.title_line {
|
||||
|
|
|
|||
Loading…
Reference in New Issue