Explorar o código

perf(monthlyAssessSum): 优化页面布局与字典渲染逻辑

1. 调整饼图半径从70%改为50%优化展示效果
2. 将网格布局改为弹性布局适配响应式显示
3. 新增字典工具引入,将考核组编码转换为字典标签展示
4. 优化移动端响应式样式适配
huoyi@samsundot.com hai 4 semanas
pai
achega
87be9b07df
Modificáronse 1 ficheiros con 35 adicións e 16 borrados
  1. 35 16
      src/views/performanceManage/monthlyAssessSum/index.vue

+ 35 - 16
src/views/performanceManage/monthlyAssessSum/index.vue

@@ -202,6 +202,11 @@ import {
202
   getFunctionalDeptDistributionPie
202
   getFunctionalDeptDistributionPie
203
 } from '@/api/performance/monthlyAssessSum.js'
203
 } from '@/api/performance/monthlyAssessSum.js'
204
 import { listDept } from '@/api/system/dept.js'
204
 import { listDept } from '@/api/system/dept.js'
205
+import { useDict } from '@/utils/dict'
206
+import { selectDictLabel } from '@/utils/ruoyi'
207
+
208
+// 获取字典数据
209
+const { assessment_team } = useDict('assessment_team')
205
 
210
 
206
 // 响应式数据
211
 // 响应式数据
207
 const loading = ref(false)
212
 const loading = ref(false)
@@ -397,7 +402,7 @@ const initTraversalCharts = () => {
397
           tooltip: { trigger: 'item' },
402
           tooltip: { trigger: 'item' },
398
           series: [{
403
           series: [{
399
             type: 'pie',
404
             type: 'pie',
400
-            radius: '70%',
405
+            radius: '50%',
401
             data: [
406
             data: [
402
               { value: 120, name: '优秀' },
407
               { value: 120, name: '优秀' },
403
               { value: 280, name: '合格' },
408
               { value: 280, name: '合格' },
@@ -415,7 +420,7 @@ const initTraversalCharts = () => {
415
           tooltip: { trigger: 'item' },
420
           tooltip: { trigger: 'item' },
416
           series: [{
421
           series: [{
417
             type: 'pie',
422
             type: 'pie',
418
-            radius: '70%',
423
+            radius: '50%',
419
             data: [
424
             data: [
420
               { value: 15, name: '已改进' },
425
               { value: 15, name: '已改进' },
421
               { value: 60, name: '待改进' },
426
               { value: 60, name: '待改进' },
@@ -448,7 +453,7 @@ const initTraversalCharts = () => {
448
           tooltip: { trigger: 'item' },
453
           tooltip: { trigger: 'item' },
449
           series: [{
454
           series: [{
450
             type: 'pie',
455
             type: 'pie',
451
-            radius: '70%',
456
+            radius: '50%',
452
             data: [
457
             data: [
453
               { value: 150, name: '安检员' },
458
               { value: 150, name: '安检员' },
454
               { value: 120, name: '设备操作员' },
459
               { value: 120, name: '设备操作员' },
@@ -531,7 +536,10 @@ const getList = async () => {
531
       // 解析表格数据
536
       // 解析表格数据
532
       let tableData = []
537
       let tableData = []
533
       if (statisticsData.length > 0 && statisticsData[0].assessmentTeams) {
538
       if (statisticsData.length > 0 && statisticsData[0].assessmentTeams) {
534
-        tableData = statisticsData[0].assessmentTeams
539
+        tableData = statisticsData[0].assessmentTeams.map(item => ({
540
+          ...item,
541
+          assessmentTeam: selectDictLabel(assessment_team.value, item.assessmentTeam)
542
+        }))
535
       }
543
       }
536
 
544
 
537
       // 计算总计用于标题
545
       // 计算总计用于标题
@@ -636,7 +644,7 @@ const getList = async () => {
636
       const data = teamImproveRes.value.data
644
       const data = teamImproveRes.value.data
637
       if (positionPieChart1Instance && Array.isArray(data)) {
645
       if (positionPieChart1Instance && Array.isArray(data)) {
638
         positionPieChart1Instance.setOption({
646
         positionPieChart1Instance.setOption({
639
-          series: [{ data: data.map(item => ({ name: item.assessmentTeam, value: item.count })) }]
647
+          series: [{ data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
640
         })
648
         })
641
       }
649
       }
642
     }
650
     }
@@ -645,7 +653,7 @@ const getList = async () => {
645
       const data = teamIncompRes.value.data
653
       const data = teamIncompRes.value.data
646
       if (positionPieChart2Instance && Array.isArray(data)) {
654
       if (positionPieChart2Instance && Array.isArray(data)) {
647
         positionPieChart2Instance.setOption({
655
         positionPieChart2Instance.setOption({
648
-          series: [{ data: data.map(item => ({ name: item.assessmentTeam, value: item.count })) }]
656
+          series: [{ data: data.map(item => ({ name: selectDictLabel(assessment_team.value, item.assessmentTeam), value: item.count })) }]
649
         })
657
         })
650
       }
658
       }
651
     }
659
     }
@@ -662,8 +670,8 @@ const getList = async () => {
662
             tooltip: { trigger: 'item' },
670
             tooltip: { trigger: 'item' },
663
             series: [{
671
             series: [{
664
               type: 'pie',
672
               type: 'pie',
665
-              radius: '70%',
666
-              data: item.improveData.map(d => ({ name: d.assessmentTeam, value: d.count }))
673
+              radius: '50%',
674
+              data: item.improveData.map(d => ({ name: selectDictLabel(assessment_team.value, d.assessmentTeam), value: d.count }))
667
             }]
675
             }]
668
           })
676
           })
669
         }
677
         }
@@ -674,8 +682,8 @@ const getList = async () => {
674
             tooltip: { trigger: 'item' },
682
             tooltip: { trigger: 'item' },
675
             series: [{
683
             series: [{
676
               type: 'pie',
684
               type: 'pie',
677
-              radius: '70%',
678
-              data: item.incompData.map(d => ({ name: d.assessmentTeam, value: d.count }))
685
+              radius: '50%',
686
+              data: item.incompData.map(d => ({ name: selectDictLabel(assessment_team.value, d.assessmentTeam), value: d.count }))
679
             }]
687
             }]
680
           })
688
           })
681
         }
689
         }
@@ -696,13 +704,16 @@ const getList = async () => {
696
         return {
704
         return {
697
           title: item.deptName,
705
           title: item.deptName,
698
           deptId: item.deptId,
706
           deptId: item.deptId,
699
-          tableData: item.assessmentTeams || [],
707
+          tableData: (item.assessmentTeams || []).map(t => ({
708
+            ...t,
709
+            assessmentTeam: selectDictLabel(assessment_team.value, t.assessmentTeam)
710
+          })),
700
           barData: personnelItem ? [
711
           barData: personnelItem ? [
701
             { name: '考核组人数', value: personnelItem.assessmentTeamCount || 0 },
712
             { name: '考核组人数', value: personnelItem.assessmentTeamCount || 0 },
702
             { name: '实际待改进人数', value: personnelItem.actualImprovementCount || 0 },
713
             { name: '实际待改进人数', value: personnelItem.actualImprovementCount || 0 },
703
             { name: '实际不称职人数', value: personnelItem.actualIncompetentCount || 0 }
714
             { name: '实际不称职人数', value: personnelItem.actualIncompetentCount || 0 }
704
           ] : [],
715
           ] : [],
705
-          pieData: deptPieData.map(p => ({ name: p.assessmentTeam, value: p.count }))
716
+          pieData: deptPieData.map(p => ({ name: selectDictLabel(assessment_team.value, p.assessmentTeam), value: p.count }))
706
         }
717
         }
707
       })
718
       })
708
     
719
     
@@ -725,7 +736,7 @@ const getList = async () => {
725
             const pieChart = echarts.init(traversalChartsRefs.value[pieChartKey])
736
             const pieChart = echarts.init(traversalChartsRefs.value[pieChartKey])
726
             pieChart.setOption({
737
             pieChart.setOption({
727
               tooltip: { trigger: 'item' },
738
               tooltip: { trigger: 'item' },
728
-              series: [{ type: 'pie', radius: '70%', data: item.pieData }]
739
+              series: [{ type: 'pie', radius: '50%', data: item.pieData }]
729
             })
740
             })
730
           }
741
           }
731
         })
742
         })
@@ -1358,17 +1369,20 @@ onUnmounted(() => {
1358
 }
1369
 }
1359
 
1370
 
1360
 .traversal-content {
1371
 .traversal-content {
1361
-  display: grid;
1362
-  grid-template-columns: 1fr 1fr;
1372
+  display: flex;
1363
   gap: 20px;
1373
   gap: 20px;
1364
   padding: 20px;
1374
   padding: 20px;
1365
 }
1375
 }
1366
 
1376
 
1367
 .table-section {
1377
 .table-section {
1378
+  flex: 1;
1379
+  min-width: 0;
1368
   min-height: 400px;
1380
   min-height: 400px;
1369
 }
1381
 }
1370
 
1382
 
1371
 .chart-section {
1383
 .chart-section {
1384
+  flex: 1;
1385
+  min-width: 0;
1372
   display: grid;
1386
   display: grid;
1373
   grid-template-columns: 1fr 1fr;
1387
   grid-template-columns: 1fr 1fr;
1374
   gap: 15px;
1388
   gap: 15px;
@@ -1411,10 +1425,15 @@ onUnmounted(() => {
1411
   }
1425
   }
1412
 
1426
 
1413
   .traversal-content {
1427
   .traversal-content {
1414
-    grid-template-columns: 1fr;
1428
+    flex-direction: column;
1415
     gap: 15px;
1429
     gap: 15px;
1416
   }
1430
   }
1417
 
1431
 
1432
+  .table-section,
1433
+  .chart-section {
1434
+    min-width: 0;
1435
+  }
1436
+
1418
   .chart-section {
1437
   .chart-section {
1419
     grid-template-columns: 1fr;
1438
     grid-template-columns: 1fr;
1420
     height: auto;
1439
     height: auto;