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

大屏页面列表中增加对比增减趋势显示，扇形图增加其它项others

Browse Source
This commit is contained in:
zhanghongqing
2018-07-23 18:48:53 +08:00
parent 5d99522e57
commit 3a11461acd
4 changed files with 112 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,18 +15,35 @@
<![endif]--> <![endif]-->
<style type="text/css"> <style type="text/css">
/*
a:link {
color:red !important;
text-decoration:none
}
a:visited {
background-color:blue !important;
text-decoration:none
}
a:hover {
color:green !important;
text-decoration:none
}
a:active {
color:green !important;
text-decoration:none;
background-color:blue !important;
} */
</style> </style>
</head> </head>
<body> <body>
<!--content开始--> <!--content开始-->
<div class="data_content"> <div class="data_content">
<!--header开始--> <!--header开始-->
<div class="header-title"> <!-- <div class="header-title">
<div class="title-left fl"></div> <div class="title-left fl"></div>
<div class="title-center fl"><a href="javascript:window.location.reload()"><i class="fa fa-line-chart"></i>&nbsp;网络流量分析</a></div> <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 class="title-right fr"></div>
</div> </div> -->
<!--header结束--> <!--header结束-->
<div class="data_main"> <div class="data_main">
@@ -352,8 +369,14 @@ function systemList(){
$(rs).each(function(i, itemObj) { $(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData'>"; var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>"; tr += "<td class='list_c1'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.osType+"' href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</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>";
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.count+"</a></td></tr>"; if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+""+"</a></td></tr>";
}
n=n-1; n=n-1;
$("#tbodyData1").prepend(tr); $("#tbodyData1").prepend(tr);
}) })
@@ -431,8 +454,13 @@ function browserList() {
var tr = "<tr class='frist rowData'>"; var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+n+"</a></td>"; 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>"; tr += "<td class='list_c2'><a data-toggle='tooltip' title='"+itemObj.bsType+"' href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.bsType+"</a></td>";
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+itemObj.count+"</a></td></tr>"; if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:bsClick(\""+itemObj.bsType+"\");'>"+""+"</a></td></tr>";
}
$("#tbodyData1").prepend(tr); $("#tbodyData1").prepend(tr);
n=n-1; n=n-1;
}) })
@@ -477,7 +505,13 @@ function websiteList() {
var tr = "<tr class='frist rowData'>"; var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+n+"</a></td>"; tr += "<td class='list_c1'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+n+"</a></td>";
tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.webId+"</a></td>"; tr += "<td class='list_c2'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.webId+"</a></td>";
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+itemObj.count+"</a></td></tr>"; if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-up'/>"+"</a></td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+"<i class='fa fa-arrow-down'/>"+"</a></td></tr>";
}else{
tr += "<td class='list_c3'><a href='javascript:webClick(\""+itemObj.webId+"\");'>"+""+"</a></td></tr>";
}
$("#tbodyData2").prepend(tr); $("#tbodyData2").prepend(tr);
n=n-1; n=n-1;

8
src/main/webapp/static/global/plugins/highcharts/css/common.css
View File

@@ -85,8 +85,12 @@ a {
td a { td a {
color:#fff color:#fff
} }
/* td a:link { td a i {
color:#fff; color:#21a10e
}
/*
tr td a:link {
color:red;
text-decoration:none text-decoration:none
} }
td a:active { td a:active {

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

@@ -1,8 +1,8 @@
.data_content{ .data_content{
/*overflow-x: hidden;*/ /*overflow-x: hidden;*/
/* min-width: 1366px; */ /* min-width: 1366px; */
background-color: #1c1c1c; background-color: #303030;
padding-top: 10px; padding-top: 40px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.data_content .data_main{ .data_content .data_main{
@@ -17,12 +17,12 @@
width: 100%; width: 100%;
height: 400px; height: 400px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #333333 inset;*/ /*box-shadow: 0px 0px 10px #3D3D3D inset;*/
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
} }
.data_content .data_main .main_left div.left_1{ .data_content .data_main .main_left div.left_1{
@@ -36,7 +36,7 @@
width: 230px; width: 230px;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #333333; background-color: #3D3D3D;
border-radius: 18px; border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -17px;
@@ -46,8 +46,9 @@
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
padding-left: 45px; text-align:center;
z-index: 1000; z-index: 1000;
border-radius:18px !important;
} }
.data_content .data_main .main_left div .main_title img{ .data_content .data_main .main_left div .main_title img{
position: absolute; position: absolute;
@@ -67,11 +68,11 @@
margin-left: 15px; margin-left: 15px;
margin-right: 15px; margin-right: 15px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
/*background: url("../img/chart_map.png") no-repeat center ;*/ /*background: url("../img/chart_map.png") no-repeat center ;*/
} }
@@ -79,19 +80,18 @@
width: 250px; width: 250px;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #333333; background-color: #3D3D3D;
border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -17px;
left:45%; left:50%;
margin-left: -90px; margin-left: -90px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
padding-left: 45px; text-align:center;
text-align:auto;
z-index: 1000; z-index: 1000;
border-radius:18px !important;
} }
.data_content .data_main .main_right{ .data_content .data_main .main_right{
@@ -101,11 +101,11 @@
width: 100%; width: 100%;
height: 400px; height: 400px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
} }
.data_content .data_main .main_right div.right_1 .choice{ .data_content .data_main .main_right div.right_1 .choice{
@@ -154,7 +154,7 @@
width: 230px; width: 230px;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #333333; background-color: #3D3D3D;
border-radius: 18px; border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -17px;
@@ -164,8 +164,9 @@
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
padding-left: 45px; text-align:center;
z-index: 1000; z-index: 1000;
border-radius:18px !important;
} }
.data_content .data_main .main_right div .main_title img{ .data_content .data_main .main_right div .main_title img{
position: absolute; position: absolute;
@@ -186,13 +187,13 @@
.data_content .data_bottom .bottom_1{ .data_content .data_bottom .bottom_1{
width: 22%; width: 22%;
height: 430px; height: 430px;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
/*background: url("../img/chart_5.png") no-repeat;*/ /*background: url("../img/chart_5.png") no-repeat;*/
} }
.data_content .data_bottom .bottom_center{ .data_content .data_bottom .bottom_center{
@@ -202,46 +203,46 @@
.data_content .data_bottom .bottom_2{ .data_content .data_bottom .bottom_2{
width: calc(53% - 10px); width: calc(53% - 10px);
height: 430px; height: 430px;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
margin-left: 15px; margin-left: 15px;
/*background: url("../img/chart_6.png") no-repeat;*/ /*background: url("../img/chart_6.png") no-repeat;*/
} }
.data_content .data_bottom .bottom_3{ .data_content .data_bottom .bottom_3{
width: calc(47% - 35px); width: calc(47% - 35px);
height: 430px; height: 430px;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
/*background: url("../img/chart_7.png") no-repeat;*/ /*background: url("../img/chart_7.png") no-repeat;*/
margin-left:15px; margin-left:15px;
} }
.data_content .data_bottom .bottom_4{ .data_content .data_bottom .bottom_4{
width: 26%; width: 26%;
height: 430px; height: 430px;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #333333 inset; 0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #333333; border: 1px solid #3D3D3D;
/*background: url("../img/chart_8.png") no-repeat;*/ /*background: url("../img/chart_8.png") no-repeat;*/
} }
.data_content .data_bottom div .main_title{ .data_content .data_bottom div .main_title{
width: 220px; width: 220px;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #333333; background-color: #3D3D3D;
border-radius: 18px; border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -17px;
@@ -251,7 +252,8 @@
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
padding-left: 30px; text-align:center;
border-radius:18px !important;
} }
.data_content .data_bottom div .main_title img{ .data_content .data_bottom div .main_title img{
position: absolute; position: absolute;
@@ -288,7 +290,7 @@
width: 35%; width: 35%;
} }
.data_content .data_bottom div .main_table td{ .data_content .data_bottom div .main_table td{
color:#fff; color:#3D3D3D;
font-size: 12.8px; font-size: 12.8px;
text-align: center; text-align: center;
} }
@@ -297,8 +299,8 @@
.data_content .data_bottom div .main_table tbody tr:nth-child(7), .data_content .data_bottom div .main_table tbody tr:nth-child(7),
.data_content .data_bottom div .main_table tbody tr:nth-child(9), .data_content .data_bottom div .main_table tbody tr:nth-child(9),
.data_content .data_bottom div .main_table tbody tr:nth-child(5){ .data_content .data_bottom div .main_table tbody tr:nth-child(5){
background-color: #1c1c1c; background-color: #303030;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/
10px 0px 15px #333333 inset; /*右边阴影*/ 10px 0px 15px #3D3D3D inset; /*右边阴影*/
/*0px 10px 15px #333333 inset;*/ /*0px 10px 15px #3D3D3D inset;*/
} }

15
src/main/webapp/static/global/plugins/highcharts/echart.js
View File

@@ -40,7 +40,7 @@
// margin:10, // margin:10,
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null text: null
}, },
@@ -174,7 +174,7 @@
marginTop:50, marginTop:50,
inverted: true, inverted: true,
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null text: null
}, },
@@ -299,7 +299,7 @@
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei'
}, },
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null text: null
}, },
@@ -320,6 +320,7 @@
align:'high', align:'high',
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei'
}, },
}, },
@@ -431,7 +432,7 @@ function echart_2(rs){
fontFamily:'Microsoft YaHei', fontFamily:'Microsoft YaHei',
} }
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null, text: null,
style: {//设置字体颜色 style: {//设置字体颜色
@@ -555,7 +556,7 @@ function echart_5(rs){
fontFamily:'Microsoft YaHei', fontFamily:'Microsoft YaHei',
} }
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null, text: null,
style: {//设置字体颜色 style: {//设置字体颜色
@@ -664,7 +665,7 @@ function echart_4(rs){
type: 'pie' type: 'pie'
}, },
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null, text: null,
}, },
@@ -774,7 +775,7 @@ function echart_6(rs){
type: 'pie' type: 'pie'
}, },
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'], colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
title: { title: {
text: null, text: null,
}, },