Django实践之告警参数设置功能

效果如下：
告警页面
路由参数：

from websocket.views import alert_page,boke_view,index_view
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^alert_page/$', alert_page.alertpage),
]

视图参数：

#数据都可以改为从数据库读取
def alertpage(request):
    print(request.method)
    if request.method == 'POST':
        alertvalue = request.POST.get('alertval')
        starttime = request.POST.get('starttime')
        endtime = request.POST.get('endtime')
        status = request.POST.get('alertstatus')
        print('alertvalue:', alertvalue, 'starttime:', starttime, 'endtime:', endtime)
        print('是否开启告警:', status)

        people = request.POST.get('people')
        print(people)
        alertway = request.POST.get('alertway')
        print(alertway)
        dataresult = 'people: ' + people + 'alert way: ' + alertway + 'alert value: ' + alertvalue + 'alert start time: ' \
                     + starttime + 'alert end time: ' + endtime + 'status: ' + status
        return HttpResponse(json.dumps(dataresult))

    program = "****"
    status = "运营中"
    create_time = "2019-03-04 9:00"

    alert_way = ['mail', 'phone', 'wechat']

    people_list = ['张三', '李四', '王五', '赵六']
    return render(request, 'alert_page.html', {'prm': program,
                                               'stus': status,
                                               'ctime': create_time,
                                               'data': people_list,
                                               'away': alert_way,
                                               })

前端html：

{% extends 'base.html' %}
{% block title %}GOP角色上报{% endblock %}
{#{% block main-title %}平台游戏{% endblock %}#}
{% block main-father %}项目告警{% endblock %}
{% block main-name %}告警配置{% endblock %}
{% block mycss %}
    #is_run {
    color:#f00;
    }
    .no_display {
    display:none;
    }
    #fruit li,#alertway li{
    display:inline-block;
    width:4%;
    }
{% endblock %}

{% block content %}
    <table class="table table-bordered">

        <tr class="success">
            <td>
                <div style="margin-bottom: 20px;padding: 20px;color: orangered;background: white;font-weight: bold">
                    项目：{{ prm }}<br/>
                    状态: {{ stus }}<br/>
                    创建时间：{{ ctime }}<br/>

                    告警状态：<label class="radio-inline">
                    <input type="radio" name="status" id="show" value="display" checked> 开启
                </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" id="notshow" value="notdisplay"> 关闭
                    </label>
                </div>

                <div id="who" style="background: white;padding: 20px;" class="toggleClass">
                    <p style="font-weight: bold;color: royalblue;">选择发送告警的对象：</p>
                    <button id="checkAll" style="margin-right:10px;">全选</button>
                    <button id="nothing" style="margin-right:10px;">全不选</button>
                    <button id="reverseAll" style="margin-right:10px;">反选</button>
                    <ul id="fruit" style="padding-left: 0px;padding-top: 20px;list-style: none">
                        {% for people in data %}
                            <li><input type="checkbox" name="test" value="{{ people }}"/>{{ people }}</li>
                        {% endfor %}
                    </ul>
                </div>

                <div id="what" class="input-group" style="width: 20%;margin-top: 20px">
                    <span class="input-group-addon" style="font-weight: bold;color: royalblue;">
                        设置告警阀值[0-100]：></span>
                    <input id="alertval" class="form-control" value="0" type="number">
                    <span class="input-group-addon">%</span>
                </div>

                <div id="how" style="margin-top:20px;background: white;padding: 20px;">
                    <p style="font-weight: bold;color: royalblue;">选择告警方式：</p>
                    <button id="selectAll" style="margin-right:10px;">全选</button>
                    <button id="none" style="margin-right:10px;">全不选</button>
                    <button id="reverAll" style="margin-right:10px;">反选</button>
                    <ul id="alertway" style="padding-left: 0px;padding-top: 20px;list-style: none">
                        {% for way in away %}
                            <li><input type="checkbox" name="away" value="{{ way }}"/>{{ way }}</li>
                        {% endfor %}
                    </ul>
                </div>


                <div id="when" style="margin-top:20px;padding: 20px;background: white;">
                    <p style="font-weight: bold;color: royalblue;">状态开始时间：<input id="start_time" style="color: black;"
                                                                                 type="datetime-local"/></p>
                    <p style="font-weight: bold;color: royalblue;">状态结束时间：<input id="end_time" style="color: black;"
                                                                                 type="datetime-local"/></p>
                </div>

                <div class="form-group" style="margin-top: 20px;">
                    <button class="btn-success btn-lg " id="setconfig" value="game_backup">提交配置</button>
                </div>
            </td>
        </tr>
    </table>

    <div id="result">
    </div>

{% endblock %}
{% block assest_js %}
    <script src="/statics/plugins/echarts/echarts.js"></script>
    <script src="/statics/js/my_js/alert_page.js"></script>
{% endblock %}

{% block footer %}
    <div id="is_run" hidden="hidden" class=""><h5>脚本正在执行中，请耐心骚等......</h5></div>
{% endblock %}

前端js：

/**
 * Created by zhangbingwei on 2019/3/08.
 * 告警配置
 */

$(function () {
    $("input[type=radio][name=status]").change(function () {
        if (this.value == 'display') {
            $("#who").show(200);
            $("#what").show(400);
            $("#how").show(600);
            $("#when").show(800);
        }
        else if (this.value == 'notdisplay') {
            $("#who").hide(800);
            $("#what").hide(600);
            $("#how").hide(400);
        }
    });

    $("#All").click(function () {
        if ("this.checked") {
            $("#fruit :checkbox").prop("checked", true);
        } else {
            $("#fruit :checkbox").prop("checked", false);
        }
    });

    <!--选择全部-->
    $("#checkAll").click(function () {
        $("#fruit :checkbox").prop("checked", true);
    });

    <!--全不选-->
    $("#nothing").click(function () {
        $("#fruit :checkbox").prop("checked", false);
    });

    <!--反选-->
    $("#reverseAll").click(function () {
        $("#fruit :checkbox").each(function (i) {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });


    $("#All").click(function () {
        if ("this.checked") {
            $("#alertway :checkbox").prop("checked", true);
        } else {
            $("#alertway :checkbox").prop("checked", false);
        }
    });

    <!--选择全部-->
    $("#selectAll").click(function () {
        $("#alertway :checkbox").prop("checked", true);
    });

    <!--全不选-->
    $("#none").click(function () {
        $("#alertway :checkbox").prop("checked", false);
    });

    <!--反选-->
    $("#reverAll").click(function () {
        $("#alertway :checkbox").each(function (i) {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });


    $("#setconfig").click(function () {
        var alert_status = $('input[name="status"]:checked').val();
        var alertval = $("#alertval").val();
        var start_time = $("#start_time").val();
        var end_time = $("#end_time").val();

        <!--选择发送告警对象-->
        var pers = new Array();
        $('#fruit input[name="test"]:checked').each(function (index, item) {
            pers[index] = $(item).parent().text();
        })
        var persons = pers.join(",");

        <!--选择发送告警方式-->
        var alertway = new Array();
        $('#alertway input[name="away"]:checked').each(function (index, item) {
            alertway[index] = $(item).parent().text();
        })
        var ways = alertway.join(",");

        $.ajax({
            url: '/alert_page/',
            dataType: 'json',
            type: 'POST',
            data: {
                'people': persons,
                'alertway': ways,
                'alertval': alertval,
                'starttime': start_time,
                'endtime': end_time,
                'alertstatus':alert_status,
            },
            success: function (msg) {
                alert(msg);
            }
        });

    });

});

这是一个完整的告警页面开发流程，包括路由参数、视图函数、前端css、html、js以及前后端数据的交互等等，做个记录以防自己后面需要。

Django实践之告警参数设置功能

猜你喜欢