Django告警功能页面升级版
本页面主要是实现以下功能：获取数据库中的实时人数，根据各个项目个性化的设置参数进行告警，包括发送告警对象、告警方式、告警阀值等等。
页面样式如下：
点击提交，进行确认：
提交更改之后，会收到服务器返回的数据展示：
视图函数如下：
import os
from django.http import HttpResponse
from django.shortcuts import render, redirect
from dwebsocket.decorators import accept_websocket
from websocket.utils import exec_command, put_file, auth
import json
from websocket import models
@auth
@accept_websocket
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))
return HttpResponse(json.dumps("你的修改已提交至服务器"))
# print(models.UserList.objects.all())
program = "test"
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%;
}
#myModal{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
{% endblock %}
{% block content %}
项目：test
状态: {{ stus }}
创建时间：{{ ctime }}
告警状态：
选择发送告警的对象：
{% for people in data %}
- {{ people }}
{% endfor %}
设置告警阀值[0-100]：>
%
选择告警方式：
{% for way in away %}
- {{ way }}
{% endfor %}
状态开始时间：
状态结束时间：
{% endblock %}
{% block assest_js %}
{% endblock %}
{% block footer %}
脚本正在执行中，请耐心骚等......
{% 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 alp = $("#alertprogram").text()
var als = $("#alertstatus").text()
var crt = $("#createtime").text()
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(",");
var result = alp + "
" + als + "
" + crt + "
" +
"alert_status: " + alert_status + "
"
+ "alert_value: " + alertval + "
" + "start_time: " + start_time
+ "
" + "end_time: " + end_time + "
"
+ "告警接收人：" + persons + "
"
+ "告警方式：" + ways;
$("#modal_content").html(result);
});
$("#submit").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) {
sweetAlert(msg);
}
});
});
});
ps：js这一块写的有点冗余，主要是两次按钮点击都要去获取页面中的各个参数，各位如果有更好的方法还请指教。