feat: ws 断开连接后, 支持重新连接

src/views/order/podCN/PodMakeOrder.vue

@@ -16,6 +16,15 @@
         <span>播种墙配货</span>
         <span v-if="socketConnect === 'online'" class="online">[在线]</span>
         <span v-else class="offline">[离线]</span>
+        <ElButton
+          v-if="socketConnect === 'offline'"
+          type="success"
+          size="small"
+          :icon="Refresh"
+          @click="reconnectWebSocket"
+        >
+          刷新
+        </ElButton>
       </div>
     </template>
     <div class="pod-make-order-content">
@@ -268,7 +277,7 @@ import {
   printNormalPdf,
 } from '@/api/podCnOrder'
 import useUserStore from '@/store/user'
-import { Check } from '@element-plus/icons-vue'
+import { Check, Refresh } from '@element-plus/icons-vue'
 import socket from '@/utils/cnWebsocket'
 import { WarehouseListData } from '@/types/api/podUsOrder'
 import { ElMessage } from 'element-plus'
@@ -1086,6 +1095,27 @@ const handleWarehouseChange = (value: string | number) => {
   _warehouseId.value = value
   initOrderDetailBox()
 }
+const reconnectWebSocket = async () => {
+  if (!userStore.user?.factory.id) return
+
+  try {
+    await socket.init(
+      {
+        account: userStore.user?.account.toString(),
+        factoryNo: userStore.user?.factory.id.toString(),
+      },
+      messageChange,
+    )
+    socket.send({
+      code: 'STARTORDERCN',
+      factoryNo: userStore.user?.factory.id,
+      warehouseId: warehouseId.value,
+    })
+  } catch (error) {
+    console.error('WebSocket 重连失败:', error)
+    ElMessage.error('WebSocket 重连失败，请稍后重试')
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/order/podCN/SuperPodMakeOrder.vue

@@ -16,6 +16,15 @@
         <span>超级播种墙配货</span>
         <span v-if="socketConnect === 'online'" class="online">[在线]</span>
         <span v-else class="offline">[离线]</span>
+        <ElButton
+          v-if="socketConnect === 'offline'"
+          type="success"
+          size="small"
+          :icon="Refresh"
+          @click="reconnectWebSocket"
+        >
+          刷新
+        </ElButton>
       </div>
     </template>
     <div class="pod-make-order-content">
@@ -241,7 +250,7 @@ import {
   printNormalPdf,
 } from '@/api/podCnOrder'
 import useUserStore from '@/store/user'
-import { Check } from '@element-plus/icons-vue'
+import { Check, Refresh } from '@element-plus/icons-vue'
 import socket from '@/utils/cnSuperWebsocket'
 import { ElMessage } from 'element-plus'
 import { filePath } from '@/api/axios.ts'
@@ -969,6 +978,25 @@ const handleCurrentChange = (url: string) => {
     coverImage.value = url || ''
   }
 }
+const reconnectWebSocket = async () => {
+  if (userStore.user?.factory.id) {
+    try {
+      await socket.init(
+        {
+          account: userStore.user?.account.toString(),
+          factoryNo: userStore.user?.factory.id.toString(),
+        },
+        messageChange,
+      )
+      socket.send({
+        code: 'SUPERFACTORYSTARTORDER',
+        factoryNo: userStore.user?.factory.id,
+      })
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
 </script>
 
 <style scoped lang="scss">

src/views/order/podUs/PodMakeOrder.vue

@@ -16,6 +16,15 @@
         <span>播种墙配货</span>
         <span v-if="socketConnect === 'online'" class="online">[在线]</span>
         <span v-else class="offline">[离线]</span>
+        <ElButton
+          v-if="socketConnect === 'offline'"
+          type="success"
+          size="small"
+          :icon="Refresh"
+          @click="reconnectWebSocket"
+        >
+          刷新
+        </ElButton>
       </div>
     </template>
     <div class="pod-make-order-content">
@@ -256,10 +265,11 @@ import {
   printNormalPickPdfApi,
 } from '@/api/podUsOrder'
 import useUserStore from '@/store/user'
-import { Check } from '@element-plus/icons-vue'
+import { Check, Refresh } from '@element-plus/icons-vue'
 import socket from '@/utils/websocket'
 import { WarehouseListData } from '@/types/api/podUsOrder'
 import { filePath } from '@/api/axios.ts'
+import { ElButton, ElIcon } from 'element-plus'
 
 const { getCLodop } = useLodop()
 
@@ -468,7 +478,7 @@ const renderItemBox = (bool: boolean) => {
   renderLock = true
 
   let boxItem = podBoxList.value?.find((item) => item.box === boxIndex.value)
-  console.log(boxItem,'boxItem')
+  console.log(boxItem, 'boxItem')
   if (!boxItem) boxItem = { data: { productList: [] } }
   const { data } = boxItem
   data?.productList?.forEach((el) => {
@@ -530,7 +540,7 @@ const renderItemBox = (bool: boolean) => {
   console.log(408, data)
 
   if (productList.every((item) => item.power)) {
-    if(userStore.user?.id!==boxItem.fromUser) return
+    if (userStore.user?.id !== boxItem.fromUser) return
     print(data, false, () => {
       renderLock = false
     })
@@ -562,7 +572,7 @@ const messageChange = (data: WebSocketMessage) => {
   }
 }
 const setPodBoxList = (data: WebSocketMessage) => {
-  console.log(data,'datatatata')
+  console.log(data, 'datatatata')
   const obj = data.txt
   if (obj && typeof obj === 'string') {
     const parsedData = JSON.parse(obj)
@@ -745,7 +755,7 @@ const initOrderDetailBox = async () => {
     }
     orderStore.setPodBoxList({
       boxList: res.data,
-      fromUser: userStore.user?userStore.user.id : 0,
+      fromUser: userStore.user ? userStore.user.id : 0,
       factoryNo,
       warehouseId: warehouseId.value,
     })
@@ -1013,7 +1023,7 @@ const print = (data: OrderData, forcePrint = false, callback?: () => void) => {
     const factoryNo = userStore.user?.factory.id
     if (!factoryNo) return
     orderStore.setPodBoxList({
-      fromUser:userStore.user?userStore.user.id:0,
+      fromUser: userStore.user ? userStore.user.id : 0,
       boxList: item ? (item.data as PodMakeOrderData[]) : null,
       factoryNo,
       box: _boxIndex || undefined,
@@ -1032,7 +1042,10 @@ const clearAllBox = async () => {
     return
   }
   try {
-    const res = await clearAllBoxApi(warehouseId.value,userStore.user?.factory.id)
+    const res = await clearAllBoxApi(
+      warehouseId.value,
+      userStore.user?.factory.id,
+    )
     if (res.code !== 200) return
     // orderStore.setPodBoxList({
     //   boxList: res.data,
@@ -1104,6 +1117,28 @@ const printNormal = async () => {
   ElMessage.success('操作成功')
   window.open(filePath + res.message)
 }
+
+const reconnectWebSocket = async () => {
+  if (!userStore.user?.factory.id) return
+
+  try {
+    await socket.init(
+      {
+        account: userStore.user?.account.toString(),
+        factoryNo: userStore.user?.factory.id.toString(),
+      },
+      messageChange,
+    )
+    socket.send({
+      code: 'STARTORDER',
+      factoryNo: userStore.user?.factory.id,
+      warehouseId: warehouseId.value,
+    })
+  } catch (error) {
+    console.error('WebSocket 重连失败:', error)
+    ElMessage.error('WebSocket 重连失败，请稍后重试')
+  }
+}
 </script>
 
 <style scoped lang="scss">