From 636d7d0605334772a25f83deb961729a0b3c3970 Mon Sep 17 00:00:00 2001 From: Chenx221 Date: Mon, 15 Apr 2024 16:10:28 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E4=BF=A1=E6=81=AF=E6=98=BE?= =?UTF-8?q?=E7=A4=BA=E5=8A=9F=E8=83=BD=E5=AE=9E=E8=A3=85(3/3)=20*=E5=89=8D?= =?UTF-8?q?=E7=AB=AF=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- views/admin/sysinfo.php | 134 ++++++++++++++++++---------------- web/css/sysinfo-style.css | 24 +++++++ web/js/sysinfo-core.js | 146 ++++++++++++++++++++++++++++---------- 3 files changed, 206 insertions(+), 98 deletions(-) create mode 100644 web/css/sysinfo-style.css diff --git a/views/admin/sysinfo.php b/views/admin/sysinfo.php index 396a3eb..7769fda 100644 --- a/views/admin/sysinfo.php +++ b/views/admin/sysinfo.php @@ -12,6 +12,7 @@ use yii\web\View; FontAwesomeAsset::register($this); EChartsAsset::register($this); +$this->registerCssFile('@web/css/sysinfo-style.css'); $this->title = '系统信息'; ?> @@ -55,9 +56,9 @@ $this->title = '系统信息';

-
+
osType === 2): ?> -
+

Load @@ -70,7 +71,7 @@ $this->title = '系统信息';

-
+

CPU @@ -82,7 +83,7 @@ $this->title = '系统信息'; CPU Usage: cpuUsage ?>%

-
+

Memory @@ -106,12 +107,14 @@ $this->title = '系统信息'; Disk

-
-
+
+
-
+
+
+
-
+

Data

Mount: dataMountPoint ?> @@ -149,70 +152,71 @@ $this->title = '系统信息'; Gateway: gateway ?>

-
-
-
-

nic['interfaceName'] ?>

- MAC: - nic['mac'] ?> -
- Speed: - nic['speed'] ?> -
- IPv4: - nic['ipv4'] ?> -
- IPv6: - nic['ipv6'] ?> -
+
+
+
+

nic['interfaceName'] ?>

+ MAC: + nic['mac'] ?> +
+ Speed: + nic['speed'] ?> +
+ IPv4: + nic['ipv4'] ?> +
+ IPv6: + nic['ipv6'] ?>
-
-

- - Active Users -

-
- All: - users ?> -
- Active (within 24h): - activeUsers ?> +
+
+

+ + Active Users +

+
+ All: + users ?> +
+ Active (within 24h): + activeUsers ?> +
-
-
+
+

Share

-
+
Link: shares ?>
-
+

Collection

-
- Collection: +
+ Link: collections ?>
-
-
+
+

PHP

-
+
Version: phpVersion ?>
@@ -232,12 +236,12 @@ $this->title = '系统信息'; extensions ?>
-
+

Database

-
+
Type: dbType ?>
@@ -268,7 +272,7 @@ var option = { xAxis: { type: 'category', boundaryGap: false, - data: ["$dataTime","16:51:49"] + data: ["$dataTime"] }, yAxis: { type: 'value', @@ -278,12 +282,14 @@ var option = { series: [ { 'name': 'CPU', - data: [$systemInfo->cpuUsage,50], + data: [$systemInfo->cpuUsage], label: { show: true, position: 'top', - formatter: '{c}%', - emphasis: { + formatter: '{c}%' + }, + emphasis: { + label: { scale: 1.5 } }, @@ -302,7 +308,7 @@ if(needLoadGraph !== null){ xAxis: { type: 'category', boundaryGap: false, - data: ["$dataTime","16:51:49"] + data: ["$dataTime"] }, yAxis: { type: 'value', @@ -312,12 +318,14 @@ if(needLoadGraph !== null){ series: [ { 'name': 'Load', - data: [$systemInfo->load,50], + data: [$systemInfo->load], label: { show: true, position: 'top', - formatter: '{c}%', - emphasis: { + formatter: '{c}%' + }, + emphasis: { + label: { scale: 1.5 } }, @@ -336,7 +344,7 @@ var option2 = { xAxis: { type: 'category', boundaryGap: false, - data: ["$dataTime","16:51:49"] + data: ["$dataTime"] }, yAxis: { type: 'value', @@ -346,7 +354,7 @@ var option2 = { series: [ { name: 'RAM', - data: [$systemInfo->ramUsage,50], + data: [$systemInfo->ramUsage], type: 'line', areaStyle: {}, smooth: true, @@ -357,14 +365,16 @@ var option2 = { show: true, position: 'top', formatter: '{c}%', - emphasis: { + }, + emphasis: { + label: { scale: 1.5 } } }, { name: 'SWAP', - data: [$systemInfo->swapUsage,90], + data: [$systemInfo->swapUsage], type: 'line', areaStyle: {}, smooth: true, @@ -374,11 +384,13 @@ var option2 = { label: { show: true, position: 'bottom', - formatter: '{c}%', - emphasis: { + formatter: '{c}%' + }, + emphasis: { + label: { scale: 1.5 } - } + }, } ] }; diff --git a/web/css/sysinfo-style.css b/web/css/sysinfo-style.css new file mode 100644 index 0000000..ea40161 --- /dev/null +++ b/web/css/sysinfo-style.css @@ -0,0 +1,24 @@ +.system-info p{ + margin-bottom: 0; +} +.system-info h2{ + margin-top: 22px; + margin-bottom: 22px; +} +.system-info .group-content{ + border: 2px solid #ededed; + border-radius:10px; + padding: 16px; +} +.system-info .group-content span{ + color: #6b6b6b; +} + +#load-graph,#cpu-graph,#memory-graph{ + padding-top: 35px; + border: 2px solid #ededed; + border-radius:10px; +} +#disk-chart{ + padding-top: 10px; +} \ No newline at end of file diff --git a/web/js/sysinfo-core.js b/web/js/sysinfo-core.js index cfe1a37..fbdfca5 100644 --- a/web/js/sysinfo-core.js +++ b/web/js/sysinfo-core.js @@ -5,63 +5,135 @@ var sysinfo = { init: function () { - setInterval(sysinfo.fetch, 5000); + setInterval(sysinfo.fetch, 2000); + // WARNING + // For Windows users, the interval should be equal or greater than 1500ms, because the system information gathering process is slow. (Please dynamically adjust the interval based on system performance.) + // For Linux users, the interval can be set to below 1000ms. }, fetch: function () { $.ajax({ - url: '/admin/get-sysinfo', + url: 'index.php?r=admin%2Fget-sysinfo', type: 'GET', dataType: 'json', success: function (data) { sysinfo.display(data); + }, + error: function (xhr, status, error) { + console.log('Error: ' + error.message); } }); }, display: function (data) { - //TODO: display system information + // serverTime + $('#rdata_serverTime').text(data.serverTime); + // serverUpTime + $('#rdata_serverUpTime').text(data.serverUpTime); + // load + $('#rdata_load').text(data.load); + // cpuUsage + $('#rdata_cpuUsage').text(data.cpuUsage); + // ramUsage + $('#rdata_ramUsage').text(data.ramUsage); + // swapUsage + $('#rdata_swapUsage').text(data.swapUsage); + // mp_avail + $('#rdata_mp_avail').text(data.mp_avail); + // mp_used + $('#rdata_mp_used').text(data.mp_used); + // mp_usage + $('#rdata_mp_usage').text(data.mp_usage); + + // cpu graph + var cpuData_x = myChart.getOption().xAxis[0].data; + var cpuData = myChart.getOption().series[0].data; + cpuData_x.push(data.serverTime.substr(11, 8)); + cpuData.push(data.cpuUsage); + if (cpuData_x.length > 10) { + cpuData_x.shift(); + } + if (cpuData.length > 10) { + cpuData.shift(); + } + myChart.setOption({ + xAxis: [{ + data: cpuData_x + }], + series: [{ + data: cpuData + }] + + }) + + // load graph + if (data.osType === 1) { + var loadData_x = myChart1.getOption().xAxis[0].data; + var loadData = myChart1.getOption().series[0].data; + loadData_x.push(data.serverTime.substr(11, 8)); + loadData.push(data.load); + if (loadData_x.length > 10) { + loadData_x.shift(); + } + if (loadData.length > 10) { + loadData.shift(); + } + myChart1.setOption({ + xAxis: [{ + data: loadData_x + }], + series: [{ + data: loadData + }] + }); + } + + // memory graph + var memoryData_x = myChart2.getOption().xAxis[0].data; + var memoryData = myChart2.getOption().series[0].data; + var swapData = myChart2.getOption().series[1].data; + memoryData_x.push(data.serverTime.substr(11, 8)); + memoryData.push(data.ramUsage); + swapData.push(data.swapUsage); + if (memoryData_x.length > 10) { + memoryData_x.shift(); + } + if (memoryData.length > 10) { + memoryData.shift(); + } + if (swapData.length > 10) { + swapData.shift(); + } + myChart2.setOption({ + xAxis: [{ + data: memoryData_x + }], + series: [{ + data: memoryData + },{ + data: swapData + }] + }); + + // disk chart + var free = 100-data.mp_usage; + myChart3.setOption({ + series: [{ + data: [ + { value: data.mp_usage, name: 'Used Space' }, + { value: free, name: 'Free Space' } + ] + }] + }); } } - -// *Some data need to display -// rdata_hostname: hostname -// rdata_os: os -// rdata_cpu: cpu -// rdata_ram: ram +sysinfo.init(); +// *Some data need to refresh display // rdata_serverTime: serverTime // rdata_serverUpTime: serverUpTime // (osType ==2) rdata_load: load // rdata_cpuUsage: cpuUsage // rdata_ramUsage: ramUsage // rdata_swapUsage: swapUsage -// rdata_dataMountPoint: dataMountPoint -// rdata_mp_fs: mp_fs -// rdata_mp_size: mp_size // rdata_mp_avail: mp_avail // rdata_mp_used: mp_used // rdata_mp_usage: mp_usage -// rdata_hostname2: hostname -// rdata_dns: dns -// rdata_gateway: gateway -// rdata_interfaceName: nic[interfaceName] -// rdata_mac: nic[mac] -// rdata_speed: nic[speed] -// rdata_ipv4: nic[ipv4] -// rdata_ipv6: nic[ipv6] -// rdata_users: users -// rdata_activeUsers: activeUsers -// rdata_shares: shares -// rdata_collections: collections -// rdata_phpVersion: phpVersion -// rdata_memoryLimit: memoryLimit -// rdata_maxExecutionTime: maxExecutionTime -// rdata_uploadMaxFilesize: uploadMaxFilesize -// rdata_postMaxSize: postMaxSize -// rdata_extensions: extensions -// rdata_dbType: dbType -// rdata_dbVersion: dbVersion -// rdata_dbSize: dbSize -// var myChart = echarts.init(document.getElementById('cpu-graph')); -// var myChart1 = echarts.init(document.getElementById('load-graph')); -// var myChart2 = echarts.init(document.getElementById('memory-graph')); -// var myChart3 = echarts.init(document.getElementById('disk-chart')); \ No newline at end of file