Skip to content

Commit a093b1d

Browse files
author
Miuss
committed
update
1 parent b79638e commit a093b1d

File tree

3 files changed

+111
-26
lines changed

3 files changed

+111
-26
lines changed

‎src/App.vue‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup>
2-
import {computed, onMounted, ref} from "vue";
2+
import {computed, onMounted, provide, ref} from "vue";
33
import moment from 'moment'
44
import CPU from "@/components/CPU.vue";
55
import Mem from "@/components/Mem.vue";
@@ -32,6 +32,8 @@ const handleChangeDark = () => {
3232
const area = ref([])
3333
const selectArea = ref('all')
3434
35+
const type = ref('all')
36+
3537
const data = ref([])
3638
3739
const selectHost = ref('')
@@ -47,25 +49,42 @@ const host = computed(() => {
4749
if (selectArea.value === 'all') {
4850
return data.value
4951
}
52+
5053
return data.value.filter(item => item.Host.Name.slice(0, 2) === selectArea.value)
5154
})
5255
56+
const hosts = computed(() => {
57+
if (type.value === 'all') {
58+
return host.value
59+
} else if (type.value === 'online') {
60+
return host.value.filter(item => item.status)
61+
} else {
62+
return host.value.filter(item => !item.status)
63+
}
64+
})
65+
5366
const stats = computed(() => {
5467
const online = host.value.filter(item => item.status)
5568
let bandwidth_up = 0
5669
let bandwidth_down = 0
70+
let traffic_up = 0
71+
let traffic_down = 0
5772
5873
host.value.forEach((item) => {
59-
bandwidth_up += item.State.NetInSpeed
60-
bandwidth_down += item.State.NetOutSpeed
74+
bandwidth_up += item.State.NetOutSpeed
75+
bandwidth_down += item.State.NetInSpeed
76+
traffic_up += item.State.NetOutTransfer
77+
traffic_down += item.State.NetInTransfer
6178
})
6279
6380
return {
6481
total: host.value.length,
6582
online: online.length,
6683
offline: host.value.length - online.length,
6784
bandwidth_up: bandwidth_up,
68-
bandwidth_down: bandwidth_down
85+
bandwidth_down: bandwidth_down,
86+
traffic_up: traffic_up,
87+
traffic_down: traffic_down
6988
}
7089
})
7190
@@ -105,7 +124,7 @@ const initScoket = async () => {
105124
}
106125
}
107126
108-
if (charts.value[host.Host.Name].cpu.length == 60) {
127+
if (charts.value[host.Host.Name].cpu.length == 2) {
109128
charts.value[host.Host.Name].cpu = charts.value[host.Host.Name].cpu.slice(1)
110129
charts.value[host.Host.Name].mem = charts.value[host.Host.Name].mem.slice(1)
111130
charts.value[host.Host.Name].net_in = charts.value[host.Host.Name].net_in.slice(1)
@@ -160,7 +179,7 @@ const progressStatus = (value) => {
160179
} else if (value < 90) {
161180
return 'warning';
162181
} else {
163-
return 'error';
182+
return 'danger';
164183
}
165184
}
166185
@@ -207,6 +226,11 @@ const handleClose = () => {
207226
deleteVisible.value = false
208227
}
209228
229+
const handleChangeType = (value) => {
230+
type.value = value
231+
}
232+
233+
provide('handleChangeType', handleChangeType)
210234
211235
</script>
212236

@@ -235,9 +259,9 @@ const handleClose = () => {
235259
<span :class="`flag-icon flag-icon-${item.replace('UK', 'GB').toLowerCase()}`" style="margin-right: 3px;"></span> {{item}}
236260
</div>
237261
</div>
238-
<StatsCard :stats="stats" />
262+
<StatsCard :type="type" :stats="stats" @handleChangeType="handleChangeType" />
239263
<div class="monitor-card">
240-
<div class="monitor-item" :class="selectHost === item.Host.Name ? 'is-active' : ''" v-for="(item, index) in host" @click="handleSelectHost(item.Host.Name)" :key="index">
264+
<div class="monitor-item" :class="selectHost === item.Host.Name ? 'is-active' : ''" v-for="(item, index) in hosts" @click="handleSelectHost(item.Host.Name)" :key="index">
241265
<div class="name">
242266
<div class="title">
243267
<span :class="`flag-icon flag-icon-${item.Host.Name.slice(0, 2).replace('UK', 'GB').toLowerCase()}`"></span>
@@ -262,6 +286,11 @@ const handleClose = () => {
262286
<div class="monitor-item-value">{{(item.State.MemUsed / item.Host.MemTotal * 100).toFixed(2) + '%'}}</div>
263287
<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" />
264288
</div>
289+
<div class="mem">
290+
<div class="monitor-item-title">虚拟内存(Swap)</div>
291+
<div class="monitor-item-value">{{item.Host.SwapTotal === 0 ? (0).toFixed(2)+'%' : (item.State.SwapUsed / item.Host.SwapTotal * 100).toFixed(2) + '%'}}</div>
292+
<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" />
293+
</div>
265294
<div class="network">
266295
<div class="monitor-item-title">网络速度（IN|OUT）</div>
267296
<div class="monitor-item-value">{{`${formatBytes(item.State.NetInSpeed)}/s | ${formatBytes(item.State.NetOutSpeed)}/s`}}</div>
@@ -315,7 +344,7 @@ const handleClose = () => {
315344
</div>
316345
<div class="detail-item">
317346
<div class="name">虚拟内存(Swap)</div>
318-
<div class="value">{{formatBytes(item.State.SwapUsed)}}</div>
347+
<div class="value">{{formatBytes(item.State.SwapUsed)}} / {{formatBytes(item.Host.SwapTotal)}}</div>
319348
</div>
320349
<div class="detail-item">
321350
<div class="name">网络速度（IN|OUT）</div>
@@ -327,7 +356,7 @@ const handleClose = () => {
327356
</div>
328357
<div class="detail-item">
329358
<div class="name">流量使用↑|↓</div>
330-
<div class="value">{{formatBytes(item.State.NetInTransfer)}} | {{formatBytes(item.State.NetOutTransfer)}}</div>
359+
<div class="value">{{formatBytes(item.State.NetOutTransfer)}} | {{formatBytes(item.State.NetInTransfer)}}</div>
331360
</div>
332361
<div class="detail-item">
333362
<div class="name">开机时间</div>

‎src/components/StatsCard.vue‎

Lines changed: 61 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,34 @@
11
<script setup>
2-
import {formatBytes} from "../utils/utils.js";
2+
import {formatBandwithBytes, formatBytes} from "../utils/utils.js";
3+
import {inject} from "vue";
4+
5+
const handleChangeType = inject('handleChangeType')
6+
7+
const { stats, type } = defineProps({
8+
stats: {
9+
type: Object,
10+
default: () => ({
11+
total: 0,
12+
online: 0,
13+
offline: 0,
14+
bandwidth_up: 0,
15+
bandwidth_down: 0,
16+
}),
17+
},
18+
type: {
19+
type: String,
20+
default: "all",
21+
}
22+
})
323
4-
const { stats } = defineProps(['stats'])
524
</script>
625

726
<template>
827

928
<div class="hero">
1029
<a-row :gutter="20">
1130
<a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
12-
<div class="hero-card">
31+
<div class="hero-card all" :class="type === 'all' ? 'is-active' :''" @click="handleChangeType('all')">
1332
<div class="title">服务器总数</div>
1433
<div class="value">
1534
<div class="status" style="background: #005fe7;"></div>
@@ -18,7 +37,7 @@ const { stats } = defineProps(['stats'])
1837
</div>
1938
</a-col>
2039
<a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
21-
<div class="hero-card">
40+
<div class="hero-card online" :class="type === 'online' ? 'is-active' :''" @click="handleChangeType('online')">
2241
<div class="title">在线服务器</div>
2342
<div class="value">
2443
<div class="status" style="background: #1fb416;"></div>
@@ -27,7 +46,7 @@ const { stats } = defineProps(['stats'])
2746
</div>
2847
</a-col>
2948
<a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
30-
<div class="hero-card">
49+
<div class="hero-card offline" :class="type === 'offline' ? 'is-active' :''" @click="handleChangeType('offline')">
3150
<div class="title">离线服务器</div>
3251
<div class="value">
3352
<div class="status" style="background: #b41616;"></div>
@@ -37,13 +56,24 @@ const { stats } = defineProps(['stats'])
3756
</a-col>
3857
<a-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" :sl="6">
3958
<div class="hero-card">
40-
<div class="title">实时带宽</div>
41-
<div class="value">
42-
<icon-arrow-up style="font-size: 20px;" />
43-
<span style="font-size: 16px;"> {{formatBytes(stats.bandwidth_up)}}/s</span>
44-
45-
<icon-arrow-down style="font-size: 20px;" />
46-
<span style="font-size: 16px;">{{formatBytes(stats.bandwidth_down)}}/s</span>
59+
<div class="title">网络情况</div>
60+
<div class="value" style="display: block;">
61+
<div>
62+
流量
63+
<icon-arrow-up style="font-size: 14px;color: #d09453;" />
64+
<span style="font-size: 14px;color: #d09453;"> {{formatBytes(stats.traffic_up)}}</span>
65+
&nbsp;
66+
<icon-arrow-down style="font-size: 14px;color: #9a5fcd;" />
67+
<span style="font-size: 14px;color: #9a5fcd;">{{formatBytes(stats.traffic_down)}}</span>
68+
</div>
69+
<div>
70+
带宽
71+
<icon-up-circle style="font-size: 14px;" />
72+
<span style="font-size: 14px;"> {{formatBandwithBytes(stats.bandwidth_up)}}</span>
73+
&nbsp;
74+
<icon-down-circle style="font-size: 14px;" />
75+
<span style="font-size: 14px;"> {{formatBandwithBytes(stats.bandwidth_down)}}</span>
76+
</div>
4777
</div>
4878
</div>
4979
</a-col>
@@ -58,11 +88,27 @@ const { stats } = defineProps(['stats'])
5888
.hero-card {
5989
margin-bottom: 20px;
6090
padding: 12px 24px;
61-
border: 1px solid #e5e5e5;
91+
border: 2px solid #e5e5e5;
6292
border-radius: 6px;
6393
background: #ffffff;
64-
min-height: 62px;
94+
min-height: 72px;
6595
box-shadow: 0 2px 4px 0 rgba(133, 138, 180, 0.14);
96+
cursor: pointer;
97+
98+
&.is-active,
99+
&:hover {
100+
&.all {
101+
border-color: #005fe7;
102+
}
103+
104+
&.online {
105+
border-color: #1fb416;
106+
}
107+
108+
&.offline {
109+
border-color: #b41616;
110+
}
111+
}
66112
67113
.title {
68114
margin-top: 6px;
@@ -92,7 +138,7 @@ const { stats } = defineProps(['stats'])
92138
93139
body[arco-theme='dark'] {
94140
.hero-card {
95-
border: 1px solid rgb(255 255 255 / 16%);
141+
border: 2px solid rgb(255 255 255 / 16%);
96142
box-shadow: none;
97143
background-color: #000000;
98144
color: #ffffff;

‎src/utils/utils.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// 格式化字节单位
22
export const formatBytes = (bytes) => {
3-
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
3+
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
44
let i = 0;
55
while (bytes >= 1024 && i < units.length - 1) {
66
bytes /= 1024;
@@ -9,6 +9,16 @@ export const formatBytes = (bytes) => {
99
return bytes.toFixed(2) + ' ' + units[i];
1010
}
1111

12+
export const formatBandwithBytes = (bytes) => {
13+
const units = ['bps', 'Kbps', 'Mbps', 'Gbps', 'Tbps', 'Pbps', 'Ebps', 'Zbps', 'Ybps'];
14+
let i = 0;
15+
while (bytes >= 1024 && i < units.length - 1) {
16+
bytes /= 1024;
17+
i++;
18+
}
19+
return (bytes*8).toFixed(2) + ' ' + units[i];
20+
}
21+
1222
// 格式化系统时间为小时:分钟:秒
1323
export const formatTime = (seconds) => {
1424
const hours = Math.floor(seconds / 3600);

0 commit comments

Comments
 (0)