系统信息显示功能实装(3/3)
*前端实现
This commit is contained in:
parent
2a20dea8cf
commit
636d7d0605
GPG Key ID:
D7A9EC07024C3021
@ -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>
|
||||
<div class="row">
|
||||
<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,70 +152,71 @@ $this->title = '系统信息';
|
||||
Gateway:
|
||||
<span id="rdata_gateway"><?= $systemInfo->gateway ?></span>
|
||||
</p>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
|
||||
MAC:
|
||||
<span id="rdata_mac"><?= $systemInfo->nic['mac'] ?></span>
|
||||
<br>
|
||||
Speed:
|
||||
<span id="rdata_speed"><?= $systemInfo->nic['speed'] ?></span>
|
||||
<br>
|
||||
IPv4:
|
||||
<span id="rdata_ipv4"><?= $systemInfo->nic['ipv4'] ?></span>
|
||||
<br>
|
||||
IPv6:
|
||||
<span id="rdata_ipv6"><?= $systemInfo->nic['ipv6'] ?></span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="group-content col-md-4">
|
||||
<h3 id="rdata_interfaceName"><?= $systemInfo->nic['interfaceName'] ?></h3>
|
||||
MAC:
|
||||
<span id="rdata_mac"><?= $systemInfo->nic['mac'] ?></span>
|
||||
<br>
|
||||
Speed:
|
||||
<span id="rdata_speed"><?= $systemInfo->nic['speed'] ?></span>
|
||||
<br>
|
||||
IPv4:
|
||||
<span id="rdata_ipv4"><?= $systemInfo->nic['ipv4'] ?></span>
|
||||
<br>
|
||||
IPv6:
|
||||
<span id="rdata_ipv6"><?= $systemInfo->nic['ipv6'] ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h2>
|
||||
<i class="fa-solid fa-users"></i>
|
||||
Active Users
|
||||
</h2>
|
||||
<div>
|
||||
All:
|
||||
<span id="rdata_users"><?= $systemInfo->users ?></span>
|
||||
<br>
|
||||
Active (within 24h):
|
||||
<span id="rdata_activeUsers"><?= $systemInfo->activeUsers ?></span>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>
|
||||
<i class="fa-solid fa-users"></i>
|
||||
Active Users
|
||||
</h2>
|
||||
<div class="group-content">
|
||||
All:
|
||||
<span id="rdata_users"><?= $systemInfo->users ?></span>
|
||||
<br>
|
||||
Active (within 24h):
|
||||
<span id="rdata_activeUsers"><?= $systemInfo->activeUsers ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<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>
|
||||
Collection:
|
||||
<div class="group-content">
|
||||
Link:
|
||||
<span id="rdata_collections"><?= $systemInfo->collections ?></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<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}%',
|
||||
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
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
24
web/css/sysinfo-style.css
Normal file
24
web/css/sysinfo-style.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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'));
|
||||
Loading…
Reference in New Issue
Block a user