|
|
@@ -0,0 +1,74 @@ |
|
|
|
<!-- |
|
|
|
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> |