From 60b0b5938cdfad21abd4503e0524734bc45a47ae Mon Sep 17 00:00:00 2001
From: Shikong <919411476@qq.com>
Date: Tue, 18 Jul 2023 12:00:28 +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 +
 .../components/system/cpu/CPUUsageChart.vue   |   4 +-
 .../system/memory/MemoryUsageChart.vue        | 170 ++++++++++++++++++
 app/wails/frontend/src/utils/system/index.js  |  15 ++
 .../frontend/src/views/tabs/home/Home.vue     |   4 +
 5 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue

diff --git a/app/wails/frontend/components.d.ts b/app/wails/frontend/components.d.ts
index 1b25107..8aed2cc 100644
--- a/app/wails/frontend/components.d.ts
+++ b/app/wails/frontend/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     MemoryUsage: typeof import('./src/components/system/memory/MemoryUsage.vue')['default']
+    MemoryUsageChart: typeof import('./src/components/system/memory/MemoryUsageChart.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TabScaffold: typeof import('./src/components/scaffold/TabScaffold.vue')['default']
diff --git a/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue b/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue
index 226e8f3..21a30a0 100644
--- a/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue
+++ b/app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue
@@ -97,7 +97,8 @@ const chart = reactive({
             name: 'CPU使用率',
             type: 'line',
             showSymbol: false,
-            data: []
+            data: [],
+            areaStyle: {}
         }
     ]
 })
@@ -109,7 +110,6 @@ onMounted(()=>{
 
     watch(singleUsage,(v)=>{
         let data = chart.series[0].data
-        console.log("data", data)
         data.push({
             name: moment().format("HH:mm:ss"),
             value: [moment().format("HH:mm:ss"), v]
diff --git a/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue b/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue
new file mode 100644
index 0000000..76c156d
--- /dev/null
+++ b/app/wails/frontend/src/components/system/memory/MemoryUsageChart.vue
@@ -0,0 +1,170 @@
+<script setup>
+import {
+    useCpuUsage,
+    useMemoryTotalSize, useMemoryTotalSizeWithByte,
+    useMemoryUsage,
+    useMemoryUsageSize,
+    useMemoryUsageSizeWithByte
+} from "src/utils/system";
+import {computed, onMounted, reactive, ref, watch} from "vue";
+import * as echarts from "echarts";
+import moment from "moment";
+import {bytesToSizeWithUnit} from "src/utils/file/file";
+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: false
+    }
+})
+const memoryTotal = useMemoryTotalSizeWithByte()
+const memoryUsage = useMemoryUsageSizeWithByte()
+const singleUsage = computed(()=>{
+    return memoryUsage.value || 0
+})
+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',
+        formatter:  (params)=> {
+            params = params[0];
+            return `
+                <div>${params.value[0]}</div>
+                 <div class="text-center">${bytesToSizeWithUnit(params.value[1])}</div>
+                `;
+        },
+        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)
+            }
+        },
+        min: 0,
+        max: props.showMax?memoryTotal:undefined,
+    },
+    grid:{
+        left: 75,
+        containLabel: false
+    },
+    visualMap: getVisualMap(),
+    series: [
+        {
+            name: '内存使用情况',
+            type: 'line',
+            showSymbol: false,
+            data: [],
+            areaStyle: {}
+        }
+    ]
+})
+
+function getVisualMap(){
+    return {
+        show: false,
+        pieces: [
+            {
+                gte: 0,
+                lte: memoryTotal.value * 0.3,
+                color: '#5cb87a'
+            },
+            {
+                gt: memoryTotal.value * 0.3,
+                lte: memoryTotal.value * 0.8,
+                color: '#e6a23c'
+            },
+            {
+                gt: memoryTotal.value * 0.8,
+                lte: memoryTotal.value,
+                color: '#f56c6c'
+            },
+        ]
+    }
+}
+
+onMounted(()=>{
+    const chartInst = echarts.init(chartRef.value)
+    chartInst.setOption(chart)
+    chartInst.resize()
+
+    watch(singleUsage,(v)=>{
+        chart.visualMap = getVisualMap()
+        let data = chart.series[0].data
+        data.push({
+            name: moment().format("HH:mm:ss"),
+            value: [moment().format("HH:mm:ss"), v]
+        })
+        if(data.length > props.maxStep){
+            data.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>
diff --git a/app/wails/frontend/src/utils/system/index.js b/app/wails/frontend/src/utils/system/index.js
index 5020757..c965f96 100644
--- a/app/wails/frontend/src/utils/system/index.js
+++ b/app/wails/frontend/src/utils/system/index.js
@@ -56,6 +56,15 @@ export function useMemoryUsage(){
     return computed(()=> Number((stat.memory.usage.data || 0).toFixed(2)))
 }
 
+
+export function useMemoryUsageSizeWithByte(){
+    if(stat.memory.usage.interval == null){
+        loopMemory()
+    }
+
+    return computed(()=> stat.memory.data.used || 0)
+}
+
 export function useMemoryUsageSize(){
     if(stat.memory.usage.interval == null){
         loopMemory()
@@ -72,4 +81,10 @@ export function useMemoryTotalSize(){
     return computed(()=> bytesToSizeWithUnit(stat.memory.data.total || 0))
 }
 
+export function useMemoryTotalSizeWithByte(){
+    if(stat.memory.usage.interval == null){
+        loopMemory()
+    }
 
+    return computed(()=> stat.memory.data.total || 0)
+}
diff --git a/app/wails/frontend/src/views/tabs/home/Home.vue b/app/wails/frontend/src/views/tabs/home/Home.vue
index 0819d6b..6241e0e 100644
--- a/app/wails/frontend/src/views/tabs/home/Home.vue
+++ b/app/wails/frontend/src/views/tabs/home/Home.vue
@@ -43,6 +43,7 @@ import {useRouter} from "vue-router";
 import CPUUsage from "src/components/system/cpu/CPUUsage.vue";
 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";
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -113,6 +114,9 @@ const generateData = (
         <el-col :span="12">
             <CPUUsageChart style="height: 300px"/>
         </el-col>
+        <el-col :span="12">
+            <MemoryUsageChart style="height: 300px"/>
+        </el-col>
     </el-row>