<template>
|
<div class="huanbao-container">
|
<img src="@/assets/images/huanbao3d.png" alt="Equipment Background" class="background-image" />
|
<div class="data-tag tag-1" style="top: 80%; left: 10%; width: 180px">入口压力：{{ entryPressure }} Pa</div>
|
<div class="data-tag tag-2" style="top: 15%; left: 50%; width: 180px">出口压力：{{ exitPressure }} Pa</div>
|
<div class="data-tag tag-3" style="top: 85%; left: 10%; width: 180px">进风速：{{ inletVelocity }} m/s</div>
|
<div class="data-tag tag-1" style="top: 20%; left: 50%;width: 180px">出风速：{{ outletVelocity }} m/s</div>
|
<div class="data-tag tag-2" style="top: 45%; left: 40%;width: 180px">温度：{{ temperature }} ℃</div>
|
<div class="data-tag tag-3" style="top: 50%; left: 40%;width: 180px">湿度：{{ humidity }} %</div>
|
<div class="data-tag tag-1" style="top: 55%; left: 40%;width: 180px">风机频率：{{ 35 }} Hz</div>
|
<div class="data-tag tag-2" style="top: 60%; left: 40%;width: 180px">设备压差：{{ pressureDifference }} Pa</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
const entryPressure = ref(0);
|
const exitPressure = ref(0);
|
const inletVelocity = ref(0);
|
const outletVelocity = ref(0);
|
const temperature = ref(0);
|
const humidity = ref(0);
|
const fanFrequency = ref(0);
|
const pressureDifference = ref(0);
|
|
let intervalId;
|
|
const getRandomValue = (min, max) => {
|
return (Math.random() * (max - min) + min).toFixed(2);
|
};
|
|
const updateData = () => {
|
entryPressure.value = getRandomValue(-2000, -1500);
|
exitPressure.value = getRandomValue(80, 120);
|
inletVelocity.value = getRandomValue(50, 80);
|
outletVelocity.value = getRandomValue(30, 60);
|
temperature.value = getRandomValue(70, 80);
|
humidity.value = getRandomValue(80, 90);
|
fanFrequency.value = getRandomValue(35, 40);
|
pressureDifference.value = getRandomValue(800, 1000);
|
};
|
|
onMounted(() => {
|
updateData(); // Initial data load
|
intervalId = setInterval(updateData, 3000); // Update every 3 seconds
|
});
|
|
onUnmounted(() => {
|
clearInterval(intervalId);
|
});
|
</script>
|
|
<style scoped>
|
.huanbao-container {
|
position: relative;
|
width: 99%;
|
height: 88vh; /* Adjust as needed */
|
overflow: hidden;
|
}
|
|
.background-image {
|
width: 100%;
|
height: 100%;
|
object-fit: contain; /* Ensures the image fits within the container */
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
|
.data-tag {
|
position: absolute;
|
background-color: rgba(0, 0, 0, 0.7);
|
color: white;
|
padding: 8px 12px;
|
border-radius: 5px;
|
font-size: 14px;
|
white-space: nowrap;
|
transform: translate(-50%, -50%); /* Center the tag on its position */
|
z-index: 10; /* Ensure tags are above the image */
|
}
|
</style>
|
