From dc938f346a7ffd039fce7453b75b7c4f09026510 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 10 Jul 2023 18:39:07 +0800
Subject: [PATCH] fix downloader

---
 src/api/types.ts                           | 15 ++++
 src/views/dashboard/AnalyticsBarCharts.vue | 97 ----------------------
 src/views/dashboard/AnalyticsSpeed.vue     | 97 +++++++++++++++++-----
 3 files changed, 91 insertions(+), 118 deletions(-)
 delete mode 100644 src/views/dashboard/AnalyticsBarCharts.vue

diff --git a/src/api/types.ts b/src/api/types.ts
index 13d6f739..c7cd0431 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -466,3 +466,18 @@ export interface Process {
     // 进程内存占用
     memory: number,
 }
+
+
+// 下载器信息
+export interface DownloaderInfo {
+    // 下载速度
+    download_speed: number
+    // 上传速度
+    upload_speed: number
+    // 下载量
+    download_size: number
+    // 上传量
+    upload_size: number
+    // 剩余空间
+    free_space:number
+}
diff --git a/src/views/dashboard/AnalyticsBarCharts.vue b/src/views/dashboard/AnalyticsBarCharts.vue
deleted file mode 100644
index 403868ff..00000000
--- a/src/views/dashboard/AnalyticsBarCharts.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import VueApexCharts from 'vue3-apexcharts'
-import { useTheme } from 'vuetify'
-
-const vuetifyTheme = useTheme()
-
-const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
-
-const series = [
-  {
-    name: '2020',
-    data: [45, 85, 65, 50, 70],
-  },
-]
-
-const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
-  const backgroundColor = currentTheme.value.background
-
-  return {
-    chart: {
-      type: 'bar',
-      stacked: false,
-      parentHeightOffset: 0,
-      toolbar: {
-        show: false,
-      },
-    },
-    grid: {
-      show: false,
-      padding: {
-        top: -10,
-        left: -7,
-        right: 0,
-        bottom: 5,
-      },
-    },
-    colors: [currentTheme.value.error, currentTheme.value.primary, currentTheme.value.error, currentTheme.value.primary, currentTheme.value.primary],
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        columnWidth: '20%',
-        borderRadius: 4,
-        startingShape: 'rounded',
-        endingShape: 'rounded',
-        distributed: true,
-        colors: {
-          backgroundBarColors: [backgroundColor, backgroundColor, backgroundColor, backgroundColor, backgroundColor],
-          backgroundBarRadius: 5,
-        },
-      },
-    },
-    legend: {
-      show: false,
-    },
-    dataLabels: {
-      enabled: false,
-    },
-    xaxis: {
-      labels: {
-        show: false,
-      },
-      axisBorder: {
-        show: false,
-      },
-      axisTicks: {
-        show: false,
-      },
-    },
-    yaxis: {
-      show: false,
-    },
-    tooltip: {
-      enabled: false,
-    },
-  }
-})
-</script>
-
-<template>
-  <VCard>
-    <VCardText>
-      <h6 class="text-h6">
-        2,856
-      </h6>
-
-      <VueApexCharts
-        :options="chartOptions"
-        :series="series"
-        :height="95"
-      />
-
-      <p class="text-center font-weight-medium mb-0">
-        Sessions
-      </p>
-    </VCardText>
-  </VCard>
-</template>
diff --git a/src/views/dashboard/AnalyticsSpeed.vue b/src/views/dashboard/AnalyticsSpeed.vue
index 37f6e0e9..4bac941e 100644
--- a/src/views/dashboard/AnalyticsSpeed.vue
+++ b/src/views/dashboard/AnalyticsSpeed.vue
@@ -1,21 +1,76 @@
 <script setup lang="ts">
-const earnings = [
+import { formatFileSize } from "@/@core/utils/formatters";
+import api from "@/api";
+import { DownloaderInfo } from "@/api/types";
+
+// 定时器
+let refreshTimer: NodeJS.Timer | null = null;
+
+// 下载器信息
+const downloadInfo = ref<DownloaderInfo>({
+  // 下载速度
+  download_speed: 0,
+  // 上传速度
+  upload_speed: 0,
+  // 下载量
+  download_size: 0,
+  // 上传量
+  upload_size: 0,
+  // 剩余空间
+  free_space: 0,
+});
+
+// 显示项
+const infoItems = ref([
   {
-    avatar: "mdi-upload",
-    title: "总上传量",
-    amount: "193 GB",
+    avatar: "",
+    title: "",
+    amount: "",
   },
-  {
-    avatar: "mdi-download",
-    title: "总下载量",
-    amount: "12,235 GB",
-  },
-  {
-    avatar: "mdi-content-save",
-    title: "磁盘剩余空间",
-    amount: "1.24 TB",
-  },
-];
+]);
+
+// 调用API查询下载器数据
+const loadDownloaderInfo = async () => {
+  try {
+    const res: DownloaderInfo = await api.get("dashboard/downloader");
+    downloadInfo.value = res;
+    infoItems.value = [
+      {
+        avatar: "mdi-upload",
+        title: "总上传量",
+        amount: formatFileSize(res.upload_size),
+      },
+      {
+        avatar: "mdi-download",
+        title: "总下载量",
+        amount: formatFileSize(res.download_size),
+      },
+      {
+        avatar: "mdi-content-save",
+        title: "磁盘剩余空间",
+        amount: formatFileSize(res.free_space),
+      },
+    ];
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+onMounted(() => {
+  loadDownloaderInfo();
+  // 启动定时器
+  refreshTimer = setInterval(() => {
+    loadDownloaderInfo();
+  }, 3000);
+});
+
+// 组件卸载时停止定时器
+onUnmounted(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = null;
+  }
+});
 </script>
 
 <template>
@@ -33,24 +88,24 @@ const earnings = [
     <VCardText class="pt-4">
       <div class="d-flex align-center">
         <h4 class="text-h4 me-2">
-          ↑21 KB/s <br />
-          ↓24,895 KB/s
+          ↑{{ formatFileSize(downloadInfo.upload_speed) }}/s <br />
+          ↓{{ formatFileSize(downloadInfo.download_speed) }}/s
         </h4>
       </div>
       <VList class="card-list mt-9">
-        <VListItem v-for="earning in earnings" :key="earning.title">
+        <VListItem v-for="item in infoItems" :key="item.title">
           <template #prepend>
-            <VIcon rounded :icon="earning.avatar" />
+            <VIcon rounded :icon="item.avatar" />
           </template>
 
           <VListItemTitle class="text-sm font-weight-medium mb-1">
-            {{ earning.title }}
+            {{ item.title }}
           </VListItemTitle>
 
           <template #append>
             <div>
               <h6 class="text-sm font-weight-medium mb-2">
-                {{ earning.amount }}
+                {{ item.amount }}
               </h6>
             </div>
           </template>