OMS/app/monitor/view/admin/alarm/queue.html

<!--
  Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
  See LICENSE file for license details.
-->

<h2>队列监控</h2>
<div>
    <{foreach from=$queues item=item key=key}>
        <div id="task-<{$key}>" class="flt" style="border: 1px solid #ccc; text-align: center;width: 250px;font-weight: bold;font-size: large;margin: 10px;">
            <div style="border-bottom: #ccc 1px solid;background-color:steelblue;color: azure;"><{$item.name}> <span style="font-size: small;"><{$item.rate}></span>
                <div style="font-size: 10px;"><{$item.queueName}></div>
            </div>
            <div class="count"><{$item.count}></div>
        </div>
    <{foreachelse}>
        <div style="text-align: center;font-size: large;">由运维团队监控队列</div>
    <{/foreach}>
</div>

<script>
    function getQueues() {
       new Request.JSON({
            url:'index.php?app=monitor&ctl=admin_alarm_queue&act=ajaxGetQueues',
            onSuccess: function(rs) {

                if (rs.success && Object.keys(rs.queues).length > 0) {

                    const entries = Object.entries(rs.queues);

                    entries.forEach(([key, value]) => {
                        $E("#task-"+key+" .count").setText(value.count);
                    })
                }
                
                setTimeout(function(){
                    getQueues();
                }, 5000);
           }
        }).send();
    }

    setTimeout(function(){
        getQueues();
    }, 5000);
</script>