143 lines
4.9 KiB
Vue
143 lines
4.9 KiB
Vue
<script setup>
|
|
import {onMounted, ref, watch} from "vue";
|
|
import Util from "../../Util/index.js";
|
|
import minimizeStr from '../minimize-str/index.vue'
|
|
let props = defineProps(['status', 'site'])
|
|
|
|
let headerStyle = ref({})
|
|
let cpuPercentage = ref(0)
|
|
let memoryPercentage = ref(0)
|
|
let usedMemory = ref(0)
|
|
let totalMemory = ref(0)
|
|
let loadPercentage = ref(0)
|
|
let diskPercentage = ref(0)
|
|
let usedSpace = ref(0)
|
|
let totalSpace = ref(0)
|
|
let bootTime = ref()
|
|
let upTime = ref()
|
|
let systemLoad = ref([0, 0, 0])
|
|
let site = props.site
|
|
let lastOnline = Util.formatDate(site.lastOnline)
|
|
let ioRead = ref("0B/s")
|
|
let ioWrite = ref("0B/s")
|
|
let networkReceive = ref("0B/s")
|
|
let networkSend = ref("0B/s")
|
|
watch(props, () => {
|
|
let status = props.status
|
|
if(status !== null && status !== undefined) {
|
|
cpuPercentage.value = status.usedCpuPercentage
|
|
memoryPercentage.value = status.usedMemoryPercentage
|
|
usedMemory.value = Util.formatSize(status.usedMemory)
|
|
totalMemory.value = Util.formatSize(status.totalMemory)
|
|
diskPercentage.value = status.usedSpacePercentage
|
|
usedSpace.value = Util.formatSize(status.usedSpace)
|
|
totalSpace.value = Util.formatSize(status.totalSpace)
|
|
bootTime.value = new Date(status.systemBootTime * 1000).toLocaleString('zh-CN')
|
|
upTime.value = Util.formatDuration(status.systemUpTime)
|
|
systemLoad.value = status.systemLoad
|
|
ioRead.value = Util.formatSize(status.ioRead) + "/s"
|
|
ioWrite.value = Util.formatSize(status.ioWrite) + "/s"
|
|
networkReceive.value = Util.formatSize(status.networkReceive) + "/s"
|
|
networkSend.value = Util.formatSize(status.networkSend) + "/s"
|
|
|
|
if (systemLoad.value[0] !== -1)
|
|
for (let i = 0; i < 3; i++)
|
|
systemLoad.value[i] = Number(systemLoad.value[i]).toFixed(2)
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
if(site.online)
|
|
headerStyle.value['--color'] = 'green'
|
|
else
|
|
headerStyle.value['--color'] = 'gray'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<el-card :header-color="site.online?'green':'gray'" class="home-card">
|
|
<div class="header">
|
|
<span :style="headerStyle">{{`${site.id}:${site.hostname}`}}</span>
|
|
</div>
|
|
<el-row>
|
|
<el-col :span="12" style="text-align: center">
|
|
<el-progress type="dashboard" :percentage="cpuPercentage" :color="Util.colors" style="text-align: center">
|
|
<template #default>
|
|
{{cpuPercentage}}% <br>
|
|
CPU
|
|
</template>
|
|
</el-progress>
|
|
<span style="text-align: center; display: block">{{(cpuPercentage * site.cpuCore * 0.01).toFixed(2)}} / {{site.cpuCore}}</span>
|
|
</el-col>
|
|
<el-col :span="12" style="text-align: center">
|
|
<el-progress type="dashboard" :percentage="memoryPercentage" :color="Util.colors">
|
|
<template #default>
|
|
{{memoryPercentage}}% <br>
|
|
内存
|
|
</template>
|
|
</el-progress>
|
|
<span style="text-align: center; display: block">{{usedMemory}}/{{totalMemory}}</span>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row style="margin-top: 10px">
|
|
<el-col :span="12" style="text-align: center">
|
|
<el-progress type="dashboard" :percentage="loadPercentage" :color="Util.colors">
|
|
<template #default>
|
|
{{loadPercentage}}% <br>
|
|
负载
|
|
</template>
|
|
</el-progress>
|
|
<span style="text-align: center; display: block">{{systemLoad[0]}}/{{systemLoad[1]}}/{{systemLoad[2]}}</span>
|
|
</el-col>
|
|
<el-col :span="12" style="text-align: center;">
|
|
<el-progress type="dashboard" :percentage="diskPercentage" :color="Util.colors">
|
|
<template #default>
|
|
{{diskPercentage}}% <br>
|
|
硬盘
|
|
</template>
|
|
</el-progress>
|
|
<span style="text-align: center; display: block">{{usedSpace}}/{{totalSpace}}</span>
|
|
</el-col>
|
|
<el-col>
|
|
IP地址:{{site.ip}}<br>
|
|
系统:<minimize-str :str="site.system" :length="25"/>
|
|
<br>
|
|
主机名:{{site.hostname}}<br>
|
|
处理器架构:{{site.cpuArch}}<br>
|
|
处理器名称:<minimize-str :str="site.cpuName" :length="25"/><br>
|
|
处理器核心数:{{site.cpuCore}}<br>
|
|
处理器线程数:{{site.cpuThread}}<br>
|
|
<div v-if="site.online">
|
|
运行时间:{{upTime}}<br>
|
|
开机时间:{{bootTime}}<br>
|
|
磁盘读写:{{ioRead + " " + ioWrite}}<br>
|
|
网络收发:{{networkReceive + " " + networkSend}}<br>
|
|
</div>
|
|
<div v-else>
|
|
最后上线时间:{{lastOnline}}<br>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header > span {
|
|
position: relative;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-left: 18px;
|
|
}
|
|
|
|
.header > span::before {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: -13px;
|
|
width: 4px;
|
|
height: 14px;
|
|
content: '';
|
|
background: var(--color);
|
|
border-radius: 10px;
|
|
}
|
|
</style> |