114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
||
<div id="air-info">
|
||
<div class="fan-speed">
|
||
<img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
|
||
<div class="fan-info">
|
||
<div class="input-fan"><span>风速</span><span>进风：13m/s</span></div>
|
||
<div class="output-fan"><span>出风：13m/s</span></div>
|
||
</div>
|
||
</div>
|
||
<item-info
|
||
:wp="info"
|
||
icon="o2-icon.png"
|
||
name="氧气"
|
||
unit="%"
|
||
/>
|
||
<item-info
|
||
:wp="info1"
|
||
icon="tempture-icon.png"
|
||
name="温度"
|
||
unit=".c"
|
||
/>
|
||
<item-info
|
||
:wp="info2"
|
||
icon="water-icon.png"
|
||
name="湿度"
|
||
unit="%"
|
||
/>
|
||
<item-info
|
||
:wp="info3"
|
||
icon="dust-icon.png"
|
||
name="粉尘"
|
||
unit="mg/m3"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref, reactive} from "vue";
|
||
import ItemInfo from "./childComps/ItemInfo.vue";
|
||
|
||
const info = reactive({
|
||
windPId: 0, //编号
|
||
max: 120, //最大值
|
||
value: 70, //测量值
|
||
point: 60, //阈值
|
||
});
|
||
const info1 = reactive({
|
||
windPId: 0, //编号
|
||
max: 120, //最大值
|
||
value: 60, //测量值
|
||
point: 70, //阈值
|
||
});
|
||
const info2 = reactive({
|
||
windPId: 0, //编号
|
||
max: 120, //最大值
|
||
value: 90, //测量值
|
||
point: 100, //阈值
|
||
});
|
||
const info3 = reactive({
|
||
windPId: 0, //编号
|
||
max: 120, //最大值
|
||
value: 80, //测量值
|
||
point: 88, //阈值
|
||
});
|
||
setInterval(() => {
|
||
info.value = parseInt(Math.random() * 10) * 10;
|
||
info1.value = parseInt(Math.random() * 10) * 10;
|
||
info2.value = parseInt(Math.random() * 10) * 10;
|
||
info3.value = parseInt(Math.random() * 10) * 10;
|
||
}, 2000);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
#air-info {
|
||
position: absolute;
|
||
z-index: 100;
|
||
width: 824px;
|
||
height: 400px;
|
||
top: 1003px;
|
||
right: 72px;
|
||
background-image: url(@/assets/images/airInfo/bg.png);
|
||
padding: 43px 20px 30px 32px;
|
||
|
||
.fan-speed {
|
||
display: flex;
|
||
height: 40px;
|
||
font-size: 30px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #ffffff;
|
||
line-height: 40px;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 29px;
|
||
height: 34px;
|
||
}
|
||
|
||
.fan-info {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.input-fan {
|
||
margin: 0 26px;
|
||
|
||
> span:last-child {
|
||
margin-left: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|