集中监听

src/pages/Index/Index.vue

@@ -230,14 +230,29 @@ import {
   saveMountedCardInfo,
   openBuzzer,
   closeBuzzer,
+  getProjectInfo,
+  getBloodTypes,
 } from '../../services/index'
 import { User } from '../../types/Index'
-import { useConsumablesStore, useDeviceStore } from '../../store'
+import {
+  useConsumablesStore,
+  useDeviceStore,
+  useSettingTestTubeStore,
+} from '../../store'
 import { createWebSocket } from '../../websocket/socket'
-import type { AppEventMessage } from '../../websocket/socket'
+import type {
+  AppEventMessage,
+  DeviceWorkStateMessage,
+  FooterMessageState,
+  IncubationPlateStateMessage,
+  OptScanModuleStateMessage,
+  SensorStateMessage,
+  TubeHolderStateMessage,
+} from '../../websocket/socket'
 import { getServerInfo } from '../../utils/getServerInfo'
 import { eventBus } from '../../eventBus'
 import { logout } from '@/services/Login/login'
+import { useRunningStore } from '@/store/modules/running'
 // import { formatDate } from '@/utils/formDate'
 
 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
@@ -252,6 +267,9 @@ const showFailModal = ref(false)
 // const failItems = ref<CheckItem[]>([]);
 const consumableStore = useConsumablesStore()
 const deviceStore = useDeviceStore()
+const runningStore = useRunningStore()
+const settingTubeStore = useSettingTestTubeStore()
+
 // 新增的变量
 const user = ref<User>(
   JSON.parse(sessionStorage.getItem('token') || '{}') as unknown as User,
@@ -270,9 +288,10 @@ const WarnMessage = ref<string>('')
 const showRecentMsgDialog = ref(false)
 
 // WebSocket 实例
-const { wsUrl } = getServerInfo('/api/v1/app/ws/event')
-
-const ws = createWebSocket(wsUrl)
+const eventUrl = getServerInfo('/api/v1/app/ws/event')
+const wsEvent = createWebSocket(eventUrl.wsUrl)
+const stateUrl = getServerInfo('/api/v1/app/ws/state')
+const wsState = createWebSocket(stateUrl.wsUrl)
 
 // 处理应用事件消息
 const handleAppEvent = (data: AppEventMessage['data']) => {
@@ -336,10 +355,67 @@ const showInitDeviceAlert = () => {
   showModal.value = true
 }
 
+const handleDeviceState = (data: DeviceWorkStateMessage['data']) => {
+  deviceStore.setDeviceState(data)
+}
+const handleSensorState = (data: SensorStateMessage['data']) => {
+  deviceStore.setSensorState(data)
+}
+const handleFooterState = (data: FooterMessageState['data']) => {
+  deviceStore.setMessageState(data)
+}
+const handleTubeHolderStateMessage = (data: TubeHolderStateMessage['data']) => {
+  runningStore.setTubeHolderState(data)
+}
+
+const handleOptScanModuleStateMessage = (
+  data: OptScanModuleStateMessage['data'],
+) => {
+  runningStore.setOptScanModuleState(data)
+}
+
+const handleIncubationPlateStateMessage = (
+  data: IncubationPlateStateMessage['data'],
+) => {
+  runningStore.setSubTanks(data.subtanks)
+}
+const getProjectList = async () => {
+  const res = await getProjectInfo()
+  if (res.success) {
+    settingTubeStore.setSupportedProjects(res.data)
+  }
+}
+const getBloodTypeList = async () => {
+  const res = await getBloodTypes()
+  if (res.success) {
+    settingTubeStore.setBloodTypes(res.data)
+  }
+}
 onMounted(() => {
   eventBus.on('initDevice', showInitDeviceAlert)
-  ws.connect()
-  ws.subscribe<AppEventMessage>('AppEvent', handleAppEvent)
+  wsEvent.connect()
+  wsEvent.subscribe<AppEventMessage>('AppEvent', handleAppEvent)
+  wsState.connect()
+  wsState.subscribe<DeviceWorkStateMessage>(
+    'DeviceWorkState',
+    handleDeviceState,
+  )
+  wsState.subscribe<SensorStateMessage>('SensorState', handleSensorState)
+  wsState.subscribe<FooterMessageState>('MessageBoxState', handleFooterState)
+  wsState.subscribe<TubeHolderStateMessage>(
+    'TubeHolderState',
+    handleTubeHolderStateMessage,
+  )
+  wsState.subscribe<IncubationPlateStateMessage>(
+    'IncubationPlateState',
+    handleIncubationPlateStateMessage,
+  )
+  wsState.subscribe<OptScanModuleStateMessage>(
+    'OptScanModuleState',
+    handleOptScanModuleStateMessage,
+  )
+  getProjectList()
+  getBloodTypeList()
 })
 
 // onBeforeUnmount(() => {

src/pages/Index/Regular.vue

@@ -13,53 +13,7 @@
 
 <script setup lang="ts">
 import TabBar from './components/Consumables/TabBar.vue'
-import { createWebSocket } from '@/websocket/socket'
-import { getServerInfo } from '@/utils/getServerInfo'
-import { onMounted, onDeactivated } from 'vue'
-import type {
-  DeviceWorkStateMessage,
-  FooterMessageState,
-} from '@/websocket/socket'
-import { useDeviceStore, useSettingTestTubeStore } from '@/store/index'
-import { getBloodTypes, getProjectInfo } from '@/services/Index/testTube'
-const deviceStore = useDeviceStore()
-const settingTubeStore = useSettingTestTubeStore()
 
-const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
-const ws = createWebSocket(wsUrl)
-//处理设备状态
-const handleDeviceState = (data: DeviceWorkStateMessage['data']) => {
-  deviceStore.setDeviceState(data)
-}
-const handleFooterState = (data: FooterMessageState['data']) => {
-  deviceStore.setMessageState(data)
-}
-
-onMounted(() => {
-  getProjectList()
-  getBloodTypeList()
-  ws.connect()
-  ws.subscribe<DeviceWorkStateMessage>('DeviceWorkState', handleDeviceState)
-  ws.subscribe<FooterMessageState>('MessageBoxState', handleFooterState)
-})
-// onDeactivated(() => {
-//   ws.unsubscribe<DeviceWorkStateMessage>('DeviceWorkState', handleDeviceState)
-//   ws.unsubscribe<FooterMessageState>('MessageBoxState', handleFooterState)
-//   ws.disconnect()
-// })
-
-const getProjectList = async () => {
-  const res = await getProjectInfo()
-  if (res.success) {
-    settingTubeStore.setSupportedProjects(res.data)
-  }
-}
-const getBloodTypeList = async () => {
-  const res = await getBloodTypes()
-  if (res.success) {
-    settingTubeStore.setBloodTypes(res.data)
-  }
-}
 </script>
 
 <style scoped lang="less">

src/pages/Index/Regular/Consumables.vue

@@ -181,10 +181,6 @@ const confirmWarn = () => {
 const startWebSocket = () => {
   socket.connect()
 }
-// 处理传感器状态消息
-const handleSensorState = (data: SensorStateMessage['data']) => {
-  deviceStore.setSensorState(data)
-}
 
 //所有的耗材是否都有，如果有一项没有则为false
 //@ts-ignore
@@ -217,22 +213,12 @@ const handleConsumablesState = (data: ConsumablesStateMessage['data']) => {
 
 onMounted(() => {
   startWebSocket()
-  socket.subscribe<SensorStateMessage>('SensorState', handleSensorState)
   socket.subscribe<ConsumablesStateMessage>(
     'ConsumablesState',
     handleConsumablesState,
   )
 })
-onBeforeUnmount(() => {
-  if (socket !== null) {
-    socket.disconnect() // 断开连接
-  }
-  socket.unsubscribe<SensorStateMessage>('SensorState', handleSensorState)
-  socket.unsubscribe<ConsumablesStateMessage>(
-    'ConsumablesState',
-    handleConsumablesState,
-  )
-})
+
 // 在组件激活时恢复状态
 onActivated(() => {
   emergencyInfo.value = emergencyStore.$state.emergencyInfo || {}

src/pages/Index/Regular/Running.vue

@@ -251,22 +251,15 @@ import {
 import tubeItem from '../components/TestTube/Tube.vue'
 import BallGrid from '../components/Consumables/BallGrid.vue'
 import { getRunningList } from '@/services/Index/running/running'
-import { createWebSocket } from '@/websocket/socket'
+
 import type {
-  TubeHolderStateMessage,
-  IncubationPlateStateMessage,
   EmergencyPosStateMessage,
   ProjectInfo,
   SubTank,
-  OptScanModuleStateMessage
 } from '@/websocket/socket'
-import { getServerInfo } from '@/utils/getServerInfo'
 import { useEmergencyStore } from '@/store/modules/emergency'
 import { useRunningStore } from '@/store/modules/running'
 
-const { wsUrl } = getServerInfo('/api/v1/app/ws/state')
-const ws = createWebSocket(wsUrl)
-
 const emergencyStore = useEmergencyStore()
 const consumablesStore = useConsumablesStore()
 const runningStore = useRunningStore()
@@ -283,41 +276,9 @@ const sampleTube = {
   bloodType: 'A',
 }
 
-const handleTubeHolderStateMessage = (data: TubeHolderStateMessage['data']) => {
-  runningStore.setTubeHolderState(data)
-}
-
-const handleOptScanModuleStateMessage = (data:OptScanModuleStateMessage["data"]) => {
-  runningStore.setOptScanModuleState(data)
-}
-
-const handleIncubationPlateStateMessage = (
-  data: IncubationPlateStateMessage['data'],
-) => {
-  runningStore.setSubTanks(data.subtanks)
-}
-
 const hasEmergencyPosition = ref(false)
 
 onMounted(() => {
-  ws.connect()
-  //试管架状态
-  ws.subscribe<TubeHolderStateMessage>(
-    'TubeHolderState',
-    handleTubeHolderStateMessage,
-  )
-  ws.subscribe<IncubationPlateStateMessage>(
-    'IncubationPlateState',
-    handleIncubationPlateStateMessage,
-  )
-  //光学模组状态
-  ws.subscribe<OptScanModuleStateMessage>(
-    'OptScanModuleState',
-    handleOptScanModuleStateMessage,
-  )
-})
-
-onMounted(() => {
   // 在页面加载时检查是否有急诊数据传递
   // 初次获取路由参数
   fetchIncubationData()

src/pages/Index/components/TestTube/Tube.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="tube-item" @click="$emit('clickTubeItem', tube.tubeIndex)">
     <span v-if="!!showNum" class="order">{{
-      tube.tubeIndex ? tube.tubeIndex + 1 : tubeIndex
+      tube.tubeIndex !== null ? tube.tubeIndex + 1 : tubeIndex
     }}</span>
     <div class="tube-circle" v-if="projIdsOfTube(tube).length === 0">
       <span class="add-symbol">+</span>