chickliu/nazhua
1
0
Fork 0
mirror of https://github.com/hi2shark/nazhua.git synced 2026-01-18 10:10:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ 顶部导航条显示流量和网速

Browse Source
This commit is contained in:
hi2hi 2024-12-04 02:42:51 +00:00
parent 1455ea838f
commit abbf7afe04
1 changed files with 197 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/layout/components/header.vue
View File

@ -12,7 +12,7 @@
</div>
<div class="right-box">
<div
v-if="serverCount?.total"
v-if="serverCount?.total && showServerCount"
class="server-count-group"
>
<span class="server-count server-count--total">
@ -35,6 +35,67 @@
<span class="value">{{ serverCount.offline }}</span>
</span>
</div>
<div
v-if="serverStat && showServerStat"
class="server-stat-group"
>
<div
v-if="serverStat.transfer"
class="server-stat server-stat--transfer"
>
<span class="server-stat-label">
<span class="text">流量</span>
</span>
<div class="server-stat-content">
<span class="server-stat-item server-stat-item--in">
<span class="ri-download-line" />
<span class="text-value">
{{ serverStat.transfer.inData.value }}
</span>
<span class="text-unit">
{{ serverStat.transfer.inData.unit }}
</span>
</span>
<span class="server-stat-item server-stat-item--out">
<span class="ri-upload-line" />
<span class="text-value">
{{ serverStat.transfer.outData.value }}
</span>
<span class="text-unit">
{{ serverStat.transfer.outData.unit }}
</span>
</span>
</div>
</div>
<div
v-if="serverStat.netSpeed"
class="server-stat server-stat--net-speed"
>
<span class="server-stat-label">
<span class="text">网速</span>
</span>
<div class="server-stat-content">
<span class="server-stat-item server-stat-item--in">
<span class="ri-arrow-down-line" />
<span class="text-value">
{{ serverStat.netSpeed.inData.value }}
</span>
<span class="text-unit">
{{ serverStat.netSpeed.inData.unit }}
</span>
</span>
<span class="server-stat-item server-stat-item--out">
<span class="ri-arrow-up-line" />
<span class="text-value">
{{ serverStat.netSpeed.outData.value }}
</span>
<span class="text-unit">
{{ serverStat.netSpeed.outData.unit }}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
@ -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;
}
}
}
}
</style>