mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-12 10:55:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

refactor: upgrade ant design vue v3 to v4

Browse source
This commit is contained in:
0xJacky 2023-11-26 00:23:29 +08:00
parent c578f26054
commit d84dbffb54
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
142 changed files with 7883 additions and 13745 deletions
Download patch file Download diff file Expand all files Collapse all files

110
frontend/src/views/dashboard/components/NodeAnalyticItem.vue
View file

@ -9,72 +9,72 @@ const props = defineProps(['item'])
</script>
<template>
<div class="hardware-monitor">
<div class="hardware-monitor-item longer">
<div>
<line-chart-outlined/>
<span class="load-avg-describe">1min:</span>{{ ' ' + item.avg_load?.load1?.toFixed(2) }} ·
<span class="load-avg-describe">5min:</span>{{ item.avg_load?.load5?.toFixed(2) }} ·
<span class="load-avg-describe">15min:</span>{{ item.avg_load?.load15?.toFixed(2) }}
</div>
<div>
<arrow-up-outlined/>
{{ bytesToSize(item?.network?.bytesSent) }}
<arrow-down-outlined/>
{{ bytesToSize(item?.network?.bytesRecv) }}
</div>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.cpu_percent">
<template #icon>
<Icon :component="cpu"/>
</template>
<span>{{ item.cpu_num }} CPU</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.memory_percent">
<template #icon>
<Icon :component="memory"/>
</template>
<span>{{ item.memory_total }}</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.disk_percent">
<template #icon>
<database-outlined/>
</template>
<span>{{ item.disk_total }}</span>
</usage-progress-line>
</div>
<div class="hardware-monitor">
<div class="hardware-monitor-item longer">
<div>
<line-chart-outlined/>
<span class="load-avg-describe">1min:</span>{{ ' ' + item.avg_load?.load1?.toFixed(2) }} ·
<span class="load-avg-describe">5min:</span>{{ item.avg_load?.load5?.toFixed(2) }} ·
<span class="load-avg-describe">15min:</span>{{ item.avg_load?.load15?.toFixed(2) }}
</div>
<div>
<arrow-up-outlined/>
{{ bytesToSize(item?.network?.bytesSent) }}
<arrow-down-outlined/>
{{ bytesToSize(item?.network?.bytesRecv) }}
</div>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.cpu_percent">
<template #icon>
<Icon :component="cpu"/>
</template>
<span>{{ item.cpu_num }} CPU</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.memory_percent">
<template #icon>
<Icon :component="memory"/>
</template>
<span>{{ item.memory_total }}</span>
</usage-progress-line>
</div>
<div class="hardware-monitor-item">
<usage-progress-line :percent="item.disk_percent">
<template #icon>
<database-outlined/>
</template>
<span>{{ item.disk_total }}</span>
</usage-progress-line>
</div>
</div>
</template>
<style scoped lang="less">
.hardware-monitor {
display: flex;
display: flex;
@media (max-width: 900px) {
display: block;
}
.hardware-monitor-item {
width: 150px;
margin-right: 30px;
@media (max-width: 900px) {
display: block;
margin-bottom: 5px;
}
}
.hardware-monitor-item {
width: 150px;
margin-right: 30px;
@media (max-width: 900px) {
margin-bottom: 5px;
}
}
.longer {
width: 300px;
}
.longer {
width: 300px;
}
}
.load-avg-describe {
@media (max-width: 1200px) and (min-width: 600px) {
display: none;
}
@media (max-width: 1200px) and (min-width: 600px) {
display: none;
}
}
</style>