|
@@ -13,6 +13,10 @@
|
13
|
13
|
<div class="middle" v-loading="subLoading">
|
14
|
14
|
<!-- <div class="middle-top" id="subAmountBar"></div> -->
|
15
|
15
|
<div class="middle-top" id="subYearLine"></div>
|
|
16
|
+ <div class="middle-bottom">
|
|
17
|
+ <div class="bottom-left" id="subCwAmountPie"></div>
|
|
18
|
+ <div class="bottom-right" id="subSourcePie"></div>
|
|
19
|
+ </div>
|
16
|
20
|
</div>
|
17
|
21
|
<div class="right">
|
18
|
22
|
|
|
@@ -25,7 +29,7 @@
|
25
|
29
|
import { ehcartsInit } from '@/utils/echarts'
|
26
|
30
|
import { getContractStatistic } from '@/api/oa/contract/contract';
|
27
|
31
|
import { getSubContractStatistic } from '@/api/oa/contract/subContract';
|
28
|
|
-let amountChart, cwAmountChart, cwSourceChart, subAmountChart, subYearChart
|
|
32
|
+let amountChart, cwAmountChart, cwSourceChart, subAmountChart, subYearChart, subCwAmountChart, subSourceChart
|
29
|
33
|
export default {
|
30
|
34
|
props: {
|
31
|
35
|
datas: {
|
|
@@ -43,6 +47,8 @@ export default {
|
43
|
47
|
contractYear: {},
|
44
|
48
|
subAmount: {},
|
45
|
49
|
subYearNum: {},
|
|
50
|
+ subCwAmount: {},
|
|
51
|
+ subSource: {},
|
46
|
52
|
subYear: 0,
|
47
|
53
|
sumAomunt: 0,
|
48
|
54
|
sumSubAomunt: 0,
|
|
@@ -56,6 +62,12 @@ export default {
|
56
|
62
|
},
|
57
|
63
|
contractSource() {
|
58
|
64
|
this.initChartCwSource(this.activeYear);
|
|
65
|
+ },
|
|
66
|
+ subCwAmount() {
|
|
67
|
+ this.initChartSubCwAomunt(this.activeYear);
|
|
68
|
+ },
|
|
69
|
+ subSource() {
|
|
70
|
+ this.initChartSubCwSource(this.activeYear);
|
59
|
71
|
}
|
60
|
72
|
},
|
61
|
73
|
mounted() {
|
|
@@ -77,12 +89,17 @@ export default {
|
77
|
89
|
}
|
78
|
90
|
this.subLoading = true;
|
79
|
91
|
let subDatas = await getSubContractStatistic();
|
|
92
|
+ console.log(subDatas.data);
|
80
|
93
|
this.subAmount = subDatas.data.amount[0];
|
81
|
94
|
this.subYearNum = subDatas.data.year[0];
|
|
95
|
+ this.subCwAmount = subDatas.data.cwAmount[0];
|
|
96
|
+ this.subSource = subDatas.data.source[0];
|
82
|
97
|
let sum = Object.values(this.subAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
83
|
98
|
this.sumSubAomunt = (sum / 100000000).toFixed(4) + '亿元';
|
84
|
99
|
this.initAmountBar();
|
85
|
100
|
this.initChartSubYear();
|
|
101
|
+ this.initChartSubCwAomunt('');
|
|
102
|
+ this.initChartSubCwSource('');
|
86
|
103
|
this.subLoading = false;
|
87
|
104
|
},
|
88
|
105
|
initAmountBar() {
|
|
@@ -101,9 +118,7 @@ export default {
|
101
|
118
|
height: '60%',
|
102
|
119
|
containLabel: true
|
103
|
120
|
},
|
104
|
|
- legend: {
|
105
|
|
-
|
106
|
|
- },
|
|
121
|
+ legend: {},
|
107
|
122
|
graphic: [
|
108
|
123
|
{
|
109
|
124
|
type: 'text',
|
|
@@ -169,7 +184,7 @@ export default {
|
169
|
184
|
var value = params.value;
|
170
|
185
|
if (value >= 10000) {
|
171
|
186
|
// 亿
|
172
|
|
- return (value / 10000).toFixed(4) + '万元';
|
|
187
|
+ return (value / 10000000).toFixed(4) + '千万元';
|
173
|
188
|
}
|
174
|
189
|
}
|
175
|
190
|
},
|
|
@@ -197,13 +212,17 @@ export default {
|
197
|
212
|
that.contractSource = res.data.source[0];
|
198
|
213
|
that.dataLoading = false
|
199
|
214
|
})
|
|
215
|
+ getSubContractStatistic({ signDate: year }).then(res => {
|
|
216
|
+ that.subCwAmount = res.data.cwAmount[0];
|
|
217
|
+ that.subSource = res.data.source[0];
|
|
218
|
+ })
|
200
|
219
|
}
|
201
|
220
|
})
|
202
|
221
|
},
|
203
|
222
|
initChartCwAomunt(year) {
|
204
|
223
|
let option = {
|
205
|
224
|
title: {
|
206
|
|
- text: year + '合同额分布情况',
|
|
225
|
+ text: year + '承接合同额分布情况',
|
207
|
226
|
},
|
208
|
227
|
tooltip: {
|
209
|
228
|
trigger: 'item',
|
|
@@ -249,7 +268,7 @@ export default {
|
249
|
268
|
initChartCwSource(year) {
|
250
|
269
|
let option = {
|
251
|
270
|
title: {
|
252
|
|
- text: year + '合同来源分布',
|
|
271
|
+ text: year + '承接合同来源分布',
|
253
|
272
|
},
|
254
|
273
|
tooltip: {
|
255
|
274
|
trigger: 'item',
|
|
@@ -418,6 +437,98 @@ export default {
|
418
|
437
|
};
|
419
|
438
|
ehcartsInit(subYearChart, 'subYearLine', option);
|
420
|
439
|
},
|
|
440
|
+ initChartSubCwAomunt(year) {
|
|
441
|
+ let option = {
|
|
442
|
+ title: {
|
|
443
|
+ text: year + '分包合同额分布情况',
|
|
444
|
+ },
|
|
445
|
+ tooltip: {
|
|
446
|
+ trigger: 'item',
|
|
447
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
448
|
+ },
|
|
449
|
+ legend: {
|
|
450
|
+ top: 'bottom'
|
|
451
|
+ },
|
|
452
|
+ series: [
|
|
453
|
+ {
|
|
454
|
+ name: '占比',
|
|
455
|
+ type: 'pie',
|
|
456
|
+ radius: '40%',
|
|
457
|
+ avoidLabelOverlap: false,
|
|
458
|
+ data: Object.entries(this.subCwAmount).map(([key, value]) => {
|
|
459
|
+ return { name: key, value: value }
|
|
460
|
+ }),
|
|
461
|
+ emphasis: {
|
|
462
|
+ itemStyle: {
|
|
463
|
+ shadowBlur: 10,
|
|
464
|
+ shadowOffsetX: 0,
|
|
465
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
466
|
+ }
|
|
467
|
+ },
|
|
468
|
+ label: {
|
|
469
|
+ alignTo: 'none',
|
|
470
|
+ formatter: '{name|{b}}\n{value|{c}元}',
|
|
471
|
+ minMargin: 5,
|
|
472
|
+ edgeDistance: 8,
|
|
473
|
+ lineHeight: 15,
|
|
474
|
+ rich: {
|
|
475
|
+ time: {
|
|
476
|
+ fontSize: 10,
|
|
477
|
+ color: '#999'
|
|
478
|
+ }
|
|
479
|
+ }
|
|
480
|
+ },
|
|
481
|
+ }
|
|
482
|
+ ]
|
|
483
|
+ };
|
|
484
|
+ ehcartsInit(subCwAmountChart, 'subCwAmountPie', option);
|
|
485
|
+ },
|
|
486
|
+ initChartSubCwSource(year) {
|
|
487
|
+ let option = {
|
|
488
|
+ title: {
|
|
489
|
+ text: year + '分包合同来源分布',
|
|
490
|
+ },
|
|
491
|
+ tooltip: {
|
|
492
|
+ trigger: 'item',
|
|
493
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
494
|
+ },
|
|
495
|
+ legend: {
|
|
496
|
+ top: 'bottom'
|
|
497
|
+ },
|
|
498
|
+ series: [
|
|
499
|
+ {
|
|
500
|
+ name: '占比',
|
|
501
|
+ type: 'pie',
|
|
502
|
+ radius: '40%',
|
|
503
|
+ avoidLabelOverlap: false,
|
|
504
|
+ data: Object.entries(this.subSource).map(([key, value]) => {
|
|
505
|
+ return { name: key, value: value }
|
|
506
|
+ }),
|
|
507
|
+ emphasis: {
|
|
508
|
+ itemStyle: {
|
|
509
|
+ shadowBlur: 10,
|
|
510
|
+ shadowOffsetX: 0,
|
|
511
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
512
|
+ }
|
|
513
|
+ },
|
|
514
|
+ label: {
|
|
515
|
+ alignTo: 'none',
|
|
516
|
+ formatter: '{name|{b}}\n{value|{c}个}',
|
|
517
|
+ minMargin: 5,
|
|
518
|
+ edgeDistance: 8,
|
|
519
|
+ lineHeight: 15,
|
|
520
|
+ rich: {
|
|
521
|
+ time: {
|
|
522
|
+ fontSize: 10,
|
|
523
|
+ color: '#999'
|
|
524
|
+ }
|
|
525
|
+ }
|
|
526
|
+ },
|
|
527
|
+ }
|
|
528
|
+ ]
|
|
529
|
+ };
|
|
530
|
+ ehcartsInit(subSourceChart, 'subSourcePie', option);
|
|
531
|
+ },
|
421
|
532
|
}
|
422
|
533
|
}
|
423
|
534
|
</script>
|
|
@@ -466,13 +577,31 @@ export default {
|
466
|
577
|
}
|
467
|
578
|
|
468
|
579
|
.middle {
|
469
|
|
- flex: 1;
|
|
580
|
+ flex: 1.5;
|
470
|
581
|
|
471
|
582
|
.middle-top {
|
472
|
583
|
height: 300px;
|
473
|
584
|
padding: 10px;
|
474
|
585
|
border: 1px solid #ececec;
|
475
|
586
|
}
|
|
587
|
+
|
|
588
|
+ .middle-bottom {
|
|
589
|
+ display: flex;
|
|
590
|
+
|
|
591
|
+ .bottom-left {
|
|
592
|
+ flex: 1.5;
|
|
593
|
+ height: 300px;
|
|
594
|
+ padding: 10px;
|
|
595
|
+ border: 1px solid #ececec;
|
|
596
|
+ }
|
|
597
|
+
|
|
598
|
+ .bottom-right {
|
|
599
|
+ flex: 1;
|
|
600
|
+ height: 300px;
|
|
601
|
+ padding: 10px;
|
|
602
|
+ border: 1px solid #ececec;
|
|
603
|
+ }
|
|
604
|
+ }
|
476
|
605
|
}
|
477
|
606
|
|
478
|
607
|
.right {
|