Browse Source

Merge branch 'blockingData' into dev

huoyi 1 month ago
parent
commit
df54ac473a

+ 13 - 1
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -206,6 +206,10 @@ const generateData = (count, min, max) => {
206 206
 
207 207
 const multiLineChartOption = (xAxisData, series) => ({
208 208
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
209
+  tooltip: {
210
+    trigger: 'axis',
211
+    axisPointer: { type: 'cross' }
212
+  },
209 213
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
210 214
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
211 215
   legend: { 
@@ -230,6 +234,10 @@ const multiLineChartOption = (xAxisData, series) => ({
230 234
 
231 235
 const horizontalBarChartOption = (data, color) => ({
232 236
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
237
+  tooltip: {
238
+    trigger: 'axis',
239
+    axisPointer: { type: 'shadow' }
240
+  },
233 241
   xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
234 242
   yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
235 243
   series: [{ 
@@ -243,6 +251,10 @@ const horizontalBarChartOption = (data, color) => ({
243 251
 
244 252
 const barLineChartOption = (xAxisData, barData, lineData) => ({
245 253
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
254
+  tooltip: {
255
+    trigger: 'axis',
256
+    axisPointer: { type: 'cross' }
257
+  },
246 258
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
247 259
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
248 260
   legend: { 
@@ -381,7 +393,7 @@ onMounted(() => {
381 393
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
382 394
   display: flex;
383 395
   flex-direction: column;
384
-  min-height: 280px;
396
+  min-height: 300px;
385 397
 }
386 398
 
387 399
 .chart-title {

+ 1 - 1
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeThree.vue

@@ -151,7 +151,7 @@ onMounted(() => {
151 151
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
152 152
   display: flex;
153 153
   flex-direction: column;
154
-  min-height: 280px;
154
+  min-height: 300px;
155 155
 }
156 156
 
157 157
 .chart-title {

+ 9 - 13
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeTwo.vue

@@ -201,7 +201,7 @@ const fetchData = async () => {
201 201
     if (genderRes.value?.data) {
202 202
       const genderData = genderRes.value.data.map(item => ({
203 203
         name: item.gender || item.name || '',
204
-        value: item.percentage || item.value || 0
204
+        value: item.count || item.value || 0
205 205
       }))
206 206
       setOption4(pieChartOption(genderData, ['#ec4899', '#3b82f6']))
207 207
     }
@@ -209,7 +209,7 @@ const fetchData = async () => {
209 209
     if (certDetailRes.value?.data) {
210 210
       const certData = certDetailRes.value.data.map(item => ({
211 211
         name: item.certificateLevel || item.name || '',
212
-        value: item.percentage || item.value || 0
212
+        value: item.count || item.value || 0
213 213
       }))
214 214
       setOption5(pieChartOption(certData, ['#22c55e', '#3b82f6']))
215 215
     }
@@ -217,7 +217,7 @@ const fetchData = async () => {
217 217
     if (certBaseRes.value?.data) {
218 218
       const baseData = certBaseRes.value.data.map(item => ({
219 219
         name: item.certificateLevel || item.name || '',
220
-        value: item.percentage || item.value || 0
220
+        value: item.count || item.value || 0
221 221
       }))
222 222
       setOption6(pieChartOption(baseData, ['#22c55e', '#3b82f6']))
223 223
     }
@@ -226,7 +226,7 @@ const fetchData = async () => {
226 226
       const colors = ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']
227 227
       const locationData = locationRes.value.data.map(item => ({
228 228
         name: item.itemLocation || item.name || '',
229
-        value: item.percentage || item.value || 0
229
+        value: item.count || item.value || 0
230 230
       }))
231 231
       setOption7(donutChartOption(locationData, colors))
232 232
     }
@@ -249,7 +249,7 @@ const fetchData = async () => {
249 249
       const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']
250 250
       const supervisorData = supervisorDistRes.value.data.map(item => ({
251 251
         name: item.supervisorName || item.name || '',
252
-        value: item.percentage || item.value || 0
252
+        value: item.totalCount || item.value || 0
253 253
       }))
254 254
       setOption10(donutChartOption(supervisorData, colors))
255 255
     }
@@ -329,18 +329,14 @@ const pieChartOption = (data, colors) => ({
329 329
   },
330 330
   series: [{
331 331
     type: 'pie',
332
-    radius: ['40%', '65%'],
332
+    radius: ['35%', '45%'],
333 333
     center: ['50%', '55%'],
334 334
     data: data,
335 335
     label: {
336 336
       show: true,
337
-      formatter: (params) => {
338
-        const total = data.reduce((sum, item) => sum + item.value, 0)
339
-        const percentage = ((params.value / total) * 100).toFixed(2)
340
-        return `${params.name}\n${params.value}(${percentage}%)`
341
-      },
337
+      formatter: '{b}\n{c} ({d}%)',
342 338
       fontSize: 10
343
-    }
339
+    },
344 340
   }]
345 341
 })
346 342
 
@@ -436,7 +432,7 @@ onMounted(() => {
436 432
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
437 433
   display: flex;
438 434
   flex-direction: column;
439
-  min-height: 280px;
435
+  min-height: 320px;
440 436
 }
441 437
 
442 438
 .chart-title {

+ 4 - 3
src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -303,13 +303,14 @@ const loadData = async () => {
303 303
       },
304 304
       series: [{
305 305
         type: 'bar',
306
-        data: brigadeRateData.map(d => d.avgBlockedRate),
306
+        data: brigadeRateData.map(d => Number(d.avgBlockedRate.toFixed(2))),
307 307
         itemStyle: { color: '#3b82f6' },
308 308
         barWidth: 8,
309 309
         label: {
310 310
           show: true,
311 311
           position: 'right',
312
-          fontSize: 10
312
+          fontSize: 10,
313
+          formatter: '{c}'
313 314
         }
314 315
       }]
315 316
     }
@@ -1408,7 +1409,7 @@ onMounted(() => {
1408 1409
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1409 1410
   display: flex;
1410 1411
   flex-direction: column;
1411
-  min-height: 280px;
1412
+  min-height: 300px;
1412 1413
 }
1413 1414
 
1414 1415
 .chart-row.full-width .chart-item {

+ 27 - 22
src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -127,7 +127,7 @@ const loadData = async () => {
127 127
       teamLeaderRanking(queryParams),
128 128
       reviewedUserRanking(queryParams)
129 129
     ])
130
-    
130
+
131 131
     // 更新排行榜数据
132 132
     if (supervisorRankRes?.value?.data) {
133 133
       rankData1.splice(0, rankData1.length, ...supervisorRankRes.value.data.map((item, index) => ({
@@ -172,7 +172,7 @@ const loadData = async () => {
172 172
 
173 173
     setOption2(pieOption(
174 174
       missCheckReasonRes?.value?.data?.map(item => ({
175
-        name: item.name || item.reason || '未知',
175
+        name: item.missCheckReasonCategory || item.reason || '未知',
176 176
         value: item.value || item.count || 0
177 177
       })) || [],
178 178
       ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'],
@@ -186,7 +186,6 @@ const loadData = async () => {
186 186
       })) || [],
187 187
       ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']
188 188
     ))
189
-
190 189
     setOption4(pieOption(
191 190
       genderRes?.value?.data?.map(item => ({
192 191
         name: item.gender || '未知',
@@ -214,7 +213,7 @@ const loadData = async () => {
214 213
         { name: '4年', key: 'cnt4Years' },
215 214
         { name: '5年', key: 'cntGe5Year' }
216 215
       ]
217
-      
216
+
218 217
       const seriesData = tenureLevels.map(level => ({
219 218
         name: level.name,
220 219
         type: 'bar',
@@ -231,9 +230,9 @@ const loadData = async () => {
231 230
 
232 231
       setOption6({
233 232
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
234
-        xAxis: { 
235
-          type: 'category', 
236
-          data: categories, 
233
+        xAxis: {
234
+          type: 'category',
235
+          data: categories,
237 236
           axisLabel: { fontSize: 9 },
238 237
           axisTick: {
239 238
             alignWithLabel: true
@@ -250,7 +249,7 @@ const loadData = async () => {
250 249
     if (certificateData.length > 0) {
251 250
       const certificateCategories = ['高级证书', '中级证书', '初级证书']
252 251
       const brigadeNames = [...new Set(certificateData.map(item => item.brigadeName))]
253
-      
252
+
254 253
       const certificateSeriesData = brigadeNames.map((brigadeName, index) => {
255 254
         const brigadeData = certificateData.find(d => d.brigadeName === brigadeName)
256 255
         return {
@@ -271,22 +270,22 @@ const loadData = async () => {
271 270
 
272 271
       setOption7({
273 272
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
274
-        xAxis: { 
275
-          type: 'category', 
276
-          data: certificateCategories, 
273
+        xAxis: {
274
+          type: 'category',
275
+          data: certificateCategories,
277 276
           axisLabel: { fontSize: 10 },
278 277
           axisLine: { lineStyle: { color: '#999' } }
279 278
         },
280
-        yAxis: { 
281
-          type: 'value', 
279
+        yAxis: {
280
+          type: 'value',
282 281
           axisLabel: { fontSize: 10 },
283 282
           axisLine: { lineStyle: { color: '#999' } },
284 283
           splitLine: { lineStyle: { color: '#eee' } }
285 284
         },
286
-        legend: { 
287
-          top: 0, 
288
-          right: 10, 
289
-          textStyle: { fontSize: 10 } 
285
+        legend: {
286
+          top: 0,
287
+          right: 10,
288
+          textStyle: { fontSize: 10 }
290 289
         },
291 290
         series: certificateSeriesData
292 291
       })
@@ -303,19 +302,24 @@ watch(() => props.filterParams, () => {
303 302
 }, { deep: true })
304 303
 
305 304
 const rankData1 = reactive([
306
-  
305
+
307 306
 ])
308 307
 
309 308
 const rankData2 = reactive([
310
-  
309
+
311 310
 ])
312 311
 
313 312
 const rankData3 = reactive([
314
- 
313
+
315 314
 ])
316 315
 
317 316
 const pieOption = (data, colors, isRing = false) => ({
318 317
   color: colors,
318
+  legend: {
319
+    orient: 'horizontal',
320
+    top: 'top',
321
+    textStyle: { fontSize: 10 }
322
+  },
319 323
   series: [{
320 324
     type: 'pie',
321 325
     radius: isRing ? ['50%', '70%'] : '60%',
@@ -325,7 +329,8 @@ const pieOption = (data, colors, isRing = false) => ({
325 329
       show: true,
326 330
       formatter: '{b}\n{c} ({d}%)',
327 331
       fontSize: 10
328
-    }
332
+    },
333
+
329 334
   }]
330 335
 })
331 336
 
@@ -390,7 +395,7 @@ onMounted(() => {
390 395
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
391 396
   display: flex;
392 397
   flex-direction: column;
393
-  min-height: 280px;
398
+  min-height: 300px;
394 399
 }
395 400
 
396 401
 .chart-title {