管理端-设备管理

本文是关于无纸化会议系统管理端设备管理的介绍，本界面使用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"
							}
						}
					});
      			}

这样，整个设备管理就完成了。