|
|
|
|
<template>
|
|
|
|
|
<div class="box-ventilationSystem">
|
|
|
|
|
<div class="legend-box">
|
|
|
|
|
<template v-for="(item, index) in legend" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
class="legend-box-item"
|
|
|
|
|
:style="{
|
|
|
|
|
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
|
|
|
|
|
}"
|
|
|
|
|
@click="selectLegend(item, index)">
|
|
|
|
|
<div class="legend-box-item-img">
|
|
|
|
|
<img style="width: 42px" :src="item.url" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="legend-box-item-name">
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 温度 -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 0">
|
|
|
|
|
<template v-for="(item, index) in sensorData" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
|
|
|
|
|
<singleModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- 湿度 -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 1">
|
|
|
|
|
<template v-for="(item, index) in humidityData" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
|
|
|
|
|
<singleModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- PM2.5 -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 2">
|
|
|
|
|
<template v-for="(item, index) in pmData" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
|
|
|
|
|
<singleModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- CO2e -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 3">
|
|
|
|
|
<template v-for="(item, index) in CO2Data" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }">
|
|
|
|
|
<singleModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- 右侧抽屉的触发按钮 -->
|
|
|
|
|
<div
|
|
|
|
|
class="drawer-box-in"
|
|
|
|
|
v-if="!visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
|
|
|
|
@click="toggleDrawer">
|
|
|
|
|
<double-left-outlined class="drawer-icon" style="color: white" />
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 排风扇 -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 4">
|
|
|
|
|
<template v-for="(item, index) in fanData" :key="index">
|
|
|
|
|
<!-- 朝左边 -->
|
|
|
|
|
<template v-if="item.lineType === '1'">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
|
|
|
|
}">
|
|
|
|
|
<boxModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
<img
|
|
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
|
|
|
|
transform: 'rotateY(180deg)',
|
|
|
|
|
}"
|
|
|
|
|
src="../image/liftState/lift/line.png" />
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 朝右边 -->
|
|
|
|
|
<template v-if="item.lineType === '2'">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' + 4.3%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
|
|
|
|
}">
|
|
|
|
|
<boxModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
<img
|
|
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' + 1.5%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
|
|
|
|
transform: 'rotate(90deg,180deg)',
|
|
|
|
|
}"
|
|
|
|
|
src="../image/liftState/lift/line.png" />
|
|
|
|
|
</template>
|
|
|
|
|
<img
|
|
|
|
|
style="width: 42px; height: 42px; position: absolute"
|
|
|
|
|
:style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
|
|
|
|
|
src="../image/ventilationSystem/fan.png" />
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- 弹窗操控 -->
|
|
|
|
|
<a-drawer
|
|
|
|
|
v-if="selectIndex === 4 && visible"
|
|
|
|
|
:visible="selectIndex === 4"
|
|
|
|
|
class="drawer-fan"
|
|
|
|
|
:width="496"
|
|
|
|
|
:forceRender="preload"
|
|
|
|
|
placement="right"
|
|
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
|
|
|
|
|
:closable="false"
|
|
|
|
|
id="drawer"
|
|
|
|
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }">
|
|
|
|
|
<!-- 左侧抽屉的关闭按钮 -->
|
|
|
|
|
<div
|
|
|
|
|
class="drawer-box-out"
|
|
|
|
|
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
|
|
|
|
@click="toggleDrawer">
|
|
|
|
|
<double-right-outlined class="drawer-icon" style="color: white" />
|
|
|
|
|
</div>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
|
|
|
<a-tab-pane key="1" tab="控制面板"> <fanControl /> </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="计划列表" force-render>
|
|
|
|
|
<fanPlant />
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
<!-- 风幕机 -->
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 5">
|
|
|
|
|
<template v-for="(item, index) in airCurtainData" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 15.1%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
|
|
|
|
}">
|
|
|
|
|
<boxModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
<img
|
|
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
|
|
|
|
transform: 'rotateY(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/ventilationSystem/airCurtain.png" />
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- 弹窗操控 -->
|
|
|
|
|
<a-drawer
|
|
|
|
|
v-if="selectIndex === 5 && visible"
|
|
|
|
|
:visible="selectIndex === 5"
|
|
|
|
|
class="drawer-fan"
|
|
|
|
|
:width="496"
|
|
|
|
|
:forceRender="preload"
|
|
|
|
|
placement="right"
|
|
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
|
|
|
|
|
:closable="false"
|
|
|
|
|
id="drawer"
|
|
|
|
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
|
|
|
|
:mask="false">
|
|
|
|
|
<!-- 左侧抽屉的关闭按钮 -->
|
|
|
|
|
<div
|
|
|
|
|
class="drawer-box-out"
|
|
|
|
|
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
|
|
|
|
@click="toggleDrawer">
|
|
|
|
|
<double-right-outlined class="drawer-icon" style="color: white" />
|
|
|
|
|
</div>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
|
|
|
<a-tab-pane key="1" tab="控制面板"> 风幕机 </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
<transition name="zep">
|
|
|
|
|
<div v-if="selectIndex === 6">
|
|
|
|
|
<template v-for="(item, index) in windowData" :key="index">
|
|
|
|
|
<div
|
|
|
|
|
style="position: absolute"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 10.6%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
|
|
|
|
|
}">
|
|
|
|
|
<boxModel :dataSource="item" />
|
|
|
|
|
</div>
|
|
|
|
|
<img
|
|
|
|
|
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
|
|
|
|
:style="{
|
|
|
|
|
left: 'calc(' + item.styleText.left + ' - 1.5%)',
|
|
|
|
|
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
|
|
|
|
transform: 'rotateY(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/ventilationSystem/windowIcon.png" />
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</transition>
|
|
|
|
|
<!-- 弹窗操控 -->
|
|
|
|
|
<a-drawer
|
|
|
|
|
v-if="selectIndex === 6 && visible"
|
|
|
|
|
:visible="selectIndex === 6"
|
|
|
|
|
class="drawer-fan"
|
|
|
|
|
:width="496"
|
|
|
|
|
:forceRender="preload"
|
|
|
|
|
placement="right"
|
|
|
|
|
:body-style="{ background: 'rgba(0, 0, 0)', opacity: 0.8, color: 'white' }"
|
|
|
|
|
:closable="false"
|
|
|
|
|
id="drawer"
|
|
|
|
|
:maskStyle="{ 'background-color': 'rgba(0, 0, 0, 0)' }"
|
|
|
|
|
:mask="false">
|
|
|
|
|
<!-- 左侧抽屉的关闭按钮 -->
|
|
|
|
|
<div
|
|
|
|
|
class="drawer-box-out"
|
|
|
|
|
v-if="visible && (selectIndex === 4 || selectIndex === 5 || selectIndex === 6)"
|
|
|
|
|
@click="toggleDrawer">
|
|
|
|
|
<double-right-outlined class="drawer-icon" style="color: white" />
|
|
|
|
|
</div>
|
|
|
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
|
|
|
<a-tab-pane key="1" tab="控制面板"> 电动窗 </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="2" tab="计划列表" force-render> 计划列表 </a-tab-pane>
|
|
|
|
|
<a-tab-pane key="3" tab="日志"> 日志 </a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</a-drawer>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
|
|
|
//图片
|
|
|
|
|
import temperature from '../image/airConditioningSystem/temperature.png';
|
|
|
|
|
import humidity from '../image/ventilationSystem/humidity.png';
|
|
|
|
|
import PM25 from '../image/ventilationSystem/PM25.png';
|
|
|
|
|
import CO2 from '../image/ventilationSystem/CO2.png';
|
|
|
|
|
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.png';
|
|
|
|
|
import window from '../image/ventilationSystem/window.png';
|
|
|
|
|
import airCurtain from '../image/ventilationSystem/fanMachine.png';
|
|
|
|
|
import selectImg from '../image/airConditioningSystem/selectImg.png';
|
|
|
|
|
import sunRed from '../image/airConditioningSystem/sunRed.png';
|
|
|
|
|
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
|
|
|
|
|
import sunBlue from '../image/airConditioningSystem/sunBlue.png';
|
|
|
|
|
|
|
|
|
|
import boxModel from './components/boxModel.vue';
|
|
|
|
|
import singleModel from '../components/singleModel.vue';
|
|
|
|
|
import fanControl from './components/fanControl.vue';
|
|
|
|
|
import fanPlant from './components/fanPlant.vue';
|
|
|
|
|
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
|
|
|
|
|
|
|
|
|
//图例
|
|
|
|
|
const legend = ref([
|
|
|
|
|
{ url: temperature, name: '温度' },
|
|
|
|
|
{ url: humidity, name: '湿度' },
|
|
|
|
|
{ url: PM25, name: 'PM2.5' },
|
|
|
|
|
{ url: CO2, name: 'CO2浓度' },
|
|
|
|
|
{ url: ventilatingFan, name: '排风扇' },
|
|
|
|
|
{ url: airCurtain, name: '风幕机' },
|
|
|
|
|
{ url: window, name: '电动窗' },
|
|
|
|
|
]);
|
|
|
|
|
// 选择的图例
|
|
|
|
|
const selectIndex = ref(0);
|
|
|
|
|
//选择table
|
|
|
|
|
const activeKey = ref('1');
|
|
|
|
|
// 展示
|
|
|
|
|
const visible = ref(true);
|
|
|
|
|
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
|
|
|
|
const preload = ref(true);
|
|
|
|
|
// 抽屉 - 开关事件
|
|
|
|
|
const toggleDrawer = () => {
|
|
|
|
|
console.log('xxxx');
|
|
|
|
|
visible.value = !visible.value;
|
|
|
|
|
};
|
|
|
|
|
//选择方法
|
|
|
|
|
const selectLegend = (item: any, index: any) => {
|
|
|
|
|
if (selectIndex.value !== index) {
|
|
|
|
|
selectIndex.value = index;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
//温度数组
|
|
|
|
|
const sensorData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器A',
|
|
|
|
|
styleText: { left: '48%', bottom: '64%' },
|
|
|
|
|
type: '温度',
|
|
|
|
|
unit: '℃',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: sunRed,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器B',
|
|
|
|
|
styleText: { left: '48.2%', bottom: '43%' },
|
|
|
|
|
type: '温度',
|
|
|
|
|
unit: '℃',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: sunYellow,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
//湿度数组
|
|
|
|
|
const humidityData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器A',
|
|
|
|
|
styleText: { left: '48%', bottom: '64%' },
|
|
|
|
|
type: '湿度',
|
|
|
|
|
unit: '%',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: humidity,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器B',
|
|
|
|
|
styleText: { left: '48.2%', bottom: '43%' },
|
|
|
|
|
type: '湿度',
|
|
|
|
|
unit: '%',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: humidity,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
//PM2.5数组
|
|
|
|
|
const pmData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器A',
|
|
|
|
|
styleText: { left: '48%', bottom: '64%' },
|
|
|
|
|
type: 'pm2.5',
|
|
|
|
|
unit: '',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: PM25,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器B',
|
|
|
|
|
styleText: { left: '48.2%', bottom: '43%' },
|
|
|
|
|
type: 'pm2.5',
|
|
|
|
|
unit: '',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: PM25,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
//二氧化碳 浓度
|
|
|
|
|
const CO2Data = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器A',
|
|
|
|
|
styleText: { left: '48%', bottom: '64%' },
|
|
|
|
|
type: '二氧化碳',
|
|
|
|
|
unit: 'CO2e',
|
|
|
|
|
number: 20,
|
|
|
|
|
url: CO2,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '多功能传感器B',
|
|
|
|
|
styleText: { left: '48.2%', bottom: '43%' },
|
|
|
|
|
type: '二氧化碳',
|
|
|
|
|
unit: 'CO2e',
|
|
|
|
|
number: 99,
|
|
|
|
|
url: CO2,
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
//排风扇
|
|
|
|
|
const fanData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '排风扇',
|
|
|
|
|
styleText: { left: '43.2%', bottom: '77.8%' },
|
|
|
|
|
type: 'fan',
|
|
|
|
|
lineType: '1',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '排风扇',
|
|
|
|
|
styleText: { left: '50%', bottom: '77.8%' },
|
|
|
|
|
type: 'fan',
|
|
|
|
|
lineType: '2',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '排风扇',
|
|
|
|
|
styleText: { left: '41.2%', bottom: '27.8%' },
|
|
|
|
|
type: 'fan',
|
|
|
|
|
lineType: '1',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '排风扇',
|
|
|
|
|
styleText: { left: '51.2%', bottom: '27.8%' },
|
|
|
|
|
type: 'fan',
|
|
|
|
|
lineType: '2',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
// 风幕机
|
|
|
|
|
const airCurtainData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '风幕机',
|
|
|
|
|
styleText: { left: '38%', bottom: '57.8%' },
|
|
|
|
|
type: 'airCurtain',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '风幕机',
|
|
|
|
|
styleText: { left: '58.5%', bottom: '57.3%' },
|
|
|
|
|
type: 'airCurtain',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '风幕机',
|
|
|
|
|
styleText: { left: '64.2%', bottom: '22.8%' },
|
|
|
|
|
type: 'airCurtain',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
// 电动窗
|
|
|
|
|
const windowData = ref([
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗1',
|
|
|
|
|
styleText: { left: '32%', bottom: '28%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗2',
|
|
|
|
|
styleText: { left: '33.5%', bottom: '42.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗3',
|
|
|
|
|
styleText: { left: '35%', bottom: '57.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗4',
|
|
|
|
|
styleText: { left: '36.5%', bottom: '72.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗5',
|
|
|
|
|
styleText: { left: '66%', bottom: '28%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗6',
|
|
|
|
|
styleText: { left: '64%', bottom: '42.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗7',
|
|
|
|
|
styleText: { left: '62%', bottom: '57.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '电动窗8',
|
|
|
|
|
styleText: { left: '60%', bottom: '72.8%' },
|
|
|
|
|
type: 'window',
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
onMounted(() => {});
|
|
|
|
|
onUnmounted(() => {});
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less">
|
|
|
|
|
.legend-box {
|
|
|
|
|
width: 5%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background-color: rgba(33, 40, 54, 0.9);
|
|
|
|
|
border-radius: 4px 0px 0px 4px;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
.legend-box-item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 90px;
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background-size: 75%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
background-position: center; /* 把图片背景居中 */
|
|
|
|
|
.legend-box-item-img {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
}
|
|
|
|
|
.legend-box-item-name {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.box-ventilationSystem {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background-image: url('../image/ventilationSystem/ventilationSystemBg.png');
|
|
|
|
|
background-size: 100% 99.9%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.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; /* 结束时完全透明 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.drawer-fan {
|
|
|
|
|
width: 496px;
|
|
|
|
|
// 抽屉关闭按钮
|
|
|
|
|
.drawer-box-out {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 466px;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.ant-tabs-tab-btn {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.ant-tabs-tabpane {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.drawer-box-in {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
position: fixed;
|
|
|
|
|
right: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
margin: auto;
|
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
