修改看板ws数据获取

src/views/chart/chart1.vue

@@ -30,7 +30,7 @@
       <el-menu active-text-color="#ffd04b" background-color="#062852" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
         <template v-for="(i, index) in treeData" :key="i.id">
           <!--          <MenuItem :data="i" />-->
-          <el-sub-menu index="1">
+          <el-sub-menu :index="index">
             <template #title>
               <span>{{ i.locationAlias }}</span>
             </template>
@@ -114,6 +114,14 @@ function findParentsWithLocationType3(arr) {
 
       if (hasChildWith3) {
         result.push(item);
+        console.log(item);
+        item.children.forEach((v) => {
+          deviceData.value[v.deviceId] = {
+            code: '',
+            status: v.onlineStatus === '1',
+            time: parseTime(new Date(), '{m}-{d} {h}:{i}')
+          };
+        });
       }
     }
   }
@@ -348,10 +356,6 @@ const getData = () => {
     overview.value = res.data?.overview || {};
     tableData.value = res.data?.alarmStats || [];
   });
-  getLocationTree().then((res) => {
-    treeData.value = res.data;
-    centerData.value = findParentsWithLocationType3(res.data);
-  });
 };
 
 let data = {
@@ -407,20 +411,23 @@ const getSocket = () => {
       deviceData.value[data.deviceId] = {
         status: true,
         code: data.epcStr || '',
-        time: parseTime(data.recordTime, '{m}-{d} {h}:{i}')
+        time: parseTime(new Date(), '{m}-{d} {h}:{i}')
+        // time: parseTime(data.recordTime, '{m}-{d} {h}:{i}')
       };
     } else {
       deviceData.value[data.deviceId] = {
         status: false,
         code: data.epcStr || '',
-        time: parseTime(data.recordTime, '{m}-{d} {h}:{i}')
+        time: parseTime(new Date(), '{m}-{d} {h}:{i}')
+        // time: parseTime(data.recordTime, '{m}-{d} {h}:{i}')
       };
     }
     if (data?.dataType === '1') {
     }
     if (data?.alarmFlag === '1') {
       tableData.value.push({
-        alarmTime: parseTime(data.recordTime, '{m}-{d} {h}:{i}'),
+        time: parseTime(new Date(), '{m}-{d} {h}:{i}'),
+        // alarmTime: parseTime(data.recordTime, '{m}-{d} {h}:{i}'),
         deviceName: deviceData.value[data.deviceId]?.epcStr?.trimStart() || '',
         location: centerData.value.flatMap((item) => item.children || []).find((child) => child.deviceId === targetDeviceId)?.locationAlias || '',
         alarmAction: data.alarmAction
@@ -471,13 +478,15 @@ onMounted(() => {
     scrollToBottom(scrollNodeRef.value, 2);
   });
 
+  getLocationTree().then((res) => {
+    treeData.value = res.data;
+    centerData.value = findParentsWithLocationType3(res.data);
+  });
   getDeviceLatestRecords().then((res) => {
     res.data.forEach((item) => {
-      deviceData.value[item.deviceId] = {
-        code: item.latestBarcode,
-        status: item.readStatus === '1',
-        time: parseTime(new Date(), '{m}-{d} {h}:{i}')
-      };
+      if (deviceData.value[item.deviceId]) {
+        deviceData.value[item.deviceId].code = item.latestBarcode;
+      }
     });
     console.log(deviceData.value);
   });

src/views/chart/treeItem.vue

@@ -154,7 +154,8 @@ watchEffect(() => {
   border-radius: 6px;
   margin-bottom: 8px;
   position: relative;
-  height: 75px;
+  //height: 75px;
+  padding-bottom: 12px;
   margin-left: 20px;
   background-image: url('@/assets/chart/efc42f5a4ed9491a16f6817d7fbe2336.png');
   background-size: 100% 100%;
@@ -167,7 +168,8 @@ watchEffect(() => {
   border-radius: 6px;
   margin-bottom: 8px;
   position: relative;
-  height: 75px;
+  //height: 75px;
+  padding-bottom: 12px;
   margin-left: 20px;
   background-image: url('@/assets/chart/430786e7de542172c80b3882e4ea8dbd.png');
   background-size: 100% 100%;
@@ -197,6 +199,7 @@ watchEffect(() => {
 .child-icon1 {
   width: 50px;
   height: 50px;
+
   border-radius: 4px;
   margin-right: 8px;
   background-image: url('@/assets/chart/device2.png');
@@ -208,31 +211,39 @@ watchEffect(() => {
   transform: translateY(-50%);
 }
 
+.child-info {
+  //position: absolute;
+  margin-top: 10px;
+  margin-left: 74px;
+  width: 150px;
+}
 .child-name {
-  position: absolute;
-  top: 10px;
-  left: 74px;
+  //position: absolute;
+  //top: 10px;
+  //left: 74px;
   font-size: 0.8vw;
-  white-space: nowrap;
+  width: 150px;
+  //white-space: nowrap;
 }
 
 .child-code,
 .child-time {
   opacity: 0.9;
   white-space: nowrap;
+  width: 150px;
 }
 
 .child-code {
-  position: absolute;
-  top: 27px;
-  left: 74px;
+  //position: absolute;
+  //top: 27px;
+  //left: 74px;
   font-size: 0.8vw;
 }
 
 .child-time {
-  position: absolute;
-  top: 46px;
-  left: 74px;
+  //position: absolute;
+  //top: 46px;
+  //left: 74px;
   font-size: 0.8vw;
 }