双选下拉菜单设计:
[root@yyjk templates]# cat displaymq.html
<head>
<title>运维平台</title>
<link rel="stylesheet" type="text/css" href="/static/Css/Monitor/displaymq.css">
<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
</head>
<body>
<include file="Public:header"/>
<div class="content">
<include file="Public:menu"/>
<div class="con fl">
<label class="condition">环境</label>
<select name="env" class="monitor">
<option value="MQ">MQ</option>
</select>
<label class="condition">应用</label>
<select name="app" class="monitor">
</select>
<label class="condition">队列管理器</label>
<select name="qmrg" class="monitor">
</select>
<input type="submit" value="关闭MQ监控" class="monitor_add">
<input type="submit" value="开启MQ监控" class="monitor_start">
</div>
<table class="gridtable fr">
<tr><th>应用</th><th>队列管理器</th><th>通道</th><th>IPADDR</th><th>PORT</th><th>监控状态</th></tr>
</table>
</div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/displaymq.js"></script>
<!script type="text/javascript" src="/static/Js/Public/menu.js"><!/script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>
<html>
这里的应用和队列管理器都是从接口获取的
2.
[root@yyjk Monitor]# cat displaymq.js
??$(function(){
var _env_select = $("select[name='env']");
var _app_select = $("select[name='app']");
var _qmgr_select = $("select[name='qmrg']");
var _sub_btn = $(".monitor_add");
var _qmgr_btn = $(".monitor_start");
var env = _env_select.val();
getTemp("pro");
getGroup("pro");
function getTemp(env){
var data = {};
var successfn = function(jdata){
var _HTML = "";
_app_select.html("");
$.each(jdata,function(i,val){
_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
});
_app_select.html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/getmqlist",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
/* $.axg(
* "/DEVOPS/index.php/Monitor/getTemp",
* data,
* successfn,
* errorfn
* ); */
}
function getGroup(env){
var data = {};
var successfn = function(jdata){
console.log(jdata);
var _HTML = "";
_qmgr_select.html("");
$.each(jdata,function(i,val){
_HTML = _HTML + "<option value="+jdata[i][0]+">"+jdata[i][0]+"</option>";
});
_qmgr_select.html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/getqmgrlist",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
/* $.axg(
* "/DEVOPS/index.php/Monitor/getGroup",
* data,
* successfn,
* errorfn
* ); */
}
_env_select.on("change",function(){
env = _env_select.val();
getTemp(env);
});
_env_select.on("change",function(){
env = _env_select.val();
getGroup(env);
});
_sub_btn.on("click",function(){
var env = _env_select.val();
var app = _app_select.val();
var qmgr = _qmgr_select.val();
var data = {};
data.env = env;
data.app = app;
data.qmgr = qmgr;
var successfn = function(jdata){
var jdata = eval(jdata);
$(".gridtable").empty();
$(".gridtable").empty();
var _HTML="<tr><th>应用</th><th>队列管理器</th><th>通道</th><th>IPADDR</th><th>PORT</th><th>监控状态</th></tr>";
$.each(jdata,function(i,val){
_HTML=_HTML+"<tr><td>"+jdata[i][0]+"</td><td>"+jdata[i][1]+"</td><td>"+jdata[i][2]+"</td><td>"+jdata[i][3]+"</td><td>"+jdata[i][4]+"</td><td>"+jdata[i][5]+"</td></tr>";
});
$(".gridtable").html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/stopqmgrmonitor",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
});
_qmgr_btn.on("click",function(){
var env = _env_select.val();
var app = _app_select.val();
var qmgr = _qmgr_select.val();
var data = {};
data.env = env;
data.app = app;
data.qmgr = qmgr;
var successfn = function(jdata){
var jdata = eval(jdata);
$(".gridtable").empty();
$(".gridtable").empty();
var _HTML="<tr><th>应用</th><th>队列管理器</th><th>通道</th><th>IPADDR</th><th>PORT</th><th>监控状态</th></tr>";
$.each(jdata,function(i,val){
_HTML=_HTML+"<tr><td>"+jdata[i][0]+"</td><td>"+jdata[i][1]+"</td><td>"+jdata[i][2]+"</td><td>"+jdata[i][3]+"</td><td>"+jdata[i][4]+"</td><td>"+jdata[i][5]+"</td></tr>";
});
$(".gridtable").html(_HTML);
};
var errorfn = function(jdata){
alert("数据返回出错");
};
$.ajax({
type: "get",
data: data,
url: "/api/startqmgrmonitor",
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
});
});
3.接口
def stopqmgrmonitor(req):
print req.get_full_path()
print req.GET['env']
app= req.GET['app']
qmgr= req.GET['qmgr']
conn= MySQLdb.connect(
host='127.0.0.1',
port = 3306,
user='root',
passwd='1234567',
db ='DEVOPS',
charset="UTF8"
)
cur = conn.cursor()
b=cur.execute("update mon_mq set flag ='0' where name=%s and qmgr=%s",[app,qmgr])
conn.commit()
print '----------------------------------------'
print b
print '-----------------------------------------'
a = cur.execute("select name,qmgr,channel,ipaddr,port,flag from mon_mq" )
info = cur.fetchall()
print info
print type(info)
return HttpResponse(json.dumps(info), content_type="application/json")
def startqmgrmonitor(req):
print req.get_full_path()
print req.GET['env']
app= req.GET['app']
qmgr= req.GET['qmgr']
conn= MySQLdb.connect(
host='127.0.0.1',
port = 3306,
user='root',
passwd='1234567',
db ='DEVOPS',
charset="UTF8"
)
cur = conn.cursor()
b=cur.execute("update mon_mq set flag ='1' where name=%s and qmgr=%s",[app,qmgr])
conn.commit()
print '----------------------------------------'
print b
print '-----------------------------------------'
a = cur.execute("select name,qmgr,channel,ipaddr,port,flag from mon_mq" )
info = cur.fetchall()
print info
print type(info)
return HttpResponse(json.dumps(info), content_type="application/json")