From b5a42e239b64ab3a1b597bb78de2657488a0602b Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Tue, 30 Jul 2024 11:44:30 +0800 Subject: [PATCH] gx --- src/view/map_copy.vue | 194 +++++++++++++++--------------------------- 1 file changed, 70 insertions(+), 124 deletions(-) diff --git a/src/view/map_copy.vue b/src/view/map_copy.vue index 5507e61..17f4202 100644 --- a/src/view/map_copy.vue +++ b/src/view/map_copy.vue @@ -23,7 +23,13 @@ :key="index" >
{{ ageLess0(item.ages) }}
-
{{ item.rksl }}
+
+
+
+ {{ item.percent }}% +
+ {{ item.rksl }} +
@@ -307,7 +313,7 @@ const tsbq_id_total = ref([ id: "tyjr", }, { - name: "困难儿童", + name: "困境儿童", id: "kjer", }, ]); @@ -410,105 +416,6 @@ const personTotal = ref([ ages: "总人口", age: "1000", }, - { - id: 1, - name: "1岁以下", - value: "26737", - ages: "1岁以下", - age: "1000", - }, - { - id: 2, - name: "1岁", - value: "26737", - ages: "1岁", - age: "1000", - }, - { - id: 3, - name: "2岁", - value: "26737", - ages: "2岁", - age: "1000", - }, - { - id: 4, - name: "3岁", - value: "26737", - ages: "3岁", - age: "1000", - }, - - { - id: 5, - name: "4岁", - value: "26737", - ages: "4岁", - age: "1000", - }, - { - id: 6, - name: "5岁", - value: "26737", - ages: "5岁", - age: "1000", - }, - { - id: 7, - name: "6岁", - value: "26737", - ages: "6岁", - age: "1000", - }, - { - id: 8, - name: "7岁", - value: "26737", - ages: "7岁", - age: "1000", - }, - { - id: 9, - name: "8岁", - value: "26737", - ages: "8岁", - age: "1000", - }, - { - id: 10, - name: "9岁", - value: "26737", - ages: "9岁", - age: "1000", - }, - { - id: 11, - name: "10岁", - value: "26737", - ages: "10岁", - age: "1000", - }, - { - id: 12, - name: "11岁", - value: "26737", - ages: "11岁", - age: "1000", - }, - { - id: 13, - name: "12岁", - value: "26737", - ages: "12岁", - age: "1000", - }, - { - id: 14, - name: "死亡总人口", - value: "5650", - ages: "死亡总人口", - age: "1000", - }, ]); //特殊标签 const tsbqTotal = ref([ @@ -1025,22 +932,25 @@ const getData = async (i, e) => { }, { id: "6666", - name: "死亡总人口", + name: "近一年死亡", value: "5650", - ages: "死亡总人口", + ages: "近一年死亡", age: "1000", + percent: "", }, ]; personTotal.value[0].rksl = res.data.total; personTotal.value[0].ages = "总人口"; personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; res.data.age.forEach((item, index) => { personTotal.value.push({ id: index + 1, rksl: item.rksl, age: item.age + "", ages: item.age + "岁", + percent: item.percent, }); }); } @@ -1086,22 +996,25 @@ const getDatas = async (e, i) => { }, { id: "6666", - name: "死亡总人口", + name: "近一年死亡", value: "5650", - ages: "死亡总人口", + ages: "近一年死亡", age: "1000", + percent: "", }, ]; personTotal.value[0].rksl = res.data.total; personTotal.value[0].ages = "总人口"; personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; res.data.age.forEach((item, index) => { personTotal.value.push({ id: index + 1, rksl: item.rksl, age: item.age + "", ages: item.age + "岁", + percent: item.percent, }); }); } @@ -1192,22 +1105,24 @@ const getDatas2 = async (e, i, cs) => { }, { id: "6666", - name: "死亡总人口", + name: "近一年死亡", value: "5650", - ages: "死亡总人口", + ages: "近一年死亡", age: "1000", }, ]; personTotal.value[0].rksl = res.data.total; personTotal.value[0].ages = "总人口"; personTotal.value[1].rksl = res.data.swrs; - personTotal.value[1].ages = "死亡"; + personTotal.value[1].ages = "近一年死亡"; + personTotal.value[1].percent = res.data.swrsPercent; res.data.age.forEach((item, index) => { personTotal.value.push({ id: index + 1, rksl: item.rksl, age: item.age + "", ages: item.age + "岁", + percent: item.percent, }); }); xkzCenter.map((item) => { @@ -1456,7 +1371,11 @@ const to_jd = (item_name) => { if (choose.value.person == "9999") { getDatas("溪口镇", ""); } else { - getDatas("溪口镇", choose.value.person - 1); + if (choose.value.person == 1) { + getDatas("溪口镇", "0"); //0岁传字符串 + } else { + getDatas("溪口镇", choose.value.person - 1); + } } } loadCs(); @@ -1517,7 +1436,6 @@ const addPolygonCounty = () => { townName.value = item.name; if (item.name == cfJd.value) { } else { - console.log(111, choose.value.person); cfJd.value = item.name; let jdCenter = []; if (item.name == "溪口镇") { @@ -1543,7 +1461,11 @@ const addPolygonCounty = () => { if (choose.value.person == "9999") { getDatas("溪口镇", ""); } else { - getDatas("溪口镇", choose.value.person - 1); + if (choose.value.person == 1) { + getDatas("溪口镇", "0"); //0岁传字符串 + } else { + getDatas("溪口镇", choose.value.person - 1); + } } } if (title_jd.value == item.name) { @@ -1660,7 +1582,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => { title.appendChild(document.createTextNode(this.properties.title)); content.appendChild(div); var number = document.createElement("div"); - number.style.fontSize = "11px"; + number.style.fontSize = "12px"; number.style.fontWeight = "600"; number.style.color = "#FEFF6C"; number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)"; @@ -1921,7 +1843,7 @@ const addCsUnChoose = () => { cs_dd_arr.value.map((item, index) => { DGcreateCs2(item, index); }); - }, 100); + }, 400); } addCsChoose(); addCsUnChoose(); @@ -2294,23 +2216,36 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; + padding-right: 5px; width: 48%; - height: 57px; + position: relative; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 12px; + font-size: 18px; + } + .content_item_bg{ + position: absolute; + top: 0; + left: 0; + width: 40%; + height: 100%; + background:RGBA(53, 85, 114, 0.5); + z-index:-1; } - .content_item:first-child { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; width: 100%; - height: 57px; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; @@ -2322,9 +2257,10 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; width: 100%; - height: 57px; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; @@ -2346,6 +2282,14 @@ onMounted(() => { top: 7.5px; left: -13px; } + .content_item_value { + display: flex; + .content_item_percent { + margin-right: 5px; + color: #6bfeff; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); + } + } .choose { background-image: url(@/assets/images/map/choose.png) !important; @@ -2379,13 +2323,15 @@ onMounted(() => { display: flex; align-items: center; justify-content: space-between; - padding: 24px; + padding: 18px; + padding-left: 24px; width: 48%; - height: 57px; + // height: 57px; background-image: url(@/assets/images/map/unchoose.png); background-repeat: no-repeat; background-size: 100% 100%; margin-bottom: 12px; + font-size: 18px; } // .content_item:last-child {