-
+
+
+
-
- {{ cpuAndMemAndDisk || '-' }}
-
-
-
-
@@ -62,6 +78,7 @@ import {
import * as hostUtils from '@/utils/host';
import handleServerInfo from '@/views/composable/server-info';
+import ServerListColumn from './server-list-column.vue';
import ServerListItemStatus from './server-list-item-status.vue';
import ServerListItemRealTime from './server-list-item-real-time.vue';
import ServerListItemBill from './server-list-item-bill.vue';
@@ -82,7 +99,7 @@ const { cpuAndMemAndDisk } = handleServerInfo({
props,
});
-const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconClassName(props.info?.Host?.Platform));
+const platformSystemLabel = computed(() => hostUtils.getSystemOSLabel(props.info?.Host?.Platform));
function openDetail() {
router.push({
@@ -99,7 +116,7 @@ function openDetail() {
--list-item-height: 64px;
--list-item-border-radius: 8px;
--list-item-gap: 10px;
- --list-item-padding: 20px;
+ --list-item-padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
@@ -110,6 +127,25 @@ function openDetail() {
&--offline {
filter: grayscale(1);
}
+
+ .row-left-box,
+ .row-center-box,
+ .row-right-box {
+ display: flex;
+ align-items: center;
+ gap: var(--list-item-gap);
+ }
+
+ .row-left-box,
+ .row-right-box {
+ flex: 1;
+ }
+ .row-right-box {
+ justify-content: flex-end;
+ }
+ .row-center-box {
+ justify-content: center;
+ }
}
.list-column-item {
@@ -120,6 +156,7 @@ function openDetail() {
&--server-flag {
--server-flag-size: 24px;
width: calc(var(--server-flag-size) * 1.5);
+ margin-left: 20px;
.server-flag {
width: calc(var(--server-flag-size) * 1.5);
height: var(--server-flag-size);
@@ -128,7 +165,7 @@ function openDetail() {
}
}
&--server-name {
- flex: 1;
+ width: 200px;
.server-name {
height: 32px;
@@ -140,27 +177,5 @@ function openDetail() {
overflow: hidden;
}
}
- &--server-system {
- width: 24px;
- justify-content: center;
- font-size: 24px;
- }
- &--cpu-mem {
- width: 100px;
- .core-mem {
- height: 30px;
- line-height: 32px;
- font-size: 16px;
- width: 100%;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- // 针对1440px以下的屏幕
- @media screen and (max-width: 1440px) {
- width: 80px;
- }
- }
}
diff --git a/src/views/composable/server-real-time.js b/src/views/composable/server-real-time.js
index 87079e5..7c22421 100644
--- a/src/views/composable/server-real-time.js
+++ b/src/views/composable/server-real-time.js
@@ -122,6 +122,44 @@ export default (params) => {
return result;
});
+ const inTransfer = computed(() => {
+ const inStats = hostUtils.calcBinary(props.info?.State?.NetInTransfer || 0);
+ const result = {
+ value: 0,
+ unit: '',
+ };
+ if (inStats.g > 1) {
+ result.value = (inStats.g).toFixed(1) * 1;
+ result.unit = 'G';
+ } else if (inStats.m > 1) {
+ result.value = (inStats.m).toFixed(1) * 1;
+ result.unit = 'M';
+ } else {
+ result.value = (inStats.k).toFixed(1) * 1;
+ result.unit = 'K';
+ }
+ return result;
+ });
+
+ const outTransfer = computed(() => {
+ const outStats = hostUtils.calcBinary(props.info?.State?.NetOutTransfer || 0);
+ const result = {
+ value: 0,
+ unit: '',
+ };
+ if (outStats.g > 1) {
+ result.value = (outStats.g).toFixed(1) * 1;
+ result.unit = 'G';
+ } else if (outStats.m > 1) {
+ result.value = (outStats.m).toFixed(1) * 1;
+ result.unit = 'M';
+ } else {
+ result.value = (outStats.k).toFixed(1) * 1;
+ result.unit = 'K';
+ }
+ return result;
+ });
+
/**
* 计算入向网速
*/
@@ -184,6 +222,22 @@ export default (params) => {
unit: transfer.value?.unit,
show: validate.isSet(transfer.value?.value),
};
+ case 'inTransfer':
+ return {
+ key,
+ label: '入网流量',
+ value: inTransfer.value?.value,
+ unit: inTransfer.value?.unit,
+ show: validate.isSet(inTransfer.value?.value),
+ };
+ case 'outTransfer':
+ return {
+ key,
+ label: '出网流量',
+ value: outTransfer.value?.value,
+ unit: outTransfer.value?.unit,
+ show: validate.isSet(outTransfer.value?.value),
+ };
case 'inSpeed':
return {
key,
@@ -226,7 +280,7 @@ export default (params) => {
return {
key,
label: '负载',
- value: (props.info.State?.Load1 || 0).toFixed(2) * 1,
+ value: (props.info.State?.Load1 || 0).toFixed(2),
unit: '',
show: validate.isSet(props.info.State?.Load1),
};