websocket

.env

@@ -1 +1,2 @@
 VITE_BASE_URL=http://192.168.1.111:8899
+VITE_WEBSOCKET_URL=ws://127.0.0.1:8899/websocket/nuclear

src/components/Task.vue

@@ -17,7 +17,7 @@
         row-key="id"
         :data="data"
         :columns="columns"
-        table-layout="auto"
+        table-layout="fixed"
         :height="500"
         :scroll="{ type: 'virtual', rowHeight: 69, bufferSize: 10 }"
         resizable
@@ -291,6 +291,7 @@ export default {
         {
           title: '操作',
           fixed: 'right',
+          colKey: 'oper',
           cell: (h, { row }) => {
             if (this.role == 'ROLE_ADMIN') {
               return (

src/pages/index.vue

@@ -337,6 +337,7 @@
 
 <script setup>
 import { useAccountStore, useTaskStore, useImageStore } from '@/store'
+import socket from '@/utils/websocket'
 import Cookie from '@/utils/cookie'
 import { ref, onMounted, computed } from 'vue'
 import Excel from 'cpns/Excel'
@@ -355,6 +356,9 @@ const imageStore = useImageStore()
 const hasTestedLength = ref(0)
 const testArrLength = ref(121)
 
+// websocket
+const websocket = ref(null)
+
 const detailProcess = computed(() => {
   const testArr = taskStore.excelData.filter(
     item => item.firstSign && item.secondSign,
@@ -413,8 +417,17 @@ const logout = () => {
   window.location.href = '/login'
 }
 
+const getSocketdata = res => {
+  console.log(res)
+  if (res == 'update') {
+    // 更新一系列数据
+  }
+}
+
 onMounted(async () => {
   // taskStore.getExcelList(1)
+  websocket.value = new socket()
+  websocket.value.WebSocketSet(getSocketdata)
 })
 </script>
 

src/utils/websocket.js

@@ -0,0 +1,27 @@
+class socket {
+  constructor() {
+    this.ws = null
+  }
+  WebSocketSet(callBack) {
+    if ('WebSocket' in window) {
+      this.ws = new WebSocket(`${import.meta.env.VITE_WEBSOCKET_URL}`)
+      this.ws.onopen = res => {
+        console.log('socket连接成功')
+      }
+      this.ws.onmessage = res => {
+        console.log('数据已接收...', res.data)
+        callBack(res.data)
+      }
+    } else {
+      alert('当前浏览器不支持websocket')
+    }
+  }
+  close() {
+    this.ws.close()
+    this.ws.onclose = res => {
+      console.log(console.log('socket已经关闭'))
+    }
+  }
+}
+
+export default socket