fix:新风系统 空调箱
This commit is contained in:
zhaohy
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Reference in New Issue
Block a user