ws数据对接

src/views/chart/chart1.vue

@@ -51,10 +51,10 @@
     </div>
     <div class="center" ref="scrollNodeRef" @mouseenter="hover = true" @mouseleave="mouseleave">
       <div v-masonry style="width: 100%; height: 100%" ref="masonryRef">
-        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" />
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" :wsData="wsData"/>
       </div>
       <div v-masonry style="width: 100%; height: 100%">
-        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" />
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id"  :wsData="wsData"/>
       </div>
     </div>
   </div>
@@ -118,6 +118,7 @@ const hover = ref(false);
 const tableData = ref();
 const treeData = ref();
 const centerData = ref([]);
+const wsData = ref({})
 
 const MenuItem = defineComponent({
   name: 'MenuItem',
@@ -259,6 +260,46 @@ const getData = () => {
     });
   });
 };
+
+let data = {
+  'objid': 1993874716645003264,
+  'deviceId': 1,
+  'readStatus': '1',
+  'epcStr': '       SW004',
+  'alarmFlag': '0',
+  'alarmLevel': '<27>',
+  'alarmType': '<27>',
+  'alarmAction': '',
+  'recordTime': '2025-11-27T10:49:11.25084+08:00',
+  'dataType': 2,
+  'deviceStatus': 1
+};
+let data1 = {
+  'objid': 1993880261934321664,
+  'deviceId': 1,
+  'readStatus': '0',
+  'epcStr': '',
+  'alarmFlag': '1',
+  'alarmLevel': '<27>',
+  'alarmType': '<27>',
+  'alarmAction': '未获取到标签信息',
+  'recordTime': '2025-11-27T11:11:13.314071+08:00',
+  'dataType': 2,
+  'deviceStatus': 1
+};
+let data2 = {
+  'objid': 0,
+  'deviceId': 1,
+  'readStatus': '<27>',
+  'epcStr': null,
+  'alarmFlag': '1',
+  'alarmLevel': '<27>',
+  'alarmType': '<27>',
+  'alarmAction': '链接断开',
+  'recordTime': '2025-11-27T10:54:18.600795+08:00',
+  'dataType': 1,
+  'deviceStatus': 2
+};
 const getSocket = () => {
   const socket = new WebSocket('ws://192.168.100.103:7181/ws');
 
@@ -283,6 +324,7 @@ const getSocket = () => {
 onMounted(() => {
   getData();
   getSocket();
+  wsData.value[data.deviceId] = data
 });
 </script>
 <style scoped lang="less">

src/views/chart/treeItem.vue

@@ -14,8 +14,8 @@
           <div class="child-name">
             工位名称: <span style="font-size: 12px">{{ child.locationAlias }}</span>
           </div>
-          <div class="child-code">编码：{{ child.code }}</div>
-          <div class="child-time">时间：{{ child.time }}</div>
+          <div class="child-code">编码：{{ wsData[data.deviceId]?.epcStr}}</div>
+          <div class="child-time">时间：{{ parseTime(wsData[data.deviceId]?.recordTime) }}</div>
         </div>
       </div>
     </div>
@@ -29,12 +29,17 @@
 
 <script setup>
 import { ref, reactive, onMounted, nextTick, watchEffect } from 'vue';
+import {parseTime} from '@/utils/ruoyi.js'
 
 const props = defineProps({
   data: {
     type: Object,
     required: true
-  }
+  },
+  wsData: {
+    type: Object,
+    required: true
+  },
 });
 
 const container = ref(null);