Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@miuss
miuss committed Dec 5, 2024
1 parent b79638e commit a093b1d
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 26 deletions.
49 changes: 39 additions & 10 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -32,6 +32,8 @@ const handleChangeDark = () => {
const area = ref([])
const selectArea = ref('all')
const type = ref('all')
const data = ref([])
const selectHost = ref('')
Expand All @@ -47,25 +49,42 @@ 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 {
total: host.value.length,
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
}
})
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -160,7 +179,7 @@ const progressStatus = (value) => {
} else if (value < 90) {
return 'warning';
} else {
return 'error';
return 'danger';
}
}
Expand Down Expand Up @@ -207,6 +226,11 @@ const handleClose = () => {
deleteVisible.value = false
}
const handleChangeType = (value) => {
type.value = value
}
provide('handleChangeType', handleChangeType)
</script>

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
76 changes: 61 additions & 15 deletions src/components/StatsCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,34 @@
<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>

<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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 11 additions & 1 deletion src/utils/utils.js
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
Expand Down

0 comments on commit a093b1d

Please sign in to comment.