网络状态图表

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']
+    NetworkSumRateChart: typeof import('./src/components/system/network/NetworkSumRateChart.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TabScaffold: typeof import('./src/components/scaffold/TabScaffold.vue')['default']

app/wails/frontend/src/components/system/network/NetworkSumRateChart.vue

@@ -0,0 +1,157 @@
+<script setup>
+import {onMounted, reactive, ref, watch} from "vue";
+import * as echarts from "echarts";
+import moment from "moment";
+import {bytesToSizeWithUnit} from "src/utils/file/file";
+import {useNetworkSumRate} from "src/utils/system/network";
+const props = defineProps({
+    showLabel: {
+        type:Boolean,
+        default: true,
+    },
+    label: {
+        type: String,
+        default: "网络状态",
+    },
+    labelPosition :{
+        type: String,
+        default: "center",
+    },
+    labelStyle: {
+        type: Object,
+        default: {
+            fontSize: 14
+        }
+    },
+    maxStep:{
+        type: Number,
+        default: 600
+    },
+    showMax: {
+        type:Boolean,
+        default: true
+    }
+})
+const netWorkSumRate = useNetworkSumRate()
+const colors = [
+    { color: '#f56c6c', percentage: 100 },
+    { color: '#e6a23c', percentage: 80 },
+    { color: '#5cb87a', percentage: 30 },
+]
+
+const chartRef = ref()
+const chart = reactive({
+    title: {
+        left: props.labelPosition,
+        text: props.label,
+        textStyle: props.labelStyle
+    },
+    tooltip: {
+        trigger: 'axis',
+        valueFormatter(value){
+            return `${bytesToSizeWithUnit(value)}/s`
+        },
+        axisPointer: {
+            animation: false
+        }
+    },
+    xAxis: {
+        type: 'category',
+        splitLine: {
+            show: false
+        },
+    },
+    yAxis: {
+        type: 'value',
+        boundaryGap: [0, '100%'],
+        splitLine: {
+            show: false
+        },
+        axisLabel: {
+            align: 'right',
+            overflow: 'truncate',
+            ellipsis: '...',
+            width: 75,
+            formatter(value,index){
+                return `${bytesToSizeWithUnit(value)}/s`
+            }
+        },
+        min: 0,
+    },
+    grid:{
+        left: 75,
+        containLabel: false
+    },
+    series: [
+        {
+            name: '上传',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            areaStyle: {
+                origin: 'start'
+            },
+            itemStyle:{
+                color: "#e6a23c"
+            }
+        },
+        {
+            name: '下载',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            areaStyle: {
+                origin: 'start'
+            },
+            itemStyle:{
+                color: "#5cb87a"
+            }
+        }
+    ]
+})
+
+onMounted(()=>{
+    const chartInst = echarts.init(chartRef.value)
+    chartInst.setOption(chart)
+    chartInst.resize()
+
+    watch(netWorkSumRate.value,(v)=>{
+        let upload = chart.series[0].data
+        upload.push({
+            name: moment().format("HH:mm:ss"),
+            value: [moment().format("HH:mm:ss"), v.sent]
+        })
+        if(upload.length > props.maxStep){
+            upload.splice(0,1)
+        }
+
+        let download = chart.series[1].data
+        download.push({
+            name: moment().format("HH:mm:ss"),
+            value: [moment().format("HH:mm:ss"), v.recv]
+        })
+        if(download.length > props.maxStep){
+            download.splice(0,1)
+        }
+
+        chartInst.setOption(chart)
+    })
+    window.addEventListener("resize",()=>{
+        chartInst.resize()
+    })
+})
+
+</script>
+
+<template>
+    <div ref="chartRef" class="w-full h-full"></div>
+</template>
+
+<style scoped>
+.percentage-value {
+    font-size: 18px;
+}
+.percentage-text {
+    font-size: 14px;
+}
+</style>

app/wails/frontend/src/views/tabs/home/Home.vue

@@ -45,6 +45,7 @@ import MemoryUsage from "src/components/system/memory/MemoryUsage.vue";
 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"
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -115,12 +116,15 @@ const generateData = (
     </el-row>
 
     <el-row>
-        <el-col :span="12">
+        <el-col :span="8">
             <CPUUsageChart style="height: 300px"/>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="8">
             <MemoryUsageChart style="height: 300px"/>
         </el-col>
+        <el-col :span="8">
+            <NetworkSumRateChart style="height: 300px"/>
+        </el-col>
     </el-row>