You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
662 lines
22 KiB
662 lines
22 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ include file="/common/ctx.jsp"%>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>无标题文档</title>
|
|
<link type="text/css" rel="stylesheet" href="${ctx }/css/cjy_style.css" />
|
|
<link type="text/css" rel="stylesheet" href="${ctx }/css/cjy_con.css" />
|
|
|
|
<script src="${ctx}/js/jquery-1.8.3.min.js"></script>
|
|
<script src="${ctx}/js/echarts.js"></script>
|
|
<script type="text/javascript" src="${ctx }/js/numberRun2.js"></script>
|
|
<script type="text/javascript" src="${ctx}/js/lhgdialog/lhgdialog.js"></script>
|
|
<script type="text/javascript">
|
|
$(function(){
|
|
var sumhistory= ${sumhistory};
|
|
var rs= new Array();
|
|
rs=sumhistory+"".split("");
|
|
var str="";
|
|
for(var j=rs.length;j<10;j++){
|
|
str+="0";
|
|
}
|
|
var sum1=str+ sumhistory;
|
|
var numRun6 = $(".numberRun6").numberAnimate({num:sum1, speed:2000});
|
|
var sumthroughput= ${sumthroughput};
|
|
var rss= new Array();
|
|
rss=sumthroughput+"".split("");
|
|
var str1="";
|
|
for(var j=rss.length;j<10;j++){
|
|
str1+="0";
|
|
}
|
|
var sum2=str1+ sumthroughput;
|
|
var numRun9 = $(".numberRun9").numberAnimate({num:sum2, speed:2000});
|
|
});
|
|
|
|
$(document).ready(function(){
|
|
visitorsChart();
|
|
tiaoxing();
|
|
sjfxecharts();
|
|
xitongzt();
|
|
sjjhchart();
|
|
unicomMonitor();
|
|
});
|
|
//运营商数据监测
|
|
function unicomMonitor(){
|
|
var day=new Array();
|
|
var num=new Array();
|
|
var inc=new Array();
|
|
<c:forEach items="${operatorList}" var="item" varStatus="status" >
|
|
var dates = "${item.dates}";
|
|
day.push(dates.substring(5,10));
|
|
var temp = ${item.nums};
|
|
if(temp==null || temp=="" || temp==undefined){
|
|
temp=0;
|
|
}
|
|
num.push(temp);
|
|
var i = "${item.increment}";
|
|
if(i==null || i=="" || i==undefined){
|
|
i=0;
|
|
}
|
|
inc.push(i);
|
|
</c:forEach>
|
|
day.reverse();
|
|
num.reverse();
|
|
inc.reverse();
|
|
var charts=document.getElementById('ltsj');
|
|
var myChart = echarts.init(charts);
|
|
option = {
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
color: ['#FF6666', '#74D928'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
y: '10',
|
|
textStyle: {
|
|
fontSize:16,
|
|
color: '#000000',
|
|
fontFamily:'Microsoft YaHei'
|
|
},
|
|
itemStyle: {
|
|
normal: {color: 'read'}
|
|
},
|
|
data: ['总数据量','总数据增长']
|
|
},
|
|
grid: {x: 100, y:70, x2: 70, y2: 36, borderColor: "#274456"},
|
|
xAxis: [{
|
|
//name: '日期',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000",fontSize:16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: {width: 1, color: "#274456"}},
|
|
axisTick: {show: true, length: 5, lineStyle: {color: '#274456'}},
|
|
splitArea: {show: true, areaStyle: {color: ["rgba(0,0,0,0)", "rgba(0,0,0,0)"]}},//背景颜色
|
|
data:day,
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: "单位：条",
|
|
nameTextStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'},
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: {color: "#274456"}},
|
|
axisTick: {show: true, length: 3, lineStyle: {color: '#274456'}},
|
|
splitNumber: 6
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: "单位：条",
|
|
nameTextStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'},
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: {color: "#274456"}},
|
|
axisTick: {show: true, length: 3, lineStyle: {color: 'green'}},
|
|
splitNumber: 2
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '总数据量',
|
|
type: 'line',
|
|
yAxisIndex: 0,
|
|
symbol: 'Circle',
|
|
data: num,
|
|
itemStyle : { normal: {label : {show: true,textStyle:{fontSize:18}}}}
|
|
},
|
|
{
|
|
name: '总数据增长',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
symbol: 'Circle',
|
|
data: inc,
|
|
itemStyle : { normal: {label : {show: true,textStyle:{fontSize:18}}}}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
|
|
//每月吞吐量echarts
|
|
function visitorsChart(){
|
|
var months=new Array();
|
|
var ins=new Array();
|
|
var outs=new Array();
|
|
<c:forEach items="${monthlist}" var="item" varStatus="status" >
|
|
months.push("${item.months}");
|
|
ins.push("${item.totalIn}");
|
|
outs.push("${item.totalOut}");
|
|
</c:forEach>
|
|
var charts=document.getElementById('rszst');
|
|
var myChart = echarts.init(charts);
|
|
option = {
|
|
backgroundColor: "rgba(0,0,0,0)",
|
|
color: ['#FF6666', '#74D928'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
y: '10',
|
|
textStyle: {
|
|
fontSize:16,
|
|
color: '#000000',
|
|
fontFamily:'Microsoft YaHei'
|
|
},
|
|
itemStyle: {
|
|
normal: {color: 'read'}
|
|
},
|
|
data: ['流入', '流出']
|
|
},
|
|
grid: {x: 50, y:70, x2: 50, y2: 36, borderColor: "#274456"},
|
|
xAxis: [{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000",fontSize:16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: {width: 1, color: "#274456"}},
|
|
axisTick: {show: true, length: 5, lineStyle: {color: '#274456'}},
|
|
splitArea: {show: true, areaStyle: {color: ["rgba(0,0,0,0)", "rgba(0,0,0,0)"]}},//背景颜色
|
|
data:months,
|
|
}],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: "单位：条次",
|
|
nameTextStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'},
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: {color: "#274456"}},
|
|
axisTick: {show: true, length: 3, lineStyle: {color: '#274456'}},
|
|
splitNumber: 2
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: "单位：条次",
|
|
nameTextStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'},
|
|
axisLine: {lineStyle: {width: 0}},
|
|
axisLabel: {textStyle: {color: "#000000", fontSize: 16}},
|
|
splitLine: {lineStyle: {color: "#274456"}},
|
|
axisTick: {show: true, length: 3, lineStyle: {color: 'read'}},
|
|
splitNumber: 2
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '流入',
|
|
type: 'line',
|
|
yAxisIndex: 0,
|
|
symbol: 'Circle',
|
|
data: ins,
|
|
itemStyle : { normal: {label : {show: true,textStyle:{fontSize:18}}}}
|
|
},
|
|
{
|
|
name: '流出',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
symbol: 'Circle',
|
|
data: outs,
|
|
itemStyle : { normal: {label : {show: true,textStyle:{fontSize:18}}}}
|
|
}
|
|
]
|
|
};
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
//数据热度 Top5
|
|
function tiaoxing(){
|
|
var name=new Array();
|
|
var out=new Array();
|
|
var iname=new Array();
|
|
var dataout=new Array();
|
|
<c:forEach items="${heattop5list}" var="item" varStatus="status" >
|
|
iname.push("${item.iname}");
|
|
dataout.push("${item.dataOut}");
|
|
</c:forEach>
|
|
var name=new Array();
|
|
var out=new Array();
|
|
for(var i=iname.length-1;i>=0;i--){
|
|
name.push(iname[i]);
|
|
out.push(dataout[i]);
|
|
}
|
|
var charts=document.getElementById('sjrd');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
|
|
grid: {x: 70, y: 20,y2: 30, x2: 50, borderColor: "#274456"},
|
|
|
|
xAxis: {
|
|
type: 'value',
|
|
name: "条次",
|
|
boundaryGap: [0, 0.01],
|
|
axisLabel:{
|
|
textStyle:{
|
|
color:"black",
|
|
fontSize:15
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: name,
|
|
axisLabel:{
|
|
textStyle:{
|
|
color:"black",
|
|
fontSize:15
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '2011年',
|
|
type: 'bar',
|
|
data: out,
|
|
itemStyle: {
|
|
normal: {
|
|
label : {show: true,textStyle:{fontSize:18},position:'right'},
|
|
color: function(params) {
|
|
var colorList = [
|
|
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
|
|
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
|
|
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
//数据交互平台访问量
|
|
function sjjhchart(){
|
|
var name=new Array();
|
|
var totalout=new Array();
|
|
<c:forEach items="${listtop}" var="item" varStatus="status" >
|
|
totalout.push("${item.outcount}");
|
|
name.push("${item.cname}");
|
|
</c:forEach>
|
|
var myChart = echarts.init(document.getElementById('bar_char02'));
|
|
option = {
|
|
color: ['#3398DB'],
|
|
tooltip : {
|
|
trigger: 'axis',
|
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
}
|
|
},
|
|
grid: {x: 45, y: 31, x2: 10, borderColor: "#274456"},
|
|
xAxis : [{
|
|
type : 'category',
|
|
data : name,
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel:{
|
|
interval:0,
|
|
rotate:21, //刻度旋转45度角
|
|
textStyle:{
|
|
color:"black",
|
|
fontSize:10
|
|
}
|
|
}
|
|
}],
|
|
yAxis : [{
|
|
name: '单位:条次',
|
|
type : 'value'
|
|
}],
|
|
series : [{
|
|
type:'bar',
|
|
barWidth: '35%',
|
|
data:totalout,
|
|
itemStyle: {
|
|
normal: {
|
|
label : {show: true,textStyle:{fontSize:15},position:'top'},
|
|
color: function(params) {
|
|
var colorList = [
|
|
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
|
|
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
|
|
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
|
|
];
|
|
return colorList[params.dataIndex]
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//数据累积增长量
|
|
function sjfxecharts(){
|
|
var months=new Array();
|
|
var nums=new Array();
|
|
<c:forEach items="${growthlist}" var="item" varStatus="status" >
|
|
months.push("${item.dates}");
|
|
nums.push("${item.sumnum}");
|
|
</c:forEach>
|
|
var charts=document.getElementById('sjfx');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
title: {
|
|
//text: '2016年来河北人数走势图'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:[]
|
|
},
|
|
grid: {x: 50, y:70, x2: 50, y2: 36, borderColor: "#274456"},
|
|
toolbox: {
|
|
feature: {
|
|
//saveAsImage: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: months,
|
|
axisLine: { lineStyle: { width: 0}},
|
|
axisLabel: {textStyle: { color: "#000000",fontFamily:'Microsoft YaHei',fontSize:16}},
|
|
splitLine: {lineStyle: { width: 1, color: "#274456"}},
|
|
axisTick: { show : true, length: 5, lineStyle : { color : '#274456'}}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: '单位:条次',
|
|
nameTextStyle: {color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'},
|
|
axisLine: { lineStyle: { width: 0}},
|
|
axisLabel: {textStyle: { color: "#000000", fontSize: 16,fontFamily:'Microsoft YaHei'}},
|
|
splitLine: {lineStyle: { color: "#274456"}},
|
|
axisTick: { show : true, length: 5, lineStyle : { color : '#274456'}},
|
|
splitNumber : 4
|
|
},
|
|
series: [
|
|
{
|
|
name:'增长量',
|
|
type:'line',
|
|
//stack: '总量',
|
|
data:nums,
|
|
itemStyle : { normal: {label : {show: true,textStyle:{fontSize:18}},color:'#7FFF00',lineStyle:{color:'#7FFF00',width:3}}}
|
|
}
|
|
],
|
|
top:'0px'
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
function xitongzt(){
|
|
var charts=document.getElementById('xtzt');
|
|
var myChart = echarts.init(charts);
|
|
var option = {
|
|
tooltip : {
|
|
formatter: "{a} <br/>{b} : {c}%"
|
|
},
|
|
color:['#c23531','#2f4554', '#61a0a8'],
|
|
series: [
|
|
{
|
|
name: '网速',
|
|
center: ['30%', '60%'],
|
|
type: 'gauge',
|
|
min:0,
|
|
axisLine: { // 坐标轴线
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
color: [[0, '#8FBC8F'],[0.85, '#00CD00'],[0.93, '#FF8C00'],[0.99, '#FF4500']],width: 14
|
|
}
|
|
},
|
|
max:500,
|
|
radius: '110%',
|
|
detail: {
|
|
formatter:'{value}/kbs',
|
|
textStyle:{
|
|
fontSize : 20
|
|
}
|
|
},
|
|
data: [{value: 0, name: '网速/kbs'}]
|
|
},
|
|
{
|
|
name: '温度',
|
|
center: ['73%', '60%'],
|
|
radius: '90%',
|
|
axisLine: { // 坐标轴线
|
|
lineStyle: { // 属性lineStyle控制线条样式
|
|
color: [[0.16, '#8FBC8F'],[0.495, '#00CD00'],[0.68, '#FF8C00'],[0.99, '#FF4500']],width: 13
|
|
}
|
|
},
|
|
min:10,
|
|
max:40,
|
|
type: 'gauge',
|
|
detail: {
|
|
textStyle:{
|
|
fontSize : 20
|
|
},
|
|
formatter:'{value}℃'
|
|
},
|
|
data: [{value: 0, name: '温度 ℃'}]
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option, true);
|
|
var ws=190;
|
|
var wd=20;
|
|
setInterval(function () {
|
|
var a=Math.random()*5;
|
|
var b=Math.random()*1;
|
|
var c=Math.random()*10;
|
|
if(c>5){
|
|
ws=ws+(a-0);
|
|
}else{
|
|
ws=ws-a;
|
|
}
|
|
if(c>9){
|
|
wd=wd+b;
|
|
}
|
|
if(c<1){
|
|
wd=wd-b;
|
|
}
|
|
if(ws>250){
|
|
ws=230;
|
|
}
|
|
if(ws<150){
|
|
ws=170;
|
|
}
|
|
if(wd>25){
|
|
wd=23;
|
|
}
|
|
if(wd<15){
|
|
wd=17;
|
|
}
|
|
option.series[0].data[0].value = ws.toFixed(1); // 200±50
|
|
option.series[1].data[0].value =wd.toFixed(1); //20±5
|
|
myChart.setOption(option, true);
|
|
},2000);
|
|
}
|
|
|
|
function unicomdetail(){
|
|
var url = "${ctx}/operatorTcdcStatisDay/operatorDataDetail.do";
|
|
$.dialog({
|
|
title:'河北旅游云数据中心接收到的运营商数据',
|
|
width: '1600px',
|
|
height: '850px',
|
|
lock:true,
|
|
loadingText:'数据查询中，请稍后！',
|
|
fixed:true,
|
|
max:false,
|
|
min:false,
|
|
esc:false,
|
|
drag:false,
|
|
content: "url:"+url
|
|
});
|
|
}
|
|
</script>
|
|
</head>
|
|
<body style=" background:#fff;">
|
|
<div class="nr">
|
|
|
|
<!--旅游资源分布开始-->
|
|
<div class="box">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>旅游资源分布</p></h3>
|
|
<div class="zyfx">
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan"><span class="icon icon-lyzy"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha1ha}</p><p class="shux">旅游资源</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv"><span class="icon icon-lyry"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha19ha }</p><p class="shux">旅游人员</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan"><span class="icon icon-dmt"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ ha27ha}</p><p class="shux">多媒体资源</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv"><span class="icon icon-ggxx"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha34ha}</p><p class="shux">公共信息</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv"><span class="icon icon-lyxmt"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha49ha}</p><p class="shux">旅游新媒体</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan"><span class="icon icon-zwgl"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha63ha}</p><p class="shux">政务管理</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lv"><span class="icon icon-yygl"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha76ha}</p><p class="shux">运营管理</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="pf-4">
|
|
<div class="kuai">
|
|
<div class="yuanbj bj-lan"><span class="icon icon-dxsj"></span></div>
|
|
<div class="wb"><p class="shuzhi">${ha101ha}</p><p class="shux">运营商数据</p></div>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
<!--旅游资源分布结束-->
|
|
|
|
<div class="box-sanf">
|
|
<!--折线图开始-->
|
|
<div class="pf-3f2">
|
|
<div class="box boxk-left">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>每月吞吐量</p></h3>
|
|
<div class="echart-tb" id="rszst" style="height:242px;"></div>
|
|
</div>
|
|
</div>
|
|
<!--折线图结束-->
|
|
|
|
<!--数据统计开始-->
|
|
<div class="pf-3">
|
|
<div class="box boxk-right">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>数据累计统计</p></h3>
|
|
<div class="dsj" style="height:232px;">
|
|
<div class="lzsj">
|
|
<h3 class="">历史累计数据总量（条）</h3>
|
|
<div class="shuz">
|
|
<div class="numberRun6" id="num1"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<div class="lzsj">
|
|
<h3 class="">年度累计数据吞吐量（条次）</h3>
|
|
<div class="shuz">
|
|
<div class="numberRun9" id="num2"></div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--数据统计结束-->
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div class="box-sanf">
|
|
<!--数据热度(外部应用访问)TOP5开始-->
|
|
<div class="pf-3">
|
|
<div class="box boxk-left">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>数据热度(外部应用访问)TOP5</p></h3>
|
|
<div class="echart-tb" style="height:232px;" id="sjrd"></div>
|
|
</div>
|
|
</div>
|
|
<!--数据热度(外部应用访问)TOP5结束-->
|
|
|
|
<!--系统状态开始-->
|
|
<div class="pf-3-center">
|
|
<div class="box boxk-left">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>应用访问监控</p></h3>
|
|
<div class="echart-tb" id="bar_char02" style="height:232px;"></div>
|
|
</div>
|
|
</div>
|
|
<!--系统状态结束-->
|
|
|
|
<!--系统状态开始-->
|
|
<div class="pf-3">
|
|
<div class="box boxk-right">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>系统状态</p></h3>
|
|
<div class="echart-tb" id="xtzt" style="height:232px;"></div>
|
|
</div>
|
|
</div>
|
|
<!--系统状态结束-->
|
|
<div class="clear"></div>
|
|
</div>
|
|
<!--折线图开始-->
|
|
<div class="box">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>数据存储增长趋势</p></h3>
|
|
<div class="echart-tb" id="sjfx" style="height:260px;"><img src="${ctx }/images/img4.jpg" width="100%" /></div>
|
|
</div>
|
|
<!--折线图结束-->
|
|
<!--折线图(运营商上传信息监测)开始-->
|
|
<div class="box" onclick="unicomdetail()">
|
|
<h3 class="index-bt"><span class="left"><img src="${ctx }/images/sedai.jpg" /></span><p>运营商数据监测</p></h3>
|
|
<div class="echart-tb" id="ltsj" style="height:300px;"><img src="${ctx }/images/img4.jpg" width="100%" /></div>
|
|
</div>
|
|
<!--折线图(联通上传信息监测)结束-->
|
|
</div>
|
|
<div class="footer"><p>中国联合网络通信有限公司河北省分公司 ©技术支持</p></div>
|
|
</body>
|
|
</html>
|
|
|