diff --git a/src/main/java/com/nis/util/Constants.java b/src/main/java/com/nis/util/Constants.java index 385d5f872..4860359ba 100644 --- a/src/main/java/com/nis/util/Constants.java +++ b/src/main/java/com/nis/util/Constants.java @@ -666,6 +666,9 @@ public final class Constants { public static final String TRAFFIC_SYSTEM_CHART=Configurations.getStringProperty("trafficSystemChart","trafficSystemChart"); public static final String TRAFFIC_WEBSITELIST=Configurations.getStringProperty("trafficWebsiteList","trafficWebsiteList"); public static final String TRAFFIC_WEBTYPECHART=Configurations.getStringProperty("trafficWebTypeChart","trafficWebTypeChart"); + public static final String TRAFFIC_PORT_ACTIVE=Configurations.getStringProperty("trafficPortActive","trafficPortActive"); + public static final String TRAFFIC_TOPIC_AND_DOMAIN_CHART=Configurations.getStringProperty("trafficTopicAndDomainChart","trafficTopicAndDomainChart"); + public static final String NTC_TOTAL_REPORT=Configurations.getStringProperty("ntcTotalReport","ntcTotalReport"); /** * httpclient 工具超时时间设置 diff --git a/src/main/java/com/nis/web/controller/dashboard/DashboardController.java b/src/main/java/com/nis/web/controller/dashboard/DashboardController.java index f699391e9..764182a02 100644 --- a/src/main/java/com/nis/web/controller/dashboard/DashboardController.java +++ b/src/main/java/com/nis/web/controller/dashboard/DashboardController.java @@ -15,13 +15,17 @@ import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; +import com.google.common.collect.Maps; import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.google.gson.reflect.TypeToken; import com.nis.domain.Page; import com.nis.domain.PageLog; +import com.nis.domain.SysDataDictionaryItem; +import com.nis.domain.configuration.WebsiteDomainTopic; import com.nis.util.CodeDicUtils; import com.nis.util.Constants; +import com.nis.util.DictUtils; import com.nis.util.StringUtil; import com.nis.util.httpclient.HttpClientUtil; import com.nis.web.controller.BaseController; @@ -42,6 +46,27 @@ public class DashboardController extends BaseController{ return "/dashboard/dashBoardIndex"; } + /** + * 活跃端口 TOP10 + */ + @RequestMapping(value="portActive") + @ResponseBody + public List portActive(){ + Map fromJsonList = new HashMap(); + List list = new ArrayList(); + try { + String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_PORT_ACTIVE); + Gson gson = new GsonBuilder().create(); + fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); + list = (ArrayList) fromJsonList.get("data"); + logger.info("活跃端口数据"+fromJsonList); + return list; + } catch (Exception e) { + e.printStackTrace(); + logger.error("活跃端口数据错误"+e); + } + return list; + } /** * 活跃IP TOP10 */ @@ -54,9 +79,9 @@ public class DashboardController extends BaseController{ String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_IPACTIVE); Gson gson = new GsonBuilder().create(); fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); - list = (ArrayList) fromJsonList.get("data"); logger.info("活跃IP数据"+fromJsonList); - return list; + list = (ArrayList) fromJsonList.get("data"); + return list; } catch (Exception e) { e.printStackTrace(); logger.error("活跃IP错误"+e); @@ -332,15 +357,21 @@ public class DashboardController extends BaseController{ fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); list = (List) fromJsonList.get("data"); //标签集合 - List codeList = CodeDicUtils.getCodeList("webCode"); +// List codeList = CodeDicUtils.getCodeList("webCode"); + List codeList = DictUtils.getDictList("WEBSITE_SERVER"); //将数字替换为标签文字 if(list!=null&&!list.isEmpty()){ for (Map map : list) { - Double value1 = Double.parseDouble(map.get("webId").toString()); - for (CodeResult code : codeList) { - Double value2 = Double.valueOf(code.getCode()); + Double value1=0d; + if(StringUtil.isBlank(map.get("websiteServiceId").toString())){ + value1=268435455d; + }else{ + value1 = Double.parseDouble(map.get("websiteServiceId").toString()); + } + for (SysDataDictionaryItem code : codeList) { + Double value2 = Double.valueOf(code.getItemCode()); if(value1.equals(value2)){ - map.put("webId", code.getItem()); + map.put("websiteService", code.getItemValue()); break; } } @@ -356,57 +387,122 @@ public class DashboardController extends BaseController{ return resultList; } /** - * http网站-某个网站的分类统计 + * http网站-某个网站的子域名统计 */ @RequestMapping(value="webTypeChart") @ResponseBody - public List webTypeChart(@RequestParam("webId") String webId){ + public List webTypeChart(@RequestParam("websiteServiceId") String websiteServiceId){ Map fromJsonList = new HashMap(); List list = new ArrayList(); List resultList = new ArrayList(); - //标签集合 - List codeList1 = CodeDicUtils.getCodeList("webCode"); - //将标签文字转为数字 - Integer web=null; - for (CodeResult codeResult : codeList1) { - if(webId.equalsIgnoreCase(codeResult.getItem())){ - web=Integer.parseInt(codeResult.getCode()); - break; - } - } - if(web==null){ - web=Integer.parseInt(webId);//处理为匹配项编码 - } try { - String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"?webId="+web); + String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_WEBTYPECHART+"?websiteServiceId="+websiteServiceId); Gson gson = new GsonBuilder().create(); fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); list = (List) fromJsonList.get("data"); //标签集合 - List codeList2 = CodeDicUtils.getCodeList("webCode");//网站分类字典-未定义？ +// List codeList2 = CodeDicUtils.getCodeList("webCode");//网站子域名表获取域名domain + List domainList = appCfgService.getDomainDict(new WebsiteDomainTopic()); + if(list!=null&&list.size()>0&&domainList!=null&&domainList.size()>0){ + for (Map dataMap : list) { + for (WebsiteDomainTopic wdt : domainList) { +// Map map = Maps.newHashMap(); + if(wdt!=null){ + String domain = wdt.getDomain(); + Double domainId = wdt.getId().doubleValue(); + Double webId = Double.parseDouble(dataMap.get("webId").toString()); + //10个域名之外的为others webId设为-1外 + if(dataMap.get("webId").toString().equals("-1")){ + dataMap.put("domain", "Others"); + break; + } + if(domainId.equals(webId)){ + dataMap.put("domain", domain); + break; + } + } + } + resultList.add(dataMap); + + } + } + + logger.info("http某个网站子域名流量统计"+fromJsonList); + return resultList; + } catch (Exception e) { + e.printStackTrace(); + logger.error("http某个网站子域名流量统计错误"+e); + } + return resultList; + } + + /** + * http网站主题跟域名统计 + */ + @RequestMapping(value="topicAndDomainList") + @ResponseBody + public List topicAndDomainList(){ + Map fromJsonList = new HashMap(); + List list = new ArrayList(); + List resultList = new ArrayList(); + try { + String string = HttpClientUtil.get(Constants.DASHBOARD_URL+Constants.TRAFFIC_TOPIC_AND_DOMAIN_CHART); + Gson gson = new GsonBuilder().create(); + fromJsonList = gson.fromJson(string, new TypeToken(){}.getType()); + list = (List) fromJsonList.get("data"); + List codeList = DictUtils.getDictList("TOPIC"); //将数字替换为标签文字 - if(null!=list&&!list.isEmpty()){ + List domainList = appCfgService.getDomainDict(new WebsiteDomainTopic()); + if(list!=null&&!list.isEmpty()){ for (Map map : list) { - Double value1 = Double.parseDouble(map.get("webType").toString()); - for (CodeResult code : codeList2) { - Double value2 = Double.valueOf(code.getCode()); + Double value1=0d; + if(StringUtil.isBlank(map.get("topicId").toString())){ + value1=268435455d; + }else{ + value1 = Double.parseDouble(map.get("topicId").toString()); + } + for (SysDataDictionaryItem code : codeList) { + Double value2 = Double.valueOf(code.getItemCode()); if(value1.equals(value2)){ - map.put("webType", code.getItem()); + map.put("topic", code.getItemValue()); break; } } + //将domain添加名称 + List dataDomainList = (List)map.get("domainData"); + if(dataDomainList!=null&&dataDomainList.size()>0&&domainList!=null&&domainList.size()>0){ + for (WebsiteDomainTopic wdt : domainList) { + for (Map dataMap : dataDomainList) { + if(wdt!=null){ + String domain = wdt.getDomain(); + Double domainId = wdt.getId().doubleValue(); + Double webId = Double.parseDouble(dataMap.get("webId").toString()); + //10个域名之外的为others webId设为-1 +// if(dataMap.get("webId").toString().equals("-1")){ +// dataMap.put("domain", "Others"); +// break; +// } + if(domainId.equals(webId)){ + dataMap.put("domain", domain); + break; + } + } + } + } + } resultList.add(map); } } - logger.info("http某个网站分类流量统计"+fromJsonList); + logger.info("http网站主题流量分析数据："+fromJsonList); return resultList; } catch (Exception e) { e.printStackTrace(); - logger.error("http某个网站分类流量统计错误"+e); + logger.error("http网站主题流量分析数据错误："+e); } return resultList; } + @RequestMapping(value="webTypeList") public String ipActiveList( HttpServletRequest request, HttpServletResponse response, Model model){ PageLog page = new PageLog(request, response); @@ -440,7 +536,7 @@ public class DashboardController extends BaseController{ return "/dashboard/trafficBandwidthList"; } - +////////////////////////////////////////test @RequestMapping(value="showChart") public String showChart(@ModelAttribute("entry") TrafficIpActiveStatistic entry, Model model){ String ipAddr="1.1.1.1"; diff --git a/src/main/resources/nis.properties b/src/main/resources/nis.properties index b8eec040b..2bc199461 100644 --- a/src/main/resources/nis.properties +++ b/src/main/resources/nis.properties @@ -270,7 +270,7 @@ mmLogoDetectionLog=mmLogoDetectionLogs mmFaceRecognizationLog=mmFaceRecognizationLogs ######################################## #\u5927\u5C4F\u56FE\u8868\u5C55\u793A\u670D\u52A1\u63A5\u53E3 -dashboardUrl=http://10.0.6.242:8080/galaxy/service/log/v1/ +dashboardUrl=http://10.0.6.101:8080/galaxy/service/log/v1/ trafficIpActive=trafficIpActive trafficProtocol=trafficProtocol trafficApp=trafficApp @@ -280,6 +280,9 @@ trafficBsList=trafficBsList trafficSystemChart=trafficSystemChart trafficWebsiteList=trafficWebsiteList trafficWebTypeChart=trafficWebTypeChart +trafficPortActive=trafficPortActive +trafficTopicAndDomainChart=trafficTopicAndDomainChart +ntcTotalReport=ntcTotalReport client_connect_timeout=300000 client_read_timeout=300000 diff --git a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp index 70eac0f32..c621520a6 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/dashBoardIndex.jsp @@ -9,8 +9,7 @@ - - +

+

In 83% | Out 17%

+ 23802 bps + +
- + -

新建链接数

-

15802

+

+

2102
@@ -62,33 +61,33 @@
- + -

丢弃链接数

-

15802

+

+

65802
- +<%-- --%> -

活跃链接数

-

15802

+

+

85812
- - -

网络带宽

-

c2s 83% | s2c 17%

-

15802

- - + + +

+

45802

+ + +
@@ -117,7 +116,7 @@
-    +   
@@ -126,63 +125,95 @@
-    +   <%-- --%> +
- + +
+
+
+    + +
+ +
+ + + + + + + + + + + + + + + +
80167641
+
+ +
+
+
- -
-    +    +
- - - - - - -
-
-
-
-
-    -
- -
+
- <%--
-
-
-    +
+
+
+   <%-- --%> +
- -
-
-
--%> -
+
+ + + + + + + + + + + + + + + +
1baidu.com0
+
+
+
+
+
+ <%--
+ +
--%> +
+
+
+
+
+ +
+ <%--
@@ -208,7 +239,8 @@
-    + BS    +
@@ -239,9 +271,9 @@
-
- -
+ <%--
+ +
--%>
@@ -270,127 +302,16 @@
--%> -
-
+
-    +   <%-- --%> +
-
-
+
- <%--
-
- -
-
-
-
-
- --%> - -
-
-
-    -
-
-
- - - - - - - - - - - - - - -
1baidu.com0
-
-
- -
-
-
- -
-
-
-
-
- - <%--
-
-
-    -
-
-
-
--%> - - -
-
-    -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
111
111
111
111
111
111
111
-
-
-
-
-
+
@@ -403,35 +324,26 @@ - - + + + <%-- --%> diff --git a/src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp b/src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp index 4d806e367..3e8d12a6d 100644 --- a/src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp +++ b/src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp @@ -17,7 +17,7 @@

- +

@@ -25,7 +25,7 @@
-
网络带宽统计数据
+
Bandwidth Data
@@ -56,7 +56,7 @@
-
网络带宽变化趋势
+
Bandwidth Trend
diff --git a/src/main/webapp/WEB-INF/views/home.jsp b/src/main/webapp/WEB-INF/views/home.jsp index a15dc24fa..d3be2fa61 100644 --- a/src/main/webapp/WEB-INF/views/home.jsp +++ b/src/main/webapp/WEB-INF/views/home.jsp @@ -111,6 +111,10 @@ function page_turn(id, functionId,level, name, url,obj){ // }else{ App.startPageLoading({animate:true}); // } + if(url.search("/nis/dashboard/")!=-1){ + $('.page-sidebar .sidebar-toggler').click(); + } + //调入页面 if(url.indexOf("?")>0){ url = url+"&functionId="+functionId; 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 157831000..fded4c5e4 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 @@ -111,13 +111,25 @@ p{ color:#288dce; margin-top: 2.1em; } -.data_content .data_info>div.info_2 .fl_fc .numberRun4{ +.data_content .data_info .info_2 .fr_fc .numberRun{ + font-weight: 600; + font-size: 16px; + color:#288dce; + margin-top: 2.1em; +} +.data_content .data_info>div.info_1 .fl_fc .numberRun4{ font-weight: 600; font-size: 16px; color:#288dce; margin-top: 1px; } -.data_content .data_info>div.info_2 .fl_fc .csNum{ +.data_content .data_info>div.info_1 .fl_fc .numberRun4-unit{ + font-weight: 500; + font-size: 16px; + color:#288dce; + margin-top: 0.6px; +} +.data_content .data_info>div.info_1 .fl_fc .csNum{ font-size: 12px; color:#337ab7 !important; margin-top: 1px; @@ -146,11 +158,11 @@ p{ /* 第一行图 */ .data_content .data_main{ width: calc(100% - 30px); - height: 430px; + height: 400px; margin-left: 15px; } .data_content .data_main .main_left{ - width: 55%; + width: 41%; } .data_content .data_main .main_left>div{ width: 100%; @@ -169,14 +181,14 @@ p{ margin-bottom: 5px; } .data_content .data_main .main_left div .main_title{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; border-radius: 18px; position: absolute; top: -17px; - left:45%; + left:46%; margin-left: -100px; color:#fff; font-size: 18px; @@ -188,7 +200,7 @@ p{ } .data_content .data_main .main_center{ - width: 45%; + width: 35%; height: 400px; } @@ -206,7 +218,7 @@ p{ position: relative; } .data_content .data_main .main_center .main_title{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -224,7 +236,7 @@ p{ } .data_content .data_main .main_right{ - width: 26%; + width: 23%; } .data_content .data_main .main_right>div{ width: 100%; @@ -251,7 +263,7 @@ p{ margin-bottom: 5px; } .data_content .data_main .main_right div .main_title{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -273,13 +285,14 @@ p{ width: calc(100% - 30px); height: 430px; margin-left: 15px; + margin-top: 30px } .data_content .data_main1 .main_left1{ - width: 50%; + width: 41%; } .data_content .data_main1 .main_left1>div{ width: 100%; - height: 400px; + height: 430px; box-sizing: border-box; border: 1px solid #3D3D3D; /*box-shadow: 0px 0px 10px #3D3D3D inset;*/ @@ -294,7 +307,7 @@ p{ margin-bottom: 5px; } .data_content .data_main1 .main_left1 div .main_title1{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -313,25 +326,12 @@ p{ } .data_content .data_main1 .main_center1{ - width: 49%; - height: 400px; + width: calc(25% - 10px); + height: 430px; } -.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; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -349,16 +349,17 @@ p{ } .data_content .data_main1 .main_right1{ - width: 50%; + width: calc(34% - 5px); + margin-right: 15px; } .data_content .data_main1 .main_right1>div{ width: 100%; - height: 400px; + height: 430px; 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, /*右边阴影*/ + /* 10px 0px 15px #3D3D3D inset, */ /*右边阴影*/ 0px 10px 15px #3D3D3D inset; position: relative; } @@ -376,7 +377,7 @@ p{ margin-bottom: 5px; } .data_content .data_main1 .main_right1 div .main_title1{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -419,7 +420,7 @@ p{ margin-bottom: 5px; } .data_content .data_main2 .main_left2 div .main_title2{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -456,7 +457,7 @@ p{ position: relative; } .data_content .data_main2 .main_center2 .main_title2{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -501,7 +502,7 @@ p{ margin-bottom: 5px; } .data_content .data_main2 .main_right2 div .main_title2{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; @@ -523,15 +524,16 @@ p{ width: calc(100% - 30px); height: 430px; margin-left: 15px; + margin-top: 30px; /* margin-bottom: 10px; */ } .data_content .data_bottom div{ } .data_content .data_bottom .bottom_1{ - width: 26%; + width: 24%; height: 430px; - box-shadow:-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; @@ -541,24 +543,22 @@ p{ /*background: url("../img/chart_5.png") no-repeat;*/ } .data_content .data_bottom .bottom_center{ - width: 74%; + width: 76%; height: 430px; } .data_content .data_bottom .bottom_2{ - width: calc(53% - 15px); + width: 51.6%; height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ - 10px 0px 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_bottom .bottom_3{ - width: calc(47% - 15px); + width: 47%; height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -567,7 +567,6 @@ p{ position: relative; box-sizing: border-box; border: 1px solid #3D3D3D; - margin-left:15px; } /* .data_content .data_bottom .bottom_4{ width: 26%; @@ -582,14 +581,14 @@ p{ background: url("../img/chart_8.png") no-repeat; } */ .data_content .data_bottom div .main_title{ - width: 250px; + width: 230px; height: 35px; line-height: 33px; background-color: #3D3D3D; border-radius: 18px; position: absolute; top: -17px; - left:45%; + left:50%; margin-left: -110px; color:#fff; font-size: 18px; @@ -643,17 +642,116 @@ p{ /*0px 10px 15px #3D3D3D inset;*/ } /* 第5行图 */ -.data_content .data_bottom2{ - width: calc(100% - 30px); + .data_bottom_web{ + width:100%; + 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; + position: relative; + box-sizing: border-box; + border: 1px solid #3D3D3D; +} + .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; + height: 35px; + line-height: 33px; + background-color: #3D3D3D; + border-radius: 18px; + position: absolute; + top: -17px; + left:50%; + margin-left: -110px; + color:#fff; + font-size: 18px; + font-weight: 600; + box-sizing: border-box; + text-align:center; + border-radius:18px !important; +} + + div .main_table_web tr{ + height: 36px; +} + div .main_table_web{ + width: 100%; + margin-top: 25px; +} + div .main_table_web table{ + width: 100%; +} + div .main_table_web thead tr{ + height: 36px; +} + div .main_table_web th{ + font-size: 14px; + font-weight: 600; + color:#757575; + text-align: center; +} + .main_table_web th:nth-child(1){ + width: 30%; +} + div .main_table_web th:nth-child(2){ + width: 35%; +} + div .main_table_web th:nth-child(2){ + width: 35%; +} + div .main_table_web td{ + color:#3D3D3D; + font-size: 12.8px; + text-align: center; +} + .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;*/ +} + +/* 活跃端口 active port */ + .data_bottom_port{ + width: 23%; height: 430px; margin-left: 15px; margin-top: 30px; } -.data_content .data_bottom2 div{ + .data_bottom_port div{ } -.data_content .data_bottom2 .bottom_12{ - width: 26%; + .bottom_port{ + width: 100%; height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -664,11 +762,11 @@ p{ border: 1px solid #3D3D3D; /*background: url("../img/chart_5.png") no-repeat;*/ } -.data_content .data_bottom2 .bottom_center2{ - width: 74%; + .bottom_center_port{ + width: 100%; height: 430px; } -.data_content .data_bottom2 .bottom_22{ + .bottom_port{ width: calc(53% - 15px); height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ @@ -681,7 +779,7 @@ p{ margin-left: 15px; /*background: url("../img/chart_6.png") no-repeat;*/ } -.data_content .data_bottom2 .bottom_32{ + .bottom_port{ width: calc(47% - 15px); height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ @@ -694,8 +792,8 @@ p{ /*background: url("../img/chart_7.png") no-repeat;*/ margin-left:15px; } -.data_content .data_bottom2 .bottom_42{ - width: 26%; + .bottom_port{ + width: 100%; height: 430px; box-shadow:-10px 0px 15px #3D3D3D inset, /*左边阴影*/ 0px -10px 15px #3D3D3D inset, /*上边阴影*/ @@ -706,15 +804,15 @@ p{ border: 1px solid #3D3D3D; /*background: url("../img/chart_8.png") no-repeat;*/ } -.data_content .data_bottom2 div .main_title2{ - width: 250px; + div .main_title_port{ + width: 220px; height: 35px; line-height: 33px; background-color: #3D3D3D; border-radius: 18px; position: absolute; top: -17px; - left:45%; + left:50%; margin-left: -110px; color:#fff; font-size: 18px; @@ -724,44 +822,44 @@ p{ border-radius:18px !important; } -.data_content .data_bottom2 div .main_table2 tr{ - height: 36px; + div .main_table_port tr{ + height: 33px; } -.data_content .data_bottom2 div .main_table2{ + div .main_table_port{ width: 100%; margin-top: 25px; } -.data_content .data_bottom2 div .main_table2 table{ + div .main_table_port table{ width: 100%; } -.data_content .data_bottom2 div .main_table2 thead tr{ + div .main_table_port thead tr{ height: 36px; } -.data_content .data_bottom2 div .main_table2 th{ + div .main_table_port th{ font-size: 14px; font-weight: 600; color:#757575; text-align: center; } -.data_content .data_bottom2 div .main_table2 th:nth-child(1){ + div .main_table_port th:nth-child(1){ width: 30%; } -.data_content .data_bottom2 div .main_table2 th:nth-child(2){ + div .main_table2 th:nth-child(2){ width: 35%; } -.data_content .data_bottom2 div .main_table2 th:nth-child(2){ + div .main_table_port th:nth-child(2){ width: 35%; } -.data_content .data_bottom2 div .main_table2 td{ + div .main_table_port 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){ + 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; /*右边阴影*/ diff --git a/src/main/webapp/static/global/plugins/highcharts/echart.js b/src/main/webapp/static/global/plugins/highcharts/echart.js index d126e737d..83a193ec4 100644 --- a/src/main/webapp/static/global/plugins/highcharts/echart.js +++ b/src/main/webapp/static/global/plugins/highcharts/echart.js @@ -10,7 +10,7 @@ //协议图-操作系统 data.push({ name: d.protoType, - y: parseInt(d.count), + y: parseInt(d.count+Math.random()*300), drilldown: d.protoType, }); @@ -48,7 +48,7 @@ title: { text: null }, - tooltip: { + tool: { enabled: true, headerFormat: '{point.key}: {point.percentage:.1f}%
', pointFormat: '{series.name}: {point.y}', @@ -59,14 +59,29 @@ enabled:false }, legend:{ + width:370, + x:20, + itemWidth:90, itemHoverStyle:{ color:'#61D2F7', }, itemStyle:{ color: '#fff', fontFamily:'Microsoft YaHei', - } + }, +// navigation: {//图例分页 +// activeColor: 'red', +// animation: true, +// arrowSize: 15, +// inactiveColor: '#CCC', +// style: { +// fontWeight: 'bold', +// color: '#333', +// fontSize: '12px' +// } +// } }, + plotOptions: { pie: { allowPointSelect: true, @@ -89,13 +104,15 @@ events: { mouseOver: function(e) { // 鼠标滑过时动态更新标题 // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle - /*chart.setTitle({ - text: '
'+e.target.name, + chart.setTitle({ + text:e.target.name.length>10? this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"...":this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"", + floating:true, + y:120, style: {//设置字体颜色 color: '#fff', fontFamily:'Microsoft YaHei' }, - });*/ + }); this.slice(); }, // 鼠标移出时，收回突出显示 @@ -137,7 +154,15 @@ // 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}, + {"ipAddr":"170.1.0.1","linkNum":532,"pktNum": 5,"byteLen": 8}, + {"ipAddr":"10.32.33.61","linkNum":532,"pktNum": 5,"byteLen": 9}, + {"ipAddr":"145.16.1.2","linkNum":532,"pktNum": 5,"byteLen": 10}, + {"ipAddr":"153.5.0.36","linkNum":532,"pktNum": 5,"byteLen": 11}] + } var data=new Array(); var xData=new Array(); var drillData=new Array(); @@ -148,7 +173,7 @@ //活跃IP图 data.push({ name: d.ipAddr, - y: parseInt(d.linkNum), + y: parseInt(d.linkNum+Math.random()*300), drilldown: d.ipAddr, }); pktNum[0]="pktNum"; @@ -194,8 +219,8 @@ }, labels:{ formatter:function(){ - if(this.value.length>7){ - return ''+this.value.substring(0,7)+"..."+'' + if(this.value.length>15){ + return ''+this.value.substring(0,15)+"..."+'' }else{ return this.value } @@ -206,7 +231,7 @@ yAxis: { min: 0, title: { - text: 'linkNum', + text: 'Number', align:'high', style: {//设置字体颜色 color: '#fff', @@ -240,7 +265,7 @@ enabled:false }, series: [{ - name: 'Num', + name: 'Number', colorByPoint: true, data: data }], @@ -276,7 +301,7 @@ //活跃IP图 data.push({ name: d.appType, - y: parseInt(d.count), + y: parseInt(d.count+Math.random()*300), drilldown: d.appType, }); pktNum[0]="pktNum"; @@ -341,7 +366,12 @@ yAxis: { min: 0, title: { - text: null + text: 'Number', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, }, labels:{ style: {//设置字体颜色 @@ -439,9 +469,10 @@ function echart_2(rs){ }, }, legend:{ - layout:'vertical', - align:'center', - verticalAligh:'bottom', + width:480, + x:40, + itemWidth:100, + itemDistance:2, itemHoverStyle:{ color:'#61D2F7', }, @@ -489,15 +520,6 @@ function echart_2(rs){ credits:{//是否有highcharts水印 enabled:false }, - legend:{ - itemHoverStyle:{ - color:'#61D2F7', - }, - itemStyle:{ - color: '#fff', - fontFamily:'Microsoft YaHei', - } - }, tooltip: { enabled: true, headerFormat: '{point.key}: {point.percentage:.1f}%
', @@ -566,6 +588,10 @@ function echart_5(rs){ type: 'pie' }, legend:{ + width:480, + x:40, + itemWidth:100, + itemDistance:2, itemHoverStyle:{ color:'#61D2F7', }, @@ -658,7 +684,6 @@ function echart_4(rs){ $(rs).each(function(i, d) { var pktNum=new Array(); var byteLen=new Array(); - //协议图-操作系统 data.push({ name: d.webId, y: parseInt(d.count), @@ -727,6 +752,10 @@ function echart_4(rs){ enabled:false }, legend:{ + width:480, + x:40, + itemWidth:100, + itemDistance:2, itemHoverStyle:{ color:'#61D2F7', }, @@ -841,6 +870,9 @@ function echart_6(rs){ enabled:false }, legend:{ + width:370, + x:20, + itemWidth:90, itemHoverStyle:{ color:'#61D2F7', }, diff --git a/src/main/webapp/static/global/plugins/highcharts/js/sunburst.js b/src/main/webapp/static/global/plugins/highcharts/js/sunburst.js new file mode 100644 index 000000000..11df0f82f --- /dev/null +++ b/src/main/webapp/static/global/plugins/highcharts/js/sunburst.js @@ -0,0 +1,47 @@ +/* + Highcharts JS v6.1.0 (2018-04-13) + + (c) 2016 Highsoft AS + Authors: Jon Arild Nygard + + License: www.highcharts.com/license +*/ +(function(E){"object"===typeof module&&module.exports?module.exports=E:E(Highcharts)})(function(E){var O=function(){return function(b){var B=this,n=B.graphic,k=b.animate,w=b.attr,e=b.onComplete,H=b.css,D=b.group,t=b.renderer,x=b.shapeArgs;b=b.shapeType;B.shouldDraw()?(n||(B.graphic=n=t[b](x).add(D)),n.css(H).attr(w).animate(k,void 0,e)):n&&n.animate(k,void 0,function(){B.graphic=n=n.destroy();"function"===typeof e&&e()});n&&n.addClass(B.getClassName(),!0)}}(),M=function(b){var B=b.each,n=b.extend, +k=b.isArray,w=b.isObject,e=b.isNumber,H=b.merge,D=b.pick,t=b.reduce;return{getColor:function(x,y){var v=y.index,p=y.mapOptionsToLevel,n=y.parentColor,C=y.parentColorIndex,z=y.series,l=y.colors,k=y.siblings,q=z.points,e,t,w,B;if(x){q=q[x.i];x=p[x.level]||{};if(e=q&&x.colorByPoint)w=q.index%(l?l.length:z.chart.options.chart.colorCount),t=l&&l[w];l=q&&q.options.color;e=x&&x.color;if(p=n)p=(p=x&&x.colorVariation)&&"brightness"===p.key?b.color(n).brighten(v/k*p.to).get():n;e=D(l,e,t,p,z.color);B=D(q&& +q.options.colorIndex,x&&x.colorIndex,w,C,y.colorIndex)}return{color:e,colorIndex:B}},getLevelOptions:function(b){var y=null,v,p,F,C;if(w(b))for(y={},F=e(b.from)?b.from:1,C=b.levels,p={},v=w(b.defaults)?b.defaults:{},k(C)&&(p=t(C,function(b,l){var p,q;w(l)&&e(l.level)&&(q=H({},l),p="boolean"===typeof q.levelIsConstant?q.levelIsConstant:v.levelIsConstant,delete q.levelIsConstant,delete q.level,l=l.level+(p?0:F-1),w(b[l])?n(b[l],q):b[l]=q);return b},{})),C=e(b.to)?b.to:1,b=0;b<=C;b++)y[b]=H({},v,w(p[b])? +p[b]:{});return y},setTreeValues:function y(b,p){var e=p.before,t=p.idRoot,k=p.mapIdToNode[t],l=p.points[b.i],w=l&&l.options||{},q=0,v=[];n(b,{levelDynamic:b.level-(("boolean"===typeof p.levelIsConstant?p.levelIsConstant:1)?0:k.level),name:D(l&&l.name,""),visible:t===b.id||("boolean"===typeof p.visible?p.visible:!1)});"function"===typeof e&&(b=e(b,p));B(b.children,function(e,l){var t=n({},p);n(t,{index:l,siblings:b.children.length,visible:b.visible});e=y(e,t);v.push(e);e.visible&&(q+=e.val)});b.visible= +0e.lP.lR&&g.algorithmCalcPoints(a, +!1,e,d,r);h===u&&g.algorithmCalcPoints(a,!0,e,d,r);h+=1});return d},algorithmFill:function(a,b,c){var d=[],g,A=b.direction,r=b.x,h=b.y,u=b.width,e=b.height,m,l,p,q;t(c,function(c){g=c.val/b.val*b.height*b.width;m=r;l=h;0===A?(q=e,p=g/q,u-=p,r+=p):(p=u,q=g/p,e-=q,h+=q);d.push({x:m,y:l,width:p,height:q});a&&(A=1-A)});return d},strip:function(a,b){return this.algorithmLowAspectRatio(!1,a,b)},squarified:function(a,b){return this.algorithmLowAspectRatio(!0,a,b)},sliceAndDice:function(a,b){return this.algorithmFill(!0, +a,b)},stripes:function(a,b){return this.algorithmFill(!1,a,b)},translate:function(){var a=this,b=a.options,c=K(a),f,g;l.prototype.translate.call(a);g=a.tree=a.getTree();f=a.nodeMap[c];a.mapOptionsToLevel=y({from:f.level+1,levels:b.levels,to:g.height,defaults:{levelIsConstant:a.options.levelIsConstant,colorByPoint:b.colorByPoint}});""===c||f&&f.children.length||(a.drillToNode("",!1),c=a.rootNode,f=a.nodeMap[c]);I(a.nodeMap[a.rootNode],function(c){var b=!1,f=c.parent;c.visible=!0;if(f||""===f)b=a.nodeMap[f]; +return b});I(a.nodeMap[a.rootNode].children,function(a){var c=!1;t(a,function(a){a.visible=!0;a.children.length&&(c=(c||[]).concat(a.children))});return c});a.setTreeValues(g);a.axisRatio=a.xAxis.len/a.yAxis.len;a.nodeMap[""].pointValues=c={x:0,y:0,width:100,height:100};a.nodeMap[""].values=c=e(c,{width:c.width*a.axisRatio,direction:"vertical"===b.layoutStartingDirection?0:1,val:g.val});a.calculateChildrenAreas(g,c);a.colorAxis?a.translateColors():b.colorByPoint||a.setColorRecursive(a.tree);b.allowDrillToNode&& +(b=f.pointValues,a.xAxis.setExtremes(b.x,b.x+b.width,!1),a.yAxis.setExtremes(b.y,b.y+b.height,!1),a.xAxis.setScale(),a.yAxis.setScale());a.setPointValues()},drawDataLabels:function(){var a=this,b=a.mapOptionsToLevel,c=v(a.points,function(a){return a.node.visible}),f,g;t(c,function(c){g=b[c.node.level];f={style:{}};c.node.isLeaf||(f.enabled=!1);g&&g.dataLabels&&(f=e(f,g.dataLabels),a._hasPointLabels=!0);c.shapeArgs&&(f.style.width=c.shapeArgs.width,c.dataLabel&&c.dataLabel.css({width:c.shapeArgs.width+ +"px"}));c.dlOptions=e(f,c.options.dataLabels)});l.prototype.drawDataLabels.call(this)},alignDataLabel:function(a){k.column.prototype.alignDataLabel.apply(this,arguments);a.dataLabel&&a.dataLabel.attr({zIndex:(a.node.zIndex||0)+1})},pointAttribs:function(a,b){var c=F(this.mapOptionsToLevel)?this.mapOptionsToLevel:{},f=a&&c[a.node.level]||{},c=this.options,g=b&&c.states[b]||{},d=a&&a.getClassName()||"";a={stroke:a&&a.borderColor||f.borderColor||g.borderColor||c.borderColor,"stroke-width":z(a&&a.borderWidth, +f.borderWidth,g.borderWidth,c.borderWidth),dashstyle:a&&a.borderDashStyle||f.borderDashStyle||g.borderDashStyle||c.borderDashStyle,fill:a&&a.color||this.color};-1!==d.indexOf("highcharts-above-level")?(a.fill="none",a["stroke-width"]=0):-1!==d.indexOf("highcharts-internal-node-interactive")?(b=z(g.opacity,c.opacity),a.fill=q(a.fill).setOpacity(b).get(),a.cursor="pointer"):-1!==d.indexOf("highcharts-internal-node")?a.fill="none":b&&(a.fill=q(a.fill).brighten(g.brightness).get());return a},drawPoints:function(){var a= +this,b=v(a.points,function(a){return a.node.visible});t(b,function(c){var b="level-group-"+c.node.levelDynamic;a[b]||(a[b]=a.chart.renderer.g(b).attr({zIndex:1E3-c.node.levelDynamic}).add(a.group));c.group=a[b]});k.column.prototype.drawPoints.call(this);a.options.allowDrillToNode&&t(b,function(c){c.graphic&&(c.drillId=a.options.interactByLeaf?a.drillToByLeaf(c):a.drillToByGroup(c))})},onClickDrillToNode:function(a){var b=(a=a.point)&&a.drillId;C(b)&&(a.setState(""),this.drillToNode(b))},drillToByGroup:function(a){var b= +!1;1!==a.node.level-this.nodeMap[this.rootNode].level||a.node.isLeaf||(b=a.id);return b},drillToByLeaf:function(a){var b=!1;if(a.node.parent!==this.rootNode&&a.node.isLeaf)for(a=a.node;!b;)a=this.nodeMap[a.parent],a.parent===this.rootNode&&(b=a.id);return b},drillUp:function(){var a=this.nodeMap[this.rootNode];a&&C(a.parent)&&this.drillToNode(a.parent)},drillToNode:function(a,b){var c=this.nodeMap[a];this.idPreviousRoot=this.rootNode;this.rootNode=a;""===a?this.drillUpButton=this.drillUpButton.destroy(): +this.showDrillUpButton(c&&c.name||a);this.isDirty=!0;z(b,!0)&&this.chart.redraw()},showDrillUpButton:function(a){var b=this;a=a||"\x3c Back";var c=b.options.drillUpButton,f,g;c.text&&(a=c.text);this.drillUpButton?(this.drillUpButton.placed=!1,this.drillUpButton.attr({text:a}).align()):(g=(f=c.theme)&&f.states,this.drillUpButton=this.chart.renderer.button(a,null,null,function(){b.drillUp()},f,g&&g.hover,g&&g.select).addClass("highcharts-drillup-button").attr({align:c.position.align,zIndex:7}).add().align(c.position, +!1,c.relativeTo||"plotBox"))},buildKDTree:D,drawLegendSymbol:b.LegendSymbolMixin.drawRectangle,getExtremes:function(){l.prototype.getExtremes.call(this,this.colorValueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;l.prototype.getExtremes.call(this)},getExtremesFromAll:!0,bindAxes:function(){var a={endOnTick:!1,gridLineWidth:0,lineWidth:0,min:0,dataMin:0,minPadding:0,max:100,dataMax:100,maxPadding:0,startOnTick:!1,title:null,tickPositions:[]};l.prototype.bindAxes.call(this);b.extend(this.yAxis.options, +a);b.extend(this.xAxis.options,a)},utils:{recursive:I,reduce:J}},{getClassName:function(){var a=b.Point.prototype.getClassName.call(this),d=this.series,c=d.options;this.node.level<=d.nodeMap[d.rootNode].level?a+=" highcharts-above-level":this.node.isLeaf||z(c.interactByLeaf,!c.allowDrillToNode)?this.node.isLeaf||(a+=" highcharts-internal-node"):a+=" highcharts-internal-node-interactive";return a},isValid:function(){return this.id||p(this.value)},setState:function(a){b.Point.prototype.setState.call(this, +a);this.graphic&&this.graphic.attr({zIndex:"hover"===a?1:0})},setVisible:k.pie.prototype.pointClass.prototype.setVisible})})(E,M);(function(b,B,n){var k=b.CenteredSeriesMixin,w=b.Series,e=b.each,H=b.extend,D=k.getCenter,t=n.getColor,x=n.getLevelOptions,y=k.getStartAndEndRadians,v=b.grep,p=b.inArray,F=b.isNumber,C=b.isObject,z=b.isString,l=b.keys,E=b.merge,q=180/Math.PI,k=b.seriesType,L=n.setTreeValues,J=b.reduce,I=n.updateRootId,K=function(a,b){var c=[];if(F(a)&&F(b)&&a<=b)for(;a<=b;a++)c.push(a); +return c},a=function(a,b){var c;b=C(b)?b:{};var f=0,d,h,u,q;C(a)&&(c=E({},a),a=F(b.from)?b.from:0,q=F(b.to)?b.to:0,h=K(a,q),a=v(l(c),function(a){return-1===p(+a,h)}),d=u=F(b.diffRadius)?b.diffRadius:0,e(h,function(a){a=c[a];var b=a.levelSize.unit,g=a.levelSize.value;"weight"===b?f+=g:"percentage"===b?(a.levelSize={unit:"pixels",value:g/100*d},u-=a.levelSize.value):"pixels"===b&&(u-=g)}),e(h,function(a){var b=c[a];"weight"===b.levelSize.unit&&(b=b.levelSize.value,c[a].levelSize={unit:"pixels",value:b/ +f*u})}),e(a,function(a){c[a].levelSize={value:0,unit:"pixels"}}));return c},d=function(a,b){var c=b.mapIdToNode[a.parent],f=b.series,d=f.chart,h=f.points[a.i],c=t(a,{colors:d&&d.options&&d.options.colors,colorIndex:f.colorIndex,index:b.index,mapOptionsToLevel:b.mapOptionsToLevel,parentColor:c&&c.color,parentColorIndex:c&&c.colorIndex,series:b.series,siblings:b.siblings});a.color=c.color;a.colorIndex=c.colorIndex;h&&(h.color=a.color,h.colorIndex=a.colorIndex,a.sliced=a.id!==b.idRoot?h.sliced:!1);return a}; +k("sunburst","treemap",{center:["50%","50%"],colorByPoint:!1,dataLabels:{defer:!0,style:{textOverflow:"ellipsis"},rotationMode:"perpendicular"},rootId:void 0,levelIsConstant:!0,levelSize:{value:1,unit:"weight"},slicedOffset:10},{drawDataLabels:b.noop,drawPoints:function(){var a=this,b=a.mapOptionsToLevel,d=a.shapeRoot,p=a.group,r=a.hasRendered,h=a.rootId,u=a.idPreviousRoot,l=a.nodeMap,m=l[u],t=m&&m.shapeArgs,m=a.points,n=a.startAndEndRadians,k=a.chart,k=k&&k.options&&k.options.chart||{},y="boolean"=== +typeof k.animation?k.animation:!0,x=a.center[3]/2,B=a.chart.renderer,z,v=!1,D=!1;if(k=!!(y&&r&&h!==u&&a.dataLabelsGroup))a.dataLabelsGroup.attr({opacity:0}),z=function(){v=!0;a.dataLabelsGroup&&a.dataLabelsGroup.animate({opacity:1,visibility:"visible"})};e(m,function(c){var f,g,e=c.node,m=b[e.level];f=c.shapeExisting||{};var k=e.shapeArgs||{},A,w=!(!e.visible||!e.shapeArgs);if(r&&y){var G={};g={end:k.end,start:k.start,innerR:k.innerR,r:k.r,x:k.x,y:k.y};w?!c.graphic&&t&&(G=h===c.id?{start:n.start, +end:n.end}:t.end<=k.start?{start:n.end,end:n.end}:{start:n.start,end:n.start},G.innerR=G.r=x):c.graphic&&(u===c.id?g={innerR:x,r:x}:d&&(g=d.end<=f.start?{innerR:x,r:x,start:n.end,end:n.end}:{innerR:x,r:x,start:n.start,end:n.start}));f=G}else g=k,f={};var G=[k.plotX,k.plotY],v;c.node.isLeaf||(h===c.id?(v=l[h],v=v.parent):v=c.id);H(c,{shapeExisting:k,tooltipPos:G,drillId:v,name:""+(c.name||c.id||c.index),plotX:k.plotX,plotY:k.plotY,value:e.val,isNull:!w});v=c.options;e=C(k)?k:{};v=C(v)?v.dataLabels: +{};m=C(m)?m.dataLabels:{};m=E({rotationMode:"perpendicular",style:{width:e.radius}},m,v);F(m.rotation)||(e=e.end-(e.end-e.start)/2,e=e*q%180,"parallel"===m.rotationMode&&(e-=90),90a.val?a.childrenTotal:a.val:a.childrenTotal;this.points[a.i]&&(this.points[a.i].innerArcLength=g*b.innerR,this.points[a.i].outerArcLength=g*b.r);a.shapeArgs=E(b,{plotX:f.x,plotY:f.y});a.values= +E(b,{val:e});a.children.length&&this.setShapeArgs(a,a.values,d)},this)},translate:function(){var b=this.options,f=this.center=D.call(this),e=this.startAndEndRadians=y(b.startAngle,b.endAngle),k=f[3]/2,p=f[2]/2-k,h=I(this),l=this.nodeMap,n,m=l&&l[h],q,t;this.shapeRoot=m&&m.shapeArgs;w.prototype.translate.call(this);t=this.tree=this.getTree();l=this.nodeMap;m=l[h];n=z(m.parent)?m.parent:"";q=l[n];n=x({from:0{point.key}: {point.percentage:.1f}%
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + credits:{//是否有highcharts水印 + enabled:false + }, + legend:{ + width:480, + x:50, + itemWidth:100, + itemDistance:2, + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + }, +// navigation: {//图例分页 +// activeColor: 'red', +// animation: true, +// arrowSize: 15, +// inactiveColor: '#CCC', +// style: { +// fontWeight: 'bold', +// color: '#333', +// fontSize: '12px' +// } +// } + }, + + plotOptions: { + pie: { + allowPointSelect: true, + cursor: 'pointer', + showInLegend: true, + dataLabels: { + enabled: false, + format: '{point.name}:{point.percentage:.1f}%', + style: { + color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' + } + }, + size: 200, //饼图的大小 + states: { + hover: { + enabled: false + } + }, + point: { + events: { + mouseOver: function(e) { // 鼠标滑过时动态更新标题 + // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle + chart.setTitle({ + text:e.target.name.length>10? this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"...":this.percentage.toFixed(1)+"%
"+e.target.name.substring(0,10)+"", + floating:true, + y:120, + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, + }); + this.slice(); + }, + // 鼠标移出时，收回突出显示 + mouseOut: function() { + this.slice(); + }, + // 默认是点击突出，这里屏蔽掉 + click: function() { + return false; + } + }, + }, + } + }, + series: [{ + type: 'pie', + innerSize: '70%',//圆环的大小 + name: 'count', + data: data + }], + drilldown:{ + series:drillData, + drillUpButton: { + relativeTo: 'spacingBox', + } + } + + }, function(c) { // 图表初始化完毕后的会掉函数 + // 环形图圆心 + var centerY = c.series[0].center[1], + titleHeight = parseInt(c.title.styles.fontSize); + // 动态设置标题位置 + c.setTitle({ + y:centerY + titleHeight/2 + }); + }); + + } + + + // echart_main中心图 活跃IP统计 + 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}, + {"ipAddr":"170.1.0.1","linkNum":532,"pktNum": 5,"byteLen": 8}, + {"ipAddr":"10.32.33.61","linkNum":532,"pktNum": 5,"byteLen": 9}, + {"ipAddr":"145.16.1.2","linkNum":532,"pktNum": 5,"byteLen": 10}, + {"ipAddr":"153.5.0.36","linkNum":532,"pktNum": 5,"byteLen": 11}] + } + var data=new Array(); + var xData=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + xData.push(d.ipAddr); + //活跃IP图 + data.push({ + name: d.ipAddr, + y: parseInt(d.linkNum), + drilldown: d.ipAddr, + }); + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + drillData.push({ + name: d.ipAddr, + id: d.ipAddr, + type:'pie', + tooltip: { + enabled: true, + pointFormat: '{series.name}: {point.y} ({point.percentage:.1f}%)' + }, + data: [pktNum,byteLen], + }); + }); + var chart = Highcharts.chart('chart_main', { + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'bar', +// marginLeft:80, + marginTop:50, + inverted: true, + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null + }, + xAxis: { + type:'category', + categories: xData, + title: { + text: null + }, + labels:{ + formatter:function(){ + if(this.value.length>15){ + return ''+this.value.substring(0,15)+"..."+'' + }else{ + return this.value + } + } + } + + }, + yAxis: { + min: 0, + title: { + text: 'Link Number', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, + }, + labels: { + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, + }, + lineWidth: 1, + + }, + tooltip: { +// valueSuffix: ' 单位' + }, + + plotOptions: { + bar: { + dataLabels: { + enabled: true, + allowOverlap: true, // 允许数据标签重叠 + }, + + showInLegend:false + }, + }, + credits:{//是否有highcharts水印 + enabled:false + }, + series: [{ + name: 'Link Number', + colorByPoint: true, + data: data + }], + drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + drillUpButton:{ + relativeTo: 'spacingBox', + }, + series:drillData + } + }); + } + + //app应用类型统计 echart_3 + function echart_3(rs) { + var data=new Array(); + var xData=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + xData.push(d.appType); + //活跃IP图 + data.push({ + name: d.appType, + y: parseInt(d.count), +// drilldown: d.appType, + }); + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + drillData.push({ + name: d.appType, + id: d.appType, + data: [pktNum,byteLen], + }); + }); + var chart = Highcharts.chart('chart_3',{ + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'column', + marginTop:50, + marginBottom:60, + + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null + }, + credits:{//是否有highcharts水印 + enabled:false + }, + xAxis: { + categories: xData, + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + title: { + text: 'App', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + }, + yAxis: { + min: 0, + title: { + text: 'Link Number', + align:'high', + style: {//设置字体颜色 + color: '#fff', + fontFamily:'Microsoft YaHei' + }, + }, + labels:{ + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + } + }, + tooltip: { + enabled: true, + headerFormat: '{point.key}
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + plotOptions: { + column: { + dataLabels: {//数字显示 + enabled: true, + allowOverlap: true, // 允许数据标签重叠 + style: {//设置字体颜色 + color: '#fff', + fontSize:'10px', + fontFamily:'Microsoft YaHei' + }, + }, + showInLegend:false + }, + }, + + series: [{ + name: 'count', + colorByPoint: true, + data: data + }], + /*drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + drillUpButton: { + relativeTo: 'spacingBox', + }, + series:drillData + }*/ + }); + } + //终端用户 分操作系统与浏览器 +function echart_2(rs){ + var data=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + //协议图-操作系统 + data.push({ + name: d.osType, + y: parseInt(d.count), + drilldown: d.osType, + }); + + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + + drillData.push({ + name: d.osType, + id: d.osType, + type:'pie', + data: [pktNum,byteLen], + }); + + }); + // 创建图例 + var chart = Highcharts.chart('chart_2',{ + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'pie' + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + legend:{ + width:480, + x:40, + itemWidth:100, + itemDistance:2, + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null, + style: {//设置字体颜色 + color: '#fff', + fontSize:'18px', + fontFamily:'Microsoft YaHei' + }, + + }, + plotOptions: { + series: { + dataLabels: { + enabled: false, + format: '{point.name}' + }, + }, + pie:{ + showInLegend: true, + point: { + events: { + mouseOver: function(e) { + this.slice(); + }, + // 鼠标移出时，收回突出显示 + mouseOut: function() { + this.slice(); + }, + // 默认是点击突出，这里屏蔽掉 + click: function() { + return false; + } + }, + }, + } + }, + credits:{//是否有highcharts水印 + enabled:false + }, + tooltip: { + enabled: true, + headerFormat: '{point.key}: {point.percentage:.1f}%
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + series: [{ + name: 'count', + colorByPoint: true, + data: data + }], + drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + series:drillData, + drillUpButton: { + relativeTo: 'spacingBox', + } + } + }); +} +//当点击操作系统列表时-显示浏览器 +function echart_5(rs){ + var data=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + //协议图-操作系统 + data.push({ + name: d.bsType, + y: parseInt(d.count), + drilldown: d.bsType, + }); + + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + + drillData.push({ + name: d.bsType, + id: d.bsType, + type:'pie', + data: [pktNum,byteLen], + }); + + }); + // 创建图例 + var chart = Highcharts.chart('chart_2',{ + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'pie' + }, + legend:{ + width:480, + x:40, + itemWidth:100, + itemDistance:2, + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + colors:['#f36f8a', '#44A9A8', '#ffff43','#25f3e6','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null, + style: {//设置字体颜色 + color: '#fff', + fontSize:'18px', + fontFamily:'Microsoft YaHei' + }, + + }, + plotOptions: { + series: { + dataLabels: { + enabled: false, + format: '{point.name}' + }, + + }, + pie:{ + point: { + events: { + mouseOver: function(e) { // 鼠标滑过时动态更新标题 + this.slice(); + }, + // 鼠标移出时，收回突出显示 + mouseOut: function() { + this.slice(); + }, + // 默认是点击突出，这里屏蔽掉 + click: function() { + return false; + } + }, + }, + showInLegend: true, + } + }, + credits:{//是否有highcharts水印 + enabled:false + }, + tooltip: { + enabled: true, + headerFormat: '{point.key}: {point.percentage:.1f}%
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + series: [{ + name: 'count', + colorByPoint: true, + data: data + }], + drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + series:drillData, + drillUpButton: { + relativeTo: 'spacingBox', + } + } + }); +} + +//网站流量分析 +function echart_4(rs){ + var data=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + data.push({ + name: d.websiteService, + y: parseInt(d.count), + drilldown: d.websiteService, + }); + + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + + drillData.push({ + name: d.websiteService, + id: d.websiteService, + type:'pie', + data: [pktNum,byteLen], + }); + + }); + // 创建图例 + var chart = Highcharts.chart('chart_4',{ + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'pie' + }, + + colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null, + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + plotOptions: { + series: { + dataLabels: { + enabled: false, + format: '{point.name}' + }, + }, + pie:{ + showInLegend: true, + point: { + events: { + mouseOver: function(e) { + this.slice(); + }, + // 鼠标移出时，收回突出显示 + mouseOut: function() { + this.slice(); + }, + // 默认是点击突出，这里屏蔽掉 + click: function() { + return false; + } + }, + }, + } + }, + credits:{//是否有highcharts水印 + enabled:false + }, + legend:{ + width:480, + x:50, + itemWidth:100, + itemDistance:2, + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, + tooltip: { + enabled: true, + headerFormat: '{point.key}: {point.percentage:.1f}%
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + series: [{ + name: 'count', + colorByPoint: true, + data: data, + }], + drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + series:drillData, + drillUpButton: { + relativeTo: 'spacingBox', + } + } + }); +} +//网站流量分析-点击列表显示网站分类 +function echart_6(rs){ + var data=new Array(); + var drillData=new Array(); + $(rs).each(function(i, d) { + var pktNum=new Array(); + var byteLen=new Array(); + //协议图-操作系统 + data.push({ + name: d.domain, + y: parseInt(d.count), + drilldown: d.domain, + }); + + pktNum[0]="pktNum"; + pktNum[1]=parseInt(d.pktNum); + byteLen[0]="byteLen"; + byteLen[1]=parseInt(d.byteLen); + + drillData.push({ + name: d.domain, + id: d.domain, + type:'pie', + data: [pktNum,byteLen], + }); + + }); + // 创建图例 + var chart = Highcharts.chart('chart_4',{ + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + type: 'pie' + }, + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6'], + title: { + text: null, + }, + plotOptions: { + series: { + dataLabels: { + enabled: false, + format: '{point.name}' + }, + }, + pie:{ + showInLegend: true, + point: { + events: { + mouseOver: function(e) { // 鼠标滑过时动态更新标题 + this.slice(); + }, + // 鼠标移出时，收回突出显示 + mouseOut: function() { + this.slice(); + }, + // 默认是点击突出，这里屏蔽掉 + click: function() { + return false; + } + }, + }, + } + }, + credits:{//是否有highcharts水印 + enabled:false + }, + legend:{ + width:480, + x:50, + itemWidth:100, + itemDistance:2, + itemHoverStyle:{ + color:'#61D2F7', + }, + itemStyle:{ + color: '#fff', + fontFamily:'Microsoft YaHei', + } + }, + tooltip: { + enabled: true, + headerFormat: '{point.key}: {point.percentage:.1f}%
', + pointFormat: '{series.name}: {point.y}', + shared: true, + useHTML: true + }, + series: [{ + name: 'count', + colorByPoint: true, + data: data, + }], + drilldown:{ + activeAxisLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei', + + }, + activeDataLabelStyle:{ + textDecoration:'none', + color: '#fff', + fontStyle:'Microsoft YaHei' + }, + series:drillData, + drillUpButton: { + relativeTo: 'spacingBox', + } + } + }); +} +function echart_topic_domain(rs){ + var data=[{ + 'id': '0.0', + 'parent': '', + 'name': 'TOPIC' + }]; + + $(rs).each(function(i,d){ + data.push({ + 'id': '1.'+d.topicId, + 'parent': '0.0', + 'name': d.topic, + 'value':d.count + }); + /****主题中的子域名*******/ + $(d.domainData).each(function(j,t){ + data.push({ + 'id': '2.'+t.webId, + 'parent': '1.'+d.topicId, + 'name': t.domain, + 'value':t.count + }); + }) + + }); + + + // Splice in transparent for the center circle + Highcharts.getOptions().colors.splice(0, 0, 'transparent'); + + + var chart = Highcharts.chart('chart_topic', { + + chart: { + backgroundColor: 'rgba(255, 255, 255, 0)', + plotBackgroundColor:null, + plotBorderWidth:null, + plotShadow:false, + marginTop:50, + marginBottom:10, + }, + colors:[ '#44A9A8', '#f36f8a','#25f3e6','#ffff43','#964CEC','#32B0ED','#2b6ed7','#7278DD','#2DA9D8','#C66FE6','#0099cc','#cc0033','#ff6633','#99cccc','#d9f9d0'], + noData:{ + style: {//设置字体颜色 + color: '#fff', + }, + }, + title: { + text: null + }, + credits:{//是否有highcharts水印 + enabled:false + }, + series: [{ + type: "sunburst", + data: data, + allowDrillToNode: true, + cursor: 'pointer', + colorByPoint: true, + dataLabels: { + format: '{point.name}', + filter: { + property: 'innerArcLength', + operator: '>', + value: 16 + } + }, + levels: [{ + level: 1, + levelIsConstant: false, + dataLabels: { + rotationMode: 'parallel', + filter: { + property: 'outerArcLength', + operator: '>', + value: 64 + } + } + }, { + level: 2, + colorByPoint: true, + dataLabels: { + rotationMode: 'parallel' + } + }, + { + level: 3, + colorVariation: { + key: 'brightness', + to: -0.5 + } + }, { + level: 4, + colorVariation: { + key: 'brightness', + to: 0.5 + } + }] + + }], + tooltip: { + headerFormat: "", + pointFormat: '{point.name}: {point.value}' + } + }); +} + diff --git a/src/main/webapp/static/pages/scripts/paginate.js b/src/main/webapp/static/pages/scripts/paginate.js deleted file mode 100644 index a48024bfb..000000000 --- a/src/main/webapp/static/pages/scripts/paginate.js +++ /dev/null @@ -1,248 +0,0 @@ -(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