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:
zhangwei
2018-12-20 14:32:36 +06:00
parent e9e655c91e
commit 4a93a198fd
3 changed files with 637 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,7 +15,32 @@
<script src="js/html5shiv.min.js"></script> <script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script> <script src="js/respond.min.js"></script>
<![endif]--> <![endif]-->
<style>
body {
overflow-x:hidden
}
.chart_topic text {
color: #fff
}
.fa-arrow-circle-up {
color: #fe392e;
background-color: white;
border-radius: 10px;
font-size: 13px;
width: 10px;
height: 10px;
line-height: 9px !important;
}
.fa-arrow-circle-down {
color: #42DEEB;
background-color: white;
border-radius: 10px;
font-size: 13px;
width: 10px;
height: 10px;
line-height: 9px !important;
}
</style>
</head> </head>
<body> <body>
@@ -118,7 +143,6 @@
<i class="fa fa-unlink"> </i> <i class="fa fa-unlink"> </i>
</div> </div>
<div class="fl_fc"> <div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p data-original-title="<spring:message code="active_link"/>" <p data-original-title="<spring:message code="active_link"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top"> class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 活跃链接数 --><spring:message code="active_link"/></p> <!-- 活跃链接数 --><spring:message code="active_link"/></p>
@@ -162,27 +186,40 @@
<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">
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a> <label class="txt"><spring:message code="traffic_ipactive_chart"/></label>
<span class="label_block" style="border-left:2px #646d8a solid;">
<label class="btn2"> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #626a87 solid;">
<label><a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div> </div>
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div> <!-- 活跃IP图 --> <div class="chart-back" id="chart_main" style="width:100%;height:400px;"></div>
</div> </div>
</div> </div>
<!-- 协议类型图 --> <!-- 协议类型图 -->
<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">
<spring:message code="traffic_protocol_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a> <label class="txt"><spring:message code="traffic_protocol_chart"/></label>
<a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="javascipt:void(0)" onclick="protocolList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="${ctx}/dashboard/traffic/protocolTypeList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div> </div>
<div id="chart_1" class="" style="width:100%;height: 400px;"></div> <div id="chart_1" class="chart-back" style="width:100%;height: 400px;"></div>
</div> </div>
</div> </div>
<!-- 活跃端口 --> <!-- 活跃端口 -->
<div class="main_right fr"> <div class="main_right fr">
<div class="right_1"> <div class="right_1">
<div class="main_title_port"> <div class="main_title_port">
<spring:message code="active_port"/>&nbsp;&nbsp; <!-- <a href="#"><i class="fa fa-list-ul"></i></a> --> <label class="txt"><spring:message code="active_port"/></label>
<a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #575073 solid;">
<label><a href="javascipt:void(0)" onclick="portActiveList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div> </div>
<div class="main_table_port"> <div class="main_table_port">
@@ -209,20 +246,25 @@
<div class="main_left1 fl"> <div class="main_left1 fl">
<div class="left_1"> <div class="left_1">
<div class="main_title1"> <div class="main_title1">
<spring:message code="service"/>&nbsp;&nbsp;<%-- <a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-list-ul"></i></a> --%> <label class="txt"><spring:message code="service"/></label>
<a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a>&nbsp;<a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #99879b solid;">
</div> <label><a href="javascipt:void(0)" onclick="topicAndDomainList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #9f8da1 solid;">
<label><a href="${ctx}/dashboard/httpStatisticList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div>
<!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div> <!-- 网站主题分类图 --><div id="chart_topic" style="width:100%;height:400px;"></div>
</div> </div>
</div> </div>
<div class="main_center1 fl"> <div class="main_center1 fl">
<div class="bottom_web fl"> <div class="bottom_web fl">
<div class="main_title_web"> <div class="main_title_web">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/webTypeList"><i class="fa fa-line-chart"></i></a> <label class="txt"><spring:message code="traffic_website_list"/></label>
<a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #824e6a solid;">
<label><a href="javascipt:void(0)" onclick="websiteList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div> </div>
<div class="main_table_web"> <div class="main_table_web">
<table> <table>
@@ -239,13 +281,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="main_right1 fl"> <div class="main_right1 fl" style="margin-left:5px;">
<div class="bottom_web fl"> <div class="bottom_web fl">
<%-- <div class="main_title_web"> <%-- <div class="main_title_web">
<spring:message code="traffic_website_type_chart"/> <spring:message code="traffic_website_type_chart"/>
</div> --%> </div> --%>
<div class="main_table_web"> <div class="main_table_web">
<!-- http网站分类图 --><div id="chart_4" class="" style="width:100%;height: 400px;"></div> <!-- http网站分类图 --><div id="chart_4" class=""></div>
</div> </div>
</div> </div>
</div> </div>
@@ -255,8 +297,13 @@
<div class="main_left1 fl"> <div class="main_left1 fl">
<div class="left_1"> <div class="left_1">
<div class="main_title1"> <div class="main_title1">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a> <label class="txt"><spring:message code="traffic_app_chart"/></label>
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #5c6a78 solid;">
<label><a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
<span class="label_block" style="border-left:2px #5c6a78 solid;">
<label><a href="${ctx}/dashboard/traffic/appTypeList"><i class="fa fa-line-chart"></i></a></label>
</span>
</div> </div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div> <!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div> </div>
@@ -265,8 +312,10 @@
<div class="main_center1 fl"> <div class="main_center1 fl">
<div class="bottom_web fl"> <div class="bottom_web fl">
<div class="main_title_web"> <div class="main_title_web">
<!-- 终端 -->OS/BS &nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> --> <label class="txt"><!-- 终端 -->OS/BS </label><!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a> <span class="label_block" style="border-left:2px #6e5377 solid;">
<label><a href="javascipt:void(0)" onclick="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a></label>
</span>
</div> </div>
<div class="main_table_web"> <div class="main_table_web">
<table> <table>
@@ -275,9 +324,9 @@
<th><spring:message code="ranking"/></th> <th><spring:message code="ranking"/></th>
<th> <th>
<div class="choice"> <div class="choice">
<select name="uaSelect" id="uaSelect"> <select name="uaSelect" id="uaSelect" style="text-align:center; text-align-last:center; -webkit-appearance: none; background-color: #3D495F; width: 80px;" class="minimal">
<option value="system"><spring:message code="os"/></option> <option value="system">&nbsp;<spring:message code="os"/></option>
<option value="browser"><spring:message code="browser"/></option> <option value="browser">&nbsp;<spring:message code="browser"/></option>
</select> </select>
</div> </div>
</th> </th>
@@ -291,101 +340,19 @@
</div> </div>
</div> </div>
<div class="main_right1 fl"> <div class="main_right1 fl">
<div class="bottom_web fl"> <div class="bottom_web fl" style="margin-left:5px;">
<%-- <div class="main_title_web"> <%-- <div class="main_title_web">
<spring:message code="traffic_website_type_chart"/> <spring:message code="traffic_website_type_chart"/>
</div> --%> </div> --%>
<div class="main_table_web"> <div class="main_table_web">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div> <!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 470px;"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 第4行 -->
<%-- <div class="data_bottom">
<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="uaSelectChange();return false;"><i class="fa fa-refresh"></i></a>
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th><spring:message code="ranking"/></th>
<th>
<div class="choice">
<select name="uaSelect" id="uaSelect">
<option value="system"><spring:message code="os"/></option>
<option value="browser"><spring:message code="browser"/></option>
</select>
</div>
</th>
<th><spring:message code="trend"/></th>
</tr>
</thead>
<tbody id="tbodyData1">
<tr>
<td>1</td>
<td>windows</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bottom_center fl">
<div class="bottom_2 fl">
<div class="main_title">
<spring:message code="BS"/>
</div>
<div class="main_table">
<!-- ua终端图 --><div id="chart_2" class="" style="width:100%;height: 400px;"></div>
</div>
</div>
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="traffic_website_list"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/webTypeList"><i class="fa fa-list-ul"></i></a>
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th><spring:message code="ranking"/></th>
<th><spring:message code="website"/></th>
<th><spring:message code="trend"/></th>
</tr>
</thead>
<tbody id="tbodyData2">
<tr>
<td>1</td>
<td>baidu.com</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bottom_3 fl">
<div class="main_title">
<spring:message code="traffic_app_chart"/>&nbsp;&nbsp;<!-- <a href="#"><i class="fa fa-list-ul"></i></a> -->
<a href="javascipt:void(0)" onclick="appTypeList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!--app应用图 --><div id="chart_3" class="" style="width:100%;height: 420px;"></div>
</div>
</div>
</div> --%>
</div> </div>
<!--content结束--> <!--content结束-->
<!-- 列表显示 --> <!-- 列表显示 -->
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script> <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
@@ -634,12 +601,13 @@ function portActiveList(){
var tr = "<tr class='frist rowData'>"; var tr = "<tr class='frist rowData'>";
tr += "<td class='list_c1' style='color:#fff' title='"+itemObj.port+"'>"+itemObj.port+"</td>"; tr += "<td class='list_c1' style='color:#fff' title='"+itemObj.port+"'>"+itemObj.port+"</td>";
tr += "<td class='list_c2' style='color:#fff'>"+count+"</td>"; tr += "<td class='list_c2' style='color:#fff'>"+count+"</td>";
if(preCount<count){ if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){ }else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{ }else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>"; tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
} }
$("#tbodyDataPort").prepend(tr); $("#tbodyDataPort").prepend(tr);
}) })
@@ -726,11 +694,11 @@ function systemList(){
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>"; tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+os+"</td>"; tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+os+"</td>";
if(preCount<count){ if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){ }else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{ }else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>"; tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
} }
n=n-1; n=n-1;
$("#tbodyData1").prepend(tr); $("#tbodyData1").prepend(tr);
@@ -837,11 +805,11 @@ function browserList() {
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>"; tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+bs+"</td>"; tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+bs+"</td>";
if(preCount<count){ if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(preCount>count){ }else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{ }else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>"; tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
} }
$("#tbodyData1").prepend(tr); $("#tbodyData1").prepend(tr);
n=n-1; n=n-1;
@@ -901,11 +869,11 @@ function websiteList() {
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>"; tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+web+"</td>"; tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+web+"</td>";
if(itemObj.preCount<itemObj.count){ if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:red'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-up'/>"+"</td></tr>";
}else if(itemObj.preCount>itemObj.count){ }else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:green'/>"+"</td></tr>"; tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-circle-down'/>"+"</td></tr>";
}else{ }else{
tr += "<td class='list_c3'>"+"--"+"</td></tr>"; tr += "<td class='list_c3' style='color:#fff'>"+"--"+"</td></tr>";
} }
$("#tbodyData2").prepend(tr); $("#tbodyData2").prepend(tr);

535
src/main/webapp/static/pages/css/data_text.css
View File

@@ -3,9 +3,15 @@
.data_content{ .data_content{
/*overflow-x: hidden;*/ /*overflow-x: hidden;*/
/* min-width: 1366px; */ /* min-width: 1366px; */
background-color: #303030; /* background-color: #303030; */
padding-top: 30px; padding-top: 15px;
padding-bottom: 10px; /* padding-bottom: 10px; */
background: url("../img/dashboard-back.jpg")no-repeat;
width:100%;
/* height:100%; */
background-size:100% 100%;
position:absolute;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/dashboard-back.jpg',sizingMethod='scale');
} }
/******************** info start *************************/ /******************** info start *************************/
@@ -14,7 +20,7 @@ p{
} }
.data_content .data_info{ .data_content .data_info{
width: calc(100% - 20px); width: calc(100% - 20px);
margin-bottom: 40px; margin-bottom: 50px;
height: 110px; height: 110px;
margin-left: 15px; margin-left: 15px;
text-align: center; text-align: center;
@@ -28,32 +34,61 @@ p{
.data_content .data_info .fr_fc{ .data_content .data_info .fr_fc{
width: 100%; width: 100%;
height: 110px; height: 110px;
border: 1px solid #303030; border: 1px solid #545678;
border-width: 0 1px; border-width: 0 1px;
display: inline-block; display: inline-block;
} }
.fl_visual .fa {
background:-webkit-linear-gradient(left, #d9ffff, #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 42px;
}
.data_content .data_info .fr_fc .fl_visual{ .data_content .data_info .fr_fc .fl_visual{
margin-left: 0px; margin-left: 2px;
float: left; float: left;
height: 110px; height: 110px;
width: 28%; width: 28%;
font-size: 45px; font-size: 40px;
color: #C5C5C5; /* color: #d9ffff !important; */
/* color: linear-gradient(to right, #ffcc99, #77b5dc); */
position: relative; position: relative;
margin-top: 15px; margin-top: 25px;
/*background: -webkit-linear-gradient(left,#d9ffff, #77b5dc);*/
/* background: -webkit-linear-gradient(left,#d9ffff,#77b5dc); */
-webkit-background-clip: text;
/* -webkit-text-fill-color: #d9ffff; */
-webkit-text-fill-color: #d9ffff;
/* background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc); */
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: transparent; */
/* -webkit-text-stroke:1px transparent; */
/* background:-webkit-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-o-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-moz-linear-gradient(left,#d9ffff , #77b5dc); */
/* background:-ms-linear-gradient(left,#d9ffff , #77b5dc); */
} }
.data_content .data_info .fr_fc .fl_visual a:link { /* .data_content .data_info .fr_fc .fl_visual a:link {
color: #C5C5C5 !important; color:#d9ffff !important;
background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.data_content .data_info .fr_fc .fl_visual a:visited { .data_content .data_info .fr_fc .fl_visual a:visited {
color: #C5C5C5 !important; background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
.data_content .data_info .fr_fc .fl_visual a:hover { .data_content .data_info .fr_fc .fl_visual a:hover {
color: #716D6D !important; color: #716D6D !important;
} }
.data_content .data_info .fr_fc .fl_visual a:active { .data_content .data_info .fr_fc .fl_visual a:active {
color: #716D6D !important; background: -webkit-linear-gradient(left bottom, #d9ffff , #77b5dc);
} -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */
.data_content .data_info .fr_fc .fl_fc{ .data_content .data_info .fr_fc .fl_fc{
width: 70%; width: 70%;
height: 110px; height: 110px;
@@ -62,7 +97,7 @@ p{
} }
.data_content .data_info .info_2>.text_2{ .data_content .data_info .info_2>.text_2{
width: calc(100% - 10px); width: calc(100% - 10px);
background-color: #3D3D3D; background-color: #3D495F;
height: 110px; height: 110px;
} }
@@ -78,23 +113,11 @@ p{
} }
.data_content .data_info .info_1>.text_1{ .data_content .data_info .info_1>.text_1{
width: calc(100% - 1px); width: calc(100% - 1px);
background-color: #3D3D3D; background-color: #3D495F;
height: 110px; height: 110px;
} }
/* .data_content .data_info .info_3{
width: 29%;
height: 110px;
}
.data_content .data_info .info_3>.text_3{
width:100%;
background-color: #3D3D3D;
height: 110px;
} */
.data_content .data_info>div.info_2>.text_2>div{ .data_content .data_info>div.info_2>.text_2>div{
width: 14.2%; width: 14.2%;
position: relative; position: relative;
} }
.data_content .data_info>div.info_1>div>div, .data_content .data_info>div.info_1>div>div,
@@ -134,7 +157,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -142,7 +166,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -150,7 +175,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -158,7 +184,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -166,7 +193,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -174,7 +202,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -182,7 +211,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -190,7 +220,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 2.1em; margin-top: 2.1em;
margin-left: 0px; margin-left: 0px;
} }
@@ -198,7 +229,8 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 1px; margin-top: 1px;
margin-left: 0px; margin-left: 0px;
} }
@@ -206,19 +238,22 @@ p{
width:100%; width:100%;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 33px; margin-top: 33px;
margin-left: 0px; margin-left: 0px;
} }
.data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{ .data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
color:#288dce; /*color:#288dce;*/
color:#ffffff;
margin-top: 0.6px; margin-top: 0.6px;
} }
.data_content .data_info>div.info_1 .fl_fc .csNum{ .data_content .data_info>div.info_1 .fl_fc .csNum{
font-size: 11px; font-size: 11px;
color:#337ab7 !important; /*color:#337ab7 !important;*/
color:#ffffff !important;
margin-top: -6px; margin-top: -6px;
text-align: center; text-align: center;
margin-left: 1.3px; margin-left: 1.3px;
@@ -256,37 +291,76 @@ p{
.data_content .data_main .main_left>div{ .data_content .data_main .main_left>div{
width: 100%; width: 100%;
height: 400px; height: 400px;
box-sizing: border-box; /* box-sizing: border-box;
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
/*box-shadow: 0px 0px 10px #3D3D3D inset;*/ box-shadow: 0px 0px 10px #3D3D3D inset;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; 0px 10px 15px #3D3D3D inset; */
position: relative; position: relative;
} }
.data_content .data_main .main_left .left_1 .chart-back{
background-color:rgba(15, 27, 49,0.3);
/* background: -webkit-linear-gradient(right, #496A85,#496A85); Safari 5.1 - 6.0 */
/* background: -o-linear-gradient(right, #496A85,#496A85); // Opera 11.1 - 12.0 */
/* background: -moz-linear-gradient(right, #496A85,#496A85);// Firefox 3.6 - 15 */
/* background: linear-gradient(left bottom, #273349,#5D516F); //标准的语法（必须放在最后） */
}
.data_content .data_main .main_left div:nth-child(1){ .data_content .data_main .main_left div:nth-child(1){
margin-bottom: 5px; margin-bottom: 5px;
} }
.data_content .data_main .main_left div .main_title{ .data_content .data_main .main_left div .main_title{
width: 260px; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color: #3D495F;
border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -39px;
left:46%;
margin-left: -100px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
text-align:center;
z-index: 1000; z-index: 1000;
border-radius:18px !important;
} }
.data_content .data_main .main_left div .main_title .txt{
line-height: 33px;
/* position: absolute; */
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.label_block {
padding-left: 10px;
width: 40px;
height: 35px;
display: inline-block;
float: right;
}
.label_block label a {
color: white !important;
font-weight: normal;
}
.highcharts-button-box {
rx: 0 !important;
ry: 0 !important;
}
.data_content .data_main .main_left div .main_title .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 59%;
}
/* .data_content .data_main .main_left div .main_title .btn2{
border: 1px solid #26262d;
border-width: 0 1px;
} */
.data_content .data_main .main_center{ .data_content .data_main .main_center{
width: 35%; width: 35%;
@@ -294,48 +368,63 @@ p{
} }
.data_content .data_main .main_center .center_text{ .data_content .data_main .main_center .center_text{
width: calc(100% - 16px); width: calc(100% - 18px);
height: 400px; height: 400px;
margin-left: 15px; margin-left: 15px;
margin-right: 15px; margin-right: 15px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #3D3D3D; /* border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, 上边阴影
10px 0px 15px #3D3D3D inset, /*右边阴影*/ 10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; 0px 10px 15px #3D3D3D inset; */
background-color:rgba(15, 27, 49,0.3);
position: relative; position: relative;
} }
.data_content .data_main .main_center .main_title{ .data_content .data_main .main_center .main_title{
width: 230px; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color: #3D495F;
position: absolute; position: absolute;
top: -17px; top: -39px;
left:50%;
margin-left: -110px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
text-align:center;
z-index: 1000; z-index: 1000;
border-radius:18px !important;
} }
.data_content .data_main .main_center div .main_title .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.data_content .data_main .main_center .center_text .main_title .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 50%;
}
.data_content .data_main .main_right{ .data_content .data_main .main_right{
margin-top: -25px;
width: 23%; width: 23%;
} }
.data_content .data_main .main_right>div{ .data_content .data_main .main_right>div{
width: 100%; width: 100%;
height: 400px; height: 400px;
box-sizing: border-box; /* box-sizing: border-box; */
border: 1px solid #3D3D3D; background-color:rgba(15, 27, 49,0.3);
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ /* border: 1px solid #292853; */
0px -10px 15px #3D3D3D inset, /*上边阴影*/ /* box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
10px 0px 15px #3D3D3D inset, /*右边阴影*/ 0px -10px 15px #3D3D3D inset, 上边阴影
0px 10px 15px #3D3D3D inset; 10px 0px 15px #3D3D3D 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{
@@ -344,10 +433,33 @@ p{
right: 30px; right: 30px;
z-index: 1000; z-index: 1000;
} }
.data_content .data_main .main_right div.right_1 .choice label{ .data_content .data_main .main_right div.right_1 label{
color:#fff; color:#fff;
} }
.choice label{
-webkit-appearance: none;
}
select.minimal:focus {
/*
background-image:
linear-gradient(45deg, gray 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, green 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 15px) 1em,
calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
border-color: #ffffff;
outline: 0;
*/
}
.data_content .data_main .main_right div:nth-child(1){ .data_content .data_main .main_right div:nth-child(1){
margin-bottom: 5px; margin-bottom: 5px;
} }
@@ -371,24 +483,18 @@ p{
} }
/* 第2行图 */ /* 第2行图 */
.data_content .data_main1{ .data_content .data_main1{
width: calc(100% - 30px); width: calc(100% - 14px);
height: 430px; height: 430px;
margin-left: 15px; margin-left: 15px;
margin-top: 30px margin-top: 54px
} }
.data_content .data_main1 .main_left1{ .data_content .data_main1 .main_left1{
width: 41%; width: 40.5%;
} }
.data_content .data_main1 .main_left1>div{ .data_content .data_main1 .main_left1>div{
width: 100%; width: 100%;
height: 430px; height: 430px;
box-sizing: border-box; background-color:rgba(15, 27, 49,0.3);
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; position: relative;
} }
@@ -396,26 +502,46 @@ p{
margin-bottom: 5px; margin-bottom: 5px;
} }
.data_content .data_main1 .main_left1 div .main_title1{ .data_content .data_main1 .main_left1 div .main_title1{
width: 250px; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color: #3D495F;
border-radius: 18px;
position: absolute; position: absolute;
top: -17px; top: -39px;
left:45%;
margin-left: -100px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
text-align:center;
z-index: 1000; z-index: 1000;
border-radius:18px !important; }
.data_content .data_main1 .main_left1 div .main_title1 .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
.data_content .data_main1 .main_left1 div .main_title1 .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 82%;
}
.data_content .data_main1 .main_left1 div .main_title1 .btn1-app{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 69%;
} }
.data_content .data_main1 .main_center1{ .data_content .data_main1 .main_center1{
width: calc(25% - 10px); width: calc(24% - 13px);
height: 430px; height: 430px;
} }
@@ -423,7 +549,7 @@ p{
width: 230px; width: 230px;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color:rgba(95, 80, 94,0.3);
position: absolute; position: absolute;
top: -17px; top: -17px;
left:50%; left:50%;
@@ -438,19 +564,21 @@ p{
} }
.data_content .data_main1 .main_right1{ .data_content .data_main1 .main_right1{
width: calc(34% - 5px); width: calc(34% - 3px);
margin-right: 15px; margin-left: 15px;
margin-top: -38px;
} }
.data_content .data_main1 .main_right1>div{ .data_content .data_main1 .main_right1>div{
width: 100%; width: 100%;
height: 430px; height: 469px;
box-sizing: border-box; /* box-sizing: border-box;
border: 1px solid #3D3D3D; border: 1px solid #3D3D3D;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
0px -10px 15px #3D3D3D inset, /*上边阴影*/ 0px -10px 15px #3D3D3D inset, 上边阴影
/* 10px 0px 15px #3D3D3D inset, */ /*右边阴影*/ 10px 0px 15px #3D3D3D inset, 右边阴影
0px 10px 15px #3D3D3D inset; 0px 10px 15px #3D3D3D inset; */
position: relative; position: relative;
top: -1px;
} }
.data_content .data_main1 .main_right1 div.right_1 .choice{ .data_content .data_main1 .main_right1 div.right_1 .choice{
position: absolute; position: absolute;
@@ -461,7 +589,6 @@ p{
.data_content .data_main1 .main_right1 div.right_1 .choice label{ .data_content .data_main1 .main_right1 div.right_1 .choice label{
color:#fff; color:#fff;
} }
.data_content .data_main1 .main_right1 div:nth-child(1){ .data_content .data_main1 .main_right1 div:nth-child(1){
margin-bottom: 5px; margin-bottom: 5px;
} }
@@ -698,13 +825,24 @@ p{
width: 100%; width: 100%;
} }
.data_content .data_bottom div .main_table thead tr{ .data_content .data_bottom div .main_table thead tr{
height: 36px; height: 37px;
} }
.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:#757575; color:#757575;
text-align: center; text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
border-right:1px solid #493b6a;
border-bottom:1px solid #493b6a;
border-width: 2px;
}
div .main_table_port th:nth-child(1){
border-left:none;
}
div .main_table_port th:nth-child(3){
border-right:none;
} }
.data_content .data_bottom div .main_table th:nth-child(1){ .data_content .data_bottom div .main_table th:nth-child(1){
width: 30%; width: 30%;
@@ -736,99 +874,123 @@ p{
height: 430px; height: 430px;
margin-left: 0px; margin-left: 0px;
margin-top: 30px; margin-top: 30px;
}
.data_bottom_web div{
} }
.bottom_web{ .bottom_web{
width: 100%; width: 100%;
height: 430px; height: 430px;
box-shadow:/* -10px 0px 15px #3D3D3D inset, */ /*左边阴影*/ background-color:rgba(15, 27, 49, 0.3);
0px -10px 15px #3D3D3D inset, /*上边阴影*/
10px 0px 15px #3D3D3D inset, /*右边阴影*/
0px 10px 15px #3D3D3D inset;
position: relative; position: relative;
box-sizing: border-box; margin-left: 15px;
border: 1px solid #3D3D3D;
} }
.bottom_center_web{ .bottom_center_web{
width: 74%; width: 74%;
height: 430px; height: 430px;
}
.bottom_web{
width: 100%;
height: 430px;
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 #3D3D3D;
margin-left: 15px;
} }
div .main_title_web{ div .main_title_web{
width: 220px; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color: rgba(61, 73, 95, 0.7);
border-radius: 18px; /* background: linear-gradient(left bottom, #273349,#5D516F); //标准的语法（必须放在最后） */
position: absolute; position: absolute;
top: -17px; top: -39px;
left:50%;
margin-left: -110px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
text-align:center;
border-radius:18px !important;
} }
div .main_title_web .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
div .main_title_web .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 38%;
}
div .main_title_web .btn1-bs{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 69%;
}
div .main_table_web tr{ div .main_table_web tr{
height: 36px; height: 39px;
}
div .main_table_web tr th{
border-top:none;
border-left:1px solid #847387;
border-right:1px solid #847387;
border-width: 2px;
}
div .main_table_web tr th:nth-child(1){
border-left:none;
}
div .main_table_web tr th:nth-child(3){
border-right:none;
} }
div .main_table_web{ div .main_table_web{
width: 100%; width: 100%;
margin-top: 25px; /* margin-top: 25px; */
} }
div .main_table_web table{ div .main_table_web table{
width: 100%; width: 100%;
} }
div .main_table_web thead tr{ div .main_table_web thead tr{
height: 36px; height: 40px;
} }
div .main_table_web th{ div .main_table_web th{
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color:#757575; /* color:#757575; */
color:#ffffff;
text-align: center; text-align: center;
} }
.main_table_web th:nth-child(1){ .main_table_web th:nth-child(1){
width: 30%; width: 30%;
} }
div .main_table_web th:nth-child(2){ div .main_table_web th:nth-child(2){
width: 35%; width: 40%;
} }
div .main_table_web th:nth-child(2){ div .main_table_web th:nth-child(3){
width: 35%; width: 30%;
} }
div .main_table_web td{ div .main_table_web td{
color:#3D3D3D; /* color:#3D3D3D; */
font-size: 12.8px; font-size: 12.8px;
text-align: center; text-align: center;
border-top:1px solid #847387;
border-left:1px solid #847387;
/* border-right:1px solid #847387; */
border-bottom:none;
border-width: 2px;
} }
.main_table_web tbody tr:nth-child(1), div .main_table_web td:nth-child(1){
border-left:none;
}
div .main_table_web td:nth-child(3){
border-right:none;
}
/* .main_table_web tbody tr:nth-child(1),
div .main_table_web tbody tr:nth-child(3), div .main_table_web tbody tr:nth-child(3),
div .main_table_web tbody tr:nth-child(7), div .main_table_web tbody tr:nth-child(7),
div .main_table_web tbody tr:nth-child(9), div .main_table_web tbody tr:nth-child(9),
div .main_table_web tbody tr:nth-child(5){ div .main_table_web tbody tr:nth-child(5){
background-color: #303030; background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
10px 0px 15px #3D3D3D inset; /*右边阴影*/ 10px 0px 15px #3D3D3D inset; 右边阴影
/*0px 10px 15px #3D3D3D inset;*/ 0px 10px 15px #3D3D3D inset;
} } */
/* 活跃端口 active port */ /* 活跃端口 active port */
.data_bottom_port{ .data_bottom_port{
@@ -895,25 +1057,39 @@ p{
/*background: url("../img/chart_8.png") no-repeat;*/ /*background: url("../img/chart_8.png") no-repeat;*/
} }
div .main_title_port{ div .main_title_port{
width: 220px; width: 100%;
height: 35px; height: 35px;
line-height: 33px; line-height: 33px;
background-color: #3D3D3D; background-color: rgba(61, 73, 95, 0.5);
border-radius: 18px; background: linear-gradient(left bottom, #273349,#5D516F); /* //标准的语法（必须放在最后） */
position: absolute; position: absolute;
top: -17px; top: -39px;
left:50%;
margin-left: -110px;
color:#fff; color:#fff;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
box-sizing: border-box; box-sizing: border-box;
text-align:center; }
border-radius:18px !important; div .main_title_port .txt{
line-height: 33px;
margin-left: 10px;
color:#fff;
font-size: 18px;
font-weight: 600;
box-sizing: border-box;
z-index: 1000;
}
div .main_title_port .btn1{
line-height: 18px;
margin-right: 10px;
font-size: 18px;
font-weight: 600;
z-index: 1000;
margin-left: 50%;
} }
div .main_table_port tr{ div .main_table_port tr{
height: 33px; height: 36px;
} }
div .main_table_port{ div .main_table_port{
width: 100%; width: 100%;
@@ -923,35 +1099,56 @@ p{
width: 100%; width: 100%;
} }
div .main_table_port thead tr{ div .main_table_port thead tr{
height: 36px; height: 40px;
} }
div .main_table_port th{ div .main_table_port th{
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color:#757575; color:#fff;
text-align: center; text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
border-right:1px solid #493b6a;
border-bottom:1px solid #493b6a;
border-width: 0 2px;
} }
div .main_table_port th:nth-child(1){ div .main_table_port th:nth-child(1){
width: 30%; border-left:none;
}
div .main_table_port th:nth-child(3){
border-right:none;
}
div .main_table_port th:nth-child(1){
width: 33%;
} }
div .main_table2 th:nth-child(2){ div .main_table2 th:nth-child(2){
width: 35%; width: 36%;
} }
div .main_table_port th:nth-child(2){ div .main_table_port th:nth-child(2){
width: 35%; width: 36%;
} }
div .main_table_port td{ div .main_table_port td{
color:#3D3D3D; /* color:#3D3D3D; */
font-size: 12.8px; font-size: 12.8px;
text-align: center; text-align: center;
border-top:1px solid #493b6a;
border-left:1px solid #493b6a;
/* border-right:1px solid #493b6a; */
border-width: 2px;
}
div .main_table_port td:nth-child(1){
border-left:none;
}
div .main_table_port td:nth-child(3){
border-right:none;
} }
div .main_table_port tbody tr:nth-child(1), div .main_table_port tbody tr:nth-child(1),
div .main_table_port tbody tr:nth-child(3), div .main_table_port tbody tr:nth-child(3),
div .main_table_port tbody tr:nth-child(7), div .main_table_port tbody tr:nth-child(7),
div .main_table_port tbody tr:nth-child(9), div .main_table_port tbody tr:nth-child(9),
div .main_table_port tbody tr:nth-child(5){ div .main_table_port tbody tr:nth-child(5){
background-color: #303030; /* background-color: #303030;
box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影
10px 0px 15px #3D3D3D inset; /*右边阴影*/ 10px 0px 15px #3D3D3D inset; 右边阴影
/*0px 10px 15px #3D3D3D inset;*/ 0px 10px 15px #3D3D3D inset; */
} }

285
src/main/webapp/static/pages/scripts/echart.js
View File

@@ -1,15 +1,5 @@
Highcharts.setOptions({ // Apply to all charts //蓝色系 colors:['#0026af', '#0032bc', '#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
chart: { //彩色系colors:[ '#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
events: {
beforePrint: function () {
$(".highcharts-background").attr("fill","rgba(48,48,48,1)")
},
afterPrint: function () {
$(".highcharts-background").attr("fill","rgba(255, 255, 255, 0)")
}
}
}
});
//协议统计分析 //协议统计分析
function echart_1(rs) { function echart_1(rs) {
@@ -29,7 +19,7 @@
// drilldown: d.protoType, // drilldown: d.protoType,
}); });
/*pktNum[0]="pktNum"; pktNum[0]="pktNum";
pktNum[1]=parseInt(d.pktNum); pktNum[1]=parseInt(d.pktNum);
byteLen[0]="byteLen"; byteLen[0]="byteLen";
byteLen[1]=parseInt(d.byteLen); byteLen[1]=parseInt(d.byteLen);
@@ -40,7 +30,7 @@
type:'pie', type:'pie',
innerSize: '70%', innerSize: '70%',
data: [pktNum,byteLen], data: [pktNum,byteLen],
});*/ });
}); });
var chart = Highcharts.chart('chart_1', { var chart = Highcharts.chart('chart_1', {
@@ -56,8 +46,8 @@
}, },
navigation: { navigation: {
buttonOptions: { buttonOptions: {
x:25, x:31,
y: -18, y:-30
} }
}, },
exporting: { exporting: {
@@ -73,14 +63,16 @@
}, },
} }
}, },
buttons: exportingButton('#3b355b')
}, },
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
}, },
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], //colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6' ,'#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: { title: {
text: null text: null
}, },
@@ -123,6 +115,7 @@
plotOptions: { plotOptions: {
pie: { pie: {
borderColor: "",
allowPointSelect: true, allowPointSelect: true,
cursor: 'pointer', cursor: 'pointer',
showInLegend: true, showInLegend: true,
@@ -144,7 +137,7 @@
mouseOver: function(e) { // 鼠标滑过时动态更新标题 mouseOver: function(e) { // 鼠标滑过时动态更新标题
// 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({ chart.setTitle({
text:e.target.name.length>10? this.percentage.toFixed(2)+"%<br><span>"+(e.target.name+"").substring(0,10)+"...</span>":this.percentage.toFixed(2)+"%<br><span>"+e.target.name+"</span>", text:e.target.name.length>10? this.percentage.toFixed(2)+"%<br><span>"+e.target.name.substring(0,10)+"...</span>":this.percentage.toFixed(2)+"%<br><span>"+(e.target.name+"").substring(0,10)+"</span>",
floating:true, floating:true,
y:120, y:120,
style: {//设置字体颜色 style: {//设置字体颜色
@@ -164,7 +157,7 @@
} }
}, },
}, },
} },
}, },
series: [{ series: [{
type: 'pie', type: 'pie',
@@ -193,7 +186,7 @@
// echart_main中心图 活跃IP统计 // echart_main中心图 活跃IP统计
function echart_main(rs) { function echart_main(rs) {
// if(rs==null||rs.length<=0){ // if(rs==null||rs.length<=0){
// rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6}, // rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6},
// {"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7}, // {"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7},
@@ -245,12 +238,12 @@
marginTop:50, marginTop:50,
inverted: true, inverted: true,
}, },
navigation: { //navigation: {
buttonOptions: { //buttonOptions: {
y:13, //y:13,
x:-7 //x:-7
} //}
}, //},
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'Active-IP', filename:'Active-IP',
@@ -263,14 +256,40 @@
}, },
}, },
} }
},
buttons: {
contextButton: {
symbolSize: 12,
symbolX: 11,
symbolY: 10,
symbolStroke: '#e6e6e6',
symbolFill: '#e6e6e6',
width: 21,
height: 20,
theme: {
'stroke-width': 1,
stroke: '#e6e6e6',
r: 0,
fill: '#51586f',
states: {
hover: {
fill: '#51586f'
},
select: {
fill: '#51586f'
}
}
}
}
} }
}, },
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
}, },
}, },//
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], //colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
colors:['#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
title: { title: {
text: null text: null
}, },
@@ -304,45 +323,45 @@
}, },
yAxis: { yAxis: {
min: 0, min: 0,
title: { title: {
text: unit, text: unit,
align:'high', align:'high',
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
fontSize:'10px', fontSize:'10px',
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei'
}, },
}, },
labels: { labels: {
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
fontSize:'10px', fontSize:'10px',
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei'
}, },
}, },
lineWidth: 1, lineWidth: 1
}, },
tooltip: { tooltip: {
headerFormat: '{series.name}<br>', headerFormat: '{series.name}<br>',
pointFormat: '{point.name} <br>{point.y}</b> '+unit pointFormat: '{point.name} <br>{point.y}</b> '+unit
}, },
plotOptions: { plotOptions: {
bar: { bar: {
dataLabels: { borderColor: "",
enabled: true, dataLabels: {
allowOverlap: true, // 允许数据标签重叠 enabled: true,
style: {//设置字体颜色 allowOverlap: true, // 允许数据标签重叠
color: '#fff', style: {//设置字体颜色
fontSize:'10px', color: '#fff',
fontFamily:'Microsoft YaHei' fontSize:'10px',
}, fontFamily:'Microsoft YaHei',
}, textOutline:'none',
fontWeight:'normal'
showInLegend:false }
}, },
showInLegend: false
}
}, },
credits:{//是否有highcharts水印 credits:{//是否有highcharts水印
enabled:false enabled:false
@@ -351,7 +370,7 @@
name: ' ', name: ' ',
colorByPoint: true, colorByPoint: true,
data: data data: data
}] }],
// drilldown:{ // drilldown:{
// activeAxisLabelStyle:{ // activeAxisLabelStyle:{
// textDecoration:'none', // textDecoration:'none',
@@ -416,8 +435,8 @@
var inoctetsNum=d.count; var inoctetsNum=d.count;
unit=changeUnit(inoctetsNum); unit=changeUnit(inoctetsNum);
inoctetsNum=changeNum(inoctetsNum); inoctetsNum=changeNum(inoctetsNum);
// var pktNum=new Array(); var pktNum=new Array();
// var byteLen=new Array(); var byteLen=new Array();
xData.push(d.appType); xData.push(d.appType);
data.push({ data.push({
name: d.appType, name: d.appType,
@@ -445,14 +464,15 @@
marginBottom:60, marginBottom:60,
}, },
navigation: { /*navigation: {
buttonOptions: { buttonOptions: {
y: 13, y: 13,
} }
}, },*/
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'App', filename:'App',
buttons: exportingButton('#415262')
}, },
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
@@ -466,7 +486,8 @@
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei'
}, },
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], //colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
colors:['#0026af', '#0032bc', '#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'],
title: { title: {
text: null text: null
}, },
@@ -520,20 +541,21 @@
useHTML: true useHTML: true
}, },
plotOptions: { plotOptions: {
column: { column: {
dataLabels: {// 柱形图上的数字显示 dataLabels: {// 柱形图上的数字显示
enabled: true, enabled: true,
allowOverlap: true, // 允许数据标签重叠 allowOverlap: true, // 允许数据标签重叠
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
fontSize:'10px', fontSize:'10px',
fontFamily:'Microsoft YaHei' fontFamily:'Microsoft YaHei',
}, textOutline:'none',
fontWeight:'normal'
// format:"{point.y:.2f}", }
}, },
borderColor: "",//去边框
showInLegend:false showInLegend:false
}, },
}, },
series: [{ series: [{
@@ -597,13 +619,8 @@ function echart_2(rs){
plotBackgroundColor:null, plotBackgroundColor:null,
plotBorderWidth:null, plotBorderWidth:null,
plotShadow:false, plotShadow:false,
type: 'pie' type: 'pie',
}, },
navigation: {
buttonOptions: {
y: -8,
}
},
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'BS', filename:'BS',
@@ -616,7 +633,8 @@ function echart_2(rs){
}, },
}, },
} }
} },
buttons: exportingButton('#372f57')
}, },
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
@@ -636,7 +654,9 @@ function echart_2(rs){
fontFamily:'Microsoft YaHei', fontFamily:'Microsoft YaHei',
} }
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], //colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: { title: {
text: null, text: null,
style: {//设置字体颜色 style: {//设置字体颜色
@@ -654,7 +674,9 @@ function echart_2(rs){
}, },
}, },
pie:{ pie:{
borderColor: "",
showInLegend: true, showInLegend: true,
size: '80%',
point: { point: {
events: { events: {
mouseOver: function(e) { mouseOver: function(e) {
@@ -684,6 +706,7 @@ function echart_2(rs){
}, },
series: [{ series: [{
name: ' ', name: ' ',
size: '80%',
colorByPoint: true, colorByPoint: true,
data: data data: data
}], }],
@@ -746,11 +769,11 @@ function echart_5(rs){
plotShadow:false, plotShadow:false,
type: 'pie' type: 'pie'
}, },
navigation: { /*navigation: {
buttonOptions: { buttonOptions: {
y: -8, y: -8,
} }
}, },*/
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'BS', filename:'BS',
@@ -763,7 +786,8 @@ function echart_5(rs){
}, },
}, },
} }
} },
buttons: exportingButton('#372f57')
}, },
legend:{ legend:{
width:480, width:480,
@@ -783,7 +807,8 @@ function echart_5(rs){
color: '#fff', color: '#fff',
}, },
}, },
colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
/*colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],*/
title: { title: {
text: null, text: null,
style: {//设置字体颜色 style: {//设置字体颜色
@@ -802,6 +827,7 @@ function echart_5(rs){
}, },
pie:{ pie:{
borderColor: "",
point: { point: {
events: { events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题 mouseOver: function(e) { // 鼠标滑过时动态更新标题
@@ -818,6 +844,7 @@ function echart_5(rs){
}, },
}, },
showInLegend: true, showInLegend: true,
size: '80%',
} }
}, },
credits:{//是否有highcharts水印 credits:{//是否有highcharts水印
@@ -832,6 +859,7 @@ function echart_5(rs){
}, },
series: [{ series: [{
name: ' ', name: ' ',
size: '80%',
colorByPoint: true, colorByPoint: true,
data: data data: data
}], }],
@@ -894,12 +922,6 @@ function echart_4(rs){
plotShadow:false, plotShadow:false,
type: 'pie' type: 'pie'
}, },
navigation: {
buttonOptions: {
x:-5,
y: -10,
}
},
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'Website', filename:'Website',
@@ -909,12 +931,15 @@ function echart_4(rs){
dataLabels: { dataLabels: {
enabled: true, enabled: true,
allowOverlap: true, // 允许数据标签重叠 allowOverlap: true, // 允许数据标签重叠
}, }
}, },
} }
} },
buttons: exportingButton('#3c2347')
}, },
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], //colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'],
//colors:[ '#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4','#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5'],
colors:['#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'],
title: { title: {
text: null, text: null,
}, },
@@ -931,6 +956,8 @@ function echart_4(rs){
}, },
}, },
pie:{ pie:{
borderColor: "",
size: "80%",
showInLegend: true, showInLegend: true,
point: { point: {
events: { events: {
@@ -1036,12 +1063,12 @@ function echart_6(rs){
plotShadow:false, plotShadow:false,
type: 'pie' type: 'pie'
}, },
navigation: { /*navigation: {
buttonOptions: { buttonOptions: {
x:-5, x:-5,
y: -10, y: -10,
} }
}, },*/
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'Website', filename:'Website',
@@ -1073,6 +1100,7 @@ function echart_6(rs){
}, },
}, },
pie:{ pie:{
borderColor: "",
showInLegend: true, showInLegend: true,
point: { point: {
events: { events: {
@@ -1185,12 +1213,12 @@ function echart_topic_domain(rs){
marginTop:50, marginTop:50,
marginBottom:10, marginBottom:10,
}, },
navigation: { /* navigation: {
buttonOptions: { buttonOptions: {
x:-5, x:-5,
y:15, y:15,
} }
}, },*/
exporting: { exporting: {
allowHTML:true, allowHTML:true,
filename:'Topic', filename:'Topic',
@@ -1203,9 +1231,11 @@ function echart_topic_domain(rs){
}, },
}, },
} }
} },
buttons: exportingButton('#6e6379')
}, },
colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'], //colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'],
colors:['#003078','#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#0058e1','#066aff', '#5597cd', '#5c9dff', '#67a7de', '#77b5dc', '#98cde7','#89b9ff','#78adff'],
noData:{ noData:{
style: {//设置字体颜色 style: {//设置字体颜色
color: '#fff', color: '#fff',
@@ -1224,7 +1254,12 @@ function echart_topic_domain(rs){
cursor: 'pointer', cursor: 'pointer',
colorByPoint: true, colorByPoint: true,
dataLabels: { dataLabels: {
format: '{point.name}', //format: '{point.name}',
/*formatter: function(){
this.point.value = this.point.value.toFixed(2);
this.series.name = this.point.name;
console.info(this);
},*/
filter: { filter: {
property: 'innerArcLength', property: 'innerArcLength',
operator: '>', operator: '>',
@@ -1264,10 +1299,54 @@ function echart_topic_domain(rs){
}] }]
}], }],
plotOptions: {
sunburst: {
borderColor: "",
dataLabels: {
enabled: true,
style: {//设置字体颜色
color: '#fff',
fontSize:'11px',
fontFamily:'Microsoft YaHei',
textOutline:'none',
fontWeight:'normal'
},
format: '{point.name}',
}
}
},
tooltip: { tooltip: {
headerFormat: "", headerFormat: "",
pointFormat: '<b>{point.name}</b> : <b>{point.value}<b> ' +unit pointFormat: '<b>{point.name}</b> : <b>{point.value:.2f}<b> ' +unit
} }
}); });
} }
function exportingButton(color) {
var button = {
contextButton: {
symbolSize: 12,
symbolX: 11,
symbolY: 10,
symbolStroke: '#e6e6e6',
symbolFill: '#e6e6e6',
width: 21,
height: 20,
theme: {
'stroke-width': 1,
stroke: '#e6e6e6',
r: 0,
fill: color,
states: {
hover: {
fill: color
},
select: {
fill: color
}
}
}
}
};
return button;
}