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

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

@@ -1,85 +1,133 @@
<template> <template>
<div style="width: 100%; height: 100%"> <div style="width: 100%; height: 100%">
<div class="box-title title"> <div class="box-title title">
<span style="margin-left: 12px">空调相组</span> <span style="margin-left: 12px">空调箱组</span>
</div> </div>
<div class="box-bottom"> <div class="box-center">
<template v-for="(item, index) in dataSource" :key="index"> <template v-if="!showAllButtons">
<div class="box-bottom-item"> <template v-for="(item, index) in dataSource.slice(0, 3)" :key="index">
<div class="box-bottom-item-top"> <div
<img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" /> class="box-center-button"
<div class="box-bottom-item-top-title"> :style="{
backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
}"
@click="selectConditioningData(item, index)">
{{ item.title }} {{ item.title }}
</div> </div>
<div </template>
style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column"> <div style="width: 100%; height: 20px">
<div class="box-bottom-item-line"> <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
开关
<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> </div>
</template> </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">
<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 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>
<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>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
defineProps({ import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
dataSource: { import { ref } from 'vue';
type: Object,
default: () => { // defineProps({
return { title: '' }; // 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> </script>
<style lang="less"> <style lang="less" scoped>
.title { .title {
position: relative; position: relative;
padding-left: 9px; padding-left: 9px;
@@ -102,16 +150,35 @@
width: 100%; width: 100%;
height: 30px; 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 { .box-bottom {
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
overflow-y: auto; overflow-y: auto;
margin-top: 10px; margin-top: 10px;
overflow-x: hidden; overflow-x: hidden;
.box-bottom-item { .box-bottom-items {
width: 100%; width: 100%;
height: 478px; height: 354px;
background-image: url(../../image/airConditioningSystem/newTrendModelBg.png); background-image: url(../../image/airConditioningSystem/conditioningModelBg.png);
background-size: 100% 99%; background-size: 100% 99%;
background-repeat: no-repeat; background-repeat: no-repeat;
color: white; color: white;
@@ -128,15 +195,6 @@
left: 62px; left: 62px;
top: 7px; 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 { .box-bottom-item-line-value {
display: flex; display: flex;
position: absolute; position: absolute;
@@ -144,6 +202,46 @@
font-weight: bold; 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> </style>

149
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/floorHeatingModel.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>

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

@@ -0,0 +1,113 @@
<template>
<div class="newTrend-box-item">
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
开关
<div class="newTrend-box-item-box-line-value">
<a-tag
style="background-color: #2d3f5b; width: 50px; text-align: center"
:style="{
border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
color: ['#39d7bb', '#f3614d', '#ffa403'][0],
}"
>开启</a-tag
>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
出风温/湿度
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">8℃/22%</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
滤网压差
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">0.14kpa</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
PM2.5
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">30</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
风扇转速
<div class="newTrend-box-item-box-line-value">
<span style="color: #f59a23">1210转/分钟</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
回风温/湿度
<div class="newTrend-box-item-box-line-value">
<span style="color: #f59a23">{{ selectConditioning.number }}℃/42%</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
滤网时间
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">248/h</span>
</div>
</div>
</div>
<div class="newTrend-box-item-box">
<div class="newTrend-box-item-box-line">
二氧化碳
<div class="newTrend-box-item-box-line-value">
<span style="color: #00ffd2">123CO2e</span>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
defineProps({
selectConditioning: {
type: Object,
default: () => {
return {};
},
},
});
</script>
<style lang="less" scoped>
.newTrend-box-item {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.newTrend-box-item-box {
width: 240px;
height: 60px;
padding: 6px;
.newTrend-box-item-box-line {
width: 100%;
height: 100%;
background-color: #2d3f5b;
padding: 12px 24px;
display: flex;
align-items: center;
position: relative;
}
.newTrend-box-item-box-line-value {
display: flex;
position: absolute;
right: 12px;
font-weight: bold;
}
}
}
</style>

181
hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue
View File

@@ -112,25 +112,57 @@
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;" headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
bodyStyle="background-color: rgba(33, 40, 54, 0.95);" bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
@close="handleClose"> @close="handleClose">
<conditioningModel :dataSource="newTrend" /> <conditioningModel
ref="conditioningModels"
@selectConditioningData="selectConditioningData" />
</a-drawer> </a-drawer>
<!-- 空调箱 顶部详情 --> <!-- 空调箱 顶部详情 -->
<transition name="zep">
<div <div
v-if="selectIndex === 3" v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title"
style=" class="newTrend-box">
width: 974px; <newTreedBox :selectConditioning="selectConditioning" />
height: 146px;
background-color: #282d33;
display: flex;
position: absolute;
top: 20px;
right: 380px;
border-radius: 12px;
padding: 12px;
color: white;
">
{{ selectConditioning.title }}
</div> </div>
</transition>
<!-- 地暖 -->
<div v-if="selectIndex === 5">
<template v-for="(item, index) in floorHeatingData" :key="index">
<div
style="position: absolute"
:style="{
left:
'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'),
bottom:
'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'),
}">
<doubleSingleModel :dataSource="item" />
</div>
<img
style="width: 50px; height: 75px; position: absolute; z-index: 1"
:style="{
left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'),
bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'),
transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)',
}"
src="../image/liftState/lift/line.png" />
<img
style="width: 42px; height: 42px; position: absolute"
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
src="../image/airConditioningSystem/floorHeatingIcon.png" />
</template>
</div>
<!-- 地暖详情 -->
<a-drawer
:visible="selectIndex === 5"
:title="' '"
:mask="false"
class="newTrendModel"
placement="right"
headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
@close="handleClose">
<floorHeatingModel :dataSource="floorHeatingData" />
</a-drawer>
</div> </div>
</div> </div>
</template> </template>
@@ -152,9 +184,10 @@
import doubleSingleModel from '../components/doubleSingleModel.vue'; import doubleSingleModel from '../components/doubleSingleModel.vue';
import newTrendModel from './components/newTrendModel.vue'; import newTrendModel from './components/newTrendModel.vue';
import conditioningModel from './components/conditioningModel.vue'; import conditioningModel from './components/conditioningModel.vue';
onMounted(() => { import newTreedBox from './components/newTreedBox.vue';
selectConditioning.value = conditioningData.value[0]; import floorHeatingModel from './components/floorHeatingModel.vue';
});
onMounted(() => {});
onUnmounted(() => {}); onUnmounted(() => {});
//图例 //图例
const legend = ref([ const legend = ref([
@@ -399,18 +432,84 @@
url: freshAir, url: freshAir,
}, },
]); ]);
const conditioningModels = ref(null);
//选择的空调箱 //选择的空调箱
const selectConditioning = ref({}); const selectConditioning = ref({});
//子组件 选择空调箱
const selectConditioningData = (data: any) => {
selectConditioning.value = {};
setTimeout(() => {
selectConditioning.value = { ...data };
}, 100);
};
// 地暖
const floorHeatingData = ref([
{
title: '走廊西地暖',
styleText: { left: '13.5%', bottom: '34%' },
type: '地暖',
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '站厅西地暖',
styleText: { left: '19.5%', bottom: '38.5%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '站厅西地暖',
styleText: { left: '33%', bottom: '43%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '安检区地暖',
styleText: { left: '46%', bottom: '49.5%' },
lineType: 1,
unit: '℃',
number: 40,
url: freshAir,
},
{
title: '站厅东地暖',
styleText: { left: '57.5%', bottom: '56%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
{
title: '办公东地暖',
styleText: { left: '69.5%', bottom: '62%' },
lineType: 1,
unit: '℃',
number: 10,
url: freshAir,
},
]);
// 选择的图例 // 选择的图例
const selectIndex = ref(0); const selectIndex = ref(0);
const selectLegend = (item: any, index: any) => { const selectLegend = (item: any, index: any) => {
if (selectIndex.value !== index) { if (selectIndex.value !== index) {
selectIndex.value = index; selectIndex.value = index;
}
if (selectIndex.value === 2) { if (selectIndex.value === 2) {
setTimeout(() => { setTimeout(() => {
newTrendModels.value.toggle(newTrend); newTrendModels.value.toggle(newTrend);
}, 100); }, 100);
} else if (selectIndex.value === 3) {
if (!selectConditioning.value?.title) {
selectConditioning.value = { ...conditioningData.value[0] };
}
setTimeout(() => {
conditioningModels.value.toggle(conditioningData.value, selectConditioning.value);
}, 100);
}
} }
}; };
const handleClose = () => { const handleClose = () => {
@@ -467,4 +566,48 @@
margin-left: -10px; margin-left: -10px;
} }
} }
.newTrend-box {
width: 990px;
height: 146px;
background-color: #282d33;
position: absolute;
top: 20px;
right: 380px;
border-radius: 12px;
padding: 12px;
color: white;
}
.zep-enter-active,
.zep-leave-active {
animation-duration: 0.6s; /* 增加动画持续时间 */
animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
}
.zep-enter-active {
animation-name: bounce-enter;
}
.zep-leave-active {
animation-name: bounce-leave;
}
/* 进入动画 */
@keyframes bounce-enter {
0% {
opacity: 0; /* 初始时完全透明 */
}
100% {
opacity: 1; /* 结束时完全不透明 */
}
}
/* 离开动画 */
@keyframes bounce-leave {
0% {
opacity: 1; /* 初始时完全不透明 */
}
100% {
opacity: 0; /* 结束时完全透明 */
}
}
</style> </style>

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/conditioningModelIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
hx-ai-intelligent/src/view/equipmentControl/image/airConditioningSystem/floorHeatingIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB