|
|
|
@ -1,4 +1,4 @@
|
|
|
|
<!DOCTYPE html>
|
|
|
|
`<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
@ -12,9 +12,277 @@
|
|
|
|
#pie {
|
|
|
|
#pie {
|
|
|
|
width: 400px;
|
|
|
|
width: 400px;
|
|
|
|
height: 400px;
|
|
|
|
height: 400px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.mainbody{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 190px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.wrap{
|
|
|
|
|
|
|
|
width: 260px;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
background-color: #dce0e9;
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.header{
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 65px;
|
|
|
|
|
|
|
|
background-color: #adadad;
|
|
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
line-height: 65px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav{
|
|
|
|
|
|
|
|
width:250px;
|
|
|
|
|
|
|
|
margin: 10px 5px 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.list{
|
|
|
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.list h2{
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
|
|
|
background-color: #3889d4;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
transition: .5s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.list h2.on{
|
|
|
|
|
|
|
|
background-color: #393c4a;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.list i{
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
right: 10px;
|
|
|
|
|
|
|
|
top: 16px;
|
|
|
|
|
|
|
|
border: 8px solid transparent;
|
|
|
|
|
|
|
|
border-left-color: #fff;/*triangle*/
|
|
|
|
|
|
|
|
transform:rotate(0deg);
|
|
|
|
|
|
|
|
transform-origin: 1px 8px;
|
|
|
|
|
|
|
|
transition: .5s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.list i.on{
|
|
|
|
|
|
|
|
transform:rotate(90deg);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.hide{
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
height: 0;
|
|
|
|
|
|
|
|
transition: .5s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.hide h5{
|
|
|
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
|
|
|
background-color: #282c3a;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
color:#fff;
|
|
|
|
|
|
|
|
border-bottom:#42495d;
|
|
|
|
|
|
|
|
div{
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.h1, .h2, .h3, .h4, .h5, .h6, a, abbr, body, cite, dd, dl, dt, h1, h2, h3, h4, h5, h6, iframe, input, li, object, ol, p, pre, span, ul {
|
|
|
|
|
|
|
|
font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
a{
|
|
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
ul, li, ol, dl, dt, dd {
|
|
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
div, figure, footer, header, hgroup, html, iframe, img, mark, menu, nav, object, section, span, table, tr, td, th, tbody, tfoot, thead, video {
|
|
|
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.my_msg_list{
|
|
|
|
|
|
|
|
position:inherit;
|
|
|
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
|
|
|
width: 1300px;
|
|
|
|
|
|
|
|
min-height: 400px;
|
|
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.my_msg_list_view{
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
margin-left: 100px;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
padding: 24px 16px;
|
|
|
|
|
|
|
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
|
|
|
|
|
|
|
|
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.28);
|
|
|
|
|
|
|
|
min-height: 520px;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.my_msg_list_box{
|
|
|
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.my_msg_list_con{
|
|
|
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.my_msg_list_title{
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #3d3d3d;
|
|
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
zoom: 1;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.fr{
|
|
|
|
|
|
|
|
float: right!important;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
color: #4a90e2;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.line{
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
height: 12px;
|
|
|
|
|
|
|
|
margin: 2px 12px;
|
|
|
|
|
|
|
|
border-right: 1px solid #979797;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.msg_list{
|
|
|
|
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
|
|
|
|
min-height: 370px;
|
|
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_list_ul{
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
vertical-align: baseline;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_list_ul_li{
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
padding: 16px 0;
|
|
|
|
|
|
|
|
border-bottom: 1px solid #e0e0e0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_type{
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
|
|
padding: 0 5px;
|
|
|
|
|
|
|
|
color: #4d4d4d;
|
|
|
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
border: 1px solid #e0e0e0;
|
|
|
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_info_box{
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
color: #4d4d4d;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_title{
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
width: 85%;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.options-f{
|
|
|
|
|
|
|
|
width: 16%;
|
|
|
|
|
|
|
|
height: 20px;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
margin-top: -20px;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.msg_delete{
|
|
|
|
|
|
|
|
width: 10px;
|
|
|
|
|
|
|
|
height: 10px;
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.msg_content{
|
|
|
|
|
|
|
|
margin-top: 15px;
|
|
|
|
|
|
|
|
margin-bottom: -16px;
|
|
|
|
|
|
|
|
padding: 15px;
|
|
|
|
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
color: #4d4d4d;
|
|
|
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.page-box{
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
margin: 32px 0 20px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
border-top-color: initial;
|
|
|
|
|
|
|
|
border-right-color: initial;
|
|
|
|
|
|
|
|
border-bottom-color: initial;
|
|
|
|
|
|
|
|
border-left-color: initial;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.ule {
|
|
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lie {
|
|
|
|
|
|
|
|
width: 23%;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
font: 13px sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lie a {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
color: rgb(39, 124, 184);
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
padding: 14px 70px;
|
|
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lie a:hover {
|
|
|
|
|
|
|
|
background-color: #e3e3f5;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.ula {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lia {
|
|
|
|
|
|
|
|
width: 23%;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
font: 13px sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lia a {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
font-size: larger;
|
|
|
|
|
|
|
|
color: rgb(0, 0, 0);
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
padding: 14px 50px;
|
|
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lia a:hover {
|
|
|
|
|
|
|
|
background-color: #b7b7b7;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.square{
|
|
|
|
|
|
|
|
width:200px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
height:5px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
border:1px solid transparent;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
background: #06b81a;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript" src="echarts.js"></script>
|
|
|
|
|
|
|
|
<header class="top-navigation">
|
|
|
|
<header class="top-navigation">
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<a class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" x="0" y="0" viewBox="0 0 694.9 10.4" style="enable-background:new 0 0 694.9 104.4" role="img"><title>MDN Web Docs</title>
|
|
|
|
<a class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" x="0" y="0" viewBox="0 0 694.9 10.4" style="enable-background:new 0 0 694.9 104.4" role="img"><title>MDN Web Docs</title>
|
|
|
|
@ -22,66 +290,115 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</header>
|
|
|
|
</header>
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<div class="wrap">
|
|
|
|
|
|
|
|
<div class="header">消息过滤器</div>
|
|
|
|
|
|
|
|
<div class="nav">
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
|
|
<h2><i></i>服务器</h2>
|
|
|
|
|
|
|
|
<div class="hide">
|
|
|
|
|
|
|
|
<h5>北京</h5>
|
|
|
|
|
|
|
|
<h5>长沙</h5>
|
|
|
|
|
|
|
|
<h5>上海</h5>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
|
|
<h2><i></i>响应时间</h2>
|
|
|
|
|
|
|
|
<div class="hide">
|
|
|
|
|
|
|
|
<h5>"<=100ms"</h5>
|
|
|
|
|
|
|
|
<h5>"<=1500ms"</h5>
|
|
|
|
|
|
|
|
<h5>">1500ms"</h5>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
|
|
<h2><i></i>当前服务器状态</h2>
|
|
|
|
|
|
|
|
<div class="hide">
|
|
|
|
|
|
|
|
<h5>正常</h5>
|
|
|
|
|
|
|
|
<h5>受损</h5>
|
|
|
|
|
|
|
|
<h5>繁忙</h5>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="list">
|
|
|
|
|
|
|
|
<h2><i></i>返回消息报头</h2>
|
|
|
|
|
|
|
|
<div class="hide">
|
|
|
|
|
|
|
|
<h5>TCP</h5>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
|
|
var oList = document.querySelectorAll('.list h2'),
|
|
|
|
|
|
|
|
oHide = document.querySelectorAll('.hide'),
|
|
|
|
|
|
|
|
oIcon = document.querySelectorAll('.list i'),
|
|
|
|
|
|
|
|
lastIndex = 0;
|
|
|
|
|
|
|
|
for(var i=0;i<oList.length;i++){
|
|
|
|
|
|
|
|
oList[i].index = i;
|
|
|
|
|
|
|
|
oList[i].isClick = false;
|
|
|
|
|
|
|
|
oList[i].initHeight = oHide[i].clientHeight;
|
|
|
|
|
|
|
|
oHide[i].style.height = '0';
|
|
|
|
|
|
|
|
oList[i].onclick = function () {
|
|
|
|
|
|
|
|
if(this.isClick){
|
|
|
|
|
|
|
|
oHide[this.index].style.height = '0';
|
|
|
|
|
|
|
|
oIcon[this.index].className = '';
|
|
|
|
|
|
|
|
oList[this.index].className = '';
|
|
|
|
|
|
|
|
oList[this.index].isClick = false;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
else{
|
|
|
|
|
|
|
|
oHide[lastIndex].style.height = '0';
|
|
|
|
|
|
|
|
oIcon[lastIndex].className = '';
|
|
|
|
|
|
|
|
oList[lastIndex].className = '';
|
|
|
|
|
|
|
|
oHide[this.index].style.height = '220px';
|
|
|
|
|
|
|
|
oIcon[this.index].className = 'on';
|
|
|
|
|
|
|
|
oList[this.index].className = 'on';
|
|
|
|
|
|
|
|
oList[lastIndex].isClick = false;
|
|
|
|
|
|
|
|
oList[this.index].isClick = true;
|
|
|
|
|
|
|
|
lastIndex = this.index;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})();
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="mainbody">
|
|
|
|
<div class="chart-container">
|
|
|
|
<div class="chart-container">
|
|
|
|
<!--
|
|
|
|
|
|
|
|
- #CHART CARD
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="chart-card">
|
|
|
|
<div class="chart-card">
|
|
|
|
|
|
|
|
|
|
|
|
<h4 class="h3">消息类别统计表</h4>
|
|
|
|
<h4 class="h3">消息类别统计表</h4>
|
|
|
|
<table class="card-table">
|
|
|
|
<table class="card-table">
|
|
|
|
<tbody class="table-body flex-center">
|
|
|
|
<tbody class="table-body flex-center">
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<th class="table-heading" scope="col">北京</th>
|
|
|
|
<th class="table-heading" scope="col">北京</th>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="table-data">
|
|
|
|
<td class="table-data">
|
|
|
|
<div class="chart-bar" data-chart-bar="beijing"></div>
|
|
|
|
<div class="chart-bar" data-chart-bar="beijing"></div>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<th class="table-heading" scope="col">上海</th>
|
|
|
|
<th class="table-heading" scope="col">上海</th>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="table-data">
|
|
|
|
<td class="table-data">
|
|
|
|
<div class="chart-bar" data-chart-bar="shanghai"></div>
|
|
|
|
<div class="chart-bar" data-chart-bar="shanghai"></div>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<tr class="table-row flex-center">
|
|
|
|
<th class="table-heading" scope="col">长沙</th>
|
|
|
|
<th class="table-heading" scope="col">长沙</th>
|
|
|
|
|
|
|
|
|
|
|
|
<td class="table-data">
|
|
|
|
<td class="table-data">
|
|
|
|
<div class="chart-bar" data-chart-bar="长沙"></div>
|
|
|
|
<div class="chart-bar" data-chart-bar="长沙"></div>
|
|
|
|
</td>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
<span class="tooltip text" data-tooltip></span>
|
|
|
|
<span class="tooltip text" data-tooltip></span>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="wrapper flex-center">
|
|
|
|
<div class="wrapper flex-center">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-meta">
|
|
|
|
<div class="card-meta">
|
|
|
|
<p class="text">最近7天总共有：</p>
|
|
|
|
<p class="text">最近7天总共有：</p>
|
|
|
|
|
|
|
|
|
|
|
|
<data class="meta-value" value="478.33">478条</data>
|
|
|
|
<data class="meta-value" value="478.33">478条</data>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="card-meta">
|
|
|
|
<div class="card-meta">
|
|
|
|
<data class="meta-value small" value="2.4">+2.4%</data>
|
|
|
|
<data class="meta-value small" value="2.4">+2.4%</data>
|
|
|
|
|
|
|
|
|
|
|
|
<p class="text">from last month</p>
|
|
|
|
<p class="text">from last month</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--
|
|
|
|
|
|
|
|
- custom js link
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
<script src="./assets/js/script.js" type="module" defer></script>
|
|
|
|
<script src="./assets/js/script.js" type="module" defer></script>
|
|
|
|
<div class="piechart" id="pie"></div>
|
|
|
|
<div class="piechart" id="pie"></div>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
@ -136,7 +453,6 @@
|
|
|
|
};
|
|
|
|
};
|
|
|
|
pie.setOption(pieOption);
|
|
|
|
pie.setOption(pieOption);
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="my_msg_list">
|
|
|
|
<div class="my_msg_list">
|
|
|
|
<div class="my_msg_list_view">
|
|
|
|
<div class="my_msg_list_view">
|
|
|
|
<div class="my_msg_list_box">
|
|
|
|
<div class="my_msg_list_box">
|
|
|
|
@ -155,33 +471,11 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="ula">
|
|
|
|
<div class="ula">
|
|
|
|
<div class="lia"><a href="#home"><span><div class="square"></div></span>北京</a></div>
|
|
|
|
<div class="lia"><a href="#home"><span><div class="square"></div></span>北京</a></div>
|
|
|
|
<div class="lia"><a href="#news">
|
|
|
|
<div class="lia"><a href="#news">100ms</a></div>
|
|
|
|
<script language="javascript"type="text/javascript">
|
|
|
|
|
|
|
|
a = $.ajax({
|
|
|
|
|
|
|
|
url: "./assets/js/data.json",
|
|
|
|
|
|
|
|
type: "GET",
|
|
|
|
|
|
|
|
dataType: "json",
|
|
|
|
|
|
|
|
async: false,
|
|
|
|
|
|
|
|
success: function(data) {
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
aa=a.recentTime ;
|
|
|
|
|
|
|
|
result=$.parseJSON(a["recentTime"])
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</a></div>
|
|
|
|
|
|
|
|
<div class="lia"><a href="#contact">正常</a></div>
|
|
|
|
<div class="lia"><a href="#contact">正常</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="fr options_info options-f">
|
|
|
|
|
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
|
|
|
|
|
<img src="./assets/images/delete.png"
|
|
|
|
|
|
|
|
width="20px"
|
|
|
|
|
|
|
|
height="20px">
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="msg_content ">第一个测试发送消息的内容</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
<li class="msg_list_ul_li">
|
|
|
|
<li class="msg_list_ul_li">
|
|
|
|
<div class="ula">
|
|
|
|
<div class="ula">
|
|
|
|
<div class="lia"><a href="#home">长沙</a></div>
|
|
|
|
<div class="lia"><a href="#home">长沙</a></div>
|
|
|
|
@ -189,15 +483,7 @@
|
|
|
|
<div class="lia"><a href="#contact">受损</a></div>
|
|
|
|
<div class="lia"><a href="#contact">受损</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="fr options_info options-f">
|
|
|
|
|
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
|
|
|
|
|
<img src="./assets/images/delete.png"
|
|
|
|
|
|
|
|
width="20px"
|
|
|
|
|
|
|
|
height="20px">
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="msg_content ">第一个测试发送消息的内容</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
<li class="msg_list_ul_li">
|
|
|
|
<li class="msg_list_ul_li">
|
|
|
|
<div class="ula">
|
|
|
|
<div class="ula">
|
|
|
|
@ -206,26 +492,15 @@
|
|
|
|
<div class="lia"><a href="#contact">繁忙</a></div>
|
|
|
|
<div class="lia"><a href="#contact">繁忙</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
<div class="lia"><a href="#about">TCP</a></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="fr options_info options-f">
|
|
|
|
|
|
|
|
<a class="btn-rush csdnc-trash" style="float: right;">
|
|
|
|
|
|
|
|
<img src="./assets/images/delete.png"
|
|
|
|
|
|
|
|
width="20px"
|
|
|
|
|
|
|
|
height="20px">
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
<em class="data-time" style="float: right;padding-right:10px">2019-03-28</em>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="msg_content ">第三个测试发送消息的内容，大声说出你们的爱</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="page-box">
|
|
|
|
<div class="page-box">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="./assets/js/script.js" type="module" defer></script>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
|
|
|
|
</html>
|
|
|
|
</html>
|
