前面增加的几个按钮,需要绑定事件,传到后台,
前台vue代码:
<el-button
:disabled="changeBtn"
plain
@click="remoteCon(1)"
:class="pixelType == 0 ? 'btnin' : ''"
>前进</el-button
>
四个按钮都绑定remoteCon()事件,参数分别为1,2,3,4,对应前进后退,左转右转,
在methods里面定义按钮事件:
remoteCon(num,roId){
roId=this.robotId;
console.log(num,roId);
console.log(roId);
remoteControl(num,roId);
return ;
}
参数num为当前是哪个按钮,roId为当前机器人id;
在js里面定义 remoteControl(num,roId);,调用后台接口:
export function remoteControl(num,roId) {
return request({
url: 'web/robot/remoteConRobot',
method: 'post',
params: {
num,
roId
}
})
}
在vue界面引入这个方法:
要注意,按钮绑定事件remoteCon()和调用接口方法remoteControl()不能重名,之前我都是定义remoteControl(),结果import { remoteControl } from "@/api/robot";
是灰色的,‘remoteControl’ is declared but its value is never read.Vetur(6133),意思是已经声明,但未使用
后台代码:
@PostMapping(value = "remoteConRobot")
@ApiOperation("远程遥控机器人")
@ApiImplicitParams({
@ApiImplicitParam(name = "num", value = "num", required = true, dataType = "int", paramType = "query"),
@ApiImplicitParam(name = "roId", value = "roId", required = true, dataType = "int", paramType = "query"),
})
@SystemLog(module = "远程遥控机器人", methods = "远程遥控机器人", description = "远程遥控机器人")
public RestResponse remoteConRobot(int num, int roId) {
if (EmptyUtil.isEmpty(roId)) {
return RestResponse.fail("机器人id不能为空");
}
RobotEntity robotEntity = robotService.getById(roId);
if (EmptyUtil.isEmpty(robotEntity)) {
return RestResponse.fail("该机器人不存在");
}
String macId = robotEntity.getSeria();
String action = null;
switch (num){
case 1:
action="前进";
break;
case 2:
action="后退";
break;
case 3:
action="左转";
break;
case 4:
action="右转";
break;
}
Map<Object,String> map=new HashMap<>();
map.put("点击了",action);
map.put("当前机器人mac地址",macId);
return RestResponse.ok(map);
}
运行:
转载:https://blog.csdn.net/weixin_42260782/article/details/117078085
查看评论