Files
HTCloud/HT.Cloud.Web/Views/Home/Default.cshtml

519 lines
23 KiB
Plaintext
Raw Normal View History

2023-03-03 16:07:50 +08:00
<!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="~/lib/layui/css/layui.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<link rel="stylesheet" href="~/lib/font-awesome-4.7.0/css/font-awesome.min.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<link rel="stylesheet" href="~/css/public.css?v=@HT.Cloud.Code.GlobalContext.GetVersion()" media="all">
<script src="~/lib/jquery-3.4.1/jquery-3.4.1.min.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<style>
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
overflow: auto;
}
.icon {
margin-right: 10px;
color: #1aa094;
}
.icon-cray {
color: #ffb800 !important;
}
.icon-blue {
color: #1e9fff !important;
}
.icon-tip {
color: #ff5722 !important;
}
.layuimini-qiuck-module {
text-align: center;
margin-top: 10px
}
.layuimini-qiuck-module a i {
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 2px;
font-size: 30px;
background-color: #F8F8F8;
color: black;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: black;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.welcome-module {
width: 100%;
height: 210px;
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05)
}
.panel-body {
padding: 10px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
color: inherit
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.layui-red {
color: red
}
.main_btn > p {
height: 40px;
}
.layui-bg-number {
background-color: #F8F8F8;
}
.layuimini-notice:hover {
background: #f6f6f6;
}
.layuimini-notice {
padding: 7px 16px;
clear: both;
font-size: 12px !important;
cursor: pointer;
position: relative;
transition: background 0.2s ease-in-out;
}
.layuimini-notice-title, .layuimini-notice-label {
padding-right: 70px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.layuimini-notice-title {
line-height: 28px;
font-size: 14px;
color: black;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
.layui-table {
width: 100%;
margin: 10px 0;
background-color: #fff;
color: black;
}
.layui-text {
line-height: 1.6;
font-size: 14px;
color: black;
}
</style>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><a href="javascript:;" layuimini-content-href="/SystemManage/QuickModule/Index" data-title="快捷入口"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</a></div>
<div class="layui-card-body">
<div class="welcome-module">
<div class="layui-row layui-col-space10 layuimini-qiuck">
"<div class="layui-col-xs3 layuimini-qiuck-module"><a href="javascript:;" layuimini-content-href="/SystemSecurity/DbBackup/Index" data-title="数据备份" data-icon="fa null"> <i class="fa null"></i><cite>数据备份</cite></a></div>"
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
<div class="layui-card-body">
<div class="welcome-module">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs6">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-blue">实时</span>
<h5>用户统计</h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="usercout"></h1>
<small>当前分类总记录数</small>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-cyan">实时</span>
<h5>登录统计</h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="logincout"></h1>
<small>当前分类总记录数</small>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-orange">实时</span>
<h5>菜单统计</h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="modulecout"></h1>
<small>当前分类总记录数</small>
</div>
</div>
</div>
</div>
<div class="layui-col-xs6">
<div class="panel layui-bg-number">
<div class="panel-body">
<div class="panel-title">
<span class="label pull-right layui-bg-green">实时</span>
<h5>日志统计</h5>
</div>
<div class="panel-content">
<h1 class="no-margins" id="logcout"></h1>
<small>当前分类总记录数</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
<div class="layui-card-body">
<div id="echarts-records" style="width: 100%;min-height:500px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
2023-03-20 22:54:52 +08:00
@*<div class="layui-card">
2023-03-03 16:07:50 +08:00
<div class="layui-card-header"><i class="fa fa-bullhorn icon icon-tip"></i>系统公告</div>
<div class="layui-card-body layui-text layui-watercloud-notice">
</div>
2023-03-20 22:54:52 +08:00
</div>*@
2023-03-03 16:07:50 +08:00
2023-03-20 22:54:52 +08:00
@*<div class="layui-card">
2023-03-03 16:07:50 +08:00
<div class="layui-card-header"><i class="fa fa-fire icon"></i>版本信息</div>
<div class="layui-card-body layui-text">
<table class="layui-table">
<colgroup>
<col width="100">
<col>
</colgroup>
<tbody>
<tr>
<td>框架名称</td>
<td>
WaterCloud
</td>
</tr>
<tr>
<td>当前版本</td>
<td>@HT.Cloud.Code.GlobalContext.GetVersion()</td>
</tr>
<tr>
<td>主要特色</td>
<td>零门槛 / 响应式 / 清爽 / 极简</td>
</tr>
<tr>
<td>Gitee</td>
<td style="padding-bottom: 0;">
<div class="layui-btn-container">
<a href="https://gitee.com/qian_wei_hong/WaterCloud" target="_blank" style="margin-right: 15px"><img src="https://gitee.com/qian_wei_hong/WaterCloud/badge/star.svg?theme=dark" alt="star"></a>
<a href="https://gitee.com/qian_wei_hong/WaterCloud" target="_blank"><img src="https://gitee.com/qian_wei_hong/WaterCloud/badge/fork.svg?theme=dark" alt="fork"></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
<div class="layui-card-body layui-text layadmin-text">
<p>本模板前端基于layuimini后端对各种框架进行融合而实现。</p>
<p>开发文档地址:<a class="layui-btn layui-btn-xs layui-btn-danger" target="_blank" href="https://gitee.com/qian_wei_hong/WaterCloud/wikis/pages">WaterCloud文档</a></p>
<p>技术交流QQ群1065447456<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=51RHQVG"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="watercloud" title="watercloud"></a>(加群请备注)</p>
<p>喜欢此模板的可以给我的Gitee加个Star支持一下</p>
</div>
2023-03-20 22:54:52 +08:00
</div>*@
2023-03-03 16:07:50 +08:00
</div>
</div>
</div>
</div>
<script src="~/lib/layui/layui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<script src="~/js/lay-config.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
<script src="~/js/framework-ui.js?v=@HT.Cloud.Code.GlobalContext.GetVersion()"></script>
<script>
// 公告赋值
$(function () {
noticeInfo();
quickModuleInfo();
loadInfo();
});
//记录信息
loadInfo = function () {
$.ajax({
url: "/ClientsData/GetCoutData?v=" + new Date().Format("yyyy-MM-dd hh:mm:ss"),
dataType: "json",
success: function (data) {
$('#usercout').html(data.usercout);
$('#logincout').html(data.logincout);
$('#modulecout').html(data.modulecout);
$('#logcout').html(data.logcout);
}
});
}
//公告
noticeInfo = function () {
$.ajax({
url: "/ClientsData/GetNoticeInfo?v=" + new Date().Format("yyyy-MM-dd hh:mm:ss"),
dataType: "json",
success: function (data) {
var noticeHtml = '';
for (var i = 0; i < data.length; i++) {
noticeHtml += '<div class="layuimini-notice">';
noticeHtml += '<div class="layuimini-notice-title">' + data[i].F_Title + '</div>';
noticeHtml += '<div class="layuimini-notice-extra">' + new Date(data[i].F_CreatorTime).Format("yyyy-MM-dd hh:mm") + '</div>';
noticeHtml += '<div class="layuimini-notice-content layui-hide">';
noticeHtml += '<pre>';
var str = data[i].F_Content;
noticeHtml += str;
noticeHtml += '</pre></div></div >';
}
$('.layui-watercloud-notice').empty();
$('.layui-watercloud-notice').html(noticeHtml);
}
});
}
//快捷入口
quickModuleInfo = function () {
$.ajax({
url: "/ClientsData/GetQuickModule?v=" + new Date().Format("yyyy-MM-dd hh:mm:ss"),
dataType: "json",
success: function (data) {
var qiuckHtml = '';
for (var i = 0; i < data.length; i++) {
qiuckHtml += '<div class="layui-col-xs3 layuimini-qiuck-module">';
qiuckHtml += '<a href = "javascript:;" layuimini-content-href="' + data[i].href + '"';
qiuckHtml += ' data-title="' + data[i].title + '"';
if (!!data[i].icon) {
qiuckHtml += ' data-icon="fa ' + data[i].icon + '" >';
qiuckHtml += ' <i class="fa ' + data[i].icon + '"></i>';
}
else {
qiuckHtml += ' data-icon="fa fa-window-maximize" >';
qiuckHtml += ' <i class="fa fa-window-maximize"></i>';
}
qiuckHtml += '<cite>' + data[i].title + '</cite></a ></div >';
}
$('.layuimini-qiuck').empty();
$('.layuimini-qiuck').html(qiuckHtml);
}
});
}
layui.use(['layer', 'miniTab', 'echarts', 'common'], function () {
var $ = layui.jquery,
layer = layui.layer,
miniTab = layui.miniTab,
common = layui.common,
echarts = layui.echarts;
$(function () {
loadChart();
});
miniTab.listen();
common.iframeInterval(function () {
loadInfo();
noticeInfo();
quickModuleInfo();
}, 30000); //指定30秒刷新一次
/**
* 查看公告信息
**/
$('body').on('click', '.layuimini-notice', function () {
var title = $(this).children('.layuimini-notice-title').text(),
noticeTime = $(this).children('.layuimini-notice-extra').text(),
content = $(this).children('.layuimini-notice-content').html();
var html = '<div style="padding:15px 20px; text-align:justify; line-height: 22px;border-bottom:1px solid #e2e2e2;background-color: #2f4056;color: #ffffff">\n' +
'<div style="text-align: center;margin-bottom: 20px;font-weight: bold;border-bottom:1px solid #718fb5;padding-bottom: 5px"><h4 class="text-danger">' + title + '</h4></div>\n' +
'<div style="font-size: 12px">' + content + '</div>\n' +
'</div>\n';
parent.layer.open({
type: 1,
title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px">' + noticeTime + '</span>',
area: '300px;',
shade: 0.8,
id: 'layuimini-notice',
btn: ['确定'],
btnAlign: 'c',
moveType: 1,
content: html
});
});
/**
* 报表功能
*/
function loadChart() {
var myChart = echarts.init(document.getElementById('echarts-records'));
var xData = [];
var armData = [];
var cpuData = [];
common.ajax({
url: "/SystemSecurity/ServerMonitoring/GetServerData",
dataType: "json",
async: false,
success: function (data) {
var length = data.length;
for (var i = 0; i < length; i++) {
if (data[i]['F_Date'] !== null) {
xData.push(new Date(data[i]['F_Date']).Format("yyyy-MM-dd"));
}
if (data[i]['F_ARM'] !== null) {
armData.push(data[i]['F_ARM']);
}
if (data[i]['F_CPU'] !== null) {
cpuData.push(data[i]['F_CPU']);
}
}
}
});
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['CPU使用率', 'ARM使用率']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
name: 'CPU使用率', type: 'line',
data: cpuData,
lineStyle: {
normal: {
width: 2
}
},
smooth: true,
symbol: 'circle',
symbolSize: 10,
showAllSymbol: true,
color: '#2499F8',
},
{
name: 'ARM使用率', type: 'line',
data: armData,
lineStyle: {
normal: {
width: 2
}
},
smooth: true,
symbol: 'circle',
symbolSize: 10,
showAllSymbol: true,
color: '#F90',
}
]
};
myChart.setOption(option);
// echarts 窗口缩放自适应
window.onresize = function () {
myChart.resize();
}
}
});
</script>
</body>
</html>