This commit is contained in:
duanxiaohai 2024-05-23 11:47:43 +08:00
parent 5519b60e79
commit f7b1753d64
6 changed files with 88 additions and 23 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -126,7 +126,6 @@ const getOption = () => {
type: "value", type: "value",
scale: true, scale: true,
name: "计划生育人数", name: "计划生育人数",
splitLine: { splitLine: {
//线 //线
show: false, show: false,
@ -158,7 +157,6 @@ const getOption = () => {
type: "value", type: "value",
scale: true, scale: true,
min: 0, min: 0,
name: "计划生育补贴金额/元", name: "计划生育补贴金额/元",
splitLine: { splitLine: {
show: false, show: false,
@ -173,7 +171,6 @@ const getOption = () => {
color: "#ffffff", color: "#ffffff",
fontSize: 16, fontSize: 16,
}, },
}, },
axisLine: { axisLine: {
//y线 //y线
@ -188,7 +185,7 @@ const getOption = () => {
}, },
{ {
type: "value", type: "value",
max:100, max: 100,
splitLine: { splitLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -218,12 +215,28 @@ const getOption = () => {
data: data.list1, data: data.list1,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{
show:true,
position:'inside',
color:'#ffffff',
formatter:function(data){
return data.value
}
},
}, },
{ {
yAxisIndex: 1, yAxisIndex: 1,
name: "计划生育补贴金额", name: "计划生育补贴金额",
data: data.list2, data: data.list2,
type: "line", //线 type: "line", //线
label:{
show:true,
position:'top',
color:'rgba(0, 252, 255, 1)',
formatter:function(data){
return data.value
}
},
itemStyle: { itemStyle: {
borderColor: "#00FCFF", borderColor: "#00FCFF",
borderWidth: 1, borderWidth: 1,

View File

@ -140,13 +140,18 @@
<span>资助数量</span> <span>资助数量</span>
<span>资助金额</span> <span>资助金额</span>
</div> </div>
<div class="rolling"> <div
class="rolling"
ref="mainRef"
@mouseenter="stopAutoScroll"
@mouseleave="startAutoScroll"
>
<div <div
v-for="(item, index) in data.zzxm" v-for="(item, index) in data.zzxm"
:key="index" :key="index"
class="fundingContent" class="fundingContent"
> >
<span class="spot">{{ item.zzxm }}</span> <span class="spot" >{{ item.zzxm }}</span>
<span class="spot">{{ item.zzsl }}</span> <span class="spot">{{ item.zzsl }}</span>
<span class="spot">{{ item.zzje }}</span> <span class="spot">{{ item.zzje }}</span>
</div> </div>
@ -438,35 +443,77 @@ const data = reactive({
const getData = async () => { const getData = async () => {
await http.get("/api/ggfwyth/education").then((res) => { await 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.zz);
data.xsql.push(res.data.xssl.gz); data.xsql.push(res.data.xssl.gz);
data.xsql.push(res.data.xssl.cz); data.xsql.push(res.data.xssl.cz);
data.xsql.push(res.data.xssl.xx); data.xsql.push(res.data.xssl.xx);
data.xsql.push(res.data.xssl.yey); data.xsql.push(res.data.xssl.yey);
data.xsql.push(res.data.xssl.tsjy); data.xsql.push(res.data.xssl.tsjy);
//
data.zdgz[0].value = res.data.zdgz.lset; data.zdgz[0].value = res.data.zdgz.lset;
data.zdgz[1].value = res.data.zdgz.dszn; data.zdgz[1].value = res.data.zdgz.dszn;
data.zdgz[2].value = res.data.zdgz.dqjt; data.zdgz[2].value = res.data.zdgz.dqjt;
data.zdgz[3].value = res.data.zdgz.xsdb; data.zdgz[3].value = res.data.zdgz.xsdb;
//
data.xxgk = res.data.xxgk; data.xxgk = res.data.xxgk;
//
data.xzncjszcsl = res.data.xzncjszcsl;
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx); data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz); data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz); data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx); data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz); data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz); data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
//
data.xzncjszcsl = res.data.xzncjszcsl;
//
data.zzxm = res.data.zzxm; data.zzxm = res.data.zzxm;
ratingBtn("县镇"); ratingBtn("县镇");
//
} }
}); });
}; };
//
const mainRef = ref(null);
let isAutoScrolling = true;
const stopAutoScroll = () => {
isAutoScrolling = false;
};
const startAutoScroll = () => {
isAutoScrolling = true;
autoScroll();
};
const autoScroll = () => {
if (!isAutoScrolling) return;
const mainEl = mainRef.value;
mainEl.scrollTop += 1; //
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
setTimeout(() => {
mainEl.scrollTo({ top: 0, behavior: "smooth" });
setTimeout(autoScroll, 2000); // 2
}, 1000); // 1
} else {
requestAnimationFrame(autoScroll);
}
};
onBeforeMount(async () => { onBeforeMount(async () => {
selectData.list = roseData1.value; selectData.list = roseData1.value;
getData(); getData();
}); });
onMounted(() => {
startAutoScroll();
console.log(
mainRef.value.scrollTop,
mainRef.value.scrollHeight,
mainRef.value.clientHeight
);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -1174,8 +1221,8 @@ onBeforeMount(async () => {
justify-content: space-around; justify-content: space-around;
margin-top: 10px; margin-top: 10px;
width: 93.2%; width: 93.2%;
min-height: 34px; // min-height: 34px;
padding: 8px 0; padding: 4px 0;
box-sizing: border-box; box-sizing: border-box;
background-image: url(@/assets/eduImg/jyImg16.png); background-image: url(@/assets/eduImg/jyImg16.png);

View File

@ -66,9 +66,9 @@
<div class="flex1"> <div class="flex1">
<div class="fundingBox"> <div class="fundingBox">
<div class="funding"> <div class="funding">
<span>一卡通财政补贴</span> <span>一卡通财政补贴补贴总额3,989</span>
<span>金额()</span> <span>金额()</span>
<span>数据对比</span> <!-- <span>数据对比</span> -->
</div> </div>
<div class="rolling"> <div class="rolling">
<div <div
@ -78,7 +78,7 @@
> >
<span class="spot">城乡居民最低生活保障金</span> <span class="spot">城乡居民最低生活保障金</span>
<span class="spot">99,126,474</span> <span class="spot">99,126,474</span>
<span class="spot">70.88</span> <!-- <span class="spot">70.88</span> -->
</div> </div>
</div> </div>
</div> </div>
@ -398,7 +398,6 @@ onBeforeMount(() => {
background-size: 100% 100%; background-size: 100% 100%;
} }
.right_1 { .right_1 {
background-image: url(@/assets/images/work/right_1.png); background-image: url(@/assets/images/work/right_1.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -863,22 +862,21 @@ onBeforeMount(() => {
} }
.situation1 { .situation1 {
background-image: url(@/assets/eduImg/jyImg11.png); background-image: url(@/assets/images/work/dyh.png);
} }
.situation2 { .situation2 {
background-image: url(@/assets/eduImg/jyImg12.png); background-image: url(@/assets/images/work/dyh1.png);
} }
.situation3 { .situation3 {
background-image: url(@/assets/eduImg/jyImg13.png); background-image: url(@/assets/images/work/dyh2.png);
} }
} }
.school { .school {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
} }
.fundingBox { .fundingBox {
display: flex; display: flex;
@ -917,14 +915,16 @@ onBeforeMount(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
// padding-left: 6px;
.fundingContent { .fundingContent {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin-top: 10px; margin-top: 10px;
width: 92%; width: 92%;
height: 34px; // height: 34px;
padding: 6px 0; padding: 4px 0;
box-sizing: border-box; box-sizing: border-box;
background-image: url(@/assets/eduImg/jyImg16.png); background-image: url(@/assets/eduImg/jyImg16.png);
@ -936,6 +936,12 @@ onBeforeMount(() => {
letter-spacing: 3px; letter-spacing: 3px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
width: 70%;
padding-left: 38px;
}
span:nth-child(2) {
width: 30%;
// padding-left: 50px;
} }
} }
} }
@ -1022,4 +1028,3 @@ onBeforeMount(() => {
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3); -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
} }
</style> </style>