You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.7 KiB
104 lines
2.7 KiB
3 years ago
|
<template>
|
||
|
|
<el-card class="box-card" shadow="hover">
|
||
|
|
<div slot="header" class="clearfix">
|
||
|
|
<span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">预算总体进展情况</span>
|
||
|
|
<DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;float: right;"
|
||
|
|
type="year" @on-change="changeYear"></DatePicker>
|
||
|
|
</div>
|
||
|
|
<div class="progress-card">
|
||
|
|
<div class="progress-card-item">
|
||
|
|
<div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_1 || 0)}}</div>
|
||
|
|
<div class="progress-card-item__label">年初预算合计金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-card-item">
|
||
|
|
<div class="progress-card-item__num">{{moneyFormatter(statistic.progress.money_total_2 || 0)}}</div>
|
||
|
|
<div class="progress-card-item__label">调整后预算合计金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-card-item">
|
||
|
|
<div class="progress-card-item__num">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
|
||
|
|
<div class="progress-card-item__label">已支付金额</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-card-item">
|
||
|
|
<div class="progress-card-item__num">
|
||
|
|
{{toper(statistic.progress.money_total_1 || 0,statistic.progress.money_total_2 || 0,statistic.progress.use_money_total || 0)}}%
|
||
|
|
</div>
|
||
|
|
<div class="progress-card-item__label">进展率</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { moneyFormatter } from "@/utils"
|
||
|
|
import { statistic } from '@/api/dashboard/notice'
|
||
|
|
export default {
|
||
|
|
name:"card1",
|
||
|
|
layout:{
|
||
|
|
x:0,
|
||
|
|
y:0,
|
||
|
|
w:4,
|
||
|
|
h:5,
|
||
|
|
i:"1",
|
||
|
|
name:"预算统计",
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
select: {
|
||
|
|
year: new Date().getFullYear().toString()
|
||
|
|
},
|
||
|
|
statistic: {
|
||
|
|
progress: {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
moneyFormatter,
|
||
|
|
toper(m1, m2, m3) {
|
||
|
|
if (m2 != 0) {
|
||
|
|
return ((m3 / m2) * 100).toFixed(2);
|
||
|
|
} else if (m1 != 0) {
|
||
|
|
return ((m3 / m1) * 100).toFixed(2);
|
||
|
|
} else
|
||
|
|
return 0
|
||
|
|
},
|
||
|
|
changeYear(e) {
|
||
|
|
this.select.year = e;
|
||
|
|
this.getStatistic()
|
||
|
|
},
|
||
|
|
async getStatistic() {
|
||
|
|
if(/^\/system/.test(this.$route.path)) return
|
||
|
|
|
||
|
|
const res = await statistic(this.select,true)
|
||
|
|
this.statistic = res
|
||
|
|
this.$emit('send-data',res)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
created() {
|
||
|
|
this.getStatistic();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.progress-card {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
&-item {
|
||
|
|
text-align: center;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
&__label {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__num {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
|
||
|
|
padding: 6px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|