wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

系统监控-服务监控增加进度条颜色，解决.NETCore服务显示小数不正确的问题

Browse Source
This commit is contained in:
YUN-PC5\user 2023-12-07 16:14:21 +08:00
parent ac25a1ffda
commit 8a201d7e97
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/monitor/server/index.vue
View File

@ -13,7 +13,7 @@
<div class="col-item">
<div class="title">CPU使用率</div>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" :color="colors" />
</div>
<div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
</div>
@ -30,7 +30,7 @@
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" />
<el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" :color="colors" />
</div>
</el-tooltip>
<div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
@ -39,7 +39,7 @@
<div class="col-item">
<div class="title">.NETCore服务</div>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(appPercent)" />
<el-progress type="dashboard" :percentage="parseFloat(appPercent)" :color="colors" />
</div>
<div class="footer" v-if="server.app">{{ server.app.appRAM }}</div>
</div>
@ -63,7 +63,7 @@
</div>
</template>
<div class="content">
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
<el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" :color="colors" />
</div>
</el-tooltip>
</div>
@ -242,6 +242,13 @@ function clear() {
clearInterval(intervalId.value)
intervalId.value = null
}
const colors = [
{ color: '#409EFF', percentage: 20 },
{ color: '#95d475', percentage: 40 },
{ color: '#67C23A', percentage: 60 },
{ color: '#E6A23C', percentage: 80 },
{ color: '#F56C6C', percentage: 100 }
]
watch(
() => server.value,
(val) => {
@ -250,7 +257,8 @@ watch(
const totalRam = val.cpu.totalRAM.replace('GB', '') * 1024
const p = appRam / totalRam
appPercent.value = p.toFixed(2)
appPercent.value = (p * 100).toFixed(2)
console.log('appPercent', appPercent.value)
}
},
{ immediate: true }