|
@@ -1,6 +1,12 @@
|
|
1
|
+<!--
|
|
2
|
+ * @Author: ysh
|
|
3
|
+ * @Date: 2024-10-18 11:17:48
|
|
4
|
+ * @LastEditors: Please set LastEditors
|
|
5
|
+ * @LastEditTime: 2024-10-23 17:00:10
|
|
6
|
+-->
|
1
|
7
|
<template>
|
2
|
8
|
<div style="width:100%;" v-loading="loading">
|
3
|
|
- <div class="titles">借款统计</div>
|
|
9
|
+ <div class="titles">借款和结算统计</div>
|
4
|
10
|
<div class="warpper">
|
5
|
11
|
<div class="left">
|
6
|
12
|
<div class="left-top" id="borrowBar"></div>
|
|
@@ -8,9 +14,12 @@
|
8
|
14
|
</div>
|
9
|
15
|
<div class="middle">
|
10
|
16
|
<div class="middle-top" id="borrowLine"></div>
|
11
|
|
- <div class="middle-top" id="borrowUsageAmountPie" v-loading="dataLoading"></div>
|
|
17
|
+ <div class="middle-top" id="borrowProject"></div>
|
|
18
|
+ </div>
|
|
19
|
+ <div class="right">
|
|
20
|
+ <div class="right-top" id="settleBar"></div>
|
|
21
|
+ <div class="right-top" id="settleLine"></div>
|
12
|
22
|
</div>
|
13
|
|
- <div class="right"></div>
|
14
|
23
|
</div>
|
15
|
24
|
</div>
|
16
|
25
|
</template>
|
|
@@ -18,20 +27,24 @@
|
18
|
27
|
<script>
|
19
|
28
|
import { ehcartsInit } from '@/utils/echarts'
|
20
|
29
|
import { getBorrowStatistic } from '@/api/oa/borrow/borrow';
|
21
|
|
-let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowUsageAmountChart
|
|
30
|
+let borrowYearChart, borrowAmountChart, borrowUsageChart, borrowProjectChart, settleYearChart, settleAmountChart
|
22
|
31
|
export default {
|
23
|
32
|
props: {
|
24
|
33
|
borrowData: {
|
25
|
34
|
type: Object,
|
26
|
35
|
require: true,
|
27
|
|
- }
|
|
36
|
+ },
|
|
37
|
+ settleData: {
|
|
38
|
+ type: Object,
|
|
39
|
+ require: true,
|
|
40
|
+ },
|
28
|
41
|
},
|
29
|
42
|
watch: {
|
30
|
43
|
borrowUsage() {
|
31
|
44
|
this.initBorrowUsagePie(this.activeYear)
|
32
|
45
|
},
|
33
|
46
|
borrowUsageAmount() {
|
34
|
|
- this.initBorrowUsageAmountPie(this.activeYear)
|
|
47
|
+ // this.initBorrowUsageAmountPie(this.activeYear)
|
35
|
48
|
}
|
36
|
49
|
},
|
37
|
50
|
data() {
|
|
@@ -41,7 +54,12 @@ export default {
|
41
|
54
|
borrowUsage: {},
|
42
|
55
|
borrowUsageAmount: {},
|
43
|
56
|
borrowYear: {},
|
|
57
|
+ settleYear: {},
|
|
58
|
+ settleAmount: {},
|
|
59
|
+ yearProjectAmount: {},
|
|
60
|
+ yearProjectCount: {},
|
44
|
61
|
sumBorrowAmount: 0,
|
|
62
|
+ sumSettleAmount: 0,
|
45
|
63
|
dataLoading: false,
|
46
|
64
|
activeYear: ''
|
47
|
65
|
}
|
|
@@ -55,7 +73,10 @@ export default {
|
55
|
73
|
this.initBorrowYearBar();
|
56
|
74
|
this.initBorrowAmountLine();
|
57
|
75
|
this.initBorrowUsagePie('');
|
58
|
|
- this.initBorrowUsageAmountPie('');
|
|
76
|
+ // this.initBorrowUsageAmountPie('');
|
|
77
|
+ this.initBorrowProjectLineBar();
|
|
78
|
+ this.initSettleYearBar();
|
|
79
|
+ this.initSettleAmountLine();
|
59
|
80
|
},
|
60
|
81
|
methods: {
|
61
|
82
|
initDatas() {
|
|
@@ -64,9 +85,17 @@ export default {
|
64
|
85
|
this.borrowUsage = this.borrowData.usage[0];
|
65
|
86
|
this.borrowUsageAmount = this.borrowData.usageAmount[0];
|
66
|
87
|
this.borrowYear = this.borrowData.year[0];
|
|
88
|
+ this.yearProjectAmount = this.borrowData.yearProjectAmount[0];
|
|
89
|
+ this.yearProjectCount = this.borrowData.yearProjectCount[0];
|
67
|
90
|
let sum = Object.values(this.borrowAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
68
|
91
|
this.sumBorrowAmount = (sum / 10000).toFixed(1)
|
69
|
92
|
}
|
|
93
|
+ if (Object.keys(this.settleData).length !== 0) {
|
|
94
|
+ this.settleYear = this.settleData.year[0];
|
|
95
|
+ this.settleAmount = this.settleData.amount[0];
|
|
96
|
+ let sum = Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
|
97
|
+ this.sumSettleAmount = (sum / 10000).toFixed(1)
|
|
98
|
+ }
|
70
|
99
|
},
|
71
|
100
|
clickYear(charts) {
|
72
|
101
|
let that = this;
|
|
@@ -204,7 +233,7 @@ export default {
|
204
|
233
|
initBorrowUsagePie(year) {
|
205
|
234
|
let option = {
|
206
|
235
|
title: {
|
207
|
|
- text: year + '借款类型',
|
|
236
|
+ text: year + '借款类型占比',
|
208
|
237
|
},
|
209
|
238
|
tooltip: {
|
210
|
239
|
trigger: 'item',
|
|
@@ -217,7 +246,8 @@ export default {
|
217
|
246
|
{
|
218
|
247
|
name: '占比',
|
219
|
248
|
type: 'pie',
|
220
|
|
- radius: '40%',
|
|
249
|
+ radius: '30%',
|
|
250
|
+ center: ['25%', '50%'],
|
221
|
251
|
avoidLabelOverlap: false,
|
222
|
252
|
data: Object.entries(this.borrowUsage).map(([key, value]) => {
|
223
|
253
|
return { name: key, value: value }
|
|
@@ -243,27 +273,11 @@ export default {
|
243
|
273
|
}
|
244
|
274
|
},
|
245
|
275
|
},
|
246
|
|
- ]
|
247
|
|
- };
|
248
|
|
- ehcartsInit(borrowUsageChart, 'borrowUsagePie', option);
|
249
|
|
- },
|
250
|
|
- initBorrowUsageAmountPie(year) {
|
251
|
|
- let option = {
|
252
|
|
- title: {
|
253
|
|
- text: year + '各类型借款金额',
|
254
|
|
- },
|
255
|
|
- tooltip: {
|
256
|
|
- trigger: 'item',
|
257
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)'
|
258
|
|
- },
|
259
|
|
- legend: {
|
260
|
|
- top: 'bottom'
|
261
|
|
- },
|
262
|
|
- series: [
|
263
|
276
|
{
|
264
|
277
|
name: '占比',
|
265
|
278
|
type: 'pie',
|
266
|
|
- radius: '40%',
|
|
279
|
+ radius: '30%',
|
|
280
|
+ center: ['65%', '50%'],
|
267
|
281
|
avoidLabelOverlap: false,
|
268
|
282
|
data: Object.entries(this.borrowUsageAmount).map(([key, value]) => {
|
269
|
283
|
return { name: key, value: value }
|
|
@@ -291,7 +305,179 @@ export default {
|
291
|
305
|
},
|
292
|
306
|
]
|
293
|
307
|
};
|
294
|
|
- ehcartsInit(borrowUsageAmountChart, 'borrowUsageAmountPie', option);
|
|
308
|
+ ehcartsInit(borrowUsageChart, 'borrowUsagePie', option);
|
|
309
|
+ },
|
|
310
|
+ initBorrowProjectLineBar(year) {
|
|
311
|
+ let option = {
|
|
312
|
+ title: {
|
|
313
|
+ text: '项目借款金额',
|
|
314
|
+ },
|
|
315
|
+ tooltip: {
|
|
316
|
+ trigger: 'axis',
|
|
317
|
+ },
|
|
318
|
+ grid: {
|
|
319
|
+ left: '1%',
|
|
320
|
+ right: '1%',
|
|
321
|
+ bottom: '0%',
|
|
322
|
+ containLabel: true
|
|
323
|
+ },
|
|
324
|
+ legend: {
|
|
325
|
+ right: '0%',
|
|
326
|
+ orient: 'vertical'
|
|
327
|
+ },
|
|
328
|
+ xAxis: [
|
|
329
|
+ {
|
|
330
|
+ type: 'category',
|
|
331
|
+ data: Object.keys(this.yearProjectAmount).map(item => item + '项目'),
|
|
332
|
+ axisPointer: {
|
|
333
|
+ type: 'shadow'
|
|
334
|
+ }
|
|
335
|
+ }
|
|
336
|
+ ],
|
|
337
|
+ yAxis: [
|
|
338
|
+ {
|
|
339
|
+ type: 'value',
|
|
340
|
+ name: '金额',
|
|
341
|
+ }
|
|
342
|
+ ],
|
|
343
|
+ series: [
|
|
344
|
+ {
|
|
345
|
+ type: 'line',
|
|
346
|
+ tooltip: {
|
|
347
|
+ valueFormatter: function (value) {
|
|
348
|
+ return value + ' 元';
|
|
349
|
+ }
|
|
350
|
+ },
|
|
351
|
+ smooth: true,
|
|
352
|
+ data: Object.values(this.yearProjectAmount),
|
|
353
|
+ label: {
|
|
354
|
+ show: true,
|
|
355
|
+ position: 'top',
|
|
356
|
+ formatter: function (params) {
|
|
357
|
+ let value = params.value;
|
|
358
|
+ if (value >= 10000) {
|
|
359
|
+ return '约' + (value / 10000).toFixed(1) + '万元'
|
|
360
|
+ }
|
|
361
|
+ }
|
|
362
|
+ }
|
|
363
|
+ },
|
|
364
|
+ ]
|
|
365
|
+ };
|
|
366
|
+ ehcartsInit(borrowProjectChart, 'borrowProject', option);
|
|
367
|
+ },
|
|
368
|
+ initSettleYearBar() {
|
|
369
|
+ let option = {
|
|
370
|
+ title: {
|
|
371
|
+ text: '各年结算申请次数',
|
|
372
|
+ subtext: '共计结算次数:' + Object.values(this.settleYear).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '次'
|
|
373
|
+ },
|
|
374
|
+ grid: {
|
|
375
|
+ left: '1%',
|
|
376
|
+ right: '1%',
|
|
377
|
+ bottom: '0%',
|
|
378
|
+ height: '60%',
|
|
379
|
+ containLabel: true
|
|
380
|
+ },
|
|
381
|
+ graphic: [
|
|
382
|
+ {
|
|
383
|
+ type: 'text',
|
|
384
|
+ name: '',
|
|
385
|
+ right: '0',
|
|
386
|
+ top: '20%',
|
|
387
|
+ style: {
|
|
388
|
+ text: '全部年份',
|
|
389
|
+ fill: '#000', // 文本颜色
|
|
390
|
+ fontSize: 12, // 文本大小
|
|
391
|
+ fontWeight: '' // 文本粗细
|
|
392
|
+ }
|
|
393
|
+ }
|
|
394
|
+ ],
|
|
395
|
+ tooltip: {
|
|
396
|
+ trigger: 'axis',
|
|
397
|
+ axisPointer: {
|
|
398
|
+ type: 'none',
|
|
399
|
+ label: {
|
|
400
|
+ backgroundColor: '#6a7985'
|
|
401
|
+ }
|
|
402
|
+ }
|
|
403
|
+ },
|
|
404
|
+ xAxis: {
|
|
405
|
+ name: '年',
|
|
406
|
+ type: 'category',
|
|
407
|
+ data: Object.keys(this.settleYear),
|
|
408
|
+ },
|
|
409
|
+ yAxis: {
|
|
410
|
+ type: 'value',
|
|
411
|
+ name: '单位:次'
|
|
412
|
+ },
|
|
413
|
+ series: [
|
|
414
|
+ {
|
|
415
|
+ data: Object.values(this.settleYear),
|
|
416
|
+ type: 'bar',
|
|
417
|
+ smooth: true,
|
|
418
|
+ label: {
|
|
419
|
+ show: true,
|
|
420
|
+ position: 'top'
|
|
421
|
+ },
|
|
422
|
+ itemStyle: {
|
|
423
|
+ color: '#00788C'
|
|
424
|
+ }
|
|
425
|
+ }
|
|
426
|
+ ]
|
|
427
|
+ };
|
|
428
|
+ let charts = ehcartsInit(settleYearChart, 'settleBar', option);
|
|
429
|
+ },
|
|
430
|
+ initSettleAmountLine() {
|
|
431
|
+ let option = {
|
|
432
|
+ title: {
|
|
433
|
+ text: '各年结算金额',
|
|
434
|
+ subtext: '结算总额:' + Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元' +
|
|
435
|
+ '(约' + this.sumSettleAmount + '万元)'
|
|
436
|
+ },
|
|
437
|
+ grid: {
|
|
438
|
+ left: '1%',
|
|
439
|
+ right: '1%',
|
|
440
|
+ bottom: '0%',
|
|
441
|
+ height: '60%',
|
|
442
|
+ containLabel: true
|
|
443
|
+ },
|
|
444
|
+ tooltip: {
|
|
445
|
+ trigger: 'axis',
|
|
446
|
+ axisPointer: {
|
|
447
|
+ type: 'none',
|
|
448
|
+ label: {
|
|
449
|
+ backgroundColor: '#6a7985'
|
|
450
|
+ }
|
|
451
|
+ }
|
|
452
|
+ },
|
|
453
|
+ xAxis: {
|
|
454
|
+ type: 'category',
|
|
455
|
+ data: Object.keys(this.settleAmount),
|
|
456
|
+ },
|
|
457
|
+ yAxis: {
|
|
458
|
+ type: 'value',
|
|
459
|
+ name: '单位:元'
|
|
460
|
+ },
|
|
461
|
+ series: [
|
|
462
|
+ {
|
|
463
|
+ min: 0,
|
|
464
|
+ data: Object.values(this.settleAmount),
|
|
465
|
+ type: 'line',
|
|
466
|
+ smooth: true,
|
|
467
|
+ label: {
|
|
468
|
+ show: true,
|
|
469
|
+ position: 'top',
|
|
470
|
+ formatter: function (params) {
|
|
471
|
+ let value = params.value;
|
|
472
|
+ if (value >= 10000) {
|
|
473
|
+ return '约' + (value / 10000).toFixed(1) + '万元'
|
|
474
|
+ }
|
|
475
|
+ }
|
|
476
|
+ }
|
|
477
|
+ }
|
|
478
|
+ ]
|
|
479
|
+ };
|
|
480
|
+ ehcartsInit(settleAmountChart, 'settleLine', option);
|
295
|
481
|
}
|
296
|
482
|
},
|
297
|
483
|
}
|
|
@@ -333,6 +519,13 @@ export default {
|
333
|
519
|
|
334
|
520
|
.right {
|
335
|
521
|
flex: 1;
|
|
522
|
+
|
|
523
|
+ .right-top {
|
|
524
|
+ width: 100%;
|
|
525
|
+ height: 300px;
|
|
526
|
+ padding: 10px;
|
|
527
|
+ border: 1px solid #ececec;
|
|
528
|
+ }
|
336
|
529
|
}
|
337
|
530
|
}
|
338
|
531
|
</style>
|