Explorar el Código

refactor(profile): 重构雷达图表组件与数据逻辑

合并冗余的雷达图参数为单个chartData属性,重构数据处理流程,移除废弃的多组数据变量,同时适配新的数据结构接口
huoyi hace 3 semanas
padre
commit
7f818b3291

+ 35 - 59
src/views/portraitManagement/components/ProfileRadar.vue

@@ -7,11 +7,11 @@
7 7
           <span class="item-label">{{ item.name }}</span>
8 8
           <div class="progress-row">
9 9
             <div class="progress-bar">
10
-              <div class="progress-fill" :style="{ width: item.value + '%', background: `linear-gradient(to right, transparent, ${item.color})` }">
10
+              <div class="progress-fill" :style="{ width: (item.finalScore || 0) + '%', background: `linear-gradient(to right, transparent, ${item.color})` }">
11 11
                 <span class="progress-end"></span>
12 12
               </div>
13 13
             </div>
14
-            <span class="item-value">{{ item.value }}</span>
14
+            <span class="item-value">{{ item.finalScore || 0 }}</span>
15 15
           </div>
16 16
         </div>
17 17
       </div>
@@ -20,71 +20,57 @@
20 20
 </template>
21 21
 
22 22
 <script setup>
23
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
23
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
24 24
 import * as echarts from 'echarts'
25 25
 import InfoCard from './card.vue'
26 26
 
27 27
 const props = defineProps({
28
-  chartData1: {
29
-    type: Array,
30
-    default: () => []
31
-  },
32
-  chartData2: {
33
-    type: Array,
34
-    default: () => []
35
-  },
36
-  chartData3: {
37
-    type: Array,
38
-    default: () => []
39
-  },
40
-  chartData4: {
28
+  chartData: {
41 29
     type: Array,
42 30
     default: () => []
43 31
   }
44 32
 })
45 33
 
46 34
 const defaultRadarData = [
47
-  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
48
-  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
49
-  { name: '通道安全防控力', value: 72, color: '#ff4757' },
50
-  { name: '通道安全防控力', value: 68, color: '#ff4757' },
51
-  { name: '通道安全防控力', value: 78, color: '#3742fa' },
52
-  { name: '通道安全防控力', value: 80, color: '#3742fa' },
53
-  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
35
+  { name: '通道安全防控力', finalScore: 86, color: '#00e5ff' },
36
+  { name: '通道安全防控力', finalScore: 90, color: '#00e5ff' },
37
+  { name: '通道安全防控力', finalScore: 72, color: '#ff4757' },
38
+  { name: '通道安全防控力', finalScore: 68, color: '#ff4757' },
39
+  { name: '通道安全防控力', finalScore: 78, color: '#3742fa' },
40
+  { name: '通道安全防控力', finalScore: 80, color: '#3742fa' },
41
+  { name: '通道协同作战能力', finalScore: 72, color: '#ff4757' }
54 42
 ]
55 43
 
56
-const defaultIndicators = [
57
-  { name: '通道安全防控力', max: 100 },
58
-  { name: '通道安全防控力', max: 100 },
59
-  { name: '通道安全防控力', max: 100 },
60
-  { name: '通道安全防控力', max: 100 },
61
-  { name: '通道安全防控力', max: 100 },
62
-  { name: '通道安全防控力', max: 100 },
63
-  { name: '通道协同作战能力', max: 100 }
64
-]
44
+const computedRadarData = computed(() => {
45
+  return props.chartData.length > 0 ? props.chartData : defaultRadarData
46
+})
65 47
 
66
-const defaultSeries1 = [86, 90, 72, 68, 78, 80, 72]
67
-const defaultSeries2 = [80, 85, 65, 60, 72, 75, 68]
48
+const computedIndicators = computed(() => {
49
+  const data = computedRadarData.value
50
+  const maxValue = Math.max(...data.map(item => item.finalScore || 0), 100)
51
+  return data.map(item => ({
52
+    name: item.name,
53
+    max: maxValue
54
+  }))
55
+})
68 56
 
69
-const computedRadarData = computed(() => {
70
-  return props.chartData1.length > 0 ? props.chartData1 : defaultRadarData
57
+const computedSeries = computed(() => {
58
+  return computedRadarData.value.map(item => item.finalScore || 0)
71 59
 })
72 60
 
73 61
 const radarChartRef = ref(null)
74 62
 let radarChart = null
75 63
 
76
-const initRadarChart = () => {
64
+const updateRadarChart = () => {
77 65
   if (!radarChartRef.value) return
78 66
 
79
-  radarChart = echarts.init(radarChartRef.value)
80
-
81
-  const indicators = props.chartData2.length > 0 ? props.chartData2 : defaultIndicators
82
-  const series1 = props.chartData3.length > 0 ? props.chartData3 : defaultSeries1
83
-  const series2 = props.chartData4.length > 0 ? props.chartData4 : defaultSeries2
67
+  if (!radarChart) {
68
+    radarChart = echarts.init(radarChartRef.value)
69
+  }
84 70
 
85 71
   const option = {
86 72
     radar: {
87
-      indicator: indicators,
73
+      indicator: computedIndicators.value,
88 74
       center: ['50%', '50%'],
89 75
       radius: '70%',
90 76
       splitNumber: 4,
@@ -115,7 +101,7 @@ const initRadarChart = () => {
115 101
         type: 'radar',
116 102
         data: [
117 103
           {
118
-            value: series1,
104
+            value: computedSeries.value,
119 105
             name: '综合得分',
120 106
             areaStyle: {
121 107
               color: 'rgba(189, 3, 251, 0.3)'
@@ -127,20 +113,6 @@ const initRadarChart = () => {
127 113
             itemStyle: {
128 114
               color: '#bd03fb'
129 115
             }
130
-          },
131
-          {
132
-            value: series2,
133
-            name: '基准值',
134
-            areaStyle: {
135
-              color: 'rgba(15, 70, 250, 0.2)'
136
-            },
137
-            lineStyle: {
138
-              color: '#0f46fa',
139
-              width: 2
140
-            },
141
-            itemStyle: {
142
-              color: '#0f46fa'
143
-            }
144 116
           }
145 117
         ],
146 118
         symbol: 'circle',
@@ -164,10 +136,14 @@ const handleResize = () => {
164 136
   if (radarChart) radarChart.resize()
165 137
 }
166 138
 
139
+watch(() => props.chartData, () => {
140
+  updateRadarChart()
141
+}, { deep: true })
142
+
167 143
 onMounted(() => {
168 144
   nextTick(() => {
169 145
     setTimeout(() => {
170
-      initRadarChart()
146
+      updateRadarChart()
171 147
       window.addEventListener('resize', handleResize)
172 148
     }, 100)
173 149
   })

+ 6 - 49
src/views/portraitManagement/groupProfile/component/profile.vue

@@ -2,12 +2,7 @@
2 2
   <div class="main-content-wrapper">
3 3
     <div class="main-content">
4 4
       <div class="content-row">
5
-        <ProfileRadar
6
-          :chartData1="radarData"
7
-          :chartData2="radarIndicators"
8
-          :chartData3="radarSeries1"
9
-          :chartData4="radarSeries2"
10
-        />
5
+        <ProfileRadar :chartData="radarData" />
11 6
         <ProfileMembers
12 7
           :columns="memberColumns"
13 8
           :data="teamMembers"
@@ -45,50 +40,14 @@ const props = defineProps({
45 40
   }
46 41
 })
47 42
 
48
-const radarData = ref([
49
-  { name: '通道安全防控力', value: 86, color: '#00e5ff' },
50
-  { name: '通道安全防控力', value: 90, color: '#00e5ff' },
51
-  { name: '通道安全防控力', value: 72, color: '#ff4757' },
52
-  { name: '通道安全防控力', value: 68, color: '#ff4757' },
53
-  { name: '通道安全防控力', value: 78, color: '#3742fa' },
54
-  { name: '通道安全防控力', value: 80, color: '#3742fa' },
55
-  { name: '通道协同作战能力', value: 72, color: '#ff4757' }
56
-])
57
-
58
-const radarIndicators = ref([
59
-  { name: '通道安全防控力', max: 100 },
60
-  { name: '通道安全防控力', max: 100 },
61
-  { name: '通道安全防控力', max: 100 },
62
-  { name: '通道安全防控力', max: 100 },
63
-  { name: '通道安全防控力', max: 100 },
64
-  { name: '通道安全防控力', max: 100 },
65
-  { name: '通道协同作战能力', max: 100 }
66
-])
67
-
68
-const radarSeries1 = ref([86, 90, 72, 68, 78, 80, 72])
69
-const radarSeries2 = ref([80, 85, 65, 60, 72, 75, 68])
43
+const radarData = ref([])
70 44
 
71 45
 const teamMembers = ref([
72
-  { name: '孙晓波', age: 25, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 6, totalScore: 88 },
73
-  { name: '孙晓波', age: 28, seniority: 6, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 5, avgYears: 5, totalScore: 85 },
74
-  { name: '孙晓波', age: 31, seniority: 2, gender: '女', nation: '汉', political: '党员', position: '组长', qualification: '前传、特检、人身', skillLevel: '四级', operateYears: 5, avgYears: 76, totalScore: 76 },
75
-  { name: '马力', age: 26, seniority: 3, gender: '男', nation: '汉', political: '群众', position: '组长', qualification: '前传、特检、人身', skillLevel: '五级', operateYears: 5, avgYears: 81, totalScore: 81 },
76
-  { name: '马建国', age: 24, seniority: 5, gender: '男', nation: '汉', political: '党员', position: '安检员', qualification: '前传、特检、人身', skillLevel: '三级', operateYears: 6, avgYears: 78, totalScore: 78 }
46
+ 
77 47
 ])
78 48
 
79 49
 const memberColumns = ref([
80
-  { label: '姓名', prop: 'personName' },
81
-  { label: '年龄', prop: 'age' },
82
-  { label: '司龄', prop: 'workYears' },
83
-  { label: '性别', prop: 'sex' },
84
-  { label: '民族', prop: 'nation' },
85
-  { label: '政治面貌', prop: 'politicalStatus' },
86
-  { label: '职务', prop: 'roleNames' },
87
-  { label: '岗位资质', prop: 'qualification' },
88
-  { label: '职业技能等级', prop: 'qualificationLevel' },
89
-  { label: '开机年限', prop: 'xrayOperatorYears' },
90
-  { label: '平均年限', prop: 'avgYears' },
91
-  { label: '综合得分', prop: 'totalScore' }
50
+ 
92 51
 ])
93 52
 
94 53
 const genderData = ref([
@@ -157,10 +116,8 @@ const fetchRadarData = async (params) => {
157 116
   try {
158 117
     const res = await getDimensionScoreOverview(params)
159 118
     if (res.code === 200 && res.data) {
160
-      radarData.value = res.data.radarData || []
161
-      radarIndicators.value = res.data.radarIndicators || []
162
-      radarSeries1.value = res.data.radarSeries1 || []
163
-      radarSeries2.value = res.data.radarSeries2 || []
119
+      radarData.value = res.data.dimensions || [{ name: '', finalScore: 0, color: '#00e5ff' }]
120
+     
164 121
     }
165 122
   } catch (error) {
166 123
     console.error('获取维度得分一览失败', error)