diff --git a/lib/commons-logging-1.2.jar b/lib/commons-logging-1.2.jar new file mode 100644 index 000000000..93a3b9f6d Binary files /dev/null and b/lib/commons-logging-1.2.jar differ diff --git a/lib/fluent-hc-4.5.6.jar b/lib/fluent-hc-4.5.6.jar new file mode 100644 index 000000000..8fbaf9806 Binary files /dev/null and b/lib/fluent-hc-4.5.6.jar differ diff --git a/lib/httpclient-4.5.6.jar b/lib/httpclient-4.5.6.jar new file mode 100644 index 000000000..56231de0c Binary files /dev/null and b/lib/httpclient-4.5.6.jar differ diff --git a/lib/httpclient-cache-4.5.6.jar b/lib/httpclient-cache-4.5.6.jar new file mode 100644 index 000000000..df529e357 Binary files /dev/null and b/lib/httpclient-cache-4.5.6.jar differ diff --git a/lib/httpclient-win-4.5.6.jar b/lib/httpclient-win-4.5.6.jar new file mode 100644 index 000000000..cd8fedfb3 Binary files /dev/null and b/lib/httpclient-win-4.5.6.jar differ diff --git a/lib/httpcore-4.4.6.jar b/lib/httpcore-4.4.6.jar new file mode 100644 index 000000000..16ed0d160 Binary files /dev/null and b/lib/httpcore-4.4.6.jar differ diff --git a/lib/httpmime-4.5.6.jar b/lib/httpmime-4.5.6.jar new file mode 100644 index 000000000..df5a7d195 Binary files /dev/null and b/lib/httpmime-4.5.6.jar differ diff --git a/lib/jna-4.4.0.jar b/lib/jna-4.4.0.jar new file mode 100644 index 000000000..521bd92f6 Binary files /dev/null and b/lib/jna-4.4.0.jar differ diff --git a/lib/jna-platform-4.4.0.jar b/lib/jna-platform-4.4.0.jar new file mode 100644 index 000000000..ce54d8f9d Binary files /dev/null and b/lib/jna-platform-4.4.0.jar differ diff --git a/pom.xml b/pom.xml index 3d106a52e..77406bc4c 100644 --- a/pom.xml +++ b/pom.xml @@ -675,7 +675,7 @@ org.apache.httpcomponents httpclient - 4.4 + 4.5.6 - +
-    +    +
+
+
+
+ +
+
+
+   
- -
-
-
- -    + +
+ + + + +
+
+
+
+   
-
+ + + + + +
-
+
+
+
+    +
+ +
+
+
+ + <%--
-
- +
  
- +
+
--%> +
+ +<%--
+ +
+
+
+    +
+
+
+
+
+
+
+    +
+
+ --%> +
-
-
- -    -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
1windows0
2mac0
3Linux0
-
-
+
+
+    +
+
+ + + + + + + + + + + + + + + +
+
+ +
+
1windows0
+
+
+
-
-
+
-
+ <%--
- -    +   
@@ -217,35 +262,141 @@ - - - - - - - - - - - +
1百度0
2腾讯0
3Googlebaidu.com 0
-
-
+ --%> +
+
+
+    +
+
+
+
+
+ <%--
-
+ --%>
-
+ +
+
+
+    +
+
+ + + + + + + + + + + + + + + +
1baidu.com0
+
+
+ +
+
+
+ +
+
+
+
+
+ + <%--
+
+
+    +
+
+
+
--%> + + +
+
+    +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
111
111
111
111
111
111
111
+
+
+
+
+
+
+ + + + + @@ -253,16 +404,28 @@ + <%-- --%> + + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp b/src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp new file mode 100644 index 000000000..189bd1e78 --- /dev/null +++ b/src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp @@ -0,0 +1,197 @@ +<%@ page contentType="text/html;charset=UTF-8"%> +<%@ include file="/WEB-INF/include/taglib.jsp"%> + + +协议类型 + + + + +
+ +

+ +

+
+ +
+
+
+ + <%--
+ + + + +
--%> + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
协议名称总量比例
TCP1 + 25.0% + +
+
+
+
HTTP1 + 45.0% + +
+
+
+
UDP1 + 25.0% + +
+
+
+
其他0 + 60.0% + +
+
+
+
+<%--
${page}
--%> +
+ +
+
+
+
+ +
+ +
+
+
+ + + +
+
+
+ + + + +<%-- --%> + + \ No newline at end of file diff --git a/src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp b/src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp similarity index 64% rename from src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp rename to src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp index be871c4b6..bb37e009b 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/trafficConnList.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/trafficWebTypeList.jsp @@ -2,28 +2,46 @@ <%@ include file="/WEB-INF/include/taglib.jsp"%> - - <spring:message code="traffic_ip_active"></spring:message> - +网站主题服务分类 + +

- +

+ + + + + <%-- + + --%> + + + + + + + + +
@@ -31,7 +49,7 @@
- + @@ -49,6 +67,9 @@ text-align: center; font-size: 20px; } + .tbody .tr:active{ + background: rgb(210, 232, 251, 0.8); + }
- +
- - - + +<%-- --%> + @@ -80,7 +101,7 @@ - +<%-- --%> @@ -93,22 +114,22 @@
${entry.id } ${entry.ipAddr }${entry.areaId }${entry.areaId }${entry.linkNum } ${entry.c2sPktNum } ${entry.s2cPktNum }
${page}
-
+

 1 - +

- - - - - - - - - + + + + + + + + +
12131
241241
31412
34655
37457
33457
38468
3367
33456
12131
241241
31412
34655
37457
33457
38468
3367
33456
@@ -121,11 +142,11 @@ $(document).ready(function(){ var chart = Highcharts.chart('chart', { title: { - text: '网络带宽' + text: '网站分类' }, yAxis: { title: { - text: 'Pkt' + text: 'bps' } }, legend: { diff --git a/src/main/webapp/static/global/plugins/bootstrap/css/bootstrap.css b/src/main/webapp/static/global/plugins/bootstrap/css/bootstrap.css index ea97c5558..595905771 100644 --- a/src/main/webapp/static/global/plugins/bootstrap/css/bootstrap.css +++ b/src/main/webapp/static/global/plugins/bootstrap/css/bootstrap.css @@ -2101,7 +2101,9 @@ th { background-color: #fbfcfd; } .table-hover > tbody > tr:hover { - background-color: #eef1f5; } + /* background-color: #eef1f5; */ + background: rgb(210, 232, 251, 0.8); + } table col[class*="col-"] { position: static; @@ -2126,14 +2128,17 @@ table th[class*="col-"] { .table > tfoot > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th { - background-color: #eef1f5; } + background: rgb(210, 232, 251, 0.8); + /* background-color: #eef1f5; */ } .table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th { - background-color: #dee5ec; } + /* background-color: #dee5ec; */ + background: rgb(210, 232, 251, 0.8); + } .table > thead > tr > td.success, .table > thead > tr > th.success, diff --git a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css index 3326ba7f9..157831000 100644 --- a/src/main/webapp/static/global/plugins/highcharts/css/data_text.css +++ b/src/main/webapp/static/global/plugins/highcharts/css/data_text.css @@ -118,8 +118,8 @@ p{ margin-top: 1px; } .data_content .data_info>div.info_2 .fl_fc .csNum{ - font-size: 5px; - color:#ff4e4e !important; + font-size: 12px; + color:#337ab7 !important; margin-top: 1px; } /* .data_info{ @@ -143,14 +143,14 @@ p{ *zoom: 1; /*IE/7/6*/ } /************** info end ***********************/ - +/* 第一行图 */ .data_content .data_main{ width: calc(100% - 30px); height: 430px; margin-left: 15px; } .data_content .data_main .main_left{ - width: 26%; + width: 55%; } .data_content .data_main .main_left>div{ width: 100%; @@ -164,15 +164,12 @@ p{ 0px 10px 15px #3D3D3D inset; position: relative; } -.data_content .data_main .main_left div.left_1{ - /*background: url("../img/chart_1.png") no-repeat center;*/ -} .data_content .data_main .main_left div:nth-child(1){ margin-bottom: 5px; } .data_content .data_main .main_left div .main_title{ - width: 230px; + width: 250px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -180,7 +177,7 @@ p{ position: absolute; top: -17px; left:45%; - margin-left: -90px; + margin-left: -100px; color:#fff; font-size: 18px; font-weight: 600; @@ -189,20 +186,14 @@ p{ z-index: 1000; border-radius:18px !important; } -.data_content .data_main .main_left div .main_title img{ - position: absolute; - top: 8px; - left: 15px; -} - .data_content .data_main .main_center{ - width: 46%; + width: 45%; height: 400px; } .data_content .data_main .main_center .center_text{ - width: calc(100% - 30px); + width: calc(100% - 16px); height: 400px; margin-left: 15px; margin-right: 15px; @@ -213,7 +204,6 @@ p{ 10px 0px 15px #3D3D3D inset, /*右边阴影*/ 0px 10px 15px #3D3D3D inset; position: relative; - /*background: url("../img/chart_map.png") no-repeat center ;*/ } .data_content .data_main .main_center .main_title{ width: 250px; @@ -223,7 +213,7 @@ p{ position: absolute; top: -17px; left:50%; - margin-left: -90px; + margin-left: -110px; color:#fff; font-size: 18px; font-weight: 600; @@ -234,7 +224,7 @@ p{ } .data_content .data_main .main_right{ - width: 28%; + width: 26%; } .data_content .data_main .main_right>div{ width: 100%; @@ -257,40 +247,11 @@ p{ color:#fff; } -.data_content .data_main .main_right div.right_2{ - /*background: url("../img/chart_4.png") no-repeat center;*/ -} -/* .data_content .data_main .main_right div.right_2 .chart_text { - width: 18%; - color:#fff; - text-align: center; - margin-top: 12px; -} -.data_content .data_main .main_right div.right_2 .chart_text p{ - margin-top: 21px; -} -.data_content .data_main .main_right div.right_2 .chart_text p img{ - margin-right: 5px; - margin-top: -4px; -} -.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){ - font-size: 14px; - font-weight: 600; -} */ -/* .data_content .data_main .main_right div.right_2 .text_sum{ - text-align: center; - color:#ffff43; - font-weight: 600; -} -.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){ - font-size: 18px; - font-weight: 600; -} */ .data_content .data_main .main_right div:nth-child(1){ margin-bottom: 5px; } .data_content .data_main .main_right div .main_title{ - width: 230px; + width: 250px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -298,7 +259,7 @@ p{ position: absolute; top: -17px; left:45%; - margin-left: -90px; + margin-left: -100px; color:#fff; font-size: 18px; font-weight: 600; @@ -307,13 +268,257 @@ p{ z-index: 1000; border-radius:18px !important; } -.data_content .data_main .main_right div .main_title img{ - position: absolute; - top: 8px; - left: 15px; +/* 第2行图 */ +.data_content .data_main1{ + width: calc(100% - 30px); + height: 430px; + margin-left: 15px; +} +.data_content .data_main1 .main_left1{ + width: 50%; +} +.data_content .data_main1 .main_left1>div{ + width: 100%; + height: 400px; + 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; + position: relative; } +.data_content .data_main1 .main_left1 div:nth-child(1){ + margin-bottom: 5px; +} +.data_content .data_main1 .main_left1 div .main_title1{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:45%; + margin-left: -100px; + 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_center1{ + width: 49%; + height: 400px; + +} +.data_content .data_main1 .main_center1 .center_text1{ + width: calc(100% - 5px); + 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; + position: relative; +} +.data_content .data_main1 .main_center1 .main_title1{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + position: absolute; + top: -17px; + left:50%; + margin-left: -110px; + 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_right1{ + width: 50%; +} +.data_content .data_main1 .main_right1>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; + position: relative; +} +.data_content .data_main1 .main_right1 div.right_1 .choice{ + position: absolute; + top: 25px; + right: 30px; + z-index: 1000; +} +.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; +} +.data_content .data_main1 .main_right1 div .main_title1{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:45%; + margin-left: -100px; + color:#fff; + font-size: 18px; + font-weight: 600; + box-sizing: border-box; + text-align:center; + z-index: 1000; + border-radius:18px !important; +} +/* 第3行图 */ +.data_content .data_main2{ + width: calc(100% - 30px); + height: 430px; + margin-left: 15px; +} +.data_content .data_main2 .main_left2{ + width: 30%; +} +.data_content .data_main2 .main_left2>div{ + width: 100%; + height: 400px; + 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; + position: relative; +} + +.data_content .data_main2 .main_left2 div:nth-child(1){ + margin-bottom: 5px; +} +.data_content .data_main2 .main_left2 div .main_title2{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:45%; + margin-left: -100px; + 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_main2 .main_center2{ + width: 40%; + height: 400px; + +} +.data_content .data_main2 .main_center2 .center_text2{ + width: calc(100% - 30px); + 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; + position: relative; +} +.data_content .data_main2 .main_center2 .main_title2{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + position: absolute; + top: -17px; + left:50%; + margin-left: -110px; + 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_main2 .main_right2{ + width: 30%; +} +.data_content .data_main2 .main_right2>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; + position: relative; +} +.data_content .data_main2 .main_right2 div.right_1 .choice{ + position: absolute; + top: 25px; + right: 30px; + z-index: 1000; +} +.data_content .data_main2 .main_right2 div.right_1 .choice label{ + color:#fff; +} + +.data_content .data_main2 .main_right2 div:nth-child(1){ + margin-bottom: 5px; +} +.data_content .data_main2 .main_right2 div .main_title2{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:45%; + margin-left: -100px; + color:#fff; + font-size: 18px; + font-weight: 600; + box-sizing: border-box; + text-align:center; + z-index: 1000; + border-radius:18px !important; +} +/* 第4行图 */ .data_content .data_bottom{ width: calc(100% - 30px); height: 430px; @@ -324,7 +529,7 @@ p{ } .data_content .data_bottom .bottom_1{ - width: 22%; + width: 26%; height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -336,11 +541,11 @@ p{ /*background: url("../img/chart_5.png") no-repeat;*/ } .data_content .data_bottom .bottom_center{ - width: 52%; + width: 74%; height: 430px; } .data_content .data_bottom .bottom_2{ - width: calc(53% - 10px); + width: calc(53% - 15px); height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -353,7 +558,7 @@ p{ /*background: url("../img/chart_6.png") no-repeat;*/ } .data_content .data_bottom .bottom_3{ - width: calc(47% - 35px); + width: calc(47% - 15px); height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -362,30 +567,29 @@ p{ position: relative; box-sizing: border-box; border: 1px solid #3D3D3D; - /*background: url("../img/chart_7.png") no-repeat;*/ margin-left:15px; } -.data_content .data_bottom .bottom_4{ +/* .data_content .data_bottom .bottom_4{ width: 26%; height: 430px; - box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ - 0px -10px 15px #3D3D3D inset, /*上边阴影*/ - 10px 0px 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; box-sizing: border-box; border: 1px solid #3D3D3D; - /*background: url("../img/chart_8.png") no-repeat;*/ -} + background: url("../img/chart_8.png") no-repeat; +} */ .data_content .data_bottom div .main_title{ - width: 220px; + width: 250px; height: 35px; line-height: 33px; background-color: #3D3D3D; border-radius: 18px; position: absolute; top: -17px; - left:50%; + left:45%; margin-left: -110px; color:#fff; font-size: 18px; @@ -394,11 +598,6 @@ p{ text-align:center; border-radius:18px !important; } -.data_content .data_bottom div .main_title img{ - position: absolute; - top: 8px; - left: 15px; -} .data_content .data_bottom div .main_table tr{ height: 36px; @@ -443,3 +642,128 @@ p{ 10px 0px 15px #3D3D3D inset; /*右边阴影*/ /*0px 10px 15px #3D3D3D inset;*/ } +/* 第5行图 */ +.data_content .data_bottom2{ + width: calc(100% - 30px); + height: 430px; + margin-left: 15px; + margin-top: 30px; +} +.data_content .data_bottom2 div{ + +} +.data_content .data_bottom2 .bottom_12{ + width: 26%; + 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; + /*background: url("../img/chart_5.png") no-repeat;*/ +} +.data_content .data_bottom2 .bottom_center2{ + width: 74%; + height: 430px; +} +.data_content .data_bottom2 .bottom_22{ + width: calc(53% - 15px); + 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; + /*background: url("../img/chart_6.png") no-repeat;*/ +} +.data_content .data_bottom2 .bottom_32{ + width: calc(47% - 15px); + 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; + /*background: url("../img/chart_7.png") no-repeat;*/ + margin-left:15px; +} +.data_content .data_bottom2 .bottom_42{ + width: 26%; + 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; + /*background: url("../img/chart_8.png") no-repeat;*/ +} +.data_content .data_bottom2 div .main_title2{ + width: 250px; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:45%; + margin-left: -110px; + color:#fff; + font-size: 18px; + font-weight: 600; + box-sizing: border-box; + text-align:center; + border-radius:18px !important; +} + +.data_content .data_bottom2 div .main_table2 tr{ + height: 36px; +} +.data_content .data_bottom2 div .main_table2{ + width: 100%; + margin-top: 25px; +} +.data_content .data_bottom2 div .main_table2 table{ + width: 100%; +} +.data_content .data_bottom2 div .main_table2 thead tr{ + height: 36px; +} +.data_content .data_bottom2 div .main_table2 th{ + font-size: 14px; + font-weight: 600; + color:#757575; + text-align: center; +} +.data_content .data_bottom2 div .main_table2 th:nth-child(1){ + width: 30%; +} +.data_content .data_bottom2 div .main_table2 th:nth-child(2){ + width: 35%; +} +.data_content .data_bottom2 div .main_table2 th:nth-child(2){ + width: 35%; +} +.data_content .data_bottom2 div .main_table2 td{ + color:#3D3D3D; + font-size: 12.8px; + text-align: center; +} +.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(1), +.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(3), +.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(7), +.data_content .data_bottom2 div .main_table2 tbody tr:nth-child(9), +.data_content .data_bottom2 div .main_table2 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;*/ +} \ No newline at end of file diff --git a/src/main/webapp/static/global/plugins/highcharts/echart.js b/src/main/webapp/static/global/plugins/highcharts/echart.js index 4279316f1..d126e737d 100644 --- a/src/main/webapp/static/global/plugins/highcharts/echart.js +++ b/src/main/webapp/static/global/plugins/highcharts/echart.js @@ -31,7 +31,7 @@ var chart = Highcharts.chart('chart_1', { chart: { type: 'pie', - spacing : [40, 0 , 40, 0], + spacing : [40, 40 , 40, 40], backgroundColor: 'rgba(255, 255, 255, 0)', plotBackgroundColor:null, plotBorderWidth:null, @@ -89,13 +89,13 @@ events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle - chart.setTitle({ + /*chart.setTitle({ text: '
'+e.target.name, style: {//设置字体颜色 color: '#fff', fontFamily:'Microsoft YaHei' }, - }); + });*/ this.slice(); }, // 鼠标移出时，收回突出显示 diff --git a/src/main/webapp/static/pages/css/bandwidth.css b/src/main/webapp/static/pages/css/bandwidth.css new file mode 100644 index 000000000..ec33b83f3 --- /dev/null +++ b/src/main/webapp/static/pages/css/bandwidth.css @@ -0,0 +1,188 @@ +/*global css framework*/ +/*/*@import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");/*! + * bootswatch v3.3.7 + * Homepage: http://bootswatch.com + * Copyright 2012-2016 Thomas Park + * Licensed under MIT + * Based on Bootstrap +*//*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) +/*plugins css*/ +/*@import (inline) '../../bower_components/angular-ui-select/dist/select.min.css';*/ +/* color settings*/ +/* font-size settings*/ +/*page styles*/ +html { + width: 100%; + height: 100%; +} +body { + width: 100%; + height: 100%; + color: #333; + font-size: 12px; + font-family: "Microsoft YaHei Light", "Arial Narrow", Arial, "sans-serif"; +} +ul, +ol { + list-style: none; + margin: 0; + padding: 0; +} +a, +a:hover { + color: #333; + cursor: pointer; + text-decoration: none !important; +} +hr { + margin-top: 5px; + margin-bottom: 5px; + border: 0; + border-top: 1px solid #e1e1e6; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: "Microsoft YaHei Light", "Arial Narrow", Arial, "sans-serif"; +} +.body { + background-color: #f5f5f5; + height: auto; +} +a { + margin-right: 10px; + margin-left: 10px; +} +.active a { + font-weight: 500; + color: #84c1ff; + border-bottom-style: solid; + border-bottom-color: #84c1ff; + border-bottom-width: 3px; + padding-bottom: 12px; +} +a:hover { + color: #84c1ff; +} +.tz { + height: 8px; + line-height: 30px; + display: block; + background-color: #4aa6fc; +} +.ty { + height: 8px; + line-height: 30px; + display: block; + background-color: #02a4ca; +} +.dy { + float: right !important; + margin-left: 15px; +} +.panel5 { + border: none; +} +.table { + table-layout: fixed; +} +.panel5-body { + padding-top: 0px; + padding-left: 30px; + padding-right: 30px; + padding-bottom: 30px; + height: 300px; +} +.row { + margin-left: 0px; + margin-right: 0px; +} +body { + font-family: Arial, "Microsoft Yahei", Helvetica, STHeitiSC-Light, sans-serif; +} +body h3, +h4, +h5, +h6 { + font-family: Arial, "Microsoft Yahei", Helvetica, STHeitiSC-Light, sans-serif; +} +body { + background-color: #f5f5f5; +} +button { + padding: 0 0; +} +a.ph, +button.ph { + color: #cfd2da; +} +.brank { + width: 520px; + height: 155px; + overflow: hidden; + overflow-x: hidden; + border-top: solid 1px #eeeeee; +} +.brank:hover { + overflow: auto; +} +.dtr { + height: 28px; + border-bottom: solid 1px #eeeeee; + border-spacing: 10px; + outline: none; +} +.dtr:hover { + background: rgb(210, 232, 251, 0.8); + color: #195b9f; +} +tbody .active { + background: rgb(210, 232, 251, 0.8); + color: #195b9f; +} +.dtd1 { + width: 60px; + max-width: 110px; + font-size: 100%; + padding-left: 5px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.dtd3 { + width: 80px; + max-width: 70px; + font-size: 100%; + padding-right: 10px; +} +.dtd2 { + position: relative; + padding: 15px 20px; + margin-bottom: -1px; + background-color: transparent; + width: 125px; + display: table-cell; + vertical-align: middle; +} +.drank { + width: 302px; + height: 405px; + overflow: hidden; + overflow-x: hidden; +} +.drank:hover { + overflow: auto; +} + diff --git a/src/main/webapp/static/pages/css/dashboard.css b/src/main/webapp/static/pages/css/dashboard.css index 049cf7dbf..a4f4ff02a 100644 --- a/src/main/webapp/static/pages/css/dashboard.css +++ b/src/main/webapp/static/pages/css/dashboard.css @@ -3,3 +3,253 @@ .mt-number-animate .mt-number-animate-dot{ width: 10px;/*设置分割符宽度*/ line-height: 20px; float: left; text-align: center;} .mt-number-animate .mt-number-animate-dom{ width: 10px;/*设置单个数字宽度*/ text-align: center; float: left; position: relative; top: 0;} .mt-number-animate .mt-number-animate-dom .mt-number-animate-span{ width: 100%; float: left;} + + +/* protocolType */ +.box-1 { + background: #fff; + border: 1px solid #e3e6e9; + border-radius: 5px; + padding: 20px +} + +.box-1 .btn-download { + color: #666 +} + +.box-1 .btn-download .iconfont { + margin-right: 5px +} + +.box-1 .btn-download:hover { + color: #999 +} + + +.c-table-responsive { + width: 100%; + overflow-x: auto +} + +.c-table-responsive table { + border: 1px solid #e3e6e9; + border-radius: 2px; + width: 100%; + max-width: 100%; + border-collapse: collapse +} + +.c-table-responsive table thead th { + background-color: #f2f2f2; + font-weight: 700; + vertical-align: baseline; + word-break: break-all +} + +.c-table-responsive table td, .c-table-responsive table th { + border-bottom: 1px solid #e3e6e9; + padding: 10px; + line-height: 1.4; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: #666; + word-break: break-all +} + +.c-table { + border: 1px solid #e3e6e9; + border-radius: 2px; + width: 100%; + max-width: 100%; + border-collapse: collapse; + font-size: 14px +} + +.c-table thead th { + background-color: #f2f2f2; + font-weight: 700; + vertical-align: baseline; + word-break: break-all +} + +.c-table td, .c-table th { + border-bottom: 1px solid #e3e6e9; + padding: 5px; + line-height: 1.4; + color: #333; + word-break: break-all +} + +.c-table td.text-up, .c-table th.text-up { + color: #fe5a5a +} + +.c-table td.text-down, .c-table th.text-down { + color: #0fc725 +} + +.c-table td.active, .c-table th.active { + color: #4aa6fc +} + +.c-table td.tl, .c-table th.tl { + text-align: center +} + +.c-table td.tr, .c-table th.tr { + text-align: right +} + +.c-table td.tc, .c-table th.tc { + text-align: center +} + +.c-table tr:nth-child(2n) { + background-color: #fafafa +} + +.c-table tbody .nozebra { + background-color: #fff +} + +.c-table tr.fixed { + visibility: hidden +} + +.c-table tbody tr:nth-child(2n):hover, .c-table tr:hover { + background: rgb(210, 232, 251, 0.8); +} + +.c-table tr.fixed+tr { + position: fixed; + display: block; + visibility: visible; + z-index: 1000; + top: 0 +} + +.c-table.c-table-bordered td, .c-table.c-table-bordered th { + border: 1px solid #e3e6e9 +} + +.c-table.c-table-nested .btn-expand { + color: #999 +} + +.c-table.c-table-nested .btn-expand .iconfont { + font-size: 12px +} + +.c-table.c-table-nested .tr-nested { + display: none +} + +.c-table.c-table-nested .tr-nested>td { + padding-top: 6px; + padding-bottom: 6px; + background-color: #f9f9f9 +} + +.c-table .c-table-btn-sort { + color: #333; + position: relative; + margin-right: 15px +} + +.c-table .c-table-btn-sort.desc:after { + border-top-color: #108ee9 +} + +.c-table .c-table-btn-sort.asc:before { + border-bottom-color: #108ee9 +} + +.c-table .c-table-btn-sort:before { + top: 2px; + border-bottom: 5px solid #ccc +} + +.c-table .c-table-btn-sort:after, .c-table .c-table-btn-sort:before { + content: " "; + position: absolute; + right: -15px; + height: 0; + width: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent +} + +.c-table .c-table-btn-sort:after { + top: 10px; + border-top: 5px solid #ccc +} + +.c-table .c-table-btn-sort-2 { + color: #666; + cursor: pointer +} + +.c-table .c-table-btn-sort-2.sorted, .c-table .c-table-btn-sort-2.sorted:after, + .c-table .c-table-btn-sort-2:hover { + background: rgb(210, 232, 251, 0.8); + color: #73bffd +} + +.c-table .c-table-btn-sort-2:after { + content: "\E67C"; + font-family: iconfont; + -webkit-text-size-adjust: none; + font-size: 10px; + color: #999; + display: block; + margin-top: 2px +} + +.c-table .c-table-btn-sort-2:after:hover { + background: rgb(210, 232, 251, 0.8); + color: #73bffd +} + +.c-table.table-bordered td, .c-table.table-bordered th { + border: 1px solid #dedede +} + +.c-progress { + background: #dcdcdc; + height: 5px; + font-size: 0; + line-height: 0 +} + +.c-progress-bar { + background: #4aa6fc; + height: 5px; + border-top-right-radius: 20px; + border-bottom-right-radius: 20px +} + +.c-progress-inline { + width: 45% +} + +.c-progress-inline, .c-progress-inline-2 { + display: inline-block; + vertical-align: middle +} + +.c-progress-inline-2 { + width: 100% +} +.tc { + text-align: center +} + + +/* protocolType end */ + +/* 端口 port */ +.data_content #tbodyDataPort tr td{ + color:#fff; +} +/* 端口 port end */ diff --git a/src/main/webapp/static/pages/css/paginate.css b/src/main/webapp/static/pages/css/paginate.css new file mode 100644 index 000000000..48f3b6b30 --- /dev/null +++ b/src/main/webapp/static/pages/css/paginate.css @@ -0,0 +1,19 @@ +@charset "utf-8"; +.jPaginate{height:34px;position:relative;color:#a5a5a5;font-size:small;width:100%;} +.jPaginate a{line-height:18px;height:18px;overflow:hidden;cursor:pointer;padding:2px 5px;margin:2px;float:left;} +.jPag-control-back{position:absolute;left:0px;} +.jPag-control-front{position:absolute;top:0px;} +.jPaginate span{cursor:pointer;} +ul.jPag-pages{float:left;list-style-type:none;margin:0px 0px 0px 0px;padding:0px;} +ul.jPag-pages li{display:inline;float:left;padding:0px;margin:0px;} +ul.jPag-pages li a{float:left;padding:2px 8px;} +span.jPag-current{cursor:default;font-weight:normal;line-height:18px;height:18px;padding:2px 8px;margin:2px;float:left;} +ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-next,span.jPag-sprevious,span.jPag-snext,ul.jPag-pages li span.jPag-previous-img,ul.jPag-pages li span.jPag-next-img,span.jPag-sprevious-img,span.jPag-snext-img{height:22px;margin:2px;float:left;line-height:18px;} +ul.jPag-pages li span.jPag-previous,ul.jPag-pages li span.jPag-previous-img{margin:2px 0px 2px 2px;font-size:12px;font-weight:bold;width:10px;} +ul.jPag-pages li span.jPag-next,ul.jPag-pages li span.jPag-next-img{margin:2px 2px 2px 0px;font-size:12px;font-weight:bold;width:10px;} +span.jPag-sprevious,span.jPag-sprevious-img{margin:2px 0px 2px 2px;font-size:18px;width:15px;text-align:right;} +span.jPag-snext,span.jPag-snext-img{margin:2px 2px 2px 0px;font-size:18px;width:15px; text-align:right;} +ul.jPag-pages li span.jPag-previous-img{background:url(../images/previous.png) no-repeat center right;} +ul.jPag-pages li span.jPag-next-img{background:url(../images/next.png) no-repeat center left;} +span.jPag-sprevious-img{background:url(../images/sprevious.png) no-repeat center right;} +span.jPag-snext-img{background:url(../images/snext.png) no-repeat center left;} \ No newline at end of file diff --git a/src/main/webapp/static/pages/scripts/dashboard.js b/src/main/webapp/static/pages/scripts/dashboard.js index 2f2dea9ab..ee928b577 100644 --- a/src/main/webapp/static/pages/scripts/dashboard.js +++ b/src/main/webapp/static/pages/scripts/dashboard.js @@ -4,7 +4,7 @@ (function($) { $.fn.numberAnimate = function(setting) { var defaults = { - speed : 1000,//动画速度 + speed : 3000,//动画速度 num : "", //初始化值 iniAnimate : true, //是否要初始化动画效果 symbol : '',//默认的分割符号，千，万，千万 diff --git a/src/main/webapp/static/pages/scripts/paginate.js b/src/main/webapp/static/pages/scripts/paginate.js new file mode 100644 index 000000000..a48024bfb --- /dev/null +++ b/src/main/webapp/static/pages/scripts/paginate.js @@ -0,0 +1,248 @@ +(function($) { + $.fn.paginate = function(options) { + var opts = $.extend({}, $.fn.paginate.defaults, options); + return this.each(function() { + $this = $(this); + var o = $.meta ? $.extend({}, opts, $this.data()) : opts; + var selectedpage = o.start; + $.fn.draw(o,$this,selectedpage); + }); + }; + var outsidewidth_tmp = 0; + var insidewidth = 0; + var bName = navigator.appName; + var bVer = navigator.appVersion; + if(bVer.indexOf('MSIE 7.0') > 0) + var ver = "ie7"; + $.fn.paginate.defaults = { + count : 5, + start : 12, + display : 5, + border : true, + border_color : '#fff', + text_color : '#8cc59d', + background_color : 'black', + border_hover_color : '#fff', + text_hover_color : '#fff', + background_hover_color : '#fff', + rotate : true, + images : true, + mouse : 'slide', + onChange : function(){return false;} + }; + $.fn.draw = function(o,obj,selectedpage){ + if(o.display > o.count) + o.display = o.count; + $this.empty(); + if(o.images){ + var spreviousclass = 'jPag-sprevious-img'; + var previousclass = 'jPag-previous-img'; + var snextclass = 'jPag-snext-img'; + var nextclass = 'jPag-next-img'; + } + else{ + var spreviousclass = 'jPag-sprevious'; + var previousclass = 'jPag-previous'; + var snextclass = 'jPag-snext'; + var nextclass = 'jPag-next'; + } + var _first = $(document.createElement('a')).addClass('jPag-first').html('First'); + + if(o.rotate){ + if(o.images) var _rotleft = $(document.createElement('span')).addClass(spreviousclass); + else var _rotleft = $(document.createElement('span')).addClass(spreviousclass).html('«'); + } + + var _divwrapleft = $(document.createElement('div')).addClass('jPag-control-back'); + _divwrapleft.append(_first).append(_rotleft); + + var _ulwrapdiv = $(document.createElement('div')).css('overflow','hidden'); + var _ul = $(document.createElement('ul')).addClass('jPag-pages') + var c = (o.display - 1) / 2; + var first = selectedpage - c; + var selobj; + for(var i = 0; i < o.count; i++){ + var val = i+1; + if(val == selectedpage){ + var _obj = $(document.createElement('li')).html(''+val+''); + selobj = _obj; + _ul.append(_obj); + } + else{ + var _obj = $(document.createElement('li')).html(''+ val +''); + _ul.append(_obj); + } + } + _ulwrapdiv.append(_ul); + + if(o.rotate){ + if(o.images) var _rotright = $(document.createElement('span')).addClass(snextclass); + else var _rotright = $(document.createElement('span')).addClass(snextclass).html('»'); + } + + var _last = $(document.createElement('a')).addClass('jPag-last').html('Last'); + var _divwrapright = $(document.createElement('div')).addClass('jPag-control-front'); + _divwrapright.append(_rotright).append(_last); + + //append all: + $this.addClass('jPaginate').append(_divwrapleft).append(_ulwrapdiv).append(_divwrapright); + + if(!o.border){ + if(o.background_color == 'none') var a_css = {'color':o.text_color}; + else var a_css = {'color':o.text_color,'background-color':o.background_color}; + if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color}; + else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color}; + } + else{ + if(o.background_color == 'none') var a_css = {'color':o.text_color,'border':'1px solid '+o.border_color}; + else var a_css = {'color':o.text_color,'background-color':o.background_color,'border':'1px solid '+o.border_color}; + if(o.background_hover_color == 'none') var hover_css = {'color':o.text_hover_color,'border':'1px solid '+o.border_hover_color}; + else var hover_css = {'color':o.text_hover_color,'background-color':o.background_hover_color,'border':'1px solid '+o.border_hover_color}; + } + + $.fn.applystyle(o,$this,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright); + //calculate width of the ones displayed: + var outsidewidth = outsidewidth_tmp - _first.parent().width() -3; + if(ver == 'ie7'){ + _ulwrapdiv.css('width',outsidewidth+72+'px'); + _divwrapright.css('left',outsidewidth_tmp+6+72+'px'); + } + else{ + _ulwrapdiv.css('width',outsidewidth+'px'); + _divwrapright.css('left',outsidewidth_tmp+6+'px'); + } + + if(o.rotate){ + _rotright.hover( + function() { + thumbs_scroll_interval = setInterval( + function() { + var left = _ulwrapdiv.scrollLeft() + 1; + _ulwrapdiv.scrollLeft(left); + }, + 20 + ); + }, + function() { + clearInterval(thumbs_scroll_interval); + } + ); + _rotleft.hover( + function() { + thumbs_scroll_interval = setInterval( + function() { + var left = _ulwrapdiv.scrollLeft() - 1; + _ulwrapdiv.scrollLeft(left); + }, + 20 + ); + }, + function() { + clearInterval(thumbs_scroll_interval); + } + ); + if(o.mouse == 'press'){ + _rotright.mousedown( + function() { + thumbs_mouse_interval = setInterval( + function() { + var left = _ulwrapdiv.scrollLeft() + 5; + _ulwrapdiv.scrollLeft(left); + }, + 20 + ); + } + ).mouseup( + function() { + clearInterval(thumbs_mouse_interval); + } + ); + _rotleft.mousedown( + function() { + thumbs_mouse_interval = setInterval( + function() { + var left = _ulwrapdiv.scrollLeft() - 5; + _ulwrapdiv.scrollLeft(left); + }, + 20 + ); + } + ).mouseup( + function() { + clearInterval(thumbs_mouse_interval); + } + ); + } + else{ + _rotleft.click(function(e){ + var width = outsidewidth - 10; + var left = _ulwrapdiv.scrollLeft() - width; + _ulwrapdiv.animate({scrollLeft: left +'px'}); + }); + + _rotright.click(function(e){ + var width = outsidewidth - 10; + var left = _ulwrapdiv.scrollLeft() + width; + _ulwrapdiv.animate({scrollLeft: left +'px'}); + }); + } + } + + //first and last: + _first.click(function(e){ + _ulwrapdiv.animate({scrollLeft: '0px'}); + _ulwrapdiv.find('li').eq(0).click(); + }); + _last.click(function(e){ + _ulwrapdiv.animate({scrollLeft: insidewidth +'px'}); + _ulwrapdiv.find('li').eq(o.count - 1).click(); + }); + + //click a page + _ulwrapdiv.find('li').click(function(e){ + selobj.html(''+selobj.find('.jPag-current').html()+''); + var currval = $(this).find('a').html(); + $(this).html(''+currval+''); + selobj = $(this); + $.fn.applystyle(o,$(this).parent().parent().parent(),a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright); + var left = (this.offsetLeft) / 2; + var left2 = _ulwrapdiv.scrollLeft() + left; + var tmp = left - (outsidewidth / 2); + if(ver == 'ie7') + _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'}); + else + _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'}); + o.onChange(currval); + }); + + var last = _ulwrapdiv.find('li').eq(o.start-1); + last.attr('id','tmp'); + var left = document.getElementById('tmp').offsetLeft / 2; + last.removeAttr('id'); + var tmp = left - (outsidewidth / 2); + if(ver == 'ie7') _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 52 + 'px'}); + else _ulwrapdiv.animate({scrollLeft: left + tmp - _first.parent().width() + 'px'}); + } + $.fn.applystyle = function(o,obj,a_css,hover_css,_first,_ul,_ulwrapdiv,_divwrapright){ + obj.find('a').css(a_css); + obj.find('span.jPag-current').css(hover_css); + obj.find('a').hover( + function(){ + $(this).css(hover_css); + }, + function(){ + $(this).css(a_css); + } + ); + obj.css('padding-left',_first.parent().width() + 5 +'px'); + insidewidth = 0; + + obj.find('li').each(function(i,n){ + if(i == (o.display-1)){ + outsidewidth_tmp = this.offsetLeft + this.offsetWidth ; + } + insidewidth += this.offsetWidth; + }) + _ul.css('width',insidewidth+'px'); + } +})(jQuery); \ No newline at end of file