底部消息

src/pages/Index/Index.vue

@@ -99,8 +99,13 @@
         </template>
       </el-dropdown>
 
-      <div class="equipment-status">
-        <div class="status-text">系统:{{ EventText }}</div>
+      <div class="equipment-status" @click="showRecentMsgDialog = true">
+        <div
+          class="status-text"
+          :class="deviceStore.messageState.topMessage.messageLevel"
+        >
+          {{ deviceStore.messageState.topMessage.message }}
+        </div>
       </div>
       <div class="time-card">
         <img class="time-logo" src="@/assets/Index/clock.svg" />
@@ -109,6 +114,18 @@
         </div>
       </div>
     </el-footer>
+    <el-dialog
+      class="recent-msg-dialog"
+      v-model="showRecentMsgDialog"
+      title="最近消息"
+      width="500"
+    >
+      <el-table :data="deviceStore.messageState.messageBoxList">
+        <el-table-column property="time" label="时间" width="200" />
+        <el-table-column property="message" label="消息" width="200" />
+      </el-table>
+    </el-dialog>
+
     <InitWarn
       v-if="showModal"
       :visible="showModal"
@@ -200,7 +217,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElDialog } from 'element-plus'
 import { Time, InitWarn, LoadingModal } from './components/Consumables'
 import {
   startWork,
@@ -217,12 +234,12 @@ import {
 import { User } from '../../types/Index'
 import { useConsumablesStore, useDeviceStore } from '../../store'
 import { createWebSocket } from '../../websocket/socket'
-import type {
-  AppEventMessage
-} from '../../websocket/socket'
+import type { AppEventMessage } from '../../websocket/socket'
 import { getServerInfo } from '../../utils/getServerInfo'
 import { eventBus } from '../../eventBus'
 import { logout } from '@/services/Login/login'
+// import { formatDate } from '@/utils/formDate'
+
 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
 const lineWidth = ref(0)
 const lineLeft = ref(0)
@@ -250,6 +267,8 @@ const ErrorMessage = ref<string>('')
 const showErrorModal = ref(false)
 const WarnMessage = ref<string>('')
 
+const showRecentMsgDialog = ref(false)
+
 // WebSocket 实例
 const { wsUrl } = getServerInfo('/api/v1/app/ws/event')
 
@@ -272,18 +291,14 @@ const handleAppEvent = (data: AppEventMessage['data']) => {
   } else if (data.typeName === 'AppIDCardMountEvent') {
     consumableStore.setIdCardInserted(true)
     idCardInserted.value = true
-    EventText.value = 'id卡已插入'
+    // EventText.value = 'id卡已插入'
   } else if (data.typeName === 'AppIDCardUnmountEvent') {
     consumableStore.setIdCardInserted(false)
     idCardInserted.value = false
-    EventText.value = 'id卡已拔出'
+    // EventText.value = 'id卡已拔出'
   } else if (data.typeName === 'AppTubeholderSettingUpdateEvent') {
-    EventText.value = '试管架配置更新'
+    // EventText.value = '试管架配置更新'
     eventBus.emit('AppTubeSettingUpdateEvent')
-  } else if (data.typeName === 'DoA8kStepActionEvent') {
-    EventText.value = data.actionStepName!
-  } else {
-    EventText.value = '闲置...'
   }
 }
 

src/pages/Index/Regular/TestTube.vue

@@ -244,7 +244,7 @@ const getTubeData = async () => {
 
   if (res.success) {
     tubeRacks.value = mockData(res.data)
-    console.log(tubeRacks.value)
+    // console.log(tubeRacks.value)
   } else {
     ElMessage({
       message: '加载试管架数据失败',

src/store/modules/device.ts

@@ -17,7 +17,14 @@ export const useDeviceStore = defineStore('device', () => {
     sensorState.value = data
   }
 
-  const messageState = ref<FooterMessageState['data'] | undefined>(undefined)
+  const messageState = ref<FooterMessageState['data']>({
+    topMessage: {
+      time: 0,
+      messageLevel: 'Info',
+      message: '空闲'
+    },
+    messageBoxList: []
+  })
   const setMessageState = (data: FooterMessageState['data']) => {
     messageState.value = data
   }

src/websocket/socket.ts

@@ -50,6 +50,7 @@ interface AppEventMessage extends BaseMessage {
 
 export type MsgLevel = 'Info' | 'Warn' | 'Error'
 export type MsgItem = {
+  time: number
   messageLevel: MsgLevel
   message: string
 }