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 @@ @@ -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 }} { 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: }