动态首页调整：流量单位提取到y轴顶端；数字加单位；输出加单位；

2018-12-26 18:44:59 +08:00
parent b2eb6afad9
commit 9b9b76172f
2 changed files with 86 additions and 27 deletions
--- a/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
+++ b/src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
@@ -43,13 +43,15 @@ public class DynamicIndexController extends BaseController {
 		String serviceIds = request.getParameter("sid");
 		String baseNum = request.getParameter("baseNum");
 		String hourStr = request.getParameter("hour");
+		String dropBaseNum = request.getParameter("dropBaseNum");
+		String serviceBaseNum = request.getParameter("serviceBaseNum");
 		Integer hour = null;
 		if(hourStr!=null &&!"".equals(hourStr)){
 			hour = Integer.parseInt(hourStr);
 		}
-		Object trafficAreaStat = trafficAreaStat(hour, Integer.parseInt(baseNum));
-		Object dropStat = dropStat(hour, Integer.parseInt(baseNum));
-		Object logStat = logStat(hour, serviceIds, Integer.parseInt(baseNum));
+		Object trafficAreaStat = trafficAreaStat(hour, Long.valueOf(baseNum));
+		Object dropStat = dropStat(hour, Long.valueOf(dropBaseNum));
+		Object logStat = logStat(hour, serviceIds, Long.valueOf(serviceBaseNum));
 		Gson gson = new GsonBuilder().create();
 		String trafficJson = gson.toJson(trafficAreaStat);
 		String dropJson = gson.toJson(dropStat);
@@ -94,7 +96,7 @@ public class DynamicIndexController extends BaseController {
 	 * @param hour 取hour小时内的流量数据，默认24小时
 	 * @return
 	 */
-	public Object trafficAreaStat(Integer hour, Integer baseNum) {
+	public Object trafficAreaStat(Integer hour, long baseNum) {
 		List<Map> results = new ArrayList<>();
 		
 		if (hour == null || hour <= 0) {
@@ -131,7 +133,11 @@ public class DynamicIndexController extends BaseController {
 							}
 							List<Object> point = new ArrayList<>();//每个点 [时间戳, 数值]
 							point.add(DateUtils.parseDate(entity.getReportTime()).getTime());
+							/*if(0<entity.getSum()){//1024*1024*1024=1073741824
+								point.add(entity.getSum()/1073741824);
+							}else{
 								point.add(entity.getSum());
+							}*/point.add(entity.getSum());
 							
 							List<List<Object>> points = t.get(entity.getArea());//所有点
 							points.add(point);
@@ -171,7 +177,7 @@ public class DynamicIndexController extends BaseController {
 	 * @param hour 取hour小时内的丢弃数据，默认24小时
 	 * @return
 	 */
-	public Object dropStat(Integer hour, Integer baseNum) {
+	public Object dropStat(Integer hour, long baseNum) {
 		List<Map> results = new ArrayList<>();
 		
 		if (hour == null || hour <= 0) {
@@ -235,7 +241,7 @@ public class DynamicIndexController extends BaseController {
 	 * @param hour 取hour小时内的日志数据，默认24小时
 	 * @return
 	 */
-	public Object logStat(Integer hour, String serviceIds, Integer baseNum) {
+	public Object logStat(Integer hour, String serviceIds, long baseNum) {
 		String[] _idsArr = serviceIds.split(",");
 		Long[] idsArr = new Long[5];
 		for (int i = 0; i < 5; i++) {
--- a/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
+++ b/src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
@@ -265,6 +265,17 @@
 				top: 5%;
 				left: -41%;
 			}
+			#dataNumsStr{
+				font-size:18px;
+				color:#ffffff;
+				position: relative;
+				top: 2.2%;
+    			left: 43%;
+    			font-size: 24px;
+			}
+			/* #dataNumsStr span{
+				margin-left:-45px;font-size:23px;font-family:arial;font-weight:bold;
+			} */
 			/* 杂质动态 */
 			.zzdt{
 				position: absolute;
@@ -344,8 +355,8 @@
 					 	 	<!-- 数据流出 -->
 							<div style="margin-left: -187px;margin-top: 11%;">
 								<div id="linesFlow_chu" style="height: 260px;"></div>
-							</div>
-							 <div id="dataNums" ></div>
+							</div><div id="dataNums" ></div>							
+							<div id="dataNumsStr"></div>
 					 	 </div>
 					 	 <div class="col-sm-3" style="height: 100%">
 					 	 	<div class="box_log_bar">
@@ -859,6 +870,7 @@
 				    },
 				    grid:{
 				        left: 53,
+				        top: '35%',
 				    },
 				    xAxis: {
 				        type: 'time',
@@ -875,7 +887,7 @@
 				            color: '#fff',
 				            fontSize: 12,
 				            formatter: function(value) {
-				                return echarts.format.formatTime('hh:mm:ss', new Date(value));
+				                return echarts.format.formatTime('hh:mm', new Date(value));
 				            }
 				        },
 				        splitLine: {
@@ -885,6 +897,10 @@
 				    },
 				    yAxis: [{
 				    	type: 'value',
+				        name: 'Bps',
+				        nameTextStyle:{
+				            color:'#ffffff',
+				        },
 				        min: 0,
 				        axisLine: {
 				            lineStyle: {
@@ -898,13 +914,19 @@
 				            fontSize: 12,
 				            formatter: function (value, index) {
 				            	if (value > 1024 && value <= 1048576) {
-				            		return value/1024 + " KBps";
+				            		return Math.round(value/1024) + " K";//Bps
 				            	}
 				            	if (value > 1048576 && value <= 1073741824) {
-				            		return value/1048576 + " MBps";
+				            		return Math.round(value/1048576) + " M";//Bps
 				            	}
-				            	if (value > 1073741824) {
-				            		return value/1073741824 + " GBps";
+				            	if (value > 1073741824 && value <= 1099511627776) {
+				            		return Math.round(value/1073741824) + " G";//Bps
+				            	}
+				            	if (value > 1099511627776 && value <= 1125899906842624) {
+				            		return Math.round(value/1099511627776) + " T";//Bps
+				            	}
+				            	if (value > 1125899906842624) {
+				            		return Math.round(value/1125899906842624) + " P";//Bps
 				            	}
 				            	return value;
 				            }
@@ -1045,13 +1067,16 @@
 				         axisLabel: {
 				             formatter: function(value) {
 					            	if (value > 1000 && value <= 1000000) {
-				            		return value/1000 + " K";
+					            		return Math.round(value/1000) + " K";
 					            	}
-				            	if (value > 10000000 && value <= 1000000000) {
-				            		return value/1000000 + " M";
+					            	if (value > 1000000 && value <= 1000000000) {
+					            		return Math.round(value/1000000) + " M";
 					            	}
-				            	if (value > 100000000) {
-				            		return value/1000000000 + " B";
+					            	if (value > 1000000000 && value <= 1000000000000) {
+					            		return Math.round(value/1000000000) + " T";
+					            	}
+					            	if (value > 1000000000000) {
+					            		return Math.round(value/1000000000000) + " P";
 					            	}
 					            	return value;
 				             },
@@ -1189,7 +1214,7 @@
 					$.ajax({
 			    		type:'get',
 			    		dataType: 'json',
-		 				url:'${pageContext.request.contextPath}/nis/dynamicpage/indexLog?hour=24&sid=' + top.indexLogServiceId + "&baseNum=" + top.baseNum,
+		 				url:'${pageContext.request.contextPath}/nis/dynamicpage/indexLog?hour=24&sid=' + top.indexLogServiceId + "&baseNum=" + top.serviceBaseNum,
 		 				success:function(res){//处理返回结果
 		 					logData = res;
 		 					_logData = logData.shift();
@@ -1219,11 +1244,39 @@
 		
 		/* 数字特效 */
 		function animalNum(dropNum){
+			var unitStr = "";
+			if (dropNum > 1000 && dropNum <= 1000000) {
+        		//dropNum = Math.round(dropNum/1000);//K取整
+        		(dropNum/1000).toFixed(1);
+        		unitStr = "K";
+        	}
+        	if (dropNum > 1000000 && dropNum <= 1000000000) {
+        		//dropNum = Math.round(dropNum/1000000);//M
+        		(dropNum/1000000).toFixed(1);
+        		unitStr = "M";
+        	}
+        	if (dropNum > 1000000000 && dropNum <= 1000000000000) {
+        		//dropNum = Math.round(dropNum/1000000000);//G
+        		(dropNum/1000000000).toFixed(1);
+        		unitStr = "G";
+        	}
+        	if (dropNum > 1000000000000 && dropNum <= 1000000000000000) {
+        		//dropNum = Math.round(dropNum/1000000000000);//T
+        		(dropNum/1000000000000).toFixed(1);
+        		unitStr = "T";
+        	}
+        	if (dropNum > 1000000000000000) {
+        		//dropNum = Math.round(dropNum/1000000000000000);//P
+        		(dropNum/1000000000000000).toFixed(1);
+        		unitStr = "P";
+        	}
+        	//dropNum = rand(1000,99999);
+        	//dropNum= dropNum+"M";
 			$("#dataNums").empty();
-			//var dropNum = rand(100,99999);;
 	        $("#dataNums").rollNum({
 	            deVal:dropNum
 	        });
+	        $("#dataNumsStr").html("<span>"+unitStr+"</span>");//alert(unitStr);
 	    };
 		
 		function rand(min,max) {