适配显示了cpu、硬盘、内存信息
This commit is contained in:
Sun
parent
11ea134be3
commit
fe967a9314
@ -3,8 +3,8 @@ package global
|
||||
import "sun-panel/lib/monitor"
|
||||
|
||||
type ModelSystemMonitor struct {
|
||||
CPUInfo monitor.CPUInfo
|
||||
DiskInfo []monitor.DiskInfo
|
||||
NetIOCountersInfo []monitor.NetIOCountersInfo
|
||||
MemoryInfo monitor.MemoryInfo
|
||||
CPUInfo monitor.CPUInfo `json:"cpuInfo"`
|
||||
DiskInfo []monitor.DiskInfo `json:"diskInfo"`
|
||||
NetIOCountersInfo []monitor.NetIOCountersInfo `json:"netIOCountersInfo"`
|
||||
MemoryInfo monitor.MemoryInfo `json:"memoryInfo"`
|
||||
}
|
||||
|
||||
@ -31,14 +31,17 @@ type NetIOCountersInfo struct {
|
||||
}
|
||||
|
||||
type MemoryInfo struct {
|
||||
Total uint64 `json:"total"`
|
||||
Free uint64 `json:"free"`
|
||||
Total uint64 `json:"total"`
|
||||
Free uint64 `json:"free"`
|
||||
Used uint64 `json:"used"`
|
||||
UsedPercent float64 `json:"usedPercent"`
|
||||
}
|
||||
|
||||
// 获取CPU信息
|
||||
func GetCPUInfo() (CPUInfo, error) {
|
||||
cpuInfoRes := CPUInfo{}
|
||||
cpuInfo, err := cpu.Info()
|
||||
|
||||
if err == nil && len(cpuInfo) > 0 {
|
||||
cpuInfoRes.CoreCount = cpuInfo[0].Cores
|
||||
cpuInfoRes.Model = cpuInfo[0].ModelName
|
||||
@ -59,6 +62,8 @@ func GetMemoryInfo() (MemoryInfo, error) {
|
||||
if err == nil {
|
||||
memoryInfo.Free = memInfo.Free
|
||||
memoryInfo.Total = memInfo.Total
|
||||
memoryInfo.Used = memInfo.Used
|
||||
memoryInfo.UsedPercent = memInfo.UsedPercent
|
||||
}
|
||||
|
||||
return memoryInfo, err
|
||||
|
||||
7
src/api/system/systemMonitor.ts
Normal file
7
src/api/system/systemMonitor.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { post } from '@/utils/request'
|
||||
|
||||
export function getAll<T>() {
|
||||
return post<T>({
|
||||
url: '/system/monitor/getAll',
|
||||
})
|
||||
}
|
||||
1
src/assets/svg-icons/clarity-hard-disk-solid.svg
Normal file
1
src/assets/svg-icons/clarity-hard-disk-solid.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="currentColor" d="M30.86 8.43A2 2 0 0 0 28.94 7H7.06a2 2 0 0 0-1.93 1.47L2.29 20h31.42Z" class="clr-i-solid clr-i-solid-path-1"/><path fill="currentColor" d="M2 22v7a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2v-7Zm28 5h-4v-2h4Z" class="clr-i-solid clr-i-solid-path-2"/><path fill="none" d="M0 0h36v36H0z"/></svg>
|
||||
|
After Width: | Height: | Size: 395 B |
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M7 15q.425 0 .713-.288T8 14v-4q0-.425-.288-.712T7 9q-.425 0-.712.288T6 10v4q0 .425.288.713T7 15m5 0q.425 0 .713-.288T13 14v-4q0-.425-.288-.712T12 9q-.425 0-.712.288T11 10v4q0 .425.288.713T12 15m5 0q.425 0 .713-.288T18 14v-4q0-.425-.288-.712T17 9q-.425 0-.712.288T16 10v4q0 .425.288.713T17 15M4 19q-.825 0-1.412-.587T2 17V7q0-.825.588-1.412T4 5h1V4q0-.425.288-.712T6 3q.425 0 .713.288T7 4v1h4V4q0-.425.288-.712T12 3q.425 0 .713.288T13 4v1h4V4q0-.425.288-.712T18 3q.425 0 .713.288T19 4v1h1q.825 0 1.413.588T22 7v10q0 .825-.587 1.413T20 19h-1v1q0 .425-.288.713T18 21q-.425 0-.712-.288T17 20v-1h-4v1q0 .425-.288.713T12 21q-.425 0-.712-.288T11 20v-1H7v1q0 .425-.288.713T6 21q-.425 0-.712-.288T5 20v-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 819 B |
1
src/assets/svg-icons/solar-cpu-bold.svg
Normal file
1
src/assets/svg-icons/solar-cpu-bold.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M9.181 10.181c.053-.053.148-.119.45-.16c.323-.043.761-.044 1.439-.044h1.86c.678 0 1.116.001 1.438.045c.303.04.398.106.45.16c.054.052.12.147.16.45c.044.322.045.76.045 1.438v1.86c0 .678-.001 1.116-.045 1.438c-.04.303-.106.398-.16.45c-.052.054-.147.12-.45.16c-.322.044-.76.045-1.438.045h-1.86c-.678 0-1.116-.001-1.438-.045c-.303-.04-.398-.106-.45-.16c-.054-.052-.12-.147-.16-.45c-.044-.322-.045-.76-.045-1.438v-1.86c0-.678.001-1.116.045-1.438c.04-.303.106-.398.16-.45"/><path fill="currentColor" fill-rule="evenodd" d="M12 3c.385 0 .698.312.698.698v2.79c.51.002.974.005 1.395.017V3.698a.698.698 0 0 1 1.395 0v2.79a.703.703 0 0 1-.008.108c.936.115 1.585.353 2.078.846c.493.493.731 1.142.846 2.078a.702.702 0 0 1 .108-.008h2.79a.698.698 0 0 1 0 1.395h-2.807c.012.421.016.885.017 1.395h2.79a.698.698 0 0 1 0 1.396h-2.79c-.002.51-.005.974-.017 1.395h2.807a.698.698 0 0 1 0 1.395h-2.79a.703.703 0 0 1-.108-.008c-.115.936-.353 1.585-.846 2.078c-.493.493-1.142.731-2.078.846a.639.639 0 0 1 .008.108v2.79a.698.698 0 0 1-1.395 0v-2.807a53.57 53.57 0 0 1-1.395.017v2.79a.698.698 0 0 1-1.396 0v-2.79a56.16 56.16 0 0 1-1.395-.017v2.807a.698.698 0 0 1-1.395 0v-2.79c0-.037.002-.073.008-.108c-.936-.115-1.585-.353-2.078-.846c-.493-.493-.731-1.142-.846-2.078a.703.703 0 0 1-.108.008h-2.79a.698.698 0 0 1 0-1.395h2.807a56.235 56.235 0 0 1-.017-1.395h-2.79a.698.698 0 0 1 0-1.396h2.79c.002-.51.005-.974.017-1.395H2.698a.698.698 0 0 1 0-1.395h2.79c.037 0 .073.002.108.008c.115-.936.353-1.585.846-2.078c.493-.493 1.142-.731 2.078-.846a.702.702 0 0 1-.008-.108v-2.79a.698.698 0 0 1 1.395 0v2.807a53.57 53.57 0 0 1 1.395-.017v-2.79c0-.386.313-.698.698-.698m-.976 5.581c-.619 0-1.152 0-1.578.058c-.458.061-.896.2-1.252.555c-.355.356-.494.794-.555 1.252c-.058.427-.058.96-.058 1.578v1.952c0 .619 0 1.151.058 1.578c.061.458.2.896.555 1.252c.356.355.794.494 1.252.555c.426.058.96.058 1.578.058h1.952c.619 0 1.151 0 1.578-.058c.458-.061.896-.2 1.252-.555c.355-.356.494-.794.555-1.252c.058-.427.058-.96.058-1.578v-1.952c0-.619 0-1.151-.058-1.578c-.061-.458-.2-.896-.555-1.252c-.356-.355-.794-.494-1.252-.555c-.427-.058-.96-.058-1.578-.058z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
162
src/components/deskModule/SystemMonitor/index.vue
Normal file
162
src/components/deskModule/SystemMonitor/index.vue
Normal file
@ -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>
|
||||
@ -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 }
|
||||
|
||||
37
src/typings/systemMonitor.d.ts
vendored
Normal file
37
src/typings/systemMonitor.d.ts
vendored
Normal file
@ -0,0 +1,37 @@
|
||||
declare namespace SystemMonitor {
|
||||
|
||||
interface CPUInfo {
|
||||
coreCount: number
|
||||
cpuNum: number
|
||||
model: string
|
||||
usages: number[]
|
||||
}
|
||||
|
||||
interface DiskInfo {
|
||||
mountpoint: string
|
||||
total: number
|
||||
used: number
|
||||
free: number
|
||||
usedPercent: number
|
||||
}
|
||||
|
||||
interface NetIOCountersInfo {
|
||||
bytesSent: number
|
||||
bytesRecv: number
|
||||
name: string
|
||||
}
|
||||
|
||||
interface MemoryInfo {
|
||||
total: number
|
||||
used: number
|
||||
free: number
|
||||
usedPercent: number
|
||||
}
|
||||
|
||||
interface GetAllRes {
|
||||
cpuInfo: CPUInfo
|
||||
diskInfo: DiskInfo[]
|
||||
netIOCountersInfo: NetIOCountersInfo[]
|
||||
memoryInfo: MemoryInfo
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,7 @@ import { VueDraggable } from 'vue-draggable-plus'
|
||||
import { NBackTop, NButton, NButtonGroup, NDropdown, NModal, NSkeleton, NSpin, useDialog, useMessage } from 'naive-ui'
|
||||
import { nextTick, onMounted, ref } from 'vue'
|
||||
import { AppIcon, AppStarter, EditItem } from './components'
|
||||
import { Clock, SearchBox } from '@/components/deskModule'
|
||||
import { Clock, SearchBox, SystemMonitor } from '@/components/deskModule'
|
||||
import { SvgIcon } from '@/components/common'
|
||||
import { deletes, getListByGroupId, saveSort } from '@/api/panel/itemIcon'
|
||||
import { getList as getGroupList } from '@/api/panel/itemIconGroup'
|
||||
@ -363,6 +363,10 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
|
||||
<!-- 应用盒子 -->
|
||||
<div class="mt-[50px]" :style="{ marginLeft: `${panelState.panelConfig.marginX}px`, marginRight: `${panelState.panelConfig.marginX}px` }">
|
||||
<div v-if="panelState.panelConfig.searchBoxShow" class="flex mt-[20px] mx-auto ">
|
||||
<SystemMonitor @itemSearch="itemFrontEndSearch" />
|
||||
</div>
|
||||
|
||||
<!-- 组纵向排列 -->
|
||||
<div
|
||||
v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user