Merge branch 'develop' of http://192.168.10.125/k18_web/NFS.git into develop

This commit is contained in:
leijun
2018-10-12 19:31:27 +08:00
16 changed files with 1471 additions and 1236 deletions

View File

@@ -79,7 +79,7 @@
<p class="numberRun2">0</p>
</div>
</div>
<div class="fr_fc">
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-trash"> </i>
</div>
@@ -104,6 +104,34 @@
</div>
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-link"> </i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p data-original-title="<spring:message code="new_link"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 新建链接数 --><spring:message code="new_link"/></p>
<p class="numberRun5">0</p>
</div>
</div>
<div class="fr_fc">
<div class="fl_visual">
<i class="fa fa-heartbeat"> </i>
</div>
<div class="fl_fc">
<!-- <a href="javacript:;"> -->
<p data-original-title="<spring:message code="active_link"/>"
class="tooltips" data-flag="false" data-html="true" data-placement="top">
<!-- 活跃链接数 --><spring:message code="active_link"/></p>
<p class="numberRun6">0</p>
</div>
</div>
</div>
</div>
</div>
@@ -114,7 +142,7 @@
<div class="main_left fl">
<div class="left_1">
<div class="main_title">
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a>
<spring:message code="traffic_ipactive_chart"/>&nbsp;&nbsp;<a href="${ctx}/dashboard/ipActiveList"><i class="fa fa-line-chart"></i></a> <a href="javascipt:void(0)" onclick="ipActiveList();return false;"><i class="fa fa-refresh"></i></a>
</div>
<!-- 活跃IP图 --> <div id="chart_main" style="width:100%;height:400px;"></div>
</div>
@@ -341,10 +369,10 @@
<script type="text/javascript">
$(document).ready(function(){
//动态显示数据
ajaxinfo();
setInterval(function(){
ajaxinfo();
},20000);
// ajaxinfo();
// setInterval(function(){
// ajaxinfo();
// },20000);
protocolList();//协议统计
ipActiveList();//活跃IP
@@ -377,6 +405,8 @@ function ajaxinfo(){
dataScroll(".numberRun1",Math.floor(data.rejectNum));
dataScroll(".numberRun2",Math.floor(data.monitorNum));
dataScroll(".numberRun3",Math.floor(data.dropConnNum));
dataScroll(".numberRun5",Math.floor(data.newUniConnNum));
dataScroll(".numberRun6",Math.floor(data.liveConnNum));
var bandwidth=data.bandwidth;
var bandwidthK=bandwidth/1024;
var bandwidthM=bandwidthK/1024;
@@ -430,10 +460,6 @@ function ajaxinfo(){
}
} */
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
//动态显示数据
@@ -456,18 +482,19 @@ function uaSelectChange(){
//协议类型统计
function protocolList(){
$.ajax({
url: '${ctx}/dashboard/protocol',
type : "get" ,
dataType:"json",
cache:false,async:true,
success:function (rs) {
echart_1(rs);
if(rs[0].error!=null){
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
return;
}else{
echart_1(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -480,11 +507,13 @@ function ipActiveList(){
dataType:"json",
cache:false,async:true,
success:function (rs) {
echart_main(rs);
if(rs[0].error!=null){
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
return;
}else{
echart_main(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -511,28 +540,29 @@ function portActiveList(){
$("#tbodyDataPort").prepend(tr);
},
success:function (rs) {
success:function (rs) {
$("#tbodyDataPort").html("");
var n=rs.length;
var total=0;
if(n>0){
$(rs).each(function(i, itemObj) {
total+=itemObj.sum;
});
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData' >";
tr += "<td class='list_c1'>"+itemObj.port+"</td>";
tr += "<td class='list_c2'>"+itemObj.sum+"</td>";
tr += "<td class='list_c3'>"+((itemObj.sum/total)*100).toFixed(1)+" %</td></tr>";
$("#tbodyDataPort").prepend(tr);
})
if(rs[0].error!=null){
$("#tbodyDataPort").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'><spring:message code='request_service_failed'/></td><td></td></tr>");
}else{
$("#tbodyDataPort").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
if(n>0){
$(rs).each(function(i, itemObj) {
total+=itemObj.sum;
});
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData' >";
tr += "<td class='list_c1'>"+itemObj.port+"</td>";
tr += "<td class='list_c2'>"+itemObj.sum+"</td>";
tr += "<td class='list_c3'>"+((itemObj.sum/total)*100).toFixed(1)+" %</td></tr>";
$("#tbodyDataPort").prepend(tr);
})
}else{
$("#tbodyDataPort").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -545,11 +575,13 @@ function appTypeList(){
dataType:"json",
cache:false,async:true,
success:function (rs) {
echart_3(rs);
if(rs[0].error!=null){
top.$.jBox.tip("<spring:message code='request_service_failed'/>", "<spring:message code='info'/>");
return;
}else{
echart_3(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -580,33 +612,34 @@ function systemList(){
$("#tbodyData1").html("");
rs.reverse();
var n=rs.length;
if(n>0){
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:osClick(\""+itemObj.osType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+itemObj.osType+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
n=n-1;
$("#tbodyData1").prepend(tr);
})
if(rs[0].error!=null){
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'><spring:message code='request_service_failed'/></td><td></td></tr>");
}else{
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
if(n>0){
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:osClick(\""+itemObj.osType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.osType+"'>"+itemObj.osType+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
n=n-1;
$("#tbodyData1").prepend(tr);
})
}else{
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
//终端图-操作系统
echart_2(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
// 点击操作系统列表右侧显示 浏览器图
@@ -624,9 +657,6 @@ function osClick(osType,obj){
success:function (rs) {
echart_5(rs);
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
//点击浏览器列表右侧显示 操作系统图
@@ -642,9 +672,6 @@ function bsClick(bsType,obj){
success:function (rs) {
echart_2(rs);
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -677,33 +704,33 @@ function browserList() {
$("#tbodyData1").html("");
rs.reverse();
var n=rs.length;
if(n>0){
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:bsClick(\""+itemObj.bsType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+itemObj.bsType.substring(0,18)+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData1").prepend(tr);
n=n-1;
})
}else{
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
//终端图-浏览器
echart_5(rs);
if(rs[0].error!=null){
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'><spring:message code='request_service_failed'/></td><td></td></tr>");
}else{
if(n>0){
$(rs).each(function(i, itemObj) {
var count= itemObj.count;
var preCount = itemObj.preCount;
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:bsClick(\""+itemObj.bsType+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title='"+itemObj.bsType+"'>"+itemObj.bsType.substring(0,18)+"</td>";
if(preCount<count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(preCount>count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData1").prepend(tr);
n=n-1;
})
}else{
$("#tbodyData1").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
//终端图-浏览器
echart_5(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
@@ -732,31 +759,32 @@ function websiteList() {
success:function (rs) {
$("#tbodyData2").html("");
var n=rs.length;
if(n>0){
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:webClick(\""+itemObj.websiteServiceId+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+itemObj.websiteService.substring(0,18)+"</td>";
if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData2").prepend(tr);
n=n-1;
})
}else{
$("#tbodyData2").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
//网站统计图
if(rs[0].error!=null){
$("#tbodyData2").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'><spring:message code='request_service_failed'/></td><td></td></tr>");
}else{
if(n>0){
$(rs).each(function(i, itemObj) {
var tr = "<tr class='frist rowData select-row-tr' onclick='javascript:webClick(\""+itemObj.websiteServiceId+"\",this);return false;'>";
tr += "<td class='list_c1' style='color:#fff'>"+n+"</td>";
tr += "<td class='list_c2' style='color:#fff' title="+itemObj.websiteService+">"+itemObj.websiteService.substring(0,18)+"</td>";
if(itemObj.preCount<itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-up' style='color:green'/>"+"</td></tr>";
}else if(itemObj.preCount>itemObj.count){
tr += "<td class='list_c3'>"+"<i class='fa fa-arrow-down' style='color:red'/>"+"</td></tr>";
}else{
tr += "<td class='list_c3'>"+""+"</td></tr>";
}
$("#tbodyData2").prepend(tr);
n=n-1;
})
}else{
$("#tbodyData2").prepend("<tr class='frist rowData'><td></td><td style='color:#fff'>No Data</td><td></td></tr>");
}
//网站统计图
echart_4(rs);
}
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
//点击http网站列表-显示域名图
@@ -774,9 +802,6 @@ function webClick(websiteServiceId,obj){
success:function (rs) {
echart_6(rs);
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
//点击http网站列表-显示域名图
@@ -790,9 +815,6 @@ function topicAndDomainList(){
//主题域名流量统计图
echart_topic_domain(rs);
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}

View File

@@ -11,14 +11,14 @@
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/ipActiveList'"><spring:message code="refresh"/></button>
<button type="button" class="btn btn-default" onClick="javascript:window.location='${ctx}/dashboard/logChart'"><spring:message code="back"/></button>
</div>
<h3 class="page-title">
<spring:message code="活跃IP实时统计TOP100"></spring:message>
<spring:message code="traffic_ipactive_hour_trend"></spring:message>
</h3>
<h5 class="page-header"></h5>
<div id="chart" style="width:100%;height:400px;"></div>
<div id="chart" style="width:95%;height:350px;"></div>
<div class="col-md-12">
<div class="portlet">
@@ -30,25 +30,26 @@
</form:form>
</div>
<sys:message content="${message}"/>
<div class="table-responsive">
<table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
<h3 class="page-title">
<spring:message code="traffic_ipactive_hour_max"></spring:message>
</h3>
<div class="" align="center">
<table id="contentTable"class="table table-striped table-bordered table-condensed text-nowrap">
<thead>
<tr>
<th><spring:message code="chart"/></th>
<th><spring:message code="ip_addr"/></th>
<th><spring:message code="area_id"/></th>
<th><spring:message code="link_num"/></th>
<th><spring:message code="c2s_pkt_num"/></th>
<th><spring:message code="s2c_pkt_num"/></th>
<th><spring:message code="c2s_byte_len"/></th>
<th><spring:message code="s2c_byte_len"/></th>
<th><spring:message code="c2s_byte_num"/></th>
<th><spring:message code="s2c_byte_num"/></th>
<th><spring:message code="stat_time"/></th>
</tr>
</thead>
<tbody>
<c:forEach var="entry" items="${page.list }" varStatus="status">
<c:forEach var="entry" items="${ipActiveList }" varStatus="status">
<tr>
<td><a href="#" onclick="openChart();return false"><i class="fa fa-bar-chart"></i></a></td>
<td>${entry.ipAddr }</td>
<td>${entry.areaId }</td>
<td>${entry.linkNum }</td>
@@ -56,7 +57,8 @@
<td>${entry.s2cPktNum }</td>
<td>${entry.c2sByteLen }</td>
<td>${entry.s2cByteLen }</td>
<td><fmt:formatDate value="${entry.statTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
<td>${entry.statTime }</td>
<%-- <td><fmt:formatDate value="${entry.statTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td> --%>
</tr>
</c:forEach>
</tbody>
@@ -68,48 +70,61 @@
</div>
</div>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
<%-- <script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/themes/grid.js"></script> --%>
<script type="text/javascript">
$(document).ready(function(){
ipActiveMinuteList()
});
function showIpActiveChart(rs){
console.log(rs)
var data=new Array();
var xData=new Array();
xData=rs[0].statTime;
var series=new Array();
$(rs).each(function(i, d) {
series.push({
name: d.ipAddr,
data: d.linkNum
});
})
var chart = Highcharts.chart('chart', {
title: {
text: 'Traffic IP Active Total'
text: null
},
xAxis: {
type:'category',
categories: xData,
title: {
text: 'time',
align:'high',
},
// labels:{
// formatter:function(){
// if(this.value.length>15){
// return '<span>'+this.value.substring(10,20)+"..."+'</span>'
// }else{
// return this.value
// }
// },
// }
},
yAxis: {
title: {
text: 'IP'
text: 'linkNumber'
}
},
credits:{//是否有highcharts水印
enabled:false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
series: series,
responsive: {
rules: [{
@@ -127,22 +142,24 @@ $(document).ready(function(){
}
});
});
function showIpActiveChart(){
}
function openChart(){
var url = "${ctx}/traffic/showChart";
windowOpen(url, "", 900, 600);
// lay.open({
// type:1,
// area:['420px','240px'],
// content:''
// })
}
//活跃IP一小时间隔五分钟统计
function ipActiveMinuteList(){
$.ajax({
url: '${ctx}/dashboard/ipActiveMinuteList',
type : "get" ,
dataType:"json",
cache:false,async:true,
success:function (rs) {
showIpActiveChart(rs);
},
error: function(data, textStatus, errorThrown){
// warning_prompt("获取实时列表数据失败!",1500);
}
});
}
</script>
</body>
</html>

View File

@@ -48,13 +48,13 @@
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
<form:select path="action" class="selectpicker select2 input-small">
<form:select path="service" class="selectpicker select2 input-small">
<form:option value=""><spring:message code="action"/></form:option>
<c:forEach items="${serviceList}" var="service"
varStatus="satus">
<%-- <c:forEach items="${fns:getDictList('SERVICE_ACTION') }" var="dict"> --%>
<c:if test="${(service.action ne 128) && (service.action ne 32) && (service.action ne 96)}">
<form:option value="${service.action}"><spring:message code="${service.serviceName}"/></form:option>
<form:option value="${service.serviceId}"><spring:message code="${service.serviceName}"/></form:option>
</c:if>
<%-- </c:forEach> --%>
</c:forEach>

View File

@@ -172,7 +172,7 @@ $(document).ready(function(){
<th><spring:message code='found_time'/></th>
<th><spring:message code='entrance'/></th>
<th><spring:message code='access_url'/></th>
<th><spring:message code='protocol'/></th>
<th><spring:message code='stream_media_protocol'/></th>
<th><spring:message code='clj_ip'/></th>
<th><spring:message code='transport_layer_protocol'/></th>

View File

@@ -62,7 +62,7 @@
<%-- <li class="active"><a href="${ctx}/sys/office/list?id=${sysOffice.id}&parentIds=${sysOffice.parentIds}">机构列表</a></li> --%>
<%-- <shiro:hasPermission name="sys:office:edit"><li><a href="${ctx}/sys/office/form?parent.id=${sysOffice.id}">机构添加</a></li></shiro:hasPermission> --%>
<!-- </ul> -->
<div class="table-responsive">
<div class="">
<sys:message content="${message}"/>
<table id="treeTable" class="table table-striped table-bordered table-condensed">
<thead><tr><th><spring:message code="org_name"/></th><th><spring:message code="belong_area"/></th><th><spring:message code="org_coding"/></th><th><spring:message code="level"/></th><th><spring:message code="org_type"/></th><th><spring:message code="org_duty_type"/></th><th><spring:message code="remarks"/></th><shiro:hasPermission name="sys:office:edit"><th><spring:message code="operation"/></th></shiro:hasPermission></tr></thead>

View File

@@ -21,12 +21,12 @@ p{
display: inline-block;
}
.data_content .data_info .info_2{
width: 60%;
width: 70%;
height: 110px;
}
.data_content .data_info .fr_fc{
width: 155%;
width: 100%;
height: 110px;
border: 1px solid #303030;
border-width: 0 1px;
@@ -55,7 +55,7 @@ p{
}
.data_content .data_info .info_1{
width: 40%;
width: 30%;
height: 110px;
}
.data_content .data_info .info_2 .fr_fc:first-child{
@@ -82,7 +82,7 @@ p{
} */
.data_content .data_info>div.info_2>.text_2>div{
width: 33.333%;
width: 20%;
position: relative;
}
.data_content .data_info>div.info_1>div>div,
@@ -134,6 +134,18 @@ p{
color:#288dce;
margin-top: 2.1em;
}
.data_content .data_info .info_2 .fr_fc .numberRun5{
font-weight: 600;
font-size: 16px;
color:#288dce;
margin-top: 2.1em;
}
.data_content .data_info .info_2 .fr_fc .numberRun6{
font-weight: 600;
font-size: 16px;
color:#288dce;
margin-top: 2.1em;
}
.data_content .data_info .info_2 .fr_fc .numberRun{
font-weight: 600;
font-size: 16px;
@@ -153,9 +165,11 @@ p{
margin-top: 0.6px;
}
.data_content .data_info>div.info_1 .fl_fc .csNum{
font-size: 12px;
font-size: 11px;
color:#337ab7 !important;
margin-top: 1px;
margin-top: -6px;
text-align: center;
margin-left: 1.3px;
}
/* .data_info{
float: right;