feat: 文件管理增加资源统计，统计总存储量、各类型文件存储占用

src/apis/system/file.ts

@@ -17,3 +17,8 @@ export function updateFile(data: any, id: string) {
 export function deleteFile(ids: string | Array<string>) {
   return http.del(`${BASE_URL}/${ids}`)
 }
+
+/** @desc 查询文件资源统计 */
+export function statisticsFile() {
+  return http.get(`${BASE_URL}/statistics`)
+}

src/apis/system/type.ts

@@ -188,6 +188,14 @@ export interface FileQuery extends PageQuery {
   name?: string
   type?: string
 }
+/** 文件资源统计 */
+export interface FileStatisticsResp {
+  type: string
+  size: number
+  formattedSize: string
+  number: number
+  data: Array<FileStatisticsResp>
+}
 
 /** 系统存储类型 */
 export type StorageResp = {

src/views/system/file/main/FileAside.vue

@@ -16,11 +16,13 @@
         </a-sub-menu>
       </a-menu>
     </a-card>
+    <FileAsideStatistics />
   </div>
 </template>
 
 <script setup lang="ts">
 import { FileTypeList, type FileTypeListItem } from '@/constant/file'
+import FileAsideStatistics from '@/views/system/file/main/FileAsideStatistics.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -63,11 +65,4 @@ const onClickItem = (item: FileTypeListItem) => {
     border-radius: 0;
   }
 }
-
-.percent {
-  margin-top: 10px;
-  padding: 14px 12px;
-  box-sizing: border-box;
-  background-color: var(--color-bg-1);
-}
 </style>

src/views/system/file/main/FileAsideStatistics.vue

@@ -0,0 +1,114 @@
+<template>
+  <section class="percent">
+    <a-space class="statistic-space" align="center" size="medium" fill>
+      <template #split>
+        <a-divider direction="vertical" />
+      </template>
+      <a-statistic class="statistic-item" title="容量" :value="totalData.size" :value-style="statisticValueStyle">
+        <template #suffix>{{ totalData.unit }}</template>
+      </a-statistic>
+      <a-statistic class="statistic-item" title="数量" :value="totalData.number" :value-style="statisticValueStyle" />
+    </a-space>
+    <a-divider />
+    <VCharts :option="option" autoresize :style="{ height: '320px' }" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import VCharts from 'vue-echarts'
+import { use } from 'echarts/core'
+import { PieChart } from 'echarts/charts'
+import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer])
+import { statisticsFile, type FileStatisticsResp } from '@/apis'
+import { FileTypeList } from '@/constant/file'
+import { useChart } from '@/hooks'
+import { formatFileSize } from '@/utils'
+
+const totalData = ref<FileStatisticsResp>({})
+const chartData = ref<Array<FileStatisticsResp>>([])
+const statisticValueStyle = { color: '#5856D6', 'font-size': '18px' }
+const { option } = useChart(() => {
+  return {
+    grid: {},
+    legend: {},
+    series: [
+      {
+        type: 'pie',
+        radius: ['40%', '70%'],
+        avoidLabelOverlap: true,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 12,
+            fontWeight: 'bold',
+            formatter: function (params) {
+              return params.name + '\n' + params.value + '\n' + params.data.size
+            }
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: chartData.value
+      }
+    ]
+  }
+})
+
+const loading = ref(false)
+const getStatisticsData = async () => {
+  try {
+    loading.value = true
+    chartData.value = []
+    totalData.value = {}
+    const { data: resData } = await statisticsFile()
+    const formatSize = formatFileSize(resData.size).split(' ')
+    totalData.value = {
+      size: parseFloat(formatSize[0]),
+      number: resData.number,
+      unit: formatSize[1]
+    }
+    console.log(totalData.value)
+    resData.data.forEach((fs: FileStatisticsResp) => {
+      const matchedItem = FileTypeList.find((item) => item.value == fs.type)
+      console.log(matchedItem)
+      chartData.value.unshift({
+        name: matchedItem ? matchedItem.name : '',
+        value: fs.number,
+        size: formatFileSize(fs.size)
+      })
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  getStatisticsData()
+})
+</script>
+
+<style lang="scss" scoped>
+.statistic-space {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.statistic-item {
+  text-align: center;
+}
+
+.percent {
+  margin-top: 10px;
+  padding: 14px 12px;
+  box-sizing: border-box;
+  background-color: var(--color-bg-1);
+}
+</style>