From f2f0dd709c1258abb9339271898f346f5c7d9d7d Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Thu, 4 Dec 2025 11:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BFws=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.production              |   2 +-
 src/views/chart/chart1.vue   | 111 +++++++++++++++++++++++++----------
 src/views/chart/treeItem.vue |  24 ++++----
 3 files changed, 92 insertions(+), 45 deletions(-)

diff --git a/.env.production b/.env.production
index 324885b..76eb49d 100644
--- a/.env.production
+++ b/.env.production
@@ -18,7 +18,7 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 VITE_APP_BASE_API = '/prod-api'
 
 # ws地址
-VITE_WEBSOCKET_ADDRESS = 'ws://192.168.0.16:7181/ws'
+VITE_WEBSOCKET_ADDRESS = 'ws://127.0.0.1:7181/ws'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip
diff --git a/src/views/chart/chart1.vue b/src/views/chart/chart1.vue
index 91b8c14..fc860a9 100644
--- a/src/views/chart/chart1.vue
+++ b/src/views/chart/chart1.vue
@@ -27,8 +27,8 @@
       <Chart ref="successRateRef"></Chart>
     </div>
     <div class="menu">
-      <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
-        <template v-for="(i, index) in treeData" :key="i.id">
+      <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 centerData" :key="i.id">
           <MenuItem :data="i" />
         </template>
       </el-menu>
@@ -64,10 +64,10 @@
     </div>
     <div class="center" ref="scrollNodeRef" @mouseenter="mouseenter" @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" :wsData="wsData" :copy="false" />
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" :deviceData="deviceData" :copy="false" />
       </div>
       <div v-masonry style="width: 100%; height: 100%">
-        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" :wsData="wsData" :copy="true" />
+        <TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" :deviceData="deviceData" :copy="true" />
       </div>
     </div>
   </div>
@@ -83,10 +83,10 @@ import { useRouter } from 'vue-router';
 
 const router = useRouter();
 const toIndex = () => {
-  router.push('index');
+  router.push('/index');
 };
 
-import { getRealtimeStats, getLocationTree, getSuccessRateTrends } from '@/api/rfid/dashboard';
+import { getRealtimeStats, getLocationTree, getSuccessRateTrends, getDeviceLatestRecords } from '@/api/rfid/dashboard';
 
 let timer = null;
 
@@ -98,13 +98,11 @@ function findParentsWithLocationType3(arr) {
       let hasChildWith3 = false;
 
       if (item.children && Array.isArray(item.children)) {
-        // 遍历 children，看是否有 locationType 为 "3"
         for (const child of item.children) {
           if (child.locationType === '3') {
             hasChildWith3 = true;
           }
         }
-        // 递归继续遍历 children
         traverse(item.children);
       }
 
@@ -147,7 +145,7 @@ const mouseleave = () => {
   setTimeout(() => {
     hover.value = false;
     scrollNodeRef.value.scrollTop -= 1;
-  }, 500);
+  }, 100);
 };
 
 const overview = ref({});
@@ -168,7 +166,7 @@ const hover = ref(false);
 const tableData = ref();
 const treeData = ref();
 const centerData = ref([]);
-const wsData = ref({});
+const deviceData = ref({});
 
 const MenuItem = defineComponent({
   name: 'MenuItem',
@@ -348,9 +346,6 @@ const getData = () => {
     treeData.value = res.data;
     centerData.value = findParentsWithLocationType3(res.data);
     console.log(centerData.value);
-    nextTick(() => {
-      scrollToBottom(scrollNodeRef.value, 2);
-    });
   });
 };
 
@@ -402,32 +397,55 @@ const getSocket = () => {
 
   socket.addEventListener('message', (event) => {
     let data = JSON.parse(event.data);
-    console.log(data);
-    if (data?.deviceStatus === '1') {
-      wsData.value[data.deviceId] = data;
+
+    if (data?.dataType === '2') {
+      deviceData.value[data.deviceId] = {
+        status: data.readStatus === '1',
+        code: data.epcStr,
+        time: parseTime(data.recordTime)
+      };
     }
-    if (data?.deviceStatus === '2' && data?.alarmFlag === '1') {
+    if (data?.dataType === '1') {
+      deviceData.value[data.deviceId] = {
+        status: false,
+        code: '',
+        time: parseTime(data.recordTime)
+      };
+    }
+    if (data?.alarmFlag === '1') {
       tableData.value.push({
         alarmTime: parseTime(data.recordTime),
-        deviceName: wsData.value[data.deviceId]?.epcStr.trimStart() || '',
+        deviceName: deviceData.value[data.deviceId]?.epcStr?.trimStart() || '',
         location: centerData.value.flatMap((item) => item.children || []).find((child) => child.deviceId === targetDeviceId)?.locationAlias || '',
         alarmAction: data.alarmAction
       });
-      if (data.dataType === '2') {
-        wsData.value[data.deviceId] = data;
-      }
-    }
-    if (data?.deviceStatus === '3' && data?.alarmFlag === '1') {
-      tableData.value.push({
-        alarmTime: parseTime(data.recordTime),
-        deviceName: wsData.value[data.deviceId]?.epcStr.trimStart() || '',
-        location: centerData.value.flatMap((item) => item.children || []).find((child) => child.deviceId === targetDeviceId)?.locationAlias || '',
-        alarmAction: data.alarmAction
-      });
-      if (data.dataType === '2') {
-        wsData.value[data.deviceId] = data;
-      }
     }
+
+    // if (data?.deviceStatus === '1') {
+    //   deviceData.value[data.deviceId] = data;
+    // }
+    // if (data?.deviceStatus === '2' && data?.alarmFlag === '1') {
+    //   tableData.value.push({
+    //     alarmTime: parseTime(data.recordTime),
+    //     deviceName: deviceData.value[data.deviceId]?.epcStr.trimStart() || '',
+    //     location: centerData.value.flatMap((item) => item.children || []).find((child) => child.deviceId === targetDeviceId)?.locationAlias || '',
+    //     alarmAction: data.alarmAction
+    //   });
+    //   if (data.dataType === '2') {
+    //     deviceData.value[data.deviceId] = data;
+    //   }
+    // }
+    // if (data?.deviceStatus === '3' && data?.alarmFlag === '1') {
+    //   tableData.value.push({
+    //     alarmTime: parseTime(data.recordTime),
+    //     deviceName: deviceData.value[data.deviceId]?.epcStr.trimStart() || '',
+    //     location: centerData.value.flatMap((item) => item.children || []).find((child) => child.deviceId === targetDeviceId)?.locationAlias || '',
+    //     alarmAction: data.alarmAction
+    //   });
+    //   if (data.dataType === '2') {
+    //     deviceData.value[data.deviceId] = data;
+    //   }
+    // }
   });
 
   socket.addEventListener('close', () => {
@@ -440,9 +458,32 @@ const getSocket = () => {
     // console.error('⚠️ WebSocket 出错:', error);
   });
 };
+let timer1 = null;
 onMounted(() => {
   getData();
+  nextTick(() => {
+    scrollToBottom(scrollNodeRef.value, 2);
+  });
+
+  getDeviceLatestRecords().then((res) => {
+    res.data.forEach((item) => {
+      deviceData.value[item.deviceId] = {
+        code: item.latestBarcode,
+        status: item.readStatus === '1',
+        time: parseTime(new Date())
+      };
+    });
+  });
   getSocket();
+  timer1 = setInterval(() => {
+    getData();
+  }, 1000 * 30);
+});
+onBeforeMount(() => {
+  if (timer1) {
+    clearInterval(timer1);
+    timer1 = null;
+  }
 });
 </script>
 <style scoped lang="less">
@@ -578,6 +619,8 @@ onMounted(() => {
     width: 14.7%;
     height: 69.5%;
     overflow: auto;
+    border-top-left-radius: 1.3vw;
+    border-top-right-radius: 1.3vw;
 
     &::-webkit-scrollbar {
       display: none;
@@ -653,4 +696,8 @@ onMounted(() => {
 /deep/ .el-menu {
   border: none;
 }
+
+/deep/ .el-sub-menu {
+  border-bottom: 1px solid #061b3d;
+}
 </style>
diff --git a/src/views/chart/treeItem.vue b/src/views/chart/treeItem.vue
index cf825aa..39a3d43 100644
--- a/src/views/chart/treeItem.vue
+++ b/src/views/chart/treeItem.vue
@@ -12,16 +12,16 @@
         :id="copy ? '' : `tree${child.id}`"
         v-for="(child, index) in data.children"
         :key="index"
-        :class="wsData[data.deviceId]?.epcStr ? 'child-item' : 'child-item1'"
+        :class="deviceData[data.deviceId]?.status ? 'child-item' : 'child-item1'"
         :ref="(el) => (childRefs[index] = el)"
       >
-        <div :class="wsData[data.deviceId]?.epcStr ? 'child-icon' : 'child-icon1'"></div>
+        <div :class="deviceData[data.deviceId]?.status ? 'child-icon' : 'child-icon1'"></div>
         <div class="child-info">
           <div class="child-name">
-            工位名称: <span style="font-size: 12px">{{ child.locationAlias }}</span>
+            工位名称: <span style="font-size: 0.8vw">{{ child.locationAlias }}</span>
           </div>
-          <div class="child-code">编码：{{ wsData[data.deviceId]?.epcStr?.trimStart() }}</div>
-          <div class="child-time">时间：{{ parseTime(wsData[data.deviceId]?.recordTime) }}</div>
+          <div class="child-code">总装码：{{ deviceData[data.deviceId]?.code?.trimStart() }}</div>
+          <div class="child-time">时间：{{ parseTime(deviceData[data.deviceId]?.time) }}</div>
         </div>
       </div>
     </div>
@@ -42,7 +42,7 @@ const props = defineProps({
     type: Object,
     required: true
   },
-  wsData: {
+  deviceData: {
     type: Object,
     required: true
   },
@@ -101,8 +101,8 @@ watchEffect(() => {
 <style scoped>
 .node {
   color: #fff;
-  font-size: 12px;
-  width: 360px;
+  font-size: 0.6vw;
+  width: 346px;
   position: relative;
   vertical-align: top;
   display: flex;
@@ -146,7 +146,7 @@ watchEffect(() => {
 /* 子节点列表 */
 .children {
   display: inline-block;
-  width: 260px;
+  width: 246px;
 }
 
 .child-item {
@@ -212,7 +212,7 @@ watchEffect(() => {
   position: absolute;
   top: 10px;
   left: 74px;
-  font-size: 14px;
+  font-size: 0.8vw;
   white-space: nowrap;
 }
 
@@ -226,14 +226,14 @@ watchEffect(() => {
   position: absolute;
   top: 27px;
   left: 74px;
-  font-size: 14px;
+  font-size: 0.8vw;
 }
 
 .child-time {
   position: absolute;
   top: 46px;
   left: 74px;
-  font-size: 14px;
+  font-size: 0.8vw;
 }
 
 /* SVG 折线 */