master
parent
137e1b5ac2
commit
104fe302b6
@ -0,0 +1,273 @@
|
|||||||
|
<template>
|
||||||
|
<el-card class="box-card" shadow="hover">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="wengao"></SvgIcon>
|
||||||
|
<span style="padding-left: 15px"
|
||||||
|
>项目支出</span
|
||||||
|
>
|
||||||
|
<i class="el-icon-more" style="margin-left: auto; font-size: 20px"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="progress-card">
|
||||||
|
<div class="progress-card-item">
|
||||||
|
<div class="worker-progress__icon icon-yuan">
|
||||||
|
<SvgIcon icon-class="yuan"></SvgIcon>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item__num">{{ 0 }}</div>
|
||||||
|
<div class="progress-card-item__label">年初预算合计金额</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item">
|
||||||
|
<div class="worker-progress__icon icon-zhangdan">
|
||||||
|
<SvgIcon icon-class="zhangdan"></SvgIcon>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item__num">{{ 0}}</div>
|
||||||
|
<div class="progress-card-item__label">调整后预算合计金额</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item">
|
||||||
|
<div class="worker-progress__icon icon-zhifu">
|
||||||
|
<SvgIcon icon-class="zhifu"></SvgIcon>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item__num">{{ 0 }}</div>
|
||||||
|
<div class="progress-card-item__label">已支付金额</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress-card-item">
|
||||||
|
<MyProgress width="145px" height="145px" title="执行" :percent="0" ></MyProgress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Table style="margin-top: 20px;" :data="list" size="small" :columns="table" :max-height="280"></Table>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ElementResize from "element-resize-detector";
|
||||||
|
import { moneyFormatter } from "@/utils";
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||||
|
import MyProgress from "@/components/Progress/index.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
MyProgress,
|
||||||
|
SvgIcon
|
||||||
|
},
|
||||||
|
name: "card8",
|
||||||
|
layout: {
|
||||||
|
x: 0,
|
||||||
|
y: 5,
|
||||||
|
w: 6,
|
||||||
|
h: 4,
|
||||||
|
i: "9",
|
||||||
|
name: "项目支出",
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableHeight: 200,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
money_total_1: "1900000.00",
|
||||||
|
money_total_2: "0.00",
|
||||||
|
ids: "11",
|
||||||
|
plan_department_id: 2,
|
||||||
|
use_money_total: 0,
|
||||||
|
money_total: "0.00",
|
||||||
|
end_money: 0,
|
||||||
|
plan_department: {
|
||||||
|
id: 2,
|
||||||
|
pid: 0,
|
||||||
|
name: "办公室（党建作风办）",
|
||||||
|
manager_id: 7,
|
||||||
|
leader_id: 4,
|
||||||
|
sortnumber: 1,
|
||||||
|
created_at: "2021-06-22 07:01:41",
|
||||||
|
updated_at: "2023-03-22 14:56:51",
|
||||||
|
deleted_at: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
table: [
|
||||||
|
{
|
||||||
|
title: "序号",
|
||||||
|
type: "index",
|
||||||
|
width: 60,
|
||||||
|
fixed: "left",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "部门",
|
||||||
|
key: "plan_department.name",
|
||||||
|
minWidth: 180,
|
||||||
|
align: "center",
|
||||||
|
fixed: "left",
|
||||||
|
render: (h, params) => {
|
||||||
|
return h("p",{ style: { "text-align": "left" } }, params.row.plan_department.name);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年初预算数（元）",
|
||||||
|
key: "money_total_1",
|
||||||
|
align: "center",
|
||||||
|
width: 160,
|
||||||
|
render: (h, params) => {
|
||||||
|
return h("p",{ style: { "text-align": "right" } }, moneyFormatter(params.row.money_total_1));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "调整后预算数（元）",
|
||||||
|
key: "money_total_2",
|
||||||
|
align: "center",
|
||||||
|
width: 160,
|
||||||
|
render: (h, params) => {
|
||||||
|
return h("p",{ style: { "text-align": "right" } }, moneyFormatter(params.row.money_total_2));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "已使用（元）",
|
||||||
|
key: "money_total",
|
||||||
|
align: "center",
|
||||||
|
width: 140,
|
||||||
|
render: (h, params) => {
|
||||||
|
return h("p",{ style: { "text-align": "right" } }, moneyFormatter(params.row.money_total));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "进展情况",
|
||||||
|
key: "rate",
|
||||||
|
align: "center",
|
||||||
|
width: 160,
|
||||||
|
render: (h, row) => {
|
||||||
|
let m2 = row?.money_total_2 || 0;
|
||||||
|
let m1 = row?.money_total_1 || 0;
|
||||||
|
let m3 = row?.use_money_total || 0;
|
||||||
|
let per = 0;
|
||||||
|
|
||||||
|
if (m2 != 0) {
|
||||||
|
per = ((m3 / m2) * 100).toFixed(2);
|
||||||
|
} else if (m1 != 0) {
|
||||||
|
per = ((m3 / m1) * 100).toFixed(2);
|
||||||
|
}
|
||||||
|
return h("el-progress", {
|
||||||
|
props: {
|
||||||
|
percentage: Number(per),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
key: "action",
|
||||||
|
align: "center",
|
||||||
|
minWidth: 100,
|
||||||
|
render: (h, params) => {
|
||||||
|
return h("Button", {
|
||||||
|
props: {
|
||||||
|
size: "small"
|
||||||
|
}
|
||||||
|
} , "查看")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
let cardDom = this.$el;
|
||||||
|
let cardTitleH = 58;
|
||||||
|
const elementResize = ElementResize({
|
||||||
|
strategy:'scroll'
|
||||||
|
})
|
||||||
|
elementResize.listenTo(cardDom,ele => {
|
||||||
|
this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.clearfix {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
::v-deep .el-card__body {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 58px);
|
||||||
|
}
|
||||||
|
::v-deep .ivu-table th,::v-deep .ivu-table td {
|
||||||
|
border-bottom-style: dashed;
|
||||||
|
}
|
||||||
|
.progress-card {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-gap: 20px;
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #000000;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__num {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 7px;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
padding-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.worker-progress__icon {
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
border-radius: 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-yuan {
|
||||||
|
background: #56b7f9;
|
||||||
|
color: #fff;
|
||||||
|
filter: drop-shadow(0px 6px 6px rgba(43,188,255,0.5));
|
||||||
|
svg {
|
||||||
|
color: #56b7f9;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-zhangdan {
|
||||||
|
background: #446df6;
|
||||||
|
filter: drop-shadow(0px 6px 6px rgba(54,117,255,0.5));
|
||||||
|
svg {
|
||||||
|
color: #fff;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon-zhifu {
|
||||||
|
background: #f2a93f;
|
||||||
|
filter: drop-shadow(0px 6px 6px rgba(255,164,45,0.5));
|
||||||
|
svg {
|
||||||
|
color: #fff;
|
||||||
|
width: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-progress--circle .el-progress__text {
|
||||||
|
white-space: break-spaces;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue