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

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

news 文章来源：https://blog.csdn.net/weixin_52236586/article/details/144241045 2025/5/5 11:35:30

在这里插入图片描述

后端：

      <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

Typora创建markdwon文件的基础语法

标题的创建 使用#空格xxx 可使xxx为标题&#xff0c;同时第一标题为#空格标题&#xff1b;第二标题为##空格标题2。以此类推最多可创建六个标题。 同时按住Ctrl1可创建第一标题&#xff0c;同时按住Ctrl2可创建第二标题&#xff0c;以此类推&#xff0c;最多可创建六个标题。也…...

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

《嵌入式硬件设计》

一、引言 嵌入式系统在现代科技中占据着至关重要的地位&#xff0c;广泛应用于消费电子、工业控制、汽车电子、医疗设备等众多领域。嵌入式硬件设计作为嵌入式系统开发的基础&#xff0c;直接决定了系统的性能、可靠性和成本。本文将深入探讨嵌入式硬件设计的各个方面&#xff…...

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

【AIGC】大模型面试高频考点-位置编码篇

【AIGC】大模型面试高频考点-位置编码篇 &#xff08;一&#xff09;手撕 绝对位置编码 算法&#xff08;二&#xff09;手撕 可学习位置编码 算法&#xff08;三&#xff09;手撕 相对位置编码 算法&#xff08;四&#xff09;手撕 Rope 算法&#xff08;旋转位置编码&#xf…...

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

如何使用 SQL 语句创建一个 MySQL 数据库的表，以及对应的 XML 文件和 Mapper 文件

文章目录 1、SQL 脚本语句2、XML 文件3、Mapper 文件4、启动 ServiceInit 文件5、DataService 文件6、ComplianceDBConfig 配置文件 这个方式通常是放在项目代码中&#xff0c;使用配置在项目的启动时创建表格&#xff0c;SQL 语句放到一个 XML 文件中。在Spring 项目启动时&am…...

编程日记 2024/12/6 8:20:27

Unity性能优化---动态网格组合（二）

在上一篇中&#xff0c;组合的是同一个材质球的网格&#xff0c;如果其中有不一样的材质球会发生什么&#xff1f;如下图&#xff1a; 将场景中的一个物体替换为不同的材质球 运行之后&#xff0c;就变成了相同的材质。 要实现组合不同材质的网格步骤如下&#xff1a; 在父物体…...

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

JVM学习《垃圾回收算法和垃圾回收器》

目录 1.垃圾回收算法 1.1 标记-清除算法 1.2 复制算法 1.3 标记-整理算法 1.4 分代收集算法 2.垃圾回收器 2.1 熟悉一下垃圾回收的一些名词 2.2 垃圾回收器有哪些&#xff1f; 2.3 Serial收集器 2.4 Parallel Scavenge收集器 2.5 ParNew收集器 2.6 CMS收集器 1.垃圾…...

编程日记 2024/12/6 8:13:20

GPS模块/SATES-ST91Z8LR:电路搭建；直接用电脑的USB转串口进行通讯；模组上报定位数据转换地图识别的坐标手动查询地图位置

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...

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

什么是TCP的三次握手

TCP&#xff08;传输控制协议&#xff09;的三次握手是一个用于在两个网络通信的计算机之间建立连接的过程。这个过程确保了双方都有能力接收和发送数据&#xff0c;并且初始化双方的序列号。以下是三次握手的详细步骤&#xff1a; 第一次握手&#xff08;SYN&#xff09;&…...

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

《Clustering Propagation for Universal Medical Image Segmentation》CVPR2024

摘要 这篇论文介绍了S2VNet&#xff0c;这是一个用于医学图像分割的通用框架&#xff0c;它通过切片到体积的传播&#xff08;Slice-to-Volume propagation&#xff09;来统一自动&#xff08;AMIS&#xff09;和交互式&#xff08;IMIS&#xff09;医学图像分割任务。S2VNet利…...

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

Linux ifconfig ip 命令详解

简介 ifconfig 和 ip 命令用于配置和显示 Linux 上的网络接口。虽然 ifconfig 是传统工具&#xff0c;但现在已被弃用并被提供更多功能的 ip 命令取代。 ifconfig 安装 sudo apt install net-toolssudo yum install net-tools查看所有活动的网络接口 ifconfig启动/激活网络…...

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