Java Web数据可视化(四)通过轮询的方法获取实时数据并更新页面

数据可视化中不仅仅需要对历史数据进行展示,常常还需要对实时数据进行处理、展示并更新数据库
我采用的是轮询的方法
部分页面

<%--
  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="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">--%>
    <script src="http://cdn.bootcss.com/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="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <script src="https://cdn.staticfile.org/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">
            <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" style="height: 30%;padding: 4%;top: 40%;">
                <img style="padding: 13%	;top:0;bottom:0;left:0;right:0;width:100%;margin:auto;" src="assets/machin1.png">
            </div>
            <div class="jumbotron" style="height: 30%;padding: 0%;" id="machinea">
                <div style="height: 20%;">
                    <p>
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;<strong>机器参数:</strong>
                    </p>
                    <p id="n">
                        <strong>进给率: 0  &nbsp;mm/min</strong>
                    </p>
                    <p id="f">
                        <strong>主轴转速:0  &nbsp;n/min</strong>
                    </p>
                    <p id="ap">
                        <strong>切割深度:0  &nbsp;mm</strong>
                    </p>
                    <p id="ae">
                        <strong>切割宽度:0  &nbsp;mm</strong>
                    </p>
                    <br />
                    <p>
                        <strong>刀具磨损量:0.22 &nbsp;mm</strong>
                    </p>
                </div>
                <div id="machine" style="height: 80%;width: 100%"></div>
<script>
                    setInterval(function start( ) {
                        $.ajax({
                            type : 'post',	//传输类型
                            async : false,	//同步执行
                            url : '/machineParameter',	//web.xml中注册的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])
                                    document.getElementById("n").innerHTML = "     进给率: "+n+" mm/min";
                                    document.getElementById("f").innerHTML = "     主轴转速: "+f+" n/min";
                                    document.getElementById("ap").innerHTML ="     切割深度: "+ap+" mm";
                                    document.getElementById("ae").innerHTML = "     切割宽度: "+ae+" mm";

                                }
                            },
                            error : function(errorMsg) {
                               console.log("shi");
                            }
                        });
                        $.ajax({
                            type : 'post',	//传输类型
                            async : false,	//同步执行
                            url : '/logServlet',	//web.xml中注册的Servlet的url-pattern
                            data : {},
                            dataType : 'json', //返回数据形式为json
                            success : function(result) {
                                if (result) {
                                    var str="

全局日志

"
; console.log("result is:" + result); console.log(result[0]) for (var i = 0; i < result.length; i++){ str += "

时间:"+ result[i].time +" 机器号:"+ result[i].machineId + " 日志信息:" + result[i].log + "

"
; } document.getElementById("log").innerHTML = str; } }, error : function(errorMsg) { console.log("shi"); } }); },1000); </script> <div class="jumbotron" id="log" style="height: 40%;padding: 10%;"> </div> </div> </div>

你可能感兴趣的:(轮询,javaweb,可视化,java可视化,实时数据)