zhaohy
3 months ago
7 changed files with 609 additions and 106 deletions
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<div style="width: 100%; height: 100%"> |
|||
<div class="box-title title"> |
|||
<span style="margin-left: 12px">地暖</span> |
|||
</div> |
|||
<div class="box-bottom"> |
|||
<template v-for="(item, index) in dataSource" :key="index"> |
|||
<div class="box-bottom-item"> |
|||
<div class="box-bottom-item-top"> |
|||
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" /> |
|||
<div class="box-bottom-item-top-title"> |
|||
{{ item.title }} |
|||
</div> |
|||
<div |
|||
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column"> |
|||
<div class="box-bottom-item-line"> |
|||
开关 |
|||
<div class="box-bottom-item-line-value"> |
|||
<a-tag |
|||
style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center" |
|||
:style="{ |
|||
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0], |
|||
color: ['#39d7bb', '#f3614d', '#ffa403'][0], |
|||
}" |
|||
>开启</a-tag |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
电机转速 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #f59a23">1210转/分钟</span> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
换热器热度 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #00ffd2">8℃</span> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
风量 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #00ffd2">12345m3/h</span> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
风速 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #00ffd2">22m/s</span> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
PM2.5 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #00ffd2">30</span> |
|||
</div> |
|||
</div> |
|||
<div class="box-bottom-item-line"> |
|||
二氧化碳 |
|||
<div class="box-bottom-item-line-value"> |
|||
<span style="color: #00ffd2">123CO2e</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
defineProps({ |
|||
dataSource: { |
|||
type: Object, |
|||
default: () => { |
|||
return { title: '' }; |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less"> |
|||
.title { |
|||
position: relative; |
|||
padding-left: 9px; |
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 40%; |
|||
transform: translateY(-50%); |
|||
height: 12px; |
|||
width: 3px; |
|||
border-radius: 1px; |
|||
background-color: #4388fb; |
|||
} |
|||
} |
|||
.box-title { |
|||
color: white; |
|||
padding: 0px 10px; |
|||
font-size: 14px; |
|||
width: 100%; |
|||
height: 30px; |
|||
} |
|||
.box-bottom { |
|||
width: 100%; |
|||
height: calc(100% - 40px); |
|||
overflow-y: auto; |
|||
margin-top: 10px; |
|||
overflow-x: hidden; |
|||
.box-bottom-item { |
|||
width: 100%; |
|||
height: 478px; |
|||
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png); |
|||
background-size: 100% 99%; |
|||
background-repeat: no-repeat; |
|||
color: white; |
|||
padding: 8px; |
|||
.box-bottom-item-top { |
|||
width: 100%; |
|||
font-size: 18px; |
|||
padding: 6px 12px; |
|||
position: relative; |
|||
} |
|||
.box-bottom-item-top-title { |
|||
display: flex; |
|||
position: absolute; |
|||
left: 62px; |
|||
top: 7px; |
|||
} |
|||
.box-bottom-item-line { |
|||
width: 100%; |
|||
flex: 1; |
|||
background-color: #0d1b32; |
|||
font-size: 14px; |
|||
padding: 6px 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
.box-bottom-item-line-value { |
|||
display: flex; |
|||
position: absolute; |
|||
right: 24px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,113 @@ |
|||
<template> |
|||
<div class="newTrend-box-item"> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
开关 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<a-tag |
|||
style="background-color: #2d3f5b; width: 50px; text-align: center" |
|||
:style="{ |
|||
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0], |
|||
color: ['#39d7bb', '#f3614d', '#ffa403'][0], |
|||
}" |
|||
>开启</a-tag |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
出风温/湿度 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #00ffd2">8℃/22%</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
滤网压差 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #00ffd2">0.14kpa</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
PM2.5 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #00ffd2">30</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
风扇转速 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #f59a23">1210转/分钟</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
回风温/湿度 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #f59a23">{{ selectConditioning.number }}℃/42%</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
滤网时间 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #00ffd2">248/h</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="newTrend-box-item-box"> |
|||
<div class="newTrend-box-item-box-line"> |
|||
二氧化碳 |
|||
<div class="newTrend-box-item-box-line-value"> |
|||
<span style="color: #00ffd2">123CO2e</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
defineProps({ |
|||
selectConditioning: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.newTrend-box-item { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.newTrend-box-item-box { |
|||
width: 240px; |
|||
height: 60px; |
|||
padding: 6px; |
|||
.newTrend-box-item-box-line { |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: #2d3f5b; |
|||
padding: 12px 24px; |
|||
display: flex; |
|||
align-items: center; |
|||
position: relative; |
|||
} |
|||
.newTrend-box-item-box-line-value { |
|||
display: flex; |
|||
position: absolute; |
|||
right: 12px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
</style> |
After Width: | Height: | Size: 5.0 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 3.9 KiB |
Loading…
Reference in new issue