parent
c751db6d73
commit
9b7f936b27
File diff suppressed because it is too large
Load Diff
@ -1,242 +0,0 @@
|
||||
<template>
|
||||
<div style="padding: 0 10px 20px 10px">
|
||||
<el-row :gutter="4">
|
||||
<el-col :span="4">
|
||||
<Card style="height: 100%;" :style="{'opacity':isDrag ? '0.4' : '1' }">
|
||||
<template v-slot:title>
|
||||
<p>组件</p>
|
||||
</template>
|
||||
<div
|
||||
class="cpn-name__item"
|
||||
:class="{ 'cpn-name__item--disable': statusFormat(item.i) }"
|
||||
v-for="item in layout"
|
||||
:draggable="!statusFormat(item.i)"
|
||||
@dragstart="isDrag = true"
|
||||
@dragend="dragEnd(item, $event)"
|
||||
>
|
||||
<i class="el-icon-folder-remove"></i>
|
||||
<span>{{ item.name }}</span>
|
||||
<Button
|
||||
v-show="statusFormat(item.i)"
|
||||
type="error"
|
||||
size="small"
|
||||
ghost
|
||||
@click="removeLayout(item.i)"
|
||||
>移除</Button
|
||||
>
|
||||
</div>
|
||||
</Card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="20">
|
||||
<Card :class="{'drag-body':isDrag}">
|
||||
<template v-slot:title>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<p>布局</p>
|
||||
<Button type="primary" style="float: right;margin-right: 10px;" @click="sync">同步</Button>
|
||||
<Button type="primary" style="float: right;" @click="save">保存</Button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<grid-layout
|
||||
id="grid-card"
|
||||
class="gird-card"
|
||||
:layout.sync="layoutList"
|
||||
:col-num="12"
|
||||
:row-height="40"
|
||||
:is-draggable="true"
|
||||
:is-resizable="true"
|
||||
:is-mirrored="false"
|
||||
:vertical-compact="true"
|
||||
:margin="[10, 10]"
|
||||
:autoSize="true"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in layoutList"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
:key="item.i"
|
||||
style="touch-action: none"
|
||||
>
|
||||
<component
|
||||
style="position: absolute; inset: 0 0 0 0;"
|
||||
:is="item.component"
|
||||
></component>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</Card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { save } from "@/api/system/expand"
|
||||
|
||||
import VueGridLayout from "vue-grid-layout";
|
||||
import path from "path";
|
||||
const files = require.context(
|
||||
"@/views/system/workerComponents",
|
||||
false,
|
||||
/.vue$/
|
||||
);
|
||||
let cpns = files.keys().map((key) => {
|
||||
return files(key).default || files(key);
|
||||
});
|
||||
let layout = cpns.map((item) => {
|
||||
return {
|
||||
...item.layout,
|
||||
component: item,
|
||||
};
|
||||
});
|
||||
export default {
|
||||
components: {
|
||||
"GridLayout": VueGridLayout.GridLayout,
|
||||
"GridItem": VueGridLayout.GridItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layout,
|
||||
layoutList: [],
|
||||
isDrag: false,
|
||||
|
||||
grid: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dragEnd(item, e) {
|
||||
this.isDrag = false
|
||||
if (e.clientX >= this.grid.x && e.clientY >= this.grid.y) {
|
||||
this.layoutList.push(item);
|
||||
}
|
||||
},
|
||||
|
||||
removeLayout(i) {
|
||||
let temp = -1;
|
||||
this.layoutList.forEach((item, index) => {
|
||||
if (i === item.i) {
|
||||
temp = index;
|
||||
}
|
||||
});
|
||||
this.layoutList.splice(temp, 1);
|
||||
},
|
||||
|
||||
async sync() {
|
||||
await this.$store.dispatch("app/setLayout")
|
||||
|
||||
this.$store.dispatch('app/getLayout').then(res => {
|
||||
this.layoutList = res.map(item => {
|
||||
layout.forEach(lay => {
|
||||
lay.i === item.i ? item.component = lay.component : ''
|
||||
})
|
||||
return item
|
||||
})
|
||||
})
|
||||
},
|
||||
save(){
|
||||
let layout = this.layoutList.map(item => {
|
||||
return {
|
||||
x:item.x,
|
||||
y:item.y,
|
||||
w:item.w,
|
||||
h:item.h,
|
||||
i:item.i
|
||||
}
|
||||
})
|
||||
this.$store.dispatch('app/saveLayout',layout)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
statusFormat() {
|
||||
return function (i) {
|
||||
let iArr = this.layoutList.map((item) => item.i);
|
||||
return iArr.indexOf(i) !== -1;
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.grid = document.getElementById("grid-card").getBoundingClientRect();
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch('app/getLayout').then(res => {
|
||||
this.layoutList = res.map(item => {
|
||||
layout.forEach(lay => {
|
||||
lay.i === item.i ? item.component = lay.component : ''
|
||||
})
|
||||
return item
|
||||
})
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gird-card {
|
||||
min-height: 200px;
|
||||
}
|
||||
.cpn-name__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: rgb(100, 100, 100);
|
||||
border-radius: 4px;
|
||||
background-color: rgba(94, 181, 218, 0.3);
|
||||
cursor: move;
|
||||
|
||||
padding: 6px 6px;
|
||||
& > i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
& > span {
|
||||
flex: 1;
|
||||
}
|
||||
& + div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
&--disable {
|
||||
cursor: no-drop;
|
||||
background-color: rgba(218, 94, 98, 0.3);
|
||||
}
|
||||
}
|
||||
.drag-body{
|
||||
transition: all .4s;
|
||||
background: rgba(32, 160, 255, 0.3);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 800ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
|
||||
}
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fade-out {
|
||||
animation: fade-out 600ms ease-out both;
|
||||
}
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-card__header {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
@ -1,146 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="tushu"></SvgIcon>
|
||||
<span style="padding-left: 15px"
|
||||
>图书统计</span
|
||||
>
|
||||
<DatePicker
|
||||
transfer
|
||||
:value="select.date"
|
||||
placeholder="选择所属年份"
|
||||
placement="bottom"
|
||||
style="width: 130px; margin-left: auto;"
|
||||
type="month"
|
||||
format
|
||||
@on-change="changeMonth"
|
||||
></DatePicker>
|
||||
</div>
|
||||
<div class="progress-card">
|
||||
<MyProgress width="213px" height="213px" :chart-data="chartData"></MyProgress>
|
||||
<!-- <div class="progress-card-item">-->
|
||||
<!-- <div class="progress-card-item__num">{{totalData.book.total}}</div>-->
|
||||
<!-- <div class="progress-card-item__label">总计</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="progress-card-item">-->
|
||||
<!-- <div class="progress-card-item__num">{{totalData.book.no_return}}</div>-->
|
||||
<!-- <div class="progress-card-item__label">未归还</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="progress-card-item">-->
|
||||
<!-- <div class="progress-card-item__num">{{totalData.book.rate+'%'}}</div>-->
|
||||
<!-- <div class="progress-card-item__label">{{(totalData.book.rate>0?'上升':(totalData.book.rate===0?'-':'下降'))}}</div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyProgress from "@/components/Progress"
|
||||
import { httpCurl } from "@/api/out";
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
MyProgress
|
||||
},
|
||||
name: "card5",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 4,
|
||||
h: 5,
|
||||
i: "6",
|
||||
name: "图书统计",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
token: '',
|
||||
date: this.$moment(new Date()).format('YYYY-MM'),
|
||||
},
|
||||
statistic: {
|
||||
progress: {},
|
||||
},
|
||||
totalData: {
|
||||
book: {
|
||||
no_return: 0,
|
||||
total: 0,
|
||||
rate: 0
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeMonth (e) {
|
||||
this.date = e;
|
||||
this.getStatic();
|
||||
},
|
||||
async getToken () {
|
||||
if(/^\/system/.test(this.$route.path)) return
|
||||
const token = await httpCurl({
|
||||
auth_token: this.$store.getters.oa_token
|
||||
},true,"","POST",`${process.env['VUE_APP_OUT_Book']}/api/admin/auth/oss-login`)
|
||||
this.token = token.access_token
|
||||
},
|
||||
async getStatic() {
|
||||
if(/^\/system/.test(this.$route.path)) return
|
||||
const res = await httpCurl(
|
||||
{
|
||||
token: this.token,
|
||||
date: this.date
|
||||
},
|
||||
true,
|
||||
"",
|
||||
"post",
|
||||
`${process.env['VUE_APP_OUT_Book']}/api/admin/other/chart-total`
|
||||
);
|
||||
this.totalData = res;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
chartData () {
|
||||
return [
|
||||
{
|
||||
name:'已归还',
|
||||
value: this.totalData.book.total??0-this.totalData.book.no_return??0
|
||||
},
|
||||
{
|
||||
name:'未归还',
|
||||
value: this.totalData.book.no_return??0
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.getToken();
|
||||
await this.getStatic();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.progress-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-item {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__num {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,131 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="book"></SvgIcon>
|
||||
<span style="padding-left: 15px"
|
||||
>图书借阅统计</span
|
||||
>
|
||||
<DatePicker
|
||||
transfer
|
||||
:value="select.date"
|
||||
placeholder="选择所属年份"
|
||||
placement="bottom"
|
||||
style="width: 130px; margin-left: auto;"
|
||||
type="month"
|
||||
format
|
||||
@on-change="changeMonth"
|
||||
></DatePicker>
|
||||
</div>
|
||||
<div class="progress-card">
|
||||
|
||||
<MyProgress class="progress-card-item" width="213px" height="213px" title="借出量" :percent="totalData.borrow.rate"></MyProgress>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MyProgress from "@/components/Progress/index.vue";
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
import { httpCurl } from "@/api/out";
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
MyProgress
|
||||
},
|
||||
name: "card6",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 4,
|
||||
h: 5,
|
||||
i: "7",
|
||||
name: "图书借阅统计",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
token: "",
|
||||
date: this.$moment(new Date()).format("YYYY-MM"),
|
||||
},
|
||||
statistic: {
|
||||
progress: {},
|
||||
},
|
||||
totalData: {
|
||||
borrow: {
|
||||
no_return: 0,
|
||||
total: 0,
|
||||
rate: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeMonth(e) {
|
||||
this.date = e;
|
||||
this.getStatic();
|
||||
},
|
||||
async getToken() {
|
||||
if (/^\/system/.test(this.$route.path)) return;
|
||||
const token = await httpCurl(
|
||||
{
|
||||
auth_token: this.$store.getters.oa_token
|
||||
},
|
||||
true,
|
||||
"",
|
||||
"POST",
|
||||
`${process.env["VUE_APP_OUT_Book"]}/api/admin/auth/oss-login`
|
||||
);
|
||||
this.token = token.access_token;
|
||||
},
|
||||
async getStatic() {
|
||||
if (/^\/system/.test(this.$route.path)) return;
|
||||
const res = await httpCurl(
|
||||
{
|
||||
token: this.token,
|
||||
date: this.date,
|
||||
},
|
||||
true,
|
||||
"",
|
||||
"post",
|
||||
`${process.env["VUE_APP_OUT_Book"]}/api/admin/other/chart-total`
|
||||
);
|
||||
console.log(res);
|
||||
this.totalData = res;
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
async created() {
|
||||
await this.getToken();
|
||||
await this.getStatic();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.progress-card {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
|
||||
&__label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__num {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover" id="department-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="form"></SvgIcon>
|
||||
<span style=" padding-left: 15px"
|
||||
>科室执行情况</span
|
||||
>
|
||||
<i class="el-icon-more" style="margin-left: auto; font-size: 20px"></i>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;height: 100%;width: 100%;">
|
||||
<div id="department-chart"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { moneyFormatter } from "@/utils";
|
||||
import ElementResize from 'element-resize-detector'
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
name: "card3",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 5,
|
||||
w: 6,
|
||||
h: 4,
|
||||
i: "3",
|
||||
name: "科室执行情况",
|
||||
},
|
||||
inject: {
|
||||
getStatistic: {
|
||||
default: () => {
|
||||
return () => {
|
||||
return {
|
||||
statistic: {
|
||||
departmentList: [
|
||||
{
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: "",
|
||||
tableHeight: 200,
|
||||
table: [
|
||||
{
|
||||
title: "科室",
|
||||
width: 100,
|
||||
key: "plan_department.name",
|
||||
fixed: "left",
|
||||
render:(h,{row}) => {
|
||||
return h('span',{},row.plan_department?.name)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "执行情况",
|
||||
minWidth: 160,
|
||||
fixed: "right",
|
||||
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: "年初预算合计金额(元)",
|
||||
width: 170,
|
||||
align: "right",
|
||||
key: "money_total_1",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.money_total_1));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "调整后预算合计金额(元)",
|
||||
width: 170,
|
||||
align: "right",
|
||||
key: "money_total_2",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.money_total_2));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "已使用(元)",
|
||||
width: 120,
|
||||
align: "right",
|
||||
key: "use_money_total",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.use_money_total));
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
left: "15%"
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
legend: {
|
||||
show: true
|
||||
},
|
||||
xAxis: {
|
||||
data: this.departmentList.map((item) => item.plan_department.name),
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel: {
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
barWidth: 30,
|
||||
type: 'bar',
|
||||
stack: "a",
|
||||
name: "合计金额（元）",
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 1, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 0, color: '#188df0' }
|
||||
]),
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 1, color: '#4f86f5' },
|
||||
{ offset: 0.3, color: '#3f79f1' },
|
||||
{ offset: 0, color: '#3171f4' }
|
||||
])
|
||||
}
|
||||
},
|
||||
data: this.departmentList.map(item => (parseFloat(item.money_total_2) ? parseFloat(item.money_total_2) : parseFloat(item.money_total_1) - parseFloat(item.use_money_total))),
|
||||
},
|
||||
{
|
||||
barWidth: 30,
|
||||
type: "bar",
|
||||
stack: "a",
|
||||
name: "已使用金额（元）",
|
||||
label: {
|
||||
show: true,
|
||||
color: "#188df0",
|
||||
position: "top",
|
||||
formatter: (params) => {
|
||||
console.log(params)
|
||||
let m2 = this.departmentList[params.dataIndex]?.money_total_2 || 0;
|
||||
let m1 = this.departmentList[params.dataIndex]?.money_total_1 || 0;
|
||||
let m3 = this.departmentList[params.dataIndex]?.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 Number(per) + "%";
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#b4cef3' },
|
||||
{ offset: 0.5, color: '#aecbf5' },
|
||||
{ offset: 1, color: '#9fc4f9' }
|
||||
]),
|
||||
borderRadius: [20, 20, 0, 0]
|
||||
},
|
||||
data: this.departmentList.map(item => parseFloat(item.use_money_total))
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
init() {
|
||||
this.chart = echarts.init(document.getElementById("department-chart"));
|
||||
this.setOptions();
|
||||
let cardDom = document.getElementById('department-card');
|
||||
let cardTitleH = 58;
|
||||
const elementResize = ElementResize({
|
||||
strategy:'scroll'
|
||||
})
|
||||
elementResize.listenTo(cardDom,ele => {
|
||||
//this.setOptions()
|
||||
this.chart.resize();
|
||||
// this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
departmentList() {
|
||||
if (this.getStatistic)
|
||||
return this.getStatistic()?.statistic?.departmentList || [];
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
departmentList: {
|
||||
handler: function (newVal) {
|
||||
this.setOptions()
|
||||
},
|
||||
immediate: false
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .el-progress--line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
::v-deep .el-progress__text {
|
||||
word-break: keep-all;
|
||||
}
|
||||
::v-deep .el-card__body {
|
||||
width: 100%;
|
||||
height: calc(100% - 58px);
|
||||
}
|
||||
#department-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
@ -1,309 +0,0 @@
|
||||
<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">{{ moneyFormatter(statistic.progress.money_total_1 || 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">{{ moneyFormatter(statistic.progress.money_total_2 || 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">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
|
||||
<div class="progress-card-item__label">已支付金额</div>
|
||||
</div>
|
||||
<div class="progress-card-item">
|
||||
<MyProgress width="145px" height="145px" title="执行率" :chart-data="[{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'},{value:statistic.progress.use_money_total,name:'已用金额'}]" ></MyProgress>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table style="margin-top: 20px;" :data="departments" 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";
|
||||
import {statistic} from "@/api/dashboard/notice";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MyProgress,
|
||||
SvgIcon
|
||||
},
|
||||
name: "card8",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 5,
|
||||
w: 6,
|
||||
h: 4,
|
||||
i: "9",
|
||||
name: "项目支出",
|
||||
},
|
||||
inject: {
|
||||
getStatistic: {
|
||||
default: () => {
|
||||
return () => {
|
||||
return {
|
||||
statistic: {
|
||||
departmentList: [
|
||||
{
|
||||
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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableHeight: 200,
|
||||
statistic: {
|
||||
progress: {
|
||||
money_total_1: 0,
|
||||
money_total_2: 0,
|
||||
use_money_total: 0
|
||||
}
|
||||
},
|
||||
list: [],
|
||||
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: {
|
||||
moneyFormatter,
|
||||
init() {
|
||||
let cardDom = this.$el;
|
||||
let cardTitleH = 58;
|
||||
const elementResize = ElementResize({
|
||||
strategy:'scroll'
|
||||
})
|
||||
elementResize.listenTo(cardDom,ele => {
|
||||
this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
||||
})
|
||||
},
|
||||
async getStatistics() {
|
||||
if(/^\/system/.test(this.$route.path)) return
|
||||
|
||||
const res = await statistic(this.select,true)
|
||||
this.statistic = res
|
||||
this.$emit('send-data',res)
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
departments () {
|
||||
return this.getStatistics()?.statistic?.departmentList
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getStatistic();
|
||||
},
|
||||
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>
|
||||
@ -1,274 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover" id="todo-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice"></SvgIcon>
|
||||
<span style="padding-left: 15px"
|
||||
>待办事项</span
|
||||
>
|
||||
<i class="el-icon-more" style="margin-left: auto; font-size: 20px"></i>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;height: 100%;width: 100%;">
|
||||
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
|
||||
<Table
|
||||
:show-header="false"
|
||||
:height="tableHeight"
|
||||
:loading="loading"
|
||||
size="small"
|
||||
:data="/^\/system/.test(this.$route.path) ? example : list"
|
||||
:columns="table"
|
||||
></Table>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
import { getNotice2, readNotice } from "@/api/dashboard/notice";
|
||||
import ElementResize from "element-resize-detector";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
name: "card2",
|
||||
layout: {
|
||||
x: 4,
|
||||
y: 0,
|
||||
w: 6,
|
||||
h: 4,
|
||||
i: "2",
|
||||
name: "待办事项",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
window: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
},
|
||||
example: [
|
||||
{
|
||||
type: 1,
|
||||
content: "示例1",
|
||||
created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
||||
read_count: true,
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
content: "示例2",
|
||||
created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
|
||||
read_count: false,
|
||||
},
|
||||
],
|
||||
select: {
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
},
|
||||
tableHeight: 120,
|
||||
loading: false,
|
||||
list: [],
|
||||
total: 0,
|
||||
table: [
|
||||
{
|
||||
type: "index",
|
||||
title: " ",
|
||||
align: "center",
|
||||
width: 46,
|
||||
},
|
||||
{
|
||||
title: "收件时间",
|
||||
key: "created_at",
|
||||
width: 160,
|
||||
align: "center",
|
||||
render: (h, { row }) => {
|
||||
return h("span",{ style: { color: "#4d8bdc" } }, this.$moment(row.created_at).format("YYYY-MM-DD HH:mm:ss"));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "内容",
|
||||
key: "title",
|
||||
align: "left",
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
minWidth: 200,
|
||||
},
|
||||
{
|
||||
title: "查看",
|
||||
key: "show",
|
||||
width: 180,
|
||||
render: (h, { row }) => {
|
||||
return h('div',[
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "default",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
background: "#f0f3fa",
|
||||
color: "#333",
|
||||
border: "1px solid #dae1f0",
|
||||
fontSize: "13px"
|
||||
},
|
||||
on: {
|
||||
["click"]: (_) => {
|
||||
if(row.from_type === 'contract') {
|
||||
this.$router.push({
|
||||
path: '/contract/contract/contractList',
|
||||
query: {
|
||||
keyword:/\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
|
||||
}
|
||||
})
|
||||
} else {
|
||||
window.open(
|
||||
`${process.env.VUE_APP_OUT_OLD}/flow/view/${row.id}?auth_token=${this.$store.getters.oa_token}`,
|
||||
"edit",
|
||||
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"查看"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "primary",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
"margin-left": "6px",
|
||||
fontSize: "13px"
|
||||
},
|
||||
on: {
|
||||
["click"]: (_) => {
|
||||
if(row.from_type === 'contract') {
|
||||
this.$router.push({
|
||||
path: '/contract/contract/contractList',
|
||||
query: {
|
||||
keyword:/\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
|
||||
}
|
||||
})
|
||||
} else {
|
||||
window.open(
|
||||
`${process.env.VUE_APP_OUT_OLD}/flow/deal/${row.id}?auth_token=${this.$store.getters.oa_token}`,
|
||||
"edit",
|
||||
`top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
"办理"
|
||||
)
|
||||
]);
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: "状态",
|
||||
// key: "read_count",
|
||||
// width: 120,
|
||||
// render: (h, { row }) => {
|
||||
// return row.read_count
|
||||
// ? h(
|
||||
// "el-link",
|
||||
// {
|
||||
// props: {
|
||||
// type: "success",
|
||||
// underline: false,
|
||||
// },
|
||||
// },
|
||||
// "已读"
|
||||
// )
|
||||
// : h(
|
||||
// "Button",
|
||||
// {
|
||||
// props: {
|
||||
// type: "error",
|
||||
// size: "small",
|
||||
// ghost: true
|
||||
// },
|
||||
// on: {
|
||||
// ['click']:e => {
|
||||
// if(/^\/system/.test(this.$route.path)) return
|
||||
//
|
||||
// readNotice({
|
||||
// id: row.id
|
||||
// }).then(res => {
|
||||
// this.$message({
|
||||
// type: 'success',
|
||||
// message: '已读'
|
||||
// })
|
||||
// this.getNotices()
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// "未读"
|
||||
// );
|
||||
// },
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getNotices() {
|
||||
if (/^\/system/.test(this.$route.path)) return;
|
||||
try {
|
||||
this.loading = true;
|
||||
const res = await getNotice2(this.select, true);
|
||||
this.list = res;
|
||||
this.total = res.length;
|
||||
this.loading = false;
|
||||
} catch (e) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
init() {
|
||||
let cardDom = document.getElementById("todo-card");
|
||||
let cardTitleH = 58;
|
||||
const elementResize = ElementResize({
|
||||
strategy: "scroll",
|
||||
});
|
||||
elementResize.listenTo(cardDom, (ele) => {
|
||||
this.tableHeight =
|
||||
cardDom.getBoundingClientRect().height -
|
||||
40 -
|
||||
cardTitleH
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
this.window.width = screen.availWidth * 0.95;
|
||||
this.window.height = screen.availHeight * 0.95;
|
||||
this.window.top = (window.screen.height - 30 - this.window.height) / 2;
|
||||
this.window.left = (window.screen.width - 10 - this.window.width) / 2;
|
||||
this.getNotices();
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::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;
|
||||
}
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,186 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover">
|
||||
<div slot="header" class="clearfix">
|
||||
<SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="calendar-check"></SvgIcon>
|
||||
<span style="padding-left: 15px;">预算总体执行情况</span>
|
||||
<DatePicker transfer :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;margin-left: auto;"
|
||||
type="year" @on-change="changeYear"></DatePicker>
|
||||
</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">{{moneyFormatter(statistic.progress.money_total_1 || 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">{{moneyFormatter(statistic.progress.money_total_2 || 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">{{moneyFormatter(statistic.progress.use_money_total || 0)}}</div>
|
||||
<div class="progress-card-item__label">已支付金额</div>
|
||||
</div>
|
||||
<div class="progress-card-item">
|
||||
<MyProgress width="145px" height="145px" title="执行率" :chart-data="[{value:statistic.progress.money_total_2 ? statistic.progress.money_total_2 : statistic.progress.money_total_1,name:'合计金额'},{value:statistic.progress.use_money_total,name:'已用金额'}]" ></MyProgress>
|
||||
<!-- <el-progress :width="145" type="circle" stroke-width="20" :format="per => `${per}%\n执行率`" :percentage="40"></el-progress>-->
|
||||
<!-- <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 MyProgress from "@/components/Progress";
|
||||
import SvgIcon from "@/components/SvgIcon";
|
||||
import { moneyFormatter } from "@/utils"
|
||||
import { statistic } from '@/api/dashboard/notice'
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon,
|
||||
MyProgress
|
||||
},
|
||||
name:"card1",
|
||||
layout:{
|
||||
x:0,
|
||||
y:0,
|
||||
w:4,
|
||||
h:5,
|
||||
i:"1",
|
||||
name:"预算统计",
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
year: new Date().getFullYear().toString()
|
||||
},
|
||||
statistic: {
|
||||
progress: {
|
||||
money_total_1: 0,
|
||||
money_total_2: 0,
|
||||
use_money_total: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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">
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.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>
|
||||
<style>
|
||||
.progress-card-item > .icon-yuan > svg > use {
|
||||
transform: scale(0.55);
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,305 +0,0 @@
|
||||
<template>
|
||||
<el-card class="box-card" shadow="hover" id="type-card">
|
||||
<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 id="type-card-body" style="position: relative;height: 100%;width: 100%;">
|
||||
<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
|
||||
<Table style="width: 100%;" :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
|
||||
</div>
|
||||
</div>
|
||||
</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";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SvgIcon
|
||||
},
|
||||
name: "card3",
|
||||
layout: {
|
||||
x: 0,
|
||||
y: 5,
|
||||
w: 6,
|
||||
h: 4,
|
||||
i: "5",
|
||||
name: "预算类型执行情况",
|
||||
},
|
||||
inject: {
|
||||
getStatistic: {
|
||||
default: () => {
|
||||
return () => {
|
||||
return {
|
||||
statistic: {
|
||||
typeList: [
|
||||
{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "1150000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},{
|
||||
money_total_1: "17549700.00",
|
||||
money_total_2: "0.00",
|
||||
ids: "23,39,38,36,35,33,32,30,28,26,25,6,22,20,17,16,14,13,12,11,9,8",
|
||||
type: 7,
|
||||
use_money_total: "50000.00",
|
||||
type_text: "项目经费",
|
||||
money_total: "0.00",
|
||||
end_money: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableHeight: 200,
|
||||
table: [
|
||||
{
|
||||
title: "预算类别",
|
||||
width: 100,
|
||||
key: "type_text",
|
||||
ellipsis: true,
|
||||
tooltip: true,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "执行情况",
|
||||
minWidth: 120,
|
||||
fixed: "right",
|
||||
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: {
|
||||
"stroke-width": 13,
|
||||
percentage: Number(per),
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "年初预算合计金额(元)",
|
||||
width: 170,
|
||||
align: "right",
|
||||
key: "money_total_1",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.money_total_1));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "调整后预算合计金额(元)",
|
||||
width: 170,
|
||||
align: "right",
|
||||
key: "money_total_2",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.money_total_2));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "已使用(元)",
|
||||
width: 120,
|
||||
align: "right",
|
||||
key: "use_money_total",
|
||||
render: (h, { row }) => {
|
||||
return h("span", {}, moneyFormatter(row.use_money_total));
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let cardDom = document.getElementById('type-card');
|
||||
let cardTitleH = 58;
|
||||
const elementResize = ElementResize({
|
||||
strategy:'scroll'
|
||||
})
|
||||
elementResize.listenTo(cardDom,ele => {
|
||||
this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
departmentList() {
|
||||
if (this.getStatistic)
|
||||
return this.getStatistic()?.statistic?.typeList || [];
|
||||
},
|
||||
},
|
||||
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;
|
||||
}
|
||||
::v-deep .el-progress {
|
||||
white-space: nowrap;
|
||||
}
|
||||
::v-deep .el-progress__text {
|
||||
color: rgb(77, 139, 220);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue