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

最新推荐文章于 2024-08-03 20:52:21 发布

新月基

最新推荐文章于 2024-08-03 20:52:21 发布

阅读量4.4k

点赞数

文章标签：轮询 javaweb 可视化 java可视化实时数据

本文链接：https://blog.csdn.net/weixin_43422355/article/details/86631855

版权

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

<%--
  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 = " &nbsp;&nbsp;&nbsp;&nbsp;<strong>进给率： "+n+" mm/min</strong>";
                                    document.getElementById("f").innerHTML = " &nbsp;&nbsp;&nbsp;&nbsp;<strong>主轴转速： "+f+" n/min</strong>";
                                    document.getElementById("ap").innerHTML =" &nbsp;&nbsp;&nbsp;&nbsp;<strong>切割深度： "+ap+" mm</strong>";
                                    document.getElementById("ae").innerHTML = " &nbsp;&nbsp;&nbsp;&nbsp;<strong>切割宽度： "+ae+" mm</strong>";

                                }
                            },
                            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="<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>";
                             
                                    }
                                    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>