src/views/base/dataBoard/index.vue

@@ -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>