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

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

news 2025/9/22 14:02:20

在这里插入图片描述

后端：

      <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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/9/22 11:25:45

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/9/17 3:19:40

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/8/19 5:37:33

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/9/6 0:10:01

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/7/8 3:08:09