歌曲统计增加 曲库统计图

entry/src/main/ets/pages/ChartsCount.ets

@@ -10,7 +10,7 @@ import { changeMusicCover, findLocalCoverImage, getApiLyric, repairAudioMetadata
 import { util } from '@kit.ArkTS';
 import { FFMpegTags } from '../common/util/Utility';
 import MediaTable from '../common/util/MediaTable';
-
+import { McPieChart, Options } from '@mcui/mccharts'
 
 // 批量编辑标签
 @Component
@@ -23,6 +23,9 @@ export struct ChartsCount {
   @State dataSource: LazyDataSource<VideoItem> = new LazyDataSource([])
   @State selectedFiles: Array<VideoItem> = []
   @StorageProp('topRectHeight') topRectHeight: number = 0;
+  @State mediaKuCount: number = 0;
+  @State albumCount: number = 0;
+  @State artistCount: number = 0;
   @State isDarkMode: boolean = false
   @StorageProp('currentColorMode') @Watch('onColorModeChange') currentMode: number =
     ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
@@ -30,6 +33,23 @@ export struct ChartsCount {
   context =  this.getUIContext().getHostContext() as common.UIAbilityContext
 
   private table: MediaTable = new MediaTable(this.context)
+  @State defOption: Options = new Options({
+    title: {
+      show: true,
+      text: '曲库统计',
+      left: 40,
+      top: 20
+    },
+    series:[
+      {
+        data:[
+          {value:this.mediaKuCount, name:'媒体库'},
+          {value:this.artistCount, name:'艺术家'},
+          {value:this.albumCount, name:'专辑'},
+        ]
+      }
+    ]
+  })
 
 
   onColorModeChange() {
@@ -37,6 +57,7 @@ export struct ChartsCount {
   }
 
   async aboutToAppear() {
+    this.centerChart()
     await new Promise<void>((resolve, reject) => {
       this.table.getRdbStore(this.context,  (err:Error) => {
         err ? reject(err) : resolve();
@@ -56,6 +77,26 @@ export struct ChartsCount {
 
   }
 
+  centerChart(){
+    this.mediaKuCount = PreferencesUtil.getNumberSync('mediaKuCount', 0)
+    this.artistCount = PreferencesUtil.getNumberSync('artistCount', 0)
+    this.albumCount = PreferencesUtil.getNumberSync('albumCount', 0)
+    setTimeout(() => {
+      // 使用Option实例对象的setVal方法来实现，修改什么属性就传什么
+      this.defOption.setVal({
+        series: [
+          {
+            data:[
+              {value:this.mediaKuCount, name:'媒体库'},
+              {value:this.artistCount, name:'艺术家'},
+              {value:this.albumCount, name:'专辑'},
+            ]
+          }
+        ]
+      })
+    }, 2000)
+  }
+
 
 
   build() {
@@ -70,27 +111,40 @@ export struct ChartsCount {
 
   }
 
+  @Builder
+  centerCharts() {
+    Row() {
+      McPieChart({
+        options: this.defOption
+      })
+    }
+    .borderRadius(14)
+    .backgroundColor($r('app.color.start_window_background'))
+    .height('35%')
+    .margin({bottom:10})
+  }
+
   @Builder
   listView() {
     Column(){
       List({ scroller: this.listScroller }) {
-        // ListItemGroup({ header: this.listHeader() }) {
-        LazyForEach(this.dataSource, (item: VideoItem, index: number) => {
-          ListItem() {
-            Column() {
-              this.MusicItem(item, index)
+        ListItemGroup({ header: this.centerCharts() }) {
+          LazyForEach(this.dataSource, (item: VideoItem, index: number) => {
+            ListItem() {
+              Column() {
+                this.MusicItem(item, index)
+              }
             }
-          }
-          .borderRadius(14)
-          .backgroundColor($r('app.color.start_window_background'))
-          .margin({top:7,bottom:7})
-          .transition(TransitionEffect.asymmetric(
-            TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
-            TransitionEffect.scale({ x: 0, y: 0 })
-          ))
-          .clickEffect({ level: ClickEffectLevel.LIGHT })
-        }, (item: VideoItem) => item.filePath)
-        // }
+            .borderRadius(14)
+            .backgroundColor($r('app.color.start_window_background'))
+            .margin({top:7,bottom:7})
+            .transition(TransitionEffect.asymmetric(
+              TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }),
+              TransitionEffect.scale({ x: 0, y: 0 })
+            ))
+            .clickEffect({ level: ClickEffectLevel.LIGHT })
+          }, (item: VideoItem) => item.filePath)
+        }
 
       }
       .cachedCount(2)
@@ -105,7 +159,7 @@ export struct ChartsCount {
     .borderRadius(20)
     .padding({top:10,bottom:6})
     .height('auto')
-    .margin({top:20,right:20,left:20})
+    .margin({top:10,right:20,left:20})
     .layoutWeight(1)
     .height('100%')
   }
@@ -140,7 +194,7 @@ export struct ChartsCount {
       // 自定义标题栏（Stack实现绝对居中）
       Stack() {
         // 居中标题
-        Text('次数统计')
+        Text('歌曲统计')
           .fontSize(18)
           .fontColor(Color.White)
           .align(Alignment.Center)
@@ -176,7 +230,7 @@ export struct ChartsCount {
         Column() {
           Row() {
             Image(item.pixelMapPath)
-              .width(80)
+              .width(85)
               .height(80)
               .borderRadius(8)
               .alt($r('app.media.music_red'))

entry/src/main/ets/view/LocalMusic.ets

@@ -733,10 +733,12 @@ export struct LocalMusic {
           if (this.modeType === 1) {
             this.updateListData(this.mediaKuList)
           }
+          PreferencesUtil.putSync('mediaKuCount', this.mediaKuList.length)
           break;
         case 103: //收到查询艺术家列表
           this.artistMap = e.data.data1;
           this.artistList = e.data.data2;
+          PreferencesUtil.putSync('artistCount', this.artistList.length)
           break;
 
         case 104: //收到查询专辑列表
@@ -747,6 +749,7 @@ export struct LocalMusic {
           if (this.isStartAutoPlay) {
             this.startPlayOrResumePlay()
           }
+          PreferencesUtil.putSync('albumCount', this.albumList.length)
           break;
 
       }