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

fix:新风系统 空调箱

Browse Source
This commit is contained in:
zhaohy
2024-08-01 10:34:39 +08:00
parent 75df2dfb11
commit 01fd569185
7 changed files with 609 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue
View File

@@ -1,85 +1,133 @@
<template>
<div style="width: 100%; height: 100%">
<div class="box-title title">
<span style="margin-left: 12px">空调相组</span>
<span style="margin-left: 12px">空调箱组</span>
</div>
<div class="box-center">
<template v-if="!showAllButtons">
<template v-for="(item, index) in dataSource.slice(0, 3)" :key="index">
<div
class="box-center-button"
:style="{
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
}"
@click="selectConditioningData(item, index)">
{{ item.title }}
</div>
</template>
<div style="width: 100%; height: 20px">
<span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
</div>
</template>
<template v-else>
<template v-for="(item, index) in dataSource" :key="index">
<div
class="box-center-button"
:style="{
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
}"
@click="selectConditioningData(item, index)">
{{ item.title }}
</div>
</template>
<div style="width: 100%; height: 20px">
<span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
</div>
</template>
</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 class="box-bottom-items">
<div class="box-bottom-item-top">
<img width="42" src="../../image/airConditioningSystem/conditioningModelIcon.png" />
<div class="box-bottom-item-top-title">
{{ selectConditioning.title }}
</div>
<div style="width: 100%; height: 300px; display: flex; gap: 12px; flex-direction: column">
<div class="box-bottom-top">
开关
<div class="box-bottom-item-line-value">
<a-switch
:disabled="true"
:checked="selectConditioning.enableRules === 1 ? true : false"
:class="{
'blue-background': selectConditioning.enableRules === 1 ? true : false,
'grey-background': selectConditioning.enableRules === 1 ? false : true,
}" />
</div>
</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 class="box-bottom-center">
<div style="width: 100%; height: 40px; line-height: 40px">温度 </div>
<div style="width: 100%; height: 60px">
<a-slider
v-model:value="selectConditioning.number"
:marks="marks"
:min="0"
:max="100"
:disabled="true"
:trackStyle="{ backgroundColor: '#91caff', height: '5px' }"
:handleStyle="{ backgroundColor: '#ffffff', borderColor: '#91caff' }"
:railStyle="{ backgroundColor: 'gray' }">
<template #mark="{ label, point }">
<span style="color: #0dfff2"> {{ label }}</span>
</template>
</a-slider>
</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 class="box-bottom-center">
<div style="width: 100%; height: 40px; line-height: 40px"> 风量 </div>
<div style="width: 100%; height: 60px">
<a-slider id="test" v-model:value="selectConditioning.number" :disabled="true" />
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
dataSource: {
type: Object,
default: () => {
return { title: '' };
},
},
import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
// defineProps({
// dataSource: {
// type: Object,
// default: () => {
// return [];
// },
// },
// selectConditioning: {
// type: Object,
// default: () => {
// return {};
// },
// },
// });
const selectConditioning = ref({});
const dataSource = ref([]);
// 向上传递方法
const emit = defineEmits(['selectConditioningData']);
const showAllButtons = ref(false);
const marks = ref<Record<number, any>>({
0: 0,
100: 100,
});
const toggle = (data: any, selectData: any) => {
console.log(data, '数据');
dataSource.value = data;
selectConditioning.value = selectData;
};
const selectConditioningData = (data: any, index: any) => {
selectConditioning.value = data;
//向上传递 选择的空调箱
emit('selectConditioningData', data);
};
defineExpose({
toggle,
});
</script>
<style lang="less">
<style lang="less" scoped>
.title {
position: relative;
padding-left: 9px;
@@ -102,16 +150,35 @@
width: 100%;
height: 30px;
}
.box-center {
width: 100%;
height: auto;
padding: 9px;
color: white;
font-size: 14px;
display: flex;
flex-wrap: wrap;
gap: 10px;
.box-center-button {
width: 95px;
height: 40px;
background-color: #b5cdd9;
border: 1px solid #aaaaaa;
text-align: center;
line-height: 40px;
cursor: pointer;
}
}
.box-bottom {
width: 100%;
height: calc(100% - 40px);
overflow-y: auto;
margin-top: 10px;
overflow-x: hidden;
.box-bottom-item {
.box-bottom-items {
width: 100%;
height: 478px;
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
height: 354px;
background-image: url(../../image/airConditioningSystem/conditioningModelBg.png);
background-size: 100% 99%;
background-repeat: no-repeat;
color: white;
@@ -128,22 +195,53 @@
left: 62px;
top: 7px;
}
.box-bottom-item-line {
width: 100%;
flex: 1;
background-color: #0d1b32;
font-size: 14px;
padding: 6px 24px;
.box-bottom-item-line-value {
display: flex;
align-items: center;
position: relative;
.box-bottom-item-line-value {
display: flex;
position: absolute;
right: 24px;
font-weight: bold;
}
position: absolute;
right: 24px;
font-weight: bold;
}
}
.box-bottom-top {
width: 100%;
height: 50px;
display: flex;
position: relative;
padding: 6px 24px;
font-size: 14px;
background-color: #0d1b32;
align-items: center;
}
.box-bottom-center {
width: 100%;
height: 100px;
display: flex;
position: relative;
padding: 6px 24px;
font-size: 14px;
background-color: #0d1b32;
flex-direction: column;
}
}
/* 禁用状态下的轨道样式 */
:deep(.ant-slider-disabled .ant-slider-track) {
background-color: #91caff !important; /* 自定义颜色 */
}
/* 禁用状态下的滑块样式 */
:deep(.ant-slider-disabled .ant-slider-handle) {
background-color: #ffffff !important; /* 自定义颜色 */
border-color: #91caff !important; /* 自定义颜色 */
}
/* 禁用状态下的底部轨道样式 */
:deep(.ant-slider-disabled .ant-slider-rail) {
background-color: #384c5d !important; /* 自定义颜色 */
}
.openzm {
cursor: pointer;
margin-left: 12px;
font-size: 14px;
}
</style>