75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<!--
|
||
filename: index.vue
|
||
author: liubin
|
||
date: 2023-10-11 09:32:04
|
||
description: 设备看板
|
||
-->
|
||
|
||
<template>
|
||
<div ref="dataBoard" class=""></div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'DataBoard',
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
appMain: null, // dom
|
||
parentStyle: {
|
||
margin: '8px 14px 0px 16px',
|
||
minHeight: 'calc(100vh - 120px - 8px)',
|
||
}, // object
|
||
mainFooter: null, // dom
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
this.modify();
|
||
});
|
||
},
|
||
activated() {
|
||
this.modify();
|
||
},
|
||
deactivated() {
|
||
this.recover();
|
||
},
|
||
beforeDestroy() {
|
||
this.recover();
|
||
},
|
||
methods: {
|
||
modify() {
|
||
// 在这个页面临时修改下父类的margin，结束时需还原
|
||
this.appMain = document.querySelector('.app-main');
|
||
// this.appMain.style.minHeight = 'calc(100vh - 90px)';
|
||
this.appMain.style.margin = 0;
|
||
// 在这个页面临时删除 main-footer 元素，结束时需还原
|
||
// this.mainFooter = document.querySelector('.main-footer').cloneNode(true);
|
||
// document.querySelector('.main-footer').remove();
|
||
this.$refs.dataBoard.classList.add('data-board');
|
||
},
|
||
recover() {
|
||
this.$refs.dataBoard.classList.remove('data-board');
|
||
this.$nextTick(() => {
|
||
this.appMain.style.margin = this.parentStyle.margin;
|
||
// this.appMain.style.minHeight = this.parentStyle.minHeight;
|
||
// this.appMain.insertAdjacentElement('afterend', this.mainFooter);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.data-board {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('../../../assets/images/DataBoard.png') 100% 100% / contain
|
||
no-repeat;
|
||
}
|
||
</style>
|