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.serverun }}</p>
        <p>密码：*********</p>
        <br>-->
        <p class="input-box"><span>输入病人姓名：</span>
          <el-input v-model="patientInfo.patient"></el-input>
        </p>
        <p class="input-box"><span>输入病人身份证号：</span>
          <el-input v-model="patientInfo.patientId"></el-input>
        </p>
        <p class="input-box"><span>请选择手术时间：</span>
          <el-date-picker
            v-model="patientInfo.date"
            type="date"
            placeholder="请选择日期"
          />
        </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" style="margin-left: 50px;" @click="dialogVisible = false">返回</el-button>
    </div>
  </el-dialog>
</template>

<script lang='ts' setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {useRemoteWsStore} from "@/stores/remote-ws-store";
import {dateFormater} from "@/utils/date-util";

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

const dialogVisible = ref(false)
const patientInfo = ref({} as any)
const remoteWsStore = useRemoteWsStore();

defineExpose({
  open,
  close,
})

function open(e: number) {
  patientInfo.value = remoteWsStore.remoteTasks[e]
  dialogVisible.value = true
}

function close() {
  dialogVisible.value = false
}

const confirmRemote = () => {
  if (patientInfo.value.patientId && patientInfo.value.patient) {
    ElMessage.success('连接成功！')
    patientInfo.value.isRemote = true
    patientInfo.value.taskName = '远程控制' + (patientInfo.value.index + 1)
    patientInfo.value.date = dateFormater("yyyy-MM-dd", patientInfo.value.date)
    unsubscribeLastTask();
    remoteWsStore.$patch({currentTaskIndex: patientInfo.value.index})
    remoteWsStore.setRemoteLog({
      time: new Date(),
      taskName: patientInfo.value.taskName,
      state: '连接成功',
      type: "normal"
    }, remoteWsStore.currentTaskIndex)
    emit('confirmRemote', patientInfo.value)
    close()
  } else {
    remoteWsStore.setRemoteLog({
      time: new Date(),
      taskName: patientInfo.value.taskName,
      state: '连接失败'
    }, patientInfo.value.index)
    ElMessage.error('连接失败！')
    emit('errorRemote', patientInfo.value)
  }
}
const breakRemote = () => {
  ElMessage.info('连接已断开！')
  emit('breakRemote', patientInfo.value)
  close()
}

const unsubscribeLastTask = () => {
  const lastTaskIndex = remoteWsStore.currentTaskIndex;
  const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
  if (lastTask) {
    remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date);
  }
}

</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: center;
    align-items: center;
    margin-top: 50px;
    .el-button {
        font-weight: 600;
        padding: 15px 50px;
        height: auto;
    }
    
}
</style>