系统信息显示功能实装(3/3)

*前端实现

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 = '系统信息';
             </p>
         </div>
         <hr>
-        <div>
+        <div class="row">
             <?php if ($systemInfo->osType === 2): ?>
-                <div>
+                <div class="col-xxl-6">
                     <h2>
                         <i class="fa-solid fa-bars-progress"></i>
                         Load
@@ -70,7 +71,7 @@ $this->title = '系统信息';
                     </p>
                 </div>
             <?php endif; ?>
-            <div>
+            <div class="col-xxl-6">
                 <h2>
                     <i class="fa-solid fa-microchip"></i>
                     CPU
@@ -82,7 +83,7 @@ $this->title = '系统信息';
                     CPU Usage: <span id="rdata_cpuUsage"><?= $systemInfo->cpuUsage ?></span>%
                 </p>
             </div>
-            <div>
+            <div class="col-xxl-6">
                 <h2>
                     <i class="fa-solid fa-memory"></i>
                     Memory
@@ -106,12 +107,14 @@ $this->title = '系统信息';
                     Disk
                 </h2>
             </div>
-            <div>
+            <div class="row">
-                <div>
+                <div class="row col-md-6 group-content">
                     <!-- disk chart -->
-                    <div id="disk-chart" style="width: 600px;height:400px;">
+                    <div class="col-xl-6">
+                        <div id="disk-chart" style="width: 300px;height:250px;">
                         </div>
-                    <div>
+                    </div>
+                    <div class="col-xl-6" style="padding-top: 50px">
                         <h3>Data</h3>
                         Mount:
                         <span id="rdata_dataMountPoint"><?= $systemInfo->dataMountPoint ?></span>
@@ -149,9 +152,9 @@ $this->title = '系统信息';
                     Gateway:
                     <span id="rdata_gateway"><?= $systemInfo->gateway ?></span>
                 </p>
-                <div>
+                <br>
-                    <div>
+                <div class="row">
-                        <div>
+                    <div class="group-content col-md-4">
                         <h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
                         MAC:
                         <span id="rdata_mac"><?= $systemInfo->nic['mac'] ?></span>
@@ -167,14 +170,14 @@ $this->title = '系统信息';
                     </div>
                 </div>
             </div>
-            </div>
             <hr>
-            <div>
+            <div class="row">
+                <div class="col-md-4">
                     <h2>
                         <i class="fa-solid fa-users"></i>
                         Active Users
                     </h2>
-                <div>
+                    <div class="group-content">
                         All:
                         <span id="rdata_users"><?= $systemInfo->users ?></span>
                         <br>
@@ -182,37 +185,38 @@ $this->title = '系统信息';
                         <span id="rdata_activeUsers"><?= $systemInfo->activeUsers ?></span>
                     </div>
                 </div>
+            </div>
             <hr>
-            <div>
+            <div class="row">
-                <div>
+                <div class="col-md-4">
                     <h2>
                         <i class="fa-solid fa-share-nodes"></i>
                         Share
                     </h2>
-                    <div>
+                    <div class="group-content">
                         Link:
                         <span id="rdata_shares"><?= $systemInfo->shares ?></span>
                     </div>
                 </div>
-                <div>
+                <div class="col-md-4">
                     <h2>
                         <i class="fa-solid fa-paper-plane"></i>
                         Collection
                     </h2>
-                    <div>
+                    <div class="group-content">
-                        Collection:
+                        Link:
                         <span id="rdata_collections"><?= $systemInfo->collections ?></span>
                     </div>
                 </div>
             </div>
             <hr>
-            <div>
+            <div class="row">
-                <div>
+                <div class="col-md-6">
                     <h2>
                         <i class="fa-brands fa-php"></i>
                         PHP
                     </h2>
-                    <div>
+                    <div class="group-content">
                         Version:
                         <span id="rdata_phpVersion"><?= $systemInfo->phpVersion ?></span>
                         <br>
@@ -232,12 +236,12 @@ $this->title = '系统信息';
                         <span id="rdata_extensions"><?= $systemInfo->extensions ?></span>
                     </div>
                 </div>
-                <div>
+                <div class="col-md-6">
                     <h2>
                         <i class="fa-solid fa-database"></i>
                         Database
                     </h2>
-                    <div>
+                    <div class="group-content">
                         Type:
                         <span id="rdata_dbType"><?= $systemInfo->dbType ?></span>
                         <br>
@@ -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}%',
+                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}%',
+                    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: {
+                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}%',
+                formatter: '{c}%'
+            },
             emphasis: {
+                label: {
                     scale: 1.5
                 }
-            }
+            },
         }
     ]
 };

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;
+}

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' }
+                ]
+            }]
+        });
     }
 }
-
+sysinfo.init();
-// *Some data need to display
+// *Some data need to refresh display
-// rdata_hostname: hostname
-// rdata_os: os
-// rdata_cpu: cpu
-// rdata_ram: ram
 // 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'));