729 lines
22 KiB
Vue
729 lines
22 KiB
Vue
<template>
|
||
<div class="box-ventilationSystem">
|
||
<div class="legend-box">
|
||
<template v-for="(item, index) in legend" :key="index">
|
||
<div class="legend-box-item" @click="selectLegend(item, index)">
|
||
<div
|
||
class="legend-box-item-img"
|
||
:style="{
|
||
'background-image': selectIndex === index ? 'url(' + selectImg + ')' : '',
|
||
}">
|
||
<img :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 + ' - 12.6%)',
|
||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||
}">
|
||
<boxModel :dataSource="item" />
|
||
</div>
|
||
<img
|
||
style="width: 50px; height: 75px; position: absolute; z-index: 1"
|
||
:style="{
|
||
left: 'calc(' + item.styleText.left + ' - 2%)',
|
||
bottom: 'calc(' + item.styleText.bottom + ' + 3%)',
|
||
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 + ' + 4%)',
|
||
}">
|
||
<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 + ' + 3%)',
|
||
}"
|
||
src="../image/liftState/lift/line.png" />
|
||
</template>
|
||
<img
|
||
style="width: 38px; height: 38px; position: absolute; cursor: pointer; z-index: 9"
|
||
: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 drawer-item"
|
||
: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" @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
|
||
ref="tabs1Ref"
|
||
@reset="reset"
|
||
@reset-all="resetDrawer"
|
||
:treeData="treeData"
|
||
:type="`排风扇`" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||
<fanPlant ref="tabs2Ref" @reset-all="resetDrawer" :status="stateList" :type="3" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" tab="日志">
|
||
<fanLog ref="tabs3Ref" @reset-all="resetDrawer" :type="3" />
|
||
</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 + ' - 16.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 + ' - 2%)',
|
||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||
transform: 'rotateY(180deg)',
|
||
}"
|
||
src="../image/liftState/lift/line.png" />
|
||
|
||
<img
|
||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||
: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 drawer-item"
|
||
: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" @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
|
||
ref="tabs1Ref"
|
||
@reset="reset"
|
||
@reset-all="resetDrawer"
|
||
:treeData="treeData"
|
||
:type="`风幕机`" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||
<fanPlant ref="tabs2Ref" @reset-all="resetDrawer" :status="stateList" :type="4" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" tab="日志">
|
||
<fanLog ref="tabs3Ref" @reset-all="resetDrawer" :type="4" />
|
||
</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 + ' - 11%)',
|
||
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 + ' - 2%)',
|
||
bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
|
||
transform: 'rotateY(180deg)',
|
||
}"
|
||
src="../image/liftState/lift/line.png" />
|
||
|
||
<img
|
||
style="width: 38px; height: 38px; position: absolute; z-index: 9"
|
||
: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 drawer-item"
|
||
: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" @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
|
||
ref="tabs1Ref"
|
||
@reset="reset"
|
||
@reset-all="resetDrawer"
|
||
:treeData="treeData"
|
||
:type="`电动窗`" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="2" tab="计划列表" force-render>
|
||
<fanPlant ref="tabs2Ref" @reset-all="resetDrawer" :status="stateList" :type="5" />
|
||
</a-tab-pane>
|
||
<a-tab-pane key="3" tab="日志">
|
||
<fanLog ref="tabs3Ref" @reset-all="resetDrawer" :type="5" />
|
||
</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.svg';
|
||
import humidity from '../image/ventilationSystem/humidity.svg';
|
||
import PM25 from '../image/ventilationSystem/PM25.svg';
|
||
import CO2 from '../image/ventilationSystem/CO2.svg';
|
||
import ventilatingFan from '../image/ventilationSystem/ventilatingFan.svg';
|
||
import window from '../image/ventilationSystem/window.svg';
|
||
import airCurtain from '../image/ventilationSystem/fanMachine.svg';
|
||
import selectImg from '../image/airConditioningSystem/selectImg.png';
|
||
import sunRed from '../image/airConditioningSystem/sunRed.png';
|
||
import sunYellow from '../image/airConditioningSystem/sunYellow.png';
|
||
import sunGreen from '../image/airConditioningSystem/sunGreen.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 fanLog from './components/fanLog.vue';
|
||
import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
|
||
// 请求
|
||
import { http } from '/nerv-lib/util/http';
|
||
import { getEnum } from '/@/api';
|
||
import { ventilating } from '/@/api/ventilatingSystem';
|
||
// 全局变量
|
||
import { items } from '/@/store/item';
|
||
// 定位数据
|
||
import {
|
||
devicePosition1,
|
||
devicePosition2,
|
||
devicePosition3,
|
||
devicePosition,
|
||
} from './devicePosition';
|
||
|
||
// 父子组件交互 =======================================================================
|
||
|
||
// 全局变量
|
||
const state = items();
|
||
// 状态枚举
|
||
const stateList = ref([]);
|
||
// 获得状态枚举
|
||
const getStateEnum = async () => {
|
||
let enumData = await getEnum({ params: { enumType: 'PlanExecuteStatus' } });
|
||
stateList.value = enumData.data;
|
||
};
|
||
|
||
// 左侧侧边栏及交互 ====================================================================
|
||
|
||
// 图例
|
||
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);
|
||
// 图例切换事件
|
||
const selectLegend = (item: any, index: any) => {
|
||
const name = item.name;
|
||
if (selectIndex.value === index) {
|
||
return;
|
||
} else if (name == '排风扇') {
|
||
// 获得树形结构
|
||
getTree(1, index);
|
||
// 获得设备图例
|
||
getDevice(1);
|
||
} else if (name == '风幕机') {
|
||
getTree(2, index);
|
||
getDevice(2);
|
||
} else if (name == '电动窗') {
|
||
getTree(3, index);
|
||
getDevice(3);
|
||
// 修改
|
||
} else {
|
||
selectIndex.value = index;
|
||
}
|
||
};
|
||
|
||
// 抽屉相关（排风扇 / 风幕机 / 电动窗） ==================================================
|
||
|
||
// 选择table
|
||
const activeKey = ref('1');
|
||
// 抽屉的展示状态
|
||
const visible = ref(true);
|
||
// 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
|
||
const preload = ref(true);
|
||
// 抽屉 - 开关事件
|
||
const toggleDrawer = () => {
|
||
visible.value = !visible.value;
|
||
};
|
||
// 当前设备的请求URL
|
||
let url = '';
|
||
// 刷新当前的树形结构数据
|
||
const reload = () => {
|
||
http.get(url, { projectId: state.projectId, siteId: state.siteId }).then((res) => {
|
||
const data = res.data[0].childList;
|
||
// 默认选中第一个分区
|
||
data.forEach((item: any, index: number) => {
|
||
if (index === 0) {
|
||
item.selected = true;
|
||
} else {
|
||
item.selected = false;
|
||
}
|
||
});
|
||
treeData.value = data;
|
||
// 楼层信息
|
||
// selectIndex.value = index;
|
||
// 反向刷新
|
||
try {
|
||
tabs1Ref.value.setButtons2(treeData.value[0].childList);
|
||
} catch {}
|
||
});
|
||
};
|
||
|
||
// 抽屉中tab1 - 控制面板 =================================================================
|
||
|
||
const treeData = ref([]);
|
||
// 获取tab1的树形结构
|
||
const getTree = async (type: number, index: number) => {
|
||
// 切换时默认选择tab1
|
||
activeKey.value = '1';
|
||
if (type == 1) {
|
||
url = ventilating.getTree1;
|
||
} else if (type == 2) {
|
||
url = ventilating.getTree2;
|
||
} else {
|
||
url = ventilating.getTree3;
|
||
}
|
||
state.setLoading(true);
|
||
http
|
||
.get(url, { projectId: state.projectId, siteId: state.siteId })
|
||
.then((res) => {
|
||
state.setLoading(false);
|
||
const data = res.data[0].childList;
|
||
// 默认选中第一个分区
|
||
data.forEach((item: any, index: number) => {
|
||
if (index === 0) {
|
||
item.selected = true;
|
||
} else {
|
||
item.selected = false;
|
||
}
|
||
});
|
||
treeData.value = data;
|
||
selectIndex.value = index;
|
||
})
|
||
.catch(() => {
|
||
state.setLoading(false);
|
||
});
|
||
};
|
||
const getDevice = async (type: number) => {
|
||
// 切换时默认选择tab1
|
||
activeKey.value = '1';
|
||
let arr: Array<Object> = [];
|
||
let url = '';
|
||
let deviceType = '';
|
||
if (type == 1) {
|
||
// 设备类型
|
||
deviceType = 'fan';
|
||
// 位置数据
|
||
arr = devicePosition1;
|
||
// 请求地址
|
||
url = ventilating.getDevice1;
|
||
} else if (type == 2) {
|
||
deviceType = 'airCurtain';
|
||
arr = devicePosition2;
|
||
url = ventilating.getDevice2;
|
||
} else if (type == 3) {
|
||
deviceType = 'window';
|
||
arr = devicePosition3;
|
||
url = ventilating.getDevice3;
|
||
}
|
||
http.get(url, { projectId: state.projectId, siteId: state.siteId, floor: 1 }).then((res) => {
|
||
const data = res.data;
|
||
data.forEach((item: any, index: number) => {
|
||
let obj = arr[index];
|
||
item.styleText = obj.textObject;
|
||
item.lineType = obj.lineType;
|
||
item.type = deviceType;
|
||
});
|
||
if (type == 1) {
|
||
fanData.value = data;
|
||
} else if (type == 2) {
|
||
airCurtainData.value = data;
|
||
} else if (type == 3) {
|
||
windowData.value = data;
|
||
}
|
||
});
|
||
};
|
||
// 重置分区树所有当前选项
|
||
const reset = () => {
|
||
treeData.value.forEach((item: any) => {
|
||
item.selected = false;
|
||
item.childList.forEach((i: any) => {
|
||
i.selected = false;
|
||
});
|
||
});
|
||
};
|
||
// 温度数组
|
||
const sensorData = ref<any>([]);
|
||
// 湿度数组
|
||
const humidityData = ref<any>([]);
|
||
// PM2.5数组
|
||
const pmData = ref<any>([]);
|
||
// 二氧化碳 浓度
|
||
const CO2Data = ref<any>([]);
|
||
// 排风扇
|
||
const fanData = ref([]);
|
||
// 风幕机
|
||
const airCurtainData = ref([]);
|
||
// 电动窗
|
||
const windowData = ref([]);
|
||
|
||
// 当其中一个tab产生了数据修改，可以调用该方法重置所有tab
|
||
const resetDrawer = () => {
|
||
// tab1重置
|
||
reload();
|
||
if (selectIndex.value == 4) {
|
||
getDevice(1);
|
||
} else if (selectIndex.value == 5) {
|
||
getDevice(2);
|
||
} else if (selectIndex.value == 6) {
|
||
getDevice(3);
|
||
}
|
||
tabs1Ref.value.refresh();
|
||
// tab2 tab3 可能未加载
|
||
try {
|
||
// tab2重置
|
||
tabs2Ref.value.reset();
|
||
} catch {}
|
||
try {
|
||
// tab3重置
|
||
tabs3Ref.value.reset();
|
||
} catch {}
|
||
};
|
||
// 抽屉tab1组件的引用
|
||
const tabs1Ref = ref();
|
||
// 抽屉tab2组件的引用
|
||
const tabs2Ref = ref();
|
||
// 抽屉tab3组件的引用
|
||
const tabs3Ref = ref();
|
||
//根据温度获取图片
|
||
const getSunUrl = (number: any) => {
|
||
if (number > 0 && number < 20) {
|
||
return sunGreen;
|
||
} else if (number >= 20 && number < 30) {
|
||
return sunYellow;
|
||
} else {
|
||
return sunRed;
|
||
}
|
||
};
|
||
//获取温度颜色
|
||
const getColor = (number: any) => {
|
||
if (number > 0 && number < 20) {
|
||
return '#0dffa4';
|
||
} else if (number >= 20 && number < 30) {
|
||
return '#f59a23';
|
||
} else {
|
||
return '#f36163';
|
||
}
|
||
};
|
||
// 获取传感器数据
|
||
const getSensorData = () => {
|
||
sensorData.value = [];
|
||
humidityData.value = [];
|
||
pmData.value = [];
|
||
CO2Data.value = [];
|
||
http
|
||
.get(ventilating.getSensorData, { projectId: state.projectId, siteId: state.siteId })
|
||
.then((res) => {
|
||
if (res.msg === 'success') {
|
||
res.data.forEach((item: any, index: number) => {
|
||
sensorData.value.push({
|
||
title: item.deviceInfoName,
|
||
styleText: devicePosition[index].styleText,
|
||
type: '温度',
|
||
unit: item.record.tempUnit,
|
||
number: item.record.temp,
|
||
url: getSunUrl(item.record.temp),
|
||
fontColor: getColor(item.record.temp),
|
||
});
|
||
humidityData.value.push({
|
||
title: item.deviceInfoName,
|
||
styleText: devicePosition[index].styleText,
|
||
type: '湿度',
|
||
unit: item.record.humidityUnit,
|
||
number: item.record.humidity,
|
||
url: humidity,
|
||
});
|
||
pmData.value.push({
|
||
title: item.deviceInfoName,
|
||
styleText: devicePosition[index].styleText,
|
||
type: 'pm2.5',
|
||
unit: item.record.pm2_5Unit,
|
||
number: item.record.pm2_5,
|
||
url: PM25,
|
||
});
|
||
CO2Data.value.push({
|
||
title: item.deviceInfoName,
|
||
styleText: devicePosition[index].styleText,
|
||
type: '二氧化碳',
|
||
unit: item.record.co_CO2Unit,
|
||
number: item.record.co_CO2,
|
||
url: CO2,
|
||
});
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//实时获取数据 暂定一分钟
|
||
const intervalId = setInterval(getSensorData, 60000);
|
||
onMounted(() => {
|
||
//获取传感器数据
|
||
getSensorData();
|
||
// 获得枚举
|
||
getStateEnum();
|
||
});
|
||
onUnmounted(() => {
|
||
clearInterval(intervalId);
|
||
});
|
||
</script>
|
||
<style lang="less">
|
||
@import url('../style/color.less');
|
||
.legend-box {
|
||
width: 80px;
|
||
height: 100%;
|
||
background-color: rgba(33, 40, 54, 0.95);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 15px 5px;
|
||
.legend-box-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 70px;
|
||
height: 70px;
|
||
.legend-box-item-img {
|
||
width: 50px;
|
||
height: 60px;
|
||
padding-top: 5px;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
img {
|
||
transition: all ease 0.2s;
|
||
}
|
||
img:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
.legend-box-item-name {
|
||
transform: translateY(-5px);
|
||
text-align: center;
|
||
color: white;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
}
|
||
.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: 495px;
|
||
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>
|