152 lines
4.6 KiB
Vue
152 lines
4.6 KiB
Vue
<template>
|
||
<div class="page-container">
|
||
<div class="card">
|
||
<div class="title">设备连接登录</div>
|
||
<div class="secondaryTitle">填写设备通讯参数，建立与AGV底盘和机械臂的连接</div>
|
||
<div class="tips">请操持设备与上位机在同一局域网内</div>
|
||
<div class="form">
|
||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
|
||
<el-form-item label="IP和端口" prop="ip">
|
||
<el-input v-model="ruleForm.ip" placeholder="请输入IP和端口" />
|
||
</el-form-item>
|
||
<el-form-item label="底盘设备ID" prop="agvDeviceId">
|
||
<el-input v-model="ruleForm.agvDeviceId" placeholder="请输入底盘设备ID" />
|
||
</el-form-item>
|
||
<el-form-item label="机械臂设备ID" prop="almDeviceId">
|
||
<el-input v-model="ruleForm.almDeviceId" placeholder="请输入机械臂设备ID" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button :loading="loading" @click="testConnect" class="connect">进入上位机控制页面</el-button>
|
||
</div>
|
||
<div class="error-tips">连接异常排查：检查机器人状态、局域网联通、设备ID调谐是否匹配</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { getRuntimeState } from '@/api/agv.js'
|
||
import { useRobotStore } from '@/stores/robot'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const router = useRouter()
|
||
|
||
const robotStore = useRobotStore()
|
||
|
||
const loading = ref(false)
|
||
const ruleFormRef = ref()
|
||
const ruleForm = ref({
|
||
ip: '',
|
||
agvDeviceId:'',
|
||
almDeviceId: ''
|
||
})
|
||
|
||
const rules = ref({
|
||
ip: [
|
||
{ required: true, message: '请输入机器人IP和端口', trigger: 'blur' }
|
||
],
|
||
agvDeviceId: [
|
||
{ required: true, message: '请输入底盘设备ID', trigger: 'blur' }
|
||
],
|
||
almDeviceId: [
|
||
{ required: true, message: '请输入机械臂设备ID', trigger: 'blur' }
|
||
],
|
||
})
|
||
|
||
const testConnect = async () => {
|
||
const valid = await ruleFormRef.value.validate();
|
||
if (valid) {
|
||
loading.value = true
|
||
robotStore.setIp(ruleForm.value.ip)
|
||
robotStore.setAgvDeviceId(ruleForm.value.agvDeviceId)
|
||
robotStore.setAlmDeviceId(ruleForm.value.almDeviceId)
|
||
// const result = await getRuntimeState({
|
||
// ip: robotStore.ip,
|
||
// deviceId: ruleForm.value.agvDeviceId
|
||
// })
|
||
// loading.value = false
|
||
// if (result.code === 200) {
|
||
// robotStore.setPosition(result.data.pose)
|
||
// robotStore.setBattery(result.data.battery)
|
||
// robotStore.setCurrentMap(result.data.current_map)
|
||
// router.push({
|
||
// path: '/home'
|
||
// })
|
||
// } else {
|
||
// ElMessage.error(result?.message || '连接服务错误')
|
||
// }
|
||
router.push({
|
||
path: '/home'
|
||
})
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
background-image: url(../assets/address.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.card {
|
||
padding: 40px;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
width: 600px;
|
||
border-radius: 20px;
|
||
|
||
.title {
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
color: #000;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.secondaryTitle {
|
||
font-size: 20px;
|
||
color: #8f8f8f;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tips {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
padding: 4px 16px;
|
||
color: #003af7;
|
||
background: #b7c5f3;
|
||
border-radius: 12px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
height: 40px;
|
||
}
|
||
|
||
.connect {
|
||
width: 340px;
|
||
height: 50px;
|
||
display: inline-block;
|
||
padding: 4px 20px;
|
||
color: #fff;
|
||
background: #003af7;
|
||
border-radius: 12px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.error-tips {
|
||
text-align: center;
|
||
font-size: 14px;
|
||
color: #8f8f8f;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style> |