|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div style="width: 100%; height: 100%; display: flex; overflow: hidden"> |
|
|
|
<div style="width: 100%; height: 100%; display: flex; overflow: hidden; position: relative"> |
|
|
|
<div class="legend-box"> |
|
|
|
<template v-for="(item, index) in legend" :key="index"> |
|
|
|
<div class="legend-box-item" @click="selectLegend(item, index)"> |
|
|
|
@ -18,7 +18,7 @@ |
|
|
|
</div> |
|
|
|
<div class="map-box"> |
|
|
|
<!-- 温度 --> |
|
|
|
<div v-if="selectIndex === 0"> |
|
|
|
<div v-if="selectIndex === 1"> |
|
|
|
<template v-for="(item, index) in sensorData" :key="index"> |
|
|
|
<div |
|
|
|
style="position: absolute" |
|
|
|
@ -76,7 +76,7 @@ |
|
|
|
<newTrendModel :dataSource="newTrend" /> |
|
|
|
</a-drawer> |
|
|
|
<!-- 空调箱 --> |
|
|
|
<div v-if="selectIndex === 3"> |
|
|
|
<div v-if="selectIndex === 0"> |
|
|
|
<template v-for="(item, index) in conditioningData" :key="index"> |
|
|
|
<div |
|
|
|
style="position: absolute; z-index: 2" |
|
|
|
@ -116,6 +116,20 @@ |
|
|
|
ref="conditioningModels" |
|
|
|
@selectConditioningData="selectConditioningData" /> |
|
|
|
</a-drawer> |
|
|
|
<div v-if="selectIndex === 0" class="area"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in airConditioningPosition" |
|
|
|
:key="index" |
|
|
|
style="display: flex" |
|
|
|
:style="{ |
|
|
|
width: item.styleText.width, |
|
|
|
height: item.styleText.height, |
|
|
|
background: item.styleText.color, |
|
|
|
marginLeft: item.styleText.mLeft, |
|
|
|
marginTop: item.styleText.mTop, |
|
|
|
}"> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 空调箱 顶部详情 现阶段没有数据 先隐藏掉 --> |
|
|
|
<transition name="zep"> |
|
|
|
<div |
|
|
|
@ -149,18 +163,15 @@ |
|
|
|
style="width: 42px; height: 42px; position: absolute; z-index: 1" |
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }" |
|
|
|
src="../image/airConditioningSystem/floorHeatingIcon.png" /> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<div v-if="selectIndex === 4" class="area"> |
|
|
|
<div |
|
|
|
class="shape" |
|
|
|
:style="{ |
|
|
|
width: item.styleText.width, |
|
|
|
height: item.styleText.height, |
|
|
|
background: item.styleText.color, |
|
|
|
left: item.styleText.lineLeft, |
|
|
|
bottom: item.styleText.lineBottom, |
|
|
|
transform: item.styleText.transform, |
|
|
|
}"> |
|
|
|
v-for="(item, index) in floorHeatingData" |
|
|
|
:key="index" |
|
|
|
style="display: flex" |
|
|
|
:style="{ width: item.styleText.width, background: item.styleText.color }"> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
<!-- 地暖详情 --> |
|
|
|
<a-drawer |
|
|
|
@ -556,7 +567,7 @@ |
|
|
|
clearInterval(intervalId); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
<style lang="less" scoped> |
|
|
|
.legend-box { |
|
|
|
width: 80px; |
|
|
|
height: 100%; |
|
|
|
@ -593,47 +604,32 @@ |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|
} |
|
|
|
// .legend-box-item { |
|
|
|
// border: 1px solid red; |
|
|
|
// width: 100%; |
|
|
|
// height: 60px; |
|
|
|
// padding: 0px 0; |
|
|
|
// cursor: pointer; |
|
|
|
// .legend-box-item-img { |
|
|
|
// border: 2px solid orange; |
|
|
|
// width: 100%; |
|
|
|
// height: 50px; |
|
|
|
// display: flex; |
|
|
|
// justify-content: center; /* 水平居中 */ |
|
|
|
// align-items: center; /* 垂直居中 */ |
|
|
|
// position: relative; |
|
|
|
// background-size: 150% 150%; |
|
|
|
// background-repeat: no-repeat; |
|
|
|
// img { |
|
|
|
// position: absolute; |
|
|
|
// transform: scale(1.2); |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .legend-box-item-name { |
|
|
|
// width: 100%; |
|
|
|
// display: flex; |
|
|
|
// justify-content: center; /* 水平居中 */ |
|
|
|
// align-items: center; /* 垂直居中 */ |
|
|
|
// color: white; |
|
|
|
// font-size: 12px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
.map-box { |
|
|
|
position: relative; |
|
|
|
width: 95%; |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
background-image: url(../image/floor-1.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 0px 4px 4px 0px; |
|
|
|
border-radius: 0 4px 4px 0; |
|
|
|
user-select: none; |
|
|
|
perspective: 1900px; |
|
|
|
/* 修正 perspective-origin，不能使用像素和负值结合的方式，需要使用百分比或正确的单位 */ |
|
|
|
perspective-origin: 900px 43px; |
|
|
|
} |
|
|
|
|
|
|
|
.map-box .area { |
|
|
|
position: absolute; |
|
|
|
bottom: 230px; |
|
|
|
left: 250px; |
|
|
|
width: 1300px; |
|
|
|
height: 320px; |
|
|
|
transform: rotateX(62deg) rotateZ(339deg) skew(16deg); |
|
|
|
display: flex; |
|
|
|
gap: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.newTrendModel { |
|
|
|
overflow-y: auto; |
|
|
|
.anticon { |
|
|
|
@ -685,11 +681,4 @@ |
|
|
|
opacity: 0; /* 结束时完全透明 */ |
|
|
|
} |
|
|
|
} |
|
|
|
.shape { |
|
|
|
background-color: #36d792; |
|
|
|
transform: rotateX(23deg) rotateZ(-13deg) skew(17deg) rotateY(-7deg); |
|
|
|
position: absolute; |
|
|
|
perspective: 900px; |
|
|
|
perspective-origin: 900px -120px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
duyufeng
3 months ago