|
|
|
@ -1,256 +1,434 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
|
<el-drawer
|
|
|
|
<el-drawer size="880px" title="执行统计" :visible.sync="drawer" direction="rtl">
|
|
|
|
size="880px"
|
|
|
|
<div style="padding: 0 20px;">
|
|
|
|
title="执行统计"
|
|
|
|
<template v-if="type === 1">
|
|
|
|
:visible.sync="drawer"
|
|
|
|
<Card>
|
|
|
|
direction="rtl">
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="e => {
|
|
|
|
<div style="padding: 0 20px;">
|
|
|
|
departmentSelect = e ? departments.map(i => (i.plan_department_id)) : [];
|
|
|
|
<template v-if="type === 1">
|
|
|
|
isIndeterminate = false;
|
|
|
|
<Card>
|
|
|
|
}">全选</el-checkbox>
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate"
|
|
|
|
<el-checkbox-group style="max-height:200px" v-model="departmentSelect" size="small" @change="e => {
|
|
|
|
v-model="checkAll"
|
|
|
|
let count = e.length;
|
|
|
|
@change="e => {
|
|
|
|
checkAll = count === departments.length;
|
|
|
|
departmentSelect = e ? departments.map(i => (i.plan_department_id)) : [];
|
|
|
|
isIndeterminate = count > 0 && count < departments.length;
|
|
|
|
isIndeterminate = false;
|
|
|
|
}">
|
|
|
|
}">全选</el-checkbox>
|
|
|
|
<el-checkbox v-for="item in departments" :label="item.plan_department_id"
|
|
|
|
<el-checkbox-group v-model="departmentSelect"
|
|
|
|
:key="item.plan_department_id">{{item.plan_department ? item.plan_department.name : item.plan_department_id}}</el-checkbox>
|
|
|
|
size="small"
|
|
|
|
</el-checkbox-group>
|
|
|
|
@change="e => {
|
|
|
|
</Card>
|
|
|
|
let count = e.length;
|
|
|
|
|
|
|
|
checkAll = count === departments.length;
|
|
|
|
<Card style="margin-top: 20px;">
|
|
|
|
isIndeterminate = count > 0 && count < departments.length;
|
|
|
|
<div class="content">
|
|
|
|
}">
|
|
|
|
<div class="item">
|
|
|
|
<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>
|
|
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
|
|
</el-checkbox-group>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="item">
|
|
|
|
<Card style="margin-top: 20px;">
|
|
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
|
|
<div class="content">
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
|
|
|
|
<div class="item">
|
|
|
|
</div>
|
|
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
|
|
<div class="item">
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1)}}</div>
|
|
|
|
<p class="item__title">已使用（元）</p>
|
|
|
|
</div>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
|
|
|
|
<div class="item">
|
|
|
|
</div>
|
|
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
|
|
<div class="item">
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2)}}</div>
|
|
|
|
<p class="item__title">执行情况</p>
|
|
|
|
</div>
|
|
|
|
<el-progress class="item__value" text-inside :stroke-width="20"
|
|
|
|
<div class="item">
|
|
|
|
:percentage="totalPercent"></el-progress>
|
|
|
|
<p class="item__title">已使用（元）</p>
|
|
|
|
</div>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotal)}}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
<div class="item">
|
|
|
|
</template>
|
|
|
|
<p class="item__title">执行情况</p>
|
|
|
|
<template v-else>
|
|
|
|
<el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
|
|
|
|
<Card >
|
|
|
|
</div>
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="e => {
|
|
|
|
</div>
|
|
|
|
typeSelect = e ? types.map(i => (i.id)) : [];
|
|
|
|
</Card>
|
|
|
|
isIndeterminate = false;
|
|
|
|
</template>
|
|
|
|
}">全选</el-checkbox>
|
|
|
|
<template v-else>
|
|
|
|
|
|
|
|
<Card>
|
|
|
|
|
|
|
|
<el-checkbox :indeterminate="isIndeterminate2"
|
|
|
|
<el-checkbox-group style="max-height:200px" v-model="typeSelect" size="small" @change="e => {
|
|
|
|
v-model="checkAll2"
|
|
|
|
let count = e.length;
|
|
|
|
@change="e => {
|
|
|
|
checkAll2 = count === types.length;
|
|
|
|
typeSelect = e ? types.map(i => (i.id)) : [];
|
|
|
|
isIndeterminate2 = count > 0 && count < types.length;
|
|
|
|
isIndeterminate = false;
|
|
|
|
}">
|
|
|
|
}">全选</el-checkbox>
|
|
|
|
<el-checkbox v-for="item in types" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
|
|
|
|
<el-checkbox-group v-model="typeSelect"
|
|
|
|
</el-checkbox-group>
|
|
|
|
size="small"
|
|
|
|
</Card>
|
|
|
|
@change="e => {
|
|
|
|
|
|
|
|
let count = e.length;
|
|
|
|
<Card style="margin-top: 20px;">
|
|
|
|
checkAll2 = count === types.length;
|
|
|
|
<div class="content">
|
|
|
|
isIndeterminate2 = count > 0 && count < types.length;
|
|
|
|
<div class="item">
|
|
|
|
}">
|
|
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
|
|
<el-checkbox v-for="item in types" :label="item.id" :key="item.id">{{item.name}}</el-checkbox>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
|
|
|
|
</el-checkbox-group>
|
|
|
|
</div>
|
|
|
|
</Card>
|
|
|
|
<div class="item">
|
|
|
|
|
|
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
|
|
<Card style="margin-top: 20px;">
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
|
|
|
|
<div class="content">
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<div class="item">
|
|
|
|
<p class="item__title">年初预算合计金额（元）</p>
|
|
|
|
<p class="item__title">已使用（元）</p>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal1Type)}}</div>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item">
|
|
|
|
<div class="item">
|
|
|
|
<p class="item__title">调整后预算合计金额（元）</p>
|
|
|
|
<p class="item__title">执行情况</p>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalMoneyTotal2Type)}}</div>
|
|
|
|
<el-progress class="item__value" text-inside :stroke-width="20"
|
|
|
|
</div>
|
|
|
|
:percentage="totalPercent"></el-progress>
|
|
|
|
<div class="item">
|
|
|
|
</div>
|
|
|
|
<p class="item__title">已使用（元）</p>
|
|
|
|
</div>
|
|
|
|
<div class="item__value">{{moneyFormatter(totalUseMoneyTotalType)}}</div>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<div class="item">
|
|
|
|
|
|
|
|
<p class="item__title">执行情况</p>
|
|
|
|
<!-- <barChart v-if="drawer" :xAxisData="xAxis" :seriesData="seriesData" /> -->
|
|
|
|
<el-progress class="item__value" text-inside :stroke-width="20" :percentage="totalPercent"></el-progress>
|
|
|
|
<div class="bar-chart" v-if="drawer">
|
|
|
|
</div>
|
|
|
|
<!-- 图表容器 -->
|
|
|
|
</div>
|
|
|
|
<div ref="chartDom" class="chart-container" style="background: #fff; min-height: 400px;"></div>
|
|
|
|
</Card>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</el-drawer>
|
|
|
|
</el-drawer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import { moneyFormatter } from "@/utils"
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
import { typeCarry } from "@/api/dashboard/notice"
|
|
|
|
import {
|
|
|
|
export default {
|
|
|
|
moneyFormatter
|
|
|
|
props: {
|
|
|
|
} from "@/utils"
|
|
|
|
departments: Array,
|
|
|
|
import {
|
|
|
|
year: [Number,String]
|
|
|
|
typeCarry
|
|
|
|
},
|
|
|
|
} from "@/api/dashboard/notice"
|
|
|
|
data() {
|
|
|
|
// import barChart from "@/views/dashboard/components/barChart.vue"
|
|
|
|
return {
|
|
|
|
export default {
|
|
|
|
type: 1,//1科室2类型
|
|
|
|
props: {
|
|
|
|
drawer: false,
|
|
|
|
departments: Array,
|
|
|
|
isIndeterminate: false,
|
|
|
|
year: [Number, String]
|
|
|
|
checkAll: false,
|
|
|
|
},
|
|
|
|
|
|
|
|
components: {
|
|
|
|
departmentSelect: [],
|
|
|
|
// barChart
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
isIndeterminate2: false,
|
|
|
|
return {
|
|
|
|
checkAll2: false,
|
|
|
|
type: 1, //1科室2类型
|
|
|
|
types: [],
|
|
|
|
drawer: false,
|
|
|
|
typeSelect: [],
|
|
|
|
isIndeterminate: false,
|
|
|
|
}
|
|
|
|
checkAll: false,
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
departmentSelect: [],
|
|
|
|
moneyFormatter,
|
|
|
|
|
|
|
|
show () {
|
|
|
|
|
|
|
|
this.drawer = true
|
|
|
|
isIndeterminate2: false,
|
|
|
|
},
|
|
|
|
checkAll2: false,
|
|
|
|
hide () {
|
|
|
|
types: [],
|
|
|
|
this.drawer = false
|
|
|
|
typeSelect: [],
|
|
|
|
},
|
|
|
|
chartInstance: null,
|
|
|
|
setType (type) {
|
|
|
|
}
|
|
|
|
this.type = type
|
|
|
|
},
|
|
|
|
}
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
},
|
|
|
|
selectedDepartments () {
|
|
|
|
methods: {
|
|
|
|
return this.departments?.filter(i => this.departmentSelect.find(j => j === i.plan_department_id)) || []
|
|
|
|
moneyFormatter,
|
|
|
|
},
|
|
|
|
show() {
|
|
|
|
totalMoneyTotal1 () {
|
|
|
|
this.drawer = true
|
|
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
|
|
|
|
},
|
|
|
|
},
|
|
|
|
hide() {
|
|
|
|
totalMoneyTotal2 () {
|
|
|
|
this.drawer = false
|
|
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
|
|
|
|
},
|
|
|
|
},
|
|
|
|
setType(type) {
|
|
|
|
totalUseMoneyTotal () {
|
|
|
|
this.type = type
|
|
|
|
return this.selectedDepartments.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 初始化图表
|
|
|
|
totalPercent () {
|
|
|
|
initChart() {
|
|
|
|
if (this.type === 1) {
|
|
|
|
this.chartInstance = echarts.init(this.$refs.chartDom);
|
|
|
|
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
|
|
|
|
console.log("this.chartInstance", this.chartInstance)
|
|
|
|
} else {
|
|
|
|
this.updateChart()
|
|
|
|
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
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
// 更新图表数据
|
|
|
|
|
|
|
|
updateChart() {
|
|
|
|
selectedTypes () {
|
|
|
|
if (!this.chartInstance) return;
|
|
|
|
return this.types?.filter(i => this.typeSelect.find(j => j === i.id)) || []
|
|
|
|
console.log('xAxisData', this.xAxisData);
|
|
|
|
},
|
|
|
|
console.log('ydata1', this.ydata1);
|
|
|
|
totalMoneyTotal1Type () {
|
|
|
|
const option = {
|
|
|
|
return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.money_total_1||0)),0) || 0
|
|
|
|
tooltip: {
|
|
|
|
},
|
|
|
|
trigger: 'axis',
|
|
|
|
totalMoneyTotal2Type () {
|
|
|
|
axisPointer: {
|
|
|
|
return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.money_total_2||0)),0) || 0
|
|
|
|
type: 'shadow'
|
|
|
|
},
|
|
|
|
}, // 阴影指示器
|
|
|
|
totalUseMoneyTotalType () {
|
|
|
|
formatter: function(params) {
|
|
|
|
return this.selectedTypes?.reduce((pre,cur)=>(pre+Number(cur.use_money_total||0)),0) || 0
|
|
|
|
console.log("params",params)
|
|
|
|
},
|
|
|
|
let result = params[0].axisValue + '<br/>';
|
|
|
|
},
|
|
|
|
params.forEach(item => {
|
|
|
|
watch: {
|
|
|
|
result += item.marker + item.seriesName + ': ' + item.value + '<br/>';
|
|
|
|
year: {
|
|
|
|
});
|
|
|
|
handler:function(val) {
|
|
|
|
return result;
|
|
|
|
typeCarry({
|
|
|
|
}
|
|
|
|
year: val
|
|
|
|
},
|
|
|
|
}).then(res => {
|
|
|
|
legend: {
|
|
|
|
this.types = res
|
|
|
|
// 图例使用 seriesData 中的 name
|
|
|
|
console.log(res)
|
|
|
|
data: ['年初预算合计金额', '调整后预算合计金额', '已使用'],
|
|
|
|
})
|
|
|
|
top: 10
|
|
|
|
},
|
|
|
|
},
|
|
|
|
immediate: true
|
|
|
|
grid: {
|
|
|
|
}
|
|
|
|
left: '3%',
|
|
|
|
}
|
|
|
|
right: '4%',
|
|
|
|
}
|
|
|
|
bottom: '3%',
|
|
|
|
</script>
|
|
|
|
containLabel: true // 包含坐标轴刻度标签
|
|
|
|
|
|
|
|
},
|
|
|
|
<style scoped lang="scss">
|
|
|
|
xAxis: {
|
|
|
|
$color: linear-gradient(to top left, #ff6641, #ec3634),
|
|
|
|
type: 'category',
|
|
|
|
linear-gradient(to top left, #4bfbb2, #49f2ac),
|
|
|
|
data: this.xAxisData, // 用 computed 的 xAxisData
|
|
|
|
linear-gradient(to top left, #efd458, #ba840a),
|
|
|
|
axisLabel: {
|
|
|
|
linear-gradient(to top left, #05e6ff, #0069fe),
|
|
|
|
interval: 0,
|
|
|
|
linear-gradient(to top left, #a5ffff, #8fccd9),
|
|
|
|
rotate: 30 // 可根据实际情况调整角度
|
|
|
|
linear-gradient(to top left, #fca7ff, #7a519a),
|
|
|
|
}
|
|
|
|
linear-gradient(to top left, #a4e829, #06ac2e);
|
|
|
|
},
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
@for $index from 1 through length($color) {
|
|
|
|
type: 'value',
|
|
|
|
.card#{$index} {
|
|
|
|
// name: '金额（元）',
|
|
|
|
color: #fff;
|
|
|
|
axisLabel: {
|
|
|
|
display: flex;
|
|
|
|
formatter: '{value}' // 格式化Y轴标签
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
justify-content: center;
|
|
|
|
},
|
|
|
|
background: nth($color, $index);
|
|
|
|
series: [{
|
|
|
|
grid-area: card#{$index};
|
|
|
|
type:'bar',
|
|
|
|
border-radius: 4px;
|
|
|
|
name: '年初预算合计金额',
|
|
|
|
filter: drop-shadow(0 2px 8px #0004);
|
|
|
|
data: this.ydata1, // 对应X轴每项的数值
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
padding: 20px;
|
|
|
|
color: '#5470C6'
|
|
|
|
|
|
|
|
} // 自定义颜色
|
|
|
|
.item__title {
|
|
|
|
},
|
|
|
|
font-weight: 600;
|
|
|
|
{
|
|
|
|
text-align: center;
|
|
|
|
type:'bar',
|
|
|
|
|
|
|
|
name: '调整后预算合计金额',
|
|
|
|
padding-bottom: 20px;
|
|
|
|
data: this.ydata2,
|
|
|
|
position: relative;
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
color: '#91CC75'
|
|
|
|
&::after {
|
|
|
|
}
|
|
|
|
content: '';
|
|
|
|
},
|
|
|
|
height: 2px;
|
|
|
|
{
|
|
|
|
background: linear-gradient(to right,#fff 40%,#0000);
|
|
|
|
type:'bar',
|
|
|
|
|
|
|
|
name: '已使用',
|
|
|
|
position: absolute;
|
|
|
|
data: this.ydata3,
|
|
|
|
bottom: -1px;
|
|
|
|
itemStyle: {
|
|
|
|
left: 0;
|
|
|
|
color: '#FAC858'
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
|
|
.item__value {
|
|
|
|
};
|
|
|
|
text-align: center;
|
|
|
|
this.$nextTick(() => {
|
|
|
|
flex: 1;
|
|
|
|
this.chartInstance.setOption(option);
|
|
|
|
padding-top: 20px;
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
.content {
|
|
|
|
computed: {
|
|
|
|
display: grid;
|
|
|
|
selectedDepartments() {
|
|
|
|
grid-template-columns: repeat(4,1fr);
|
|
|
|
return this.departments?.filter(i => this.departmentSelect.find(j => j === i.plan_department_id)) || []
|
|
|
|
grid-gap: 20px;
|
|
|
|
},
|
|
|
|
|
|
|
|
totalMoneyTotal1() {
|
|
|
|
padding: 20px 0;
|
|
|
|
return this.selectedDepartments.reduce((pre, cur) => (pre + Number(cur.money_total_1 || 0)), 0) || 0
|
|
|
|
.item__title {
|
|
|
|
},
|
|
|
|
text-align: center;
|
|
|
|
totalMoneyTotal2() {
|
|
|
|
}
|
|
|
|
return this.selectedDepartments.reduce((pre, cur) => (pre + Number(cur.money_total_2 || 0)), 0) || 0
|
|
|
|
.item__value {
|
|
|
|
},
|
|
|
|
font-weight: 600;
|
|
|
|
totalUseMoneyTotal() {
|
|
|
|
font-size: 17px;
|
|
|
|
return this.selectedDepartments.reduce((pre, cur) => (pre + Number(cur.use_money_total || 0)), 0) || 0
|
|
|
|
text-align: center;
|
|
|
|
},
|
|
|
|
|
|
|
|
totalPercent() {
|
|
|
|
padding-top: 20px;
|
|
|
|
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
|
|
|
|
::v-deep .el-checkbox {
|
|
|
|
} else {
|
|
|
|
display: block;
|
|
|
|
return (Number(this.totalMoneyTotal2Type !== 0) ? (Math.round(Number(this.totalUseMoneyTotalType) / Number(
|
|
|
|
margin-bottom: 6px;
|
|
|
|
this.totalMoneyTotal2Type) * 10000) / 100) : (Math.round(Number(this.totalUseMoneyTotalType) / Number(
|
|
|
|
}
|
|
|
|
this.totalMoneyTotal1Type) * 10000) / 100)) || 0
|
|
|
|
::v-deep .el-checkbox-group {
|
|
|
|
}
|
|
|
|
max-height: 300px;
|
|
|
|
},
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
|
|
|
|
selectedTypes() {
|
|
|
|
margin-left: 20px;
|
|
|
|
return this.types?.filter(i => this.typeSelect.find(j => j === i.id)) || []
|
|
|
|
}
|
|
|
|
},
|
|
|
|
</style>
|
|
|
|
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
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
xAxisData() {
|
|
|
|
|
|
|
|
if (this.type == 1) {
|
|
|
|
|
|
|
|
return this.selectedDepartments.map(item => item.plan_department?.name || '');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return this.selectedTypes.map(item => item?.name || '');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
ydata1() {
|
|
|
|
|
|
|
|
if (this.type == 1) {
|
|
|
|
|
|
|
|
return this.selectedDepartments.map(item => Number(item.money_total_1) || 0)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return this.selectedTypes.map(item => Number(item.money_total_1) || 0)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
ydata2() {
|
|
|
|
|
|
|
|
if (this.type == 1) {
|
|
|
|
|
|
|
|
return this.selectedDepartments.map(item => Number(item.money_total_2) || 0)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return this.selectedTypes.map(item => Number(item.money_total_2) || 0)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
ydata3() {
|
|
|
|
|
|
|
|
if (this.type == 1) {
|
|
|
|
|
|
|
|
return this.selectedDepartments.map(item => Number(item.use_money_total) || 0)
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return this.selectedTypes.map(item => Number(item.use_money_total) || 0)
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
|
|
|
|
year: {
|
|
|
|
|
|
|
|
handler: function(val) {
|
|
|
|
|
|
|
|
typeCarry({
|
|
|
|
|
|
|
|
year: val
|
|
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
|
|
this.types = res
|
|
|
|
|
|
|
|
// this.xAxisData = types.map(item=>item.name?item.name:'') // 移除这行，xAxisData 由 computed 负责
|
|
|
|
|
|
|
|
console.log(res)
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
departments:{
|
|
|
|
|
|
|
|
handler: function(val) {
|
|
|
|
|
|
|
|
// this.xAxisData = val.map(item=>item.plan_department?item.plan_department.name:'') // 移除这行，xAxisData 由 computed 负责
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
immediate: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
drawer(newVal) {
|
|
|
|
|
|
|
|
if (newVal) {
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
|
|
|
// this.updateChart();
|
|
|
|
|
|
|
|
this.initChart()
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
if (this.chartInstance) {
|
|
|
|
|
|
|
|
this.chartInstance.dispose();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
departmentSelect: {
|
|
|
|
|
|
|
|
handler() {
|
|
|
|
|
|
|
|
if (this.drawer && this.chartInstance) {
|
|
|
|
|
|
|
|
this.updateChart();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
deep: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
typeSelect: {
|
|
|
|
|
|
|
|
handler() {
|
|
|
|
|
|
|
|
if (this.drawer && this.chartInstance) {
|
|
|
|
|
|
|
|
this.updateChart();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
deep: true
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
.chart-container {
|
|
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
|
|
height: 250px;
|
|
|
|
|
|
|
|
margin:0 auto;
|
|
|
|
|
|
|
|
/* 固定高度，可根据需求调整 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$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>
|
|
|
|
|
