From 3fed458e3b4606db1969111cd96c7452473b81d3 Mon Sep 17 00:00:00 2001
From: chaos-zhu <ggchaos1022@gmail.com>
Date: Wed, 14 Aug 2024 11:46:51 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E7=BB=88=E7=AB=AF=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E6=96=B0=E5=A2=9E=E4=BA=A4=E6=8D=A2=E5=86=85=E5=AD=98?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/terminal/components/info-side.vue   | 32 +++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/src/views/terminal/components/info-side.vue b/web/src/views/terminal/components/info-side.vue
index 677db0a..6c7b175 100644
--- a/web/src/views/terminal/components/info-side.vue
+++ b/web/src/views/terminal/components/info-side.vue
@@ -73,6 +73,22 @@
           {{ $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">
@@ -197,10 +213,9 @@
   </div>
 </template>
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, getCurrentInstance } from 'vue'
-import socketIo from 'socket.io-client'
+import { ref, onBeforeUnmount, computed, getCurrentInstance } from 'vue'
 
-const { proxy: { $store, $serviceURI, $message, $notification, $tools } } = getCurrentInstance()
+const { proxy: { $message, $tools } } = getCurrentInstance()
 
 const props = defineProps({
   hostInfo: {
@@ -232,6 +247,7 @@ 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(() => {
@@ -241,6 +257,10 @@ const netstatInfo = computed(() => {
 // 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
@@ -293,12 +313,6 @@ const getHostPing = () => {
   }, 3000)
 }
 
-onMounted(() => {
-  // name.value = $router.currentRoute.value.query.name || ''
-  // if (!props.host || !name.value) return $message.error('参数错误')
-  // connectIO()
-})
-
 onBeforeUnmount(() => {
   socket.value && socket.value.close()
   pingTimer.value && clearInterval(pingTimer.value)