gfwleak/k18-ntcs-web-ntc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
develop

Conflicts:
	src/main/resources/nis.properties
This commit is contained in:
段冬梅
2018-12-12 12:00:23 +08:00
parent c3541d91e9 606f8412ee
commit bf41430eb2
127 changed files with 8576 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/main/webapp/WEB-INF/views/dashboard/trafficActionTransList.jsp
View File

@@ -52,6 +52,9 @@ function showActionTransChart(rs){
});
})
var chart = Highcharts.chart('chart', {
chart:{
type: 'area',
},
exporting: {
filename:'Action-Trans',
scale:1,
@@ -77,6 +80,17 @@ function showActionTransChart(rs){
credits:{//是否有highcharts水印
enabled:false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
// legend: {
// layout: 'vertical',
// align: 'right',

267
src/main/webapp/WEB-INF/views/dashboard/trafficBandwidthList.jsp
View File

@@ -20,54 +20,62 @@
<spring:message code="traffic"></spring:message>
</h3>
<h5 class="page-header"></h5>
<div class="row" >
<form:form id="searchForm" action="${ctx}/dashboard/traffic/protocolTypeList" method="get" class="form-search">
<!-- 搜索内容与操作按钮栏 -->
<div class="col-md-12">
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="begin_date"/></span>
</div>
<input id="beginDate" name="beginDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
</div>
</div>
<div class="pull-left">
<div class="input-group">
<div class="input-group-btn">
<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
</div>
<input id="endDate" name="endDate" type="text" readonly="readonly" class="form-control Wdate input-medium"
value="" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
</div>
</div>
<div class="pull-left">
<button type="button" class="btn blue" onClick="return searchList()"> <i class="fa fa-search"></i> <spring:message code="search"/> </button>
<button type="button" class="btn btn-default" id="resetBtn" > <i class="fa fa-refresh"></i> <spring:message code="reset"/> </button>
</div>
</div>
<!-- 搜索内容与操作按钮栏 -->
</form:form>
</div>
<br>
<div class="row">
<!-- <div class="col-md-3" style="padding-right: 1px; ">
<div class="panel panel-default">
<div class="panel-body" style="height: 500px;">
<h5 class="ng-binding">Bandwidth Data</h5>
<div id="deviceRank" class="drank hm-scroll">
<table>
<tbody>
ngRepeat: item in rankItems
<tr class="dtr active" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding" style="">Total</span></td>
<td class="dtd2"><span class="tz" style="width: 100%; max-width: 100px;"></span></td>
<td class="dtd3"><span class="dy ng-binding1">234567891</span></td>
</tr>
end ngRepeat: item in rankItems
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding">c2s</span></td>
<td class="dtd2"><span class="tz tz-from" style="width: 86.55%; max-width: 100px;"></span></td>
<td class="dtd3"><span class="dy ng-binding2">123456789</span></td>
</tr>
end ngRepeat: item in rankItems
<tr class="dtr" onClick="rankItemChanged(id, name)" style="">
<td class="dtd1"><span class="ng-binding">s2c</span></td>
<td class="dtd2"><span class="tz tz-to" style="width: 5.59%; max-width: 100px;"></span></td>
<td class="dtd3"><span class="dy ng-binding3">1234</span></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div> -->
<div class="col-md-12">
<select id="unitType" class="selectpicker select2 input-small">
<option value="Gbps">Gbps</option>
<option value="pps">pps</option>
<option value="linkNumber"><spring:message code="link_num"/>/S</option>
</select>
<br>
<div id="trend" style="height: 480px; position: relative;" >
<div style="position: relative;">
<div id="chart" style="width:97%;height:480px;"></div>
</div>
</div>
<select id="unitType" class="selectpicker select2 input-small">
<option value="Gbps">Gbps</option>
<option value="pps">pps</option>
<option value="linkNumber"><spring:message code="link_num"/>/S</option>
</select>
<br>
<div id="trend" style="height: 500px; position: relative;" >
<div style="position: relative;">
<div id="chart1" style="width:97%;height:500px;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="trend" style="height: 500px; position: relative;" >
<div style="position: relative;">
<div id="chart2" style="width:97%;height:500px;"></div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/pages/css/bandwidth.css" type="text/css" />
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/highcharts.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/highcharts/js/exporting.js"></script>
@@ -76,37 +84,51 @@
<script type="text/javascript">
$(document).ready(function(){
var unitType=$("#unitType").val();
changeBandwidth(unitType);
var start=$("#beginDate").val();
var end=$("#endDate").val();
changeBandwidth(unitType,start,end);
changeBandwidth2(unitType,start,end);
$("#unitType").on("change",function(){
changeBandwidth($("#unitType").val());
changeBandwidth($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
changeBandwidth2($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
});
setInterval(function(){
changeBandwidth($("#unitType").val());
changeBandwidth($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
changeBandwidth2($("#unitType").val(),$("#beginDate").val(),$("#endDate").val());
},500000);// 五分钟调用一次
//筛选功能初始化
$("#resetBtn").on("click",function(){
$("select.selectpicker").each(function(){
$(this).selectpicker('val',$(this).find('option:first').val());
$(this).find("option").attr("selected",false);
$(this).find("option:first").attr("selected",true);
});
$(".Wdate").attr("value",'');
$("#searchForm")[0].reset();
});
});
function ajaxBandwidth(){
}
//点击列表显示统计图
function clickTrShowChart(response){
$("tbody .dtr").on("click",function(){
$("tbody tr").removeClass("active");
$(this).addClass("active");
showBandwidthChart();//
})
function searchList(){
var start=$("#beginDate").val();
var end=$("#endDate").val();
changeBandwidth($("#unitType").val(),start,end);
changeBandwidth2($("#unitType").val(),start,end);
}
// 默认显示四条线 ip46,tcp,udp
function rankItemChanged(addrType,transType){
function rankItemChanged(addrType,transType,beginDate,endDate){
loading();
var result=null;
$.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTrans",
type:"get",
data:{"addrType":addrType,"transType":transType},
data:{"addrType":addrType,"transType":transType,"beginDate":beginDate,"endDate":endDate},
dataType:"json",
async:false,
timeout:10000,
timeout:40000,
success:function (data){
if(data!=null){
result=(data)
@@ -122,12 +144,38 @@ function rankItemChanged(addrType,transType){
});
return result;
}
// 默认显示四条线 ip46,tcp,udp
function rankItemChanged2(addrType,transType,beginDate,endDate){
loading();
var result2=null;
$.ajax({
url:"${ctx}/dashboard/traffic/bandwidthTransTwo",
type:"get",
data:{"addrType":addrType,"transType":transType,"beginDate":beginDate,"endDate":endDate},
dataType:"json",
async:false,
timeout:40000,
success:function (data){
if(data!=null){
result2=(data)
}
closeTip();
},
error: function(data, textStatus, errorThrown){
closeTip();
},
complete:function(XMLHttpRequest,status){//超时设置
closeTip();
}
});
return result2;
}
// 根据单位切换数据
function changeBandwidth(unitType){
var ipv4=rankItemChanged(4,null);
var ipv6=rankItemChanged(6,null);
var transTcp=rankItemChanged(null,6);
var transUdp=rankItemChanged(null,17);
function changeBandwidth(unitType,beginDate,endDate){
var ipv4=rankItemChanged(4,null,beginDate,endDate);
var ipv6=rankItemChanged(6,null,beginDate,endDate);
var transTcp=rankItemChanged(null,6,beginDate,endDate);
var transUdp=rankItemChanged(null,17,beginDate,endDate);
var xdata=ipv4.statTime;
if(unitType=="Gbps"){
ipv4data=ipv4.gbps;
@@ -162,13 +210,60 @@ function changeBandwidth(unitType){
name: "UDP",
data: udpdata
});
showBandwidthChart(unitType,xdata,series);
showBandwidthChart("chart1",unitType,xdata,series,"Astana");
}
// 根据单位切换数据
function changeBandwidth2(unitType,beginDate,endDate){
var ipv4=rankItemChanged2(4,null,beginDate,endDate);
var ipv6=rankItemChanged2(6,null,beginDate,endDate);
var transTcp=rankItemChanged2(null,6,beginDate,endDate);
var transUdp=rankItemChanged2(null,17,beginDate,endDate);
var xdata=ipv4.statTime;
if(unitType=="Gbps"){
ipv4data=ipv4.gbps;
ipv6data=ipv6.gbps;
tcpdata=transTcp.gbps;
udpdata=transUdp.gbps;
}
if(unitType=="pps"){
ipv4data=ipv4.pps;
ipv6data=ipv6.pps;
tcpdata=transTcp.pps;
udpdata=transUdp.pps;
}
if(unitType=="linkNumber"){
ipv4data=ipv4.linkNum;
ipv6data=ipv6.linkNum;
tcpdata=transTcp.linkNum;
udpdata=transUdp.linkNum;
}
var series=new Array();
series.push({
name: "IPv4",
data: ipv4data
},{
name: "IPv6",
data: ipv6data
},{
name: "TCP",
data: tcpdata
},{
name: "UDP",
data: udpdata
});
showBandwidthChart("chart2",unitType,xdata,series,"Alamty");
}
/* 网络带宽时间维度趋势图 */
function showBandwidthChart(unitType,xdata,ydata){
var chart = Highcharts.chart('chart', {
function showBandwidthChart(id,unitType,xdata,ydata,title){
var chart = Highcharts.chart(id, {
chart:{
type: 'area',
zoomType: 'x'
},
title: {
text: null
text: title
},
navigation: {
buttonOptions: {
@@ -185,18 +280,46 @@ function showBandwidthChart(unitType,xdata,ydata){
yAxis: {
title: {
text: unitType
}
},
tickmarkPlacement: 'on',
min:0
},
legend: {
enabled:true
},
xAxis:{
type:'datetime',
type: 'datetime',
tickmarkPlacement: 'on',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%Y-%m',
year: '%Y'
},
labels: {
rotation: -45, //倾斜的角度
},
categories: xdata,
},
credits:{//是否有highcharts水印
enabled:false
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: ydata,
});

14
src/main/webapp/WEB-INF/views/dashboard/trafficIpActiveList.jsp
View File

@@ -105,6 +105,9 @@ function showIpActiveChart(rs){
});
})
var chart = Highcharts.chart('chart', {
chart:{
type: 'area',
},
exporting: {
filename:'IP-Active',
scale:1,
@@ -121,6 +124,17 @@ function showIpActiveChart(rs){
text: 'time',
align:'high',
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
// labels:{
// formatter:function(){
// if(this.value.length>15){

2
src/main/webapp/WEB-INF/views/dashboard/trafficProtocolTypeList.jsp
View File

@@ -40,7 +40,7 @@
<span class="selectpicker form-control" ><spring:message code="end_date"/></span>
</div>
<input id="searchFoundEndTime" name="searchFoundEndTime" type="text" readonly="readonly" class="form-control Wdate input-medium"
value="${searchFoundStartTime}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
value="${searchFoundEndTime}" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:true});"/>
</div>
</div>

597
src/main/webapp/WEB-INF/views/login.jsp
View File

@@ -6,122 +6,166 @@
<!--[if IE 8]> <html class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Login</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/pages/img/logo.ico" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="${pageContext.request.contextPath}/static/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="${pageContext.request.contextPath}/static/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="${pageContext.request.contextPath}/static/pages/css/login.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
<title>NTC</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- basic styles -->
<body class="">
<div class="page-login">
<div class="page-logo">
<img src="${pageContext.request.contextPath}/static/pages/img/logo1.png" alt="logo" />
</div>
<div class="page-body">
<div class="login-head"> <spring:message code='login'/> </div>
<div class="login-body">
<div class="pull-left login-avatar-block">
<img src="${pageContext.request.contextPath}/static/pages/img/login-02.png" class="login-avatar"> </div>
<form id="loginForm" class="login-form pull-left" action="${pageContext.request.contextPath }/login" method="post">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control placeholder-no-fix " value="${username}" placeholder="<spring:message code='fill_loginName'/>"/>
</div>
<div class="form-group">
<input type="password" class="form-control placeholder-no-fix " id="password" name="password" placeholder="<spring:message code='fill_loginPassWord'/>"/>
</div>
<%-- <c:if test="${not empty isValidateCodeLogin or isValidateCodeLogin==true}">
<li class="yzm ${ (empty isValidateCodeLogin or isValidateCodeLogin==false) ?'hide':'' }">
<span><input id="captcha" name="captcha" class="required" type="text" placeholder="验证码"/></span><cite><img alt="未获取验证码" src="${pageContext.request.contextPath}/captcha-image" id="captacha_image" class="mid"/></cite>
</li>
</c:if>
<li><input type="submit" class="loginbtn" value="登录"/>
<label><input id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} type="checkbox" />记住我（公共场所慎用）</label>
</li> --%>
<div class="form-actions">
<button type="submit" class="btn red uppercase"><spring:message code='login'/></button>
</div>
</form>
</div>
<div class="login-bottom">
<!-- <a href="">Not Amanda Smith?</a> -->
</div>
<link href="${pageContext.request.contextPath}/static/login/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/font-awesome.min.css" />
</div>
<p>
<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
<label id="loginError" class="error"><spring:message code="${message}"></spring:message></label>
</div>
</p>
<!-- <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" /> -->
<!-- ace styles -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace-rtl.min.css" />
<style type="text/css">
.row{
margin-left: 0px;
margin-right: 0px;
}
body{
max-height:1080px;
max-width:1920px;
background-color:rgba(255,255,255,0);
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/backimg.png");
background-repeat:no-repeat;
background-size: cover;
color: white;
/* width: 1920px;
height: 1080px; */
}
.input-icon input{
outline:0;
height:2.7em;
border:none;
background-color: rgba(255,255,255,0);
color: white;
}
.input-icon input:focus {
border:none;
background-color: rgba(255,255,255,0);
background-color: rgba(255,255,255,0);
color: white;
}
.main_left{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/two/login_03.png");
background-repeat:no-repeat;
background-size:contain;
max-height: 695px;
max-width: 905px;
}
.main_right{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/login/login_06.png");
background-repeat:no-repeat;
background-size: 100% 100%;
max-height: 501px;
max-width: 439px;
}
.box_chart{
</div>
<div class="page-footer-custom">
CEIEC All Rights Reserved，CEIEC &copy;
<%-- Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} <a href="${pageContext.request.contextPath}">${fns:getStringProperty('productName','NIS')}</a> - Powered By <a href="${pageContext.request.contextPath}" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0.0')} --%>
</div>
<!--[if lt IE 9]>
}
#ntc_chart{
height: 280px;
}
#ntc_chart img{
width: 300px;
height: 260px;
}
.foot{
position: absolute;
bottom: 0px;
left: 50%;
}
#messageBox{
position: absolute;
background-color: #2c3038;
border: 1px solid #545866;
border-radius: 10px;
}
</style>
</head>
<body class="login-layout" style="height: 100%;overflow: hidden">
<div class="main-container" style="height: 100%;">
<div class="row" style="height: 100%">
<div class="col-sm-12" style="height: 100%">
<div class="col-sm-7" style="height: 100%;padding-top: 6%;">
<div class="main_left" style="height: 100%">
<div class="box_chart">
<div id="ntc_chart">
</div>
</div>
</div>
</div>
<div class="col-sm-4" style="height: 100%;padding-top: 10%;padding-bottom: 5%;">
<div class="main_right" style="height: 100%">
<div class="widget-main" style="height: 100%">
<form style="margin: 160px 50px 0px 50px;" id="loginForm" action="${pageContext.request.contextPath }/login" method="post">
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-left" style="border-bottom:1px solid #565656;">
<i class="icon-user" style="padding-top: 4px;"></i>
<input id="username" type="text" name="username" class="form-control" value="${username}" placeholder="<spring:message code='fill_loginName'/>" style="padding-left: 30px;"/>
</span>
</label>
<label class="block clearfix" style="margin-top: 35px;">
<span class="block input-icon input-icon-left" style="border-bottom:1px solid #565656;">
<i class="icon-lock" style="padding-top: 4px;"></i>
<input id="password" type="password" name="password" class="form-control" placeholder="<spring:message code='fill_loginPassWord'/>" style="padding-left: 30px;"/>
</span>
</label>
<div class="space"></div>
<div class="clearfix" style="text-align: center;margin-top: 24%;">
<button type="submit" style="background-color: #4697d7!important;border-radius: 5px;" class="width-40 btn btn-sm btn-primary uppercase">
<spring:message code='login'/>
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
</div><!-- /widget-main -->
<p class="messageBox" style="margin-top:0px;" align="center">
<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
<label id="loginError" class="error" style="width:410px;text-align: center"><spring:message code="${message}"></spring:message></label>
</div>
</p>
</div><!-- /widget-body -->
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.main-container -->
<div class="foot">
<span>CEIEC All Rights Reserved, CEIEC © </span>
</div>
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/static/global/plugins/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.method.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/scripts/jeesite.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="${pageContext.request.contextPath}/static/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<!-- END THEME LAYOUT SCRIPTS -->
<script type="text/javascript">
<!-- END CORE PLUGINS --> <script type="text/javascript">
$(document).ready(function(){
$("#loginForm").validate({
rules: {
username: { required: true},
@@ -154,6 +198,361 @@
});
</script>
</body>
<script type="text/javascript">
window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
</html>
<script src="${pageContext.request.contextPath}/static/login/echarts/echarts.min.js"></script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
var bodyHeight = window.screen.height;
$("body").height(bodyHeight+"px");
$("#ntc_chart").height((bodyHeight-200)+"px");
$("#ntc_chart").width($(".main_left").width()+"px");
var lineheight_y = 346;
var lineheight_y2 = 724;
var lineheight_x2 = 761;
var lineheight_x = 346;
if(bodyHeight >800){
lineheight_y = 394;
lineheight_x = 358;
lineheight_y2 = 705;
lineheight_x2 = 834;
}
var lines_Chart_chu = echarts.init(document.getElementById('ntc_chart'));
/* 数据流出 */
var lines_chu = [
/* 出端 */
{
coords: [
[lineheight_x2-35, lineheight_y2+70],
[1000, 968]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-35, lineheight_y2+70],
[961, 941]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-35, lineheight_y2+70],
[967, 868]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[973, 818]
],
effect: {
period: 0.4,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[967, 868]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[935, 952]
],
effect: {
period: 0.4,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[967, 868]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2, lineheight_y2],
[927, 978]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-69, lineheight_y2+100],
[927, 978]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[lineheight_x2-75, lineheight_y2+110],
[987, 1100]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
/* 左下 */
{
coords: [
[68, 83],
[388, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 143],
[368, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[68, 73],
[368, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[68, 273],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#119dd8'
}
}
},
{
coords: [
[28, 373],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[248, 73],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[192, 105],
[lineheight_x, lineheight_y]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#d29781'
}
}
},
{
coords: [
[11, 216],
[lineheight_x, lineheight_y]
],
effect: {
period: 1,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
{
coords: [
[321, 87],
[lineheight_x+20, lineheight_y -30]
],
effect: {
period: 0.5,
},
lineStyle: {
normal: {
color: '#ebf546'
}
}
},
]
var line_chu_option = {
backgroundColor: 'rgba(255,255,255,0)',
grid:{
top: 10,
bottom: 10,
left: 10,
right: 10,
},
xAxis: {
show: false,
min: 0,
max: 1000,
position: 'top',
axisPointer: {
show: false
}
},
yAxis: {
show: false,
min: 0,
max: 1000,
axisPointer: {
show: false
}
},
// 线条动画
series: [
{
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
// 动画效果
effect: {
show: true,
period: 4, //特效动画的时间，单位为 s
trailLength: 0.5, //特效尾迹的长度。0~1数值越大尾迹越长
//color: '#d29781',
symbolSize: 6
},
lineStyle: {
normal: {
color: '#BF3EFF',
width: 0,
curveness: 0
}
},
data: lines_chu
}
],
};
lines_Chart_chu.setOption(line_chu_option);
</script>
</body>
</html>

159
src/main/webapp/WEB-INF/views/login.jsp.bak Normal file
View File

@@ -0,0 +1,159 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Login</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/pages/img/logo.ico" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="${pageContext.request.contextPath}/static/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="${pageContext.request.contextPath}/static/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="${pageContext.request.contextPath}/static/pages/css/login.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
<body class="">
<div class="page-login">
<div class="page-logo">
<img src="${pageContext.request.contextPath}/static/pages/img/logo1.png" alt="logo" />
</div>
<div class="page-body">
<div class="login-head"> <spring:message code='login'/> </div>
<div class="login-body">
<div class="pull-left login-avatar-block">
<img src="${pageContext.request.contextPath}/static/pages/img/login-02.png" class="login-avatar"> </div>
<form id="loginForm" class="login-form pull-left" action="${pageContext.request.contextPath }/login" method="post">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control placeholder-no-fix " value="${username}" placeholder="<spring:message code='fill_loginName'/>"/>
</div>
<div class="form-group">
<input type="password" class="form-control placeholder-no-fix " id="password" name="password" placeholder="<spring:message code='fill_loginPassWord'/>"/>
</div>
<%-- <c:if test="${not empty isValidateCodeLogin or isValidateCodeLogin==true}">
<li class="yzm ${ (empty isValidateCodeLogin or isValidateCodeLogin==false) ?'hide':'' }">
<span><input id="captcha" name="captcha" class="required" type="text" placeholder="验证码"/></span><cite><img alt="未获取验证码" src="${pageContext.request.contextPath}/captcha-image" id="captacha_image" class="mid"/></cite>
</li>
</c:if>
<li><input type="submit" class="loginbtn" value="登录"/>
<label><input id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} type="checkbox" />记住我（公共场所慎用）</label>
</li> --%>
<div class="form-actions">
<button type="submit" class="btn red uppercase"><spring:message code='login'/></button>
</div>
</form>
</div>
<div class="login-bottom">
<!-- <a href="">Not Amanda Smith?</a> -->
</div>
</div>
<p>
<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
<label id="loginError" class="error"><spring:message code="${message}"></spring:message></label>
</div>
</p>
</div>
<div class="page-footer-custom">
CEIEC All Rights Reserved，CEIEC &copy;
<%-- Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} <a href="${pageContext.request.contextPath}">${fns:getStringProperty('productName','NIS')}</a> - Powered By <a href="${pageContext.request.contextPath}" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0.0')} --%>
</div>
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/static/global/plugins/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.method.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/scripts/jeesite.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="${pageContext.request.contextPath}/static/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<!-- END THEME LAYOUT SCRIPTS -->
<script type="text/javascript">
$(document).ready(function(){
$("#loginForm").validate({
rules: {
username: { required: true},
password: { required: true},
captcha: {remote: "${pageContext.request.contextPath}/validateCode"}
},
messages: {
username: {required: '<spring:message code="fill_loginName"/>...'},password: {required: '<spring:message code="fill_loginPassWord"/>...'},
captcha: {remote: '<spring:message code="captcha_error"/>...', required: '<spring:message code="enter_captcha"/>...'}
},
errorLabelContainer: "#messageBox",
errorPlacement: function(error, element) {
error.appendTo($("#loginError").parent());
}
});
// 如果在框架或在对话框中，则弹出提示并跳转到首页
if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
top.$.jBox.confirm("<spring:message code='login_timeout'/>","<spring:message code='info'/>",function(v,h,f){
if(v=="ok"){
top.location = "${pageContext.request.contextPath }";
}else{
top.location = "${pageContext.request.contextPath }";
}
},{buttonsFocus:1});
top.$('.jbox-body .jbox-icon').css('top','55px');
}
});
</script>
</body>
</html>

561
src/main/webapp/WEB-INF/views/newIndex.jsp Normal file
View File

@@ -0,0 +1,561 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NTC</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- basic styles -->
<link href="${pageContext.request.contextPath}/static/login/assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace.min.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/login/assets/css/ace-rtl.min.css" />
<!-- 数字特效 -->
<link href="${pageContext.request.contextPath}/static/login/numbergd/css/globle.css" rel="stylesheet">
<!-- 数字特效 -->
<style type="text/css">
.row{
margin-left: 0px;
margin-right: 0px;
}
body{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/back.png");
background-repeat:no-repeat;
background-color:#181818;
-moz-background-size:100% 100%;
/* min-width: 1920px;
min-height: 1000px; */
}
.page-sidebar-closed{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/back.png");
background-repeat:no-repeat;
background-color:#181818;
-moz-background-size:100% 100%;
/* min-width: 1920px;
min-height: 1000px; */
}
.main-container:after{
background-color:rgba(255,255,255,0);
}
.main-container{
padding: 40px 0px;
}
.main-container-inner{
background-image: url("${pageContext.request.contextPath}/static/login/assets/images/main/main_03.png");
background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
width: 1890px;
height: 976px;
}
.box_chart_flow{
position:relative;
width: 290px;
left: 17%;
top: 57%;
}
#ntc_flow{
height: 250px;
-webkit-transform: rotate(28deg) skewX(28deg);
}
.flow_gif{
position:absolute;
z-index: 12;
top: -238%;
left: -57%;
width: 1900px;
height: 1000px;
}
.rubbish_gif{
position:absolute;
z-index: 12;
top: -237%;
left: -51%;
width: 1900px;
height: 1000px;
}
.dataNums .tt span{width:100%;height:100%; font:bold 24px/75px "Arial";color:#ddf0ff;}
.dataNums .dataOne{ width:24px; height:54px; margin: 0px -4px; text-align: center; background: url(${pageContext.request.contextPath}/static/login/numbergd/images/num-bg1.png) no-repeat;}
.box_log_bar{
position:relative;
width: 260px;
top: 24%;
left: 30%;
}
#ntc_log_bar{
height: 160px;
-webkit-transform: rotate(28deg) skewX(28deg);
}
</style>
</head>
<body id="body_back">
<div class="main-container" id="main-container">
<div class="main-container-inner">
<div class="row" style="height: 100%;">
<div class="col-sm-12" style="height: 100%;">
<div class="col-sm-3" style="height: 100%;">
<div class="box_chart_flow">
<div id="ntc_flow">
</div>
<%-- <img alt="流量" class="flow_gif" src="${pageContext.request.contextPath}/static/login/assets/gif/flow.gif">
<img alt="rubbish" class="rubbish_gif" src="${pageContext.request.contextPath}/static/login/assets/gif/rubbish.gif">
--%>
</div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-2">
<div style="font-size: 14px;color:#fff; position: absolute;top: 48.8%;left: 70%;display: none;">条</div>
<div id="dataNums" style="margin-top: 285%; margin-left: 17px;"></div>
</div>
<div class="col-sm-3" style="height: 100%;">
<div class="row" style="height: 100%;">
<div class="col-sm-12" style="height: 100%;">
<div class="box_log_bar">
<div id="ntc_log_bar">
</div>
</div>
<!-- <div class="col-sm-6">
<div class="box_log_pie">
<div id="ntc_log_pie">
</div>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div><!-- /.main-container-inner -->
</div><!-- /.main-container -->
<!-- basic scripts -->
<script type="text/javascript">
window.jQuery || document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery-2.0.3.min.js'>"+"<"+"script>");
</script>
<script type="text/javascript">
if("ontouchend" in document) document.write("<script src='${pageContext.request.contextPath}/static/login/assets/js/jquery.mobile.custom.min.js'>"+"<"+"script>");
</script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/typeahead-bs2.min.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.easy-pie-chart.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/jquery.sparkline.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.pie.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/flot/jquery.flot.resize.min.js"></script>
<!-- ace scripts -->
<script src="${pageContext.request.contextPath}/static/login/assets/js/ace-elements.min.js"></script>
<script src="${pageContext.request.contextPath}/static/login/assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script src="${pageContext.request.contextPath}/static/login/echarts/echarts.min.js"></script>
<!-- 数字特效 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/static/login/numbergd/js/index.js"></script>
<!-- 数字特效 -->
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: '${ctx}/newIndex/ntcEntranceReport',
type : "get" ,
dataType:"json",
cache:false,
async:true,
timeout:10000,//超时时间设置，查询接口时间过长超时
success:function (rs) {
$(rs).each(function(i, d) {
var time=[];
var resultData=[];
time.push({
x: d.reportTime,
});
resultData.push({
name: "",
y: d.sum,
});
});
line();
},
complete:function(XMLHttpRequest,status){//超时设置
}
});
});
function line(time,resultData){
setInterval(function() {
timeData.shift();
timeData.push(timeSet(-1));
data.shift();
data.push(randomData());
myChart.setOption({
backgroundColor: "rgba(255,255,255,0)",
xAxis: {
data: timeData
},
series: [{
data: data
}]
});
}, 5000);
}
/* 流量折线图 */
var myChart = echarts.init(document.getElementById('ntc_flow'));
var log_bar_Chart = echarts.init(document.getElementById('ntc_log_bar'));
// 颜色
var lightBlue = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 192, 255, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(0, 192, 255, 0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
var darkBlue = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(41, 121, 255, 0.1)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
function randomData() {
value = Math.random() * 1000;
return {
value: Math.round(value)
}
}
// 时间设置
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function timeSet(i) {
var newTime = new Date();
var h = newTime.getHours(); ;
var m = newTime.getMinutes();
var s = newTime.getSeconds();
if(i != -1){
i = i +1;
s = s - i*5;
if(s<0){
m = m - 1;
s = 60 - Math.abs(s);
}
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
return [h, m].join(':')+"'"+s+"''";
}
var data = [];
var timeData = [];
for (var i = 0; i < 5; i++) {
timeData.unshift(timeSet(i));
data.unshift(randomData());
}
// 指定图表的配置项和数据
var option = {
backgroundColor: "rgba(255,255,255,0)",
tooltip: {
show: false
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#4bbbf8',
shadowColor: 'rgba(75, 211, 255, 0.5)',
shadowBlur: 5
}
},
axisLabel: {
color: '#fff',
fontSize: 12
},
splitLine: {
show: false
},
data: timeData,
},
yAxis: [{
min: 0,
axisLine: {
lineStyle: {
color: '#4bbbf8',
shadowColor: 'rgba(75, 211, 255, 0.5)',
shadowBlur: 5
}
},
axisLabel: {
color: 'white',
fontSize: 12
},
splitLine: {
lineStyle: {
color: 'rgba(75, 211, 255, 0.5)',
type: 'dashed'
}
}
}],
series: [{
name: '数量',
type: 'line',
smooth: true,
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 14
},
itemStyle: {
color: function(params) {
return params.dataIndex % 2 ? darkBlue : lightBlue;
}
},
areaStyle: { //区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(61,234,255, 0.9)'},
{ offset: 0.7, color: 'rgba(61,234,255, 0)'}
], false),
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}
},
data: data
}],
};
myChart.setOption(option);
/* 日志柱状图 */
var bar_option = {
//color: ['#3398DB'],
tooltip: {
trigger: 'axis',
backgroundColor:'rgba(255,255,255,0.8)',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
textStyle:{
color:'#6a717b',
},
},
grid: {
left: '3%',
right: '15%',
bottom: '3%',
top:'15%',
containLabel: true
},
legend: {
show:false,
textStyle:{
color:'#fff',
},
data: ['日志']
},
yAxis: [{
type: 'category',
data: ['12时','11时','10时','09时','08时'],
inverse: true,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
margin: 5,
textStyle: {
fontSize: 12,
color:'#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
}, {
type: 'category',
data: [],
axisLabel: {
show: false,
color: '#fff',
fontSize: 14,
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
axisTick: {
show: false
},
}],
xAxis: [{
type: 'value',
name: '',
position:'top',
max:8000000,
axisLabel: {
textStyle: {
fontSize: 12,
color:'#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
formatter: (value, index) => {
return value/10000
},
},
splitLine: {
show:false,
lineStyle: {
color: '#fff'
}
}
}],
backgroundColor: 'rgba(255,255,255,0)',
series: [{
name: '日志',
type: 'bar',
data: [7827896, 7472072, 7433391, 7137253, 6382192],
label: {
normal: {
show: true,
formatter: (param) => {
return (param.value/10000).toFixed(2);
},
position: 'insideRight',
textStyle: {
color: 'white' //color of value
}
}
},
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#fac28f' // 0% 处的颜色
}, {
offset: 1,
color: '#fc867a' // 100% 处的颜色
}], false),
//barBorderRadius: [0,10,10,0],
borderWidth: 10,
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(105,123, 214, 0.7)'
}
},
barWidth: '50%',
},
{
type: 'bar',
yAxisIndex: 1,
// barGap: '-100%',
data: [8000000, 8000000, 8000000, 8000000, 8000000],
barWidth: 15,
itemStyle: {
color: 'rgba(255,255,255,0.2)',
},
}]
};
log_bar_Chart.setOption(bar_option);
setInterval(function() {
log_bar_Chart.clear();
log_bar_Chart.setOption(bar_option);
}, 5000);
/* 数字特效 */
function animalNum(){
var value = rand(100,999);;
$("#dataNums").rollNum({
deVal:value
});
};
function rand(min,max) {
return Math.floor(Math.random()*(max-min))+min;
}
animalNum();
setInterval('animalNum()',5000);
</script>
</body>
</html>