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

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

@@ -245,7 +245,7 @@ ntcAppLog=ntcAppLogs
ntcDdosLog=ntcDdosLogs 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 trafficIpActive=trafficIpActive
trafficProtocol=trafficProtocol trafficProtocol=trafficProtocol
trafficApp=trafficApp trafficApp=trafficApp

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

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

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

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

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

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

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

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