{{ $tools.toFixed(memInfo.usedMemMb / 1024) }}/{{ $tools.toFixed(memInfo.totalMemMb / 1024) }}G
@@ -83,7 +85,7 @@
:text-inside="true"
:stroke-width="18"
:percentage="swapPercentage"
- :color="handleColor(swapPercentage)"
+ :color="handleUsedColor(swapPercentage)"
/>
{{ $tools.toFixed(swapInfo.swapUsed / 1024) }}/{{ $tools.toFixed(swapInfo.swapTotal / 1024) }}G
@@ -99,7 +101,7 @@
:text-inside="true"
:stroke-width="18"
:percentage="usedPercentage"
- :color="handleColor(usedPercentage)"
+ :color="handleUsedColor(usedPercentage)"
/>
{{ driveInfo.usedGb || '--' }}/{{ driveInfo.totalGb || '--' }}G
@@ -229,18 +231,18 @@ const props = defineProps({
showInputCommand: {
required: true,
type: Boolean
+ },
+ pingData: {
+ required: true,
+ type: Object
}
})
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 || {})
@@ -280,6 +282,12 @@ const inputCommandStyle = computed({
}
})
+const pingMs = computed(() => {
+ let curPingData = props.pingData[host.value] || {}
+ if (!curPingData?.success) return false
+ return Number(curPingData?.time).toFixed(0)
+})
+
// const handleSftp = () => {
// sftpStatus.value = !sftpStatus.value
// emit('connect-sftp', sftpStatus.value)
@@ -295,23 +303,17 @@ const handleCopy = async () => {
$message.success({ message: 'success', center: true })
}
-const handleColor = (num) => {
+const handleUsedColor = (num) => {
if (num < 60) return '#13ce66'
if (num < 80) return '#e6a23c'
if (num <= 100) return '#ff4949'
}
-// 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)
-// }
+const handlePingColor = (num) => {
+ if (num < 100) return 'rgba(19, 206, 102, 0.5)' // #13ce66
+ if (num < 250) return 'rgba(230, 162, 60, 0.5)' // #e6a23c
+ return 'rgba(255, 73, 73, 0.5)' // #ff4949
+}
onBeforeUnmount(() => {
socket.value && socket.value.close()
@@ -351,10 +353,9 @@ onBeforeUnmount(() => {
.host-ping {
display: inline-block;
- font-size: 13px;
- color: #009933;
- background-color: #e8fff3;
+ font-size: 10px;
padding: 0 5px;
+ border-radius: 2px;
}
// 分割线title
diff --git a/web/src/views/terminal/components/terminal-tab.vue b/web/src/views/terminal/components/terminal-tab.vue
index 8f96c08..4a91b8c 100644
--- a/web/src/views/terminal/components/terminal-tab.vue
+++ b/web/src/views/terminal/components/terminal-tab.vue
@@ -48,13 +48,14 @@ const props = defineProps({
}
})
-const emit = defineEmits(['inputCommand', 'cdCommand',])
+const emit = defineEmits(['inputCommand', 'cdCommand', 'ping-data',])
const socket = ref(null)
// const commandHistoryList = ref([])
const term = ref(null)
const command = ref('')
const timer = ref(null)
+const pingTimer = ref(null)
const fitAddon = ref(null)
const searchBar = ref(null)
const hasRegisterEvent = ref(false)
@@ -70,6 +71,7 @@ const fontSize = computed(() => props.fontSize)
const background = computed(() => props.background)
const hostObj = computed(() => props.hostObj)
const hostId = computed(() => hostObj.value.id)
+const host = computed(() => hostObj.value.host)
let menuCollapse = computed(() => $store.menuCollapse)
watch(menuCollapse, () => {
@@ -126,6 +128,7 @@ const connectIO = () => {
})
socket.value.on('connect', () => {
console.log('/terminal socket已连接:', hostId.value)
+
socketConnected.value = true
socket.value.emit('create', { hostId: hostId.value, token: token.value })
socket.value.on('connect_terminal_success', () => {
@@ -151,6 +154,14 @@ const connectIO = () => {
// })
})
+ pingTimer.value = setInterval(() => {
+ socket.value.emit('get_ping', host.value)
+ }, 3000)
+ socket.value.emit('get_ping', host.value) // 获取服务端到客户端的ping值
+ socket.value.on('ping_data', (pingMs) => {
+ emit('ping-data', Object.assign({ ip: host.value }, pingMs))
+ })
+
socket.value.on('token_verify_fail', () => {
$notification({ title: 'Error', message: 'token校验失败,请重新登录', type: 'error' })
$router.push('/login')
@@ -412,6 +423,7 @@ onMounted(async () => {
onBeforeUnmount(() => {
socket.value?.close()
window.removeEventListener('resize', handleResize)
+ clearInterval(pingTimer.value)
})
defineExpose({
diff --git a/web/src/views/terminal/components/terminal.vue b/web/src/views/terminal/components/terminal.vue
index eacb303..ba416cb 100644
--- a/web/src/views/terminal/components/terminal.vue
+++ b/web/src/views/terminal/components/terminal.vue
@@ -104,6 +104,7 @@
v-model:show-input-command="showInputCommand"
:host-info="curHost"
:visible="visible"
+ :ping-data="pingData"
@click-input-command="clickInputCommand"
/>
@@ -138,6 +139,7 @@
:font-size="terminalFontSize"
@input-command="terminalInput"
@cd-command="cdCommand"
+ @ping-data="getPingData"
/>
{
}
}
+const getPingData = (data) => {
+ pingData.value[data.ip] = data
+}
+
const tabChange = async (index) => {
await $nextTick()
const curTerminalRef = terminalRefs.value[index]
diff --git a/yarn.lock b/yarn.lock
index e41e50c..86b8906 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2796,6 +2796,13 @@ iconv-lite@0.4.24:
dependencies:
safer-buffer ">= 2.1.2 < 3"
+iconv-lite@^0.6.3:
+ version "0.6.3"
+ resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+ integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+ dependencies:
+ safer-buffer ">= 2.1.2 < 3.0.0"
+
ieee754@^1.1.13:
version "1.2.1"
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -4022,7 +4029,7 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@~2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==