登录页监听上下文上报

src/pages/Index/Index.vue

@@ -314,7 +314,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { ref, onMounted, computed, watch } from 'vue'
-import { ElDialog, ElMessageBox } from 'element-plus'
+import { ElDialog } from 'element-plus'
 import { Time, InitWarn, LoadingModal } from './components/Consumables'
 import {
   startWork,
@@ -406,15 +406,6 @@ const WarnMessage = ref<string>('')
 
 const showRecentMsgDialog = ref(false)
 
-const onClickLoginUser = () => {
-  ElMessageBox.confirm('是否退出登录?')
-    .then(() => {
-      onLogout()
-    })
-    .catch(() => {
-      // catch error
-    })
-}
 // WebSocket 实例
 const eventUrl = getServerInfo('/api/v1/app/ws/event')
 const wsEvent = createWebSocket(eventUrl.wsUrl)

src/pages/Index/components/Consumables/Warn/InitWarn.vue

@@ -157,7 +157,7 @@ const onConfirm = () => {
   .cancel-btn,
   .confirm-btn {
     flex: 1;
-    padding: 20px 0; // 增加按钮的高度
+    padding: 20px; // 增加按钮的高度
     border-radius: 10px; // 增加圆角
     font-size: 20px; // 增大字体
     font-weight: bold;

src/pages/Login/Login.vue

@@ -2,10 +2,15 @@
   <div class="login-container">
     <aside class="sidebar">
       <ul>
-        <li v-for="user in userList" :key="user.id" :class="[
-          'user',
-          { selected: user.account === selectedUser?.account },
-        ]" @click="selectUser(user)">
+        <li
+          v-for="user in userList"
+          :key="user.id"
+          :class="[
+            'user',
+            { selected: user.account === selectedUser?.account },
+          ]"
+          @click="selectUser(user)"
+        >
           {{ user.account }}
         </li>
       </ul>
@@ -14,10 +19,19 @@
       <div class="pin-container">
         <p :class="['pin-prompt', { shake: isShaking }]">{{ loginStatus }}</p>
         <div class="pin-indicators">
-          <span v-for="n in maxPinLength" :key="n" :class="['pin-dot', { filled: n <= pin.length }]"></span>
+          <span
+            v-for="n in maxPinLength"
+            :key="n"
+            :class="['pin-dot', { filled: n <= pin.length }]"
+          ></span>
         </div>
         <div class="pin-keypad">
-          <div v-for="n in 9" :key="n" class="key" @click="inputPin(n.toString())">
+          <div
+            v-for="n in 9"
+            :key="n"
+            class="key"
+            @click="inputPin(n.toString())"
+          >
             {{ n }}
           </div>
           <div class="key" @click="clearPin">重输</div>
@@ -30,11 +44,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 import { login, getUserList } from '../../services/index'
 import type { User } from '../../types/Index'
 import { useRouter } from 'vue-router'
+import { getServerInfo } from '@/utils/getServerInfo'
+import { createWebSocket, DeviceContextStateMessage } from '@/websocket/socket'
 const router = useRouter()
+
+const stateUrl = getServerInfo('/api/v1/app/ws/state')
+const wsState = createWebSocket(stateUrl.wsUrl)
+
 // 用户角色
 // const roles = ref(['护士', '管理员', '测试人员'])
 // const selectedRole = ref('护士')
@@ -45,11 +65,29 @@ const getUserListData = async () => {
   const res = await getUserList()
   userList.value = res.data
 }
+const handleDeviceContextState = (data: DeviceContextStateMessage['data']) => {
+  if (data.loginFlag) {
+    sessionStorage.setItem('token', JSON.stringify(data.loginUser))
+    router.push('/index')
+  }
+}
 onMounted(() => {
+  wsState.subscribe<DeviceContextStateMessage>(
+    'DeviceContext',
+    handleDeviceContextState,
+  )
+  wsState.connect()
+
   setTimeout(() => {
     getUserListData()
   }, 500)
 })
+onUnmounted(() => {
+  wsState.unsubscribe<DeviceContextStateMessage>(
+    'DeviceContext',
+    handleDeviceContextState,
+  )
+})
 //选中的用户
 const selectedUser = ref<User | null>(null)
 // PIN 相关
@@ -101,13 +139,12 @@ const submitPin = async () => {
     password: pin.value,
   }
   const res = await login(params)
-  console.log(res);
+  console.log(res)
   if (res.success) {
     loginStatus.value = '登录成功'
     sessionStorage.setItem('token', JSON.stringify(res.data))
     router.push('/index')
   } else {
-
     loginStatus.value = `${res.info}`
     pin.value = ''
   }