完成Report Prompt

src/pages/Index/Index.vue

@@ -133,6 +133,74 @@
       </div>
     </el-dialog>
 
+    <el-dialog
+      class="event-report-dialog"
+      v-model="showEventReportDlg"
+      width="600"
+      :show-close="false"
+    >
+      <template #header>
+        <div class="report-title">
+          {{ currEventReport ? currEventReport.prompt.title : '' }}
+        </div>
+        <div class="report-desc">
+          {{ currEventReport ? currEventReport.prompt.info : '' }}
+        </div>
+      </template>
+      <div class="report-detail">
+        <div
+          v-if="
+            currEventReport && currEventReport.prompt.detailInfoType === 'Forms'
+          "
+        >
+          <div
+            class="report-form-item"
+            v-for="(item, index) in currEventReport.prompt.detailInfo"
+            :key="index"
+          >
+            <span>{{ item.name + ' :' }}</span>
+            <span>{{ item.description }}</span>
+          </div>
+        </div>
+        <div
+          v-else-if="
+            currEventReport && currEventReport.prompt.detailInfoType === 'Table'
+          "
+        >
+          <div class="report-table-container">
+            <div class="report-table-header">
+              <div
+                v-for="(item, index) in currEventReport.prompt.detailInfo
+                  .header"
+                :key="index"
+              >
+                <span>{{ item }}</span>
+              </div>
+            </div>
+            <div class="report-table-rows">
+              <div
+                class="report-table-row"
+                v-for="(row, index) in currEventReport.prompt.detailInfo.vars"
+                :key="index"
+              >
+                <div v-for="(col, idx) in row" :key="idx">
+                  {{ col.val }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span v-else>
+          {{ currEventReport ? currEventReport.prompt.detailInfo : '' }}
+        </span>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="onConfirmReport"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <InitWarn
       v-if="showModal"
       :visible="showModal"
@@ -223,7 +291,7 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { ElDialog } from 'element-plus'
 import { Time, InitWarn, LoadingModal } from './components/Consumables'
 import {
@@ -235,10 +303,13 @@ import {
   getInitState,
   initDevice,
   saveMountedCardInfo,
-  openBuzzer,
   closeBuzzer,
   getProjectInfo,
   getBloodTypes,
+  confirmPromptInfo,
+  reportTable,
+  reportForm,
+  reportText,
 } from '../../services/index'
 import { User } from '../../types/Index'
 import {
@@ -254,6 +325,7 @@ import type {
   ConsumablesStateMessage,
   DeviceWorkStateMessage,
   EmergencyPosStateMessage,
+  EventReport,
   FooterMessageState,
   IncubationPlateStateMessage,
   OptScanModuleStateMessage,
@@ -308,31 +380,41 @@ const wsEvent = createWebSocket(eventUrl.wsUrl)
 const stateUrl = getServerInfo('/api/v1/app/ws/state')
 const wsState = createWebSocket(stateUrl.wsUrl)
 
+const eventReports = ref<EventReport[]>([])
+const showEventReportDlg = ref(false)
+const currEventReport = computed(() => {
+  return eventReports.value.length > 0 ? eventReports.value[0] : undefined
+})
+const onConfirmReport = async () => {
+  if (eventReports.value.length > 0) {
+    const report = eventReports.value.shift()
+    const res = await confirmPromptInfo(report!.eventId)
+    if (res && res.success) {
+      // do nothing
+    } else {
+      res && res.data && res.data.info && console.error(res.data.info)
+    }
+  }
+  if (eventReports.value.length === 0) {
+    showEventReportDlg.value = false
+  }
+}
+
 // 处理应用事件消息
 const handleAppEvent = (data: AppEventMessage['data']) => {
   console.log('🚀 ~ handleAppEvent ~ data:', data)
-  if (data.typeName === 'AppPromptEvents' && data.prompt) {
-    data.prompt.forEach(async (item) => {
-      if (item.type === 'Error') {
-        showErrorModal.value = true
-        ErrorMessage.value = item.info
-        await openBuzzer()
-      } else if (item.type === 'Warn') {
-        showWarnModal.value = true
-        WarnMessage.value = item.info
-      }
-    })
+  if (data.typeName === 'AppPromptEvent') {
+    eventReports.value.push(data)
+    showEventReportDlg.value = true
   } else if (data.typeName === 'AppIDCardMountEvent') {
+    // let mock = reportText
+    // eventReports.value.push(mock)
+    // showEventReportDlg.value = true
     consumableStore.setIdCardInserted(true)
     idCardInserted.value = true
-    // EventText.value = 'id卡已插入'
   } else if (data.typeName === 'AppIDCardUnmountEvent') {
     consumableStore.setIdCardInserted(false)
     idCardInserted.value = false
-    // EventText.value = 'id卡已拔出'
-  } else if (data.typeName === 'AppTubeholderSettingUpdateEvent') {
-    // EventText.value = '试管架配置更新'
-    eventBus.emit('AppTubeSettingUpdateEvent')
   }
 }
 
@@ -501,10 +583,7 @@ const startTest = async () => {
     if (res && res.success) {
       await untilDeviceReady()
     } else {
-      res &&
-        res.data &&
-        res.data.info &&
-        eMessage.error(res.data.info)
+      res && res.data && res.data.info && eMessage.error(res.data.info)
     }
   } catch (error) {
     console.error('开始测试失败:', error)
@@ -519,10 +598,7 @@ const pauseTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    res &&
-      res.data &&
-      res.data.info &&
-      eMessage.error(res.data.info)
+    res && res.data && res.data.info && eMessage.error(res.data.info)
   }
 }
 
@@ -534,10 +610,7 @@ const stopTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    res &&
-      res.data &&
-      res.data.info &&
-      eMessage.error(res.data.info)
+    res && res.data && res.data.info && eMessage.error(res.data.info)
   }
 }
 //继续测试
@@ -548,10 +621,7 @@ const continueTest = async () => {
   if (res && res.success) {
     await untilDeviceReady()
   } else {
-    res &&
-      res.data &&
-      res.data.info &&
-      eMessage.error(res.data.info)
+    res && res.data && res.data.info && eMessage.error(res.data.info)
   }
 }
 const handleConfirm = async () => {
@@ -839,4 +909,61 @@ onMounted(() => {
     }
   }
 }
+.event-report-dialog {
+  font-size: 1.5rem;
+  .report-title {
+    font-size: 30px;
+    margin: 18px 0;
+  }
+  .report-desc {
+    font-size: 26px;
+  }
+  .report-detail {
+    font-size: 22px;
+    margin-bottom: 14px;
+    .report-form-item {
+      display: flex;
+      gap: 20px;
+      margin: 0 20px;
+      padding: 20px;
+      border-bottom: 1px solid lightgray;
+    }
+    .report-table-container {
+    }
+    .report-table-header {
+      // background-color: lightgray;
+      display: flex;
+      text-align: left;
+      font-size: 22px;
+      height: 45px;
+      line-height: $height;
+      padding: 0 20px;
+      > * {
+        flex: 1 1 33%;
+        font-weight: 600;
+      }
+    }
+    .report-table-row {
+      display: flex;
+      text-align: left;
+      height: 45px;
+      line-height: $height;
+      padding: 0 20px;
+      > * {
+        flex: 1 1 33%;
+      }
+      &:nth-child(even) {
+        background-color: rgb(250, 250, 250);
+      }
+      &:nth-child(odd) {
+        background-color: #f2f2f2;
+      }
+    }
+  }
+  .dialog-footer .el-button {
+    height: 50px;
+    width: 100px;
+    font-size: 1.5rem;
+  }
+}
 </style>

src/services/Index/index.ts

@@ -1,3 +1,5 @@
+import { EventReport } from '@/websocket/socket'
+
 export * from './regular'
 export * from './emergency'
 export * from './history'
@@ -7,3 +9,102 @@ export * from './idCard'
 export * from './init'
 export * from './settings/index'
 export * from './running/index'
+
+// mock
+export const reportText: EventReport = {
+  typeName: 'AppPromptEvent',
+  timestamp: 1736146671,
+  eventId: 'b040fd2e-1731-45ef-8f1c-d2768c18321f',
+  prompt: {
+    messageLevel: 'Warn',
+    title: '信息',
+    info: '测试消息',
+    detailInfoType: 'Text',
+    detailInfo: '一二三四五一二三四五一二三四五一二三四五一二三四五',
+  },
+}
+export const reportForm: EventReport = {
+  typeName: 'AppPromptEvent',
+  timestamp: 1736146671,
+  eventId: 'b040fd2e-1731-45ef-8f1c-d2768c18321f',
+  prompt: {
+    messageLevel: 'Info',
+    title: '信息',
+    info: '板夹仓硬件异常',
+    detailInfoType: 'Forms',
+    detailInfo: [
+      {
+        name: '相关指令',
+        description: 'motorMoveTo',
+      },
+      {
+        name: '相关模块',
+        description: '板夹仓横向移动电机',
+      },
+      {
+        name: '详细错误',
+        description: '指令超时',
+      },
+    ]
+  },
+}
+
+export const reportTable: EventReport = {
+  typeName: 'AppPromptEvent',
+  timestamp: 1736146671,
+  eventId: 'b040fd2e-1731-45ef-8f1c-d2768c18321f',
+  prompt: {
+    messageLevel: 'Info',
+    title: '信息',
+    info: '耗材不足',
+    detailInfoType: 'Table',
+    detailInfo: {
+      header: ['耗材名称', '需求量', '使用量'],
+      types: ['String', 'String', 'String'],
+      vars: [
+        [
+          {
+            messageLevel: 'Info',
+            val: '小缓冲液',
+          },
+          {
+            messageLevel: 'Info',
+            val: '11',
+          },
+          {
+            messageLevel: 'Error',
+            val: '20',
+          },
+        ],
+        [
+          {
+            messageLevel: 'Info',
+            val: '大瓶缓冲液',
+          },
+          {
+            messageLevel: 'Info',
+            val: '22',
+          },
+          {
+            messageLevel: 'Info',
+            val: '10',
+          },
+        ],
+        [
+          {
+            messageLevel: 'Info',
+            val: '板夹',
+          },
+          {
+            messageLevel: 'Info',
+            val: '33',
+          },
+          {
+            messageLevel: 'Warn',
+            val: '33',
+          },
+        ],
+      ],
+    },
+  },
+}

src/services/Index/init.ts

@@ -21,3 +21,16 @@ export const getInitState = async () => {
     console.log('获取初始化状态接口出错', error)
   }
 }
+
+export const confirmPromptInfo = async (eventId: string) => {
+  try {
+    const res = await apiClient.post(
+      '/api/v1/app/AppEventBus/confirmPromoptInfo',
+      null,
+      { params: { eventId } },
+    )
+    return res.data
+  } catch (error) {
+    console.log('获取初始化状态接口出错', error)
+  }
+}

src/websocket/socket.ts

@@ -25,26 +25,54 @@ interface OptScanModuleStateMessage extends BaseMessage {
   }
   timestamp: number
 }
-// 提示信息接口
-interface PromptInfo {
-  type: 'Warn' | 'Error'
+
+export type EventName =
+  | 'AppIDCardMountEvent'
+  | 'AppIDCardUnmountEvent'
+  | 'AppPromptEvent'
+
+export interface EventReport {
+  typeName: EventName
+  timestamp: number
+  eventId: string
+  prompt: TextPrompt | FormsPrompt | TablePrompt
+}
+
+export type TextPrompt = {
+  messageLevel: MsgLevel
+  title: string
   info: string
-  detailInfos: string[]
-  stackInfo: null
+  detailInfoType: 'Text'
+  detailInfo: string
 }
-interface EventType {
-  typeName: string
-  timestamp: number
-  prompt?: PromptInfo[]
-  actionStep?: string
-  actionStepName?: string
+export type FormsPrompt = {
+  messageLevel: MsgLevel
+  title: string
+  info: string
+  detailInfoType: 'Forms'
+  detailInfo: { name: string; description: string }[]
 }
+export type TablePrompt = {
+  messageLevel: MsgLevel
+  title: string
+  info: string
+  detailInfoType: 'Table'
+  detailInfo: {
+    header: string[]
+    types: string[]
+    vars: TablePromptRecord[]
+  }
+}
+export type TablePromptRecord = {
+  messageLevel: MsgLevel
+  val: string
+}[]
 // 应用事件消息接口
 interface AppEventMessage extends BaseMessage {
   type: 'AppEvent'
   messageType: 'Report'
   dataType: 'AppEvent'
-  data: EventType
+  data: EventReport
   timestamp: number
 }
 
@@ -99,7 +127,7 @@ export const emergencyStateDesc = {
   RESOURCE_IS_READY: '已就绪',
   PROCESSING: '处理中',
   PROCESS_COMPLETE: '处理完成',
-  ERROR: '出错'
+  ERROR: '出错',
 }
 
 // 急诊位状态消息