<!DOCTYPE html>
|
<html>
|
<head>
|
<div th:replace="common/header.html"></div>
|
|
|
</head>
|
<body th:class="${application.sidebarCollapse}">
|
<div th:replace="common/chart.html"></div>
|
|
<div class="wrapper" >
|
|
<div th:replace="common/navbar.html"></div>
|
|
<div th:replace="common/aside.html"></div>
|
|
<!-- Content Wrapper. Contains page content -->
|
<div class="content-wrapper" style="font-size:0.90rem">
|
<!-- Content Header (Page header) -->
|
<section class="content-header" style="height:38px">
|
<div class="container-fluid">
|
<div class="row mb-2" style="margin-top: -7px;">
|
<div class="col-sm-6"><h5 class="card-title"><i class="nav-icon fas fa-chart-pie"></i> 按照时间维度统计报表</h5></div>
|
<div class="col-sm-6">
|
<ol class="breadcrumb float-sm-right">
|
<li class="breadcrumb-item">
|
<th:block th:if="${days == '1'}"><button type="button" onclick="search('1')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">昨天</button></th:block>
|
<th:block th:if="${days != '1'}"><button type="button" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="right"
|
data-content="昨天24小时" onclick="search('1')" class="btn btn-primary btn-sm">昨天</button></th:block>
|
</li>
|
<li class="breadcrumb-item">
|
<th:block th:if="${days == '7'}"><button type="button" onclick="search('7')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近7天</button></th:block>
|
<th:block th:if="${days != '7'}"><button type="button" onclick="search('7')" class="btn btn-primary btn-sm">最近7天</button></th:block>
|
</li>
|
<li class="breadcrumb-item">
|
<th:block th:if="${days == '15'}"><button type="button" onclick="search('15')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近15天</button></th:block>
|
<th:block th:if="${days != '15'}"><button type="button" onclick="search('15')" class="btn btn-primary btn-sm">最近15天</button></th:block>
|
</li>
|
<li class="breadcrumb-item">
|
<th:block th:if="${days == '30'}"><button type="button" onclick="search('30')" disabled="true" title="当前已显示该时间段图表" class="btn btn-primary btn-sm">最近30天</button></th:block>
|
<th:block th:if="${days != '30'}"><button type="button" onclick="search('30')" class="btn btn-primary btn-sm">最近30天</button></th:block>
|
</li>
|
<li class="breadcrumb-item">
|
<button type="button" th:onclick="excelExport([[${days}]])" class="btn btn-primary btn-sm">导出Excel</button>
|
</li>
|
<li class="breadcrumb-item"><a href="javascript:history.back()">返回上级</a></li>
|
</ol>
|
</div>
|
</div>
|
</div><!-- /.container-fluid -->
|
</section>
|
|
<!-- Main content -->
|
<section class="content">
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
<label style="margin-left: .9rem;margin-top: 20px">告警总次数(告警总次数为所有资源的告警次数，不会区分成员账号。页内其它图表统计，若登录账号为管理员或只读账号，会统计所有主机，否则只会统计当前登录账号的管理主机)</label><br>
|
<div class="col-sm-12" id="container1"></div>
|
</div>
|
<div class="row mb-2">
|
<label style="margin-left: .9rem">主机内存使用率%最高</label><br>
|
<div class="col-sm-12" id="container2"></div>
|
</div>
|
<div class="row mb-2">
|
<label style="margin-left: .9rem">主机cpu使用率%最高</label><br>
|
<div class="col-sm-12" id="container3"></div>
|
</div>
|
<div class="row mb-2">
|
<label style="margin-left: .9rem">主机上下行传输速率最高，单位MB/s</label><br>
|
<div class="col-sm-12" id="container4"></div>
|
</div>
|
<div class="row mb-2">
|
<label style="margin-left: .9rem">主机系统负载值最高</label><br>
|
<div class="col-sm-12" id="container5"></div>
|
</div>
|
<div class="row mb-2">
|
<label style="margin-left: .9rem">主机连接数量最高</label><br>
|
<div class="col-sm-12" id="container6"></div>
|
</div>
|
|
|
|
</div><!-- /.container-fluid -->
|
</section>
|
</div>
|
|
<div th:replace="common/chart.html"></div>
|
<div th:replace="common/footer.html"></div>
|
|
</div>
|
<!-- ./wrapper -->
|
<link rel="stylesheet" th:href="@{'/static/js/jQuery/validationEngine.jquery.css'}" type="text/css"/>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine-zh_CN.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/jQuery/jquery.validationEngine.js'}" type="text/javascript" charset="utf-8"></script>
|
<script th:src="@{'/static/js/report.js?v=3.4.0'}"></script>
|
<script th:inline="javascript">
|
var msg = [[${msg}]];
|
if(msg!='' && msg!=null){
|
toastr.info(msg);
|
}
|
const mainBarChartData = [[${mainBarChart}]];
|
const memBarChartData = [[${memBarChart}]];
|
const cpuBarChartData = [[${cpuBarChart}]];
|
const netIoBarChartValueData = [[${netIoBarChartValue}]];
|
const netIoBarChartFiledData = [[${netIoBarChartFiled}]];
|
const loadBarChartValueData = [[${loadBarChartValue}]];
|
const loadBarChartFiledData = [[${loadBarChartFiled}]];
|
const netConnectionsChartData = [[${netConnectionsChart}]];
|
|
|
|
const chart = new G2.Chart({
|
container: 'container1',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart.source(mainBarChartData, {
|
vote: {
|
alias: '告警次数',
|
min: 0,
|
formatter: val => {
|
return val + '次';
|
}
|
}
|
});
|
chart.legend(false);
|
chart.axis('vote', {
|
labels: null,
|
title: null,
|
line: null,
|
tickLine: null
|
});
|
chart.interval()
|
.position('name*vote')
|
.color('name');
|
chart.render();
|
|
const chart2 = new G2.Chart({
|
container: 'container2',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart2.source(memBarChartData, {
|
vote: {
|
alias: '最高内存使用率%',
|
min: 0,
|
formatter: val => {
|
return val + '%';
|
}
|
}
|
});
|
chart2.legend(false);
|
chart2.axis('value', {
|
labels: null,
|
title: null,
|
line: null,
|
tickLine: null
|
});
|
chart2.interval()
|
.position('name*value')
|
.color('#4FAAEB');
|
chart2.render();
|
|
|
const chart3 = new G2.Chart({
|
container: 'container3',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart3.source(cpuBarChartData, {
|
vote: {
|
alias: '最高cpu使用率%',
|
min: 0,
|
formatter: val => {
|
return val + '%';
|
}
|
}
|
});
|
chart3.legend(false);
|
chart3.axis('value', {
|
labels: null,
|
title: null,
|
line: null,
|
tickLine: null
|
});
|
chart3.interval()
|
.position('name*value')
|
.color('#db4c3c');
|
chart3.render();
|
|
|
const dsNetIoBarChar = new DataSet();
|
const dvNetIoBarChar = dsNetIoBarChar.createView().source(netIoBarChartValueData);
|
dvNetIoBarChar.transform({
|
type: 'fold',
|
fields: netIoBarChartFiledData, // 展开字段集
|
key: '时间', // key字段
|
value: '上下行速率最高' // value字段
|
});
|
const chart4 = new G2.Chart({
|
container: 'container4',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart4.source(dvNetIoBarChar);
|
chart4.legend({
|
position: 'top-center'
|
});
|
chart4.intervalStack()
|
.position('时间*上下行速率最高')
|
.color('name');
|
chart4.render();
|
|
const dsLoadBarChar = new DataSet();
|
const dvLoadBarChar = dsLoadBarChar.createView().source(loadBarChartValueData);
|
dvLoadBarChar.transform({
|
type: 'fold',
|
fields: loadBarChartFiledData, // 展开字段集
|
key: '时间', // key字段
|
value: '系统负载值最高' // value字段
|
});
|
const chart5 = new G2.Chart({
|
container: 'container5',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart5.legend({
|
position: 'top-center'
|
});
|
chart5.source(dvLoadBarChar);
|
chart5.intervalStack()
|
.position('时间*系统负载值最高')
|
.color('name');
|
chart5.render();
|
|
const chart6 = new G2.Chart({
|
container: 'container6',
|
forceFit: true,
|
height: 400,
|
padding: [ 60, 50, 40, 60 ]
|
});
|
chart6.source(netConnectionsChartData, {
|
vote: {
|
alias: '主机连接数量最高',
|
min: 0
|
}
|
});
|
chart6.line().position('name*vote').shape('hv');
|
chart6.render();
|
|
|
</script>
|
</body>
|
</html>
|
