优化关机操作

components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Confirm: typeof import('./src/components/Confirm.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']

src/components/Confirm.vue

@@ -0,0 +1,124 @@
+import { default } from './SimpleKeyboard.vue';
+<template>
+    <div class="loading-overlay" v-if="isLoading">
+      <div class="loading-content">
+        <div class="main">
+          <div class="title">{{ confirmInfo.title }}</div>
+          <div class="content">{{ confirmInfo.message }}</div>
+          <div style="display: flex;">
+            <button class="centerBtn" @click="onCancel">{{ confirmInfo.cancelBtn }}</button>
+            <button class="OkBtn" @click="onConfirm">{{ confirmInfo.OkBtn }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    const props = defineProps({
+        isLoading: {
+            type:Boolean,
+            default: false,
+        },
+
+        message: {
+            type: String,
+            default: '正在加载中'
+        },
+
+        confirmInfo:{
+          type:Object,
+          default:()=>{}
+        }
+    })
+
+    const onConfirm  = ()=> {
+      props.confirmInfo.confirmCallback()
+    }
+
+    const onCancel = ()=>{
+      props.confirmInfo.cancelCallback()
+    }
+</script>
+<style scoped lang="less">
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9998;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #4caf50;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  color: white;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.loading-progress {
+  width: 300px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.main{
+  height: 16rem;
+  width: 30rem;
+  background: white;
+  text-align: left;
+  font-size: 1rem;
+  font-weight: 800;
+  padding-left: 10px;
+  padding-top: 5px;
+  border-radius: 10px;
+  .title{
+    text-align: left;
+    font-size: 2rem;
+    font-weight: 800;
+  }
+  .content{
+    height: 8.75rem;
+    display: flex;
+    justify-content:center;
+    align-items: center;
+    font-size: 24px;
+  }
+  .OkBtn{
+    background: #408cff;
+    color: white;
+    border-radius: 0.3125rem;
+    height: 3rem;
+    width: 6rem;
+  }
+
+  .centerBtn{
+    width: 6rem;
+    margin-left: 50%;
+  }
+}
+
+
+</style>

src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Keyboard } from './Keyboard.vue'
 export { default as SimpleKeyboard } from './SimpleKeyboard.vue'
+export { default as Confirm } from './Confirm.vue'

src/main.ts

@@ -8,6 +8,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // import './mock/index'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import Confirm from './components/Confirm.vue'
 
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
@@ -15,7 +16,7 @@ const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
-
+app.component('Confirm', Confirm)
 app.use(router)
 app.use(pinia)
 app.use(ElementPlus)

src/pages/Index/Index.vue

@@ -3,7 +3,7 @@
     <div class="loading-overlay" v-if="isLoading">
       <div class="loading-content">
         <div class="loading-spinner"></div>
-        <span class="loading-text">正在关机中...</span>
+        <span class="loading-text">{{ shutdownMessage }}</span>
       </div>
     </div>
     <el-header class="nav-bar">
@@ -308,6 +308,7 @@
       @close="confirmWarn"
       @confirm="confirmWarn"
     />
+    <Confirm :isLoading="confirmVisible" :confirmInfo="confirmInfo"></Confirm>
   </div>
 </template>
 <script setup lang="ts">
@@ -384,6 +385,10 @@ const runningStore = useRunningStore()
 const settingTubeStore = useSettingTestTubeStore()
 const tubeRackStore = useTestTubeStore()
 const emergencyStore = useEmergencyStore()
+//关机中message
+const shutdownMessage = ref('正在关机中…')
+const confirmInfo = ref({})
+const confirmVisible = ref(false)
 
 const failMessage = ref({
   title: '检测失败',
@@ -519,21 +524,34 @@ const onInitDevice = ()=> {
 let isLoading = ref(false)
 const onCloseDevice = ()=> {
   // ElMessageBox.alert()
-  ElMessageBox.alert('请确认是否关机操作', '提示', {
-    confirmButtonText: '确定',
-    callback:async (action)=>{
-      console.log('action===', action)
-      if(action == 'confirm'){
+  //检查设备状态 设备运行时不可关机
+  const deviceState = deviceStore.deviceState.workState;
+  if(deviceState == 'WORKING'){
+    showWarnModal.value = true;
+    WarnMessage.value = '设备正在运行中，不能进行关机操作'
+    return
+  }
+
+  confirmVisible.value = true
+  confirmInfo.value = {
+    title: '提示',
+    message: '请确认是否进行关机操作？',
+    cancelBtn: '取消',
+    OkBtn: '确认',
+    confirmCallback:()=>{
         //关机时的遮罩层
         isLoading.value = true;
+        confirmVisible.value = false;
         //有时接口返回的太快，看不到loading状态，延迟1s，看一到loading状态。
         setTimeout(async ()=>{
           await shutdown()
-          isLoading.value = false;
+          shutdownMessage.value = '设备已关机，请拔掉电源'
         },1000)
-      }
+    },
+    cancelCallback: ()=>{
+      confirmVisible.value = false;
     }
-  })
+  }
 }
 
 const showInitDeviceAlert = () => {
@@ -1103,47 +1121,47 @@ watch(
 }
 
 .loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(4px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 9998;
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9998;
+}
 
-  .loading-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20px;
-  }
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
 
-  .loading-spinner {
-    width: 60px;
-    height: 60px;
-    border: 4px solid #f3f3f3;
-    border-top: 4px solid #4caf50;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-  }
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #4caf50;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
 
-  .loading-text {
-    color: white;
-    font-size: 24px;
-    font-weight: 500;
-  }
+.loading-text {
+  color: white;
+  font-size: 24px;
+  font-weight: 500;
+}
 
-  .loading-progress {
-    width: 300px;
-    height: 6px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
-    overflow: hidden;
-  }
+.loading-progress {
+  width: 300px;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  overflow: hidden;
+}
   
 </style>

src/utils/getServerInfo.ts

@@ -5,8 +5,8 @@ export function getServerInfo(wsPath: string = '/api/v1/app/ws/state') {
 
   // 获取主机名（IP 或域名）和端口号
   // const host = url.hostname // 例如: "192.168.1.100" 或 "localhost"
-  const host = window.location.hostname;
-  // const host = "127.0.0.1";
+  // const host = window.location.hostname;
+  const host = "192.168.1.119";
   // const port = '8082' // 使用固定的后端端口；由于本地开发时，8080被占用导致ws连接失败，所以使用8082
   const port = "80"
   // 构建 WebSocket URL