project requirements
- Enter the relevant data of entering the room;
- Start counting from the time of entry to calculate the time spent in the room;
- The data is refreshed regularly, and the number of people exceeding 30 minutes will be given a red alarm;
Implementation process
In order to fully realize the above requirements, we can develop according to the following steps:
- Front-end page design
Design a suitable front-end page to display information about all rooms, as well as user information in each room. Automatically refresh all user information in the room, and the function of marking red when the user times out.
- Write front-end JavaScript logic
Use jQuery to write front-end JavaScript logic to realize the function of regularly obtaining user information in the room and judging the timeout time, and marking the user in red when timeout occurs.
- Backend API design
Design a set of suitable RESTful APIs to obtain all room information and user information in the room, and query individual user information by ID.
- Write the backend API logic
Use php and other technology stacks to write back-end API logic to realize the function of obtaining all room information and user information in the room, as well as querying the information of a single user; and realize the regular refresh of the information of all users in the room, and store the information of overtime users in the database .
- Docking front and rear ends
The API involved in the front-end JavaScript logic is connected with the back-end API logic to complete the data interaction between the front-end and the back-end.
- test
According to requirements, design corresponding test cases, test the entire application, find and solve potential problems.
- deploy
Deploy applications to environments such as cloud servers to ensure normal operation of applications and provide stable services.
The above is a complete development process. Of course, there may be some differences in the specific implementation details, which need to be adjusted and modified according to the specific situation.
1. Create an HTML container
<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>
2. Filter data by default loading conditions
/*默认加载数据*/
window.onload = function getDefaultDate() {
var from_time = $("#from_time").val();
var to_time = $("#to_time").val();
getDetails(from_time, to_time);
}
You can also use the ready() method of jQuery. When the page is loaded, we use the val() method to obtain the value of the input element, and then use the ajax() method to send data to the specified API URL in POST mode. In this example, we encapsulate the value of the input element in a data object and use the attribute name "inputValue" as the key. After sending the data successfully, we can process the returned data in the success callback function.
$(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); // 处理返回数据
}
});
});
3. Click the search criteria to filter
//单击加载数据;
$("#searchBtn").click(function () {
var from_time = $("#from_time").val();
var to_time = $("#to_time").val();
getDetails(from_time, to_time);
});
4. Automatically refresh and load data
//自动刷新数据;
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);
5. Asynchronous loading refresh
//加载数据
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);
}
});
}
6. Timestamp calculation
//计算时间戳
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) + " 分钟"; // 向下取整
}
}
If the calculated minutes between two timestamps are displayed Invalid Date, then it may be because the timestamp entered is not in a valid date format. In JavaScript, a timestamp is a number representing the number of milliseconds since January 1, 1970 UTC. If you use an invalid timestamp in your calculations, JavaScript won't be able to convert it to a valid date object for display Invalid Date.
To check if the input timestamp is valid, try outputting the timestamp and check if it meets your expected format. For example, a timestamp should be an integer, not a float. In addition, there may be another reason that =timestamp means the server's timestamp, not the local timestamp. In this case, you need to convert the server time to local time, or use another method to calculate the time interval, for example, use a Date object instead of a timestamp to calculate the time interval.
7. Calendar plug-in
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'
});
});
8. Backend 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));
}
}
@leak time sometimes