From 1250cfb173820f524af8932f07bf55bae6142778 Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Thu, 20 Jul 2023 15:06:36 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/wails/frontend/components.d.ts            |  1 +
 .../system/network/NetworkSumMaxRate.vue      | 26 +++++++++++++++++++
 .../frontend/src/utils/system/network.ts      |  8 ++++++
 .../frontend/src/views/tabs/home/Home.vue     | 16 +++++++-----
 4 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 app/wails/frontend/src/components/system/network/NetworkSumMaxRate.vue

diff --git a/app/wails/frontend/components.d.ts b/app/wails/frontend/components.d.ts
index f60411e..551f7c8 100644
--- a/app/wails/frontend/components.d.ts
+++ b/app/wails/frontend/components.d.ts
@@ -23,6 +23,7 @@ declare module 'vue' {
     MemoryUsage: typeof import('./src/components/system/memory/MemoryUsage.vue')['default']
     MemoryUsageChart: typeof import('./src/components/system/memory/MemoryUsageChart.vue')['default']
     NetworkCounter: typeof import('./src/components/system/network/NetworkCounter.vue')['default']
+    NetworkSumMaxRate: typeof import('./src/components/system/network/NetworkSumMaxRate.vue')['default']
     NetworkSumRateChart: typeof import('./src/components/system/network/NetworkSumRateChart.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/app/wails/frontend/src/components/system/network/NetworkSumMaxRate.vue b/app/wails/frontend/src/components/system/network/NetworkSumMaxRate.vue
new file mode 100644
index 0000000..2b0d301
--- /dev/null
+++ b/app/wails/frontend/src/components/system/network/NetworkSumMaxRate.vue
@@ -0,0 +1,26 @@
+<script setup>
+import {useNetworkSumMaxRate} from "src/utils/system/network";
+import {bytesToSizeWithUnit} from "src/utils/file/file";
+
+const networkSumMaxRate = useNetworkSumMaxRate()
+</script>
+
+<template>
+    <div class="text-center">
+        <el-statistic title="最高下载速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumMaxRate.recv">
+        </el-statistic>
+
+        <el-statistic title="最高上传速度"
+                      :formatter="bytesToSizeWithUnit"
+                      suffix="/s"
+                      :value="networkSumMaxRate.sent">
+        </el-statistic>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/app/wails/frontend/src/utils/system/network.ts b/app/wails/frontend/src/utils/system/network.ts
index 00c5717..a12c364 100644
--- a/app/wails/frontend/src/utils/system/network.ts
+++ b/app/wails/frontend/src/utils/system/network.ts
@@ -70,3 +70,11 @@ export function useNetworkSumRate(){
 
     return network.sumCounter.rate
 }
+
+export function useNetworkSumMaxRate(){
+    if(network.sumCounter.interval == null){
+        loopNetworkSumCounter()
+    }
+
+    return network.sumCounter.rate.max
+}
diff --git a/app/wails/frontend/src/views/tabs/home/Home.vue b/app/wails/frontend/src/views/tabs/home/Home.vue
index cfe7dc8..286ce57 100644
--- a/app/wails/frontend/src/views/tabs/home/Home.vue
+++ b/app/wails/frontend/src/views/tabs/home/Home.vue
@@ -46,6 +46,7 @@ import CPUUsageChart from "src/components/system/cpu/CPUUsageChart.vue";
 import MemoryUsageChart from "src/components/system/memory/MemoryUsageChart.vue";
 import NetworkCounter from "src/components/system/network/NetworkCounter.vue";
 import NetworkSumRateChart from "src/components/system/network/NetworkSumRateChart.vue"
+import NetworkSumMaxRate from "src/components/system/network/NetworkSumMaxRate.vue";
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -100,29 +101,32 @@ const generateData = (
 <template>
 
     <el-row>
-        <el-col :span="4">
+        <el-col :md="4" :sm="12">
             <CPUUsage/>
         </el-col>
-        <el-col :span="4">
+        <el-col :md="4" :sm="12">
             <MemoryUsage>
                 <template #footer="{used, total}">
                     <div class="text-sm">{{ used }}/{{ total }}</div>
                 </template>
             </MemoryUsage>
         </el-col>
-        <el-col :span="4">
+        <el-col :sm="12" :md="4">
             <NetworkCounter></NetworkCounter>
         </el-col>
+        <el-col :sm="12" :md="4">
+            <NetworkSumMaxRate></NetworkSumMaxRate>
+        </el-col>
     </el-row>
 
     <el-row>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <CPUUsageChart style="height: 300px"/>
         </el-col>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <MemoryUsageChart style="height: 300px"/>
         </el-col>
-        <el-col :span="8">
+        <el-col :xs="24" :sm="12" :md="8">
             <NetworkSumRateChart style="height: 300px"/>
         </el-col>
     </el-row>