mirror of
https://gitee.com/lakernote/easy-admin.git
synced 2026-09-06 15:07:20 +08:00
385 lines
16 KiB
HTML
385 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>首页</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
|
||
<link rel="stylesheet" href="../../admin/css/other/console2.css"/>
|
||
</head>
|
||
<body class="pear-container">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-md8">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
快捷菜单
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home1" data-title="在线用户"
|
||
data-url="view/system/onlineUser.html">
|
||
<i class="layui-icon layui-icon-group"></i>
|
||
</div>
|
||
<span class="pear-card-title">在线用户</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home2" data-title="接口文档"
|
||
data-url="/doc.html">
|
||
<i class="layui-icon layui-icon-search"></i>
|
||
</div>
|
||
<span class="pear-card-title">接口文档</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home2" data-title="访问日志" data-url="view/ext/log.html">
|
||
<i class="layui-icon layui-icon-time"></i>
|
||
</div>
|
||
<span class="pear-card-title">访问日志</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home3" data-title="NginxUI"
|
||
data-url="view/system/nginx.html">
|
||
<i class="layui-icon layui-icon-template-1"></i>
|
||
</div>
|
||
<span class="pear-card-title">NginxUI</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home4" data-title="配套专栏"
|
||
data-url="https://blog.csdn.net/abu935009066/category_10817814.html">
|
||
<i class="layui-icon layui-icon-heart-fill"></i>
|
||
</div>
|
||
<span class="pear-card-title">配套专栏</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home5" data-title="源码下载"
|
||
data-url="https://gitee.com/lakernote/easy-admin">
|
||
<i class="layui-icon layui-icon-website"></i>
|
||
</div>
|
||
<span class="pear-card-title">源码下载</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home6" data-title="请假申请" data-url="view/ext/leave.html">
|
||
<i class="layui-icon layui-icon-table"></i>
|
||
</div>
|
||
<span class="pear-card-title">请假申请</span>
|
||
</div>
|
||
<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
|
||
<div class="pear-card" data-id="home7" data-title="应用监控" data-url="/monitoring">
|
||
<i class="layui-icon layui-icon-chart-screen"></i>
|
||
</div>
|
||
<span class="pear-card-title">应用监控</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
快捷数据
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space10">
|
||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||
<div class="pear-card2">
|
||
<div class="title">待办任务</div>
|
||
<div class="count pear-text" id="card1">1</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||
<div class="pear-card2">
|
||
<div class="title">已办任务</div>
|
||
<div class="count pear-text" id="card2">1</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||
<div class="pear-card2">
|
||
<div class="title">IP总数</div>
|
||
<div class="count pear-text" id="card3">1</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
|
||
<div class="pear-card2">
|
||
<div class="title">在线人数</div>
|
||
<div class="count pear-text" id="card4">1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">
|
||
最近一天Top10访问IP
|
||
</div>
|
||
<div class="layui-card-body">
|
||
<table id="role-table" lay-filter="role-table"></table>
|
||
</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">
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||
<legend>配套博文专栏</legend>
|
||
</fieldset>
|
||
|
||
<blockquote class="layui-elem-quote">
|
||
<a style="color: #00b487" href="https://blog.csdn.net/abu935009066/category_10817814.html">📕 从零搭建开发脚手架👉点击跳转</a>
|
||
<br>
|
||
<br>
|
||
<a style="color: #00b487" href="https://space.bilibili.com/502919442">📗 B站配套视频👉点击跳转</a>
|
||
</blockquote>
|
||
|
||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
||
<legend>功能建议 - BUG反馈</legend>
|
||
</fieldset>
|
||
|
||
<blockquote class="layui-elem-quote">
|
||
|
||
<span style="font-size: large;font-family: cursive;">个人微信【lakernote】</span>
|
||
<br>
|
||
<span style="font-size: large;font-family: cursive;">公众号【Java大厂面试官】</span>
|
||
</blockquote>
|
||
<img src="../../admin/images/wx.jpg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--</div>-->
|
||
<script src="../../component/layui/layui.js"></script>
|
||
<script src="../../component/pear/pear.js"></script>
|
||
<script>
|
||
layui.use(['echarts', 'element', 'easyAdmin'], function () {
|
||
var $ = layui.jquery,
|
||
element = layui.element,
|
||
echarts = layui.echarts,
|
||
easyAdmin = layui.easyAdmin;
|
||
|
||
|
||
easyAdmin.httpGet("/sys/statistics/console",function (res) {
|
||
let data = res.data;
|
||
$('#card1').text(data.todo);
|
||
$('#card2').text(data.done);
|
||
$('#card3').text(data.ip);
|
||
$('#card4').text(data.online);
|
||
})
|
||
|
||
|
||
let cols = [
|
||
[
|
||
{
|
||
title: 'IP地址',
|
||
field: 'ip',
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '城市及网络',
|
||
field: 'city',
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '次数',
|
||
field: 'value',
|
||
align: 'center'
|
||
}
|
||
]
|
||
]
|
||
|
||
easyAdmin.tableRender({
|
||
elem: '#role-table',
|
||
url: '/ext/log/visitsTop10IP',
|
||
page: false,
|
||
cols: cols,
|
||
toolbar: null,
|
||
defaultToolbar: null
|
||
});
|
||
|
||
|
||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
||
|
||
$("body").on("click", "[data-url]", function () {
|
||
parent.layui.tab.addTabOnlyByElem("content", {
|
||
id: $(this).attr("data-id"),
|
||
title: $(this).attr("data-title"),
|
||
url: $(this).attr("data-url"),
|
||
close: true
|
||
})
|
||
})
|
||
|
||
|
||
let bgColor = "#fff";
|
||
let color = [
|
||
"#0090FF",
|
||
"#36CE9E",
|
||
"#FFC005",
|
||
"#FF515A",
|
||
"#8B5CFF",
|
||
"#00CA69"
|
||
];
|
||
easyAdmin.httpGet("/ext/log/visits7day", function (data) {
|
||
let echartData = data.data;
|
||
|
||
|
||
let xAxisData = echartData.map(v => v.date);
|
||
// ["1", "2", "3", "4", "5", "6", "7", "8"]
|
||
let yAxisData1 = echartData.map(v => v.value);
|
||
// [100, 138, 350, 173, 180, 150, 180, 230]
|
||
const hexToRgba = (hex, opacity) => {
|
||
let rgbaColor = "";
|
||
let reg = /^#[\da-f]{6}$/i;
|
||
if (reg.test(hex)) {
|
||
rgbaColor =
|
||
`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
|
||
"0x" + hex.slice(3, 5)
|
||
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
|
||
}
|
||
return rgbaColor;
|
||
}
|
||
|
||
option = {
|
||
backgroundColor: bgColor,
|
||
color: color,
|
||
legend: {
|
||
right: 10,
|
||
top: 10
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
formatter: function (params) {
|
||
let html = '';
|
||
params.forEach(v => {
|
||
html +=
|
||
`<div style="color: #666;font-size: 14px;line-height: 24px">
|
||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
|
||
${v.seriesName}.${v.name}
|
||
<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
|
||
次`;
|
||
})
|
||
|
||
|
||
return html
|
||
},
|
||
extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
shadowStyle: {
|
||
color: '#ffffff',
|
||
shadowColor: 'rgba(225,225,225,1)',
|
||
shadowBlur: 5
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
top: 100,
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: "#333"
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#D9D9D9"
|
||
}
|
||
},
|
||
data: xAxisData
|
||
}],
|
||
yAxis: [{
|
||
type: "value",
|
||
name: '',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: "#666"
|
||
}
|
||
},
|
||
nameTextStyle: {
|
||
color: "#666",
|
||
fontSize: 12,
|
||
lineHeight: 40
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "#E9E9E9"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: "最近7天系统功能访问量",
|
||
type: "line",
|
||
smooth: true,
|
||
// showSymbol: false,/
|
||
symbolSize: 8,
|
||
zlevel: 3,
|
||
lineStyle: {
|
||
normal: {
|
||
color: color[0],
|
||
shadowBlur: 3,
|
||
shadowColor: hexToRgba(color[0], 0.5),
|
||
shadowOffsetY: 8
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[{
|
||
offset: 0,
|
||
color: hexToRgba(color[0], 0.3)
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: hexToRgba(color[0], 0.1)
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: hexToRgba(color[0], 0.1),
|
||
shadowBlur: 10
|
||
}
|
||
},
|
||
data: yAxisData1
|
||
}]
|
||
};
|
||
|
||
echartsRecords.setOption(option);
|
||
});
|
||
window.onresize = function () {
|
||
echartsRecords.resize();
|
||
}
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|