Sfoglia il codice sorgente

perf(monthly-assess): 优化月度考核页面展示与数据处理

1.  新增大队列表列展示
2.  修复指标数据id匹配错误问题
3.  移除冗余工具函数
4.  优化统计图表布局与样式,添加标题和标签格式化
5.  调整饼图半径与显示样式
huoyi 3 settimane fa
parent
commit
2290b49514

+ 7 - 23
src/views/performanceManage/monthlyAssess/index.vue

@@ -73,6 +73,7 @@
73
       <el-table v-loading="loading" :data="nonCadreList" border fit highlight-current-row
73
       <el-table v-loading="loading" :data="nonCadreList" border fit highlight-current-row
74
         style="width: 100%; margin-top: 20px;" @selection-change="handleSelectionChange">
74
         style="width: 100%; margin-top: 20px;" @selection-change="handleSelectionChange">
75
         <el-table-column type="selection" width="55" align="center" />
75
         <el-table-column type="selection" width="55" align="center" />
76
+        <el-table-column label="大队" prop="brigadeName" align="center" min-width="120" />
76
         <el-table-column label="用工形式" prop="employmentType" align="center" min-width="100">
77
         <el-table-column label="用工形式" prop="employmentType" align="center" min-width="100">
77
           <template #default="scope">
78
           <template #default="scope">
78
             <dict-tag :options="employment_type" :value="scope.row.employmentType" />
79
             <dict-tag :options="employment_type" :value="scope.row.employmentType" />
@@ -764,7 +765,7 @@ const indicatorDialog = reactive({
764
     value: 'id',
765
     value: 'id',
765
     label: 'name',
766
     label: 'name',
766
     children: 'indicatorList',
767
     children: 'indicatorList',
767
- 
768
+
768
     emitPath: false
769
     emitPath: false
769
   },
770
   },
770
   rules: {
771
   rules: {
@@ -836,7 +837,7 @@ function transformIndicatorTree(treeData) {
836
 
837
 
837
         if (child.indicatorList && child.indicatorList.length > 0) {
838
         if (child.indicatorList && child.indicatorList.length > 0) {
838
           transformedChild.indicatorList = child.indicatorList.map(indicator => ({
839
           transformedChild.indicatorList = child.indicatorList.map(indicator => ({
839
-            ...indicator, name: indicator.name, id: indicator.id, indicatorId: indicator.id, indicatorName: indicator.name, occurCount: 1, personnelMonthlyAssessmentIndicatorRewardPunishmentDetailList: []
840
+            ...indicator, name: indicator.name, id: indicator.id, indicatorId: indicator.indicatorId, indicatorName: indicator.name, occurCount: 1, personnelMonthlyAssessmentIndicatorRewardPunishmentDetailList: []
840
           }))
841
           }))
841
         }
842
         }
842
 
843
 
@@ -846,7 +847,7 @@ function transformIndicatorTree(treeData) {
846
 
847
 
847
     if (node.indicatorList && node.indicatorList.length > 0) {
848
     if (node.indicatorList && node.indicatorList.length > 0) {
848
       transformed.indicatorList = node.indicatorList.map(indicator => ({
849
       transformed.indicatorList = node.indicatorList.map(indicator => ({
849
-        ...indicator, name: indicator.name, id: indicator.id, indicatorId: indicator.id, indicatorName: indicator.name, occurCount: 1, personnelMonthlyAssessmentIndicatorRewardPunishmentDetailList: []
850
+        ...indicator, name: indicator.name, id: indicator.id, indicatorId: indicator.indicatorId, indicatorName: indicator.name, occurCount: 1, personnelMonthlyAssessmentIndicatorRewardPunishmentDetailList: []
850
       }))
851
       }))
851
     }
852
     }
852
 
853
 
@@ -1269,7 +1270,7 @@ const submitForm = async () => {
1269
           group.items.map(item => ({
1270
           group.items.map(item => ({
1270
             ...item,
1271
             ...item,
1271
             indicatorName: item.name || item.indicatorName,
1272
             indicatorName: item.name || item.indicatorName,
1272
-            indicatorId: item.id || item.indicatorId,
1273
+            indicatorId: item.indicatorId ,
1273
             indicatorCode: item.code || item.indicatorCode,
1274
             indicatorCode: item.code || item.indicatorCode,
1274
           }))
1275
           }))
1275
         )
1276
         )
@@ -1353,16 +1354,7 @@ const generateMonthlyAssessment = async () => {
1353
   }
1354
   }
1354
 }
1355
 }
1355
 
1356
 
1356
-// 获取考核结果文本
1357
-const getResultText = (value) => {
1358
-  const map = {
1359
-    'excellent': '优秀',
1360
-    'good': '良好',
1361
-    'qualified': '合格',
1362
-    'unqualified': '不称职'
1363
-  }
1364
-  return map[value] || ''
1365
-}
1357
+
1366
 
1358
 
1367
 // 添加指标 - 打开新增模态框
1359
 // 添加指标 - 打开新增模态框
1368
 const addIndicator = () => {
1360
 const addIndicator = () => {
@@ -1418,15 +1410,7 @@ const deleteIndicator = (groupIndex, itemIndex) => {
1418
   }).catch(() => { })
1410
   }).catch(() => { })
1419
 }
1411
 }
1420
 
1412
 
1421
-// 指标名称变化时更新分值
1422
-const onIndicatorNameChange = (value) => {
1423
-  console.log(value, indicatorDialog.indicatorOptions, "indicatorDialog.indicatorOptions")
1424
-  const selected = indicatorDialog.indicatorOptions.find(item => item.id === value)
1425
-  if (selected) {
1426
-    indicatorDialog.form = { ...selected, indicatorId: selected.id, indicatorName: selected.name, occurCount: 1, personnelMonthlyAssessmentIndicatorRewardPunishmentDetailList: [] }
1427
-    updateTotal()
1428
-  }
1429
-}
1413
+
1430
 
1414
 
1431
 // 更新总分
1415
 // 更新总分
1432
 const updateTotal = () => {
1416
 const updateTotal = () => {

+ 44 - 13
src/views/performanceManage/monthlyAssessSum/index.vue

@@ -88,8 +88,14 @@
88
         <el-card class="chart-card">
88
         <el-card class="chart-card">
89
           <div class="chart-header">大队分布统计图</div>
89
           <div class="chart-header">大队分布统计图</div>
90
           <div class="pie-charts-container">
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
           </div>
99
           </div>
94
         </el-card>
100
         </el-card>
95
 
101
 
@@ -97,8 +103,14 @@
97
         <el-card class="chart-card">
103
         <el-card class="chart-card">
98
           <div class="chart-header">岗位分布统计图</div>
104
           <div class="chart-header">岗位分布统计图</div>
99
           <div class="pie-charts-container">
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
           </div>
114
           </div>
103
         </el-card>
115
         </el-card>
104
       </div>
116
       </div>
@@ -287,6 +299,7 @@ const initCharts = () => {
287
         series: [{
299
         series: [{
288
           type: 'pie',
300
           type: 'pie',
289
           radius: '70%',
301
           radius: '70%',
302
+          label: { formatter: '{b}: {c}' },
290
           data: [
303
           data: [
291
             { value: 380, name: '参与考核' },
304
             { value: 380, name: '参与考核' },
292
             { value: 20, name: '未参与考核' }
305
             { value: 20, name: '未参与考核' }
@@ -318,7 +331,8 @@ const initCharts = () => {
318
         tooltip: { trigger: 'item' },
331
         tooltip: { trigger: 'item' },
319
         series: [{
332
         series: [{
320
           type: 'pie',
333
           type: 'pie',
321
-          radius: '50%',
334
+          radius: '45%',
335
+          label: { formatter: '{b}\n{c}' },
322
           data: [
336
           data: [
323
             { value: 120, name: '一队' },
337
             { value: 120, name: '一队' },
324
             { value: 150, name: '二队' },
338
             { value: 150, name: '二队' },
@@ -335,7 +349,8 @@ const initCharts = () => {
335
         tooltip: { trigger: 'item' },
349
         tooltip: { trigger: 'item' },
336
         series: [{
350
         series: [{
337
           type: 'pie',
351
           type: 'pie',
338
-          radius: '50%',
352
+          radius: '45%',
353
+          label: { formatter: '{b}\n{c}' },
339
           data: [
354
           data: [
340
             { value: 45, name: '优秀' },
355
             { value: 45, name: '优秀' },
341
             { value: 280, name: '合格' },
356
             { value: 280, name: '合格' },
@@ -352,7 +367,8 @@ const initCharts = () => {
352
         tooltip: { trigger: 'item' },
367
         tooltip: { trigger: 'item' },
353
         series: [{
368
         series: [{
354
           type: 'pie',
369
           type: 'pie',
355
-          radius: '50%',
370
+          radius: '45%',
371
+          label: { formatter: '{b}\n{c}' },
356
           data: [
372
           data: [
357
             { value: 150, name: '安检员' },
373
             { value: 150, name: '安检员' },
358
             { value: 120, name: '设备操作员' },
374
             { value: 120, name: '设备操作员' },
@@ -370,7 +386,8 @@ const initCharts = () => {
370
         tooltip: { trigger: 'item' },
386
         tooltip: { trigger: 'item' },
371
         series: [{
387
         series: [{
372
           type: 'pie',
388
           type: 'pie',
373
-          radius: '50%',
389
+          radius: '45%',
390
+          label: { formatter: '{b}\n{c}' },
374
           data: [
391
           data: [
375
             { value: 35, name: '优秀' },
392
             { value: 35, name: '优秀' },
376
             { value: 320, name: '合格' },
393
             { value: 320, name: '合格' },
@@ -578,7 +595,7 @@ const getList = async () => {
578
       const data = deptPartRes.value.data
595
       const data = deptPartRes.value.data
579
       if (participantPieChartInstance && Array.isArray(data)) {
596
       if (participantPieChartInstance && Array.isArray(data)) {
580
         participantPieChartInstance.setOption({
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
       const data = actualImproveRes.value.data
646
       const data = actualImproveRes.value.data
630
       if (brigadePieChart1Instance && Array.isArray(data)) {
647
       if (brigadePieChart1Instance && Array.isArray(data)) {
631
         brigadePieChart1Instance.setOption({
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
       const data = actualIncompRes.value.data
655
       const data = actualIncompRes.value.data
639
       if (brigadePieChart2Instance && Array.isArray(data)) {
656
       if (brigadePieChart2Instance && Array.isArray(data)) {
640
         brigadePieChart2Instance.setOption({
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
       const data = teamImproveRes.value.data
664
       const data = teamImproveRes.value.data
648
       if (positionPieChart1Instance && Array.isArray(data)) {
665
       if (positionPieChart1Instance && Array.isArray(data)) {
649
         positionPieChart1Instance.setOption({
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
       const data = teamIncompRes.value.data
673
       const data = teamIncompRes.value.data
657
       if (positionPieChart2Instance && Array.isArray(data)) {
674
       if (positionPieChart2Instance && Array.isArray(data)) {
658
         positionPieChart2Instance.setOption({
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
   height: 100%;
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
 :deep(.el-table) {
1375
 :deep(.el-table) {
1345
   .el-table__header th {
1376
   .el-table__header th {
1346
     background-color: #f5f7fa;
1377
     background-color: #f5f7fa;