Explorar o código

refactor(runData): 优化多个页面的字典与图表配置

1. 修复dailyRunData重置表单未清空查询日期的问题
2. 将seizeData的硬编码班次字典改为系统字典调用
3. 为多个图表添加tooltip和label格式化配置,优化数据展示
huoyi hai 1 mes
pai
achega
580afca140

+ 1 - 0
src/views/runData/dailyRunData/index.vue

@@ -389,6 +389,7 @@ function handleQuery() {
389
 
389
 
390
 /** 重置按钮操作 */
390
 /** 重置按钮操作 */
391
 function resetQuery() {
391
 function resetQuery() {
392
+  queryParams.value.recordDate = null
392
   proxy.resetForm("queryRef")
393
   proxy.resetForm("queryRef")
393
   handleQuery()
394
   handleQuery()
394
 }
395
 }

+ 30 - 6
src/views/runData/runScreen/index.vue

@@ -477,7 +477,7 @@ function initCharts() {
477
     seizePieChartInstance = echarts.init(seizePieChart.value)
477
     seizePieChartInstance = echarts.init(seizePieChart.value)
478
     const seizureData = seizureCategoryData.value || []
478
     const seizureData = seizureCategoryData.value || []
479
     seizePieChartInstance.setOption({
479
     seizePieChartInstance.setOption({
480
-      tooltip: { trigger: 'item' },
480
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
481
       legend: { orient: 'vertical', right: 10, top: 'center' },
481
       legend: { orient: 'vertical', right: 10, top: 'center' },
482
       series: [{
482
       series: [{
483
         name: '查获数据',
483
         name: '查获数据',
@@ -491,6 +491,9 @@ function initCharts() {
491
             shadowOffsetX: 0,
491
             shadowOffsetX: 0,
492
             shadowColor: 'rgba(0, 0, 0, 0.5)'
492
             shadowColor: 'rgba(0, 0, 0, 0.5)'
493
           }
493
           }
494
+        },
495
+        label: {
496
+          formatter: '{b}: {c} ({d}%)'
494
         }
497
         }
495
       }]
498
       }]
496
     })
499
     })
@@ -508,7 +511,12 @@ function initCharts() {
508
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
511
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
509
         return item ? item.grandTotal : 0
512
         return item ? item.grandTotal : 0
510
       }),
513
       }),
511
-      type: 'bar'
514
+      type: 'bar',
515
+      label: {
516
+        show: true,
517
+        position: 'top',
518
+        formatter: '{c}'
519
+      }
512
     }))
520
     }))
513
     teamSeizeBarChartInstance.setOption({
521
     teamSeizeBarChartInstance.setOption({
514
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
522
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
@@ -534,7 +542,12 @@ function initCharts() {
534
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
542
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
535
         return item ? item.t1Total : 0
543
         return item ? item.t1Total : 0
536
       }),
544
       }),
537
-      type: 'bar'
545
+      type: 'bar',
546
+      label: {
547
+        show: true,
548
+        position: 'top',
549
+        formatter: '{c}'
550
+      }
538
     }))
551
     }))
539
     t1TeamBarChartInstance.setOption({
552
     t1TeamBarChartInstance.setOption({
540
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
553
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
@@ -560,7 +573,12 @@ function initCharts() {
560
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
573
         const item = brigadeData.find(d => d.shift === shift && d.brigade === brigade)
561
         return item ? item.t2Total : 0
574
         return item ? item.t2Total : 0
562
       }),
575
       }),
563
-      type: 'bar'
576
+      type: 'bar',
577
+      label: {
578
+        show: true,
579
+        position: 'top',
580
+        formatter: '{c}'
581
+      }
564
     }))
582
     }))
565
     t2TeamBarChartInstance.setOption({
583
     t2TeamBarChartInstance.setOption({
566
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
584
       tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
@@ -590,7 +608,7 @@ function initCharts() {
590
     ].filter(item => item.value > 0)
608
     ].filter(item => item.value > 0)
591
     
609
     
592
     powerBankPieChartInstance.setOption({
610
     powerBankPieChartInstance.setOption({
593
-      tooltip: { trigger: 'item' },
611
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
594
       legend: { orient: 'vertical', right: 10, top: 'center' },
612
       legend: { orient: 'vertical', right: 10, top: 'center' },
595
       series: [{
613
       series: [{
596
         name: '不合格充电宝',
614
         name: '不合格充电宝',
@@ -604,6 +622,9 @@ function initCharts() {
604
             shadowOffsetX: 0,
622
             shadowOffsetX: 0,
605
             shadowColor: 'rgba(0, 0, 0, 0.5)'
623
             shadowColor: 'rgba(0, 0, 0, 0.5)'
606
           }
624
           }
625
+        },
626
+        label: {
627
+          formatter: '{b}: {c} ({d}%)'
607
         }
628
         }
608
       }]
629
       }]
609
     })
630
     })
@@ -620,7 +641,7 @@ function initCharts() {
620
     ].filter(item => item.value > 0)
641
     ].filter(item => item.value > 0)
621
     
642
     
622
     waitingAreaPieChartInstance.setOption({
643
     waitingAreaPieChartInstance.setOption({
623
-      tooltip: { trigger: 'item' },
644
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
624
       legend: { orient: 'vertical', right: 10, top: 'center' },
645
       legend: { orient: 'vertical', right: 10, top: 'center' },
625
       series: [{
646
       series: [{
626
         name: '禁限带物品',
647
         name: '禁限带物品',
@@ -634,6 +655,9 @@ function initCharts() {
634
             shadowOffsetX: 0,
655
             shadowOffsetX: 0,
635
             shadowColor: 'rgba(0, 0, 0, 0.5)'
656
             shadowColor: 'rgba(0, 0, 0, 0.5)'
636
           }
657
           }
658
+        },
659
+        label: {
660
+          formatter: '{b}: {c} ({d}%)'
637
         }
661
         }
638
       }]
662
       }]
639
     })
663
     })

+ 2 - 4
src/views/runData/seizeData/index.vue

@@ -280,6 +280,7 @@ import { listDept } from '@/api/system/dept'
280
 import { getToken } from '@/utils/auth'
280
 import { getToken } from '@/utils/auth'
281
 
281
 
282
 const { proxy } = getCurrentInstance()
282
 const { proxy } = getCurrentInstance()
283
+const { base_shift } = proxy.useDict('base_shift')
283
 
284
 
284
 const seizeDataList = ref([])
285
 const seizeDataList = ref([])
285
 const open = ref(false)
286
 const open = ref(false)
@@ -292,10 +293,7 @@ const total = ref(0)
292
 const title = ref("")
293
 const title = ref("")
293
 
294
 
294
 // 班次字典
295
 // 班次字典
295
-const shiftOptions = [
296
-  { value: '早班', label: '早班' },
297
-  { value: '晚班', label: '晚班' }
298
-]
296
+const shiftOptions = base_shift
299
 
297
 
300
 // 大队选项
298
 // 大队选项
301
 const brigadeOptions = ref([])
299
 const brigadeOptions = ref([])