cpu 使用率

app/wails/frontend/src/components/scaffold/TabScaffold.vue

@@ -110,7 +110,6 @@ function tabRemove(name){
                     </transition>
                 </router-view>
             </el-tab-pane>
-
     </el-tabs>
 </template>
 

app/wails/frontend/src/components/system/cpu/CPUUsage.vue

@@ -0,0 +1,33 @@
+<script setup>
+import {getCpuUsage} from "src/utils/system";
+import {computed} from "vue";
+
+const cpuUsage = getCpuUsage()
+const singleUsage = computed(()=>{
+    return Number((cpuUsage.value[0] || 0).toFixed(2))
+})
+const colors = [
+    { color: '#f56c6c', percentage: 100 },
+    { color: '#e6a23c', percentage: 80 },
+    { color: '#5cb87a', percentage: 30 },
+]
+</script>
+
+<template>
+    <div class="text-center">
+        <slot name="header"></slot>
+    </div>
+
+    <div class="text-center">
+        <el-progress type="dashboard" :percentage="singleUsage" :color="colors" />
+    </div>
+
+    <div class="text-center">
+        <slot name="footer"></slot>
+    </div>
+
+</template>
+
+<style scoped>
+
+</style>

app/wails/frontend/src/utils/system/index.js

@@ -0,0 +1,24 @@
+import {GetCpuUsage} from "frontend/wailsjs/go/system/InfoUtils";
+import {computed, reactive, ref, watch} from "vue";
+import {asyncComputed} from "@vueuse/core";
+
+let cpu = {
+    usage: {
+        data: ref([]),
+        interval: null
+    }
+}
+
+export function getCpuUsage(){
+    clearInterval(cpu.usage.interval)
+
+    function loop(){
+        cpu.usage.interval = setTimeout(()=>{
+            GetCpuUsage().then(result=>cpu.usage.data.value = result)
+            loop()
+        },1000)
+    }
+
+    loop()
+    return computed(()=>cpu.usage.data.value)
+}

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

@@ -41,6 +41,7 @@ import en from 'element-plus/dist/locale/en.mjs'
 import {useGlobalTabs} from "src/store/globalTabs";
 import {useRouter} from "vue-router";
 import {ElAutoResizer} from "element-plus";
+import CPUUsage from "src/components/system/cpu/CPUUsage.vue";
 function switchLocale(){
     console.log(globalConfigState.ui.value.locale)
     if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@@ -95,10 +96,20 @@ const table = reactive({
     columns: generateColumns(10),
     data: generateData(generateColumns(10),20)
 })
-
 </script>
 
 <template>
+
+        <el-row>
+            <el-col :span="4">
+                <CPUUsage>
+                    <template #footer>
+                        <div>CPU使用率</div>
+                    </template>
+                </CPUUsage>
+            </el-col>
+        </el-row>
+
     <div class="result w-full text-center" id="result">Please enter your name below 👇</div>
     <div class="input-box w-full text-center" id="input">
         <el-input v-model="controller.input" type="text" autocomplete="off"></el-input>