当前位置： 首页 > news >正文

项目基于oshi库快速搭建一个cpu监控面板

news 2026/5/21 9:47:50

在这里插入图片描述

后端：

      <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-core</artifactId><version>5.8.5</version></dependency>

package org.example.cputest;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import oshi.SystemInfo;
import oshi.hardware.CentralProcessor;
import oshi.hardware.HardwareAbstractionLayer;import java.util.Comparator;
import java.util.Map;
import java.util.TreeMap;@CrossOrigin("*")
@RestController
@RequestMapping("/api/cpu")
public class CpuUsageController {private final SystemInfo systemInfo = new SystemInfo();private final HardwareAbstractionLayer hardware = systemInfo.getHardware();private final CentralProcessor processor = hardware.getProcessor();private long[][] prevTicks = processor.getProcessorCpuLoadTicks();@GetMapping("/usage")public String getCpuUsage() throws JsonProcessingException {// 获取当前的 tick 数long[][] ticks = processor.getProcessorCpuLoadTicks();// 获取 CPU 核心数int logicalProcessorCount = processor.getLogicalProcessorCount();// 计算每个核心的 CPU 使用率Map<String, Double> cpuUsages = new TreeMap<>(new Comparator<String>() {@Overridepublic int compare(String core1, String core2) {int num1 = Integer.parseInt(core1.replace("Core ", ""));int num2 = Integer.parseInt(core2.replace("Core ", ""));return Integer.compare(num1, num2);}});for (int i = 0; i < logicalProcessorCount; i++) {long user = ticks[i][CentralProcessor.TickType.USER.getIndex()] - prevTicks[i][CentralProcessor.TickType.USER.getIndex()];long nice = ticks[i][CentralProcessor.TickType.NICE.getIndex()] - prevTicks[i][CentralProcessor.TickType.NICE.getIndex()];long sys = ticks[i][CentralProcessor.TickType.SYSTEM.getIndex()] - prevTicks[i][CentralProcessor.TickType.SYSTEM.getIndex()];long idle = ticks[i][CentralProcessor.TickType.IDLE.getIndex()] - prevTicks[i][CentralProcessor.TickType.IDLE.getIndex()];long iowait = ticks[i][CentralProcessor.TickType.IOWAIT.getIndex()] - prevTicks[i][CentralProcessor.TickType.IOWAIT.getIndex()];long irq = ticks[i][CentralProcessor.TickType.IRQ.getIndex()] - prevTicks[i][CentralProcessor.TickType.IRQ.getIndex()];long softirq = ticks[i][CentralProcessor.TickType.SOFTIRQ.getIndex()] - prevTicks[i][CentralProcessor.TickType.SOFTIRQ.getIndex()];long steal = ticks[i][CentralProcessor.TickType.STEAL.getIndex()] - prevTicks[i][CentralProcessor.TickType.STEAL.getIndex()];long totalCpu = user + nice + sys + idle + iowait + irq + softirq + steal;// 检查 totalCpu 是否为零if (totalCpu == 0) {cpuUsages.put("Core " + i, 0.0);} else {double cpuUsage = (totalCpu - idle) * 100.0 / totalCpu;cpuUsages.put("Core " + i, cpuUsage);}}// 更新 prevTicksSystem.arraycopy(ticks, 0, prevTicks, 0, ticks.length);// 将结果转换为 JSON 字符串ObjectMapper objectMapper = new ObjectMapper();return objectMapper.writeValueAsString(cpuUsages);}
}

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dynamic CPU Performance Monitor 🖥️</title><!-- Vue and ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script><style>body {font-family: Arial, sans-serif;background-color: #f0f0f0;text-align: center;}#app {display: flex;flex-wrap: wrap;justify-content: space-around;max-width: 1200px;margin: 0 auto;padding: 20px;}.chart-container {width: 300px;height: 350px;margin: 10px;background-color: white;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);padding: 10px;position: relative;}.core-status {position: absolute;top: 10px;right: 10px;font-size: 24px;}h1 {color: #333;display: flex;align-items: center;justify-content: center;}h1 span {margin: 0 10px;}</style>
</head>
<body>
<h1><span>🖥️</span>CPU Performance Monitoring Dashboard<span>📊</span>
</h1>
<div id="app"><div v-for="(usage, core) in cpuUsageData" :key="core" class="chart-container"><div class="core-status"><span v-if="usage < 30">😎</span><span v-else-if="usage < 60">😓</span><span v-else-if="usage < 80">🥵</span><span v-else>🔥</span></div><div :ref="`chart-${core}`" style="width: 100%; height: 280px;"></div></div>
</div><script>// Create Vue instancenew Vue({el: '#app',data: {cpuUsageData: {},timeStamps: Array.from({length: 7}, () => 0)},mounted() {// Start timer to update data every secondthis.updateChart();},methods: {async updateChart() {try {// Fetch CPU usage dataconst response = await fetch('http://localhost:8080/api/cpu/usage');const data = await response.json();// Update CPU usage datathis.cpuUsageData = data;// Update timestampsthis.timeStamps.shift();this.timeStamps.push(new Date().toLocaleTimeString());// Iterate through each core, initialize or update EChartsObject.keys(this.cpuUsageData).forEach(core => {const usage = this.cpuUsageData[core];const chartContainer = this.$refs[`chart-${core}`][0];// Initialize chart if not existsif (!chartContainer.__chart) {chartContainer.__chart = echarts.init(chartContainer);chartContainer.__chart.setOption({title: {text: `Core ${core}`,left: 'center'},tooltip: {trigger: 'axis'},xAxis: {type: 'category',data: this.timeStamps},yAxis: {type: 'value',axisLabel: {formatter: '{value} %'},min: 0,max: 100},series: [{name: 'CPU Usage',type: 'line',smooth: true,  // 使线条平滑areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(58,77,233,0.8)'},{offset: 1, color: 'rgba(58,77,233,0.3)'}])},data: Array.from({length: 7}, () => 0)}]});}// Update chart dataconst seriesData = chartContainer.__chart.getOption().series[0].data;seriesData.shift();seriesData.push(usage);chartContainer.__chart.setOption({xAxis: {data: this.timeStamps},series: [{data: seriesData}]});});} catch (error) {console.error('Error fetching CPU usage data:', error);}// Update every secondsetTimeout(this.updateChart, 1000);}}});
</script>
</body>
</html>

相关文章：

项目基于oshi库快速搭建一个cpu监控面板

后端&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.github.oshi</groupId><artifactId>oshi-…...

编程日记 2024/12/6 8:57:11

【c语言】指针3

1、字符指针变量 指针类型中我们知道有一种为字符指针char*的指针类型&#xff0c;其使用方法如下&#xff1a; 上面我们是先将字符使用一个变量&#xff0c;然后将变量的地址传给一个字符指针变量&#xff0c;通过指针变 量实现了对这个字符的打印。还有下面的这种…...

编程日记 2024/12/6 8:56:10

【开源】A063—基于Spring Boot的农产品直卖平台的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

编程日记 2024/12/6 8:55:10

Can‘t find variable: token（token is not defined）

文章目录 例子 1&#xff1a;使用 var例子 2&#xff1a;使用 let 或 const例子 3&#xff1a;异步操作你的代码中的情况 Cant find variable: tokentoken is not defined源代码 // index.jsPage({data: {products:[],cardLayout: grid, // 默认卡片布局为网格模式isGrid: tr…...

编程日记 2024/12/6 8:53:07

【JavaEE 初阶】⽹络编程套接字

一、⽹络编程基础 1.应用层 操作系统提供的一组 api >socket api(传输层给应用层提供) 2.传输层 两个核心协议. TCPUDP 差别非常大,编写代码的时候,也是不同的风格 因此, socket api 提供了两套 TCP 有连接, 可靠传输, 面向字节流, 全双工 UDP …...

编程日记 2024/12/6 8:50:05

【Linux内核】Hello word程序

创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...

编程日记 2024/12/6 8:49:04

PHP 与 MySQL 搭配的优势

一、PHP 与 MySQL 搭配的优势 强大的动态网页开发能力 PHP 是一种服务器端脚本语言&#xff0c;能够生成动态网页内容。它可以根据用户的请求、数据库中的数据等因素&#xff0c;实时地生成 HTML 页面返回给客户端浏览器。而 MySQL 是一个流行的关系型数据库管理系统&#xf…...

编程日记 2024/12/6 8:48:03

深入浅出：PHP中的变量与常量全解析

文章目录 引言理解变量普通变量赋值操作变量间赋值引用赋值取消引用 可变变量预定义变量 理解常量声明常量使用define()函数const关键字 使用常量预定义常量 扩展话题&#xff1a;作用域与生命周期实战案例总结与展望参考资料 引言 在编程的世界里&#xff0c;变量和常量是两种…...

编程日记 2024/12/6 8:45:00

初步简单的理解什么是库，什么是静态库，什么是动态库

库是什么 库根据名字我们应该很容易理解&#xff0c;在我们日常生活种&#xff0c;包含库的东西有很多&#xff0c;像仓库&#xff0c;库房那些&#xff0c;库是拿来存放&#xff0c;方便管理东西的&#xff0c;在我们编程当中&#xff0c;库的定义也是如此 那么为什么要有库…...

编程日记 2024/12/6 8:42:56

从ctfwiki开始的pwn之旅 3.ret2syscall

ret2syscall 原理 ret2syscall&#xff0c;即控制程序执行系统调用&#xff0c;获取 shell。 那么ret2text——程序中有system("/bin/sh")代码段&#xff0c;控制流执行 那么ret2shellcode——程序中不存在system("/bin/sh/")的代码段&#xff0c;自己…...

编程日记 2024/12/6 8:40:53

使用 httputils + protostuff 实现高性能 rpc

1、先讲讲 protostuf protostuf 一直是高性能序列化的代表之一。但是用起来&#xff0c;可难受了&#xff0c;你得先申明 protostuf 配置文件&#xff0c;并且要把这个配置文件转成类。所以必然要学习新语法、新工具。 可能真的太难受了&#xff01;于是乎&#xff0c;&#…...

编程日记 2024/12/6 8:37:48

系统思考—战略共识

最近与和一位企业创始人深度交流时&#xff0c;他告诉我&#xff1a;“虽然公司在制定战略时总是非常明确&#xff0c;但在执行过程中&#xff0c;经常发现不同层级对战略的理解偏差&#xff0c;甚至部分团队的执行效果与预期大相径庭。每次开会讨论时&#xff0c;大家都说得头…...

编程日记 2024/12/6 8:36:47

Java版-速通数据结构-树基础知识

现在面试问mysql,红黑树好像都是必备问题了。动不动就让手写红黑树或者简单介绍下红黑树。然而&#xff0c;我们如果直接去看红黑树&#xff0c;可能会一下子蒙了。在看红黑树之前&#xff0c;需要先了解下树的基础知识&#xff0c;从简单到复杂&#xff0c;看看红黑树是在什么…...

编程日记 2024/12/6 8:34:45

详尽的oracle sql函数

1&#xff0c;CHR 输入整数&#xff0c;返回对应字符。 用法&#xff1a;select chr(65),chr(78) from dual; 2&#xff0c;ASCII 输入字符&#xff0c;返回对应ASCII码。 用法&#xff1a;select ascii(A),ascii(B) from dual; 3&#xff0c;CONCAT 输入两个字符串&#xff0c…...

编程日记 2024/12/6 8:33:44

SAP IDOC Error VG205

今天在做IDOC 入栈处理销售订单的时候&#xff0c;一直报错VG205 There is no article description for item 000030 这个问题在通过WE19 前台显示的时候就不会遇见&#xff0c; 只有在接口传输的时候才会遇到 搜索发现&#xff0c;可以通过配置忽略此消息号 配置路径如下…...

编程日记 2024/12/6 8:32:43

DSP 的 CV 算子调用

01 前言 DSP 是 征程 5 上的数字信号处理器&#xff0c;专用于处理视觉、图像等信息。在 OE 包的 ddk/samples/vdsp_rpc_sample 路径下&#xff0c;提供了 DSP 使用示例&#xff0c;包括 nn 和 CV 两部分。 nn 示例涵盖了深度学习模型的相关算子&#xff0c;包括量化、反量化、…...

编程日记 2024/12/6 8:30:39

WMI攻击-基础篇（一）

#WMI攻击-基础篇&#xff08;一&#xff09; 这篇文章是关于WMI攻击系列文章的第一部分&#xff0c;面向新手。如果对Powershell有一定了解会对阅读本文有所帮助&#xff0c;但这并不是必需的&#xff0c;我们直接上干货。 #1、概述 为什么是WMI&#xff1f; WMI 是 Microso…...

编程日记 2024/12/6 8:29:38

使用Pygame创建一个简单的消消乐游戏

消消乐游戏是一种经典的益智游戏&#xff0c;玩家通过交换相邻的方块来形成三个或更多相同颜色的连续方块&#xff0c;从而消除它们。本文将介绍如何使用Python的Pygame库来创建一个简单的消消乐游戏。 准备工作 在开始之前&#xff0c;请确保已安装Pygame库。可以通过以下命…...

编程日记 2024/12/6 8:28:37

证明直纹面是可展曲面沿着直母线，曲面的切平面不变

目录 证明直纹面是可展曲面的当且仅当沿着直母线&#xff0c;曲面的切平面不变 证明直纹面是可展曲面的当且仅当沿着直母线&#xff0c;曲面的切平面不变 直纹面是可展曲面当且仅当沿着直母线&#xff0c;曲面的切平面不变. 证明&#xff1a;设直纹面 S S S的参数式为 r ( u …...

编程日记 2024/12/6 8:26:34

Chrome控制台 网站性能优化指标一览

打开chrome-》f12/右键查看元素-》NetWrok/网络 ctrlF5 刷新网页&#xff0c;可以看到从输入url到页面资源请求并加载网页&#xff0c;用于查看资源加载&#xff0c;接口请求&#xff0c;评估网页、网站性能等&#xff0c;如下图&#xff1a; request、stransferred、resour…...

编程日记 2024/12/6 8:25:33

【C++笔记】内存管理流食般投喂

声明&#xff1a;以下知识相关资料来自比特官网和小编手搓~C/C内存管理1、C/C内存分布2、C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3、C内存管理方式3.1、new/delete操作内置类型3.2、new和delete操作自定义类型4、operator new 与 operator delete 函数…...

编程新知 2026/5/21 8:50:39

为内部知识库问答机器人接入Taotoken多模型增强能力

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为内部知识库问答机器人接入Taotoken多模型增强能力 构建企业内部知识库问答系统&#xff0c;是提升信息流转效率和员工生产力的常…...

编程新知 2026/5/21 7:21:54

影刀RPA跨境店群自动化实战：Python协同Chromium打破风控「垄断」的高并发调度系统架构

定了。彻底打破传统商业指纹浏览器的生态「垄断」与电商巨头风控体系的「底层封锁」&#xff0c;我们用一套完全“自主可控”的、基于 Python 深度协同的分布式微服务调度架构&#xff0c;重塑了跨境千店矩阵的自动化底座。 这几天&#xff0c;科技圈被“DeepSeek V4 首发华为…...

编程新知 2026/5/21 6:56:07

团队项目空间、角色继承链、资产水印策略——Midjourney新功能三大硬核模块详解，错过将丧失企业级部署资格

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;团队项目空间、角色继承链、资产水印策略——Midjourney新功能三大硬核模块详解&#xff0c;错过将丧失企业级部署资格 Midjourney v6.3 企业版正式引入三大底层架构级能力&#xff1a;团队项目空间&#xff…...

编程新知 2026/5/21 6:53:58

别再只会拖模块了！用Simulink S-Function把C++算法集成到模型里的保姆级教程

从零实现Simulink与C的深度集成&#xff1a;以PID控制器为例的工程实践指南 在工业自动化和控制系统的开发中&#xff0c;Simulink因其直观的图形化建模能力而广受欢迎。然而&#xff0c;当面对复杂的算法实现或需要复用现有C代码库时&#xff0c;单纯依赖图形化模块往往显得力…...

编程新知 2026/5/21 5:17:22

给 AI 写一份老厨师的菜谱：从传统文档到 Skill 知识体系

大家好&#xff0c;我是程序员小策。 先跟你讲三个故事—— 故事一&#xff1a; 你点了一份红烧肉&#xff0c;菜谱上写着"五花肉 500g&#xff0c;酱油适量&#xff0c;冰糖少许&#xff0c;小火慢炖"。你照着做了&#xff0c;出来的肉又柴又腥。为什么&#xff1f;…...

编程新知 2026/5/21 1:48:20

终极指南：如何用天津大学LaTeX论文模板彻底告别格式烦恼

终极指南&#xff1a;如何用天津大学LaTeX论文模板彻底告别格式烦恼 【免费下载链接】TJUThesisLatexTemplate LaTeX templates for TJU graduate thesis. Originally forked from code.google.com/p/tjuthesis 项目地址: https://gitcode.com/gh_mirrors/tj/TJUThesisLatexT…...

编程新知 2026/5/21 0:10:24

书匠策AI降重降AIGC实测｜官网www.shujiangce.com ｜微信公众号搜一搜 书匠策AI

&#x1f9ea; 一个实验室级别的"论文手术台" 各位正在跟毕业论文死磕的朋友&#xff0c;我今天不讲方法论&#xff0c;不拆写作技巧&#xff0c;我要给你们开一间"论文急诊室"。 你有没有经历过这种绝望&#xff1a;辛辛苦苦写完一万字&#xff0c;查重…...

编程新知 2026/5/20 23:59:50

Python爬虫遇到InsecureRequestWarning？别慌，这3种方法帮你搞定urllib3的SSL证书警告

Python爬虫遇到InsecureRequestWarning&#xff1f;3种专业级解决方案与安全实践 当你兴致勃勃地运行新写的Python爬虫脚本时&#xff0c;控制台突然跳出一堆黄字警告&#xff1a;"InsecureRequestWarning: Unverified HTTPS request is being made..."。这场景就像…...

编程新知 2026/5/20 21:46:29

【计算机毕业设计】基于Springboot的工作流程管理系统设计与实现+万字文档

博主介绍&#xff1a;✌全网粉丝3W,csdn特邀作者、CSDN新星计划导师、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、…...

编程新知 2026/5/20 21:35:56