mirror of
https://github.com/acepanel/panel.git
synced 2026-02-04 13:47:15 +08:00
280 lines
12 KiB
PHP
280 lines
12 KiB
PHP
<!--
|
||
Name: 主页模板
|
||
Author: 耗子
|
||
Date: 2022-11-30
|
||
-->
|
||
<div class="layui-fluid">
|
||
<div class="layui-row layui-col-space15">
|
||
<div id="address1" class="layui-col-md12">
|
||
<div class="layui-collapse">
|
||
<div style="background: #fff;" class="layui-colla-content layui-show">
|
||
<div class="text" style="overflow: hidden;height: 22px;">
|
||
<div class="layui-carousel" id="home_ad" lay-filter="home_ad">
|
||
<div carousel-item="">
|
||
<a style="background: #fff;" href="https://hzbk.net"
|
||
title="耗子博客" target="_blank"><i class="layui-icon layui-icon-release"></i> 耗子博客</a>
|
||
<a style="background: #fff;" href="https://weavatar.com"
|
||
title="WeAvatar" target="_blank"><i class="layui-icon layui-icon-release"></i> WeAvatar - 互联网公共头像服务</a>
|
||
<a style="background: #fff;" href="https://wepublish.cn"
|
||
title="WePublish" target="_blank"><i class="layui-icon layui-icon-release"></i> WePublish - WordPress的本土化版本</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="monitor1" class="layui-col-md6">
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">资源使用</div>
|
||
<div class="layui-card-body layadmin-takerates">
|
||
<div class="layui-progress" lay-showPercent="yes" lay-filter="home_cpu">
|
||
<h3 id="home_cpu">CPU信息加载中</h3>
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
<div class="layui-progress" lay-showPercent="yes" lay-filter="home_mem">
|
||
<h3 id="home_mem">内存信息加载中</h3>
|
||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="monitor2" class="layui-col-md3">
|
||
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">系统负载</div>
|
||
<div class="layui-card-body layadmin-takerates">
|
||
<div class="layui-progress" lay-showPercent="yes" lay-filter="uptime_1">
|
||
<h3>近1分钟</h3>
|
||
<div class="layui-progress-bar" lay-percent="0%"></div>
|
||
</div>
|
||
<div class="layui-progress" lay-showPercent="yes" lay-filter="uptime_5">
|
||
<h3>近5分钟</h3>
|
||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md3">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
实时流量
|
||
<span class="layui-badge layui-bg-blue layuiadmin-badge">发送 / 接收</span>
|
||
</div>
|
||
<div class="layui-card-body layuiadmin-card-list">
|
||
<p style="text-align: center;"><b id="home_net_now">获取中...</b></p>
|
||
</div>
|
||
<div class="layui-card-header">
|
||
累计流量
|
||
<span class="layui-badge layui-bg-blue layuiadmin-badge">发送 / 接收</span>
|
||
</div>
|
||
<div class="layui-card-body layuiadmin-card-list">
|
||
<p style="text-align: center;"><b id="home_net_total">获取中...</b></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md8">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">应用</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-carousel layadmin-carousel layadmin-shortcut" lay-anim="">
|
||
<div carousel-item="">
|
||
<ul class="layui-row layui-col-space10 layui-this">
|
||
<script type="text/html" template lay-url="/api/panel/info/getHomePlugins">
|
||
@{{# layui.each(d.data, function(index, item){ }}
|
||
<li class="layui-col-xs4 layui-col-md2 layui-col-sm4">
|
||
<a lay-href="/plugin/@{{ item.slug }}">
|
||
<i class="layui-icon layui-icon-engine"></i>
|
||
<cite>@{{ item.name }}</cite>
|
||
</a>
|
||
</li>
|
||
@{{# }); }}
|
||
@{{# if(d.data.length === 0){ }}
|
||
这里好像啥也没有...
|
||
@{{# } }}
|
||
</script>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-md4">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">基本信息</div>
|
||
<div class="layui-card-body layui-text layadmin-version">
|
||
<table class="layui-table">
|
||
<tbody>
|
||
<tr>
|
||
<td>系统信息</td>
|
||
<td id="home_os_name">
|
||
获取中...
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>面板版本</td>
|
||
<td id="home_panel_version">
|
||
获取中...
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>运行时间</td>
|
||
<td id="home_uptime">
|
||
获取中...
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>操作</td>
|
||
<td>
|
||
<button id="update_panel" class="layui-btn layui-btn-xs">更新</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
关于面板
|
||
<i class="layui-icon layui-icon-tips" lay-tips="你干嘛，哎哟！" lay-offset="5"></i>
|
||
</div>
|
||
<div class="layui-card-body layui-text layadmin-text">
|
||
<blockquote class="layui-elem-quote">
|
||
<p>这是一个全新的项目，欢迎您的使用。如果遇到问题/Bug，请前往交流反馈QQ群：<a href="https://jq.qq.com/?_wv=1027&k=I1oJKSTH">12370907</a> 反馈给我，我们共同让她变得更完美。</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
var home_timer;
|
||
var uptime_1 = '获取中', uptime_5 = '获取中', uptime_15 = '获取中';
|
||
|
||
function refresh_home_info() {
|
||
layui.use(['index', 'jquery', 'admin'], function () {
|
||
let $ = layui.jquery
|
||
, admin = layui.admin
|
||
, element = layui.element;
|
||
|
||
let device = layui.device();
|
||
let cpu_info;
|
||
admin.req({
|
||
url: "/api/panel/info/getNowMonitor"
|
||
, method: 'get'
|
||
, success: function (result) {
|
||
if (result.code !== 0) {
|
||
console.log('耗子Linux面板：系统资源信息获取失败，接口返回' + result);
|
||
layer.msg('系统资源获取失败，请刷新重试！')
|
||
return false;
|
||
}
|
||
element.progress('home_cpu', result.data.cpu_use);
|
||
element.progress('home_mem', result.data.mem_use_p);
|
||
element.progress('uptime_1', result.data.uptime_1_p);
|
||
element.progress('uptime_5', result.data.uptime_5_p);
|
||
uptime_1 = result.data.uptime_1;
|
||
uptime_5 = result.data.uptime_5;
|
||
uptime_15 = result.data.uptime_15;
|
||
// 判断一下移动设备不显示CPU型号，放不下。。。
|
||
if (device.mobile) {
|
||
cpu_info = result.data.cpu_info.physical + 'CPU ' + result.data.cpu_info.cores + '核心 ' + result.data.cpu_info.siblings + '线程';
|
||
} else {
|
||
cpu_info = result.data.cpu_info.name + ' ' + result.data.cpu_info.physical + 'CPU ' + result.data.cpu_info.cores + '核心 ' + result.data.cpu_info.siblings + '线程';
|
||
}
|
||
$('#home_net_total').html(result.data.tx_total + ' / ' + result.data.rx_total);
|
||
$('#home_net_now').html(result.data.tx_now + '/s / ' + result.data.rx_now + '/s');
|
||
$('#home_cpu').text(cpu_info);
|
||
$('#home_mem').text('使用' + result.data.mem_use + 'MB / ' + '总计' + result.data.mem_total + 'MB');
|
||
element.render('progress');
|
||
}
|
||
, error: function (xhr, status, error) {
|
||
console.log('耗子Linux面板：ajax请求出错，错误' + error);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 先执行一次
|
||
refresh_home_info();
|
||
// 然后设置个定时器3s一次刷新
|
||
clearInterval(home_timer);
|
||
home_timer = setInterval(refresh_home_info, 3000);
|
||
// 获取系统信息，这部分信息无需更新。
|
||
layui.use(['index', 'jquery', 'admin', 'carousel'], function () {
|
||
let $ = layui.jquery
|
||
, admin = layui.admin
|
||
, element = layui.element
|
||
, carousel = layui.carousel;
|
||
carousel.render({
|
||
elem: '#home_ad'
|
||
, width: '100%'
|
||
, height: '200px'
|
||
, anim: 'fade'
|
||
, arrow: 'none'
|
||
, indicator: 'none'
|
||
});
|
||
admin.req({
|
||
url: "/api/panel/info/getSystemInfo"
|
||
, method: 'get'
|
||
, success: function (result) {
|
||
if (result.code !== 0) {
|
||
console.log('耗子Linux面板：系统信息获取失败，接口返回' + result);
|
||
layer.msg('系统信息获取失败，请刷新重试！')
|
||
return false;
|
||
}
|
||
$('#home_os_name').text(result.data.os_name);
|
||
$('#home_panel_version').text(result.data.panel_version);
|
||
$('#home_uptime').text('已不间断运行 ' + result.data.uptime + ' 天');
|
||
}
|
||
, error: function (xhr, status, error) {
|
||
console.log('耗子Linux面板：ajax请求出错，错误' + error);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 监听鼠标悬停到uptime上的事件
|
||
// 用于显示1分钟、5分钟、15分钟的负载
|
||
layui.use(['jquery', 'layer'], function () {
|
||
let $ = layui.jquery
|
||
, layer = layui.layer
|
||
, admin = layui.admin;
|
||
$('#monitor2').hover(function () {
|
||
layer.tips('1分钟负载：' + uptime_1 + '<br>5分钟负载：' + uptime_5 + '<br>15分钟负载：' + uptime_15, '#monitor2', {
|
||
tips: 1,
|
||
time: 0
|
||
});
|
||
}, function () {
|
||
layer.closeAll('tips');
|
||
});
|
||
// 监听更新按钮点击事件
|
||
$('#update_panel').click(function () {
|
||
admin.popup({
|
||
title: '提示'
|
||
,
|
||
shade: 0
|
||
,
|
||
anim: -1
|
||
,
|
||
area: ['400px', '200px']
|
||
,
|
||
id: 'layadmin-layer-skin-update-panel'
|
||
,
|
||
skin: 'layui-anim layui-anim-upbit'
|
||
,
|
||
content: '请在SSH执行<span class="layui-badge-rim">panel update</span>以更新面板！'
|
||
});
|
||
});
|
||
});
|
||
/**
|
||
* TODO: 为主页安排一个应用展示
|
||
*/
|
||
</script>
|
||
|