@ -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,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,116 @@ |
|||
<!-- 双图 --> |
|||
<template> |
|||
<div class="box"> |
|||
<div class="box-title title"> |
|||
{{ dataSource.title }} |
|||
</div> |
|||
<div |
|||
style=" |
|||
width: 100%; |
|||
height: 80px; |
|||
margin-top: 12px; |
|||
display: flex; |
|||
color: white; |
|||
font-size: 12px; |
|||
"> |
|||
<div |
|||
style=" |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
"> |
|||
<img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" /> |
|||
<div style="margin-top: 4px"> 风量 </div> |
|||
<div style="margin-top: -5px"> |
|||
<span style="font-size: 18px; color: #0dffff; font-style: italic"> 18 </span> |
|||
<span style="font-size: 10px; margin-left: 5px">m3/h</span> |
|||
</div> |
|||
</div> |
|||
<div |
|||
style=" |
|||
width: 50%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
"> |
|||
<img style="width: 39px" :src="getSunUrl()" /> |
|||
<div style="margin-top: 4px"> 温度 </div> |
|||
<div style="margin-top: -5px"> |
|||
<span :style="{ fontSize: '18px', color: getColor(), fontStyle: 'italic' }"> |
|||
{{ dataSource.number }} |
|||
</span> |
|||
<span style="font-size: 10px; margin-left: 5px">℃</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import sunRed from '../image/airConditioningSystem/sunRed.png'; |
|||
import sunYellow from '../image/airConditioningSystem/sunYellow.png'; |
|||
import sunBlue from '../image/airConditioningSystem/sunBlue.png'; |
|||
const props = defineProps({ |
|||
dataSource: { |
|||
type: Object, |
|||
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性 |
|||
}, |
|||
}); |
|||
const getSunUrl = () => { |
|||
if (props.dataSource.number > 0 && props.dataSource.number < 20) { |
|||
return sunBlue; |
|||
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) { |
|||
return sunYellow; |
|||
} else { |
|||
return sunRed; |
|||
} |
|||
}; |
|||
const getColor = () => { |
|||
if (props.dataSource.number > 0 && props.dataSource.number < 20) { |
|||
return '#0dffa4'; |
|||
} else if (props.dataSource.number >= 20 && props.dataSource.number < 30) { |
|||
return '#f59a23'; |
|||
} else { |
|||
return '#f36163'; |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.box { |
|||
width: 192px; |
|||
height: 125px; |
|||
background: inherit; |
|||
background-color: rgba(2, 29, 71, 0.9); |
|||
box-sizing: border-box; |
|||
border-width: 1px; |
|||
border-style: solid; |
|||
border-color: rgba(13, 255, 255, 1); |
|||
border-radius: 8px; |
|||
.title { |
|||
position: relative; |
|||
padding-left: 9px; |
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 10px; |
|||
top: 90%; |
|||
transform: translateY(-50%); |
|||
height: 10px; |
|||
width: 2.5px; |
|||
border-radius: 1px; |
|||
background-color: #0dffff; |
|||
} |
|||
} |
|||
.box-title { |
|||
width: 100%; |
|||
height: 20px; |
|||
font-size: 12px; |
|||
color: #0dffff; |
|||
padding: 12px 20px; |
|||
} |
|||
} |
|||
</style> |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 8.0 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
After Width: | Height: | Size: 8.4 KiB |