本文是关于无纸化会议系统管理端设备管理的介绍,本界面使用html+css+js进行开发,使用Vue框架和ElementUI进行辅助开发。会议开始之前,管理员需要将会议设备添加到系统中,只有添加到系统中的设备才能参加会议。
当我们打开设备管理网页时,首先会显示当前已经在系统中注册过的设备的信息,这些设备的信息是从服务器中获取的,部分实现代码如下所示:
created : function () {
//获取所有设备列表
var url = website + "/device/getDeviceList";
$.ajax({
type:"GET",
url:url,
data:{
},
success:function(re){
if(re['code']==200){
//将设备信息存入设备列表padList
var pads = re['obj'];
for(var i = 0; i < pads.length; i++){
page.padList.push({
deviceId : pads[i]['uid'],
deviceName : pads[i]['name'],
deviceMac : pads[i]['mac'],
});
}
}
}
});
}
实现的效果如下图所示:
在每个设备的右侧有一个删除按钮,点击删除按钮可以将该设备从注册设备列表中移除,即向服务器发送一个删除该设备的请求,部分实现代码如下所示:
deleteSure(){
//确认删除
//获取要删除的设备的ID
var deleteDeviceId = this.currentRow['deviceId'];
//删除该设备
$.ajax({
type:"POST",
url:website+"/device/deleteDevice",
data:{
id : deleteDeviceId
},
success:function(re){
if(re['code']==200){
}
}
});
this.dialogVisible = false;
}
然后我们点击添加设备按钮就会跳转到添加设备界面,开始添加设备,这个时候我们需要向服务器发出一条请求,说明接下来开始添加设备,部分实现代码如下所示:
addSure(){
//确认开启允许新设备连接
$.ajax({
type : "POST",
url : website+"/device/allowDeviceConnect",
data : {
},
success:function(re){
if(re['code']==200){
alert("开启成功");
this.addVisible = false;
window.location.href="device_manage_2.html"
}
}
});
}
接下来进入添加设备界面,这个界面上会显示当前所有连接到路由器的设备信息,这些设备的信息是从服务器中获取的,部分实现代码如下所示:
created : function () {
//获取所有在线设备
var url = website + "/device/getRouterInfo";
$.ajax({
type:"GET",
url:url,
data:{
},
success:function(re){
if(re['code']==200){
//将设备信息存入在线设备列表onlinePadList
var pads = re['obj']['clients'];
for(var i = 0; i < pads.length; i++){
page.onlinePadList.push({
deviceIp : pads[i]['ip'],
deviceName : pads[i]['name'],
deviceMac : pads[i]['mac'],
deviceOnline : pads[i]['online'],
deviceBlocked : pads[i]['blocked']
});
}
}
}
});
}
实现的效果如下图所示:
在设备列表中显示的就是当前所有连接到路由器的设备,我们可以点击设备右侧的加入按钮将该设备添加到系统中,这样,该设备就可以参加会议了,点击加入之后,管理员需要为该设备设置一个名称,以便加入会议时便于区分,设置好名称之后,点击确定,该设备就会被添加到系统中了,部分实现代码如下所示:
addSure(){
//确认添加
//获取点击设备的mac
var cMac = this.currentRow['deviceMac'];
//向服务器添加设备
$.ajax({
type:"POST",
url:website+"/device/addDevice",
data:{
name : this.deviceName,
mac : cMac
},
success:function(re){
if(re['code']==200){
alert("添加成功");
}
}
});
this.addDeviceVisible = false;
}
当管理员添加完所有的会议设备之后,点击添加结束按钮,添加设备就完成了,之后就不能继续添加设备了,部分实现代码如下所示:
addEnd(){
//添加结束,禁止新设备连接
$.ajax({
type:"POST",
url:website+"/device/blockNewDevice",
data:{
},
success:function(re){
if(re['code']==200){
alert("添加结束");
this.addEndVisible = false;
window.location.href="device_manage.html"
}
}
});
}
这样,整个设备管理就完成了。