完成大图标小图标切换
This commit is contained in:
Sun
parent
baf64a9272
commit
1474f796fc
@ -5,3 +5,22 @@ export function getAll<T>() {
|
||||
url: '/system/monitor/getAll',
|
||||
})
|
||||
}
|
||||
|
||||
export function getCpuState<T>() {
|
||||
return post<T>({
|
||||
url: '/system/monitor/getCpuState',
|
||||
})
|
||||
}
|
||||
|
||||
export function getDiskStateByPath<T>(path: string) {
|
||||
return post<T>({
|
||||
url: '/system/monitor/getDiskStateByPath',
|
||||
data: { path },
|
||||
})
|
||||
}
|
||||
|
||||
export function getMemonyState<T>() {
|
||||
return post<T>({
|
||||
url: '/system/monitor/getMemonyState',
|
||||
})
|
||||
}
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { NProgress } from 'naive-ui'
|
||||
import type { ProgressStyle } from '../typings'
|
||||
import { getCpuState } from '@/api/system/systemMonitor'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
progressStyle: ProgressStyle
|
||||
refreshInterval: number
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const cpuState = ref<SystemMonitor.CPUInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
try {
|
||||
const { data, code } = await getCpuState<SystemMonitor.CPUInfo>()
|
||||
if (code === 0)
|
||||
cpuState.value = data
|
||||
}
|
||||
catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="mb-1">
|
||||
<span>
|
||||
CPU
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ correctionNumber(cpuState?.usages[0] || 0) }}%
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="max-width: 135px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
type="dashboard"
|
||||
:percentage="correctionNumber(cpuState?.usages[0] || 0)" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 10px;">
|
||||
{{ correctionNumber(cpuState?.usages[0] || 0, 1) }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { NProgress } from 'naive-ui'
|
||||
import type { ProgressStyle } from '../typings'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
import { getDiskStateByPath } from '@/api/system/systemMonitor'
|
||||
|
||||
interface Prop {
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
progressStyle: ProgressStyle
|
||||
refreshInterval: number
|
||||
path: string
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const diskState = ref<SystemMonitor.DiskInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
function formatdiskSize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
function formatdiskToByte(v: number): number {
|
||||
return v
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
try {
|
||||
const { data, code } = await getDiskStateByPath<SystemMonitor.DiskInfo>(props.path)
|
||||
if (code === 0)
|
||||
diskState.value = data
|
||||
}
|
||||
catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="mb-1">
|
||||
<span>
|
||||
{{ diskState?.mountpoint }}
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ formatdiskSize(formatdiskToByte(diskState?.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(diskState?.free || 0)) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
type="line"
|
||||
:percentage="diskState?.usedPercent"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="width: 150px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
type="dashboard"
|
||||
:percentage="correctionNumber(diskState?.usedPercent || 0)" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 10px;">
|
||||
{{ correctionNumber(diskState?.usedPercent || 0, 1) }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,87 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue'
|
||||
import { NProgress } from 'naive-ui'
|
||||
import type { ProgressStyle } from '../typings'
|
||||
import { getMemonyState } from '@/api/system/systemMonitor'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
|
||||
interface Prop {
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
progressStyle: ProgressStyle
|
||||
refreshInterval: number
|
||||
}
|
||||
|
||||
const props = defineProps<Prop>()
|
||||
let timer: NodeJS.Timer
|
||||
const memoryState = ref<SystemMonitor.MemoryInfo | null>(null)
|
||||
|
||||
function correctionNumber(v: number, keepNum = 2): number {
|
||||
return v === 0 ? 0 : Number(v.toFixed(keepNum))
|
||||
}
|
||||
|
||||
function formatMemorySize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
async function getData() {
|
||||
try {
|
||||
const { data, code } = await getMemonyState<SystemMonitor.MemoryInfo>()
|
||||
if (code === 0)
|
||||
memoryState.value = data
|
||||
}
|
||||
catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getData()
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, (!props.refreshInterval || props.refreshInterval <= 2000) ? 2000 : props.refreshInterval)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<div v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info">
|
||||
<div class="mb-1">
|
||||
<span>
|
||||
RAM
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ formatMemorySize(memoryState?.total || 0) }}/{{ formatMemorySize(memoryState?.free || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
:percentage="memoryState?.usedPercent"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15" style="width: 150px;"
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex justify-center h-full w-full mt-3">
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
type="dashboard"
|
||||
:percentage="correctionNumber(memoryState?.usedPercent || 0)" :stroke-width="15"
|
||||
style="width: 50px;"
|
||||
>
|
||||
<div class="text-white" style="font-size: 10px;">
|
||||
{{ correctionNumber(memoryState?.usedPercent || 0, 1) }}%
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,148 @@
|
||||
<script setup lang="ts">
|
||||
// -------------------
|
||||
// 系统监控图标临时使用（与 AppIcon/index.vue 一致）
|
||||
// 如果确定这种方案将 AppIcon/index.vue 封装成通用组件
|
||||
// -------------------
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { MonitorType } from '../typings'
|
||||
import type { CardStyle } from '../typings'
|
||||
import CardCPU from './CPU.vue'
|
||||
import Memory from './Memory.vue'
|
||||
import Disk from './Disk.vue'
|
||||
import { SvgIcon } from '@/components/common'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface Prop {
|
||||
size?: number // 默认70
|
||||
extendParam?: { [key: string]: [value: any] }
|
||||
iconTextColor?: string
|
||||
iconTextIconHideTitle: boolean
|
||||
cardTypeStyle: PanelPanelConfigStyleEnum
|
||||
monitorType: string
|
||||
cardStyle: CardStyle
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Prop>(), {
|
||||
size: 70,
|
||||
})
|
||||
|
||||
const defaultBackground = '#2a2a2a6b'
|
||||
const refreshInterval = 5
|
||||
const svgStyle = {
|
||||
width: '35px',
|
||||
height: '35px',
|
||||
}
|
||||
|
||||
const calculateLuminance = (color: string) => {
|
||||
const hex = color.replace(/^#/, '')
|
||||
const r = parseInt(hex.substring(0, 2), 16)
|
||||
const g = parseInt(hex.substring(2, 4), 16)
|
||||
const b = parseInt(hex.substring(4, 6), 16)
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b) / 255
|
||||
}
|
||||
|
||||
const textColor = computed(() => {
|
||||
const luminance = calculateLuminance(props.cardStyle.background || defaultBackground)
|
||||
return luminance > 0.5 ? 'black' : 'white'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full">
|
||||
<!-- 详情图标 -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.info"
|
||||
class="w-full rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)] flex"
|
||||
:style="{ backgroundColor: cardStyle.background }"
|
||||
>
|
||||
<!-- 图标 -->
|
||||
<div class="w-[60px] h-[70px]">
|
||||
<div class="w-[60px] h-full flex items-center justify-center text-white">
|
||||
<SvgIcon v-if="monitorType === MonitorType.cpu" icon="solar-cpu-bold" :style="svgStyle" />
|
||||
<SvgIcon v-if="monitorType === MonitorType.memory" icon="material-symbols-memory-alt-rounded" :style="svgStyle" />
|
||||
<SvgIcon v-if="monitorType === MonitorType.disk" icon="clarity-hard-disk-solid" :style="svgStyle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 如果为纯白色，将自动根据背景的明暗计算字体的黑白色 -->
|
||||
<div
|
||||
class=" w-full text-white flex items-center"
|
||||
:style="{ color: (iconTextColor === '#ffffff') ? textColor : iconTextColor, maxWidth: 'calc(100% - 80px)' }"
|
||||
>
|
||||
<CardCPU
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Memory
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Disk
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.info"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:path="extendParam?.path as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 极简图标（APP） -->
|
||||
<div
|
||||
v-if="cardTypeStyle === PanelPanelConfigStyleEnum.icon"
|
||||
>
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl sunpanel w-[70px] h-[70px] mx-auto rounded-2xl transition-all duration-200 hover:shadow-[0_0_20px_10px_rgba(0,0,0,0.2)]"
|
||||
:style="{ backgroundColor: cardStyle.background }"
|
||||
>
|
||||
<CardCPU
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Memory
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
<Disk
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
:card-type-style="PanelPanelConfigStyleEnum.icon"
|
||||
:progress-style="extendParam?.progressStyle as any"
|
||||
:path="extendParam?.path as any"
|
||||
:refresh-interval="refreshInterval"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!iconTextIconHideTitle"
|
||||
class="text-center app-icon-text-shadow cursor-pointer mt-[2px]"
|
||||
:style="{ color: iconTextColor }"
|
||||
>
|
||||
<span
|
||||
v-if="monitorType === MonitorType.cpu"
|
||||
>
|
||||
CPU
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else-if="monitorType === MonitorType.memory"
|
||||
>
|
||||
RAM
|
||||
</span>
|
||||
|
||||
<span
|
||||
v-else-if="monitorType === MonitorType.disk"
|
||||
>
|
||||
{{ extendParam?.path }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
171
src/components/deskModule/SystemMonitor/index copy.vue
Normal file
171
src/components/deskModule/SystemMonitor/index copy.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<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'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
|
||||
interface ProgressStyle {
|
||||
color: string
|
||||
railColor: string
|
||||
height: number
|
||||
}
|
||||
|
||||
const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
|
||||
const progressStyle = ref<ProgressStyle>({
|
||||
color: 'white',
|
||||
railColor: 'rgba(0, 0, 0, 0.5)',
|
||||
height: 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 formatMemorySize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
function formatdiskSize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
function formatdiskToByte(v: number): number {
|
||||
return v * 1024 * 1024
|
||||
}
|
||||
onMounted(() => {
|
||||
getData()
|
||||
// timer = setInterval(() => {
|
||||
// getData()
|
||||
// }, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full 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"
|
||||
:height="progressStyle.height"
|
||||
: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>
|
||||
RAM
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ formatMemorySize(systemMonitorData?.memoryInfo.total || 0) }}/{{ formatMemorySize(systemMonitorData?.memoryInfo.free || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
: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">
|
||||
{{ formatdiskSize(formatdiskToByte(item.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(item.free || 0)) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
type="line"
|
||||
:percentage="item.usedPercent"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="width: 150px;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,176 +1,152 @@
|
||||
<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'
|
||||
import { bytesToSize } from '@/utils/cmn'
|
||||
import { ref } from 'vue'
|
||||
import { VueDraggable } from 'vue-draggable-plus'
|
||||
import AppIconSystemMonitor from './AppIconSystemMonitor/index.vue'
|
||||
import { MonitorType } from './typings'
|
||||
import type { CardStyle, MonitorData, ProgressStyle } from './typings'
|
||||
import { useAuthStore, usePanelState } from '@/store'
|
||||
import { PanelPanelConfigStyleEnum } from '@/enums'
|
||||
|
||||
interface ProgressStyle {
|
||||
color: string
|
||||
railColor: string
|
||||
height: number
|
||||
}
|
||||
|
||||
let timer: NodeJS.Timer
|
||||
const panelState = usePanelState()
|
||||
const authStore = useAuthStore()
|
||||
const systemMonitorData = ref<SystemMonitor.GetAllRes | null>(null)
|
||||
const progressStyle = ref<ProgressStyle>({
|
||||
color: 'white',
|
||||
railColor: 'rgba(0, 0, 0, 0.5)',
|
||||
railColor: 'rgba(0, 0, 0, 0.2)',
|
||||
height: 5,
|
||||
})
|
||||
const svgStyle = {
|
||||
width: '25px',
|
||||
height: '25px',
|
||||
|
||||
const cardStyle: CardStyle = {
|
||||
background: '#2a2a2a6b',
|
||||
}
|
||||
|
||||
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 formatMemorySize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
function formatdiskSize(v: number): string {
|
||||
return bytesToSize(v)
|
||||
}
|
||||
|
||||
function formatdiskToByte(v: number): number {
|
||||
return v * 1024 * 1024
|
||||
}
|
||||
onMounted(() => {
|
||||
getData()
|
||||
timer = setInterval(() => {
|
||||
getData()
|
||||
}, 5000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer)
|
||||
})
|
||||
const monitorDatas = ref<MonitorData[]>([
|
||||
{
|
||||
monitorType: MonitorType.cpu,
|
||||
extendParam: {
|
||||
progressStyle,
|
||||
},
|
||||
description: 'CPU状态',
|
||||
cardStyle,
|
||||
},
|
||||
{
|
||||
monitorType: MonitorType.memory,
|
||||
cardStyle,
|
||||
extendParam: {
|
||||
progressStyle,
|
||||
},
|
||||
},
|
||||
{
|
||||
monitorType: MonitorType.disk,
|
||||
extendParam: {
|
||||
progressStyle,
|
||||
path: 'C:',
|
||||
},
|
||||
cardStyle,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full p-5 px-5 bg-[#2a2a2a6b] 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
|
||||
<div class="w-full">
|
||||
<!-- 分组标题 -->
|
||||
<div class="text-white text-xl font-extrabold mb-[20px] ml-[10px] flex items-center">
|
||||
<span class="text-shadow">
|
||||
系统状态
|
||||
</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"
|
||||
:height="progressStyle.height"
|
||||
:percentage="correctionNumber(systemMonitorData?.cpuInfo.usages[0] || 0)"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="width: 150px;"
|
||||
/>
|
||||
</div>
|
||||
<!-- <div
|
||||
v-if="authStore.visitMode === VisitMode.VISIT_MODE_LOGIN"
|
||||
class="ml-2 delay-100 transition-opacity flex"
|
||||
:class="itemGroup.hoverStatus ? 'opacity-100' : 'opacity-0'"
|
||||
>
|
||||
<span class="mr-2 cursor-pointer" title="添加快捷图标" @click="handleAddItem(itemGroup.id)">
|
||||
<SvgIcon class="text-white font-xl" icon="typcn:plus" />
|
||||
</span>
|
||||
<span class="mr-2 cursor-pointer " title="排序组快捷图标" @click="handleSetSortStatus(itemGroupIndex, !itemGroup.sortStatus)">
|
||||
<SvgIcon class="text-white font-xl" icon="ri:drag-drop-line" />
|
||||
</span>
|
||||
</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>
|
||||
RAM
|
||||
</span>
|
||||
<span class="float-right">
|
||||
{{ formatMemorySize(systemMonitorData?.memoryInfo.total || 0) }}/{{ formatMemorySize(systemMonitorData?.memoryInfo.free || 0) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
type="line"
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
: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">
|
||||
{{ formatdiskSize(formatdiskToByte(item.total || 0)) }}/{{ formatdiskSize(formatdiskToByte(item.free || 0)) }}
|
||||
</span>
|
||||
</div>
|
||||
<NProgress
|
||||
:color="progressStyle.color"
|
||||
:rail-color="progressStyle.railColor"
|
||||
:height="progressStyle.height"
|
||||
type="line"
|
||||
:percentage="item.usedPercent"
|
||||
:show-indicator="false"
|
||||
:stroke-width="15"
|
||||
style="width: 150px;"
|
||||
<!-- 详情图标 -->
|
||||
<!-- <div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info"> -->
|
||||
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.info">
|
||||
<VueDraggable
|
||||
v-model="monitorDatas" item-key="sort" :animation="300"
|
||||
class="icon-info-box"
|
||||
filter=".not-drag"
|
||||
>
|
||||
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
|
||||
<AppIconSystemMonitor
|
||||
:extend-param="item.extendParam"
|
||||
:icon-text-icon-hide-title="false"
|
||||
:card-type-style="panelState.panelConfig.iconStyle"
|
||||
:monitor-type="item.monitorType"
|
||||
:card-style="cardStyle"
|
||||
:icon-text-color="panelState.panelConfig.iconTextColor"
|
||||
/>
|
||||
</div>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
|
||||
<!-- APP图标宫型盒子 -->
|
||||
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
|
||||
<div v-if="monitorDatas">
|
||||
<VueDraggable
|
||||
v-model="monitorDatas" item-key="sort" :animation="300"
|
||||
class="icon-small-box"
|
||||
filter=".not-drag"
|
||||
>
|
||||
<div v-for="item, index in monitorDatas" :key="index" :title="item.description" @contextmenu="(e) => handleContextMenu(e, itemGroupIndex, item)">
|
||||
<AppIconSystemMonitor
|
||||
:extend-param="item.extendParam"
|
||||
:icon-text-icon-hide-title="false"
|
||||
:card-type-style="panelState.panelConfig.iconStyle"
|
||||
:monitor-type="item.monitorType"
|
||||
:card-style="cardStyle"
|
||||
:icon-text-color="panelState.panelConfig.iconTextColor"
|
||||
/>
|
||||
</div>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编辑栏 -->
|
||||
<!-- <div v-if="itemGroup.sortStatus" class="flex mt-[10px]">
|
||||
<div>
|
||||
<NButton color="#2a2a2a6b" @click="handleSaveSort(itemGroup)">
|
||||
<template #icon>
|
||||
<SvgIcon class="text-white font-xl" icon="material-symbols:save" />
|
||||
</template>
|
||||
<div>
|
||||
保存排序
|
||||
</div>
|
||||
</NButton>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.icon-info-box {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 18px;
|
||||
|
||||
}
|
||||
|
||||
.icon-small-box {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
|
||||
gap: 18px;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.icon-info-box{
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
22
src/components/deskModule/SystemMonitor/typings.ts
Normal file
22
src/components/deskModule/SystemMonitor/typings.ts
Normal file
@ -0,0 +1,22 @@
|
||||
export enum MonitorType {
|
||||
'cpu' = 'cpu', // 图标风格
|
||||
'memory' = 'memory', // 详情风格
|
||||
'disk' = 'disk',
|
||||
}
|
||||
|
||||
export interface CardStyle {
|
||||
background: string
|
||||
}
|
||||
|
||||
export interface MonitorData {
|
||||
monitorType: MonitorType
|
||||
extendParam?: { [key: string]: [value:any] } | any
|
||||
description?: string
|
||||
cardStyle: CardStyle
|
||||
}
|
||||
|
||||
export interface ProgressStyle {
|
||||
color: string
|
||||
railColor: string
|
||||
height: number
|
||||
}
|
||||
@ -333,9 +333,6 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
/>
|
||||
<div class="mask" :style="{ backgroundColor: `rgba(0,0,0,${panelState.panelConfig.backgroundMaskNumber})` }" />
|
||||
<div ref="scrollContainerRef" class="absolute w-full h-full overflow-auto">
|
||||
<div v-if="panelState.panelConfig.searchBoxShow" class="flex mx-auto ">
|
||||
<SystemMonitor @itemSearch="itemFrontEndSearch" />
|
||||
</div>
|
||||
<div
|
||||
class="p-2.5 mx-auto"
|
||||
:style="{
|
||||
@ -370,6 +367,10 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
<SystemMonitor @itemSearch="itemFrontEndSearch" />
|
||||
</div> -->
|
||||
|
||||
<div v-if="panelState.panelConfig.searchBoxShow" class="flex mx-auto ">
|
||||
<SystemMonitor />
|
||||
</div>
|
||||
|
||||
<!-- 组纵向排列 -->
|
||||
<div
|
||||
v-for="(itemGroup, itemGroupIndex) in filterItems" :key="itemGroupIndex"
|
||||
@ -437,7 +438,7 @@ function handleAddItem(itemIconGroupId?: number) {
|
||||
<div v-if="panelState.panelConfig.iconStyle === PanelPanelConfigStyleEnum.icon">
|
||||
<div v-if="itemGroup.items">
|
||||
<VueDraggable
|
||||
v-model="itemGroup.items" item-key="id" :animation="300"
|
||||
v-model="itemGroup.items" item-key="sort" :animation="300"
|
||||
class="icon-small-box"
|
||||
|
||||
filter=".not-drag"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user