rax-medical/src/views/remote-manage/part/remote-dialog.vue

<template>
    <el-dialog class="header-none" v-model="dialogVisible" :width="700" :show-close="false">
        <div class="content-box">
            <img src="@/assets/imgs/remote/remote_bck.png">
            <div class="info">
                <h3>连接云服务器</h3>
                <br>
                <p>云服务器连接状态：{{ patientInfo.isRemote ? '已连接' : '未连接' }}</p>
                <p>输入用户名：{{ patientInfo.serverUser }}</p>
                <p>密码：*********</p>
                <br>
                <p class="input-box"><span>输入病人姓名：</span><el-input v-model="patientInfo.patientName"></el-input></p>
                <p class="input-box"><span>输入病人身份证号：</span><el-input v-model="patientInfo.patientCode"></el-input></p>
            </div>
        </div>
        <div class="btn-box">
            <el-button class="f18" type="primary" @click="confirmRemote">确定连接</el-button>
            <!-- <el-button class="f18" @click="breakRemote">断开连接</el-button> -->
            <el-button class="f18" @click="dialogVisible = false">返回</el-button>
        </div>
    </el-dialog>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useRemoteStore } from '@/stores/remote-info-store';
import type { RemoteItem } from '@/utils/public-interface';

const router = useRouter()

const emit = defineEmits(['confirmRemote', 'errorRemote', 'breakRemote'])

const dialogVisible = ref(false)
const patientInfo = ref({} as RemoteItem)

defineExpose({
    open,
    close,
})
onMounted(() => {

})

function open(e: RemoteItem) {
    patientInfo.value = JSON.parse(JSON.stringify(e))
    dialogVisible.value = true
}
function close() {
    dialogVisible.value = false
}

const confirmRemote = () => {
    if(patientInfo.value.patientCode) {
        ElMessage.success('连接成功！')
        patientInfo.value.isRemote = true
        patientInfo.value.title = '远程控制' + (patientInfo.value.index + 1)
        emit('confirmRemote', patientInfo.value)
        close()
    }else{
        ElMessage.error('连接失败！')
        emit('errorRemote', patientInfo.value)
    }
}
const breakRemote = () => {
    ElMessage.info('连接已断开！')
    emit('breakRemote', patientInfo.value)
    close()
}

</script>

<style lang='scss' scoped>
.content-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>img {
        width: 260px;
        border: 1px solid #C77000;
        border-radius: 20px;
    }
    .info {
        width: calc(100% - 290px);
        color: $main-color;
        line-height: 2;
        font-weight: 600;
        h3 {
            font-size: 28px;
        }
        p {
            font-size: 15px;
        }
        .input-box {
            display: flex;
            align-items: center;
            &>span {
                flex-shrink: 0;
            }
            :deep(.el-input) {
                border-bottom: 1px solid $text3-color;
                .el-input__wrapper {
                    box-shadow: none;
                    padding: 0;
                    input {
                        height: 20px;
                        font-size: 15px;
                        color: $main-color;
                    }
                }
            }
        }
    }
}
.btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    .el-button {
        font-weight: 600;
        padding: 15px 50px;
        height: auto;
    }
    
}
</style>