351 lines
12 KiB
HTML
351 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
|
||
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||
<script src="./node_modules/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
|
||
<link href="./node_modules/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
|
||
<style>
|
||
.loginIco {
|
||
width: 160px;
|
||
height: 50px;
|
||
}
|
||
|
||
table.gridtable {
|
||
font-family: verdana, arial, sans-serif;
|
||
font-size: 0.8em;
|
||
line-height: 1;
|
||
color: #333333;
|
||
border-width: 1px;
|
||
border-color: #666666;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
table.gridtable th {
|
||
border-width: 1px;
|
||
padding: 0.3em 1em;
|
||
border-style: solid;
|
||
border-color: #666666;
|
||
background-color: #dedede;
|
||
}
|
||
|
||
table.gridtable td {
|
||
border-width: 1px;
|
||
padding: 0.3em 1em;
|
||
border-style: solid;
|
||
border-color: #666666;
|
||
background-color: #ffffff;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container-fluid">
|
||
<div class="row" style="margin-top:10px">
|
||
<div class="col-md-1 col-xs-6 loginIco">
|
||
<a href="#">
|
||
<img src="./image/logo.png" class="img-responsive center-block" />
|
||
</a>
|
||
</div>
|
||
<div class="col-md-6 col-xs-6" style=" margin-top:8px;">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control">
|
||
<span class="input-group-addon btn btn-primary">搜索</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2 col-md-offset-2">
|
||
<div class="row" style="margin-top:10px">
|
||
<div class="dropdown">
|
||
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||
Xin
|
||
<span class="caret"></span>
|
||
</button>
|
||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||
<li><a href="#">新增应用</a></li>
|
||
<li class="disabled"><a href="#">新增应用</a></li>
|
||
<li role="separator" class="divider"></li>
|
||
<li><a href="#">新增应用</a></li>
|
||
<li><a href="#">新增应用</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr/>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-4 ">
|
||
<div class="input-group">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="analyTypeDropDown">Action</span><span class="caret"></span></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="1">时报表</a></li>
|
||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="2">日报表</a></li>
|
||
<li><a href="javascript:void(0);" name="analyTypeDropDownOption" value="3">月报表</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /btn-group -->
|
||
<input type="text" class="form-control" readonly id="datetimepicker">
|
||
<span class="input-group-btn">
|
||
<button class="btn btn-default" type="button">Go!</button>
|
||
</span>
|
||
</div>
|
||
<!-- /input-group -->
|
||
</div>
|
||
<div class="col-md-4 col-md-offset-4">
|
||
<a href="#" class="glyphicon glyphicon-bookmark">
|
||
</a>
|
||
<span><a>上个小时报表</a></span>
|
||
<span><a>昨天报表</a></span>
|
||
<span><a>本月报表</a></span>
|
||
<span><a>上月报表</a></span>
|
||
</div>
|
||
</div>
|
||
<hr/>
|
||
<div class="row">
|
||
<div>
|
||
<table class="gridtable" style="width:100%">
|
||
<thead>
|
||
<tr>
|
||
<th>LevelId</th>
|
||
<th>ViewPoint</th>
|
||
<th>应用</th>
|
||
<th>调用次数</th>
|
||
<th>正确次数</th>
|
||
<th>错误次数</th>
|
||
<th>正确率</th>
|
||
<th>平均耗时</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dataBody">
|
||
<tr id="a">
|
||
<td>0</td>
|
||
<td>Http://localhost:8080/order/save1</td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="b">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a id="popBtn" data-toggle="modal" data-target="#myModal">com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
|
||
<td>Account-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="c">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
|
||
<td>Biling-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="d">
|
||
<td >0.2</td>
|
||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="e">
|
||
<td valign="middle">0.3</td>
|
||
<td> <a>com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="f">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<hr/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<!-- 模态框（Modal） -->
|
||
<div class="modal fade " id="myModal" tabindex="-1" role="dialog"
|
||
aria-labelledby="myModalLabel" aria-hidden="true">
|
||
<div class="modal-dialog " style="width:1000px">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
典型调用链管理
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-2">
|
||
典型调用连列表
|
||
</div>
|
||
<div class="col-md-10">
|
||
<a>典型调用连A</a> <a>典型调用连A</a> <a>典型调用连A</a> <a>典型调用连A</a>
|
||
</div>
|
||
</div>
|
||
<hr/>
|
||
<div class="row">
|
||
<table class="gridtable" style="margin:10px">
|
||
<thead>
|
||
<tr>
|
||
<th>LevelId</th>
|
||
<th>ViewPoint</th>
|
||
<th>应用</th>
|
||
<th>调用次数</th>
|
||
<th>正确次数</th>
|
||
<th>错误次数</th>
|
||
<th>正确率</th>
|
||
<th>平均耗时</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="dataBody">
|
||
<tr id="a">
|
||
<td>0</td>
|
||
<td>Http://localhost:8080/order/save1</td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="b">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a id="popBtn" data-toggle="modal" data-target="#myModal">com.ai.aisse.core.service.impl...taServiceImpl.SynchAisseData()</a></td>
|
||
<td>Account-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="c">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a>com.ai.aisse.core.dao.impl.Syn...taDaoImpl.queryAppAisseTimer()</a></td>
|
||
<td>Biling-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="d">
|
||
<td >0.2</td>
|
||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="e">
|
||
<td valign="middle">0.3</td>
|
||
<td> <a>com.ai.aisse.core.dao.impl.Syn...AisseTimer(java.sql.Timestamp)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
<tr id="f">
|
||
<td valign="middle">0.0</td>
|
||
<td> <a>tracing:jdbc:oracle:thin:@10.1.1.61:1521:OAPROD(aisse)</a></td>
|
||
<td>Order-Application</td>
|
||
<td>100</td>
|
||
<td>100</td>
|
||
<td>0</td>
|
||
<td>100%</td>
|
||
<td>20.0ms</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<hr/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- /.modal-content -->
|
||
</div><!-- /.modal -->
|
||
<script>
|
||
$(document).ready(function() {
|
||
$('#datetimepicker').val();
|
||
$('#datetimepicker').datetimepicker({
|
||
format: 'yyyy-mm-dd',
|
||
startView: 2,
|
||
minView: 2,
|
||
autoclose: true
|
||
});
|
||
|
||
$("a[name='analyTypeDropDownOption']").each(function() {
|
||
$(this).click(function() {
|
||
$("#analyTypeDropDown").text($(this).text());
|
||
var value = $(this).attr("value");
|
||
var formatStr = 'yyyy-mm-dd';
|
||
if (value == "1") {
|
||
formatStr = 'yyyy-mm-dd:hh'
|
||
} else if (value == "2") {
|
||
formatStr = 'yyyy-mm-dd'
|
||
} else if (value == "3") {
|
||
formatStr = 'yyyy-mm'
|
||
}
|
||
$('#datetimepicker').datetimepicker('remove');
|
||
$('#datetimepicker').datetimepicker({
|
||
format: formatStr,
|
||
startView: value,
|
||
minView: value,
|
||
autoclose: true
|
||
});
|
||
});
|
||
});
|
||
|
||
$("a[name='analyTypeDropDownOption'][value='2']").click();
|
||
|
||
//alert(getPreviousMonth());
|
||
$("#popBtn").click(function() {
|
||
|
||
});
|
||
});
|
||
|
||
function getPreviousMonth() {
|
||
var date = new Date();
|
||
var seperator1 = "-";
|
||
var month = date.getMonth();
|
||
var year = date.getFullYear();
|
||
if (month == 0) {
|
||
year = date.getFullYear() - 1;
|
||
month = 12;
|
||
}
|
||
if (month >= 1 && month <= 9) {
|
||
month = "0" + month;
|
||
}
|
||
return year + seperator1 + month;
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|