xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add:通风系统功能

Browse Source
This commit is contained in:
zhaohy
2024-08-05 15:22:42 +08:00
parent ea25c22383
commit c6961fdfa8
15 changed files with 1506 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/boxModel.vue Normal file
View File

@@ -0,0 +1,131 @@
<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>