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

gx

This commit is contained in:
姚宇浩 2024-07-25 22:57:16 +08:00
parent 026c70d670
commit cdf0115592
1 changed files with 151 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
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="buten(item)" :key="index"> class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
: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.person }" <div
@click="buten2(item)" :key="index"> class="content_item"
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.person }"
@click="buten2(item)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</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>
@ -182,6 +205,10 @@ const tsbq_id_total = ref([
name: "糖尿病", name: "糖尿病",
id: "tnb", id: "tnb",
}, },
{
name: "退役军人",
id: "tyjr",
},
]); ]);
//点击龙游县初始化 //点击龙游县初始化
const csh = () => { const csh = () => {
@ -494,7 +521,7 @@ const addPolygonCounty = () => {
BMAP(); BMAP();
if (choose.value.person == 0) { if (choose.value.person == 0) {
getDatas("溪口镇", ""); getDatas("溪口镇", "");
getDataBq(cfJd.value, '') getDataBq(cfJd.value, "");
} else { } else {
getDatas("溪口镇", choose.value.person); getDatas("溪口镇", choose.value.person);
} }
@ -509,43 +536,17 @@ const addPolygonCounty = () => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
if (choose.value.person == "") { // if (choose.value.person == "") {
addCs(); // addCs();
} else { // } else {
addCs2(); // addCs2();
} // }
goMapCenter(jdCenter, 13); goMapCenter(jdCenter, 13);
} else { } else {
map.removeEventListener("click", markera); map.removeEventListener("click", markera);
if (currentMarker !== null) { if (currentMarker !== null) {
map.removeOverlay(currentMarker); map.removeOverlay(currentMarker);
} }
// xuanzhongCs.value = [];
// sfdd.value = false;
// 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]);
// });
// cs_dd_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_dd_arr.value[index]);
// });
// fwq_list_arr.value = [];
// cs_qk_arr.value = [];
// cs_name_arr.value = [];
// cs_number_name_arr.value = [];
// cs_choose_arr.value = [];
// cs_un_choose_arr.value = [];
// cs_dd_arr.value = [];
cfJd.value = ""; cfJd.value = "";
cfCs.value = ""; cfCs.value = "";
xuanzhongCs.value = []; xuanzhongCs.value = [];
@ -759,6 +760,7 @@ const addCsUnChoose = () => {
xkzCenter.forEach((a, b) => { xkzCenter.forEach((a, b) => {
if (a.name == item.name) { if (a.name == item.name) {
cs_dd_arr.value.push(a); cs_dd_arr.value.push(a);
console.log("44444444444", a);
xuanzhongCs.value.push(a); xuanzhongCs.value.push(a);
} }
}); });
@ -772,16 +774,19 @@ const addCsUnChoose = () => {
cs_un_choose_arr.value.forEach((item, index) => { cs_un_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_qk_arr.value[index]); map.removeOverlay(cs_qk_arr.value[index]);
}); });
getDatas2(cfJd.value, choose.value.person, cfCs.value);
if (choose.value.person == "") { if (choose.value.person == "") {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index); DGcreateCs(item, index);
}); });
} else { } else {
setTimeout(() => {
cs_dd_arr.value.map((item, index) => { cs_dd_arr.value.map((item, index) => {
console.log("渲染", item);
DGcreateCs2(item, index); DGcreateCs2(item, index);
}); });
}, 300);
} }
getDatas2(cfJd.value, choose.value.person, cfCs.value);
addCsChoose(); addCsChoose();
addCsUnChoose(); addCsUnChoose();
}); });
@ -882,13 +887,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
}; };
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
console.log(11111);
num = "swrs";
} else {
console.log(222222);
num = "number";
}
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
type: "customOverlay", type: "customOverlay",
}, },
}); });
@ -954,14 +967,19 @@ const createCs2 = (polygon, indexx) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} else {
num = "number";
}
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
imgSrc2: dwd, imgSrc2: dwd,
type: "customOverlay", type: "customOverlay",
}, },
@ -1075,6 +1093,10 @@ const DGcreateCs = (polygon, indexx) => {
map.addOverlay(cs_dd_arr.value[indexx]); map.addOverlay(cs_dd_arr.value[indexx]);
}; };
const DGcreateCs2 = (polygon, indexx) => { const DGcreateCs2 = (polygon, indexx) => {
console.log(choose.value.person, "单个村社", polygon);
console.log("单个村社", polygon.name);
console.log("单个村社", polygon.number);
console.log("单个村社", polygon.swrs);
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -1122,13 +1144,20 @@ const DGcreateCs2 = (polygon, indexx) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} else {
num = "number";
}
console.log("单个", num);
cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
number: polygon.number, number: polygon[`${num}`],
imgSrc2: dwd, imgSrc2: dwd,
type: "customOverlay", type: "customOverlay",
}, },
@ -2079,7 +2108,7 @@ const getData = async (i, e) => {
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 + "岁",
}); });
}); });
@ -2102,7 +2131,7 @@ const getData = async (i, e) => {
}); });
}); });
} }
console.log(mapTownCount, 'mapTownCount'); console.log(mapTownCount, "mapTownCount");
}); });
if (i) { if (i) {
changeRs(i); changeRs(i);
@ -2122,9 +2151,18 @@ const getDatas = async (e, i) => {
age: "", age: "",
value: "res.data.total", value: "res.data.total",
}, },
{
id: "6666",
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
age: "1000",
},
]; ];
personTotal.value[0].rksl = res.data.total; personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口"; personTotal.value[0].ages = "总人口";
personTotal.value[1].rksl = res.data.swrs;
personTotal.value[1].ages = "死亡";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
@ -2141,6 +2179,14 @@ const getDatas = async (e, i) => {
// } // }
// }); // });
// }); // });
xkzCenter.map((item) => {
item.swrs = 0;
res.data.committeeSwrs.map((items) => {
if (items.csq == item.name) {
item.swrs = items.swrs;
}
});
});
xkzCenter.map((item) => { xkzCenter.map((item) => {
item.number = 0; item.number = 0;
res.data.committee.map((items) => { res.data.committee.map((items) => {
@ -2178,6 +2224,7 @@ const getDatas = async (e, i) => {
}); });
} }
} else { } else {
console.log("hhhhh", xkzCenter);
if (choose.value.person == "") { if (choose.value.person == "") {
addCs(); addCs();
} else { } else {
@ -2202,9 +2249,18 @@ const getDatas2 = async (e, i, cs) => {
age: "", age: "",
value: "res.data.total", value: "res.data.total",
}, },
{
id: "6666",
name: "死亡总人口",
value: "5650",
ages: "死亡总人口",
age: "1000",
},
]; ];
personTotal.value[0].rksl = res.data.total; personTotal.value[0].rksl = res.data.total;
personTotal.value[0].ages = "总人口"; personTotal.value[0].ages = "总人口";
personTotal.value[1].rksl = res.data.swrs;
personTotal.value[1].ages = "死亡";
res.data.age.forEach((item, index) => { res.data.age.forEach((item, index) => {
personTotal.value.push({ personTotal.value.push({
id: index + 1, id: index + 1,
@ -2213,6 +2269,14 @@ const getDatas2 = async (e, i, cs) => {
ages: item.age + "岁", ages: item.age + "岁",
}); });
}); });
xkzCenter.map((item) => {
item.swrs = 0;
res.data.committeeSwrs.map((items) => {
if (items.csq == item.name) {
item.swrs = items.swrs;
}
});
});
} }
}); });
}; };
@ -2303,7 +2367,7 @@ const getDataBqs = async (jd, cs, bq) => {
}); });
}); });
} }
changeRs(bq) changeRs(bq);
} }
}); });
}; };
@ -2357,13 +2421,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;
@ -2484,19 +2552,19 @@ onMounted(() => {
margin-bottom: 12px; margin-bottom: 12px;
} }
.content_item:last-child { // .content_item:last-child {
box-sizing: border-box; // box-sizing: border-box;
display: flex; // display: flex;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
padding: 24px; // padding: 24px;
width: 100%; // width: 100%;
height: 57px; // height: 57px;
background-image: url(@/assets/images/map/unchoose.png); // background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat; // background-repeat: no-repeat;
background-size: 100% 100%; // background-size: 100% 100%;
margin-bottom: 12px; // margin-bottom: 12px;
} // }
.content_item_name { .content_item_name {
position: relative; position: relative;
@ -2535,13 +2603,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;
@ -2698,10 +2770,12 @@ onMounted(() => {
// line-height: 44px; // line-height: 44px;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px; margin-bottom: 15px;
background: linear-gradient(180deg, background: linear-gradient(
180deg,
#ffffff 0%, #ffffff 0%,
#ffffff 40%, #ffffff 40%,
#00ffff 100%); #00ffff 100%
);
/* 使文字没有背景颜色的背景 */ /* 使文字没有背景颜色的背景 */
background-clip: text; background-clip: text;
/* 为了兼容性，添加渐变背景到IE */ /* 为了兼容性，添加渐变背景到IE */