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

动态页面数据调整

Browse Source
This commit is contained in:
dongxiaoyan
2018-12-20 19:27:39 +08:00
parent 8ad8e9bb35
commit 607671518f
2 changed files with 824 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/main/java/com/nis/web/controller/dynamicpage/DynamicIndexController.java
View File

@@ -101,14 +101,14 @@ public class DynamicIndexController extends BaseController {
String nowString = DateUtils.formatDate(now, "yyyy-MM-dd HH:mm:ss");
String startString = DateUtils.formatDate(start, "yyyy-MM-dd HH:mm:ss");
/*nowString = "2018-12-05 00:00:00";
startString = "2018-12-04 17:00:00";*/
nowString = "2018-12-05 00:00:00";
startString = "2018-12-04 17:00:00";
String url = Constants.LOG_BASE_URL + Constants.TRAFFIC_AREA_STAT;
//String url = "http://localhost:8080/ntc/helloworld/test";
Map<String, Object> params = new HashMap<String, Object>();
params.put("searchReportStartTime", startString);
params.put("searchReportEndTime", nowString);
params.put("baseNum", baseNum);
//params.put("baseNum", baseNum);
try {
String recv = HttpClientUtil.getMsg(url, params, null);
@@ -148,6 +148,17 @@ public class DynamicIndexController extends BaseController {
logger.error("解析出错", e);
results.clear();
}
/*if(results != null && results.size()<1){//伪造数据
results = null;
results = new ArrayList<>();
Map result = null;//new HashMap();
for(int i=0;i<hour*12;i++){
result = null;
result = new HashMap();
result.put("name", "Alamty");
result.put("data", t.get(area));
}
}*/
return results;
}
@@ -174,7 +185,7 @@ public class DynamicIndexController extends BaseController {
params.put("searchReportStartTime", startString);
params.put("searchReportEndTime", nowString);
params.put("searchBusinessType", 1);
params.put("baseNum", baseNum);
//params.put("baseNum", baseNum);
try {
String recv = HttpClientUtil.getMsg(url, params, null);

687
src/main/webapp/WEB-INF/views/dynamicpage/dynamicIndex.jsp
View File

@@ -1,4 +1,4 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
@@ -282,7 +282,6 @@
<!-- </div> -->
<!-- </div> -->
<!-- container-fiuled bootstrap全屏 -->
<div class="main-container" id="main-container">
<div class="main-container-inner">
<!-- <div class="main_qftd">
@@ -433,287 +432,6 @@
}],
globalCoord: false // 缺省为 false
}
function randomData() {
value = Math.random() * 100;
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
},
grid:{
left: 50,
},
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);
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 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'
}
},
}],
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',
barWidth:15,
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%',
zlevel: 11
}]
};
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);
/* 数据流 */
var lines = [
@@ -1132,6 +850,409 @@
],
};
lines_Chart_chu.setOption(line_chu_option);
function getLineOption(n1, n2, d1, d2) {
var option = {
backgroundColor: "rgba(255,255,255,0)",
tooltip: {
show: false
},
grid:{
left: 53,
},
xAxis: {
type: 'time',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#4bbbf8',
shadowColor: 'rgba(75, 211, 255, 0.5)',
shadowBlur: 5
}
},
axisLabel: {
color: '#fff',
fontSize: 12,
formatter: function(value) {
return echarts.format.formatTime('hh:mm:ss', new Date(value));
}
},
splitLine: {
show: false
},
splitNumber: 3
},
yAxis: [{
type: 'value',
min: 0,
axisLine: {
lineStyle: {
color: '#4bbbf8',
shadowColor: 'rgba(75, 211, 255, 0.5)',
shadowBlur: 5
}
},
axisLabel: {
color: 'white',
fontSize: 12,
formatter: function (value, index) {
if (value > 1000 && value <= 1000000) {
return value/1000 + " K";
}
if (value > 10000000 && value <= 1000000000) {
return value/1000000 + " M";
}
if (value > 100000000) {
return value/1000000000 + " B";
}
return value;
}
},
splitLine: {
lineStyle: {
color: 'rgba(75, 211, 255, 0.5)',
type: 'dashed'
}
}
}],
series: [{
name: n1,
type: 'line',
smooth: true,
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 14
},
itemStyle: {
color: function(params) {
return params.dataIndex % 2 ? darkBlue : lightBlue;
}
},
showSymbol: false,
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: d1
},
{
name: n2,
type: 'line',
smooth: true,
showSymbol: false,
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: d2
}]
};
return option;
}
function getBarOption(legData, serData) {
var bar_option = {
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',
inverse: true,
axisTick: {
alignWithLabel: true,
},
axisLabel: {
margin: 5,
textStyle: {
fontSize: 12,
color:'#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
data: legData
}],
xAxis: [{
type: 'value',
name: '',
position:'top',
axisLabel: {
textStyle: {
fontSize: 12,
color:'#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
formatter: function(value) {
if (value > 1000 && value <= 1000000) {
return value/1000 + " K";
}
if (value > 10000000 && value <= 1000000000) {
return value/1000000 + " M";
}
if (value > 100000000) {
return value/1000000000 + " B";
}
return value;
},
},
splitNumber: 4,
splitLine: {
show:false,
lineStyle: {
color: '#fff'
}
}
}],
backgroundColor: 'rgba(255,255,255,0)',
series: [{
name: '日志',
type: 'bar',
barWidth:15,
data: serData,
label: {
normal: {
show: false/* ,
position: 'insideRight',
formatter: function(obj) {
if (obj.value > 1000 && obj.value <= 1000000) {
return (obj.value/1000).toFixed(2) + " K";
}
if (obj.value > 10000000 && obj.value <= 1000000000) {
return (obj.value/1000000).toFixed(2) + " M";
}
if (obj.value > 100000000) {
return (obj.value/1000000000).toFixed(2) + " B";
}
return (obj.value);
},
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%',
zlevel: 11
}]
};
return bar_option;
}
var data = JSON.parse('${trafficData}');
if (data.length > 0) {
var name1 = data[0].name;
var name2 = data[1].name;
var data1 = data[0].data;
var data2 = data[1].data;
var _data1 = [];
var _data2 = [];
for (var i = 0; i < 5; i++) {
_data1.push(data1.shift());
_data2.push(data2.shift());
}
myChart.setOption(getLineOption(name1, name2, _data1, _data2));
setInterval(function() {
if (data1.length == 0 && data2.length == 0) {
$.ajax({
type:'get',
dataType: 'json',
url:"${pageContext.request.contextPath}/nis/dynamicpage/indexTraffic?baseNum=" + top.baseNum,
success:function(res){//处理返回结果
if(res) {
data = res;
name1 = data[0].name;
name2 = data[1].name;
data1 = data[0].data;
data2 = data[1].data;
_data1 = [];
_data2 = [];
for (var i = 0; i < 5; i++) {
_data1.push(data1.shift());
_data2.push(data2.shift());
}
myChart.setOption(getLineOption(name1, name2, _data1, _data2));
}
}
});
} else {
_data1.shift();
_data2.shift();
var data1t = data1.shift();
var data2t = data2.shift();
if (typeof(data1t) != "undefined") {
_data1.push(data1t);
}
if (typeof(data2t) != "undefined") {
_data2.push(data2t);
}
myChart.setOption(getLineOption(name1, name2, _data1, _data2));
}
}, 5000);
}
/* 日志柱状图 */
var logData = JSON.parse('${logData}');
if (logData.length > 0) {
var logDataInit = logData.shift();
var legInit = [];
var serInit = [];
for (var i = 0; i < 5; i++) {
var _serviceId = logDataInit[i][0];
var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
legInit.push(top.indexLogServiceNameArr[_sidIndex]);
serInit.push(logDataInit[i][1]);
}
log_bar_Chart.setOption(getBarOption(legInit, serInit));
setInterval(function() {
var legData = [];
var serData = [];
if (logData.length == 0) {
$.ajax({
type:'get',
dataType: 'json',
url:'${pageContext.request.contextPath}/nis/dynamicpage/indexLog?sid=' + top.indexLogServiceId + "&baseNum=" + top.baseNum,
success:function(res){//处理返回结果
logData = res;
_logData = logData.shift();
for (var i = 0; i < 5; i++) {
var _serviceId = _logData[i][0];
var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
legData.push(top.indexLogServiceNameArr[_sidIndex]);
serData.push(_logData[i][1]);
}
log_bar_Chart.clear();
log_bar_Chart.setOption(getBarOption(legData, serData));
}
});
} else {
var _logData = logData.shift();
for (var i = 0; i < 5; i++) {
var _serviceId = _logData[i][0];
var _sidIndex = top.indexLogServiceIdArr.indexOf(_serviceId);
legData.push(top.indexLogServiceNameArr[_sidIndex]);
serData.push(_logData[i][1]);
}
log_bar_Chart.clear();
log_bar_Chart.setOption(getBarOption(legData, serData));
}
}, 5000);
}
/* 数字特效 */
function animalNum(dropNum){
//var value = rand(100,999);;
$("#dataNums").rollNum({
deVal:dropNum
});
};
function rand(min,max) {
return Math.floor(Math.random()*(max-min))+min;
}
var dropData = JSON.parse('${dropData}');
if (dropData.length > 0) {
var _dropData = dropData[0].data;
animalNum(_dropData.shift());
setInterval(function(){
if (_dropData.length > 0) {
animalNum(_dropData.shift());
} else {
$.ajax({
type:'get',
dataType: 'json',
url:'${pageContext.request.contextPath}/nis/dynamicpage/indexDrop' + "?baseNum=" + top.baseNum,
success:function(res){//处理返回结果
if(res) {
dropData = res;
_dropData = dropData[0].data;
animalNum(_dropData.shift());
}
}
});
}
}, 5000);
}
</script>
</body>
</html>