数据可视化大屏人员停留系统的开发实录(默认加载条件筛选、单击加载、自动刷新加载、异步加载数据)

这篇具有很好参考价值的文章主要介绍了数据可视化大屏人员停留系统的开发实录(默认加载条件筛选、单击加载、自动刷新加载、异步加载数据)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目需求

  • 录入进入房间的相关数据;
  • 从进入时间开始计时,计算滞留房间的时间;
  • 定时刷新数据,超过30分钟的人数,进行红色告警;

实现流程

为了完整地实现上述需求,我们可以按照以下步骤开发:

  1. 前端页面设计

设计一个合适的前端页面,用于展示所有房间的信息,以及每个房间内的用户信息。自动刷新所有房间内用户信息,以及在用户超时时标记红色的功能。

  1. 编写前端JavaScript逻辑

使用jQuery编写前端JavaScript逻辑,实现定时获取房间内用户信息并判断超时时间,并在用户超时时标记红色的功能。

  1. 后端API设计

设计一组合适的RESTful API,用于获取所有房间信息和房间内用户信息,以及通过ID查询单个用户信息。

  1. 编写后端API逻辑

使用php等技术栈,编写后端API逻辑,实现获取所有房间信息和房间内用户信息,以及查询单个用户信息的功能;并实现定时刷新房间内所有用户的信息,将超时用户的信息存入数据库。

  1. 对接前后端

将前端JavaScript逻辑涉及的API与后端API逻辑进行对接,完成前后端的数据交互。

  1. 测试

根据需求,设计相应的测试用例,对整个应用进行测试,发现并解决潜在问题。

  1. 部署

将应用部署到云服务器等环境中,保证应用能够正常运行,提供稳定的服务。

以上是一个完整的开发流程,当然具体实现细节可能存在一些差异,需要依据具体情况来做相应的调整和修改。
数据可视化大屏人员停留系统的开发实录(默认加载条件筛选、单击加载、自动刷新加载、异步加载数据)

一、创建HTML容器

<div class="x-body">
    <div class="layui-fluid">
        <form class="layui-form layui-form-pane">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <label class="layui-form-label">起始时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="from_time" id="from_time" lay-verify="required" autocomplete="off"
                                   class="layui-input" value=" 2023-06-10 00:00:00">
                        </div>
                        <label class="layui-form-label">截至时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="to_time" id="to_time" lay-verify="required" autocomplete="off"
                                   class="layui-input" value=" 2023-06-10 23:59:59">
                        </div>
                        <span class="layui-btn" id="searchBtn">筛选</span>
                    </div>
                </div>
            </div>
            <!--数据列表-->
            <div class="layui-card">
                <div class="layui-card-header" style="text-align: center;font-weight: bold;">战时安全大屏</div>
                <div class="layui-card-body">
                    <table class="layui-table">
                        <thead>
                        <tr align="center">
                            <th>序号</th>
                            <th>单位</th>
                            <th>姓名</th>
                            <th>当前状态</th>
                            <th>空呼压力</th>
                            <th>在内人数</th>
                            <th>进入时间</th>
                            <th>滞留时间</th>
                        </tr>
                        </thead>
                        <tbody id="detail"></tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
</div>

二、默认加载条件筛选数据

  /*默认加载数据*/
    window.onload = function getDefaultDate() {
        var from_time = $("#from_time").val();
        var to_time = $("#to_time").val();
        getDetails(from_time, to_time);
    }

也可以使用jQuery的ready()方法,当页面加载完成后,我们使用val()方法获取了input元素的值,然后使用ajax()方法以POST方式发送数据到指定的API URL。在这个例子中,我们将input元素的值封装在data对象中,并使用属性名称"inputValue"作为键。成功发送数据后,我们可以在success回调函数中处理返回的数据。

$(document).ready(function(){
  // 获取input元素的值
  var inputValue = $("#input-field").val();

  // 使用ajax发送数据
  $.ajax({
    url: "your-api-url",
    type: "post",
    data: {inputValue: inputValue},
    success: function(data){
      console.log(data); // 处理返回数据
    }
  });
});

三、单击搜索条件筛选

   //单击加载数据;
    $("#searchBtn").click(function () {
        var from_time = $("#from_time").val();
        var to_time = $("#to_time").val();
        getDetails(from_time, to_time);
    });

四、自动刷新加载数据

    //自动刷新数据;
    var interVal;
    var from_time = $("#from_time").val();
    var to_time = $("#to_time").val();
    getDetails(from_time, to_time);
    clearInterval(interVal);
    interVal = setInterval(function () {
        var from_time = $("#from_time").val();
        var to_time = $("#to_time").val();
        getDetails(from_time, to_time);
    }, 6 * 1000);

五、异步加载刷新

  //加载数据
    function getDetails(from_time, to_time) {
        $.ajax({
            type: "get",
            async: true,
            url: "./api/api.php?act=getFireInroom&token=3cab7ce4142608c0f40c785b5ab5ca24",
            data: {
                from_time: from_time,
                to_time: to_time
            },
            dataType: "json",
            success: function (res) {
                //console.log(res.data);
                var detailHtml = '';
                if (res.data) {
                    for (var i = 0; i < res.data.length; i++) {
                        detailHtml += ' <tr>' +
                            '<th>' + (i + 1) + '</th>' +
                            '<td>' + res.data[i]['fire_depart'] + '</td>' +
                            '<td>' + res.data[i]['fire_name'] + '</td>' +
                            '<td>' + res.data[i]['fire_status'] + '</td>' +
                            '<td>' + res.data[i]['fire_pressure'] + '</td>' +
                            '<td>' + res.data[i]['fire_nums'] + '</td>' +
                            '<td>' + res.data[i]['fire_time_show'] + '</td>' +
                            '<td>' + getDiff(res.data[i]['fire_time'], res.data[i]['cur_time']) + '</td>' +
                            '</tr>'
                    }
                }
                $("#detail").html(detailHtml);
            },
            error: function (err) {
                console.log("获取队员详情API:" + err);
            }
        });
    }

六、时间戳计算

   //计算时间戳
    function getDiff(timestamp1, timestamp2) {
        var date1 = timestamp1 + '000'; // 转换为本地时间
        var date2 = timestamp2 + '000'; // 转换为本地时间
        var milliseconds = Math.abs(date1 - date2); // 获取两个时间之间的毫秒数
        var minutes = milliseconds / (1000 * 60); // 将毫秒数转换为分钟数
        if (minutes > 30) {
            return "<label class='x-red'>" + Math.floor(minutes) + " 分钟</label>";
        } else {
            return Math.floor(minutes) + " 分钟"; // 向下取整
        }
    }

如果计算的两个时间戳之间的分钟数显示Invalid Date,那么可能是因为输入的时间戳不是有效的日期格式。在JavaScript中,时间戳是一个数字,表示自1970年1月1日UTC的毫秒数。如果你在计算时使用了一个非法的时间戳,JavaScript将无法将其转换为一个有效的日期对象,从而显示Invalid Date

检查是否输入的时间戳是有效的,可以尝试输出时间戳并检查它是否满足你的期望格式。例如,时间戳应该是一个整数,而不是一个浮点数。另外,可能还有一个原因是,=时间戳表示的是服务器的时间戳,而不是本地时间戳。在这种情况下,你需要将服务器时间转换为本地时间,或使用另一种方法计算时间间隔,例如,使用Date对象而不是时间戳来计算时间间隔。

七、日历插件

    layui.use(['form', 'layer', 'laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form, laydate = layui.laydate;

        //时间选择器
        laydate.render({
            elem: '#to_time'
            , theme: '#40a9ff'
            , type: 'datetime'
        });

        laydate.render({
            elem: '#from_time'
            , theme: '#40a9ff'
            , type: 'datetime'
        });
    });

八、后端API

 public function getFireInroom()
    {
        global $db, $res;
        dbc();
        @$from_time = strtotime(get_param('from_time'));
        @$to_time = strtotime(get_param('to_time'));
        $sql = "select fire_id,fire_depart,fire_name,fire_status,fire_nums,fire_pressure,from_unixtime(fire_time) AS fire_time_show,fire_time,unix_timestamp() AS cur_time  from " . $db->table('fireground') . " where fire_status = '入'";
        if ($from_time != "") {
            $sql .= ' AND fire_time > ' . $from_time;
        }
        if ($to_time != "") {
            $sql .= ' AND fire_time < ' . $to_time;
        }
        $sql .= ' ORDER BY fire_id DESC';
        $row = $db->queryall($sql);
        $res["data"] = $row;
        die(json_encode_lockdata($res));
    }
}

@漏刻有时文章来源地址https://www.toymoban.com/news/detail-478714.html

到了这里,关于数据可视化大屏人员停留系统的开发实录(默认加载条件筛选、单击加载、自动刷新加载、异步加载数据)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Python的豆瓣电影数据分析可视化系统的设计与实现-可视化分析大屏

    收藏关注不迷路 本文拟采用Python技术和Django 搭建系统框架,后台使用MySQL数据库进行信息管理,设计开发基于python的豆瓣电影数据分析可视化系统。通过调研和分析,系统拥有管理员和用户两个角色,主要具备个人中心、电影管理、用户管理、系统管理等功能模块。将纸质管

    2024年02月03日
    浏览(68)
  • 数据可视化大屏拼接屏开发实录:屏幕分辨率测试工具

    在数据可视化大屏开发时,确定数据可视化大屏拼接屏的板块尺寸需要考虑以下几个因素: 屏幕分辨率:首先需要知道每个板块屏幕的分辨率,包括宽度和高度,这决定了每个板块上可以显示的像素数量。 数据内容:了解需要展示的数据内容和类型,包括图表、文字、图像

    2024年02月15日
    浏览(51)
  • Python淘宝手机数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月14日
    浏览(53)
  • Python淘宝手机爬虫数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月17日
    浏览(50)
  • Python招聘信息爬虫数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月09日
    浏览(63)
  • Python爬虫淘宝手机数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月03日
    浏览(50)
  • 大数据毕业设计:基于python商品数据采集分析可视化系统 淘宝数据采集 大数据 大屏可视化(附源码+论文)✅

    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久,选择我们就是选择放心、选择安心毕业✌感兴趣的可以先收藏起来,点赞、关注不迷路✌ 毕业设计:2023-2024年计算机专业毕业设计选题汇总(建议

    2024年02月03日
    浏览(53)
  • 基于python商品数据采集分析可视化系统 淘宝数据采集 大数据 大屏可视化(附源码+论文)大数据毕业设计✅

    毕业设计:2023-2024年计算机专业毕业设计选题汇总(建议收藏) 毕业设计:2023-2024年最新最全计算机专业毕设选题推荐汇总 🍅 感兴趣的可以先收藏起来,点赞、关注不迷路,大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,希望帮助同学们顺利毕业 。

    2024年02月02日
    浏览(58)
  • Python上海二手房源爬虫数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月14日
    浏览(102)
  • Python北京二手房源爬虫数据可视化分析大屏全屏系统

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包