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

    项目需求

    • 录入进入房间的相关数据；
    • 从进入时间开始计时，计算滞留房间的时间；
    • 定时刷新数据，超过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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    也可以使用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); // 处理返回数据
    }
  });
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    三、单击搜索条件筛选

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    四、自动刷新加载数据

        //自动刷新数据;
    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);


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    五、异步加载刷新

      //加载数据
    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 += ' ' +
                            '' + (i + 1) + '' +
                            '' + res.data[i]['fire_depart'] + '' +
                            '' + res.data[i]['fire_name'] + '' +
                            '' + res.data[i]['fire_status'] + '' +
                            '' + res.data[i]['fire_pressure'] + '' +
                            '' + res.data[i]['fire_nums'] + '' +
                            '' + res.data[i]['fire_time_show'] + '' +
                            '' + getDiff(res.data[i]['fire_time'], res.data[i]['cur_time']) + '' +
                            ''
                    }
                }
                $("#detail").html(detailHtml);
            },
            error: function (err) {
                console.log("获取队员详情API:" + err);
            }
        });
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    六、时间戳计算

       //计算时间戳
    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 " + Math.floor(minutes) + " 分钟";
        } else {
            return Math.floor(minutes) + " 分钟"; // 向下取整
        }
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    如果计算的两个时间戳之间的分钟数显示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'
        });
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    八、后端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));
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    @漏刻有时

  • 相关阅读:
    如何去掉word上方页眉处的横线
    石子合并终极版 (GarsiaWachs算法) [o(n*n)] 板子
    通过lame_enc.dll实现将Wav转为mp3格式.wav要求是16bit
    Echarts绘制各种数据可视化图表案例（效果+代码）
    PyTorch深度学习框架
    倒计时5天！飞桨AI Studio星河社区x智海Mo AI大模型创意应用大赛等你来战！
    智慧会议解决方案-最新全套文件
    MySQL-操作数据库（存储引擎）
    二叉树链式结构的实现
    鼠标拖拽围绕某个物体旋转展示
  • 原文地址：https://blog.csdn.net/weixin_41290949/article/details/131146960