tapi/z_ele/src/components/LockScreenState/index.vue
2025-08-28 23:15:28 +08:00

63 lines
1.5 KiB
Vue

<template>
<ele-modal
title="设备已被锁定"
v-model="visible"
:modal-penetrable="false"
:append-to-body="true"
:lock-scroll="true"
center
:close-on-press-escape="false"
:close-on-click-modal="false"
:show-close="false"
:fullscreen="true"
>
<div style="text-align: center">
<h1>请输入锁屏密码进行解锁</h1>
</div>
<div style="margin-top: 10%">
<el-input
type="password"
v-model="lockPassword"
size="large"
placeholder="请输入密码解锁"
/>
<div style="margin-top: 20px">
<el-button
:loading="unlockLoading"
class="ele-fluid"
type="primary"
@click="confirmUnlock"
>解锁客户端</el-button
>
</div>
</div>
</ele-modal>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { WsEvent, wsEventManager } from '@/plugins/websocket';
import { clientScreenUnlock } from '@/api/layout';
const visible = ref(false);
const lockPassword = ref('');
const unlockLoading = ref(false);
const confirmUnlock = () => {
unlockLoading.value = true;
clientScreenUnlock({ password: lockPassword.value })
.then(() => {
visible.value = false;
lockPassword.value = '';
})
.catch((message) => {
alert(message);
})
.finally(() => {
unlockLoading.value = false;
});
};
wsEventManager.subscribe(WsEvent.LOCK_CLIENT_SCREEN, () => {
visible.value = true;
});
</script>