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