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.
257 lines
8.1 KiB
257 lines
8.1 KiB
<template>
|
|
<div>
|
|
|
|
<el-drawer
|
|
size="880px"
|
|
title="执行统计"
|
|
:visible.sync="drawer"
|
|
direction="rtl">
|
|
<div style="padding: 0 20px;">
|
|
<template v-if="type === 1">
|
|
<Card>
|
|
<el-checkbox :indeterminate="isIndeterminate"
|
|
v-model="checkAll"
|
|
@change="e => {
|
|
departmentSelect = e ? departments.map(i => (i.plan_department_id)) : [];
|
|
isIndeterminate = false;
|
|
}">全选</el-checkbox>
|
|
<el-checkbox-group v-model="departmentSelect"
|
|
size="small"
|
|
@change="e => {
|
|
let count = e.length;
|
|
checkAll = count === departments.length;
|
|
isIndeterminate = count > 0 && count < departments.length;
|
|
}">
|
|
<el-checkbox v-for="item in departments" :label="item.plan_department_id" :key="item.plan_department_id">{{item.plan_department ? item.plan_department.name : item.plan_department_id}}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</Card>
|
|
|
|
<Card style="margin-top: 20px;">
|
|
<div class="content">
|
|
<div class="item">
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">已使用（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">执行情况</p>
|
|
<el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
<template v-else>
|
|
<Card>
|
|
<el-checkbox :indeterminate="isIndeterminate2"
|
|
v-model="checkAll2"
|
|
@change="e => {
|
|
typeSelect = e ? types.map(i => (i.id)) : [];
|
|
isIndeterminate = false;
|
|
}">全选</el-checkbox>
|
|
<el-checkbox-group v-model="typeSelect"
|
|
size="small"
|
|
@change="e => {
|
|
let count = e.length;
|
|
checkAll2 = count === types.length;
|
|
isIndeterminate2 = count > 0 && count < types.length;
|
|
}">
|
|
<el-checkbox v-for="item in types" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
|
|
</el-checkbox-group>
|
|
</Card>
|
|
|
|
<Card style="margin-top: 20px;">
|
|
<div class="content">
|
|
<div class="item">
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">已使用（元）</p>
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
|
|
</div>
|
|
<div class="item">
|
|
<p class="item__title">执行情况</p>
|
|
<el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
</div>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { moneyFormatter } from "@/utils"
|
|
import { typeCarry } from "@/api/dashboard/notice"
|
|
export default {
|
|
props: {
|
|
departments: Array,
|
|
year: [Number,String]
|
|
},
|
|
data() {
|
|
return {
|
|
type: 1,//1科室2类型
|
|
drawer: false,
|
|
isIndeterminate: false,
|
|
checkAll: false,
|
|
|
|
departmentSelect: [],
|
|
|
|
|
|
isIndeterminate2: false,
|
|
checkAll2: false,
|
|
types: [],
|
|
typeSelect: [],
|
|
}
|
|
},
|
|
methods: {
|
|
moneyFormatter,
|
|
show () {
|
|
this.drawer = true
|
|
},
|
|
hide () {
|
|
this.drawer = false
|
|
},
|
|
setType (type) {
|
|
this.type = type
|
|
}
|
|
},
|
|
computed: {
|
|
selectedDepartments () {
|
|
return this.departments.filter(i => this.departmentSelect.find(j => j === i.plan_department_id))
|
|
},
|
|
totalMoneyTotal1 () {
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
|
|
},
|
|
totalMoneyTotal2 () {
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
|
|
},
|
|
totalUseMoneyTotal () {
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
|
|
},
|
|
totalPercent () {
|
|
if (this.type === 1) {
|
|
return (Number(this.totalMoneyTotal2 !== 0) ? (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal2) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotal) / Number(this.totalMoneyTotal1) * 10000)/100)) || 0
|
|
} else {
|
|
return (Number(this.totalMoneyTotal2Type !== 0) ? (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal2Type) * 10000)/100) : (Math.round(Number(this.totalUseMoneyTotalType) / Number(this.totalMoneyTotal1Type) * 10000)/100)) || 0
|
|
}
|
|
},
|
|
|
|
selectedTypes () {
|
|
return this.types.filter(i => this.typeSelect.find(j => j === i.id))
|
|
},
|
|
totalMoneyTotal1Type () {
|
|
return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
|
|
},
|
|
totalMoneyTotal2Type () {
|
|
return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
|
|
},
|
|
totalUseMoneyTotalType () {
|
|
return this.selectedTypes.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
|
|
},
|
|
},
|
|
watch: {
|
|
year: {
|
|
handler:function(val) {
|
|
typeCarry({
|
|
year: val
|
|
}).then(res => {
|
|
this.types = res
|
|
console.log(res)
|
|
})
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$color: linear-gradient(to top left, #ff6641, #ec3634),
|
|
linear-gradient(to top left, #4bfbb2, #49f2ac),
|
|
linear-gradient(to top left, #efd458, #ba840a),
|
|
linear-gradient(to top left, #05e6ff, #0069fe),
|
|
linear-gradient(to top left, #a5ffff, #8fccd9),
|
|
linear-gradient(to top left, #fca7ff, #7a519a),
|
|
linear-gradient(to top left, #a4e829, #06ac2e);
|
|
|
|
@for $index from 1 through length($color) {
|
|
.card#{$index} {
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background: nth($color, $index);
|
|
grid-area: card#{$index};
|
|
border-radius: 4px;
|
|
filter: drop-shadow(0 2px 8px #0004);
|
|
|
|
padding: 20px;
|
|
|
|
.item__title {
|
|
font-weight: 600;
|
|
text-align: center;
|
|
|
|
padding-bottom: 20px;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
height: 2px;
|
|
background: linear-gradient(to right,#fff 40%,#0000);
|
|
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
.item__value {
|
|
text-align: center;
|
|
flex: 1;
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
}
|
|
.content {
|
|
display: grid;
|
|
grid-template-columns: repeat(4,1fr);
|
|
grid-gap: 20px;
|
|
|
|
padding: 20px 0;
|
|
.item__title {
|
|
text-align: center;
|
|
}
|
|
.item__value {
|
|
font-weight: 600;
|
|
font-size: 17px;
|
|
text-align: center;
|
|
|
|
padding-top: 20px;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-checkbox {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
::v-deep .el-checkbox-group {
|
|
max-height: 300px;
|
|
overflow-y: scroll;
|
|
|
|
margin-left: 20px;
|
|
}
|
|
</style>
|