From d899a6c6b2e42f21f2f4b0630f3911d471cf3338 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 13 May 2024 11:56:19 +0800 Subject: [PATCH 1/3] gx --- src/view/echarts_education/eP1.vue | 2 +- src/view/echarts_hygiene/eP5.vue | 117 ++++++++++------------------- src/view/echarts_hygiene/eP7.vue | 56 +++----------- 3 files changed, 49 insertions(+), 126 deletions(-) diff --git a/src/view/echarts_education/eP1.vue b/src/view/echarts_education/eP1.vue index 8e9fc21..1f520a6 100644 --- a/src/view/echarts_education/eP1.vue +++ b/src/view/echarts_education/eP1.vue @@ -32,7 +32,7 @@ const option = { tooltip: { show: true, //---是否显示提示框,默认为true trigger: "axis", - formatter: "{b0}:{c0}" + "人", + formatter: "{b0}:{c1}" + "人", }, xAxis: [ { diff --git a/src/view/echarts_hygiene/eP5.vue b/src/view/echarts_hygiene/eP5.vue index febeb8d..c5ed881 100644 --- a/src/view/echarts_hygiene/eP5.vue +++ b/src/view/echarts_hygiene/eP5.vue @@ -116,85 +116,44 @@ const getOption = () => { itemStyle: { normal: { color: function (params) { - let colorList = [ - ["rgba(23, 237, 255, 1)", "rgba(23, 237, 255, 0.20)"], - ["rgba(142, 187, 255, 1)", "rgba(142, 187, 255, 0.20)"], - ["rgba(255, 243, 119, 1)", "rgba(255, 242, 142, 0.20)"], - ]; - if (params.dataIndex == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ - { - offset: 0, - color: "rgba(23, 237, 255, 1)", - }, - { - offset: 1, - color: "rgba(23, 237, 255, 0.20)", - }, - ], - false - ); - } else if (params.dataIndex % 3 == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ - { - offset: 0, - color: "rgba(23, 237, 255, 1)", - }, - { - offset: 1, - color: "rgba(23, 237, 255, 0.20)", - }, - ], - false - ); - } else if (params.dataIndex % 2 == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ - { - offset: 0, - color: "rgba(255, 243, 119, 1)", - }, - { - offset: 1, - color: "rgba(255, 242, 142, 0.20)", - }, - ], - false - ); - } else { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ - { - offset: 0, - color: "rgba(142, 187, 255, 1)", - }, - { - offset: 1, - color: "rgba(142, 187, 255, 0.20)", - }, - ], - false - ); - } - }, + var colorList = [ + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(23, 237, 255, 1)", + }, + { + offset: 1, + color: "rgba(23, 237, 255, 0.20)", + }, + ], + false), + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(255, 243, 119, 1)", + }, + { + offset: 1, + color: "rgba(255, 242, 142, 0.20)", + }, + ], + false), + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(142, 187, 255, 1)", + }, + { + offset: 1, + color: "rgba(142, 187, 255, 0.20)", + }, + ], + false), + ]; + + return colorList[params.dataIndex % colorList.length]; + }, }, }, }, diff --git a/src/view/echarts_hygiene/eP7.vue b/src/view/echarts_hygiene/eP7.vue index a84b8c3..e28f582 100644 --- a/src/view/echarts_hygiene/eP7.vue +++ b/src/view/echarts_hygiene/eP7.vue @@ -123,13 +123,8 @@ data.option = { itemStyle: { normal: { color: function (params) { - if (params.dataIndex == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ + var colorList = [ + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(23, 237, 255, 1)", @@ -139,33 +134,8 @@ data.option = { color: "rgba(23, 237, 255, 0.20)", }, ], - false - ); - } else if (params.dataIndex % 3 == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ - { - offset: 0, - color: "rgba(23, 237, 255, 1)", - }, - { - offset: 1, - color: "rgba(23, 237, 255, 0.20)", - }, - ], - false - ); - } else if (params.dataIndex % 2 == 0) { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ + false), + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(255, 243, 119, 1)", @@ -175,15 +145,8 @@ data.option = { color: "rgba(255, 242, 142, 0.20)", }, ], - false - ); - } else { - return new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, //y->y2 - [ + false), + new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "rgba(142, 187, 255, 1)", @@ -193,9 +156,10 @@ data.option = { color: "rgba(142, 187, 255, 0.20)", }, ], - false - ); - } + false), + ]; + + return colorList[params.dataIndex % colorList.length]; }, }, }, From 7036f152f08b46ce3e493ea6c694cf7a7b7c4bd0 Mon Sep 17 00:00:00 2001 From: lnn19986213 <1667908750@qq.com> Date: Mon, 13 May 2024 13:29:26 +0800 Subject: [PATCH 2/3] gx --- src/view/education.vue | 161 ++++++++++++++++++++++++----------------- 1 file changed, 93 insertions(+), 68 deletions(-) diff --git a/src/view/education.vue b/src/view/education.vue index 357826d..d274413 100644 --- a/src/view/education.vue +++ b/src/view/education.vue @@ -6,8 +6,8 @@
-
-
{{ item.value }}%
+
+
{{ item.value }}
{{ item.name }}
@@ -19,33 +19,15 @@
- - + +
- - + +
@@ -105,22 +87,13 @@
-
+
城市
-
+
县镇
-
+
农村
@@ -135,11 +108,7 @@ 资助金额
-
+
幼儿资助 379人次 70.88 @@ -231,28 +200,7 @@ import ePie3 from "./echarts_education/pie3.vue"; import ePie4 from "./echarts_education/pie4.vue"; import ePieRose from "./echarts_education/pieRose.vue"; import eP1 from "./echarts_education/eP1.vue"; -const fl = ref([ - { - name: "留守儿童", - value: 16.1, - cls: "left1", - }, - { - name: "独生子女", - value: 32.1, - cls: "left2", - }, - { - name: "单亲家庭", - value: 65.1, - cls: "left3", - }, - { - name: "享受低保", - value: 0.1, - cls: "left4", - }, -]); +import http from "@/utils/request.js"; const selectData = reactive({ value1: "111", value2: "tes1", @@ -402,9 +350,48 @@ const ratingBtn = (item) => { break; } }; +const data = reactive({ + xsql: [], + zdgz: [ + { + name: "留守儿童", + value: 16.1, + cls: "left1", + }, + { + name: "独生子女", + value: 32.1, + cls: "left2", + }, + { + name: "单亲家庭", + value: 65.1, + cls: "left3", + }, + { + name: "享受低保", + value: 0.1, + cls: "left4", + }, +] +}) onBeforeMount(() => { selectData.list = roseData1.value; selectData.list1 = schoolData.value; + http.get("/api/ggfwyth/education").then((res) => { + if (res.code == 200){ + data.xsql.push(res.data.xssl.zz) + data.xsql.push(res.data.xssl.gz) + data.xsql.push(res.data.xssl.cz) + data.xsql.push(res.data.xssl.xx) + data.xsql.push(res.data.xssl.yey) + data.xsql.push(res.data.xssl.tsjy) + data.zdgz[0].value = res.data.zdgz.lset + data.zdgz[1].value = res.data.zdgz.dszn + data.zdgz[2].value = res.data.zdgz.dqjt + data.zdgz[3].value = res.data.zdgz.xsdb + } + }); }); @@ -760,6 +747,7 @@ onBeforeMount(() => { .flex11 { padding: 12px 0; } + .czr-sl { display: flex; @@ -907,6 +895,7 @@ onBeforeMount(() => { .czrBox { height: 104px; + .column { height: calc(100% - 26px); overflow-y: auto; @@ -936,14 +925,17 @@ onBeforeMount(() => { background-image: url(@/assets/eduImg/jyImg13.png); } } + .school { display: flex; flex-direction: column; justify-content: space-around; + .schoolaBox { display: flex; justify-content: space-between; } + .schoola { width: 124px; height: 79px; @@ -958,6 +950,7 @@ onBeforeMount(() => { justify-content: center; flex-direction: column; justify-content: space-between; + span { // font-weight: 500; // font-size: 14px; @@ -976,6 +969,7 @@ onBeforeMount(() => { text-align: center; font-style: normal; } + .schoola1 { font-family: PingFangSC, PingFang SC; font-weight: 500; @@ -988,6 +982,7 @@ onBeforeMount(() => { font-style: normal; } } + .schoolb { width: 550px; height: 241px; @@ -1000,6 +995,7 @@ onBeforeMount(() => { flex-direction: column; padding: 10px 0; box-sizing: border-box; + span { font-weight: 500; font-size: 14px; @@ -1008,10 +1004,12 @@ onBeforeMount(() => { font-style: normal; font-family: PingFangSC, PingFang SC; } + .grade { display: flex; justify-content: space-between; padding: 36px 0 0px 18px; + .schoolbs { // width: 128px; height: 41px; @@ -1024,16 +1022,19 @@ onBeforeMount(() => { justify-content: center; position: relative; } + .spot { position: relative; margin-right: 7px; } + /* 添加伪元素圆点 */ .spot::before { content: ""; position: absolute; top: 50%; - left: -16px; /* 调整圆点的位置 */ + left: -16px; + /* 调整圆点的位置 */ transform: translateY(-50%); width: 6px; height: 6px; @@ -1043,16 +1044,19 @@ onBeforeMount(() => { filter: blur(0px); } } + .grade1 { padding: 12px 110px 0 138px; box-sizing: border-box; } } } + .fundingBox { display: flex; flex-direction: column; align-items: center; + .funding { width: 520px; height: 34px; @@ -1065,6 +1069,7 @@ onBeforeMount(() => { display: flex; align-items: center; justify-content: space-around; + // align-items: center; // justify-content: center; // flex-direction: column; @@ -1078,6 +1083,7 @@ onBeforeMount(() => { letter-spacing: 3px; } } + .rolling { width: 100%; height: 200px; @@ -1087,6 +1093,7 @@ onBeforeMount(() => { flex-direction: column; align-items: center; padding-left: 6px; + .fundingContent { display: flex; align-items: center; @@ -1110,11 +1117,13 @@ onBeforeMount(() => { } } } + .rating { width: 50%; display: flex; flex-direction: column; align-items: center; + .ratingBtn { display: flex; // align-items: center; @@ -1125,7 +1134,8 @@ onBeforeMount(() => { background-image: url(@/assets/eduImg/jyImg19.png); background-repeat: no-repeat; background-size: 100% 100%; - cursor: pointer; /* 添加指针样式以指示可点击 */ + cursor: pointer; + /* 添加指针样式以指示可点击 */ } .ratingImg { @@ -1135,6 +1145,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .onImg.active { width: 62px; height: 29px; @@ -1142,6 +1153,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + span { height: 100%; display: flex; @@ -1171,19 +1183,23 @@ onBeforeMount(() => { } .column::-webkit-scrollbar { - display: none; /* Chrome Safari */ + display: none; + /* Chrome Safari */ } + /* 滚动条整体部分 */ .rolling::-webkit-scrollbar { width: 5px; // height: 10px; } + /* 滚动槽 */ .rolling::-webkit-scrollbar-track { border-radius: 1px; background: rgba(0, 128, 231, 0.56); -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3); } + /* 滚动条滑块样式 */ .rolling::-webkit-scrollbar-thumb { background-clip: content-box; @@ -1191,6 +1207,7 @@ onBeforeMount(() => { background: rgba(0, 162, 231, 1); -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3); } + .t_1 { margin: 10px auto; width: 100%; @@ -1199,20 +1216,24 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .t_2 { margin-top: 5px; padding: 0 10px; display: flex; justify-content: space-around; + .t_2_1 { display: flex; flex-direction: column; align-items: center; + .top { font-size: 26px; color: #ffffff; line-height: 30px; } + .t_3 { width: 135px; height: 90px; @@ -1231,6 +1252,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left2 { position: absolute; left: 15px; @@ -1241,6 +1263,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left3 { position: absolute; left: 15px; @@ -1251,6 +1274,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .left4 { position: absolute; left: 15px; @@ -1261,6 +1285,7 @@ onBeforeMount(() => { background-repeat: no-repeat; background-size: 100% 100%; } + .right { position: absolute; left: 65px; From a297d468bcb82f23d44b25ff3f2cfe2c98f59845 Mon Sep 17 00:00:00 2001 From: lnn19986213 <1667908750@qq.com> Date: Mon, 13 May 2024 13:35:17 +0800 Subject: [PATCH 3/3] gx --- src/view/education.vue | 66 ++++++++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/src/view/education.vue b/src/view/education.vue index d274413..267f5a2 100644 --- a/src/view/education.vue +++ b/src/view/education.vue @@ -40,42 +40,42 @@
- 1,211 + {{ data.xxgk.xxzs }} 学校总数
- 46,718 学生总数 + {{ data.xxgk.xszs }} 学生总数
- 883 班级总数 + {{ data.xxgk.bjzs }} 班级总数
- 4,381 教职工总数 + {{ data.xxgk.jzgzs }} 教职工总数
- 初中 7 + 初中 {{ data.xxgk.czxxsl }}
- 高中 7 + 高中 {{ data.xxgk.gzxxsl }}
- 小学 7 + 小学 {{ data.xxgk.xxxxsl }}
- 中职 7 + 中职 {{ data.xxgk.zzxxsl }}
- 幼儿园 7 + 幼儿园 {{ data.xxgk.yeyxxsl }}
- 特殊教育 7 + 特殊教育 {{ data.xxgk.tsjyxxsl }}
@@ -353,33 +353,34 @@ const ratingBtn = (item) => { const data = reactive({ xsql: [], zdgz: [ - { - name: "留守儿童", - value: 16.1, - cls: "left1", - }, - { - name: "独生子女", - value: 32.1, - cls: "left2", - }, - { - name: "单亲家庭", - value: 65.1, - cls: "left3", - }, - { - name: "享受低保", - value: 0.1, - cls: "left4", - }, -] + { + name: "留守儿童", + value: 16.1, + cls: "left1", + }, + { + name: "独生子女", + value: 32.1, + cls: "left2", + }, + { + name: "单亲家庭", + value: 65.1, + cls: "left3", + }, + { + name: "享受低保", + value: 0.1, + cls: "left4", + }, + ], + xxgk: {} }) onBeforeMount(() => { selectData.list = roseData1.value; selectData.list1 = schoolData.value; http.get("/api/ggfwyth/education").then((res) => { - if (res.code == 200){ + if (res.code == 200) { data.xsql.push(res.data.xssl.zz) data.xsql.push(res.data.xssl.gz) data.xsql.push(res.data.xssl.cz) @@ -390,6 +391,7 @@ onBeforeMount(() => { data.zdgz[1].value = res.data.zdgz.dszn data.zdgz[2].value = res.data.zdgz.dqjt data.zdgz[3].value = res.data.zdgz.xsdb + data.xxgk = res.data.xxgk } }); });