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.
128 lines
3.2 KiB
128 lines
3.2 KiB
<template>
|
|
<el-card class="box-card" shadow="hover">
|
|
<div slot="header" class="clearfix">
|
|
<span style="padding-left: 15px;">预算总体执行情况</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="icon-yuan">-->
|
|
<!-- <SvgIcon icon-class="yuan"></SvgIcon>-->
|
|
<!-- </div>-->
|
|
<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 SvgIcon from "@/components/SvgIcon";
|
|
import { moneyFormatter } from "@/utils"
|
|
import { statistic } from '@/api/dashboard/notice'
|
|
export default {
|
|
components: {
|
|
SvgIcon
|
|
},
|
|
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;
|
|
}
|
|
|
|
.icon-yuan {
|
|
background: $primaryColor;
|
|
color: #fff;
|
|
border-radius: 20px;
|
|
filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
|
|
display: inline-block;
|
|
padding: 10px;
|
|
|
|
svg {
|
|
background: #fff;
|
|
color: $primaryColor;
|
|
border-radius: 100%;
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|