From bbe23e1b143eac05f95fefb57b72bb2890ec1d99 Mon Sep 17 00:00:00 2001
From: chendaofei <857448963@qq.com>
Date: Fri, 20 Dec 2024 16:32:03 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=81=E6=B5=8B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/socket/socket.ts             |   7 +
 frontend/src/utils/webSocketClient.ts         | 103 +++++++++++++
 .../src/views/home/components/preTest.vue     | 135 ++++++++++++++++--
 frontend/src/views/home/components/table.vue  |   2 +-
 .../src/views/home/components/testPopup.vue   | 116 ++++++++++++---
 5 files changed, 330 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/api/socket/socket.ts
 create mode 100644 frontend/src/utils/webSocketClient.ts

diff --git a/frontend/src/api/socket/socket.ts b/frontend/src/api/socket/socket.ts
new file mode 100644
index 0000000..b292381
--- /dev/null
+++ b/frontend/src/api/socket/socket.ts
@@ -0,0 +1,7 @@
+import type { Device } from '@/api/device/interface/device'
+import http from '@/api'
+
+
+export const startTest = (params) => {
+    return http.post(`/prepare/startTest`, params,{ loading: false })
+}
\ No newline at end of file
diff --git a/frontend/src/utils/webSocketClient.ts b/frontend/src/utils/webSocketClient.ts
new file mode 100644
index 0000000..949cb30
--- /dev/null
+++ b/frontend/src/utils/webSocketClient.ts
@@ -0,0 +1,103 @@
+import {ElMessage} from "element-plus";
+
+export default class SocketService {
+    static instance = null;
+    static get Instance() {
+        if (!this.instance) {
+            this.instance = new SocketService();
+        }
+        return this.instance;
+    }
+    // 和服务端连接的socket对象
+    ws = null;
+    // 存储回调函数
+    callBackMapping = {};
+    // 标识是否连接成功
+    connected = false;
+    // 记录重试的次数
+    sendRetryCount = 0;
+    // 重新连接尝试的次数
+    connectRetryCount = 0;
+    //  定义连接服务器的方法
+    connect(url) {
+
+        // 连接服务器
+        if (!window.WebSocket) {
+            return console.log('您的浏览器不支持WebSocket');
+        }
+        console.log(url)
+        // let token = $.cookie('123');
+        // let token = '4E6EF539AAF119D82AC4C2BC84FBA21F';
+
+
+        this.ws = new WebSocket(url);
+        // 连接成功的事件
+        this.ws.onopen = () => {
+            ElMessage.success("webSocket连接服务端成功了");
+            console.log('连接服务端成功了');
+            this.connected = true;
+            // 重置重新连接的次数
+            this.connectRetryCount = 0;
+        };
+        // 1.连接服务端失败
+        // 2.当连接成功之后, 服务器关闭的情况
+        this.ws.onclose = () => {
+            console.log('连接服务端失败');
+            this.connected = false;
+            this.connectRetryCount++;
+            setTimeout(() => {
+               // this.connect();
+            }, 500 * this.connectRetryCount);
+        };
+        // 得到服务端发送过来的数据
+        this.ws.onmessage = (event) => {
+            let message: { [key: string]: any };
+            try {
+                message = JSON.parse(event.data);
+            } catch (e) {
+                return console.error("消息解析失败", event.data, e);
+            }
+            //console.log(message, "从服务端获取到了数据");
+            /* 通过接受服务端发送的type字段来回调函数 */
+            if (message?.type && this.callBackMapping[message.type]) {
+                this.callBackMapping[message.type](message);
+            } else {
+                console.log("抛弃")
+                /* 丢弃或继续写你的逻辑 */
+            }
+        };
+    }
+    // 回调函数的注册
+    registerCallBack(socketType, callBack) {
+        this.callBackMapping[socketType] = callBack;
+    }
+    // 取消某一个回调函数
+    unRegisterCallBack(socketType) {
+        this.callBackMapping[socketType] = null;
+    }
+    // 发送数据的方法
+    send(data) {
+        // 判断此时此刻有没有连接成功
+        if (this.connected) {
+            this.sendRetryCount = 0;
+            try {
+                this.ws.send(JSON.stringify(data));
+            } catch (e) {
+                this.ws.send(data);
+            }
+        } else {
+            this.sendRetryCount++;
+            setTimeout(() => {
+                this.send(data);
+            }, this.sendRetryCount * 500);
+        }
+    }
+
+    // 断开方法
+    closeWs() {
+        if (this.connected) {
+            this.ws.close()
+        }
+        console.log('WS关闭中..');
+    }
+}
diff --git a/frontend/src/views/home/components/preTest.vue b/frontend/src/views/home/components/preTest.vue
index 366fdf5..ca21ee1 100644
--- a/frontend/src/views/home/components/preTest.vue
+++ b/frontend/src/views/home/components/preTest.vue
@@ -62,6 +62,8 @@
 
 </template>
 <script lang="tsx" setup name="preTest">
+import {ElMessage} from "element-plus";
+
 const step1InitLog = ref([
   {
     type: 'info',
@@ -206,28 +208,133 @@ const props = defineProps({
   testStatus: {
     type: String,
     default: 'wait'
+  },
+  webMsgSend: {
+    type: Object,
+    default: () => ({})
   }
 })
+
+
+
+
+
 const testStatus = toRef(props, 'testStatus');
+const webMsgSend = toRef(props, 'webMsgSend');
 const ts = ref('');
 
+watch(webMsgSend,function (newValue,oldValue){
+  console.log(newValue)
+
+  switch (newValue.requestId){
+    case 'yjc_ytxjy':
+      switch (newValue.operateCode){
+        case 'INIT_GATHER':
+          if(newValue.code == 10200) {
+            step1InitLog.value.push({
+              type: 'info',
+              log: '源校验成功!',
+            })
+            activeIndex.value++
+          }else if(newValue.code == 10201){
+            step1InitLog.value = [{
+              type: 'wait',
+              log: '正在进行源校验!',
+            }];
+          }else if(newValue.code == 10552){
+            ElMessage.error(newValue.code)
+          }
+          break;
+
+
+
+
+      }
+      break;
+    case 'yjc_sbtxjy':
+
+      switch (newValue.operateCode) {
+        case 'INIT_GATHER$01':
+          if (newValue.code == 10200) {
+            step2InitLog.value.push({
+              type: 'info',
+              log: newValue.data+'设备通讯校验成功!',
+            })
+
+          } else if (newValue.code == 10201) {
+            step2InitLog.value = [{
+              type: 'wait',
+              log: '正在进行设备通讯校验.....',
+            }];
+          } else if (newValue.code == 10552) {
+            ElMessage.error(newValue.code)
+          } else if (newValue.code == 25001) {
+            activeIndex.value++
+          }
+          break;
+      }
+
+      break;
+    case 'yjc_xyjy':
+      switch (newValue.operateCode) {
+        case 'INIT_GATHER$02':
+          if (newValue.code == 10200) {
+            step3InitLog.value.push({
+              type: 'info',
+              log: '实时数据协议校验:'+newValue.data+'通讯协议校验成功!',
+            })
+
+          } else if (newValue.code == 10201) {
+            step3InitLog.value = [{
+              type: 'wait',
+              log: '正在进行通讯协议校验.....',
+            }];
+          } else if (newValue.code == 10552) {
+            ElMessage.error(newValue.code)
+          }
+          break;
+        case 'INIT_GATHER$03':
+          if (newValue.code == 10200) {
+            step3InitLog.value.push({
+              type: 'info',
+              log: '暂态数据协议校验:'+newValue.data+'通讯协议校验成功!',
+            })
+
+          } else if (newValue.code == 10201) {
+
+          } else if (newValue.code == 10552) {
+            ElMessage.error(newValue.code)
+          } else if (newValue.code == 25001) {
+            activeIndex.value++
+          }
+          break;
+      }
+
+      break;
+    case 'YJC_xujy':
+      break;
+    case 'quit':
+      break;
+  }
+
+
+
+})
+
 watch(activeIndex, function (newValue, oldValue) {
 
+  console.log(activeIndex.value)
   if (activeIndex.value === 1) {
-    step1InitLog.value.length = 0;
-    step1InitLog.value = step1Log.value;
+
   }
   if (activeIndex.value === 2) {
-    step2InitLog.value.length = 0;
-    step2InitLog.value = step2Log.value;
+
   }
   if (activeIndex.value === 3) {
-    step3InitLog.value.length = 0;
-    step3InitLog.value = step3Log.value;
+
   }
   if (activeIndex.value > 3) {
-    step4InitLog.value.length = 0;
-    step4InitLog.value = step4Log.value;
+
   }
   if (activeIndex.value < activeTotalNum.value - 2)
     collapseActiveName.value = (newValue + 1).toString()
@@ -241,7 +348,7 @@ watch(testStatus, function (newValue, oldValue) {
   if (ts.value === 'start') {
     ts.value = 'process'
 
-    let timer = setInterval(() => {
+    /*let timer = setInterval(() => {
       if (activeIndex.value < activeTotalNum.value - 2)
         activeIndex.value++
       else if (activeIndex.value === activeTotalNum.value - 2) {
@@ -253,7 +360,15 @@ watch(testStatus, function (newValue, oldValue) {
         ts.value = 'success'
       }
 
-    }, 1500);
+    }, 1500);*/
+  }else if(ts.value === 'waiting'){
+    activeIndex.value = 0
+    step1InitLog.value = [
+      {
+        type: 'info',
+        log: '暂无数据，等待检测开始',
+      },
+    ]
   }
 })
 
diff --git a/frontend/src/views/home/components/table.vue b/frontend/src/views/home/components/table.vue
index 5cb462e..1358df0 100644
--- a/frontend/src/views/home/components/table.vue
+++ b/frontend/src/views/home/components/table.vue
@@ -791,7 +791,7 @@ const handleTest = async (val:string) => {
     }
     else
     {
-      ElMessage.success(val);
+     // ElMessage.success(val);
       dialogTitle.value = val;
       testPopup.value?.open(dialogTitle.value,props.isTimeCheck)
     }
diff --git a/frontend/src/views/home/components/testPopup.vue b/frontend/src/views/home/components/testPopup.vue
index 953ed33..d25350f 100644
--- a/frontend/src/views/home/components/testPopup.vue
+++ b/frontend/src/views/home/components/testPopup.vue
@@ -14,7 +14,7 @@
         <el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
         </el-steps>
       </div>
-        <preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus"></preTest>
+        <preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus" :webMsgSend="webMsgSend"></preTest>
         <timeTest v-if="stepsActiveIndex === 1 && isTimeCheck" v-model:testStatus="timeTestStatus"></timeTest>
         <!-- <channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest> -->
         <test v-if="stepsActiveIndex >= 2" v-model:testStatus="TestStatus"></test>
@@ -36,7 +36,7 @@
   
   <script lang="tsx" setup name="testPopup">
   import { h } from 'vue';
-  import{ElMessage, ElMessageBox, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
+  import {ElLoading, ElMessage, ElMessageBox, ElSelectV2, FormInstance, FormItemRule} from 'element-plus'
   import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
   import { dialogBig,dialogMiddle} from '@/utils/elementBind'
   //import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
@@ -44,6 +44,8 @@
   import { useDictStore } from '@/stores/modules/dict'
   import preTest from './preTest.vue'
   import timeTest from './timeTest.vue'
+  import socketClient from '@/utils/webSocketClient';
+  import {startTest} from '@/api/socket/socket'
   import channelsTest from './channelsTest.vue'
   //import SvgIcon from '@/components/SvgIcon.vue';
 
@@ -125,16 +127,106 @@ const detectionOptions = ref([
   const timeTestStatus = ref('waiting');//守时校验执行状态
   const channelsTestStatus = ref('waiting');//通道系数校准执行状态
   const TestStatus = ref('waiting');//正式检测执行状态
+  const webMsgSend = ref();//webSocket推送的数据
+
   const dialogTitle = ref('');
   const isTimeCheck = ref(false)
 
   // 打开弹窗，可能是新增，也可能是编辑
   const open = (title: string,time:boolean) => {
+
     dialogTitle.value = title;
     dialogVisible.value = true;
     isTimeCheck.value = time
+    preTestStatus.value = 'waiting';//预检测执行状态
+    //开始创建webSocket客户端
+    const data = reactive({
+      socketServe: socketClient.Instance,
+    });
+    const url = 'ws://localhost:7777/hello?name=cdf';
+    socketClient.Instance.connect(url);
+    data.socketServe = socketClient.Instance;
+    data.socketServe.registerCallBack('aaa', (res) => {
+      // 处理来自服务器的消息
+      console.log('Received message:', res);
+      // 根据需要在这里添加更多的处理逻辑
+
+      if(res.code === 20000){
+        ElMessage.error(message.message)
+        loading.close()
+      }else {
+        webMsgSend.value = res
+      }
+
+
+
+ /*     else if(res.code === 10200){
+        switch (res.operateCode){
+          case 'INIT_GATHER':
+
+            break
+
+        }
+
+      }else if(res.code === 10201){
+        switch (res.operateCode){
+          case 'INIT_GATHER':
+            //开始进入源初始化检测
+
+
+            break
+
+        }
+
+      }*/
+    });
+
+
   }
 
+  let loading;
+  const handleSubmit = () => {
+    skipDisabled.value = true
+    console.log('=============',stepsActiveIndex.value)
+    switch (stepsActiveIndex.value) {
+      case 0:
+        preTestStatus.value = 'start'
+
+
+        /* loading = ElLoading.service({
+           lock: true,
+           text: '',
+           background: 'rgb(255, 255, 255, 0)',
+         })*/
+        startTest({
+          userPageId: "cdf",
+          devIds:["5eaba83670ff4d9daf892a62a5e13ea3","80b4b4f52a4c4064a18319525f8ac13c"],
+          //planId:"31cc203f3fa94fa39323ae7cc411cd66"
+        }).then(res=>{
+
+
+
+        })
+        break;
+      case 1:
+        timeTestStatus.value = 'start'
+        break;
+        // case 2:
+        //       channelsTestStatus.value = 'start'
+        //   break;
+      case 2:
+        TestStatus.value = 'start'
+        break;
+      default:
+        break;
+    }
+
+
+
+
+  };
+
+
   watch(preTestStatus,function(newValue,oldValue){
     console.log(newValue,oldValue);
 
@@ -247,27 +339,7 @@ const getIcon = (index: number) => {
     
   };
   
-  const handleSubmit = () => {
-    skipDisabled.value = true
-    switch (stepsActiveIndex.value) {
-      case 0:
-            preTestStatus.value = 'start'
-        break;
-      case 1:
-            timeTestStatus.value = 'start'
-        break;
-      // case 2:
-      //       channelsTestStatus.value = 'start'
-      //   break;
-      case 2:
-            TestStatus.value = 'start'
-        break;
-      default:
-        break;
-    }
 
-
-  };
   
   // // 当 props.visible 改变时，更新 formData
   // watch(() => props.visible, (newVal) => {