1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-02-24 14:54:43 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: 调整首页监控详情样式

Browse source
This commit is contained in:
ssongliu 2023-03-06 11:53:21 +08:00
parent c45a19f1e5
commit 2a1f317f99
2 changed files with 50 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/views/home/app/index.vue
View file

@ -100,7 +100,7 @@ defineExpose({
}); });
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.h-app-card { .h-app-card {
cursor: pointer; cursor: pointer;
padding: 10px 15px; padding: 10px 15px;

74
frontend/src/views/home/status/index.vue
View file

@ -2,28 +2,42 @@
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="6" align="center"> <el-col :span="6" align="center">
<el-popover placement="bottom" :width="300" trigger="hover"> <el-popover placement="bottom" :width="300" trigger="hover">
<div style="margin-bottom: 10px"> <div>
<el-tag>{{ baseInfo.cpuModelName }}</el-tag> <el-tooltip
effect="dark"
:content="baseInfo.cpuModelName"
v-if="baseInfo.cpuModelName.length > 40"
placement="top"
>
<el-tag>
{{ baseInfo.cpuModelName.substring(0, 40) + '...' }}
</el-tag>
</el-tooltip>
<el-tag v-else>
{{ baseInfo.cpuModelName }}
</el-tag>
</div> </div>
<el-tag> <el-tag class="tagClass">
{{ $t('home.core') }} *{{ baseInfo.cpuCores }}； {{ $t('home.logicCore') }} *{{ {{ $t('home.core') }} *{{ baseInfo.cpuCores }} {{ $t('home.logicCore') }} *{{
baseInfo.cpuLogicalCores baseInfo.cpuLogicalCores
}} }}
</el-tag> </el-tag>
<br /> <br />
<el-tag style="margin-top: 5px" v-for="(item, index) of currentInfo.cpuPercent" :key="index"> <el-row :gutter="5">
CPU-{{ index }}: {{ formatNumber(item) }}% <el-col :span="12" v-for="(item, index) of currentInfo.cpuPercent" :key="index">
</el-tag> <el-tag class="tagClass">CPU-{{ index }}: {{ formatNumber(item) }}%</el-tag>
</el-col>
</el-row>
<template #reference> <template #reference>
<div id="cpu" style="width: 100%; height: 160px"></div> <div id="cpu" class="chartClass"></div>
</template> </template>
</el-popover> </el-popover>
<span class="input-help" style="margin-top: -10px"> <span class="input-help">
( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core ( {{ formatNumber(currentInfo.cpuUsed) }} / {{ currentInfo.cpuTotal }} ) Core
</span> </span>
</el-col> </el-col>
<el-col :span="6" align="center"> <el-col :span="6" align="center">
<div id="memory" style="width: 100%; height: 160px"></div> <div id="memory" class="chartClass"></div>
<span class="input-help"> <span class="input-help">
( {{ formatNumber(currentInfo.memoryUsed / 1024 / 1024) }} / ( {{ formatNumber(currentInfo.memoryUsed / 1024 / 1024) }} /
{{ formatNumber(currentInfo.memoryTotal / 1024 / 1024) }} ) MB {{ formatNumber(currentInfo.memoryTotal / 1024 / 1024) }} ) MB
@ -31,17 +45,17 @@
</el-col> </el-col>
<el-col :span="6" align="center"> <el-col :span="6" align="center">
<el-popover placement="bottom" :width="200" trigger="hover"> <el-popover placement="bottom" :width="200" trigger="hover">
<el-tag style="margin-top: 5px"> <el-tag class="tagClass">
{{ $t('home.loadAverage', [1]) }}: {{ formatNumber(currentInfo.load1) }} {{ $t('home.loadAverage', [1]) }}: {{ formatNumber(currentInfo.load1) }}
</el-tag> </el-tag>
<el-tag style="margin-top: 5px"> <el-tag class="tagClass">
{{ $t('home.loadAverage', [5]) }}: {{ formatNumber(currentInfo.load5) }} {{ $t('home.loadAverage', [5]) }}: {{ formatNumber(currentInfo.load5) }}
</el-tag> </el-tag>
<el-tag style="margin-top: 5px"> <el-tag class="tagClass">
{{ $t('home.loadAverage', [15]) }}: {{ formatNumber(currentInfo.load15) }} {{ $t('home.loadAverage', [15]) }}: {{ formatNumber(currentInfo.load15) }}
</el-tag> </el-tag>
<template #reference> <template #reference>
<div id="load" style="width: 100%; height: 160px"></div> <div id="load" class="chartClass"></div>
</template> </template>
</el-popover> </el-popover>
<span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span> <span class="input-help">{{ loadStatus(currentInfo.loadUsagePercent) }}</span>
@ -51,35 +65,35 @@
<el-row :gutter="5"> <el-row :gutter="5">
<el-col :span="12"> <el-col :span="12">
<el-tag>{{ $t('home.mount') }}: /</el-tag> <el-tag>{{ $t('home.mount') }}: /</el-tag>
<div><el-tag style="margin-top: 10px">iNode</el-tag></div> <div><el-tag class="tagClass">iNode</el-tag></div>
<el-tag style="margin-top: 5px">{{ $t('home.total') }}: {{ currentInfo.inodesTotal }}</el-tag> <el-tag class="tagClass">{{ $t('home.total') }}: {{ currentInfo.inodesTotal }}</el-tag>
<el-tag style="margin-top: 3px">{{ $t('home.used') }}: {{ currentInfo.inodesUsed }}</el-tag> <el-tag class="tagClass">{{ $t('home.used') }}: {{ currentInfo.inodesUsed }}</el-tag>
<el-tag style="margin-top: 3px">{{ $t('home.free') }}: {{ currentInfo.inodesFree }}</el-tag> <el-tag class="tagClass">{{ $t('home.free') }}: {{ currentInfo.inodesFree }}</el-tag>
<el-tag style="margin-top: 3px"> <el-tag class="tagClass">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.inodesUsedPercent) }}% {{ $t('home.percent') }}: {{ formatNumber(currentInfo.inodesUsedPercent) }}%
</el-tag> </el-tag>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div> <div>
<el-tag style="margin-top: 35px">{{ $t('monitor.disk') }}</el-tag> <el-tag style="margin-top: 27px">{{ $t('monitor.disk') }}</el-tag>
</div> </div>
<el-tag style="margin-top: 5px"> <el-tag class="tagClass">
{{ $t('home.total') }}: {{ formatNumber(currentInfo.total / 1024 / 1024 / 1024) }} GB {{ $t('home.total') }}: {{ formatNumber(currentInfo.total / 1024 / 1024 / 1024) }} GB
</el-tag> </el-tag>
<el-tag style="margin-top: 3px"> <el-tag class="tagClass">
{{ $t('home.used') }}: {{ formatNumber(currentInfo.used / 1024 / 1024 / 1024) }} GB {{ $t('home.used') }}: {{ formatNumber(currentInfo.used / 1024 / 1024 / 1024) }} GB
</el-tag> </el-tag>
<el-tag style="margin-top: 3px"> <el-tag class="tagClass">
{{ $t('home.free') }}: {{ formatNumber(currentInfo.free / 1024 / 1024 / 1024) }} GB {{ $t('home.free') }}: {{ formatNumber(currentInfo.free / 1024 / 1024 / 1024) }} GB
</el-tag> </el-tag>
<el-tag style="margin-top: 3px"> <el-tag class="tagClass">
{{ $t('home.percent') }}: {{ formatNumber(currentInfo.usedPercent) }}% {{ $t('home.percent') }}: {{ formatNumber(currentInfo.usedPercent) }}%
</el-tag> </el-tag>
</el-col> </el-col>
</el-row> </el-row>
<template #reference> <template #reference>
<div id="disk" style="width: 100%; height: 160px"></div> <div id="disk" class="chartClass"></div>
</template> </template>
</el-popover> </el-popover>
<span class="input-help"> <span class="input-help">
@ -318,3 +332,13 @@ defineExpose({
acceptParams, acceptParams,
}); });
</script> </script>
<style scoped lang="scss">
.tagClass {
margin-top: 3px;
}
.chartClass {
width: 100%;
height: 160px;
}
</style>