流量统计首页样式更新
This commit is contained in:
zhangwei
@@ -15,7 +15,32 @@
|
||||
<script src="js/html5shiv.min.js"></script>
|
||||
<script src="js/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<style>
|
||||
body {
|
||||
overflow-x:hidden
|
||||
}
|
||||
.chart_topic text {
|
||||
color: #fff
|
||||
}
|
||||
.fa-arrow-circle-up {
|
||||
color: #fe392e;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
line-height: 9px !important;
|
||||
}
|
||||
.fa-arrow-circle-down {
|
||||
color: #42DEEB;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
line-height: 9px !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -118,7 +143,6 @@
|
||||
<i class="fa fa-unlink"> </i>
|
||||
</div>
|
||||
<div class="fl_fc">
|
||||
<!-- <a href="javacript:;"> -->
|
||||
<p data-original-title="<spring:message code="active_link"/>"
|
||||
class="tooltips" data-flag="false" data-html="true" data-placement="top">
|
||||
<!-- 活跃链接数 --><spring:message code="active_link"/></p>
|
||||
@@ -162,27 +186,40 @@
|
||||
<div class="main_left fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_ipactive_chart"/> <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><spring:message code="traffic_ipactive_chart"/></label>
|
||||
<span class="label_block" style="border-left:2px #646d8a solid;">
|
||||
<label class="btn2"> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
<span class="label_block" style="border-left:2px #626a87 solid;">
|
||||
<label><a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
|
||||
<!-- 活跃IP图 --> <div class="chart-back" id="chart_main" style="width:100%;height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 协议类型图 -->
|
||||
<div class="main_center fl">
|
||||
<div class="center_text">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_protocol_chart"/> <a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a>
|
||||
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><spring:message code="traffic_protocol_chart"/></label>
|
||||
<span class="label_block" style="border-left:2px #575073 solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
<span class="label_block" style="border-left:2px #575073 solid;">
|
||||
<label><a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
|
||||
<div id="chart_1" class="chart-back" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 活跃端口 -->
|
||||
<div class="main_right fr">
|
||||
<div class="right_1">
|
||||
<div class="main_title_port">
|
||||
<spring:message code="active_port"/> <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><spring:message code="active_port"/></label>
|
||||
<span class="label_block" style="border-left:2px #575073 solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="main_table_port">
|
||||
@@ -209,20 +246,25 @@
|
||||
<div class="main_left1 fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="service"/> <%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%>
|
||||
<a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a> <a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<label class="txt"><spring:message code="service"/></label>
|
||||
<span class="label_block" style="border-left:2px #99879b solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
<span class="label_block" style="border-left:2px #9f8da1 solid;">
|
||||
<label><a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main_center1 fl">
|
||||
<div class="bottom_web fl">
|
||||
<div class="main_title_web">
|
||||
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/traffic/webTypeList"><i class="fa fa-line-chart"></i></a>
|
||||
<a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><spring:message code="traffic_website_list"/></label>
|
||||
<span class="label_block" style="border-left:2px #824e6a solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="main_table_web">
|
||||
<table>
|
||||
@@ -239,13 +281,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_right1 fl">
|
||||
<div class="main_right1 fl" style="margin-left:5px;">
|
||||
<div class="bottom_web fl">
|
||||
<%-- <div class="main_title_web">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div> --%>
|
||||
<div class="main_table_web">
|
||||
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div>
|
||||
<!-- http网站分类图 --><div id="chart_4" class=""></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,8 +297,13 @@
|
||||
<div class="main_left1 fl">
|
||||
<div class="left_1">
|
||||
<div class="main_title1">
|
||||
<spring:message code="traffic_app_chart"/> <a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a>
|
||||
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><spring:message code="traffic_app_chart"/></label>
|
||||
<span class="label_block" style="border-left:2px #5c6a78 solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
<span class="label_block" style="border-left:2px #5c6a78 solid;">
|
||||
<label><a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
|
||||
</div>
|
||||
@@ -265,8 +312,10 @@
|
||||
<div class="main_center1 fl">
|
||||
<div class="bottom_web fl">
|
||||
<div class="main_title_web">
|
||||
<!-- 终端 -->OS/BS <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
|
||||
<label class="txt"><!-- 终端 -->OS/BS </label><!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<span class="label_block" style="border-left:2px #6e5377 solid;">
|
||||
<label><a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a></label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="main_table_web">
|
||||
<table>
|
||||
@@ -275,9 +324,9 @@
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th>
|
||||
<div class="choice">
|
||||
<select name="uaSelect" id="uaSelect">
|
||||
<option value="system"><spring:message code="os"/></option>
|
||||
<option value="browser"><spring:message code="browser"/></option>
|
||||
<select name="uaSelect" id="uaSelect" style="text-align:center; text-align-last:center; -webkit-appearance: none; background-color: #3D495F; width: 80px;" class="minimal">
|
||||
<option value="system"> <spring:message code="os"/></option>
|
||||
<option value="browser"> <spring:message code="browser"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
@@ -291,101 +340,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_right1 fl">
|
||||
<div class="bottom_web fl">
|
||||
<div class="bottom_web fl" style="margin-left:5px;">
|
||||
<%-- <div class="main_title_web">
|
||||
<spring:message code="traffic_website_type_chart"/>
|
||||
</div> --%>
|
||||
<div class="main_table_web">
|
||||
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 470px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 第4行 -->
|
||||
<%-- <div class="data_bottom">
|
||||
<div class="bottom_1 fl">
|
||||
<div class="main_title">
|
||||
<!-- 终端 -->BS <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th>
|
||||
<div class="choice">
|
||||
<select name="uaSelect" id="uaSelect">
|
||||
<option value="system"><spring:message code="os"/></option>
|
||||
<option value="browser"><spring:message code="browser"/></option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData1">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>windows</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_center fl">
|
||||
<div class="bottom_2 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="BS"/>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_3 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_website_list"/> <a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
|
||||
</div>
|
||||
<div class="main_table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th><spring:message code="ranking"/></th>
|
||||
<th><spring:message code="website"/></th>
|
||||
<th><spring:message code="trend"/></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tbodyData2">
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>baidu.com</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_3 fl">
|
||||
<div class="main_title">
|
||||
<spring:message code="traffic_app_chart"/> <!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
|
||||
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
|
||||
</div>
|
||||
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> --%>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--content结束-->
|
||||
<!-- 列表显示 -->
|
||||
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
|
||||
@@ -634,12 +601,13 @@ function portActiveList(){
|
||||
var tr = "<tr class='frist rowData'>";
|
||||
tr += "<td class='list_c1' style='color:#fff' title='"+itemObj.port+"'>"+itemObj.port+"</td>";
|
||||
tr += "<td class='list_c2' style='color:#fff'>"+count+"</td>";
|
||||
|
||||
if(preCount<count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
|
||||
}else if(preCount>count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
|
||||
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
|
||||
}
|
||||
$("#tbodyDataPort").prepend(tr);
|
||||
})
|
||||
@@ -726,11 +694,11 @@ function systemList(){
|
||||
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
|
||||
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+os+"</td>";
|
||||
if(preCount<count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
|
||||
}else if(preCount>count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
|
||||
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
|
||||
}
|
||||
n=n-1;
|
||||
$("#tbodyData1").prepend(tr);
|
||||
@@ -837,11 +805,11 @@ function browserList() {
|
||||
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
|
||||
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+bs+"</td>";
|
||||
if(preCount<count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
|
||||
}else if(preCount>count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
|
||||
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
|
||||
}
|
||||
$("#tbodyData1").prepend(tr);
|
||||
n=n-1;
|
||||
@@ -901,11 +869,11 @@ function websiteList() {
|
||||
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
|
||||
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+web+"</td>";
|
||||
if(itemObj.preCount<itemObj.count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
|
||||
}else if(itemObj.preCount>itemObj.count){
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>";
|
||||
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
|
||||
}else{
|
||||
tr += "<td class='list_c3'>"+"--"+"</td></tr>";
|
||||
tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
|
||||
}
|
||||
|
||||
$("#tbodyData2").prepend(tr);
|
||||
|
||||
Reference in New Issue
Block a user