From 6f2432466d0fc64acb6cf742b20ad0e2ef8369ea Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Fri, 28 Nov 2025 13:26:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ws=E6=95=B0=E6=8D=AE=E5=A4=84?=
=?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/chart/chart1.vue | 120 ++++++++++++++++++++++++++++++++---
src/views/chart/treeItem.vue | 52 +++++++++++++--
src/views/index.vue | 37 +++++++----
3 files changed, 181 insertions(+), 28 deletions(-)
diff --git a/src/views/chart/chart1.vue b/src/views/chart/chart1.vue
index ac431a4..b1cfe10 100644
--- a/src/views/chart/chart1.vue
+++ b/src/views/chart/chart1.vue
@@ -10,6 +10,8 @@
RFID中间件监控平台
+ 成功率
+ 告警统计
设备数量:
在线数量:
离线数量:
@@ -57,12 +59,12 @@
-
@@ -73,9 +75,12 @@ import thbg from '@/assets/chart/thbg.png';
import trbg from '@/assets/chart/trbg.png';
import TreeItem from './treeItem.vue';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+import { parseTime } from '@/utils/ruoyi.js';
import { getRealtimeStats, getLocationTree, getSuccessRateTrends } from '@/api/rfid/dashboard';
+let timer = null;
+
function findParentsWithLocationType3(arr) {
const result = [];
@@ -122,6 +127,13 @@ const timeFun = () => {
};
};
+const mouseenter = () => {
+ hover.value = true;
+ if (timer) {
+ clearTimeout(timer);
+ }
+ timer = null;
+};
const mouseleave = () => {
setTimeout(() => {
hover.value = false;
@@ -172,7 +184,9 @@ const MenuItem = defineComponent({
})}
) : (
- {data.locationAlias}
+ scrollToId(data.id)} index={`${data.id}`}>
+ {data.locationAlias}
+
);
}
});
@@ -195,6 +209,31 @@ function scrollToBottom(scrollNode, speed = 1) {
requestAnimationFrame(step);
}
+const scrollToId = (id) => {
+ const container = scrollNodeRef.value;
+ if (!container) return;
+
+ const target = container.querySelector(`#tree${id}`);
+ if (target) {
+ const containerTop = container.getBoundingClientRect().top;
+ const targetTop = target.getBoundingClientRect().top;
+
+ const scrollOffset = targetTop - containerTop + container.scrollTop;
+
+ container.scrollTo({
+ top: scrollOffset,
+ behavior: 'smooth' // 平滑滚动
+ });
+ hover.value = true;
+ if (timer) {
+ clearTimeout(timer);
+ }
+ timer = null;
+ timer = setTimeout(() => {
+ hover.value = false;
+ }, 5000);
+ }
+};
const getData = () => {
getSuccessRateTrends().then((res) => {
successRateRef.value.setData({
@@ -233,7 +272,14 @@ const getData = () => {
},
xAxis: {
type: 'category',
- data: res.data.map((item) => item.timePoint)
+ data: res.data.map((item) => item.timePoint),
+ axisLabel: {
+ show: true,
+ color: '#7ae7f8'
+ },
+ axisLine: {
+ show: false
+ }
},
grid: {
top: 30,
@@ -242,10 +288,18 @@ const getData = () => {
bottom: 30
},
yAxis: {
+ name: '%',
+ nameTextStyle: {
+ color: '#7ae7f8'
+ },
splitLine: {
show: false
},
- type: 'value'
+ type: 'value',
+ axisLabel: {
+ show: true,
+ color: '#7ae7f8'
+ }
},
series: [
{
@@ -284,6 +338,7 @@ const getData = () => {
getLocationTree().then((res) => {
treeData.value = res.data;
centerData.value = findParentsWithLocationType3(res.data);
+ console.log(centerData.value);
nextTick(() => {
scrollToBottom(scrollNodeRef.value, 2);
});
@@ -333,11 +388,37 @@ const getSocket = () => {
const socket = new WebSocket('ws://192.168.0.16:7181/ws');
socket.addEventListener('open', () => {
- // console.log('✅ WebSocket 连接成功');
+ console.log('✅ WebSocket 连接成功');
});
socket.addEventListener('message', (event) => {
- // console.log(JSON.parse(event.data));
+ let data = JSON.parse(event.data);
+ console.log(data);
+ if (data?.deviceStatus === '1') {
+ wsData.value[data.deviceId] = data;
+ }
+ if (data?.deviceStatus === '2' && 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: '未获取到标签'
+ });
+ 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: '链接断开'
+ });
+ if (data.dataType === '2') {
+ wsData.value[data.deviceId] = data;
+ }
+ }
});
socket.addEventListener('close', () => {
@@ -353,7 +434,6 @@ const getSocket = () => {
onMounted(() => {
getData();
getSocket();
- wsData.value[data.deviceId] = data;
});