562 lines
16 KiB
Plaintext
562 lines
16 KiB
Plaintext
<%@ 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>
|
||
|