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

191
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;"
bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
@close="handleClose">
<conditioningModel :dataSource="newTrend" />
<conditioningModel
ref="conditioningModels"
@selectConditioningData="selectConditioningData" />
</a-drawer>
<!-- 空调箱 顶部详情 -->
<div
v-if="selectIndex === 3"
style="
width: 974px;
height: 146px;
background-color: #282d33;
display: flex;
position: absolute;
top: 20px;
right: 380px;
border-radius: 12px;
padding: 12px;
color: white;
">
{{ selectConditioning.title }}
<transition name="zep">
<div
v-if="selectIndex === 3 && selectConditioning && selectConditioning?.title"
class="newTrend-box">
<newTreedBox :selectConditioning="selectConditioning" />
</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>
</template>
@@ -152,9 +184,10 @@
import doubleSingleModel from '../components/doubleSingleModel.vue';
import newTrendModel from './components/newTrendModel.vue';
import conditioningModel from './components/conditioningModel.vue';
onMounted(() => {
selectConditioning.value = conditioningData.value[0];
});
import newTreedBox from './components/newTreedBox.vue';
import floorHeatingModel from './components/floorHeatingModel.vue';
onMounted(() => {});
onUnmounted(() => {});
//图例
const legend = ref([
@@ -399,18 +432,84 @@
url: freshAir,
},
]);
const conditioningModels = ref(null);
//选择的空调箱
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 selectLegend = (item: any, index: any) => {
if (selectIndex.value !== index) {
selectIndex.value = index;
}
if (selectIndex.value === 2) {
setTimeout(() => {
newTrendModels.value.toggle(newTrend);
}, 100);
if (selectIndex.value === 2) {
setTimeout(() => {
newTrendModels.value.toggle(newTrend);
}, 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 = () => {
@@ -467,4 +566,48 @@
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>