diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss
index 01e0530..d9ea178 100644
--- a/src/assets/scss/variables.scss
+++ b/src/assets/scss/variables.scss
@@ -16,12 +16,17 @@
--world-map-point-color: #fff143;
- --duration-color: #cbf1f5;
+ --duration-color: #89c3eb;
--transfer-color: #f9ed69;
--transfer-in-color: var(--transfer-color);
--transfer-out-color: #90f2ff;
--net-speed-in-color: #f5b199;
--net-speed-out-color: #89c3eb;
+ --conn-color: #89c3eb;
+ --conn-tcp-color: var(--conn-color);
+ --conn-udp-color: #2ca9e1;
+ --load-color: #90f2ff;
+ --process-color: #f5b199;
--list-item-price-color: #eee;
--list-item-buy-link-color: #ffc300;
diff --git a/src/views/components/server-list/card/server-list-item.vue b/src/views/components/server-list/card/server-list-item.vue
index 09ef553..498e1f1 100644
--- a/src/views/components/server-list/card/server-list-item.vue
+++ b/src/views/components/server-list/card/server-list-item.vue
@@ -91,7 +91,7 @@ const platformLogoIconClassName = computed(() => hostUtils.getPlatformLogoIconCl
const serverRealTimeListTpls = computed(() => {
if (config.nazhua?.listServerRealTimeShowLoad) {
- return 'duration,load,transfer,speeds';
+ return 'D-A-T,T-A-U,L-A-P,I-A-O';
}
return 'duration,transfer,inSpeed,outSpeed';
});
diff --git a/src/views/components/server-list/row/server-list-column.vue b/src/views/components/server-list/row/server-list-column.vue
index 3872c91..5c665a4 100644
--- a/src/views/components/server-list/row/server-list-column.vue
+++ b/src/views/components/server-list/row/server-list-column.vue
@@ -23,7 +23,10 @@
{{ value }}
- {{ unit }}
+ {{ unit }}
@@ -207,5 +210,23 @@ const columnStyle = computed(() => {
color: var(--list-item-price-color);
}
}
+
+ &--tcp {
+ .item-value {
+ color: var(--conn-tcp-color);
+ }
+ }
+
+ &--udp {
+ .item-value {
+ color: var(--conn-udp-color);
+ }
+ }
+
+ &--conns {
+ .item-value {
+ color: var(--conn-color);
+ }
+ }
}
diff --git a/src/views/components/server-list/row/server-list-item.vue b/src/views/components/server-list/row/server-list-item.vue
index 4170ed2..cd5bf1b 100644
--- a/src/views/components/server-list/row/server-list-item.vue
+++ b/src/views/components/server-list/row/server-list-item.vue
@@ -41,7 +41,7 @@
{{ subItem.show ? subItem?.value : '-' }}
- {{ subItem.show ? subItem?.unit : '' }}
+ {{ subItem?.unit }}
{{ item.show ? item?.value : '-' }}
- {{ item.show ? item?.unit : '' }}
+ {{ item?.unit }}
{
unit: netOutSpeed.value?.unit,
show: validate.isSet(netOutSpeed.value?.value),
};
- case 'speeds':
+ case 'load':
+ return {
+ key,
+ label: '负载',
+ value: (props.info.State?.Load1 || 0).toFixed(2),
+ show: validate.isSet(props.info.State?.Load1),
+ };
+ case 'conns':
+ return {
+ key,
+ label: '连接',
+ value: `${props.info.State?.TcpConnCount || 0}|${props.info.State?.UdpConnCount || 0}`,
+ show: true,
+ };
+ case 'tcp':
+ return {
+ key,
+ label: 'TCP',
+ value: props.info.State?.TcpConnCount || 0,
+ show: validate.isSet(props.info.State?.TcpConnCount),
+ };
+ case 'udp':
+ return {
+ key,
+ label: 'UDP',
+ value: props.info.State?.UdpConnCount || 0,
+ show: validate.isSet(props.info.State?.UdpConnCount),
+ };
+ case 'I-A-O':
return {
key,
label: '网速',
@@ -276,13 +304,68 @@ export default (params) => {
],
show: validate.isSet(netInSpeed.value?.value) && validate.isSet(netOutSpeed.value?.value),
};
- case 'load':
+ case 'L-A-P':
return {
key,
label: '负载',
- value: (props.info.State?.Load1 || 0).toFixed(2),
- unit: '',
- show: validate.isSet(props.info.State?.Load1),
+ values: [
+ {
+ key: 'load',
+ label: '负载',
+ value: (props.info.State?.Load1 || 0).toFixed(2),
+ show: validate.isSet(props.info.State?.Load1),
+ },
+ {
+ key: 'process',
+ label: '进程',
+ value: props.info.State?.ProcessCount || 0,
+ show: validate.isSet(props.info.State?.ProcessCount),
+ },
+ ],
+ show: validate.isSet(props.info.State?.Load1) || validate.isSet(props.info.State?.ProcessCount),
+ };
+ case 'T-A-U':
+ return {
+ key,
+ label: '连接',
+ values: [
+ {
+ key: 'tcp',
+ label: 'TCP',
+ value: (props.info.State?.TcpConnCount || 0).toString().padEnd(3, ' '),
+ show: validate.isSet(props.info.State?.TcpConnCount),
+ },
+ {
+ key: 'udp',
+ label: 'UDP',
+ value: (props.info.State?.UdpConnCount || 0).toString().padEnd(3, ' '),
+ show: validate.isSet(props.info.State?.UdpConnCount),
+ },
+ ],
+ show: validate.isSet(props.info.State?.TcpConnCount) || validate.isSet(props.info.State?.UdpConnCount),
+ };
+ case 'D-A-T':
+ return {
+ key,
+ label: '统计',
+ values: [
+ {
+ key: 'duration',
+ label: '在线',
+ value: duration.value?.value,
+ unit: duration.value?.unit,
+ show: validate.isSet(duration.value?.value),
+ },
+ {
+ key: 'transfer',
+ label: '流量',
+ title: `${transfer.value.statTypeLabel}流量`,
+ value: transfer.value?.value,
+ unit: transfer.value?.unit,
+ show: validate.isSet(transfer.value?.value),
+ },
+ ],
+ show: validate.isSet(duration.value?.value) || validate.isSet(transfer.value?.value),
};
default:
}