suixy
/
Cambodia-TBR-RFID-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板ws数据获取

Browse Source
main
suixy 3 weeks ago
parent 923a3d082d
commit f2f0dd709c
3 changed files with 92 additions and 45 deletions
Show Stats Download Patch File Download Diff File

2
.env.production
Unescape Escape View File

@ -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

111
src/views/chart/chart1.vue
Unescape Escape View File

@ -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>

24
src/views/chart/treeItem.vue
Unescape Escape View File

@ -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 折线 */

Write Preview
Loading…
Cancel
Save