inspection-host-computer/src/views/Address.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: ''
})

const rules = ref({
    ip: [
        { required: true, message: '请输入机器人IP和端口', trigger: 'blur' }
    ],
})

const testConnect = async () => {
    robotStore.setIp(ruleForm.value.ip)
    // const valid = await ruleFormRef.value.validate();
    // if (valid) {
    //     const result = await getCurrentMapName({
    //         ip: robotStore.ip,
    //         deviceId: VITE_AGV_DEVICE_ID,
    //     })
    //     if (result.code === 200) {
    //         router.push({
    //             path: '/home',
    //             query: {
    //                 mapName: result.data.current_map
    //             }
    //         })
    //     }
    // }

    router.push({
        path: '/home',
        query: {
            mapName: 'test'
        }
    })
}

</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>