YwxAppThink/addon/iot/view/backend/admin/alerts.html

<div class="layui-container">
    <div class="admin-title">告警中心</div>
    <div class="layui-text" style="margin-bottom:10px;color:#999;">
        设备离线、场景联动、OTA 失败等事件统一汇聚；支持按未读过滤与单条/一键已读。
    </div>
    <div style="margin-bottom:10px;">
        <button class="layui-btn layui-btn-sm" id="btnUnread">只看未读</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" id="btnAllRead">全部已读</button>
    </div>
    <table id="alertTable" lay-filter="alertTable"></table>
</div>

<!-- 行操作按钮模板 -->
<script type="text/html" id="barAlert">
    {{# if(!d.is_read){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="read">标记已读</a>
    {{# } }}
</script>

<script>
layui.use(['layer', 'jquery', 'table', 'http', 'ywxapp'], function(){
    var http = layui.http;
    var $ = layui.jquery, layer = layui.layer, table = layui.table;
    var only = 0;
    function esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
    function fmtTime(ts){ if(!ts){return '—';} var d=new Date(Number(ts)*1000),p=function(n){return (n<10?'0':'')+n;}; return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate())+' '+p(d.getHours())+':'+p(d.getMinutes())+':'+p(d.getSeconds()); }
    function reload(){ table.reload('alertTable', { where: only ? { unread: 1 } : {} }); }

    // ================= 表格 =================
    table.render({
        elem: '#alertTable',
        url: '/iot/backend/alerts',
        page: true,
        limit: 20,
        limits: [10, 20, 50, 100],
        parseData: function (res) {
            return {
                code: res.code,
                msg: res.message || res.msg || '',
                count: (res.data && res.data.count) || 0,
                data: (res.data && res.data.list) || []
            };
        },
        cols: [[
            { field: 'id', title: 'ID', width: 60, align: 'center' },
            { field: 'level', title: '级别', width: 80, align: 'center', templet: function (d) {
                    var map = {3:['layui-bg-red','严重'], 2:['layui-bg-orange','警告'], 1:['layui-bg-blue','提示']};
                    var m = map[d.level] || ['', d.level];
                    return '<span class="layui-badge ' + m[0] + '">' + m[1] + '</span>';
                } },
            { field: 'type', title: '类型', width: 100, templet: function (d) { return esc(d.type); } },
            { field: 'uuid', title: '设备', width: 130, templet: function (d) { return d.uuid ? esc(d.uuid) : '<span style="color:#aaa;">—</span>'; } },
            { field: 'title', title: '标题', minWidth: 140, templet: function (d) { return esc(d.title); } },
            { field: 'content', title: '内容', minWidth: 200, templet: function (d) { return esc(d.content); } },
            { field: 'member_id', title: '会员', width: 80, align: 'center', templet: function (d) {
                    return d.member_id ? 'M' + d.member_id : '<span style="color:#aaa;">—</span>';
                } },
            { field: 'is_read', title: '状态', width: 80, align: 'center', templet: function (d) {
                    return d.is_read ? '<span class="layui-badge layui-bg-gray">已读</span>' : '<span class="layui-badge layui-bg-green">未读</span>';
                } },
            { field: 'create_at', title: '时间', width: 155, templet: function (d) { return fmtTime(d.create_at); } },
            { title: '操作', width: 110, align: 'center', toolbar: '#barAlert' }
        ]]
    });

    table.on('tool(alertTable)', function (obj) {
        if (obj.event === 'read') { readOne(obj.data.id); }
    });

    // ================= 单条已读 =================
    function readOne(id){
        http.post('/iot/backend/readAlertAll', {ids:[id]}).then(function(res){
            layer.msg(res.message || '已标记');
            setTimeout(reload, 400);
        });
    }

    // ================= 只看未读 / 全部已读 =================
    $('#btnUnread').on('click', function(){
        only = only ? 0 : 1;
        $(this).text(only ? '看全部' : '只看未读');
        reload();
    });
    $('#btnAllRead').on('click', function(){
        layer.confirm('确认将全部告警标记为已读？', function(idx){
            http.post('/iot/backend/readAlertAll', {ids:[]}).then(function(res){
                layer.close(idx);
                layer.msg(res.message || '已标记');
                setTimeout(reload, 500);
            });
        });
    });
});
</script>