82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="page-container">
|
||
|
|
<div class="title">设备连接登录</div>
|
||
|
|
<div class="secondaryTitle">请输入IP和端口连接后进入上位机页面</div>
|
||
|
|
<div class="form">
|
||
|
|
<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
|
||
|
|
<el-form-item label="" prop="ip">
|
||
|
|
<el-input v-model="ruleForm.ip" style="width: 240px" placeholder="请输入IP" >
|
||
|
|
<template #append>
|
||
|
|
<el-button @click="testConnect">➡</el-button>
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
<!-- <el-button @click="testConnect">➡</el-button> -->
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
import { getCurrentMapName } from '@/api/agv.js'
|
||
|
|
import { useRobotStore } from '@/stores/robot'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const robotStore = useRobotStore()
|
||
|
|
|
||
|
|
const ruleFormRef = ref()
|
||
|
|
const ruleForm = ref({
|
||
|
|
ip: '',
|
||
|
|
port: 80
|
||
|
|
})
|
||
|
|
|
||
|
|
const rules = ref({
|
||
|
|
ip: [
|
||
|
|
{ required: true, message: '请输入机器人IP和端口', trigger: 'blur' }
|
||
|
|
],
|
||
|
|
})
|
||
|
|
|
||
|
|
const testConnect = async () => {
|
||
|
|
const valid = await ruleFormRef.value.validate();
|
||
|
|
if (valid) {
|
||
|
|
const result = await getCurrentMapName({
|
||
|
|
ip: robotStore.ip,
|
||
|
|
deviceId: VITE_DEVICE_ID,
|
||
|
|
})
|
||
|
|
if (result.code === 200) {
|
||
|
|
router.push({
|
||
|
|
path: '/home',
|
||
|
|
query: {
|
||
|
|
mapName: result.data.current_map
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</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;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 40px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.secondaryTitle {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #8f8f8f;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|