456 lines
12 KiB
Vue
456 lines
12 KiB
Vue
<template>
|
|
<div class="info_container" :style="{ width: visible ? `250px` : 0 }">
|
|
<!-- <el-divider class="first-divider" content-position="center">地理位置</el-divider> -->
|
|
<el-descriptions
|
|
class="margin-top"
|
|
:column="1"
|
|
size="small"
|
|
border
|
|
>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
IP
|
|
</div>
|
|
</template>
|
|
<span style="margin-right: 10px;">{{ host }}</span>
|
|
<el-tag size="small" style="cursor: pointer;" @click="handleCopy">复制</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
位置
|
|
</div>
|
|
</template>
|
|
<!-- <div size="small">{{ ipInfo.country || '--' }} {{ ipInfo.regionName }} {{ ipInfo.city }}</div> -->
|
|
<div size="small">{{ ipInfo.country || '--' }} {{ ipInfo.regionName }}</div>
|
|
</el-descriptions-item>
|
|
<!-- <el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
延迟
|
|
</div>
|
|
</template>
|
|
<span style="margin-right: 10px;" class="host-ping">{{ ping }}</span>
|
|
</el-descriptions-item> -->
|
|
</el-descriptions>
|
|
|
|
<!-- <el-divider content-position="center">实时监控</el-divider> -->
|
|
<br>
|
|
|
|
<el-descriptions
|
|
class="margin-top"
|
|
:column="1"
|
|
size="small"
|
|
border
|
|
>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
CPU
|
|
</div>
|
|
</template>
|
|
<el-progress
|
|
:text-inside="true"
|
|
:stroke-width="18"
|
|
:percentage="cpuUsage"
|
|
:color="handleColor(cpuUsage)"
|
|
/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
内存
|
|
</div>
|
|
</template>
|
|
<el-progress
|
|
:text-inside="true"
|
|
:stroke-width="18"
|
|
:percentage="usedMemPercentage"
|
|
:color="handleColor(usedMemPercentage)"
|
|
/>
|
|
<div class="position-right">
|
|
{{ $tools.toFixed(memInfo.usedMemMb / 1024) }}/{{ $tools.toFixed(memInfo.totalMemMb / 1024) }}G
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
交换
|
|
</div>
|
|
</template>
|
|
<el-progress
|
|
:text-inside="true"
|
|
:stroke-width="18"
|
|
:percentage="swapPercentage"
|
|
:color="handleColor(swapPercentage)"
|
|
/>
|
|
<div class="position-right">
|
|
{{ $tools.toFixed(swapInfo.swapUsed / 1024) }}/{{ $tools.toFixed(swapInfo.swapTotal / 1024) }}G
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
硬盘
|
|
</div>
|
|
</template>
|
|
<el-progress
|
|
:text-inside="true"
|
|
:stroke-width="18"
|
|
:percentage="usedPercentage"
|
|
:color="handleColor(usedPercentage)"
|
|
/>
|
|
<div class="position-right">
|
|
{{ driveInfo.usedGb || '--' }}/{{ driveInfo.totalGb || '--' }}G
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
网络
|
|
</div>
|
|
</template>
|
|
<div class="netstat-info">
|
|
<div class="wrap">
|
|
<img src="@/assets/upload.png" alt="">
|
|
<span class="upload">{{ output || 0 }}</span>
|
|
</div>
|
|
<div class="wrap">
|
|
<img src="@/assets/download.png" alt="">
|
|
<span class="download">{{ input || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<!-- <el-divider content-position="center">系统信息</el-divider> -->
|
|
<br>
|
|
|
|
<el-descriptions
|
|
class="margin-top"
|
|
:column="1"
|
|
size="small"
|
|
border
|
|
>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
名称
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ osInfo.hostname }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
核心
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ cpuInfo.cpuCount }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
型号
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ cpuInfo.cpuModel }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
类型
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ osInfo.type }} {{ osInfo.release }} {{ osInfo.arch }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
在线
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ $tools.formatTime(osInfo.uptime) }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item>
|
|
<template #label>
|
|
<div class="item-title">
|
|
本地
|
|
</div>
|
|
</template>
|
|
<div size="small">
|
|
{{ osInfo.ip }}
|
|
</div>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<el-divider content-position="center">FEATURE</el-divider>
|
|
<!-- <el-button
|
|
:type="sftpStatus ? 'primary' : 'success'"
|
|
style="display: block;width: 80%;margin: 30px auto;"
|
|
@click="handleSftp"
|
|
>
|
|
{{ sftpStatus ? '关闭SFTP' : '连接SFTP' }}
|
|
</el-button> -->
|
|
<el-button
|
|
:type="inputCommandStyle ? 'primary' : 'success'"
|
|
style="display: block;width: 80%;margin: 15px auto;"
|
|
@click="clickInputCommand"
|
|
>
|
|
命令输入框
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onBeforeUnmount, computed, getCurrentInstance } from 'vue'
|
|
|
|
const { proxy: { $message, $tools } } = getCurrentInstance()
|
|
|
|
const props = defineProps({
|
|
hostInfo: {
|
|
required: true,
|
|
type: Object
|
|
},
|
|
visible: {
|
|
required: true,
|
|
type: Boolean
|
|
},
|
|
showInputCommand: {
|
|
required: true,
|
|
type: Boolean
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:inputCommandStyle', 'connect-sftp', 'click-input-command',])
|
|
|
|
const socket = ref(null)
|
|
// const name = ref('')
|
|
const ping = ref(0)
|
|
const pingTimer = ref(null)
|
|
// const sftpStatus = ref(false)
|
|
|
|
// const token = computed(() => $store.token)
|
|
const hostData = computed(() => props.hostInfo.monitorData || {})
|
|
const host = computed(() => props.hostInfo.host)
|
|
const ipInfo = computed(() => hostData.value?.ipInfo || {})
|
|
// const isError = computed(() => !Boolean(hostData.value?.osInfo))
|
|
const cpuInfo = computed(() => hostData.value?.cpuInfo || {})
|
|
const memInfo = computed(() => hostData.value?.memInfo || {})
|
|
const swapInfo = computed(() => hostData.value?.swapInfo || {})
|
|
const osInfo = computed(() => hostData.value?.osInfo || {})
|
|
const driveInfo = computed(() => hostData.value?.driveInfo || {})
|
|
const netstatInfo = computed(() => {
|
|
let { total: netTotal, ...netCards } = hostData.value?.netstatInfo || {}
|
|
return { netTotal, netCards: netCards || {} }
|
|
})
|
|
// const openedCount = computed(() => hostData.value?.openedCount || 0)
|
|
const cpuUsage = computed(() => Number(cpuInfo.value?.cpuUsage) || 0)
|
|
const usedMemPercentage = computed(() => Number(memInfo.value?.usedMemPercentage) || 0)
|
|
const swapPercentage = computed(() => {
|
|
let swapPercentage = swapInfo.value?.swapPercentage === 'NaN' || Number.isNaN(swapInfo.value?.swapPercentage)
|
|
return swapPercentage ? 0 : Number(swapPercentage || 0)
|
|
})
|
|
const usedPercentage = computed(() => Number(driveInfo.value?.usedPercentage) || 0)
|
|
const output = computed(() => {
|
|
let outputMb = Number(netstatInfo.value.netTotal?.outputMb) || 0
|
|
if (outputMb >= 1) return `${ outputMb.toFixed(2) } MB/s`
|
|
return `${ (outputMb * 1024).toFixed(1) } KB/s`
|
|
})
|
|
const input = computed(() => {
|
|
let inputMb = Number(netstatInfo.value.netTotal?.inputMb) || 0
|
|
if (inputMb >= 1) return `${ inputMb.toFixed(2) } MB/s`
|
|
return `${ (inputMb * 1024).toFixed(1) } KB/s`
|
|
})
|
|
const inputCommandStyle = computed({
|
|
get: () => props.showInputCommand,
|
|
set: (val) => {
|
|
emit('update:inputCommandStyle', val)
|
|
}
|
|
})
|
|
|
|
// const handleSftp = () => {
|
|
// sftpStatus.value = !sftpStatus.value
|
|
// emit('connect-sftp', sftpStatus.value)
|
|
// }
|
|
|
|
const clickInputCommand = () => {
|
|
inputCommandStyle.value = true
|
|
emit('click-input-command')
|
|
}
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(host.value)
|
|
$message.success({ message: 'success', center: true })
|
|
}
|
|
|
|
const handleColor = (num) => {
|
|
if (num < 65) return '#8AE234'
|
|
if (num < 85) return '#FFD700'
|
|
if (num < 90) return '#FFFF33'
|
|
if (num <= 100) return '#FF3333'
|
|
}
|
|
|
|
const getHostPing = () => {
|
|
pingTimer.value = setInterval(() => {
|
|
$tools.ping(`http://${ props.host }:22022`)
|
|
.then(res => {
|
|
ping.value = res
|
|
if (!import.meta.env.DEV) {
|
|
console.warn('Please tick \'Preserve Log\'')
|
|
}
|
|
})
|
|
}, 3000)
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
socket.value && socket.value.close()
|
|
pingTimer.value && clearInterval(pingTimer.value)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info_container {
|
|
// border-top: 1px solid var(--el-border-color);
|
|
flex-shrink: 0;
|
|
overflow: scroll;
|
|
background-color: #fff; //#E0E2EF;
|
|
transition: all 0.15s;
|
|
|
|
// header {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
// height: 30px;
|
|
// margin: 10px;
|
|
// position: relative;
|
|
|
|
// img {
|
|
// cursor: pointer;
|
|
// height: 80%;
|
|
// }
|
|
// }
|
|
|
|
// 表格中系统标识的title
|
|
.item-title {
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
min-width: 30px;
|
|
max-width: 30px;
|
|
}
|
|
|
|
.host-ping {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
color: #009933;
|
|
background-color: #e8fff3;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
// 分割线title
|
|
:deep(.el-divider__text) {
|
|
color: #a0cfff;
|
|
padding: 0 8px;
|
|
user-select: none;
|
|
}
|
|
|
|
// 分割线间距
|
|
:deep(.el-divider--horizontal) {
|
|
margin: 28px 0 10px;
|
|
}
|
|
|
|
.first-divider {
|
|
margin: 15px 0 10px;
|
|
}
|
|
|
|
// 表格
|
|
:deep(.el-descriptions__table) {
|
|
tr {
|
|
display: flex;
|
|
|
|
.el-descriptions__label {
|
|
min-width: 35px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.el-descriptions__content {
|
|
position: relative;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-progress {
|
|
width: 100%;
|
|
}
|
|
|
|
// 进度条右边参数定位
|
|
.position-right {
|
|
position: absolute;
|
|
right: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 进度条
|
|
:deep(.el-progress-bar__inner) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-progress-bar__innerText {
|
|
display: flex;
|
|
|
|
span {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 网络
|
|
.netstat-info {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
padding: 0 5px;
|
|
|
|
img {
|
|
width: 15px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.upload {
|
|
color: #CF8A20;
|
|
}
|
|
|
|
.download {
|
|
color: #67c23a;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.el-descriptions__label {
|
|
vertical-align: middle;
|
|
max-width: 35px;
|
|
}
|
|
</style> |