调整初始化失败展示样式

src/pages/Index/Index.vue

@@ -84,34 +84,33 @@
 
     <!-- 底部操作信息 -->
     <el-footer class="footer-info">
-
-      <el-dropdown placement="top-start" style="margin-left:-10px">
+      <el-dropdown placement="top-start" style="margin-left: -10px">
         <div class="user-card">
           <img class="user-logo" src="@/assets/Index/user.svg" />
-        <div class="user-name">
-          {{
-            deviceStore.contextState.loginFlag
-              ? deviceStore.contextState.loginUser.account
-              : '未登录'
-          }}
-        </div>
+          <div class="user-name">
+            {{
+              deviceStore.contextState.loginFlag
+                ? deviceStore.contextState.loginUser.account
+                : '未登录'
+            }}
+          </div>
         </div>
         <template #dropdown>
-          <el-dropdown-menu style="width:100px">
-            <el-dropdown-item >
-              <div @click="onInitDevice" style="display: flex;">
+          <el-dropdown-menu style="width: 100px">
+            <el-dropdown-item>
+              <div @click="onInitDevice" style="display: flex">
                 <img :src="InitSvg" alt="Icon" width="15" />
                 <div class="pd-5">初始化</div>
               </div>
             </el-dropdown-item>
-            <el-dropdown-item >
-              <div @click="onCloseDevice" style="display: flex;">
+            <el-dropdown-item>
+              <div @click="onCloseDevice" style="display: flex">
                 <img :src="CloseSvg" alt="Icon" width="15" />
                 <div class="pd-5">关机</div>
               </div>
             </el-dropdown-item>
             <el-dropdown-item>
-              <div @click="onLogout" style="display: flex;">
+              <div @click="onLogout" style="display: flex">
                 <img :src="LogoutSvg" alt="Icon" width="15" />
                 <div class="pd-5">退出</div>
               </div>
@@ -161,10 +160,10 @@
       :show-close="false"
     >
       <template #header>
-        <div class="report-title">
+        <div class="report-title" :class="currEventReport && currEventReport.prompt.messageLevel">
           {{ currEventReport ? currEventReport.prompt.title : '' }}
         </div>
-        <div class="report-desc">
+        <div class="report-desc" :class="currEventReport && currEventReport.prompt.messageLevel">
           {{ currEventReport ? currEventReport.prompt.info : '' }}
         </div>
       </template>
@@ -217,7 +216,19 @@
       </div>
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="onConfirmReport"> 确定 </el-button>
+          <template v-if="eventReportDlgExt">
+            <el-button type="primary" @click="eventReportDlgExt.confirmAction">
+              {{ eventReportDlgExt.confirmText }}
+            </el-button>
+            <el-button @click="eventReportDlgExt.cancelAction">{{
+              eventReportDlgExt.cancelText
+            }}</el-button>
+          </template>
+          <template v-else>
+            <el-button type="primary" @click="onConfirmReport">
+              确定
+            </el-button>
+          </template>
         </div>
       </template>
     </el-dialog>
@@ -345,10 +356,10 @@ import type {
   DeviceContextStateMessage,
   DeviceWorkStateMessage,
   EmergencyPosStateMessage,
-  EventReport,
   FooterMessageState,
   IncubationPlateStateMessage,
   OptScanModuleStateMessage,
+  PromptAvailable,
   SensorStateMessage,
   TubeHolderSettingMessage,
   TubeHolderStateMessage,
@@ -364,7 +375,6 @@ import InitSvg from '@/assets/init.svg'
 import CloseSvg from '@/assets/close.svg'
 import LogoutSvg from '@/assets/logout.svg'
 
-
 const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
 const lineWidth = ref(0)
 const lineLeft = ref(0)
@@ -412,7 +422,7 @@ const wsEvent = createWebSocket(eventUrl.wsUrl)
 const stateUrl = getServerInfo('/api/v1/app/ws/state')
 const wsState = createWebSocket(stateUrl.wsUrl)
 
-const eventReports = ref<EventReport[]>([])
+const eventReports = ref<PromptAvailable[]>([])
 const showEventReportDlg = ref(false)
 const currEventReport = computed(() => {
   return eventReports.value.length > 0 ? eventReports.value[0] : undefined
@@ -420,7 +430,7 @@ const currEventReport = computed(() => {
 const onConfirmReport = async () => {
   if (eventReports.value.length > 0) {
     const report = eventReports.value.shift()
-    const res = await confirmPromptInfo(report!.eventId)
+    const res = await confirmPromptInfo(report!.eventId || '0')
     if (res && res.success) {
       // do nothing
     } else {
@@ -431,7 +441,36 @@ const onConfirmReport = async () => {
     showEventReportDlg.value = false
   }
 }
+const onCancelReport = () => {
+  if (eventReports.value.length > 0) {
+    eventReports.value.shift()
+  }
+  if (eventReports.value.length === 0) {
+    showEventReportDlg.value = false
+  }
+}
 
+const onRetryInitDevice = () => {
+  onCancelReport()
+  startInit()
+}
+const eventReportDlgExt = ref<
+  | {
+      confirmText: string
+      confirmAction: () => void
+      cancelText: string
+      cancelAction: () => void
+    }
+  | undefined
+>(undefined)
+/*
+{
+  confirmText: '重试',
+  confirmAction: onRetryInitDevice,
+  cancelText: '取消',
+  cancelAction: onCancelReport
+}
+*/
 const handleSocketClose = (num: number) => {
   if (num === 0) {
     // socket连接断开
@@ -519,18 +558,18 @@ const saveIdInfo = async () => {
 }
 
 //初始化设备
-const onInitDevice = ()=> {
+const onInitDevice = () => {
   eventBus.emit('initDevice')
 }
 
 //关机
 let isLoading = ref(false)
-const onCloseDevice = ()=> {
+const onCloseDevice = () => {
   // ElMessageBox.alert()
   //检查设备状态 设备运行时不可关机
-  const deviceState = deviceStore.deviceState.workState;
-  if(deviceState == 'WORKING'){
-    showWarnModal.value = true;
+  const deviceState = deviceStore.deviceState.workState
+  if (deviceState == 'WORKING') {
+    showWarnModal.value = true
     WarnMessage.value = '设备正在运行中，不能进行关机操作'
     return
   }
@@ -541,19 +580,19 @@ const onCloseDevice = ()=> {
     message: '请确认是否进行关机操作？',
     cancelBtn: '取消',
     OkBtn: '确认',
-    confirmCallback:()=>{
-        //关机时的遮罩层
-        isLoading.value = true;
-        confirmVisible.value = false;
-        //有时接口返回的太快，看不到loading状态，延迟1s，看一到loading状态。
-        setTimeout(async ()=>{
-          await shutdown()
-          shutdownMessage.value = '设备已关机，请拔掉电源'
-        },1000)
+    confirmCallback: () => {
+      //关机时的遮罩层
+      isLoading.value = true
+      confirmVisible.value = false
+      //有时接口返回的太快，看不到loading状态，延迟1s，看一到loading状态。
+      setTimeout(async () => {
+        await shutdown()
+        shutdownMessage.value = '设备已关机，请拔掉电源'
+      }, 1000)
+    },
+    cancelCallback: () => {
+      confirmVisible.value = false
     },
-    cancelCallback: ()=>{
-      confirmVisible.value = false;
-    }
   }
 }
 
@@ -766,12 +805,13 @@ const handleConfirm = async () => {
   await startInit()
 }
 
-const startInit = async () => {
+async function startInit() {
   await initDevice()
   await pollingInitState()
 }
 
 const pollingInitState = async () => {
+  eventReportDlgExt.value = undefined
   showDeviceResettingModal.value = true // 显示 LoadingModal
   const res = await getInitState()
   if (res.ecode === 'SUC') {
@@ -784,15 +824,26 @@ const pollingInitState = async () => {
         sessionStorage.setItem('deviceResetFinished', 'true')
         showAlreadyModal.value = true
       } else {
-        const infos = res.data.promopt.detailInfos
-        failMessage.value = {
-          title: '检测失败',
-          message:
-          infos && infos.length > 0
-            ? infos.map((d: any) => d.name).join('\n')
-              : res.data.promopt.info,
+        // const infos = res.data.promopt.detailInfo
+        // failMessage.value = {
+        //   title: '检测失败',
+        //   message:
+        //     infos && infos.length > 0
+        //       ? infos.map((d: any) => d.name).join('\n')
+        //       : res.data.promopt.info,
+        // }
+        // showFailModal.value = true // 显示失败弹窗
+
+        eventReports.value.push({
+          prompt: res.data.promopt,
+        })
+        eventReportDlgExt.value = {
+          confirmText: '重试',
+          confirmAction: onRetryInitDevice,
+          cancelText: '取消',
+          cancelAction: onCancelReport,
         }
-        showFailModal.value = true // 显示失败弹窗
+        showEventReportDlg.value = true
       }
     }
   } else {
@@ -1066,9 +1117,21 @@ watch(
   .report-title {
     font-size: 30px;
     margin: 18px 0;
+    &.Warn {
+      color: #fa9d3b;
+    }
+    &.Error {
+      color: #d81212;
+    }
   }
   .report-desc {
     font-size: 26px;
+    &.Warn {
+      color: #fa9d3b;
+    }
+    &.Error {
+      color: #d81212;
+    }
   }
   .report-detail {
     font-size: 22px;
@@ -1119,7 +1182,7 @@ watch(
   }
 }
 
-.pd-5{
+.pd-5 {
   padding: 0 5px;
   font-size: 28px;
 }
@@ -1167,5 +1230,4 @@ watch(
   border-radius: 3px;
   overflow: hidden;
 }
-  
 </style>

src/websocket/socket.ts

@@ -29,21 +29,23 @@ interface OptScanModuleStateMessage extends BaseMessage {
   timestamp: number
 }
 
-export type EventName =
-  | 'AppIDCardMountEvent'
-  | 'AppIDCardUnmountEvent'
-  | 'AppPromptEvent'
-
-
-
-export interface EventReport {
-  typeName: EventName
+export interface EventReport extends PromptAvailable {
+  typeName: 'AppPromptEvent'
   timestamp: number
   eventId: string
   prompt: TextPrompt | FormsPrompt | TablePrompt
+}
+
+export interface IdCardReport {
+  typeName: 'AppIDCardMountEvent' | 'AppIDCardUnmountEvent'
   projectInfo: IdCardPrompt
 }
 
+export interface PromptAvailable {
+  eventId?: string
+  prompt: EventReport['prompt']
+}
+
 export type IdCardPrompt = {
   color: string,
   expiryDate: number,
@@ -89,7 +91,7 @@ interface AppEventMessage extends BaseMessage {
   type: 'AppEvent'
   messageType: 'Report'
   dataType: 'AppEvent'
-  data: EventReport
+  data: EventReport | IdCardReport
   timestamp: number
 }