移除部分监听

src/views/databoard/deepProcessing/index.vue

@@ -1,8 +1,11 @@
 <template>
-	<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
+	<div
+		id="deepProcessingContainerB"
+		ref="deepProcessingContainerB"
+		style="width: 100%; height: 100%">
 		<div
-			id='deepProcessingContainer'
-			ref='deepProcessingContainer'
+			id="deepProcessingContainer"
+			ref="deepProcessingContainer"
 			class="deepProcessingBoard"
 			style="
 				position: absolute;
@@ -16,15 +19,14 @@
 				flex-direction: column;
 				gap: 24px;
 			"
-			:style="{transform:'scale('+scaleNum+')'}">
-			<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/>
+			:style="{ transform: 'scale(' + scaleNum + ')' }">
+			<KHeader
+				:isFullScreen="isFullScreen"
+				@screenfullChange="screenfullChange"
+				topTitle="深加工生产运行驾驶舱" />
 			<div
 				class="main-body"
-				style="
-					display: grid;
-					gap: 16px;
-					grid-template-rows: 462px 462px;
-				">
+				style="display: grid; gap: 16px; grid-template-rows: 462px 462px">
 				<TopThree />
 				<BottomTwo />
 			</div>
@@ -47,16 +49,16 @@
 import KHeader from '../components/Header';
 import TopThree from './TopThree';
 import BottomTwo from './BottomTwo';
-import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce'
-import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
+import { getDcsMsg, getMesMsg } from './../utils/wsInterface';
 
 export default {
 	name: 'deepProcessingBoard',
 	components: {
 		KHeader,
 		TopThree,
-		BottomTwo
+		BottomTwo,
 	},
 	// provide() {
 	// 	return {
@@ -66,83 +68,90 @@ export default {
 	data() {
 		return {
 			isFullScreen: false,
-			scaleNum: 0.8
+			scaleNum: 0.8,
 		};
 	},
 	created() {
-		this.init()
+		this.init();
 	},
 	destroy() {
-		this.destroy()
+		this.destroy();
 	},
 	mounted() {
 		this.boxReset = debounce(() => {
-      this.resetSize()
-    }, 300)
-    this.boxReset()
-    window.addEventListener('resize', () => {
-      this.boxReset()
-    })
+			this.resetSize();
+		}, 300);
+		this.boxReset();
+		window.addEventListener('resize', () => {
+			this.boxReset();
+		});
 		// closeWebsocket()
 		// getDcsMsg()
 		// getMesMsg()
-		console.log('mounted...........')
+	},
+	mounted() {
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
 	},
 	destroyed() {
-		console.log('destroyed...........')
+		window.removeEventListener('resize', this.boxReset);
+		this.destroy();
 	},
 	methods: {
+		boxReset() {
+			debounce(() => {
+				this.resetSize();
+			}, 300)();
+		},
 		change() {
-      this.isFullScreen = screenfull.isFullscreen
-    },
-    init() {
-      if (screenfull.isEnabled) {
-        screenfull.on('change', this.change)
-      }
-    },
-    destroy() {
-      if (screenfull.isEnabled) {
-        screenfull.off('change', this.change)
-      }
-    },
+			this.isFullScreen = screenfull.isFullscreen;
+		},
+		init() {
+			if (screenfull.isEnabled) {
+				screenfull.on('change', this.change);
+			}
+		},
+		destroy() {
+			if (screenfull.isEnabled) {
+				screenfull.off('change', this.change);
+			}
+		},
 		// 全屏
 		screenfullChange() {
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: 'you browser can not work',
-          type: 'warning'
-        })
-        return false
-      }
-      screenfull.toggle(this.$refs.deepProcessingContainerB)
-    },
+			if (!screenfull.isEnabled) {
+				this.$message({
+					message: 'you browser can not work',
+					type: 'warning',
+				});
+				return false;
+			}
+			screenfull.toggle(this.$refs.deepProcessingContainerB);
+		},
 		resetSize() {
-      let deepProcessingContainer = document.getElementById('deepProcessingContainer')
-      let rw = parseFloat(window.innerWidth)
-      let rh = parseFloat(window.innerHeight)
-      let bw = parseFloat(deepProcessingContainer.style.width)
-      let bh = parseFloat(deepProcessingContainer.style.height)
-			let wx = 0
-			let hx = 0
+			let deepProcessingContainer = document.getElementById(
+				'deepProcessingContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(deepProcessingContainer.style.width);
+			let bh = parseFloat(deepProcessingContainer.style.height);
+			let wx = 0;
+			let hx = 0;
 			if (screenfull.isFullscreen) {
-				console.log('全屏')
-				wx = rw / bw
-				hx = rh / bh
-				console.log(this.scaleNum)
-			}else{
-				console.log('非全屏')
-				console.log(this.$store.state.app.sidebar.opened)
+				wx = rw / bw;
+				hx = rh / bh;
+			} else {
 				if (this.$store.state.app.sidebar.opened) {
-					wx = (rw-280) / bw
-					hx = (rh-116) / bh
-				}else{
-					wx = (rw-85) / bw
-					hx = (rh-116) / bh
+					wx = (rw - 280) / bw;
+					hx = (rh - 116) / bh;
+				} else {
+					wx = (rw - 85) / bw;
+					hx = (rh - 116) / bh;
 				}
 			}
-			this.scaleNum = wx
-    }
-	}
+			this.scaleNum = wx;
+		},
+	},
 };
 </script>