gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改流量统计图标

Browse Source
This commit is contained in:
zhanghongqing
2018-09-26 09:19:15 +08:00
parent 2d7632e8b1
commit be1217a82a
2 changed files with 101 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp
View File

@@ -17,6 +17,7 @@
<![endif]-->
</head>
<body>
<!--content开始-->
<div class="data_content">
@@ -26,86 +27,79 @@
<div class="title-center fl"><a href="javascript:window.location.reload()"><i class="fa fa-line-chart"></i>&nbsp;网络流量分析</a></div>
<div class="title-right fr"></div>
</div> -->
<div class="header">
<div class="header">
<div class="data_info">
<div class="info_1 fl_fc">
<div class="text_1">
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-cloud-download"></i>
</div>
<div class="fl_fc">
<%-- <a href="${ctx}/dashboard/bandwidthList"> 详情显示--%>
<span>
<p><i class="fa fa-cloud-download"></i> <!-- 网络带宽 --><spring:message code="bandwith"/></p>
<%-- <a href="${ctx}/dashboard/bandwidthList"> 详情显示--%>
<p data-original-title="<spring:message code="bandwith"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 网络带宽 --><spring:message code="bandwith"/>
</p>
<p class="csNum">In <span class="c2sNum">83</span>% <i id="c2sColor" class="fa fa-arrow-up"></i> | Out <span class="s2cNum">17</span>% <i id="s2cColor" class="fa fa-arrow-down"></i></p>
<span class="numberRun4">23802</span ><span class="numberRun4-unit"> bps</span>
</span>
</a>
</div>
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-ban"></i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<span>
<p><i class="fa fa-external-link"></i> <!-- 阻断链接数 --><spring:message code="action_reject"/></p>
<p data-original-title="<spring:message code="action_reject"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 阻断链接数 --><spring:message code="action_reject"/></p>
<p class="numberRun1">2102</p>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="info_2 fl_fc">
<div class="text_2">
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-eye"> </i>
</div>
<!-- <i class="fa fa-bar-chart"></i> -->
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<span>
<p><i class="fa fa-trash"> </i> <!-- 监测链接数 --><spring:message code="action_monit"/></p>
<p data-original-title="<spring:message code="action_monit"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 监测链接数 --><spring:message code="action_monit"/></p>
<p class="numberRun2">65802</p>
</span>
</a>
</div>
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-trash"> </i>
</div>
<div class="fl_fc">
<%-- <a href="${ctx}/dashboard/ipActiveList"> --%>
<span>
<p><i class="fa fa-heartbeat"> </i> <!-- 丢弃链接数 --><spring:message code="action_drop"/></p>
<p data-original-title="<spring:message code="action_drop"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 丢弃链接数 --><spring:message code="action_drop"/></p>
<p class="numberRun3">85812</p>
</span>
</a>
</div>
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-recycle"> </i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<span>
<p><i class="fa fa-ban"> </i> <!-- 回流链接数 --><spring:message code="action_loop"/></p>
<p data-original-title="<spring:message code="action_loop"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 回流链接数 --><spring:message code="action_loop"/></p>
<p class="numberRun">45802</p>
</span>
</a>
</div>
</div>
</div>
<%-- <div class="info_3 fl_fc">
<div class="text_3">
<div class="fr_fc">
<div class="fl_fc">
<a href="${ctx}/dashboard/ipActiveList">
<span>
<p>网络带宽</p>
<p class="numberRun5">15802</p>
</span>
</a>
</div>
</div>
</div>
</div> --%>
</div>
</div>
</div>
@@ -239,7 +233,7 @@
<div class="bottom_1 fl">
<div class="main_title">
<!-- 终端 -->BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="systemList();return false;"><i class="fa fa-refresh"></i></a>
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
</div>
<div class="main_table">
<table>
@@ -327,9 +321,20 @@
<script src="${pageContext.request.contextPath}/static/pages/scripts/echart.js"></script>
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
<style>
tr.select-row-tr:HOVER {
background-color: #5d6062 !important;
cursor: pointer;
}
tr.select-row-tr:ACTIVE {
background-color: #5d6062 !important;
}
.activeColor{
background-color: #5d6062 !important;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//动态显示数据
ajaxinfo();
setInterval(function(){
@@ -345,10 +350,10 @@ $(document).ready(function(){
topicAndDomainList();//主题网站域名
uaSelectChange($('#uaSelect').val());
uaSelectChange();
//当选择改变时触发
$('#uaSelect').change(function(){
uaSelectChange($('#uaSelect').val());
uaSelectChange();
});
@@ -409,7 +414,8 @@ function dataScroll(index,nums){
}
//切换下拉列表-操作系统与浏览器
function uaSelectChange(ua){
function uaSelectChange(){
var ua = $('#uaSelect').val();
if(ua=="system"){
systemList();
}
@@ -549,15 +555,15 @@ function systemList(){
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:osClick(\""+itemObj.osType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+itemObj.osType+"</td>";
if(preCount<count){
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"--"+"</a></td></tr>";
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
n=n-1;
$("#tbodyData1").prepend(tr);
@@ -574,7 +580,11 @@ function systemList(){
});
}
// 点击操作系统列表右侧显示 浏览器图
function osClick(osType){
function osClick(osType,obj){
//点击行变色
$("#tbodyData1 tr").removeClass("activeColor");
$(obj).addClass("activeColor");
$.ajax({
url: '${ctx}/dashboard/browserChart',
type : "get" ,
@@ -590,7 +600,9 @@ function osClick(osType){
});
}
//点击浏览器列表右侧显示 操作系统图
function bsClick(bsType){
function bsClick(bsType,obj){
$("#tbodyData1 tr").removeClass("activeColor");
$(obj).addClass("activeColor");
$.ajax({
url: '${ctx}/dashboard/systemChart',
type : "get" ,
@@ -640,15 +652,15 @@ function browserList() {
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.bsType+"' href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:bsClick(\""+itemObj.bsType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+itemObj.bsType.substring(0,18)+"</td>";
if(preCount<count){
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+""+"</a></td></tr>";
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData1").prepend(tr);
n=n-1;
@@ -692,15 +704,15 @@ function websiteList() {
var n=rs.length;
if(n>0){
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+itemObj.websiteService+"</a></td>";
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:webClick(\""+itemObj.websiteServiceId+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+itemObj.websiteService.substring(0,18)+"</td>";
if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</a></td></tr>";
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.websiteServiceId+"\");'>"+""+"</a></td></tr>";
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData2").prepend(tr);
@@ -718,7 +730,11 @@ function websiteList() {
});
}
//点击http网站列表-显示域名图
function webClick(websiteServiceId){
function webClick(websiteServiceId,obj){
//点击行变色
$("#tbodyData2 tr").removeClass("activeColor");
$(obj).addClass("activeColor");
$.ajax({
url: '${ctx}/dashboard/webTypeChart',
type : "get" ,

23
src/main/webapp/static/global/plugins/highcharts/css/data_text.css
View File

@@ -18,6 +18,7 @@ p{
height: 110px;
margin-left: 15px;
text-align: center;
display: inline-block;
}
.data_content .data_info .info_2{
width: 60%;
@@ -29,11 +30,21 @@ p{
height: 110px;
border: 1px solid #303030;
border-width: 0 1px;
display: inline-block;
}
.data_content .data_info .fr_fc .fl_visual{
margin-left: 0px;
float: left;
height: 110px;
width: 28%;
font-size: 45px;
color: #C5C5C5;
position: relative;
margin-top: 15px;
}
.data_content .data_info .fr_fc .fl_fc{
width: 100%;
width: 68%;
height: 110px;
border: 1px solid #303030;
border-width: 0 1px;
margin-left: 0px;
}
@@ -90,14 +101,17 @@ p{
}
.data_content .data_info p:nth-child(1){
color:#fff;
font-size: 12.8px;
font-size: 18px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.data_content .data_info>div.info_1 p:nth-child(2){
font-weight: 600;
font-size: 16px;
color:#288dce;
margin-top: 2.1em;
margin-top: 2.0em;
}
.data_content .data_info .info_2 .fr_fc .numberRun2{
font-weight: 600;
@@ -728,6 +742,7 @@ p{
color:#3D3D3D;
font-size: 12.8px;
text-align: center;
}
.main_table_web tbody tr:nth-child(1),
div .main_table_web tbody tr:nth-child(3),