优化首页内容
This commit is contained in:
georgehao
@@ -1,9 +1,10 @@
|
||||
<div class="layui-row ml20" >
|
||||
<style>
|
||||
.info-box {
|
||||
height: 85px;
|
||||
background-color: white;
|
||||
background-color: #ecf0f5;
|
||||
height: 60px;
|
||||
background-color: #f2f2f2;
|
||||
border: 1px solid #f2f2f2;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -14,34 +15,40 @@
|
||||
border-bottom-left-radius: 2px;
|
||||
display: block;
|
||||
float: left;
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
font-size: 45px;
|
||||
line-height: 85px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
/*background: rgba(0, 0, 0, 0.2);*/
|
||||
background-color:#efefef !important;
|
||||
}
|
||||
|
||||
.info-box .info-box-content {
|
||||
padding: 5px 10px;
|
||||
margin-left: 85px;
|
||||
padding: 1px 5px;
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.info-box-content .info-box-text{
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
width: 80%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
margin: 10px auto;
|
||||
color: #888;
|
||||
margin: 3px auto;
|
||||
}
|
||||
|
||||
.info-box-content .info-box-number{
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inner-icon{
|
||||
font-size:24px;
|
||||
color: #efefef !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="layui-row">
|
||||
@@ -51,153 +58,347 @@
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon" style="background-color:#00a65a !important;color:white;"><i class="fa fa-check" aria-hidden="true"></i></span>
|
||||
{{/*<span class="info-box-icon" style="background-color:#f39c12 !important;color:white;"><i class="fa fa-hourglass" aria-hidden="true"></i></span>*/}}
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-hourglass fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">最近执行成功</span>
|
||||
<span class="info-box-number">{{.okJob}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon" style="background-color:#dd4b39 !important;color:white;"><i class="fa fa-exclamation" aria-hidden="true"></i></span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">最近执行失败</span>
|
||||
<span class="info-box-number">{{.failJob}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon" style="background-color:#f39c12 !important;color:white;"><i class="fa fa-hourglass" aria-hidden="true"></i></span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">即将执行的任务</span>
|
||||
<span class="info-box-text">即将执行的任务</span>
|
||||
<span class="info-box-number">{{.startJob}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon" style="background-color:#00c0ef !important;color:white;"><i class="fa fa-database" aria-hidden="true"></i></span>
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-question fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">待审核任务数量</span>
|
||||
<span class="info-box-number">{{.totalAuditTask}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-check fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">近期执行成功</span>
|
||||
<span class="info-box-number">{{.successNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-exclamation fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">近期执行失败</span>
|
||||
<span class="info-box-number">{{.errorNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-user fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">当前用户总数</span>
|
||||
<span class="info-box-number">{{.userNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-tasks fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">定时任务总数量</span>
|
||||
<span class="info-box-number">{{.totalJob}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-calculator fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">累计运行次数</span>
|
||||
<span class="info-box-number">{{.TaskTotalRunNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="info-box">
|
||||
<span class="fa-stack fa-lg info-box-icon" >
|
||||
<i class="fa fa-circle fa-stack-1x" style="color:#fff !important;">
|
||||
<i class="fa fa-sticky-note fa-inverse fa-stack-1x inner-icon" ></i>
|
||||
</i>
|
||||
</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">当前日志总量</span>
|
||||
<span class="info-box-number">{{.totalLog}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</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" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col width="50">
|
||||
<col >
|
||||
<col >
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>任务名称</th>
|
||||
<th>开始时间</th>
|
||||
<th>执行结果</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .recentLogs}}
|
||||
<tr>
|
||||
<td>{{$k}}</td>
|
||||
<td><a href="{{urlfor "TaskLogController.Detail" "id" $v.id}}" class="news-item-title">
|
||||
{{$v.task_name}} # {{$v.id}}
|
||||
</a></td>
|
||||
<td>{{$v.start_time}}</td>
|
||||
<td>{{if eq $v.status 0}}
|
||||
正常
|
||||
{{else if eq $v.status -1}}
|
||||
<span style="color:red">异常</span>
|
||||
{{else}}
|
||||
<span style="color:red">超时</span>
|
||||
{{end}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="3">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card" style="background: #fff">
|
||||
<div class="layui-card-header">即将执行的任务</div>
|
||||
<div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务名称</th>
|
||||
<th>执行时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
{{range $k, $v := .jobs}}
|
||||
<tr>
|
||||
<td><a href="{{urlfor "TaskController.Logs" "id" $v.task_id}}" class="news-item-title">{{$v.task_name}}-{{$v.task_group}} # {{$v.task_id}}</a></td>
|
||||
<td>{{$v.next_time}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="2">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md4">
|
||||
<div class="layui-card" style="background: #fff">
|
||||
<div class="layui-card-header">系统概况</div>
|
||||
<div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>值</th>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">系统概况</li>
|
||||
<li>即将开始的任务</li>
|
||||
<li>最近失败的任务</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div class="layui-col-md8" id="charts-box">
|
||||
{{/*图表*/}}
|
||||
<div id="main" style=" height: 528px;"></div>
|
||||
</div>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .sysInfo}}
|
||||
<tr>
|
||||
<td># {{$k}} </td>
|
||||
<td>{{$v}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="2">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="layui-col-md4" >
|
||||
{{/*系统概况*/}}
|
||||
<div class="layui-card" style="background: #fff" id="sys">
|
||||
<div class="layui-card-header">系统概况</div>
|
||||
<div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数</th>
|
||||
<th>值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .sysInfo}}
|
||||
<tr>
|
||||
<td># {{$k}} </td>
|
||||
<td>{{$v}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="2">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<div class="layui-card" style="background: #fff">
|
||||
<div class="layui-card-header">即将执行的任务</div>
|
||||
<div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col>
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务名称</th>
|
||||
<th>执行时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .jobs}}
|
||||
<tr>
|
||||
<td><a href="{{urlfor "TaskController.Logs" "id" $v.task_id}}" class="news-item-title">{{$v.task_name}}-{{$v.task_group}} # {{$v.task_id}}</a></td>
|
||||
<td>{{$v.next_time}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="2">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
{{/*执行失败的任务*/}}
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">最近执行的任务</div>
|
||||
<div class="layui-card-body" style="height: 465px; padding-bottom: 10px; overflow: auto">
|
||||
<table class="layui-table" lay-size="sm">
|
||||
<colgroup>
|
||||
<col width="50">
|
||||
<col >
|
||||
<col >
|
||||
<col>
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>任务名称</th>
|
||||
<th>开始时间</th>
|
||||
<th>执行结果</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range $k, $v := .errLogs}}
|
||||
<tr>
|
||||
<td>{{$k}}</td>
|
||||
<td><a href="javascript:;" onclick="logDetail({{$v.id}});" class="news-item-title">
|
||||
{{$v.task_name}} # {{$v.id}}
|
||||
</a></td>
|
||||
<td>{{$v.start_time}}</td>
|
||||
<td>{{if eq $v.status 0}}
|
||||
正常
|
||||
{{else if eq $v.status -1}}
|
||||
<span style="color:red">异常</span>
|
||||
{{else}}
|
||||
<span style="color:red">超时</span>
|
||||
{{end}}</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="3">暂无信息</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/echarts/echarts.min.js"></script>
|
||||
<script src="/static/layui/layui.js"></script>
|
||||
<script>
|
||||
var $;
|
||||
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
|
||||
layui.use('element', function(){
|
||||
var element = layui.element;
|
||||
|
||||
$ = layui.$;
|
||||
resizeChartbox();
|
||||
window.onresize = function(){
|
||||
resizeChartbox();
|
||||
}
|
||||
function resizeChartbox()
|
||||
{
|
||||
height = $("#sys").height();
|
||||
width = $("#charts-box").width();
|
||||
$("#main").width(width-200);
|
||||
$("#main").height(height);
|
||||
}
|
||||
element.render();
|
||||
//…
|
||||
});
|
||||
|
||||
function logDetail(id){
|
||||
window.parent.openTab("/tasklog/detail?id="+id,id+' 日志详情',"admin_log_detail-"+id,'');
|
||||
}
|
||||
|
||||
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: '运行概况'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data:['任务执行失败','任务执行超时','任务执行成功']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: {{.days}}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'任务执行失败',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:{{.errNum}}
|
||||
},
|
||||
{
|
||||
name:'任务执行超时',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:{{.expiredNum}}
|
||||
},
|
||||
{
|
||||
name:'任务执行成功',
|
||||
type:'line',
|
||||
stack: '总量',
|
||||
data:{{.okNum}}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user