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",
|
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,
|
||||||
|
|
|
@ -140,15 +140,20 @@
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</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);
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue