Shikong/sk-matrix-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CPU使用率 图表

Browse Source
This commit is contained in:
Shikong 2023-07-17 15:53:59 +08:00
parent 3000dc13fc
commit 2576535006
10 changed files with 215 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/wails/frontend/components.d.ts vendored
View File

@ -8,6 +8,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
CPUUsage: typeof import('./src/components/system/cpu/CPUUsage.vue')['default']
CPUUsageChart: typeof import('./src/components/system/cpu/CPUUsageChart.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']

2
app/wails/frontend/package.json
View File

@ -20,8 +20,10 @@
"dependencies": {
"@types/node": "^15.14.9",
"@vueuse/core": "^10.2.1",
"echarts": "^5.4.2",
"element-plus": "^2.3.7",
"eruda": "^3.0.0",
"moment": "^2.29.4",
"pinia": "^2.1.4",
"typescript": "^4.6.4",
"vue": "^3.3.4",

2
app/wails/frontend/package.json.md5
View File

@ -1 +1 @@
f7e689a150f3e4da3eb915e6777b2fd0
65a151a5092c94d18dcc017ea27c6d61

120
app/wails/frontend/src/components/system/cpu/CPUUsageChart.vue Normal file
View File

@ -0,0 +1,120 @@
<script setup>
import {useCpuUsage} from "src/utils/system";
import {computed, onMounted, reactive, ref, watch} from "vue";
import * as echarts from "echarts";
import moment from "moment";
const props = defineProps({
showLabel: {
type:Boolean,
default: true,
},
label: {
type: String,
default: "CPU使用率",
},
labelPosition :{
type: String,
default: "center",
},
labelStyle: {
type: Object,
default: {
fontSize: 14
}
},
maxStep:{
type: Number,
default: 120
}
})
const cpuUsage = useCpuUsage()
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 },
]
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">${params.value[1]}%</div>
`;
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
min: 0,
max: 100
},
series: [
{
name: 'CPU使用率',
type: 'line',
showSymbol: false,
data: []
}
]
})
onMounted(()=>{
const chartInst = echarts.init(chartRef.value)
chartInst.setOption(chart)
chartInst.resize()
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]
})
if(data.length > props.maxStep){
data.splice(1,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>

32
app/wails/frontend/src/views/tabs/home/Home.vue
View File

@ -40,9 +40,9 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
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";
import MemoryUsage from "src/components/system/memory/MemoryUsage.vue";
import CPUUsageChart from "src/components/system/cpu/CPUUsageChart.vue";
function switchLocale(){
console.log(globalConfigState.ui.value.locale)
if(globalConfigState.ui.value.locale.name === 'zh-cn'){
@ -96,18 +96,24 @@ const generateData = (
<template>
<el-row>
<el-col :span="4">
<CPUUsage/>
</el-col>
<el-col :span="4">
<MemoryUsage>
<template #footer="{used, total}">
<div class="text-sm">{{used}}/{{total}}</div>
</template>
</MemoryUsage>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<CPUUsage/>
</el-col>
<el-col :span="4">
<MemoryUsage>
<template #footer="{used, total}">
<div class="text-sm">{{ used }}/{{ total }}</div>
</template>
</MemoryUsage>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<CPUUsageChart style="height: 300px"/>
</el-col>
</el-row>
<el-button class="btn" @click="sendNotify()">通知</el-button>

39
app/wails/frontend/wailsjs/go/models.ts
View File

@ -302,30 +302,13 @@ export namespace net {
}
export namespace process {
export class Process {
pid: number;
static createFrom(source: any = {}) {
return new Process(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.pid = source["pid"];
}
}
}
export namespace system {
export class ProcessDTO {
pid: number;
name: string;
parent?: process.Process;
parent: number;
status: string;
createTime: number;
@ -337,28 +320,10 @@ export namespace system {
if ('string' === typeof source) source = JSON.parse(source);
this.pid = source["pid"];
this.name = source["name"];
this.parent = this.convertValues(source["parent"], process.Process);
this.parent = source["parent"];
this.status = source["status"];
this.createTime = source["createTime"];
}
convertValues(a: any, classs: any, asMap: boolean = false): any {
if (!a) {
return a;
}
if (a.slice) {
return (a as any[]).map(elem => this.convertValues(elem, classs));
} else if ("object" === typeof a) {
if (asMap) {
for (const key of Object.keys(a)) {
a[key] = new classs(a[key]);
}
return a;
}
return new classs(a);
}
return a;
}
}
}

5
app/wails/frontend/wailsjs/go/system/InfoUtils.d.ts vendored
View File

@ -3,7 +3,6 @@
import {cpu} from '../models';
import {disk} from '../models';
import {net} from '../models';
import {process} from '../models';
import {system} from '../models';
import {mem} from '../models';
@ -15,6 +14,8 @@ export function GetCpuTimes():Promise<Array<cpu.TimesStat>>;
export function GetCpuUsage():Promise<Array<number>>;
export function GetCurrentPid():Promise<number>;
export function GetDiskPartitions():Promise<Array<disk.PartitionStat>>;
export function GetDiskUsage(arg1:string):Promise<disk.UsageStat>;
@ -23,7 +24,7 @@ export function GetIOCounters():Promise<{[key: string]: disk.IOCountersStat}>;
export function GetNetWorkConnection():Promise<Array<net.ConnectionStat>>;
export function GetProcessInfo(arg1:number):Promise<process.Process>;
export function GetProcessInfo(arg1:number):Promise<system.ProcessDTO>;
export function GetProcesses():Promise<Array<system.ProcessDTO>>;

4
app/wails/frontend/wailsjs/go/system/InfoUtils.js
View File

@ -18,6 +18,10 @@ export function GetCpuUsage() {
return window['go']['system']['InfoUtils']['GetCpuUsage']();
}
export function GetCurrentPid() {
return window['go']['system']['InfoUtils']['GetCurrentPid']();
}
export function GetDiskPartitions() {
return window['go']['system']['InfoUtils']['GetDiskPartitions']();
}

25
app/wails/frontend/yarn.lock
View File

@ -880,6 +880,14 @@ dlv@^1.1.3:
resolved "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
echarts@^5.4.2:
version "5.4.2"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz#9f38781c9c6ae323e896956178f6956952c77a48"
integrity sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==
dependencies:
tslib "2.3.0"
zrender "5.4.3"
electron-to-chromium@^1.4.431:
version "1.4.450"
resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.450.tgz#df232c961ee9bf4e8980f86e96a6e9f291720138"
@ -1202,6 +1210,11 @@ minimatch@^9.0.1:
dependencies:
brace-expansion "^2.0.1"
moment@^2.29.4:
version "2.29.4"
resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
ms@2.1.2:
version "2.1.2"
resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@ -1505,6 +1518,11 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.npmmirror.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
tslib@2.3.0:
version "2.3.0"
resolved "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
typescript@^4.6.4:
version "4.9.5"
resolved "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
@ -1607,3 +1625,10 @@ yaml@^2.1.1:
version "2.3.1"
resolved "https://registry.npmmirror.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
zrender@5.4.3:
version "5.4.3"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz#41ffaf835f3a3210224abd9d6964b48ff01e79f5"
integrity sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==
dependencies:
tslib "2.3.0"

63
app/wails/pkg/system/process.go
View File

@ -1,43 +1,56 @@
package system
import "github.com/shirou/gopsutil/process"
import (
"github.com/shirou/gopsutil/process"
"os"
)
func (i *InfoUtils) GetCurrentPid() int {
return os.Getpid()
}
func (i *InfoUtils) GetAllProcessPid() []int32 {
pidList, _ := process.Pids()
return pidList
}
func (i *InfoUtils) GetProcessInfo(pid int32) *process.Process {
info, _ := process.NewProcess(pid)
return info
type ProcessDTO struct {
Pid int32 `json:"pid"`
Name string `json:"name"`
Parent int32 `json:"parent"`
Status string `json:"status"`
CreateTime int64 `json:"createTime"`
}
type ProcessDTO struct {
Pid int32 `json:"pid"`
Name string `json:"name"`
Parent *process.Process `json:"parent"`
Status string `json:"status"`
CreateTime int64 `json:"createTime"`
func (i *InfoUtils) process2ProcessDTO(p *process.Process) *ProcessDTO {
d := &ProcessDTO{
Pid: p.Pid,
Name: "",
Parent: 0,
Status: "",
CreateTime: 0,
}
d.Name, _ = p.Name()
parent, _ := p.Parent()
if parent != nil {
d.Parent = parent.Pid
}
d.CreateTime, _ = p.CreateTime()
d.Status, _ = p.Status()
return d
}
func (i *InfoUtils) GetProcessInfo(pid int32) *ProcessDTO {
info, _ := process.NewProcess(pid)
return i.process2ProcessDTO(info)
}
func (i *InfoUtils) GetProcesses() []*ProcessDTO {
info, _ := process.Processes()
dto := make([]*ProcessDTO, 0)
for _, i := range info {
d := &ProcessDTO{
Pid: i.Pid,
Name: "",
Parent: nil,
Status: "",
CreateTime: 0,
}
d.Name, _ = i.Name()
d.Parent, _ = i.Parent()
d.CreateTime, _ = i.CreateTime()
d.Status, _ = i.Status()
dto = append(dto, d)
for _, p := range info {
dto = append(dto, i.process2ProcessDTO(p))
}
return dto
}