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

refactor: project directory structure

Browse source
This commit is contained in:
0xJacky 2023-11-26 18:59:12 +08:00
parent c1193a5b8c
commit e5a5889931
No known key found for this signature in database
GPG key ID: B6E4A6E4A561BAF0
367 changed files with 710 additions and 756 deletions
Download patch file Download diff file Expand all files Collapse all files

80
app/src/views/dashboard/components/NodeAnalyticItem.vue Normal file
View file

@ -0,0 +1,80 @@
<script setup lang="ts">
import cpu from '@/assets/svg/cpu.svg'
import memory from '@/assets/svg/memory.svg'
import {bytesToSize} from '@/lib/helper'
import Icon, {ArrowDownOutlined, ArrowUpOutlined, DatabaseOutlined, LineChartOutlined} from '@ant-design/icons-vue'
import UsageProgressLine from '@/components/Chart/UsageProgressLine.vue'
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>
</template>
<style scoped lang="less">
.hardware-monitor {
display: flex;
@media (max-width: 900px) {
display: block;
}
.hardware-monitor-item {
width: 150px;
margin-right: 30px;
@media (max-width: 900px) {
margin-bottom: 5px;
}
}
.longer {
width: 300px;
}
}
.load-avg-describe {
@media (max-width: 1200px) and (min-width: 600px) {
display: none;
}
}
</style>