|
|
|
|
@ -1,6 +1,14 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="bg"></div>
|
|
|
|
|
<div class="logo"></div>
|
|
|
|
|
<div class="time">
|
|
|
|
|
<div class="time1">{{ time.time }}</div>
|
|
|
|
|
<div style="display: inline-block">
|
|
|
|
|
<div class="time2">{{ time.week }}</div>
|
|
|
|
|
<div class="time3">{{ time.date }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title">RFID中间件监控平台</div>
|
|
|
|
|
<div class="topTitle" style="left: 13%">设备数量:</div>
|
|
|
|
|
<div class="topTitle" style="left: 37.5%">在线数量:</div>
|
|
|
|
|
@ -51,10 +59,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" :wsData="wsData"/>
|
|
|
|
|
<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" :wsData="wsData"/>
|
|
|
|
|
<TreeItem v-masonry-tile :data="i" v-for="i in centerData" :key="i.id" :wsData="wsData" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -96,6 +104,24 @@ function findParentsWithLocationType3(arr) {
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const timeFun = () => {
|
|
|
|
|
const now = new Date();
|
|
|
|
|
|
|
|
|
|
const pad = (n) => String(n).padStart(2, '0');
|
|
|
|
|
const time = `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
|
|
|
|
|
|
|
|
|
|
const weekMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
|
|
|
|
const week = weekMap[now.getDay()];
|
|
|
|
|
|
|
|
|
|
const date = `${now.getFullYear()}.${pad(now.getMonth() + 1)}.${pad(now.getDate())}`;
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
time,
|
|
|
|
|
week,
|
|
|
|
|
date
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const mouseleave = () => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
hover.value = false;
|
|
|
|
|
@ -109,7 +135,10 @@ const classOptions = ref({
|
|
|
|
|
step: 1,
|
|
|
|
|
hover: true
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
time.value = timeFun();
|
|
|
|
|
}, 1000);
|
|
|
|
|
const time = ref(timeFun());
|
|
|
|
|
const masonryRef = ref(null);
|
|
|
|
|
const scrollSeamlessRef = ref(null);
|
|
|
|
|
const scrollNodeRef = ref(null);
|
|
|
|
|
@ -118,7 +147,7 @@ const hover = ref(false);
|
|
|
|
|
const tableData = ref();
|
|
|
|
|
const treeData = ref();
|
|
|
|
|
const centerData = ref([]);
|
|
|
|
|
const wsData = ref({})
|
|
|
|
|
const wsData = ref({});
|
|
|
|
|
|
|
|
|
|
const MenuItem = defineComponent({
|
|
|
|
|
name: 'MenuItem',
|
|
|
|
|
@ -301,7 +330,7 @@ let data2 = {
|
|
|
|
|
'deviceStatus': 2
|
|
|
|
|
};
|
|
|
|
|
const getSocket = () => {
|
|
|
|
|
const socket = new WebSocket('ws://192.168.100.103:7181/ws');
|
|
|
|
|
const socket = new WebSocket('ws://192.168.0.16:7181/ws');
|
|
|
|
|
|
|
|
|
|
socket.addEventListener('open', () => {
|
|
|
|
|
// console.log('✅ WebSocket 连接成功');
|
|
|
|
|
@ -324,7 +353,7 @@ const getSocket = () => {
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getData();
|
|
|
|
|
getSocket();
|
|
|
|
|
wsData.value[data.deviceId] = data
|
|
|
|
|
wsData.value[data.deviceId] = data;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
@ -347,6 +376,50 @@ onMounted(() => {
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 5%;
|
|
|
|
|
left: 5%;
|
|
|
|
|
width: 8vw;
|
|
|
|
|
height: 1.91474vw;
|
|
|
|
|
background-image: url('@/assets/chart/highwayLogo.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 5%;
|
|
|
|
|
right: 5%;
|
|
|
|
|
color: #78caf6;
|
|
|
|
|
font-family: 'CSD-Block-Bold';
|
|
|
|
|
|
|
|
|
|
.time1 {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
line-height: 2vw;
|
|
|
|
|
font-size: 1.6vw;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
font-family: 'CSD-Block-Bold';
|
|
|
|
|
font-feature-settings: 'tnum';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time2 {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
line-height: 1vw;
|
|
|
|
|
font-size: 0.8vw;
|
|
|
|
|
font-family: 'CSD-Block-Bold';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time3 {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
font-size: 0.9vw;
|
|
|
|
|
line-height: 1vw;
|
|
|
|
|
font-family: 'CSD-Block-Bold';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 2vw;
|
|
|
|
|
|
suixy
3 weeks ago
