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-07-17 09:13:19 +08:00
parent 8d2347d8c3
commit 90b1c3b26f
6 changed files with 84 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/java/com/nis/web/controller/dashboard/DashboardController.java
View File

@@ -283,7 +283,7 @@ public class DashboardController extends BaseController{
bs=Integer.parseInt(bsType);//处理为匹配项编码
}
try {
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_SYSTEM_CHART+"bsType="+bs);
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_SYSTEM_CHART+"?bsType="+bs);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
list = (List<Map>) fromJsonList.get("data");
@@ -372,7 +372,7 @@ public class DashboardController extends BaseController{
web=Integer.parseInt(webId);//处理为匹配项编码
}
try {
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"webId="+web);
String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"?webId="+web);
Gson gson = new GsonBuilder().create();
fromJsonList = gson.fromJson(string, new TypeToken<Map>(){}.getType());
list = (List<Map>) fromJsonList.get("data");

2
src/main/resources/nis.properties
View File

@@ -245,7 +245,7 @@ ntcAppLog=ntcAppLogs
ntcDdosLog=ntcDdosLogs
########################################
#大屏图表展示服务接口
dashboardUrl=http://10.0.6.242:8080/galaxy/service/log/v1/
dashboardUrl=http://10.0.6.101:8080/galaxy/service/log/v1/
trafficIpActive=trafficIpActive
trafficProtocol=trafficProtocol
trafficApp=trafficApp

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

@@ -24,7 +24,7 @@
<!--header开始-->
<div class="header-title">
<div class="title-left fl"></div>
<div class="title-center fl"><a href="javascript:window.location.reload()">网络流量分析</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>
<!--header结束-->
@@ -33,7 +33,7 @@
<div class="main_left fl">
<div class="left_1">
<div class="main_title">
<img src="img/title_1.png" alt="">
<!-- <img src="img/title_1.png" alt=""> -->
协议类型统计
</div>
<div id="chart_1" class="" style="width:100%;height: 400px;"></div>
@@ -43,7 +43,7 @@
<div class="main_center fl">
<div class="center_text">
<div class="main_title">
<img src="img/title_3.png" alt="">
<!-- <img src="img/title_3.png" alt=""> -->
活跃IP统计图
</div>
<div id="chart_main" style="width:100%;height:400px;"></div>
@@ -52,7 +52,7 @@
<div class="main_right fr">
<div class="right_1">
<div class="main_title">
<img src="img/title_4.png" alt="">
<!-- <img src="img/title_4.png" alt=""> -->
APP流量分析
</div>
<!-- <div class="choice">
@@ -70,7 +70,7 @@
<div class="data_bottom">
<div class="bottom_1 fl">
<div class="main_title">
<img src="img/title_6.png" alt="">
<!-- <img src="img/title_6.png" alt=""> -->
终端用户TOP10
</div>
<div class="main_table">
@@ -147,7 +147,7 @@
<div class="bottom_center fl">
<div class="bottom_2 fl">
<div class="main_title">
<img src="img/title_6.png" alt="">
<!-- <img src="img/title_6.png" alt=""> -->
终端用户图
</div>
<div class="main_table">
@@ -156,7 +156,7 @@
</div>
<div class="bottom_3 fl">
<div class="main_title">
<img src="img/title_6.png" alt="">
<!-- <img src="img/title_6.png" alt=""> -->
网站流量TOP10
</div>
<div class="main_table">
@@ -226,7 +226,7 @@
</div>
<div class="bottom_4 fr">
<div class="main_title">
<img src="img/title_5.png" alt="">
<!-- <img src="img/title_5.png" alt=""> -->
网站流量分析
</div>
<div class="main_table">
@@ -258,6 +258,7 @@ $(document).ready(function(){
$('#uaSelect').change(function(){
uaSelectChange($('#uaSelect').val());
});
})
//切换下拉列表-操作系统与浏览器
@@ -429,7 +430,7 @@ 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 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>";
$("#tbodyData1").prepend(tr);

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

@@ -57,8 +57,8 @@ a {
width: 440px;
height: 40px;
box-sizing: border-box;
border-right: 5px solid #044562;
border-left: 5px solid #044562;
border-right: 5px solid #333333;
border-left: 5px solid #333333;
/* background: url(../img/title.png) no-repeat; */
}
.header-title>.title-center>a {
@@ -72,7 +72,7 @@ a {
.header-title>.title-left, .header-title>.title-right {
width: calc(50% - 220px);
height: 3px;
background: #044562;
background: #333333;
margin-top: 10px;
}
.fl {

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

@@ -1,7 +1,7 @@
.data_content{
/*overflow-x: hidden;*/
/* min-width: 1366px; */
background-color: #081832;
background-color: #0E0E0E;
padding-top: 10px;
padding-bottom: 10px;
}
@@ -17,12 +17,12 @@
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #034c6a;
/*box-shadow: 0px 0px 10px #034c6a inset;*/
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
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;
position: relative;
}
.data_content .data_main .main_left div.left_1{
@@ -36,7 +36,7 @@
width: 180px;
height: 35px;
line-height: 33px;
background-color: #034c6a;
background-color: #333333;
border-radius: 18px;
position: absolute;
top: -17px;
@@ -67,11 +67,11 @@
margin-left: 15px;
margin-right: 15px;
box-sizing: border-box;
border: 1px solid #034c6a;
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
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;
position: relative;
/*background: url("../img/chart_map.png") no-repeat center ;*/
}
@@ -79,7 +79,7 @@
width: 180px;
height: 35px;
line-height: 33px;
background-color: #034c6a;
background-color: #333333;
border-radius: 18px;
position: absolute;
top: -17px;
@@ -100,11 +100,11 @@
width: 100%;
height: 400px;
box-sizing: border-box;
border: 1px solid #034c6a;
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
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;
position: relative;
}
.data_content .data_main .main_right div.right_1 .choice{
@@ -153,7 +153,7 @@
width: 180px;
height: 35px;
line-height: 33px;
background-color: #034c6a;
background-color: #333333;
border-radius: 18px;
position: absolute;
top: -17px;
@@ -185,13 +185,13 @@
.data_content .data_bottom .bottom_1{
width: 22%;
height: 430px;
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/
0px 10px 15px #333333 inset;
position: relative;
box-sizing: border-box;
border: 1px solid #034c6a;
border: 1px solid #333333;
/*background: url("../img/chart_5.png") no-repeat;*/
}
.data_content .data_bottom .bottom_center{
@@ -201,46 +201,46 @@
.data_content .data_bottom .bottom_2{
width: calc(53% - 10px);
height: 430px;
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/
0px 10px 15px #333333 inset;
position: relative;
box-sizing: border-box;
border: 1px solid #034c6a;
border: 1px solid #333333;
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 #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/
0px 10px 15px #333333 inset;
position: relative;
box-sizing: border-box;
border: 1px solid #034c6a;
border: 1px solid #333333;
/*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 #034c6a inset, /*左边阴影*/
0px -10px 15px #034c6a inset, /*上边阴影*/
10px 0px 15px #034c6a inset, /*右边阴影*/
0px 10px 15px #034c6a inset;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
0px -10px 15px #333333 inset, /*上边阴影*/
10px 0px 15px #333333 inset, /*右边阴影*/
0px 10px 15px #333333 inset;
position: relative;
box-sizing: border-box;
border: 1px solid #034c6a;
border: 1px solid #333333;
/*background: url("../img/chart_8.png") no-repeat;*/
}
.data_content .data_bottom div .main_title{
width: 220px;
height: 35px;
line-height: 33px;
background-color: #034c6a;
background-color: #333333;
border-radius: 18px;
position: absolute;
top: -17px;
@@ -274,7 +274,7 @@
.data_content .data_bottom div .main_table th{
font-size: 14px;
font-weight: 600;
color:#61d2f7;
color:#333333;
text-align: center;
}
.data_content .data_bottom div .main_table th:nth-child(1){
@@ -296,8 +296,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: #072951;
box-shadow:-10px 0px 15px #034c6a inset, /*左边阴影*/
10px 0px 15px #034c6a inset; /*右边阴影*/
/*0px 10px 15px #034c6a inset;*/
background-color: #0e0e0e;
box-shadow:-10px 0px 15px #333333 inset, /*左边阴影*/
10px 0px 15px #333333 inset; /*右边阴影*/
/*0px 10px 15px #333333 inset;*/
}

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

@@ -170,13 +170,14 @@
plotBorderWidth:null,
plotShadow:false,
type: 'bar',
margin:80,
// marginLeft:80,
marginTop:50,
inverted: true,
style: {
fontFamily: "Microsoft YaHei",
color: "#fff",
fontWeight: "normal",
fontStyle: "italic"
fontSize:'10px',
// fontStyle: "italic"
},
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
@@ -189,15 +190,17 @@
title: {
text: null
},
overflow: 'justify',
labels: {
overflow: 'justify',
style: {//设置字体颜色
color: '#fff',
fontSize:'14px',
fontFamily:'Microsoft YaHei'
},
},
labels:{
formatter:function(){
if(this.value.length>7){
return '<span>'+this.value.substring(0,7)+"..."+'</span>'
}else{
return this.value
}
}
}
},
yAxis: {
@@ -278,7 +281,8 @@
plotBorderWidth:null,
plotShadow:false,
type: 'column',
margin:50,
// margin:50,
marginBottom:60,
},
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#0035f9','#964CEC','#32B0ED','#95CEFF','#7278DD','#2DA9D8','#C66FE6'],
title: {
@@ -289,6 +293,12 @@
},
xAxis: {
categories: xData,
style: {//设置字体颜色
color: '#fff',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},
yAxis: {
min: 0,
@@ -310,7 +320,7 @@
allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色
color: '#fff',
fontSize:'12px',
fontSize:'10px',
fontFamily:'Microsoft YaHei'
},
},