前端报警信息的实现

现在前台需要这样一个效果:
当后台有错误信息时,前台显示如下:

那个红色的点会不断地闪烁,如下:



待用户点击故障报警后,弹出具体信息:



待点击确定后 如下




过一会,如果系统中又有新的,用户还没有检查的故障,红点就会出现并且继续闪烁。


前台主要的html
         
  <div class="user">
            
          <span id="alert">
                
                <a  οnclick="showDetail()" id="arert_img">
                <img border="0" style="padding-top: 5px;" src="images/th.png" />
                </a>
                
                 <a    href="#" id="editpass"  οnclick="showDetail()"
                    style="color: #B8CEDA; font-size: 14px;">故障报警
                </a>
                
          </span>

          <div id="alert_detail" class="easyui-dialog" title="消息警报"
                    data-options="modal:true,closed:true,iconCls:'icon-save'"
                    style="width: 750px; height: 360px; padding: 10px;">
                    <p>请查看以下警告!</p>
                    <table id="dg"></table>
                    <div style="text-align: center; padding: 10px">
                        <a href="javascript:void(0)" class="easyui-linkbutton"
                            οnclick="$('#alert_detail').window('close');">确定</a>
                    </div>
          </div>
  </div>


实现的逻辑是这样的:
1 首先检查是否有未查看的警告信息。  
 function checkData() {
        $.ajax({
            type : "get",
            url : "HintCount",
            success : function(data) {
                $('#cc').html(data);
                if (data != 0) {
                    document.getElementById('alert').style.display = "";
                    showImg();
                } else {
                    document.getElementById('alert').style.display = "none";
                    
                }
            }
        });
        return false;
    }
HintCount从数据库中取出未读的消息数目。
如果存在未读的消息,就转到showImg();
2  showImg
    var f;
    function showImg() {
        var s=document.getElementById('arert_img');
        if (s.style.visibility == "visible")
            //如果可见,则隐藏
            s.style.visibility = "hidden";
        else
            s.style.visibility = "visible";
        //设置图像可见
        f = setTimeout('showImg()', 500);
        //间隔的毫秒s
    }
逻辑很清楚吧。关于这个f,到底有什么用,大家继续往后看。

3 点击故障报警

  
  function showDetail() {
        $('#alert_detail').window('open');
        /*  var s=$('#w');
         alert(s); */
        showdata();
        setTimeout('changeStatus()', 500);
    }
    
    //把未读变成已读
    function changeStatus() {
        $.ajax({
            type : "post",
            url : "HintFlag",
            success : function(data) {

            }
        });
        return false;
    }

    function showdata() {
        $('#dg').datagrid({
            url : 'HintContent',
            method : 'get',
            title : '消息警报列表',
            width : 700,
            height : 250,
            fitColumns : true,
            singleSelect : true,
            columns : [ [ {
                field : 'id',
                title : 'ID',
                width : 100,
                align : 'center'
            }, {
                field : 'date',
                title : '消息时间',
                width : 300,
                align : 'center'
            }, {
                field : 'content',
                title : '消息内容',
                width : 400,
                align : 'center'
            }, ] ],
            onHeaderContextMenu : function(e, field) {
                e.preventDefault();
                if (!cmenu) {
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left : e.pageX,
                    top : e.pageY
                });
            }
        });
    }
这里用到了easyui的相关组件。大家自己学习一下吧。

如果只是这样的话,即使查看了报警信息,红点依然在不断闪烁。为什么?
    function showImg() {
        var s=document.getElementById('arert_img');
        if (s.style.visibility == "visible")
            //如果可见,则隐藏
            s.style.visibility = "hidden";
        else
            s.style.visibility = "visible";
        //设置图像可见
        f = setTimeout('showImg()', 500);
        //间隔的毫秒s
    }
showImg已经自成循环了。
怎么办?
在第一步checkData后就清除掉那个f。
现在大家知道定时器f的作用了吧。
    function clear() {
        clearTimeout(f);
        checkData();
    }
    checkData();
    setInterval('clear()', 3000);
ok,我们看看完整的代码
<script type="text/javascript">
    function showDetail() {
        $('#alert_detail').window('open');
        /*  var s=$('#w');
         alert(s); */
        showdata();
        setTimeout('changeStatus()', 500);
    }
    
    //把未读变成已读
    function changeStatus() {
        $.ajax({
            type : "post",
            url : "HintFlag",
            success : function(data) {

            }
        });
        return false;
    }
    var f;
    function showImg() {
        var s=document.getElementById('arert_img');
        if (s.style.visibility == "visible")
            //如果可见,则隐藏
            s.style.visibility = "hidden";
        else
            s.style.visibility = "visible";
        //设置图像可见
        f = setTimeout('showImg()', 500);
        //间隔的毫秒s
    }

    
    //查看数据库中是否有为读数据
    function checkData() {
        $.ajax({
            type : "get",
            url : "HintCount",
            success : function(data) {
                $('#cc').html(data);
                if (data != 0) {
                    document.getElementById('alert').style.display = "";
                    showImg();
                } else {
                    document.getElementById('alert').style.display = "none";
                    
                }
            }
        });
        return false;
    }
    function showdata() {
        $('#dg').datagrid({
            url : 'HintContent',
            method : 'get',
            title : '消息警报列表',
            width : 700,
            height : 250,
            fitColumns : true,
            singleSelect : true,
            columns : [ [ {
                field : 'id',
                title : 'ID',
                width : 100,
                align : 'center'
            }, {
                field : 'date',
                title : '消息时间',
                width : 300,
                align : 'center'
            }, {
                field : 'content',
                title : '消息内容',
                width : 400,
                align : 'center'
            }, ] ],
            onHeaderContextMenu : function(e, field) {
                e.preventDefault();
                if (!cmenu) {
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left : e.pageX,
                    top : e.pageY
                });
            }
        });
    }
    function clear() {
        clearTimeout(f);
        checkData();
    }
    
    checkData();

    setInterval('clear()', 3000);
    //setInterval('showdata()',3000);
    
</script>


这个小模块,主要由西安电子科技大学计算机学院2014级研究生李健同学完成。特此说明。

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值