Registro de desarrollo del sistema de permanencia del personal en pantalla grande de visualización de datos (filtrado de condiciones de carga predeterminado, carga con un solo clic, carga de actualización automática, datos de carga asíncrona)

requerimientos del proyecto

• Ingrese los datos relevantes de ingreso a la habitación;
• Empezar a contar desde la hora de entrada para calcular el tiempo de permanencia en la habitación;
• Los datos se actualizan regularmente y la cantidad de personas que superan los 30 minutos recibirá una alarma roja;

Proceso de implementación

Para realizar completamente los requisitos anteriores, podemos desarrollar de acuerdo con los siguientes pasos:

1. Diseño de la página de inicio

Diseñe una página de inicio adecuada para mostrar información sobre todas las salas, así como información del usuario en cada sala. Actualice automáticamente toda la información del usuario en la sala y la función de marcar en rojo cuando el usuario agote el tiempo.

2. Escribir lógica de JavaScript front-end

Use jQuery para escribir la lógica de JavaScript de front-end para realizar la función de obtener regularmente información del usuario en la sala y juzgar el período de tiempo de espera, y marcar al usuario en rojo cuando se produce el tiempo de espera.

3. Diseño de API de back-end

Diseñe un conjunto de API RESTful adecuadas para obtener toda la información de la sala y la información del usuario en la sala, y consulte la información del usuario individual por ID.

4. Escribir la lógica de la API de backend

Use php y otras pilas de tecnología para escribir la lógica API de back-end para realizar la función de obtener toda la información de la sala y la información del usuario en la sala, así como consultar la información de un solo usuario; y realice la actualización regular de la información de todos los usuarios de la sala y almacene la información de los usuarios de horas extra en la base de datos.

5. Acoplamiento de los extremos delantero y trasero

La API involucrada en la lógica de JavaScript del front-end está conectada con la lógica de la API del back-end para completar la interacción de datos entre el front-end y el back-end.

6. prueba

De acuerdo con los requisitos, diseñe los casos de prueba correspondientes, pruebe toda la aplicación, encuentre y resuelva problemas potenciales.

7. desplegar

Implemente aplicaciones en entornos como servidores en la nube para garantizar el funcionamiento normal de las aplicaciones y proporcionar servicios estables.

Lo anterior es un proceso de desarrollo completo. Por supuesto, puede haber algunas diferencias en los detalles de implementación específicos, que deben ajustarse y modificarse de acuerdo con la situación específica.

1. Crea un contenedor 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>

2. Filtrar datos por condiciones de carga predeterminadas

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

También puede usar el método ready () de jQuery. Cuando se carga la página, usamos el método val () para obtener el valor del elemento de entrada y luego usamos el método ajax () para enviar datos a la URL API especificada en modo POST. En este ejemplo, encapsulamos el valor del elemento de entrada en un objeto de datos y usamos el nombre de atributo "inputValue" como clave. Después de enviar los datos con éxito, podemos procesar los datos devueltos en la función de devolución de llamada exitosa.

$(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. Haga clic en los criterios de búsqueda para filtrar

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

4. Actualizar y cargar datos automáticamente

    //自动刷新数据;
    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. Actualización de carga asíncrona

  //加载数据
    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. Cálculo de la marca de tiempo

   //计算时间戳
    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) + " 分钟"; // 向下取整
        }
    }

Si se muestran los minutos calculados entre dos marcas de tiempo Invalid Date, puede deberse a que la marca de tiempo ingresada no tiene un formato de fecha válido. En JavaScript, una marca de tiempo es un número que representa la cantidad de milisegundos desde el 1 de enero de 1970 UTC. Si usa una marca de tiempo no válida en sus cálculos, JavaScript no podrá convertirla en un objeto de fecha válido para mostrar Invalid Date.

Para verificar si la marca de tiempo de entrada es válida, intente generar la marca de tiempo y verifique si cumple con el formato esperado. Por ejemplo, una marca de tiempo debe ser un número entero, no un flotante. Además, puede haber otra razón por la que =marca de tiempo signifique la marca de tiempo del servidor, no la marca de tiempo local. En este caso, debe convertir la hora del servidor a la hora local o usar otro método para calcular el intervalo de tiempo, por ejemplo, use un objeto Fecha en lugar de una marca de tiempo para calcular el intervalo de tiempo.

7. Complemento de calendario

    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. API de back-end

 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));
    }
}

---

@tiempo de fuga a veces