移除部分监听

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>
 

src/views/databoard/kiln/index.vue

@@ -1,8 +1,11 @@
 <template>
-	<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
+	<div
+		id="kilnContainerB"
+		ref="kilnContainerB"
+		style="width: 100%; height: 100%">
 		<div
-			id='kilnContainer'
-			ref='kilnContainer'
+			id="kilnContainer"
+			ref="kilnContainer"
 			class="KilnDataBoard"
 			style="
 				position: absolute;
@@ -16,15 +19,22 @@
 				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="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
-				<div class="left-side" style="flex: 2">
+				<div
+					class="left-side"
+					style="flex: 2">
 					<LeftFour />
 				</div>
-				<div class="right-side" style="flex: 1">
+				<div
+					class="right-side"
+					style="flex: 1">
 					<RightTwo />
 				</div>
 			</div>
@@ -36,8 +46,8 @@
 import KHeader from '../components/Header';
 import LeftFour from './LeftFour';
 import RightTwo from './RightTwo.vue';
-import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce'
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
 
 export default {
 	name: 'Kiln',
@@ -46,10 +56,10 @@ export default {
 		LeftFour,
 		RightTwo,
 	},
-	computed:{
+	computed: {
 		sidebarStatus() {
 			return this.$store.state.app.sidebar.opened;
-		}
+		},
 	},
 	// provide() {
 	// 	return {
@@ -59,84 +69,80 @@ export default {
 	data() {
 		return {
 			isFullScreen: false,
-			scaleNum: 0.8
+			scaleNum: 0.8,
 		};
 	},
 	watch: {
 		sidebarStatus() {
-			this.boxReset()
+			this.boxReset();
 		},
 	},
 	created() {
-		this.init()
-	},
-	destroy() {
-		this.destroy()
+		this.init();
 	},
 	mounted() {
-		this.boxReset = debounce(() => {
-      this.resetSize()
-    }, 300)
-    this.boxReset()
-    window.addEventListener('resize', () => {
-      this.boxReset()
-    })
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.boxReset);
+		this.destroy();
 	},
 	methods: {
+		boxReset() {
+			debounce(() => {
+				this.resetSize();
+			}, 300)();
+		},
 		change() {
-      this.isFullScreen = screenfull.isFullscreen
-    },
+			this.isFullScreen = screenfull.isFullscreen;
+		},
 
-    init() {
-      if (screenfull.isEnabled) {
-        screenfull.on('change', this.change)
-      }
-    },
+		init() {
+			if (screenfull.isEnabled) {
+				screenfull.on('change', this.change);
+			}
+		},
 
-    destroy() {
-      if (screenfull.isEnabled) {
-        screenfull.off('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.kilnContainerB)
-    },
+			if (!screenfull.isEnabled) {
+				this.$message({
+					message: 'you browser can not work',
+					type: 'warning',
+				});
+				return false;
+			}
+			screenfull.toggle(this.$refs.kilnContainerB);
+		},
 		resetSize() {
-      let kilnContainerBox = document.getElementById('kilnContainer')
-			console.log(kilnContainerBox)
-      let rw = parseFloat(window.innerWidth)
-      let rh = parseFloat(window.innerHeight)
-      let bw = parseFloat(kilnContainerBox.style.width)
-      let bh = parseFloat(kilnContainerBox.style.height)
-			let wx = 0
-			let hx = 0
+			let kilnContainerBox = document.getElementById('kilnContainer');
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(kilnContainerBox.style.width);
+			let bh = parseFloat(kilnContainerBox.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>
 

src/views/databoard/wholePlant/index.vue

@@ -1,8 +1,11 @@
 <template>
-	<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
+	<div
+		id="wholePlantContainerB"
+		ref="wholePlantContainerB"
+		style="width: 100%; height: 100%">
 		<div
-			id='wholePlantContainer'
-			ref='wholePlantContainer'
+			id="wholePlantContainer"
+			ref="wholePlantContainer"
 			class="wholePlantBoard"
 			style="
 				position: absolute;
@@ -16,18 +19,27 @@
 				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="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
-				<div class="left-side" style="flex: 1">
+				<div
+					class="left-side"
+					style="flex: 1">
 					<LeftTwo />
 				</div>
-				<div class="middle-side" style="flex: 1">
+				<div
+					class="middle-side"
+					style="flex: 1">
 					<MiddleTwo />
 				</div>
-				<div class="right-side" style="flex: 1">
+				<div
+					class="right-side"
+					style="flex: 1">
 					<RightTwo />
 				</div>
 			</div>
@@ -40,8 +52,8 @@ import KHeader from '../components/Header';
 import LeftTwo from './LeftTwo';
 import MiddleTwo from './MiddleTwo';
 import RightTwo from './RightTwo';
-import screenfull from 'screenfull'
-import { debounce } from '@/utils/debounce'
+import screenfull from 'screenfull';
+import { debounce } from '@/utils/debounce';
 
 export default {
 	name: 'wholePlantBoard',
@@ -49,7 +61,7 @@ export default {
 		KHeader,
 		LeftTwo,
 		MiddleTwo,
-		RightTwo
+		RightTwo,
 	},
 	// provide() {
 	// 	return {
@@ -59,80 +71,77 @@ 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()
-    })
-		console.log('mounted...........')
+		this.boxReset();
+		window.addEventListener('resize', this.boxReset);
 	},
 	destroyed() {
-		console.log('destroyed...........')
+		window.removeEventListener('resize', this.boxReset);
 	},
 	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.wholePlantContainerB)
-    },
+			if (!screenfull.isEnabled) {
+				this.$message({
+					message: 'you browser can not work',
+					type: 'warning',
+				});
+				return false;
+			}
+			screenfull.toggle(this.$refs.wholePlantContainerB);
+		},
 		resetSize() {
-      let wholePlantContainerBox = document.getElementById('wholePlantContainer')
-      let rw = parseFloat(window.innerWidth)
-      let rh = parseFloat(window.innerHeight)
-      let bw = parseFloat(wholePlantContainerBox.style.width)
-      let bh = parseFloat(wholePlantContainerBox.style.height)
-			let wx = 0
-			let hx = 0
+			let wholePlantContainerBox = document.getElementById(
+				'wholePlantContainer'
+			);
+			let rw = parseFloat(window.innerWidth);
+			let rh = parseFloat(window.innerHeight);
+			let bw = parseFloat(wholePlantContainerBox.style.width);
+			let bh = parseFloat(wholePlantContainerBox.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>