漏刻有时数据可视化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;
        }

<div class="status">
    <span id="cur">状态说明</span>
    <span class="stuNum1"></span><span id="normal">正常</span>
    <span class="stuNum2"></span><span id="heightNorm">过高</span>
    <span class="stuNum3"></span><span id="lowNorm">过低</span>
</div>

单个状态动画

/*状态按钮*/
        .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;
        }

<div class="status">
    <span class="temp" id="alert"></span><span id="normal">正常</span>
</div>

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 <= max) {
            $(id).removeClass("tempbg1").removeClass("tempbg3").addClass("tempbg2");//tempbg2
            $(status).html("正常");
        }

        if (num < min) {
            $(id).removeClass("tempbg1").removeClass("tempbg2").addClass("tempbg3");//tempbg3
            $(status).html("过低");
        }
    }

    //随机范围整数;
    function randData(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        var num = Min + Math.round(Rand * Range);
        return num;
    }

Lockdatav Done!