This commit is contained in:
parent
5519b60e79
commit
f7b1753d64
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 |
|
@ -126,7 +126,6 @@ const getOption = () => {
|
|||
type: "value",
|
||||
scale: true,
|
||||
name: "计划生育人数",
|
||||
|
||||
splitLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
|
@ -158,7 +157,6 @@ const getOption = () => {
|
|||
type: "value",
|
||||
scale: true,
|
||||
min: 0,
|
||||
|
||||
name: "计划生育补贴金额/元",
|
||||
splitLine: {
|
||||
show: false,
|
||||
|
@ -173,7 +171,6 @@ const getOption = () => {
|
|||
color: "#ffffff",
|
||||
fontSize: 16,
|
||||
},
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
|
@ -188,7 +185,7 @@ const getOption = () => {
|
|||
},
|
||||
{
|
||||
type: "value",
|
||||
max:100,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
|
@ -218,12 +215,28 @@ const getOption = () => {
|
|||
data: data.list1,
|
||||
barWidth: 20,
|
||||
type: "bar",
|
||||
label:{
|
||||
show:true,
|
||||
position:'inside',
|
||||
color:'#ffffff',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
name: "计划生育补贴金额",
|
||||
data: data.list2,
|
||||
type: "line", //线状图
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
color:'rgba(0, 252, 255, 1)',
|
||||
formatter:function(data){
|
||||
return data.value
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: "#00FCFF",
|
||||
borderWidth: 1,
|
||||
|
|
|
@ -140,13 +140,18 @@
|
|||
<span>资助数量</span>
|
||||
<span>资助金额</span>
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div
|
||||
class="rolling"
|
||||
ref="mainRef"
|
||||
@mouseenter="stopAutoScroll"
|
||||
@mouseleave="startAutoScroll"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in data.zzxm"
|
||||
:key="index"
|
||||
class="fundingContent"
|
||||
>
|
||||
<span class="spot">{{ item.zzxm }}</span>
|
||||
<span class="spot" >{{ item.zzxm }}</span>
|
||||
<span class="spot">{{ item.zzsl }}</span>
|
||||
<span class="spot">{{ item.zzje }}</span>
|
||||
</div>
|
||||
|
@ -438,35 +443,77 @@ const data = reactive({
|
|||
const getData = async () => {
|
||||
await 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;
|
||||
// 学校概况
|
||||
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.nccz);
|
||||
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.xzcz);
|
||||
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
|
||||
// 县镇农村教师职称数量
|
||||
data.xzncjszcsl = res.data.xzncjszcsl;
|
||||
// 资助项目
|
||||
data.zzxm = res.data.zzxm;
|
||||
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 () => {
|
||||
selectData.list = roseData1.value;
|
||||
getData();
|
||||
});
|
||||
onMounted(() => {
|
||||
startAutoScroll();
|
||||
console.log(
|
||||
mainRef.value.scrollTop,
|
||||
mainRef.value.scrollHeight,
|
||||
mainRef.value.clientHeight
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@ -1174,8 +1221,8 @@ onBeforeMount(async () => {
|
|||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
width: 93.2%;
|
||||
min-height: 34px;
|
||||
padding: 8px 0;
|
||||
// min-height: 34px;
|
||||
padding: 4px 0;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg16.png);
|
||||
|
||||
|
|
|
@ -66,9 +66,9 @@
|
|||
<div class="flex1">
|
||||
<div class="fundingBox">
|
||||
<div class="funding">
|
||||
<span>一卡通财政补贴</span>
|
||||
<span>一卡通财政补贴(补贴总额:3,989)</span>
|
||||
<span>金额(元)</span>
|
||||
<span>数据对比</span>
|
||||
<!-- <span>数据对比</span> -->
|
||||
</div>
|
||||
<div class="rolling">
|
||||
<div
|
||||
|
@ -78,7 +78,7 @@
|
|||
>
|
||||
<span class="spot">城乡居民最低生活保障金</span>
|
||||
<span class="spot">99,126,474</span>
|
||||
<span class="spot">70.88</span>
|
||||
<!-- <span class="spot">70.88</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -398,7 +398,6 @@ onBeforeMount(() => {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
||||
.right_1 {
|
||||
background-image: url(@/assets/images/work/right_1.png);
|
||||
background-repeat: no-repeat;
|
||||
|
@ -863,22 +862,21 @@ onBeforeMount(() => {
|
|||
}
|
||||
|
||||
.situation1 {
|
||||
background-image: url(@/assets/eduImg/jyImg11.png);
|
||||
background-image: url(@/assets/images/work/dyh.png);
|
||||
}
|
||||
|
||||
.situation2 {
|
||||
background-image: url(@/assets/eduImg/jyImg12.png);
|
||||
background-image: url(@/assets/images/work/dyh1.png);
|
||||
}
|
||||
|
||||
.situation3 {
|
||||
background-image: url(@/assets/eduImg/jyImg13.png);
|
||||
background-image: url(@/assets/images/work/dyh2.png);
|
||||
}
|
||||
}
|
||||
.school {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
}
|
||||
.fundingBox {
|
||||
display: flex;
|
||||
|
@ -917,14 +915,16 @@ onBeforeMount(() => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// padding-left: 6px;
|
||||
|
||||
.fundingContent {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 10px;
|
||||
width: 92%;
|
||||
height: 34px;
|
||||
padding: 6px 0;
|
||||
// height: 34px;
|
||||
padding: 4px 0;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/eduImg/jyImg16.png);
|
||||
|
||||
|
@ -936,6 +936,12 @@ onBeforeMount(() => {
|
|||
letter-spacing: 3px;
|
||||
text-align: left;
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
Loading…
Reference in New Issue