zhaohy
4 months ago
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<div class="box-ventilationSystem"> |
|||
<div class="legend-box"> |
|||
<template v-for="(item, index) in legend" :key="index"> |
|||
<div |
|||
class="legend-box-item" |
|||
:style="{ |
|||
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '', |
|||
}" |
|||
@click="selectLegend(item, index)"> |
|||
<div class="legend-box-item-img"> |
|||
<img style="width: 42px" :src="item.url" /> |
|||
</div> |
|||
<div class="legend-box-item-name"> |
|||
{{ item.name }} |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<!-- 温度 --> |
|||
<transition name="zep"> |
|||
<div v-if="selectIndex === 0"> |
|||
<template v-for="(item, index) in sensorData" :key="index"> |
|||
<div |
|||
style="position: absolute" |
|||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"> |
|||
<singleModel :dataSource="item" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</transition> |
|||
<!-- 湿度 --> |
|||
<transition name="zep"> |
|||
<div v-if="selectIndex === 1"> |
|||
<template v-for="(item, index) in humidityData" :key="index"> |
|||
<div |
|||
style="position: absolute" |
|||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"> |
|||
<singleModel :dataSource="item" /> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, onUnmounted } from 'vue'; |
|||
//图片 |
|||
import temperature from '../image/airConditioningSystem/temperature.png'; |
|||
import humidity from '../image/ventilationSystem/humidity.png'; |
|||
import PM25 from '../image/ventilationSystem/PM25.png'; |
|||
import CO2 from '../image/ventilationSystem/CO2.png'; |
|||
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png'; |
|||
import window from '../image/ventilationSystem/window.png'; |
|||
import fanMachine from '../image/ventilationSystem/fanMachine.png'; |
|||
import selectImg from '../image/airConditioningSystem/selectImg.png'; |
|||
import sunRed from '../image/airConditioningSystem/sunRed.png'; |
|||
import sunYellow from '../image/airConditioningSystem/sunYellow.png'; |
|||
import sunBlue from '../image/airConditioningSystem/sunBlue.png'; |
|||
|
|||
import singleModel from '../components/singleModel.vue'; |
|||
|
|||
//图例 |
|||
const legend = ref([ |
|||
{ url: temperature, name: '温度' }, |
|||
{ url: humidity, name: '湿度' }, |
|||
{ url: PM25, name: 'PM2.5' }, |
|||
{ url: CO2, name: 'CO2浓度' }, |
|||
{ url: ventilatingFan, name: '排风扇' }, |
|||
{ url: fanMachine, name: '风幕机' }, |
|||
{ url: window, name: '电动窗' }, |
|||
]); |
|||
// 选择的图例 |
|||
const selectIndex = ref(0); |
|||
//选择方法 |
|||
const selectLegend = (item: any, index: any) => { |
|||
if (selectIndex.value !== index) { |
|||
selectIndex.value = index; |
|||
} |
|||
}; |
|||
//温度数组 |
|||
const sensorData = ref([ |
|||
{ |
|||
title: '多功能传感器A', |
|||
styleText: { left: '48%', bottom: '64%' }, |
|||
type: '温度', |
|||
unit: '℃', |
|||
number: 20, |
|||
url: sunRed, |
|||
}, |
|||
{ |
|||
title: '多功能传感器B', |
|||
styleText: { left: '48.2%', bottom: '43%' }, |
|||
type: '温度', |
|||
unit: '℃', |
|||
number: 20, |
|||
url: sunYellow, |
|||
}, |
|||
]); |
|||
//湿度数组 |
|||
const humidityData = ref([ |
|||
{ |
|||
title: '多功能传感器A', |
|||
styleText: { left: '48%', bottom: '64%' }, |
|||
type: '湿度', |
|||
unit: '%', |
|||
number: 20, |
|||
url: humidity, |
|||
}, |
|||
{ |
|||
title: '多功能传感器B', |
|||
styleText: { left: '48.2%', bottom: '43%' }, |
|||
type: '湿度', |
|||
unit: '%', |
|||
number: 20, |
|||
url: humidity, |
|||
}, |
|||
]); |
|||
onMounted(() => {}); |
|||
onUnmounted(() => {}); |
|||
</script> |
|||
<style lang="less"> |
|||
.legend-box { |
|||
width: 5%; |
|||
height: 100%; |
|||
background-color: rgba(33, 40, 54, 0.9); |
|||
border-radius: 4px 0px 0px 4px; |
|||
padding: 4px; |
|||
.legend-box-item { |
|||
width: 100%; |
|||
height: 90px; |
|||
padding: 10px 0; |
|||
cursor: pointer; |
|||
background-size: 75%; |
|||
background-repeat: no-repeat; |
|||
background-position: center; /* 把图片背景居中 */ |
|||
.legend-box-item-img { |
|||
width: 100%; |
|||
height: 50px; |
|||
display: flex; |
|||
justify-content: center; /* 水平居中 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
} |
|||
.legend-box-item-name { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; /* 水平居中 */ |
|||
align-items: center; /* 垂直居中 */ |
|||
color: white; |
|||
font-size: 12px; |
|||
margin-top: 6px; |
|||
} |
|||
} |
|||
} |
|||
.box-ventilationSystem { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
overflow: hidden; |
|||
background-image: url('../image/ventilationSystem/ventilationSystemBg.png'); |
|||
background-size: 100% 99.9%; |
|||
background-repeat: no-repeat; |
|||
position: relative; |
|||
} |
|||
.zep-enter-active, |
|||
.zep-leave-active { |
|||
animation-duration: 0.6s; /* 增加动画持续时间 */ |
|||
animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */ |
|||
} |
|||
|
|||
.zep-enter-active { |
|||
animation-name: bounce-enter; |
|||
} |
|||
|
|||
.zep-leave-active { |
|||
animation-name: bounce-leave; |
|||
} |
|||
|
|||
/* 进入动画 */ |
|||
@keyframes bounce-enter { |
|||
0% { |
|||
opacity: 0; /* 初始时完全透明 */ |
|||
} |
|||
100% { |
|||
opacity: 1; /* 结束时完全不透明 */ |
|||
} |
|||
} |
|||
|
|||
/* 离开动画 */ |
|||
@keyframes bounce-leave { |
|||
0% { |
|||
opacity: 1; /* 初始时完全不透明 */ |
|||
} |
|||
100% { |
|||
opacity: 0; /* 结束时完全透明 */ |
|||
} |
|||
} |
|||
</style> |
|||