重庆市住房和城乡建设部网站,网站制作哪家便宜,许昌城乡建设局网站,有一台服务器怎么赚钱项目需求
录入进入房间的相关数据#xff1b;从进入时间开始计时#xff0c;计算滞留房间的时间#xff1b;定时刷新数据#xff0c;超过30分钟的人数#xff0c;进行红色告警#xff1b;
实现流程
为了完整地实现上述需求#xff0c;我们可以按照以下步骤开发#…项目需求
录入进入房间的相关数据从进入时间开始计时计算滞留房间的时间定时刷新数据超过30分钟的人数进行红色告警
实现流程
为了完整地实现上述需求我们可以按照以下步骤开发
前端页面设计
设计一个合适的前端页面用于展示所有房间的信息以及每个房间内的用户信息。自动刷新所有房间内用户信息以及在用户超时时标记红色的功能。
编写前端JavaScript逻辑
使用jQuery编写前端JavaScript逻辑实现定时获取房间内用户信息并判断超时时间并在用户超时时标记红色的功能。
后端API设计
设计一组合适的RESTful API用于获取所有房间信息和房间内用户信息以及通过ID查询单个用户信息。
编写后端API逻辑
使用php等技术栈编写后端API逻辑实现获取所有房间信息和房间内用户信息以及查询单个用户信息的功能并实现定时刷新房间内所有用户的信息将超时用户的信息存入数据库。
对接前后端
将前端JavaScript逻辑涉及的API与后端API逻辑进行对接完成前后端的数据交互。
测试
根据需求设计相应的测试用例对整个应用进行测试发现并解决潜在问题。
部署
将应用部署到云服务器等环境中保证应用能够正常运行提供稳定的服务。
以上是一个完整的开发流程当然具体实现细节可能存在一些差异需要依据具体情况来做相应的调整和修改。
一、创建HTML容器
div classx-bodydiv classlayui-fluidform classlayui-form layui-form-panediv classlayui-carddiv classlayui-card-bodydiv classlayui-form-itemlabel classlayui-form-label起始时间/labeldiv classlayui-input-inlineinput typetext namefrom_time idfrom_time lay-verifyrequired autocompleteoffclasslayui-input value 2023-06-10 00:00:00/divlabel classlayui-form-label截至时间/labeldiv classlayui-input-inlineinput typetext nameto_time idto_time lay-verifyrequired autocompleteoffclasslayui-input value 2023-06-10 23:59:59/divspan classlayui-btn idsearchBtn筛选/span/div/div/div!--数据列表--div classlayui-carddiv classlayui-card-header styletext-align: center;font-weight: bold;战时安全大屏/divdiv classlayui-card-bodytable classlayui-tabletheadtr aligncenterth序号/thth单位/thth姓名/thth当前状态/thth空呼压力/thth在内人数/thth进入时间/thth滞留时间/th/tr/theadtbody iddetail/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?actgetFireInroomtoken3cab7ce4142608c0f40c785b5ab5ca24,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 classx-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));}
}漏刻有时
