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]-->
<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>
</head>
<body>
<!--content开始-->
<div class="data_content">
<!--header开始-->
<div class="header-title">
<!-- <div class="header-title">
<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-right fr"></div>
</div>
</div> -->
<!--header结束-->
<div class="data_main">
@@ -352,8 +369,14 @@ function systemList(){
$(rs).each(function(i, itemObj) {
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 data-toggle='tooltip' title='"+itemObj.osType+"' href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
tr += "<td class='list_c3'><a href='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.count+"</a></td></tr>";
tr += "<td class='list_c2'><a href='javascript:;' data-toggle='tooltip' title='"+itemObj.osType+"' onclick='javascript:osClick(\""+itemObj.osType+"\");'>"+itemObj.osType+"</a></td>";
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;
$("#tbodyData1").prepend(tr);
})
@@ -431,8 +454,13 @@ function browserList() {
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>";
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);
n=n-1;
})
@@ -477,7 +505,13 @@ function websiteList() {
var tr = "<tr class='frist rowData'>";
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_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);
n=n-1;

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

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

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

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

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

@@ -40,7 +40,7 @@
// 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: {
text: null
},
@@ -174,7 +174,7 @@
marginTop:50,
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: {
text: null
},
@@ -299,7 +299,7 @@
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: {
text: null
},
@@ -320,6 +320,7 @@
align:'high',
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
@@ -431,7 +432,7 @@ function echart_2(rs){
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: {
text: null,
style: {//设置字体颜色
@@ -555,7 +556,7 @@ function echart_5(rs){
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: {
text: null,
style: {//设置字体颜色
@@ -664,7 +665,7 @@ function echart_4(rs){
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: {
text: null,
},
@@ -774,7 +775,7 @@ function echart_6(rs){
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: {
text: null,
},