开始执行页面 长链接数据调整

src/views/modules/runTest/run-test.vue

@@ -88,6 +88,7 @@ const getTestProjectTopList = () => {
     .then((result) => {
       topProAllList.value = result.data;
       topProSelectedList.value = result.data.map((item) => item.id); // 默认选中全部
+      setTestingData();
     })
     .finally(() => {
       getExcutingGlobalMachines();
@@ -188,16 +189,18 @@ const getSattisticData = () => {
 
 // ===== websocket ====
 const logList = ref<any[]>([]); //日志数据
-const testingWSData = computed(() => {
-  //   根据选择的测试项目的名字作为key，值是空数组用来存放 日志数据
-  console.log("aa", topProSelectedList);
+const testingWSData = ref();
+const setTestingData = () => {
   let data = {};
   topProSelectedList.value.forEach((id) => {
     // 根据id去所有的数据中找对应的项目
     let project = topProAllList.value.find((item) => item.id == id);
     data[project.projectName] = [];
   });
-  return data;
+  testingWSData.value = data;
+};
+watch(topProSelectedList, () => {
+  setTestingData();
 });
 
 const wsClient = useWebSocket(import.meta.env.VITE_WEBSOCKET_URL as string, {
@@ -221,70 +224,61 @@ const wsClient = useWebSocket(import.meta.env.VITE_WEBSOCKET_URL as string, {
     console.log("长链接断开");
   },
   onMessage: (msg) => {
-    if (wsClient.data.value && JSON.parse(wsClient.data.value)) {
-      let megData = JSON.parse(wsClient.data.value);
-      console.log("长链接的消息 解析json后", megData);
-      let msgType = megData?.msgtype ?? "";
-
-      // 执行过程日志
-      if (msgType == 1) {
-        // let l = { data: { log: "label: 直流电源" }, msgtype: 1 };
-        let logData = megData?.data?.log;
-        if (logData) {
-          logList.value.push(logData);
-        }
-      }
-      // 测试数据
-      else if (msgType === 2) {
-        // {
-        //   "msgtype": 2,
-        //   "data": {
-        //   "status": 1,				// 1：未测试 2：正在测试 3：测试合格 4：测试不合格
-        //     "dataContent": "",
-        //     "dataItem": "",
-        //     "EngineeringId": "",
-        //     "projectId": "",
-        // }
-        // }
-        let logData = megData?.data;
-
-        if (logData) {
-          //   根据 projectId 去已经选择的项目中找到名字
-          let project = topProAllList.value.find(
-            (item) => item.id == logData.projectId
-          );
-
-          console.log("============", project);
-          project.status = logData?.status;
-          let proName = project?.projectName;
-          testingWSData.value[proName].push(logData);
-          console.log("=====222222", testingWSData.value);
-        }
+    handleWSMessage();
+  },
+});
+
+const handleWSMessage = () => {
+  if (wsClient.data.value && JSON.parse(wsClient.data.value)) {
+    let megData = JSON.parse(wsClient.data.value);
+    // let megData = {
+    //   data: {
+    //     EngineeringId: "84",
+    //     dataContent: "xxxxxx",
+    //     dataItem: "测试值0",
+    //     projectId: "9",
+    //     status: 3,
+    //   },
+    //   msgtype: 2,
+    // };
+    console.log("长链接的消息 解析json后", megData);
+    let msgType = megData?.msgtype ?? "";
+
+    // 执行过程日志
+    if (msgType == 1) {
+      let logData = megData?.data?.log;
+      if (logData) {
+        logList.value.push(logData);
       }
-      // 测试仪器列表状态
-      else if (msgType === 3) {
-        // {
-        //   "msgtype": 3,
-        //   "data": [{
-        //   "deviceNo":"",				/* 设备编号 */
-        //   "devcieState":""				/* 0不在线，1在线 */
-        // }
-        // ]
-        // }
-        let devData = megData?.data ?? [];
-        devData.forEach((item) => {
-          //   根据 instrumentId 去已经选择的仪器中找到名字
-          let machine = testingMachines.value.find(
-            (machine) => machine.instrumentId == item.instrumentId
-          );
-          if (machine) {
-            machine.deviceState = item.deviceState; // 更新仪器状态
-          }
-        });
+    }
+    // 测试数据
+    else if (msgType === 2) {
+      let logData = megData?.data;
+      if (logData) {
+        //   根据 projectId 去已经选择的项目中找到名字
+        let project = topProAllList.value.find(
+          (item) => item.id == logData.projectId
+        );
+        project.status = logData.status;
+        let proName = project?.projectName;
+        testingWSData.value[proName].push(logData);
       }
     }
-  },
-});
+    // 测试仪器列表状态
+    else if (msgType === 3) {
+      let devData = megData?.data ?? [];
+      devData.forEach((item) => {
+        //   根据 instrumentId 去已经选择的仪器中找到名字
+        let machine = testingMachines.value.find(
+          (machine) => machine.instrumentId == item.instrumentId
+        );
+        if (machine) {
+          machine.deviceState = item.deviceState; // 更新仪器状态
+        }
+      });
+    }
+  }
+};
 
 onBeforeUnmount(() => {
   wsClient.close();
@@ -482,9 +476,9 @@ const checkStartEnable = (): boolean => {
           <span>数据项</span>
           <span>数据内容</span>
         </div>
-        <el-scrollbar class="content-B-height-4">
+        <el-scrollbar class="content-B-height-4" v-if="testingWSData">
           <div v-for="(proName, index) in Object.keys(testingWSData)">
-            <div class="cssj-tit">项目名称: {{ testingWSData }}</div>
+            <div class="cssj-tit">项目名称: {{ proName }}</div>
             <div
               v-for="(data, index) in testingWSData[proName]"
               :key="index"
@@ -521,6 +515,9 @@ const checkStartEnable = (): boolean => {
         </div>
       </div>
       <div class="right">
+        <!--        <el-button type="primary" @click="handleWSMessage"-->
+        <!--          >测试假数据</el-button-->
+        <!--        >-->
         <div>已用时：300s</div>
         <!--        <div class="test-btn progress" @click="startToRunTest">-->
         <!--          <svg-icon icon-class="start-test" />-->