|
|
@@ -88,8 +88,14 @@
|
|
88
|
88
|
<el-card class="chart-card">
|
|
89
|
89
|
<div class="chart-header">大队分布统计图</div>
|
|
90
|
90
|
<div class="pie-charts-container">
|
|
91
|
|
- <div ref="brigadePieChart1" class="pie-chart"></div>
|
|
92
|
|
- <div ref="brigadePieChart2" class="pie-chart"></div>
|
|
|
91
|
+ <div class="pie-chart-wrapper">
|
|
|
92
|
+ <div class="pie-chart-title">各大队实际待改进人数占比</div>
|
|
|
93
|
+ <div ref="brigadePieChart1" class="pie-chart"></div>
|
|
|
94
|
+ </div>
|
|
|
95
|
+ <div class="pie-chart-wrapper">
|
|
|
96
|
+ <div class="pie-chart-title">各大队实际不称职人数占比</div>
|
|
|
97
|
+ <div ref="brigadePieChart2" class="pie-chart"></div>
|
|
|
98
|
+ </div>
|
|
93
|
99
|
</div>
|
|
94
|
100
|
</el-card>
|
|
95
|
101
|
|
|
|
@@ -97,8 +103,14 @@
|
|
97
|
103
|
<el-card class="chart-card">
|
|
98
|
104
|
<div class="chart-header">岗位分布统计图</div>
|
|
99
|
105
|
<div class="pie-charts-container">
|
|
100
|
|
- <div ref="positionPieChart1" class="pie-chart"></div>
|
|
101
|
|
- <div ref="positionPieChart2" class="pie-chart"></div>
|
|
|
106
|
+ <div class="pie-chart-wrapper">
|
|
|
107
|
+ <div class="pie-chart-title">各考核组实际待改进人数占比</div>
|
|
|
108
|
+ <div ref="positionPieChart1" class="pie-chart"></div>
|
|
|
109
|
+ </div>
|
|
|
110
|
+ <div class="pie-chart-wrapper">
|
|
|
111
|
+ <div class="pie-chart-title">各考核组实际不称职人数占比</div>
|
|
|
112
|
+ <div ref="positionPieChart2" class="pie-chart"></div>
|
|
|
113
|
+ </div>
|
|
102
|
114
|
</div>
|
|
103
|
115
|
</el-card>
|
|
104
|
116
|
</div>
|
|
|
@@ -287,6 +299,7 @@ const initCharts = () => {
|
|
287
|
299
|
series: [{
|
|
288
|
300
|
type: 'pie',
|
|
289
|
301
|
radius: '70%',
|
|
|
302
|
+ label: { formatter: '{b}: {c}' },
|
|
290
|
303
|
data: [
|
|
291
|
304
|
{ value: 380, name: '参与考核' },
|
|
292
|
305
|
{ value: 20, name: '未参与考核' }
|
|
|
@@ -318,7 +331,8 @@ const initCharts = () => {
|
|
318
|
331
|
tooltip: { trigger: 'item' },
|
|
319
|
332
|
series: [{
|
|
320
|
333
|
type: 'pie',
|
|
321
|
|
- radius: '50%',
|
|
|
334
|
+ radius: '45%',
|
|
|
335
|
+ label: { formatter: '{b}\n{c}' },
|
|
322
|
336
|
data: [
|
|
323
|
337
|
{ value: 120, name: '一队' },
|
|
324
|
338
|
{ value: 150, name: '二队' },
|
|
|
@@ -335,7 +349,8 @@ const initCharts = () => {
|
|
335
|
349
|
tooltip: { trigger: 'item' },
|
|
336
|
350
|
series: [{
|
|
337
|
351
|
type: 'pie',
|
|
338
|
|
- radius: '50%',
|
|
|
352
|
+ radius: '45%',
|
|
|
353
|
+ label: { formatter: '{b}\n{c}' },
|
|
339
|
354
|
data: [
|
|
340
|
355
|
{ value: 45, name: '优秀' },
|
|
341
|
356
|
{ value: 280, name: '合格' },
|
|
|
@@ -352,7 +367,8 @@ const initCharts = () => {
|
|
352
|
367
|
tooltip: { trigger: 'item' },
|
|
353
|
368
|
series: [{
|
|
354
|
369
|
type: 'pie',
|
|
355
|
|
- radius: '50%',
|
|
|
370
|
+ radius: '45%',
|
|
|
371
|
+ label: { formatter: '{b}\n{c}' },
|
|
356
|
372
|
data: [
|
|
357
|
373
|
{ value: 150, name: '安检员' },
|
|
358
|
374
|
{ value: 120, name: '设备操作员' },
|
|
|
@@ -370,7 +386,8 @@ const initCharts = () => {
|
|
370
|
386
|
tooltip: { trigger: 'item' },
|
|
371
|
387
|
series: [{
|
|
372
|
388
|
type: 'pie',
|
|
373
|
|
- radius: '50%',
|
|
|
389
|
+ radius: '45%',
|
|
|
390
|
+ label: { formatter: '{b}\n{c}' },
|
|
374
|
391
|
data: [
|
|
375
|
392
|
{ value: 35, name: '优秀' },
|
|
376
|
393
|
{ value: 320, name: '合格' },
|
|
|
@@ -578,7 +595,7 @@ const getList = async () => {
|
|
578
|
595
|
const data = deptPartRes.value.data
|
|
579
|
596
|
if (participantPieChartInstance && Array.isArray(data)) {
|
|
580
|
597
|
participantPieChartInstance.setOption({
|
|
581
|
|
- series: [{ data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
|
598
|
+ series: [{ label: { formatter: '{b}: {c}' }, data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
582
|
599
|
})
|
|
583
|
600
|
}
|
|
584
|
601
|
}
|
|
|
@@ -629,7 +646,7 @@ const getList = async () => {
|
|
629
|
646
|
const data = actualImproveRes.value.data
|
|
630
|
647
|
if (brigadePieChart1Instance && Array.isArray(data)) {
|
|
631
|
648
|
brigadePieChart1Instance.setOption({
|
|
632
|
|
- series: [{ data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
|
649
|
+ series: [{ label: { formatter: '{b}\n{c}' }, data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
633
|
650
|
})
|
|
634
|
651
|
}
|
|
635
|
652
|
}
|
|
|
@@ -638,7 +655,7 @@ const getList = async () => {
|
|
638
|
655
|
const data = actualIncompRes.value.data
|
|
639
|
656
|
if (brigadePieChart2Instance && Array.isArray(data)) {
|
|
640
|
657
|
brigadePieChart2Instance.setOption({
|
|
641
|
|
- series: [{ data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
|
658
|
+ series: [{ label: { formatter: '{b}\n{c}' }, data: data.map(item => ({ name: item.deptName, value: item.count })) }]
|
|
642
|
659
|
})
|
|
643
|
660
|
}
|
|
644
|
661
|
}
|
|
|
@@ -647,7 +664,7 @@ const getList = async () => {
|
|
647
|
664
|
const data = teamImproveRes.value.data
|
|
648
|
665
|
if (positionPieChart1Instance && Array.isArray(data)) {
|
|
649
|
666
|
positionPieChart1Instance.setOption({
|
|
650
|
|
- series: [{ data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
|
|
|
667
|
+ series: [{ label: { formatter: '{b}\n{c}' }, data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
|
|
651
|
668
|
})
|
|
652
|
669
|
}
|
|
653
|
670
|
}
|
|
|
@@ -656,7 +673,7 @@ const getList = async () => {
|
|
656
|
673
|
const data = teamIncompRes.value.data
|
|
657
|
674
|
if (positionPieChart2Instance && Array.isArray(data)) {
|
|
658
|
675
|
positionPieChart2Instance.setOption({
|
|
659
|
|
- series: [{ data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
|
|
|
676
|
+ series: [{ label: { formatter: '{b}\n{c}' }, data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
|
|
660
|
677
|
})
|
|
661
|
678
|
}
|
|
662
|
679
|
}
|
|
|
@@ -1341,6 +1358,20 @@ onUnmounted(() => {
|
|
1341
|
1358
|
height: 100%;
|
|
1342
|
1359
|
}
|
|
1343
|
1360
|
|
|
|
1361
|
+.pie-chart-wrapper {
|
|
|
1362
|
+ display: flex;
|
|
|
1363
|
+ flex-direction: column;
|
|
|
1364
|
+ align-items: center;
|
|
|
1365
|
+ flex: 1;
|
|
|
1366
|
+}
|
|
|
1367
|
+
|
|
|
1368
|
+.pie-chart-title {
|
|
|
1369
|
+ font-size: 14px;
|
|
|
1370
|
+ color: #606266;
|
|
|
1371
|
+ margin-bottom: 10px;
|
|
|
1372
|
+ text-align: center;
|
|
|
1373
|
+}
|
|
|
1374
|
+
|
|
1344
|
1375
|
:deep(.el-table) {
|
|
1345
|
1376
|
.el-table__header th {
|
|
1346
|
1377
|
background-color: #f5f7fa;
|