From a093b1dfdc272f6c8fdabd525359de3b8b56dbcf Mon Sep 17 00:00:00 2001
From: Miuss <miusssss@qq.com>
Date: Thu, 5 Dec 2024 17:20:25 +0800
Subject: [PATCH] update

---
 src/App.vue                  | 49 ++++++++++++++++++-----
 src/components/StatsCard.vue | 76 +++++++++++++++++++++++++++++-------
 src/utils/utils.js           | 12 +++++-
 3 files changed, 111 insertions(+), 26 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index feb1364..b5bea93 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref} from "vue";
+import {computed, onMounted, provide, ref} from "vue";
 import moment from 'moment'
 import CPU from "@/components/CPU.vue";
 import Mem from "@/components/Mem.vue";
@@ -32,6 +32,8 @@ const handleChangeDark = () => {
 const area = ref([])
 const selectArea = ref('all')
 
+const type = ref('all')
+
 const data = ref([])
 
 const selectHost = ref('')
@@ -47,17 +49,32 @@ const host = computed(() => {
   if (selectArea.value === 'all') {
     return data.value
   }
+
   return data.value.filter(item => item.Host.Name.slice(0, 2) === selectArea.value)
 })
 
+const hosts = computed(() => {
+  if (type.value === 'all') {
+    return host.value
+  } else if (type.value === 'online') {
+    return host.value.filter(item => item.status)
+  } else {
+    return host.value.filter(item => !item.status)
+  }
+})
+
 const stats = computed(() => {
   const online = host.value.filter(item => item.status)
   let bandwidth_up = 0
   let bandwidth_down = 0
+  let traffic_up = 0
+  let traffic_down = 0
 
   host.value.forEach((item) => {
-    bandwidth_up += item.State.NetInSpeed
-    bandwidth_down += item.State.NetOutSpeed
+    bandwidth_up += item.State.NetOutSpeed
+    bandwidth_down += item.State.NetInSpeed
+    traffic_up += item.State.NetOutTransfer
+    traffic_down += item.State.NetInTransfer
   })
 
   return {
@@ -65,7 +82,9 @@ const stats = computed(() => {
     online: online.length,
     offline: host.value.length - online.length,
     bandwidth_up: bandwidth_up,
-    bandwidth_down: bandwidth_down
+    bandwidth_down: bandwidth_down,
+    traffic_up: traffic_up,
+    traffic_down: traffic_down
   }
 })
 
@@ -105,7 +124,7 @@ const initScoket = async () => {
           }
         }
 
-        if (charts.value[host.Host.Name].cpu.length == 60) {
+        if (charts.value[host.Host.Name].cpu.length == 2) {
           charts.value[host.Host.Name].cpu = charts.value[host.Host.Name].cpu.slice(1)
           charts.value[host.Host.Name].mem = charts.value[host.Host.Name].mem.slice(1)
           charts.value[host.Host.Name].net_in = charts.value[host.Host.Name].net_in.slice(1)
@@ -160,7 +179,7 @@ const progressStatus = (value) => {
   } else if (value < 90) {
     return 'warning';
   } else {
-    return 'error';
+    return 'danger';
   }
 }
 
@@ -207,6 +226,11 @@ const handleClose = () => {
   deleteVisible.value = false
 }
 
+const handleChangeType = (value) => {
+  type.value = value
+}
+
+provide('handleChangeType', handleChangeType)
 
 </script>
 
@@ -235,9 +259,9 @@ const handleClose = () => {
         <span :class="`flag-icon flag-icon-${item.replace('UK', 'GB').toLowerCase()}`" style="margin-right: 3px;"></span> {{item}}
       </div>
     </div>
-    <StatsCard :stats="stats" />
+    <StatsCard :type="type" :stats="stats" @handleChangeType="handleChangeType" />
     <div class="monitor-card">
-      <div class="monitor-item" :class="selectHost === item.Host.Name ? 'is-active' : ''" v-for="(item, index) in host" @click="handleSelectHost(item.Host.Name)" :key="index">
+      <div class="monitor-item" :class="selectHost === item.Host.Name ? 'is-active' : ''" v-for="(item, index) in hosts" @click="handleSelectHost(item.Host.Name)" :key="index">
         <div class="name">
           <div class="title">
             <span :class="`flag-icon flag-icon-${item.Host.Name.slice(0, 2).replace('UK', 'GB').toLowerCase()}`"></span>
@@ -262,6 +286,11 @@ const handleClose = () => {
           <div class="monitor-item-value">{{(item.State.MemUsed / item.Host.MemTotal * 100).toFixed(2) + '%'}}</div>
           <a-progress class="monitor-item-progress" :status="progressStatus(item.State.MemUsed / item.Host.MemTotal * 100)" :percent="item.State.MemUsed / item.Host.MemTotal" :show-text="false" style="width: 60px" />
         </div>
+        <div class="mem">
+          <div class="monitor-item-title">虚拟内存(Swap)</div>
+          <div class="monitor-item-value">{{item.Host.SwapTotal === 0 ? (0).toFixed(2)+'%' : (item.State.SwapUsed / item.Host.SwapTotal * 100).toFixed(2) + '%'}}</div>
+          <a-progress class="monitor-item-progress" :status="progressStatus(item.State.SwapUsed / item.Host.SwapTotal * 100)" :percent="item.Host.SwapTotal === 0 ? (0) : (item.State.SwapUsed / item.Host.SwapTotal)" :show-text="false" style="width: 60px" />
+        </div>
         <div class="network">
           <div class="monitor-item-title">网络速度（IN|OUT）</div>
           <div class="monitor-item-value">{{`${formatBytes(item.State.NetInSpeed)}/s | ${formatBytes(item.State.NetOutSpeed)}/s`}}</div>
@@ -315,7 +344,7 @@ const handleClose = () => {
                 </div>
                 <div class="detail-item">
                   <div class="name">虚拟内存(Swap)</div>
-                  <div class="value">{{formatBytes(item.State.SwapUsed)}}</div>
+                  <div class="value">{{formatBytes(item.State.SwapUsed)}} / {{formatBytes(item.Host.SwapTotal)}}</div>
                 </div>
                 <div class="detail-item">
                   <div class="name">网络速度（IN|OUT）</div>
@@ -327,7 +356,7 @@ const handleClose = () => {
                 </div>
                 <div class="detail-item">
                   <div class="name">流量使用↑|↓</div>
-                  <div class="value">{{formatBytes(item.State.NetInTransfer)}} | {{formatBytes(item.State.NetOutTransfer)}}</div>
+                  <div class="value">{{formatBytes(item.State.NetOutTransfer)}} | {{formatBytes(item.State.NetInTransfer)}}</div>
                 </div>
                 <div class="detail-item">
                   <div class="name">开机时间</div>
diff --git a/src/components/StatsCard.vue b/src/components/StatsCard.vue
index 195378f..0275e04 100644
--- a/src/components/StatsCard.vue
+++ b/src/components/StatsCard.vue
@@ -1,7 +1,26 @@
 <script setup>
-import {formatBytes} from "../utils/utils.js";
+import {formatBandwithBytes, formatBytes} from "../utils/utils.js";
+import {inject} from "vue";
+
+const handleChangeType = inject('handleChangeType')
+
+const { stats, type } = defineProps({
+  stats: {
+    type: Object,
+    default: () => ({
+      total: 0,
+      online: 0,
+      offline: 0,
+      bandwidth_up: 0,
+      bandwidth_down: 0,
+    }),
+  },
+  type: {
+    type: String,
+    default: "all",
+  }
+})
 
-const { stats } = defineProps(['stats'])
 </script>
 
 <template>
@@ -9,7 +28,7 @@ const { stats } = defineProps(['stats'])
   <div class="hero">
     <a-row :gutter="20">
       <a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
-        <div class="hero-card">
+        <div class="hero-card all" :class="type === 'all' ? 'is-active' :''" @click="handleChangeType('all')">
           <div class="title">服务器总数</div>
           <div class="value">
             <div class="status" style="background: #005fe7;"></div>
@@ -18,7 +37,7 @@ const { stats } = defineProps(['stats'])
         </div>
       </a-col>
       <a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
-        <div class="hero-card">
+        <div class="hero-card online" :class="type === 'online' ? 'is-active' :''" @click="handleChangeType('online')">
           <div class="title">在线服务器</div>
           <div class="value">
             <div class="status" style="background: #1fb416;"></div>
@@ -27,7 +46,7 @@ const { stats } = defineProps(['stats'])
         </div>
       </a-col>
       <a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
-        <div class="hero-card">
+        <div class="hero-card offline" :class="type === 'offline' ? 'is-active' :''" @click="handleChangeType('offline')">
           <div class="title">离线服务器</div>
           <div class="value">
             <div class="status" style="background: #b41616;"></div>
@@ -37,13 +56,24 @@ const { stats } = defineProps(['stats'])
       </a-col>
       <a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
         <div class="hero-card">
-          <div class="title">实时带宽</div>
-          <div class="value">
-            <icon-arrow-up style="font-size: 20px;" />
-            <span style="font-size: 16px;"> {{formatBytes(stats.bandwidth_up)}}/s</span>
-
-            <icon-arrow-down style="font-size: 20px;" />
-            <span style="font-size: 16px;">{{formatBytes(stats.bandwidth_down)}}/s</span>
+          <div class="title">网络情况</div>
+          <div class="value" style="display: block;">
+            <div>
+              流量
+              <icon-arrow-up style="font-size: 14px;color: #d09453;" />
+              <span style="font-size: 14px;color: #d09453;"> {{formatBytes(stats.traffic_up)}}</span>
+              &nbsp;
+              <icon-arrow-down style="font-size: 14px;color: #9a5fcd;" />
+              <span style="font-size: 14px;color: #9a5fcd;">{{formatBytes(stats.traffic_down)}}</span>
+            </div>
+            <div>
+              带宽
+              <icon-up-circle style="font-size: 14px;" />
+              <span style="font-size: 14px;"> {{formatBandwithBytes(stats.bandwidth_up)}}</span>
+              &nbsp;
+              <icon-down-circle style="font-size: 14px;" />
+              <span style="font-size: 14px;"> {{formatBandwithBytes(stats.bandwidth_down)}}</span>
+            </div>
           </div>
         </div>
       </a-col>
@@ -58,11 +88,27 @@ const { stats } = defineProps(['stats'])
   .hero-card {
     margin-bottom: 20px;
     padding: 12px 24px;
-    border: 1px solid #e5e5e5;
+    border: 2px solid #e5e5e5;
     border-radius: 6px;
     background: #ffffff;
-    min-height: 62px;
+    min-height: 72px;
     box-shadow: 0 2px 4px 0 rgba(133, 138, 180, 0.14);
+    cursor: pointer;
+
+    &.is-active,
+    &:hover {
+      &.all {
+        border-color: #005fe7;
+      }
+
+      &.online {
+        border-color: #1fb416;
+      }
+
+      &.offline {
+        border-color: #b41616;
+      }
+    }
 
     .title {
       margin-top: 6px;
@@ -92,7 +138,7 @@ const { stats } = defineProps(['stats'])
 
 body[arco-theme='dark'] {
   .hero-card {
-    border: 1px solid rgb(255 255 255 / 16%);
+    border: 2px solid rgb(255 255 255 / 16%);
     box-shadow: none;
     background-color: #000000;
     color: #ffffff;
diff --git a/src/utils/utils.js b/src/utils/utils.js
index f5537ce..460d6db 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,6 +1,6 @@
 // 格式化字节单位
 export const formatBytes = (bytes) => {
-    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
     let i = 0;
     while (bytes >= 1024 && i < units.length - 1) {
         bytes /= 1024;
@@ -9,6 +9,16 @@ export const formatBytes = (bytes) => {
     return bytes.toFixed(2) + ' ' + units[i];
 }
 
+export const formatBandwithBytes = (bytes) => {
+    const units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'];
+    let i = 0;
+    while (bytes >= 1024 && i < units.length - 1) {
+        bytes /= 1024;
+        i++;
+    }
+    return (bytes*8).toFixed(2) + ' ' + units[i];
+}
+
 // 格式化系统时间为小时:分钟:秒
 export const formatTime = (seconds) => {
     const hours = Math.floor(seconds / 3600);