fix:修改新风系统范围
This commit is contained in:
@@ -18,24 +18,58 @@ export const newTrendPosition = [
|
||||
];
|
||||
//空调箱
|
||||
export const airConditioningPosition = [
|
||||
{ styleText: { left: '16%', bottom: '33%' }, lineType: 1 },
|
||||
{ styleText: { left: '31%', bottom: '38%' }, lineType: 1 },
|
||||
{ styleText: { left: '41%', bottom: '55.5%' }, lineType: 1 },
|
||||
{
|
||||
styleText: { left: '13%', bottom: '30%', width: '120px', color: 'rgba(165, 209, 123, 0.5)' },
|
||||
lineType: 1,
|
||||
},
|
||||
{
|
||||
styleText: {
|
||||
left: '31%',
|
||||
bottom: '38%',
|
||||
mLeft: '120px',
|
||||
width: '100px',
|
||||
color: 'rgba(217, 223, 179, 0.5)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
{
|
||||
styleText: {
|
||||
left: '41%',
|
||||
bottom: '55.5%',
|
||||
width: '300px',
|
||||
height: '150px',
|
||||
color: 'rgba(168, 226, 233, 0.5)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
{ styleText: { left: '60%', bottom: '63%' }, lineType: 1 },
|
||||
{ styleText: { left: '76%', bottom: '63%' }, lineType: 1 },
|
||||
{ styleText: { left: '71%', bottom: '48%' }, lineType: '' },
|
||||
{ styleText: { left: '46.5%', bottom: '32%' }, lineType: '' },
|
||||
{
|
||||
styleText: {
|
||||
left: '71%',
|
||||
bottom: '48%',
|
||||
},
|
||||
lineType: '',
|
||||
},
|
||||
{
|
||||
styleText: {
|
||||
left: '46.5%',
|
||||
bottom: '32%',
|
||||
width: '300px',
|
||||
height: '150px',
|
||||
mTop: '150px',
|
||||
color: 'rgba(168, 226, 233, 0.5)',
|
||||
},
|
||||
lineType: '',
|
||||
},
|
||||
];
|
||||
//地暖
|
||||
export const floorHeatingPosition = [
|
||||
{
|
||||
styleText: {
|
||||
left: '13%',
|
||||
left: '13.4%',
|
||||
bottom: '44%',
|
||||
width: '150px',
|
||||
height: '255px',
|
||||
lineLeft: '220px',
|
||||
lineBottom: '110px',
|
||||
width: '120px',
|
||||
color: 'rgba(242, 209, 156, 0.5)',
|
||||
},
|
||||
lineType: '',
|
||||
@@ -44,12 +78,8 @@ export const floorHeatingPosition = [
|
||||
styleText: {
|
||||
left: '21%',
|
||||
bottom: '48%',
|
||||
width: '130px',
|
||||
height: '325px',
|
||||
lineLeft: '370px',
|
||||
lineBottom: '110px',
|
||||
width: '115px',
|
||||
color: 'rgba(224, 244, 102,0.5)',
|
||||
transform: 'rotateX(43deg) rotateZ(-19deg) skew(12deg) rotateY(-1deg)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
@@ -57,12 +87,8 @@ export const floorHeatingPosition = [
|
||||
styleText: {
|
||||
left: '34.5%',
|
||||
bottom: '53.5%',
|
||||
width: '350px',
|
||||
height: '300px',
|
||||
lineLeft: '492px',
|
||||
lineBottom: '190px',
|
||||
width: '355px',
|
||||
color: 'rgba(167, 128, 244, 0.5)',
|
||||
transform: 'rotateX(42deg) rotateZ(-20deg) skew(17deg) rotateY(0deg)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
@@ -70,12 +96,8 @@ export const floorHeatingPosition = [
|
||||
styleText: {
|
||||
left: '47.5%',
|
||||
bottom: '60.3%',
|
||||
width: '100px',
|
||||
height: '306px',
|
||||
lineLeft: '840px',
|
||||
lineBottom: '238px',
|
||||
width: '90px',
|
||||
color: 'rgba(155, 216, 224, 0.5)',
|
||||
transform: 'rotateX(51deg) rotateZ(-21deg) skew(17deg) rotateY(-2deg)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
@@ -83,12 +105,8 @@ export const floorHeatingPosition = [
|
||||
styleText: {
|
||||
left: '60.5%',
|
||||
bottom: '65.5%',
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
lineLeft: '930px',
|
||||
lineBottom: '290px',
|
||||
width: '350px',
|
||||
color: 'rgba(222, 111, 141, 0.5)',
|
||||
transform: 'rotateX(49deg) rotateZ(-24deg) skew(18deg) rotateY(3deg)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
@@ -96,12 +114,8 @@ export const floorHeatingPosition = [
|
||||
styleText: {
|
||||
left: '73%',
|
||||
bottom: '72%',
|
||||
width: '150px',
|
||||
height: '320px',
|
||||
lineLeft: '1218px',
|
||||
lineBottom: '335px',
|
||||
width: '140px',
|
||||
color: 'rgba(152, 190, 162, 0.5)',
|
||||
transform: 'rotateX(50deg) rotateZ(-28deg) skew(17deg) rotateY(3deg)',
|
||||
},
|
||||
lineType: 1,
|
||||
},
|
||||
|
@@ -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,19 +163,16 @@
|
||||
style="width: 42px; height: 42px; position: absolute; z-index: 1"
|
||||
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
||||
src="../image/airConditioningSystem/floorHeatingIcon.png" />
|
||||
<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,
|
||||
}">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="selectIndex === 4" class="area">
|
||||
<div
|
||||
v-for="(item, index) in floorHeatingData"
|
||||
:key="index"
|
||||
style="display: flex"
|
||||
:style="{ width: item.styleText.width, background: item.styleText.color }">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地暖详情 -->
|
||||
<a-drawer
|
||||
:visible="selectIndex === 4"
|
||||
@@ -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>
|
||||
|
@@ -100,7 +100,6 @@
|
||||
//点击获取详情
|
||||
const clickLift = (item: any) => {
|
||||
visible.value = true;
|
||||
console.log(item, '获取详细日志');
|
||||
selctLeft.value = item;
|
||||
setTimeout(() => {
|
||||
leftPage.value.toggle(selctLeft.value);
|
||||
|
Reference in New Issue
Block a user