监听Context状态，决定是否登录

src/pages/Index/History.vue

@@ -145,7 +145,7 @@ import {
   exportRecordsToLIS,
 } from '../../services/Index/index'
 import HistoryMessage from './components/History/HistoryMessage.vue'
-import type { ResultItem, TableItem } from '../../types/Index'
+import type { TableItem } from '../../types/Index'
 import WarnSvg from '@/assets/Index/History/warn.svg'
 import PrintSvg from '@/assets/Index/History/print.svg'
 import ErrorSvg from '@/assets/Warn.svg'
@@ -155,19 +155,6 @@ import { useSettingTestTubeStore } from '@/store'
 
 const settingTubeStore = useSettingTestTubeStore()
 
-const showResult = (t: ResultItem) => {
-  if (t.status !== 'SUCCESS') {
-    return '错误'
-  }
-  const unit1 = t.resultConverters[0]
-  return (
-    t.subProjName +
-    '    ' +
-    (t.result * unit1.A + unit1.B).toFixed(2) +
-    '  ' +
-    unit1.uintstr
-  )
-}
 // 添加表格引用
 const historyTableRef = ref()
 

src/pages/Index/Index.vue

@@ -78,12 +78,18 @@
 
     <!-- 底部操作信息 -->
     <el-footer class="footer-info">
-      <el-dropdown placement="top-start">
-        <div class="user-card">
-          <img class="user-logo" src="@/assets/Index/user.svg" />
-          <div class="user-name">{{ username || '未登录' }}</div>
+      <!-- <el-dropdown placement="top-start"> -->
+      <div class="user-card" @click="onClickLoginUser">
+        <img class="user-logo" src="@/assets/Index/user.svg" />
+        <div class="user-name">
+          {{
+            deviceStore.contextState.loginFlag
+              ? deviceStore.contextState.loginUser.account
+              : '未登录'
+          }}
         </div>
-        <template #dropdown>
+      </div>
+      <!-- <template #dropdown>
           <el-dropdown-menu>
             <el-dropdown-item>
               <img
@@ -92,12 +98,12 @@
                 height="30"
               />
               <button class="logout" style="width: 100px" @click="onLogout">
-                注销
+                退出
               </button>
             </el-dropdown-item>
           </el-dropdown-menu>
         </template>
-      </el-dropdown>
+      </el-dropdown> -->
 
       <div class="equipment-status" @click="showRecentMsgDialog = true">
         <div
@@ -291,8 +297,8 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { ref, onMounted, computed } from 'vue'
-import { ElDialog } from 'element-plus'
+import { ref, onMounted, computed, watch } from 'vue'
+import { ElDialog, ElMessageBox } from 'element-plus'
 import { Time, InitWarn, LoadingModal } from './components/Consumables'
 import {
   startWork,
@@ -308,7 +314,7 @@ import {
   getBloodTypes,
   confirmPromptInfo,
 } from '../../services/index'
-import { User } from '../../types/Index'
+
 import {
   useConsumablesStore,
   useDeviceStore,
@@ -320,6 +326,7 @@ import { createWebSocket } from '../../websocket/socket'
 import type {
   AppEventMessage,
   ConsumablesStateMessage,
+  DeviceContextStateMessage,
   DeviceWorkStateMessage,
   EmergencyPosStateMessage,
   EventReport,
@@ -354,12 +361,6 @@ const settingTubeStore = useSettingTestTubeStore()
 const tubeRackStore = useTestTubeStore()
 const emergencyStore = useEmergencyStore()
 
-// 新增的变量
-const user = ref<User>(
-  JSON.parse(sessionStorage.getItem('token') || '{}') as unknown as User,
-)
-
-const username = ref<string>(user.value.account)
 const failMessage = ref('') // 存储动态生成的错误信息
 const idCardInserted = ref(false) // id卡插入状态
 //事件状态
@@ -371,6 +372,15 @@ 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)
@@ -452,6 +462,9 @@ const showInitDeviceAlert = () => {
 const handleDeviceState = (data: DeviceWorkStateMessage['data']) => {
   deviceStore.setDeviceState(data)
 }
+const handleDeviceContextState = (data: DeviceContextStateMessage['data']) => {
+  deviceStore.setContextState(data)
+}
 const handleSensorState = (data: SensorStateMessage['data']) => {
   deviceStore.setSensorState(data)
 }
@@ -512,6 +525,10 @@ onMounted(() => {
     'DeviceWorkState',
     handleDeviceState,
   )
+  wsState.subscribe<DeviceContextStateMessage>(
+    'DeviceContext',
+    handleDeviceContextState,
+  )
   wsState.subscribe<SensorStateMessage>('SensorState', handleSensorState)
   wsState.subscribe<FooterMessageState>('MessageBoxState', handleFooterState)
   wsState.subscribe<TubeHolderStateMessage>(
@@ -701,6 +718,18 @@ onMounted(() => {
     updateLinePosition(defaultTab)
   }
 })
+
+watch(
+  () => deviceStore.contextState,
+  (newVal) => {
+    if (!newVal.loginFlag) {
+      router.push({
+        path: '/login',
+      })
+      sessionStorage.setItem('token', '')
+    }
+  },
+)
 </script>
 
 <style scoped lang="less">

src/services/Login/login.ts

@@ -13,10 +13,10 @@ export const login = async (data: any) => {
   }
 }
 
-//退出登录api
+//退出登录
 export const logout = async () => {
   try {
-    const res = await apiClient.post('api/v1/app/Usr/unlogin')
+    const res = await apiClient.post('/api/v1/app/Usr/unlogin')
     return res.data
   } catch (error) {
     console.log('退出登录时出错', error)

src/store/modules/device.ts

@@ -3,6 +3,7 @@ import { ref } from 'vue'
 import * as R from 'ramda'
 
 import type {
+  DeviceContextStateMessage,
   DeviceWorkStateMessage,
   FooterMessageState,
   SensorStateMessage,
@@ -43,6 +44,23 @@ export const useDeviceStore = defineStore('device', () => {
     messageState.value = data
   }
 
+  const contextState = ref<DeviceContextStateMessage['data']>({
+    loginFlag: false,
+    deviceInitedFlag: false,
+    loginUser: {
+      id: 0,
+      account: '',
+      password: '',
+      usrRole: '',
+      isBuiltInUser: false
+    }
+  })
+  const setContextState = (data: DeviceContextStateMessage['data']) => {
+    if (!R.equals(data, contextState.value)) {
+      contextState.value = data
+    }
+  }
+
   return {
     deviceState,
     setDeviceState,
@@ -52,5 +70,8 @@ export const useDeviceStore = defineStore('device', () => {
 
     messageState,
     setMessageState,
+
+    contextState,
+    setContextState
   }
 })

src/websocket/socket.ts

@@ -111,6 +111,24 @@ interface DeviceWorkStateMessage extends BaseMessage {
   timestamp: number // 时间戳
 }
 
+export type LoginUser = {
+  id: number
+  account: string
+  password: string
+  usrRole: string
+  isBuiltInUser: boolean
+}
+export interface DeviceContextStateMessage extends BaseMessage {
+  type: 'DeviceContext'
+  messageType: 'Report'
+  dataType: 'DeviceContext'
+  data: {
+    loginFlag: boolean
+    loginUser: LoginUser
+    deviceInitedFlag: boolean
+  }
+}
+
 export type EmergencyTubeState =
   | 'EMPTY'
   | 'TO_BE_PROCESSED'
@@ -318,6 +336,7 @@ interface ConsumablesStateMessage extends BaseMessage {
 type WebSocketMessage =
   | OptScanModuleStateMessage
   | DeviceWorkStateMessage
+  | DeviceContextStateMessage
   | EmergencyPosStateMessage
   | TubeHolderStateMessage
   | TubeHolderSettingMessage