diff --git a/src/layout/components/header.vue b/src/layout/components/header.vue
index a33dcae..c074449 100644
--- a/src/layout/components/header.vue
+++ b/src/layout/components/header.vue
@@ -12,7 +12,7 @@
@@ -35,6 +35,67 @@
{{ serverCount.offline }}
+
+
+
+ 流量
+
+
+
+
+
+ {{ serverStat.transfer.inData.value }}
+
+
+ {{ serverStat.transfer.inData.unit }}
+
+
+
+
+
+ {{ serverStat.transfer.outData.value }}
+
+
+ {{ serverStat.transfer.outData.unit }}
+
+
+
+
+
+
+ 网速
+
+
+
+
+
+ {{ serverStat.netSpeed.inData.value }}
+
+
+ {{ serverStat.netSpeed.inData.unit }}
+
+
+
+
+
+ {{ serverStat.netSpeed.outData.value }}
+
+
+ {{ serverStat.netSpeed.outData.unit }}
+
+
+
+
+
@@ -56,6 +117,8 @@ import {
useRoute,
useRouter,
} from 'vue-router';
+import * as hostUtils from '@/utils/host';
+
import config from '@/config';
const store = useStore();
@@ -72,8 +135,101 @@ const headerStyle = computed(() => {
return style;
});
+const showServerCount = config.nazhua.hideNavbarServerCount !== true;
const serverCount = computed(() => store.state.serverCount);
+const showServerStat = config.nazhua.hideNavbarServerStat !== true;
+const serverStat = computed(() => {
+ const transfer = {
+ in: 0,
+ inData: {
+ value: 0,
+ unit: '',
+ },
+ out: 0,
+ outData: {
+ value: 0,
+ unit: '',
+ },
+ };
+ const netSpeed = {
+ in: 0,
+ inData: {
+ value: 0,
+ unit: '',
+ },
+ out: 0,
+ outData: {
+ value: 0,
+ unit: '',
+ },
+ };
+ if (store.state.serverList.length) {
+ store.state.serverList.forEach((server) => {
+ if (server.online === 1 && server.State) {
+ transfer.in += server.State.NetInTransfer;
+ transfer.out += server.State.NetOutTransfer;
+ netSpeed.in += server.State.NetInSpeed;
+ netSpeed.out += server.State.NetOutSpeed;
+ }
+ });
+ }
+ const calcInTransfer = hostUtils.calcBinary(transfer.in);
+ if (calcInTransfer.t > 1) {
+ transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
+ transfer.inData.unit = 'T';
+ } else if (calcInTransfer.g > 1) {
+ transfer.inData.value = (calcInTransfer.g).toFixed(1) * 1;
+ transfer.inData.unit = 'G';
+ } else if (calcInTransfer.m > 1) {
+ transfer.inData.value = (calcInTransfer.m).toFixed(1) * 1;
+ transfer.inData.unit = 'M';
+ } else {
+ transfer.inData.value = calcInTransfer.value;
+ transfer.inData.unit = 'K';
+ }
+ const calcOutTransfer = hostUtils.calcBinary(transfer.out);
+ if (calcOutTransfer.t > 1) {
+ transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
+ transfer.outData.unit = 'T';
+ } else if (calcOutTransfer.g > 1) {
+ transfer.outData.value = (calcOutTransfer.g).toFixed(1) * 1;
+ transfer.outData.unit = 'G';
+ } else if (calcOutTransfer.m > 1) {
+ transfer.outData.value = (calcOutTransfer.m).toFixed(1) * 1;
+ transfer.outData.unit = 'M';
+ } else {
+ transfer.outData.value = calcOutTransfer.value;
+ transfer.outData.unit = 'K';
+ }
+ const calcNetInSpeed = hostUtils.calcBinary(netSpeed.in);
+ if (calcNetInSpeed.g > 1) {
+ netSpeed.inData.value = (calcNetInSpeed.g).toFixed(1) * 1;
+ netSpeed.inData.unit = 'G';
+ } else if (calcNetInSpeed.m > 1) {
+ netSpeed.inData.value = (calcNetInSpeed.m).toFixed(1) * 1;
+ netSpeed.inData.unit = 'M';
+ } else {
+ netSpeed.inData.value = (calcNetInSpeed.k).toFixed(1) * 1;
+ netSpeed.inData.unit = 'K';
+ }
+ const calcNetOutSpeed = hostUtils.calcBinary(netSpeed.out);
+ if (calcNetOutSpeed.g > 1) {
+ netSpeed.outData.value = (calcNetOutSpeed.g).toFixed(1) * 1;
+ netSpeed.outData.unit = 'G';
+ } else if (calcNetOutSpeed.m > 1) {
+ netSpeed.outData.value = (calcNetOutSpeed.m).toFixed(1) * 1;
+ netSpeed.outData.unit = 'M';
+ } else {
+ netSpeed.outData.value = (calcNetOutSpeed.k).toFixed(1) * 1;
+ netSpeed.outData.unit = 'K';
+ }
+ return {
+ transfer,
+ netSpeed,
+ };
+});
+
const title = ref(config.nazhua.title);
function toHome() {
@@ -111,7 +267,7 @@ onMounted(() => {
.server-count-group {
display: flex;
- gap: 20px;
+ gap: 10px;
line-height: 30px;
}
@@ -149,5 +305,44 @@ onMounted(() => {
padding: 10px 20px;
transition: width 0.3s;
}
+
+ .right-box {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+ color: #ddd;
+ }
+
+ .server-stat-group {
+ min-width: 160px;
+ }
+
+ .server-stat {
+ display: flex;
+ gap: 8px;
+ line-height: 16px;
+ font-size: 12px;
+
+ .server-stat-content {
+ flex: 1;
+ display: flex;
+ }
+
+ .server-stat-item {
+ flex: 1;
+ }
+
+ .server-stat-item--in {
+ .text-value {
+ color: #ffc93c;
+ }
+ }
+
+ .server-stat-item--out {
+ .text-value {
+ color: #90f2ff;
+ }
+ }
+ }
}