漏刻有时数据可视化Echarts组件开发(1):报警状态组件CSS代码及封装函数

组状态显示

 .stuNum1 {
            display: inline-block;
            border-radius: 50%;
            background: #7CB854;
            margin: auto 5px;
            width: 1rem;
            height: 1rem;
            vertical-align: middle;
        }

        .stuNum2 {
            display: inline-block;
            border-radius: 50%;
            background: #DB2F2C;
            margin: auto 5px;
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

        .stuNum3 {
            display: inline-block;
            border-radius: 50%;
            background: #3EC6F0;
            margin: auto 5px;
            width: 15px;
            height: 15px;
            vertical-align: middle;
        }

    状态说明
    正常
    过高
    过低

单个状态动画

        /*状态按钮*/
        .temp {
            display: inline-block;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            line-height: 15px;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            margin: auto 5px;
        }

        /*过高*/
        .tempbg1 {
            background: #DB2F2C;
        }

        /*正常*/
        .tempbg2 {
            background: #438a7a;
        }

        /*过低*/
        .tempbg3 {
            background: #3EC6F0;
        }

    正常

    var timerAll;
    getBgColor("#alert", "#normal", 3);
    clearInterval(timerAll);
    timerAll = setInterval(function () {
        var temp = randData(-5, 20);
        getBgColor("#alert", "#normal", temp);
    }, 300);


    //获取背景色;
    function getBgColor(id, status, num) {
        var min = '0', max = '15';
        if (num > max) {
            $(id).removeClass("tempbg2").removeClass("tempbg3").addClass("tempbg1");//tempbg1
            $(status).html("过高");
        }

        if (num >= min && num