当前位置：首页 > news >正文

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

news 2026/2/9 20:17:54

项目需求

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

实现流程

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

前端页面设计

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

编写前端JavaScript逻辑

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

后端API设计

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

编写后端API逻辑

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

对接前后端

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

测试

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

部署

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

以上是一个完整的开发流程，当然具体实现细节可能存在一些差异，需要依据具体情况来做相应的调整和修改。
在这里插入图片描述

一、创建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));}
}

@漏刻有时