51f9221a
 wuxw
加入报表功能
|
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<div id="configFeeSummary" style="height:300px;width:100%;"></div>
</el-card>
</template>
<script>
import * as echarts from 'echarts'
import { queryReportConfigFeeSummary } from '@/api/report/reportFeeSummaryApi'
export default {
name: 'ConfigFeeSummary',
data() {
return {
chart: null,
conditions: {}
}
},
mounted() {
this.initChart()
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
if (this.chart) {
this.chart.dispose()
}
},
methods: {
notify(params) {
this.conditions = params
this.loadConfigFeeSummaryRate()
},
initChart() {
this.chart = echarts.init(document.getElementById('configFeeSummary'))
this.setDefaultOption()
},
setDefaultOption() {
const option = {
legend: {},
tooltip: {},
title: {
show: true,
text: this.$t('reportFeeSummary.configFeeRateStatistics')
},
color: ['#FFDAB9', '#66CDAA'],
dataset: {
source: [
['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [
{ type: 'bar' },
{ type: 'bar' }
]
}
this.chart.setOption(option)
},
async loadConfigFeeSummaryRate() {
try {
const { data } = await queryReportConfigFeeSummary(this.conditions )
this.initConfigFeeSummaryChart(data)
} catch (error) {
console.error('Failed to load config fee summary:', error)
}
},
initConfigFeeSummaryChart(data) {
if (!this.chart) {
this.initChart()
}
const source = [
['product', this.$t('reportFeeSummary.roomChargeRate'), this.$t('reportFeeSummary.chargeRate')]
]
data.forEach(item => {
source.push([
item.name,
item.feeRoomRate,
item.feeRate
])
})
this.chart.setOption({
dataset: {
source
}
})
},
handleResize() {
if (this.chart) {
this.chart.resize()
}
}
}
}
</script>
<style lang="scss" scoped>
.config-fee-summary-container {
margin-bottom: 20px;
}
</style>
|
