|
|
|
|
@ -1,25 +1,29 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-card class="box-card" shadow="hover" id="department-card">
|
|
|
|
|
<div slot="header">
|
|
|
|
|
<span style="border-left: 3px solid #338de3ff; padding-left: 6px"
|
|
|
|
|
<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="float: right; font-size: 20px"></i>
|
|
|
|
|
<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 :height="tableHeight" size="small" :data="departmentList" :columns="table"></Table>
|
|
|
|
|
</div>
|
|
|
|
|
<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,
|
|
|
|
|
@ -65,6 +69,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
chart: "",
|
|
|
|
|
tableHeight: 200,
|
|
|
|
|
table: [
|
|
|
|
|
{
|
|
|
|
|
@ -129,14 +134,97 @@ export default {
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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: 40,
|
|
|
|
|
type: 'bar',
|
|
|
|
|
stack: "a",
|
|
|
|
|
name: "合计金额（元）",
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
color: "#fff",
|
|
|
|
|
formatter: (params) => {
|
|
|
|
|
console.log(params)
|
|
|
|
|
let m2 = params?.money_total_2 || 0;
|
|
|
|
|
let m1 = params?.money_total_1 || 0;
|
|
|
|
|
let m3 = params?.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: 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: 40,
|
|
|
|
|
type: "bar",
|
|
|
|
|
stack: "a",
|
|
|
|
|
name: "已使用金额（元）",
|
|
|
|
|
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.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
|
|
|
|
//this.setOptions()
|
|
|
|
|
this.chart.resize();
|
|
|
|
|
// this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
@ -146,6 +234,14 @@ export default {
|
|
|
|
|
return this.getStatistic()?.statistic?.departmentList || [];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
departmentList: {
|
|
|
|
|
handler: function (newVal) {
|
|
|
|
|
this.setOptions()
|
|
|
|
|
},
|
|
|
|
|
immediate: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.init();
|
|
|
|
|
@ -154,6 +250,10 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.clearfix {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-progress--line {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
@ -165,4 +265,9 @@ export default {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 58px);
|
|
|
|
|
}
|
|
|
|
|
#department-chart {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
min-height: 200px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
