适配显示了cpu、硬盘、内存信息

src/components/deskModule/SystemMonitor/index.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { NProgress } from 'naive-ui'
+import { getAll } from '@/api/system/systemMonitor'
+import { SvgIcon } from '@/components/common'
+
+interface ProgressStyle {
+  color: string
+  railColor: string
+}
+
+let timer: NodeJS.Timer
+const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
+const progressStyle = ref<ProgressStyle>({
+  color: 'white',
+  railColor: 'rgba(0, 0, 0, 0.5)',
+})
+const svgStyle = {
+  width: '25px',
+  height: '25px',
+}
+
+async function getData() {
+  try {
+    const { data, code } = await getAll<SystemMonitor.GetAllRes>()
+    if (code === 0)
+      systemMonitorData.value = data
+  }
+  catch (error) {
+
+  }
+}
+
+function correctionNumber(v: number, keepNum = 2): number {
+  return v === 0 ? 0 : Number(v.toFixed(keepNum))
+}
+
+function formatMemoryToGB(v: number): number {
+  return correctionNumber(v / 1024 / 1024 / 1024)
+}
+
+function formatdiskToGB(v: number): number {
+  return correctionNumber(v / 1024)
+}
+onMounted(() => {
+  getData()
+  timer = setInterval(() => {
+    getData()
+  }, 5000)
+})
+
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="w-full p-5 px-5 bg-[#2a2a2a6b] rounded-2xl system-monitor flex items-center px-2 text-white overflow-auto">
+    <!-- <div class="flex flex-col items-center justify-center ">
+      <div>
+        <NProgress type="dashboard" :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)" :stroke-width="15" style="width: 50px;">
+          <div class="text-white text-xs">
+            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0, 1) }}%
+          </div>
+        </NProgress>
+      </div>
+      <span>
+        CPU
+      </span>
+    </div> -->
+    <div class="text-xs mr-10 flex justify-center items-center">
+      <div class="mr-2">
+        <SvgIcon icon="solar-cpu-bold" :style="svgStyle" />
+      </div>
+      <div>
+        <div class="mb-1">
+          <span>
+            CPU
+          </span>
+          <span class="float-right">
+            {{ correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0) }}%
+          </span>
+        </div>
+        <NProgress
+          type="line"
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          :percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)"
+          :show-indicator="false"
+          :stroke-width="15"
+          style="width: 150px;"
+        />
+      </div>
+    </div>
+
+    <div class="text-xs mr-10 flex justify-center items-center">
+      <div class="mr-2">
+        <SvgIcon icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
+      </div>
+      <div>
+        <div class="mb-1">
+          <span>
+            内存
+          </span>
+          <span class="float-right">
+            {{ formatMemoryToGB(systemMonitorData?.memoryInfo.total || 0) }} GB/{{ correctionNumber(formatMemoryToGB(systemMonitorData?.memoryInfo.total || 0) - formatMemoryToGB(systemMonitorData?.memoryInfo.free || 0)) }} GB
+          </span>
+        </div>
+        <NProgress
+          type="line"
+          :color="progressStyle.color"
+          :rail-color="progressStyle.railColor"
+          :percentage="systemMonitorData?.memoryInfo.usedPercent"
+          :show-indicator="false"
+          :stroke-width="15" style="width: 150px;"
+        />
+      </div>
+    </div>
+
+    <!-- <div class="text-xs mr-2">
+      <div class="mb-1">
+        <span>
+          网络:{{ systemMonitorData?.netIOCountersInfo[0].name }}
+        </span>
+      </div>
+      <div>
+        <span class="float-right">
+          上行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesSent || 0) }}
+          下行：{{ netIOToKB(systemMonitorData?.netIOCountersInfo[0].bytesRecv || 0) }}
+        </span>
+      </div>
+    </div> -->
+
+    <!-- 磁盘信息 -->
+    <div v-for=" item, index in systemMonitorData?.diskInfo" :key="index">
+      <div class="text-xs mr-10 flex justify-center items-center">
+        <div class="mr-2">
+          <SvgIcon icon="clarity-hard-disk-solid" :style="svgStyle" />
+        </div>
+        <div>
+          <div class="mb-1">
+            <span>
+              {{ item.mountpoint }}
+            </span>
+            <span class="float-right">
+              {{ formatdiskToGB(item.total || 0) }} GB/{{ formatdiskToGB(item.used || 0) }} GB
+            </span>
+          </div>
+          <NProgress
+            :color="progressStyle.color"
+            :rail-color="progressStyle.railColor"
+            type="line"
+            :percentage="item.usedPercent"
+            :show-indicator="false"
+            :stroke-width="15"
+            style="width: 150px;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

src/components/deskModule/index.ts

@@ -1,4 +1,5 @@
 import Clock from './Clock/index.vue'
 import SearchBox from './SearchBox/index.vue'
+import SystemMonitor from './SystemMonitor/index.vue'
 
-export { Clock, SearchBox }
+export { Clock, SearchBox, SystemMonitor }