405 lines
17 KiB
Go
405 lines
17 KiB
Go
<div class="layui-row ml20" >
|
||
<style>
|
||
.info-box {
|
||
height: 60px;
|
||
background-color: #f2f2f2;
|
||
border: 1px solid #f2f2f2;
|
||
|
||
}
|
||
|
||
|
||
.info-box .info-box-icon {
|
||
border-top-left-radius: 2px;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-bottom-left-radius: 2px;
|
||
display: block;
|
||
float: left;
|
||
height: 60px;
|
||
width: 60px;
|
||
text-align: center;
|
||
font-size: 40px;
|
||
line-height: 60px;
|
||
/*background: rgba(0, 0, 0, 0.2);*/
|
||
background-color:#efefef !important;
|
||
}
|
||
|
||
.info-box .info-box-content {
|
||
padding: 1px 5px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.info-box-content .info-box-text{
|
||
font-size: 16px;
|
||
width: 80%;
|
||
display: block;
|
||
text-align: center;
|
||
color: #888;
|
||
margin: 3px auto;
|
||
}
|
||
|
||
.info-box-content .info-box-number{
|
||
font-size: 20px;
|
||
width: 100%;
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
|
||
.inner-icon{
|
||
font-size:24px;
|
||
color: #efefef !important;
|
||
}
|
||
</style>
|
||
|
||
<div class="layui-row">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space15">
|
||
<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>*/}}
|
||
<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">{{.startJob}}</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-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>
|
||
</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>
|
||
|
||
<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>
|