From 4a93a198fd187fb40f0b13f57b0fbce4a8f52175 Mon Sep 17 00:00:00 2001 From: zhangwei Date: Thu, 20 Dec 2018 14:32:36 +0600 Subject: [PATCH] =?UTF-8?q?=E6=B5=81=E9=87=8F=E7=BB=9F=E8=AE=A1=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/dashboard/dashBoardIndex.jsp | 210 +++---- .../webapp/static/pages/css/data_text.css | 535 ++++++++++++------ .../webapp/static/pages/scripts/echart.js | 285 ++++++---- 3 files changed, 637 insertions(+), 393 deletions(-) diff --git a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp index 54f21ce6e..f9ac10e2f 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp @@ -15,7 +15,32 @@ - + @@ -118,7 +143,6 @@
-

" class="tooltips" data-flag="false" data-html="true" data-placement="top">

@@ -162,27 +186,40 @@
-    + + + + + + +
-
+
-    - + + + + + + +
-
+
-    - + + + +
@@ -209,20 +246,25 @@
-   <%-- --%> -   -
+ + + + + + + +
- -
-    - + + + +
@@ -239,13 +281,13 @@ -
+
<%--
--%>
-
+
@@ -255,8 +297,13 @@
-    - + + + + + + +
@@ -265,8 +312,10 @@
- OS/BS    - + + + +
@@ -275,9 +324,9 @@ @@ -291,101 +340,19 @@
-
+
<%--
--%>
-
+
- - -<%--
-
-
- BS    - -
-
-
- + +
- - - - - - - - - - - - - - -
-
- -
-
1windows0
-
-
- -
-
-
- -
-
-
-
-
-
-
-    -
-
- - - - - - - - - - - - - - - -
1baidu.com0
-
-
- -
-
-    - -
-
-
-
-
--%> -
- - - - @@ -634,12 +601,13 @@ function portActiveList(){ var tr = ""; tr += ""+itemObj.port+""; tr += ""+count+""; + if(preCount"+""; + tr += ""+""+""; }else if(preCount>count){ - tr += ""+""+""; + tr += ""+""+""; }else{ - tr += ""+"--"+""; + tr += ""+"--"+""; } $("#tbodyDataPort").prepend(tr); }) @@ -726,11 +694,11 @@ function systemList(){ tr += ""+n+""; tr += ""+os+""; if(preCount"+""; + tr += ""+""+""; }else if(preCount>count){ - tr += ""+""+""; + tr += ""+""+""; }else{ - tr += ""+"--"+""; + tr += ""+"--"+""; } n=n-1; $("#tbodyData1").prepend(tr); @@ -837,11 +805,11 @@ function browserList() { tr += ""+n+""; tr += ""+bs+""; if(preCount"+""; + tr += ""+""+""; }else if(preCount>count){ - tr += ""+""+""; + tr += ""+""+""; }else{ - tr += ""+"--"+""; + tr += ""+"--"+""; } $("#tbodyData1").prepend(tr); n=n-1; @@ -901,11 +869,11 @@ function websiteList() { tr += ""+n+""; tr += ""+web+""; if(itemObj.preCount"+""; + tr += ""+""+""; }else if(itemObj.preCount>itemObj.count){ - tr += ""+""+""; + tr += ""+""+""; }else{ - tr += ""+"--"+""; + tr += ""+"--"+""; } $("#tbodyData2").prepend(tr); diff --git a/src/main/webapp/static/pages/css/data_text.css b/src/main/webapp/static/pages/css/data_text.css index a9242ea42..3d2b042ed 100644 --- a/src/main/webapp/static/pages/css/data_text.css +++ b/src/main/webapp/static/pages/css/data_text.css @@ -3,9 +3,15 @@ .data_content{ /*overflow-x: hidden;*/ /* min-width: 1366px; */ - background-color: #303030; - padding-top: 30px; - padding-bottom: 10px; +/* background-color: #303030; */ + padding-top: 15px; +/* 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 *************************/ @@ -14,7 +20,7 @@ p{ } .data_content .data_info{ width: calc(100% - 20px); - margin-bottom: 40px; + margin-bottom: 50px; height: 110px; margin-left: 15px; text-align: center; @@ -28,32 +34,61 @@ p{ .data_content .data_info .fr_fc{ width: 100%; height: 110px; - border: 1px solid #303030; + border: 1px solid #545678; border-width: 0 1px; 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{ - margin-left: 0px; + margin-left: 2px; float: left; height: 110px; width: 28%; - font-size: 45px; - color: #C5C5C5; + font-size: 40px; +/* color: #d9ffff !important; */ +/* color: linear-gradient(to right, #ffcc99, #77b5dc); */ 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 { - color: #C5C5C5 !important; +/* .data_content .data_info .fr_fc .fl_visual a:link { + 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 { - 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 { color: #716D6D !important; } .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{ width: 70%; height: 110px; @@ -62,7 +97,7 @@ p{ } .data_content .data_info .info_2>.text_2{ width: calc(100% - 10px); - background-color: #3D3D3D; + background-color: #3D495F; height: 110px; } @@ -78,23 +113,11 @@ p{ } .data_content .data_info .info_1>.text_1{ width: calc(100% - 1px); - background-color: #3D3D3D; + background-color: #3D495F; 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{ - width: 14.2%; + width: 14.2%; position: relative; } .data_content .data_info>div.info_1>div>div, @@ -134,7 +157,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -142,7 +166,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -150,7 +175,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -158,7 +184,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -166,7 +193,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -174,7 +202,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -182,7 +211,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -190,7 +220,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 2.1em; margin-left: 0px; } @@ -198,7 +229,8 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 1px; margin-left: 0px; } @@ -206,19 +238,22 @@ p{ width:100%; font-weight: 600; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 33px; margin-left: 0px; } .data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{ font-weight: 500; font-size: 16px; - color:#288dce; + /*color:#288dce;*/ + color:#ffffff; margin-top: 0.6px; } .data_content .data_info>div.info_1 .fl_fc .csNum{ font-size: 11px; - color:#337ab7 !important; + /*color:#337ab7 !important;*/ + color:#ffffff !important; margin-top: -6px; text-align: center; margin-left: 1.3px; @@ -256,37 +291,76 @@ p{ .data_content .data_main .main_left>div{ width: 100%; height: 400px; - box-sizing: border-box; + /* box-sizing: border-box; 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; + 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 .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){ margin-bottom: 5px; } .data_content .data_main .main_left div .main_title{ - width: 260px; + width: 100%; height: 35px; line-height: 33px; - background-color: #3D3D3D; - border-radius: 18px; + background-color: #3D495F; position: absolute; - top: -17px; - left:46%; - margin-left: -100px; + top: -39px; color:#fff; font-size: 18px; font-weight: 600; box-sizing: border-box; - text-align:center; 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{ width: 35%; @@ -294,48 +368,63 @@ p{ } .data_content .data_main .main_center .center_text{ - width: calc(100% - 16px); + width: calc(100% - 18px); height: 400px; margin-left: 15px; margin-right: 15px; box-sizing: border-box; - 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; +/* 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; */ + background-color:rgba(15, 27, 49,0.3); position: relative; } .data_content .data_main .main_center .main_title{ - width: 230px; + width: 100%; height: 35px; line-height: 33px; - background-color: #3D3D3D; + background-color: #3D495F; position: absolute; - top: -17px; - left:50%; - margin-left: -110px; + top: -39px; color:#fff; font-size: 18px; font-weight: 600; box-sizing: border-box; - text-align:center; 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{ + margin-top: -25px; width: 23%; } .data_content .data_main .main_right>div{ width: 100%; height: 400px; - box-sizing: border-box; - 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; +/* box-sizing: border-box; */ + background-color:rgba(15, 27, 49,0.3); +/* border: 1px solid #292853; */ + /* 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{ @@ -344,10 +433,33 @@ p{ right: 30px; 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; } +.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){ margin-bottom: 5px; } @@ -371,24 +483,18 @@ p{ } /* 第2行图 */ .data_content .data_main1{ - width: calc(100% - 30px); + width: calc(100% - 14px); height: 430px; margin-left: 15px; - margin-top: 30px + margin-top: 54px } .data_content .data_main1 .main_left1{ - width: 41%; + width: 40.5%; } .data_content .data_main1 .main_left1>div{ width: 100%; height: 430px; - box-sizing: border-box; - 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; + background-color:rgba(15, 27, 49,0.3); position: relative; } @@ -396,26 +502,46 @@ p{ margin-bottom: 5px; } .data_content .data_main1 .main_left1 div .main_title1{ - width: 250px; + width: 100%; height: 35px; line-height: 33px; - background-color: #3D3D3D; - border-radius: 18px; + background-color: #3D495F; position: absolute; - top: -17px; - left:45%; - margin-left: -100px; + top: -39px; color:#fff; font-size: 18px; font-weight: 600; box-sizing: border-box; - text-align:center; 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{ - width: calc(25% - 10px); + width: calc(24% - 13px); height: 430px; } @@ -423,7 +549,7 @@ p{ width: 230px; height: 35px; line-height: 33px; - background-color: #3D3D3D; + background-color:rgba(95, 80, 94,0.3); position: absolute; top: -17px; left:50%; @@ -438,19 +564,21 @@ p{ } .data_content .data_main1 .main_right1{ - width: calc(34% - 5px); - margin-right: 15px; + width: calc(34% - 3px); + margin-left: 15px; + margin-top: -38px; } .data_content .data_main1 .main_right1>div{ width: 100%; - height: 430px; - box-sizing: border-box; + height: 469px; +/* box-sizing: border-box; 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; + box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影 + 0px -10px 15px #3D3D3D inset, 上边阴影 + 10px 0px 15px #3D3D3D inset, 右边阴影 + 0px 10px 15px #3D3D3D inset; */ position: relative; + top: -1px; } .data_content .data_main1 .main_right1 div.right_1 .choice{ position: absolute; @@ -461,7 +589,6 @@ p{ .data_content .data_main1 .main_right1 div.right_1 .choice label{ color:#fff; } - .data_content .data_main1 .main_right1 div:nth-child(1){ margin-bottom: 5px; } @@ -698,13 +825,24 @@ p{ width: 100%; } .data_content .data_bottom div .main_table thead tr{ - height: 36px; + height: 37px; } .data_content .data_bottom div .main_table th{ font-size: 14px; font-weight: 600; color:#757575; 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){ width: 30%; @@ -736,99 +874,123 @@ p{ height: 430px; margin-left: 0px; margin-top: 30px; -} - .data_bottom_web div{ - } .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; + background-color:rgba(15, 27, 49, 0.3); position: relative; - box-sizing: border-box; - border: 1px solid #3D3D3D; + margin-left: 15px; } .bottom_center_web{ width: 74%; 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{ - width: 220px; + width: 100%; height: 35px; line-height: 33px; - background-color: #3D3D3D; - border-radius: 18px; + background-color: rgba(61, 73, 95, 0.7); +/* background: linear-gradient(left bottom, #273349,#5D516F); //标准的语法（必须放在最后） */ position: absolute; - top: -17px; - left:50%; - margin-left: -110px; + top: -39px; color:#fff; font-size: 18px; font-weight: 600; 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{ - 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{ width: 100%; - margin-top: 25px; +/* margin-top: 25px; */ } div .main_table_web table{ width: 100%; } div .main_table_web thead tr{ - height: 36px; + height: 40px; } div .main_table_web th{ font-size: 14px; font-weight: 600; - color:#757575; +/* color:#757575; */ + color:#ffffff; text-align: center; } .main_table_web th:nth-child(1){ width: 30%; } div .main_table_web th:nth-child(2){ - width: 35%; + width: 40%; } - div .main_table_web th:nth-child(2){ - width: 35%; + div .main_table_web th:nth-child(3){ + width: 30%; } div .main_table_web td{ - color:#3D3D3D; +/* color:#3D3D3D; */ font-size: 12.8px; 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(7), div .main_table_web tbody tr:nth-child(9), div .main_table_web tbody tr:nth-child(5){ background-color: #303030; - box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ - 10px 0px 15px #3D3D3D inset; /*右边阴影*/ - /*0px 10px 15px #3D3D3D inset;*/ -} + box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影 + 10px 0px 15px #3D3D3D inset; 右边阴影 + 0px 10px 15px #3D3D3D inset; +} */ /* 活跃端口 active port */ .data_bottom_port{ @@ -895,25 +1057,39 @@ p{ /*background: url("../img/chart_8.png") no-repeat;*/ } div .main_title_port{ - width: 220px; + width: 100%; height: 35px; line-height: 33px; - background-color: #3D3D3D; - border-radius: 18px; + background-color: rgba(61, 73, 95, 0.5); + background: linear-gradient(left bottom, #273349,#5D516F); /* //标准的语法（必须放在最后） */ position: absolute; - top: -17px; - left:50%; - margin-left: -110px; + top: -39px; color:#fff; font-size: 18px; font-weight: 600; 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{ - height: 33px; + height: 36px; } div .main_table_port{ width: 100%; @@ -923,35 +1099,56 @@ p{ width: 100%; } div .main_table_port thead tr{ - height: 36px; + height: 40px; } div .main_table_port th{ font-size: 14px; font-weight: 600; - color:#757575; + color:#fff; 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){ - 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){ - width: 35%; + width: 36%; } div .main_table_port th:nth-child(2){ - width: 35%; + width: 36%; } div .main_table_port td{ - color:#3D3D3D; +/* color:#3D3D3D; */ font-size: 12.8px; 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(3), 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(5){ - background-color: #303030; - box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ - 10px 0px 15px #3D3D3D inset; /*右边阴影*/ - /*0px 10px 15px #3D3D3D inset;*/ +/* background-color: #303030; + box-shadow:-10px 0px 15px #3D3D3D inset, 左边阴影 + 10px 0px 15px #3D3D3D inset; 右边阴影 + 0px 10px 15px #3D3D3D inset; */ } \ No newline at end of file diff --git a/src/main/webapp/static/pages/scripts/echart.js b/src/main/webapp/static/pages/scripts/echart.js index 40b6a0934..7734171a4 100644 --- a/src/main/webapp/static/pages/scripts/echart.js +++ b/src/main/webapp/static/pages/scripts/echart.js @@ -1,15 +1,5 @@ - Highcharts.setOptions({ // Apply to all charts - chart: { - events: { - beforePrint: function () { - $(".highcharts-background").attr("fill","rgba(48,48,48,1)") - }, - afterPrint: function () { - $(".highcharts-background").attr("fill","rgba(255, 255, 255, 0)") - } - } - } - }); +//蓝色系 colors:['#0026af', '#0032bc', '#004bbc', '#015bb1', '#2f74b5', '#4186c1', '#5597cd', '#67a7de', '#77b5dc', '#98cde7', '#b9e7f4', '#d9ffff'], +//彩色系colors:[ '#fe392e','#fe7d2e','#febb1d', '#feff1d','#51d569','#51d5d5','#0032bc','#1d7cf9' ,'#77b5dc','#b9e7f4'], //协议统计分析 function echart_1(rs) { @@ -29,7 +19,7 @@ // drilldown: d.protoType, }); - /*pktNum[0]="pktNum"; + pktNum[0]="pktNum"; pktNum[1]=parseInt(d.pktNum); byteLen[0]="byteLen"; byteLen[1]=parseInt(d.byteLen); @@ -40,7 +30,7 @@ type:'pie', innerSize: '70%', data: [pktNum,byteLen], - });*/ + }); }); var chart = Highcharts.chart('chart_1', { @@ -56,8 +46,8 @@ }, navigation: { buttonOptions: { - x:25, - y: -18, + x:31, + y:-30 } }, exporting: { @@ -73,14 +63,16 @@ }, } }, - + buttons: exportingButton('#3b355b') }, noData:{ style: {//设置字体颜色 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: { text: null }, @@ -123,6 +115,7 @@ plotOptions: { pie: { + borderColor: "", allowPointSelect: true, cursor: 'pointer', showInLegend: true, @@ -144,7 +137,7 @@ mouseOver: function(e) { // 鼠标滑过时动态更新标题 // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle chart.setTitle({ - text:e.target.name.length>10? this.percentage.toFixed(2)+"%
"+(e.target.name+"").substring(0,10)+"...":this.percentage.toFixed(2)+"%
"+e.target.name+"", + text:e.target.name.length>10? this.percentage.toFixed(2)+"%
"+e.target.name.substring(0,10)+"...":this.percentage.toFixed(2)+"%
"+(e.target.name+"").substring(0,10)+"", floating:true, y:120, style: {//设置字体颜色 @@ -164,7 +157,7 @@ } }, }, - } + }, }, series: [{ type: 'pie', @@ -193,7 +186,7 @@ // echart_main中心图 活跃IP统计 - function echart_main(rs) { + function echart_main(rs) { // if(rs==null||rs.length<=0){ // rs=[{"ipAddr":"103.6.1.12","linkNum":532,"pktNum": 5,"byteLen": 6}, // {"ipAddr":"163.5.6.43","linkNum":532,"pktNum": 5,"byteLen": 7}, @@ -245,12 +238,12 @@ marginTop:50, inverted: true, }, - navigation: { - buttonOptions: { - y:13, - x:-7 - } - }, + //navigation: { + //buttonOptions: { + //y:13, + //x:-7 + //} + //}, exporting: { allowHTML:true, 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:{ style: {//设置字体颜色 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: { text: null }, @@ -304,45 +323,45 @@ }, yAxis: { - min: 0, - title: { - text: unit, - align:'high', - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - labels: { - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - lineWidth: 1, - + min: 0, + title: { + text: unit, + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + labels: { + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + lineWidth: 1 }, tooltip: { headerFormat: '{series.name}
', pointFormat: '{point.name}
{point.y} '+unit }, plotOptions: { - bar: { - dataLabels: { - enabled: true, - allowOverlap: true, // 允许数据标签重叠 - style: {//设置字体颜色 - color: '#fff', - fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - }, - - showInLegend:false - }, - + bar: { + borderColor: "", + dataLabels: { + enabled: true, + allowOverlap: true, // 允许数据标签重叠 + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei', + textOutline:'none', + fontWeight:'normal' + } + }, + showInLegend: false + } }, credits:{//是否有highcharts水印 enabled:false @@ -351,7 +370,7 @@ name: ' ', colorByPoint: true, data: data - }] + }], // drilldown:{ // activeAxisLabelStyle:{ // textDecoration:'none', @@ -416,8 +435,8 @@ var inoctetsNum=d.count; unit=changeUnit(inoctetsNum); inoctetsNum=changeNum(inoctetsNum); -// var pktNum=new Array(); -// var byteLen=new Array(); + var pktNum=new Array(); + var byteLen=new Array(); xData.push(d.appType); data.push({ name: d.appType, @@ -445,14 +464,15 @@ marginBottom:60, }, - navigation: { + /*navigation: { buttonOptions: { y: 13, } - }, + },*/ exporting: { allowHTML:true, filename:'App', + buttons: exportingButton('#415262') }, noData:{ style: {//设置字体颜色 @@ -466,7 +486,8 @@ 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: { text: null }, @@ -520,20 +541,21 @@ useHTML: true }, plotOptions: { - column: { + column: { dataLabels: {// 柱形图上的数字显示 enabled: true, allowOverlap: true, // 允许数据标签重叠 style: {//设置字体颜色 color: '#fff', fontSize:'10px', - fontFamily:'Microsoft YaHei' - }, - -// format:"{point.y:.2f}", + fontFamily:'Microsoft YaHei', + textOutline:'none', + fontWeight:'normal' + } }, + borderColor: "",//去边框 showInLegend:false - }, + }, }, series: [{ @@ -597,13 +619,8 @@ function echart_2(rs){ plotBackgroundColor:null, plotBorderWidth:null, plotShadow:false, - type: 'pie' + type: 'pie', }, - navigation: { - buttonOptions: { - y: -8, - } - }, exporting: { allowHTML:true, filename:'BS', @@ -616,7 +633,8 @@ function echart_2(rs){ }, }, } - } + }, + buttons: exportingButton('#372f57') }, noData:{ style: {//设置字体颜色 @@ -636,7 +654,9 @@ function echart_2(rs){ 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: { text: null, style: {//设置字体颜色 @@ -654,7 +674,9 @@ function echart_2(rs){ }, }, pie:{ + borderColor: "", showInLegend: true, + size: '80%', point: { events: { mouseOver: function(e) { @@ -684,6 +706,7 @@ function echart_2(rs){ }, series: [{ name: ' ', + size: '80%', colorByPoint: true, data: data }], @@ -746,11 +769,11 @@ function echart_5(rs){ plotShadow:false, type: 'pie' }, - navigation: { + /*navigation: { buttonOptions: { y: -8, } - }, + },*/ exporting: { allowHTML:true, filename:'BS', @@ -763,7 +786,8 @@ function echart_5(rs){ }, }, } - } + }, + buttons: exportingButton('#372f57') }, legend:{ width:480, @@ -783,7 +807,8 @@ function echart_5(rs){ 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: { text: null, style: {//设置字体颜色 @@ -802,6 +827,7 @@ function echart_5(rs){ }, pie:{ + borderColor: "", point: { events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 @@ -818,6 +844,7 @@ function echart_5(rs){ }, }, showInLegend: true, + size: '80%', } }, credits:{//是否有highcharts水印 @@ -832,6 +859,7 @@ function echart_5(rs){ }, series: [{ name: ' ', + size: '80%', colorByPoint: true, data: data }], @@ -894,12 +922,6 @@ function echart_4(rs){ plotShadow:false, type: 'pie' }, - navigation: { - buttonOptions: { - x:-5, - y: -10, - } - }, exporting: { allowHTML:true, filename:'Website', @@ -909,12 +931,15 @@ function echart_4(rs){ dataLabels: { enabled: 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: { text: null, }, @@ -931,6 +956,8 @@ function echart_4(rs){ }, }, pie:{ + borderColor: "", + size: "80%", showInLegend: true, point: { events: { @@ -1036,12 +1063,12 @@ function echart_6(rs){ plotShadow:false, type: 'pie' }, - navigation: { + /*navigation: { buttonOptions: { x:-5, y: -10, } - }, + },*/ exporting: { allowHTML:true, filename:'Website', @@ -1073,6 +1100,7 @@ function echart_6(rs){ }, }, pie:{ + borderColor: "", showInLegend: true, point: { events: { @@ -1185,12 +1213,12 @@ function echart_topic_domain(rs){ marginTop:50, marginBottom:10, }, - navigation: { + /* navigation: { buttonOptions: { x:-5, y:15, } - }, + },*/ exporting: { allowHTML:true, 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:{ style: {//设置字体颜色 color: '#fff', @@ -1224,7 +1254,12 @@ function echart_topic_domain(rs){ cursor: 'pointer', colorByPoint: true, 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: { property: 'innerArcLength', 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: { headerFormat: "", - pointFormat: '{point.name} : {point.value} ' +unit + pointFormat: '{point.name} : {point.value:.2f} ' +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; +}