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-07-31 15:13:37 +08:00
parent d881ac0180
commit 67a76481cc
15 changed files with 604 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue Normal file
View File

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

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTrendModel.vue Normal file
View File

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