JavaWeb数据可视化（四）通过轮询的⽅法获取实时数据并更新页⾯
数据可视化中不仅仅需要对历史数据进⾏展⽰，常常还需要对实时数据进⾏处理、展⽰并更新数据库
我采⽤的是轮询的⽅法
部分页⾯
<%--
Created by IntelliJ IDEA.
User: Jigubigu
Date:2018/12/10
Time:16:47
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>数据监控</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%--<link href="cdn.bootcss/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">--%>
<script src="cdn.bootcss/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/option.js"></script>
<script type="text/javascript" src="js/getLogging.js"></script>
<link rel="stylesheet" href="/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>p{line-height:90%}</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="login.jsp">智能制造</a>
</div>
<div>
<ul class="nav navbar-nav">
java开发可视化界面
<li class="active"><a href="#">⾸页</a></li>
<li><a href="#">机器选择</a></li>
<li><a href="#">刷新页⾯</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row clearfix">
<div class="col-md-3">
<div class="jumbotron" >
<img src="assets/machin1.png">
</div>
<div class="jumbotron" id="machinea">
<div >
<p>
<br />
    <strong>机器参数：</strong>
</p>
<p id="n">
<strong>进给率：0 mm/min</strong>
</p>
<p id="f">
<strong>主轴转速：0 n/min</strong>
</p>
<p id="ap">
<strong>切割深度：0 mm</strong>
</p>
<p id="ae">
<strong>切割宽度：0 mm</strong>
</p>
<br />
<p>
<strong>⼑具磨损量：0.22 mm</strong>
</p>
</div>
<div id="machine" ></div>
<script>
setInterval(function start(){
$.ajax({
type :'post',//传输类型
async:false,//同步执⾏
url :'/machineParameter',//l中注册的Servlet的url-pattern
data :{"machineId":machine},
dataType :'json',//返回数据形式为json
success :function(result){
if(result){
console.log("result is:"+ result);
var n = result[0].n;
var f = result[0].f;
var ap = result[0].ap;
var ae = result[0].ae;
console.log(result[0])
                      ElementById("f").innerHTML ="     <strong>主轴转速： "+f+" n/min</strong>";                                    ElementById("ap").innerHTML ="     <strong>切割深度： "+ap+" mm</strong>";                                    ElementById("ae").innerHTML ="     <strong>切割宽度： "+ae+" mm</strong>";
}
},
error :function(errorMsg){
console.log("shi");
}
});
$.ajax({
type :'post',//传输类型
async:false,//同步执⾏
url :'/logServlet',//l中注册的Servlet的url-pattern
data :{},
dataType :'json',//返回数据形式为json
success :function(result){
if(result){
var str="<p><strong>全局⽇志</strong></p>";
console.log("result is:"+ result);
console.log(result[0])
for(var i =0; i < result.length; i++){
str +="<p style=\"font-size:large;\">时间："+
result[i].time +" 机器号："+ result[i].machineId +" ⽇志信息："+
result[i].log +"</p>";
}
}
},
error :function(errorMsg){
console.log("shi");
}
});
},1000);
</script>
<div class="jumbotron" id="log" >
</div>
</div> </div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。