zwgczx/zwpanel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

适配三个组件

Browse Source
This commit is contained in:
Sun 2024-01-05 14:01:46 +08:00
parent 3a82949afc
commit 9735e67a7d
3 changed files with 37 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/deskModule/SystemMonitor/AppIconSystemMonitor/CPU.vue
View File

@ -1,14 +1,15 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import type { ProgressStyle } from '../typings'
import GenericProgress from '../components/GenericProgress/index.vue'
import { getCpuState } from '@/api/system/systemMonitor'
import type { PanelPanelConfigStyleEnum } from '@/enums'
interface Prop {
cardTypeStyle: PanelPanelConfigStyleEnum
progressStyle: ProgressStyle
refreshInterval: number
textColor: string
progressColor: string
progressRailColor: string
}
const props = defineProps<Prop>()
@ -45,12 +46,14 @@ onUnmounted(() => {
<template>
<div class="w-full">
<GenericProgress
:progress-style="progressStyle"
:progress-color="progressColor"
:progress-rail-color="progressRailColor"
:progress-height="5"
:percentage="correctionNumber(cpuState?.usages[0] || 0)"
:card-type-style="cardTypeStyle"
:info-card-right-text="`${correctionNumber(cpuState?.usages[0] || 0)}%`"
info-card-left-text="CPU"
text-color="black"
:text-color="textColor"
/>
</div>
</template>

54
src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Disk.vue
View File

@ -1,15 +1,16 @@
<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 GenericProgress from '../components/GenericProgress/index.vue'
import type { PanelPanelConfigStyleEnum } from '@/enums'
import { bytesToSize } from '@/utils/cmn'
import { getDiskStateByPath } from '@/api/system/systemMonitor'
interface Prop {
cardTypeStyle: PanelPanelConfigStyleEnum
progressStyle: ProgressStyle
refreshInterval: number
textColor: string
progressColor: string
progressRailColor: string
path: string
}
@ -54,40 +55,15 @@ onUnmounted(() => {
<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>
<GenericProgress
:progress-color="progressColor"
:progress-rail-color="progressRailColor"
:progress-height="5"
:percentage="correctionNumber(diskState?.usedPercent || 0)"
:card-type-style="cardTypeStyle"
:info-card-right-text="`${formatdiskSize(formatdiskToByte(diskState?.total || 0))}/${formatdiskSize(formatdiskToByte(diskState?.free || 0))}`"
:info-card-left-text="diskState?.mountpoint"
:text-color="textColor"
/>
</div>
</template>

53
src/components/deskModule/SystemMonitor/AppIconSystemMonitor/Memory.vue
View File

@ -1,15 +1,16 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { NProgress } from 'naive-ui'
import type { ProgressStyle } from '../typings'
import GenericProgress from '../components/GenericProgress/index.vue'
import { getMemonyState } from '@/api/system/systemMonitor'
import { PanelPanelConfigStyleEnum } from '@/enums'
import type { PanelPanelConfigStyleEnum } from '@/enums'
import { bytesToSize } from '@/utils/cmn'
interface Prop {
cardTypeStyle: PanelPanelConfigStyleEnum
progressStyle: ProgressStyle
refreshInterval: number
textColor: string
progressColor: string
progressRailColor: string
}
const props = defineProps<Prop>()
@ -49,39 +50,15 @@ onUnmounted(() => {
<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>
<GenericProgress
:progress-color="progressColor"
:progress-rail-color="progressRailColor"
:progress-height="5"
:percentage="correctionNumber(memoryState?.usedPercent || 0)"
:card-type-style="cardTypeStyle"
:info-card-right-text="`${formatMemorySize(memoryState?.total || 0)}/${formatMemorySize(memoryState?.free || 0)}`"
info-card-left-text="RAM"
:text-color="textColor"
/>
</div>
</template>