You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
3.5 KiB
131 lines
3.5 KiB
<template>
|
|
<div class="box-model">
|
|
<div class="box-model-title title">
|
|
{{ dataSource.title }}
|
|
</div>
|
|
<div class="box-model-bottom">
|
|
<div class="box-model-item">
|
|
<div style="width: 100%; height: 50%">
|
|
<img width="40" src="../../image/ventilationSystem/state-success.png" />
|
|
</div>
|
|
<!--正常 故障 维修 告警 -->
|
|
<span
|
|
:style="{
|
|
color: {
|
|
'1': '#0dffff',
|
|
'2': 'rgba(255, 118, 54, 1)',
|
|
'3': 'rgba(255, 188, 70, 1)',
|
|
'4': 'rgba(243, 97, 99, 1)',
|
|
}[1],
|
|
}">
|
|
正常
|
|
</span>
|
|
</div>
|
|
<div v-if="dataSource.type === 'fan'" class="box-model-item">
|
|
<div style="width: 100%; height: 50%">
|
|
<img width="40" src="../../image/ventilationSystem/highSpeed.png" />
|
|
</div>
|
|
<!-- 低速 中速 高速 关闭 -->
|
|
<span
|
|
:style="{
|
|
color: [
|
|
'rgba(85, 209, 255, 1)',
|
|
'rgba(0, 144, 255, 1)',
|
|
'rgba(87, 87, 255, 1)',
|
|
'rgba(191, 205, 226, 1)',
|
|
][2],
|
|
fontSize: '12px',
|
|
}">
|
|
高速启动</span
|
|
>
|
|
</div>
|
|
<div v-if="dataSource.type !== 'fan'" class="box-model-item">
|
|
<div style="width: 100%; height: 50%">
|
|
<img width="40" src="../../image/ventilationSystem/state-open.png" />
|
|
</div>
|
|
<!-- 开启 关闭 -->
|
|
<span
|
|
:style="{
|
|
color: ['rgba(0, 255, 210, 1)', 'rgba(191, 205, 226, 1)'][0],
|
|
fontSize: '12px',
|
|
}">
|
|
开启</span
|
|
>
|
|
</div>
|
|
<div v-if="dataSource.type === 'airCurtain'" class="box-model-item">
|
|
<div style="width: 100%; height: 50%">
|
|
<img width="40" src="../../image/ventilationSystem/hotAir.png" />
|
|
</div>
|
|
<!-- 冷风 热风 -->
|
|
<span
|
|
:style="{
|
|
color: ['rgba(85, 209, 255, 1)', 'rgba(252, 247, 112, 1)'][1],
|
|
fontSize: '12px',
|
|
}">
|
|
热风
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
dataSource: {
|
|
type: Object,
|
|
default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.box-model {
|
|
min-width: 162px;
|
|
height: 110px;
|
|
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-model-title {
|
|
width: 100%;
|
|
height: 20px;
|
|
font-size: 12px;
|
|
color: #0dffff;
|
|
padding: 12px 20px;
|
|
}
|
|
.box-model-bottom {
|
|
width: auto;
|
|
height: 70px;
|
|
margin-top: 12px;
|
|
display: flex;
|
|
color: white;
|
|
font-size: 12px;
|
|
display: flex;
|
|
}
|
|
.box-model-item {
|
|
width: 80px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center; /* 垂直居中 */
|
|
justify-content: center; /* 水平居中 */
|
|
text-align: center; /* 文字水平居中 */
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|
|
|