[增添]添加了CPU占用率饼图

.idea/workspace.xml

@@ -4,9 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[修改]优化了widget的读取显示，能够动态显示">
+    <list default="true" id="596fb1a0-d6fb-4db8-a922-13b01593ce79" name="更改" comment="[增添]添加了系统设备数据显示stats widget">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/PrometheusMemory.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/PrometheusMemory.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/SystemStats.php" beforeDir="false" afterPath="$PROJECT_DIR$/management-panel/app/Filament/Widgets/SystemStats.php" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -195,19 +195,20 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
+  <component name="PropertiesComponent"><![CDATA[{
-  &quot;keyToString&quot;: {
+  "keyToString": {
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    "RunOnceActivity.ShowReadmeOnStart": "true",
-    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
+    "git-widget-placeholder": "master",
-    &quot;last_opened_file_path&quot;: &quot;E:/data-collection-terminal&quot;,
+    "last_opened_file_path": "E:/data-collection-terminal",
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.eslint": "true",
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    "node.js.detected.package.tslint": "true",
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.eslint": "(autodetect)",
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    "node.js.selected.package.tslint": "(autodetect)",
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
+    "nodejs_package_manager_path": "npm",
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+    "php.override.implement.member.chooser.php.doc": "NONE",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
       <recent name="E:\data-collection-terminal\management-panel\app" />
@@ -258,7 +259,7 @@
       <workItem from="1724743707590" duration="5840000" />
       <workItem from="1724806979170" duration="149000" />
       <workItem from="1724808563307" duration="17821000" />
-      <workItem from="1724893742147" duration="5355000" />
+      <workItem from="1724893742147" duration="12344000" />
     </task>
     <task id="LOCAL-00001" summary="[增添]添加注册">
       <option name="closed" value="true" />
@@ -396,7 +397,15 @@
       <option name="project" value="LOCAL" />
       <updated>1724835277301</updated>
     </task>
-    <option name="localTasksCounter" value="18" />
+    <task id="LOCAL-00018" summary="[增添]添加了系统设备数据显示stats widget">
+      <option name="closed" value="true" />
+      <created>1724899660126</created>
+      <option name="number" value="00018" />
+      <option name="presentableId" value="LOCAL-00018" />
+      <option name="project" value="LOCAL" />
+      <updated>1724899660126</updated>
+    </task>
+    <option name="localTasksCounter" value="19" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -459,6 +468,7 @@
     <MESSAGE value="[修改]修改美化了了widget样式，折线图展示" />
     <MESSAGE value="[修改]删除了updatetoetcd的page页面、widget排布" />
     <MESSAGE value="[修改]优化了widget的读取显示，能够动态显示" />
-    <option name="LAST_COMMIT_MESSAGE" value="[修改]优化了widget的读取显示，能够动态显示" />
+    <MESSAGE value="[增添]添加了系统设备数据显示stats widget" />
+    <option name="LAST_COMMIT_MESSAGE" value="[增添]添加了系统设备数据显示stats widget" />
   </component>
 </project>

management-panel/app/Filament/Widgets/CPUStatus.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use App\Services\PrometheusService;
+use Filament\Widgets\ChartWidget;
+
+class CPUStatus extends ChartWidget
+{
+    protected static ?string $heading = 'CPU 占用率';
+
+    protected static ?int $sort = 5;
+
+    protected int | string | array $columnSpan = '1';
+
+    protected function getData(): array
+    {
+        $prometheus = new PrometheusService();
+
+        // 查询 CPU 使用率数据，获取最近 60 秒内的平均值
+        $query = '100 - (avg by(instance) (rate(node_cpu_seconds_total{mode="idle"}[60s])) * 100)';
+        $cpuUsageResult = $prometheus->query($query);
+
+        // 计算使用率和空闲率
+        $cpuUsage = 0;
+        if (isset($cpuUsageResult['data']['result'][0]['value'][1])) {
+            $cpuUsage = floatval($cpuUsageResult['data']['result'][0]['value'][1]);
+        }
+        $cpuIdle = 100 - $cpuUsage;
+
+        $data = [
+            round($cpuUsage, 2),
+            round($cpuIdle, 2),
+        ];
+
+        return [
+            'labels' => ['CPU 使用率', 'CPU 空闲率'],
+            'datasets' => [
+                [
+                    'label' => 'CPU 占用情况',
+                    'data' => $data,
+                    'backgroundColor' => ['#FBD1B7', '#E0F5B9'], // 柔和颜色
+                    'borderColor' => ['#FBD1B7', '#E0F5B9'], // 边框颜色
+                    'borderWidth' => 1, // 边框宽度
+                ],
+            ],
+        ];
+    }
+
+    protected function getType(): string
+    {
+        return 'pie'; // 设置为饼图
+    }
+
+    protected function getPollingInterval(): ?string
+    {
+        return '1s'; // 每秒更新一次
+    }
+}

management-panel/app/Filament/Widgets/SystemStats.php

@@ -56,7 +56,7 @@ class SystemStats extends BaseWidget
                 return $item['value'][1] ?? 0;
             }, $networkReceiveResult['data']['result'])) / (1024 * 1024), 2);
 
-        $networkDisplay = "上行: {$networkTransmit} MB/s\n下行: {$networkReceive} MB/s";
+        $networkDisplay = "上传: {$networkTransmit} MB/s\n下载: {$networkReceive} MB/s";
 
         return [
             BaseWidget\Stat::make('内存占用', $memoryDisplay),