fix:光子大屏内存泄露隐藏问题修正

src/views/bigScreen/index_photon.vue

@@ -463,10 +463,21 @@ export default {
 				percentage: 100,
 				count_guan: 0,
 			},
+			isUnmounted: false,
+			pieChart: null,
+			line1Chart: null,
+			line2Chart: null,
+			line3Chart: null,
+			bar1Chart: null,
+			onResize: null,
+			onCanvasMouseMove: null,
+			onCanvasClick: null,
+			canvasEl: null,
 		};
 	},
 	mounted() {
 		loadBabylon().then(() => {
+		    if (this.isUnmounted) return;
 		    this.initView();
 		})
 	},
@@ -536,27 +547,22 @@ export default {
 				that.showTime();
 			}, 1000);
 			that.notokTimer = setInterval(() => {
+				if (that.isUnmounted) return;
 				let pieDom = document.getElementById("pie");
-				if (pieDom) {
+				if (!pieDom) return;
 				if (that.deptName == "10车间") {
 					that.deptName = "7车间";
 				} else {
 					that.deptName = "10车间";
 				}
-					let deptData = [];
+				let deptData =
-					if (that.deptName == "7车间") {
+					that.deptName == "7车间" ? that.dept7Data : that.dept10Data;
-						deptData = that.dept7Data;
-					} else {
-						deptData = that.dept10Data;
-					}
 				that.pieoption.series.data = deptData;
-					let pieoption = that.pieoption;
+				if (!that.pieChart || that.pieChart.isDisposed()) {
-
+					that.pieChart = echarts.init(pieDom);
-					let pieChart = echarts.init(pieDom);
-					pieChart.clear();
-					pieChart.setOption(pieoption, true);
 				}
-			}, 5000);
+				that.pieChart.setOption(that.pieoption, true);
+			}, 60000);
 			that.timerData = setInterval(() => {
 				that.getDeptDetail();
 			}, 60000);
@@ -592,8 +598,12 @@ export default {
 				that.getCountDept7();
 					//左1---本周交付数
 					let chartDom = document.getElementById("line1");
+					if (!chartDom) return;
 					chartDom.style.height = this.blockHeight;
-					let myChart = echarts.init(chartDom);
+					if (!that.line1Chart || that.line1Chart.isDisposed()) {
+						that.line1Chart = echarts.init(chartDom);
+					}
+					let myChart = that.line1Chart;
 					let option = {
 						tooltip: {
 							trigger: "axis",
@@ -862,8 +872,12 @@ export default {
 					}
 					//柱状图折线
 					let line3Dom = document.getElementById("line3");
+					if (!line3Dom) return;
 					line3Dom.style.height = this.blockHeight;
-					let line3Chart = echarts.init(line3Dom);
+					if (!that.line3Chart || that.line3Chart.isDisposed()) {
+						that.line3Chart = echarts.init(line3Dom);
+					}
+					let line3Chart = that.line3Chart;
 					let line3option = {
 						tooltip: {
 							trigger: "axis",
@@ -1217,7 +1231,7 @@ export default {
 				// 添加抓取事件
 				const hl1 = new BABYLON.HighlightLayer("hl1", scene);
 				const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene);
-				canvas.addEventListener("mousemove", (event) => {
+				that.onCanvasMouseMove = (event) => {
 					// 使用 scene.pick 检测鼠标拾取
 					const pickResult = scene.pick(
 						scene.pointerX,
@@ -1292,8 +1306,9 @@ export default {
 					} else {
 						that.infoVisibel = false;
 					}
-				});
+				};
-				canvas.addEventListener("click", (event) => {
+				canvas.addEventListener("mousemove", that.onCanvasMouseMove);
+				that.onCanvasClick = (event) => {
 					// 使用 scene.pick 检测鼠标拾取
 					const pickResult = scene.pick(
 						scene.pointerX,
@@ -1364,7 +1379,8 @@ export default {
 							}
 						}
 					}
-				});
+				};
+				canvas.addEventListener("click", that.onCanvasClick);
 				return scene;
 			};
 			const scene = createScene(); //Call the createScene function
@@ -1374,9 +1390,9 @@ export default {
 			});
 			this.engine = engine;
 			this.scene = scene;
-			window.addEventListener("resize", function () {
+			this.canvasEl = canvas;
-				engine.resize();
+			this.onResize = () => engine.resize();
-			});
+			window.addEventListener("resize", this.onResize);
 		},
 		getDeptData(name) {
 			this.infoVisibel = true;
@@ -1505,8 +1521,12 @@ export default {
 			let that = this;
 			//左边2
 			let bar1 = document.getElementById("bar1");
+			if (!bar1) return;
 			bar1.style.height = this.blockHeight;
-			let bar1Chart = echarts.init(bar1);
+			if (!that.bar1Chart || that.bar1Chart.isDisposed()) {
+				that.bar1Chart = echarts.init(bar1);
+			}
+			let bar1Chart = that.bar1Chart;
 			let bar1option = {
 				tooltip: {
 					trigger: "axis",
@@ -1655,8 +1675,12 @@ export default {
 			bar1Chart.setOption(bar1option);
 			//左3
 			let line2Dom = document.getElementById("line2");
+			if (!line2Dom) return;
 			line2Dom.style.height = this.blockHeight;
-			let line2Chart = echarts.init(line2Dom);
+			if (!that.line2Chart || that.line2Chart.isDisposed()) {
+				that.line2Chart = echarts.init(line2Dom);
+			}
+			let line2Chart = that.line2Chart;
 			let line2option = {
 				tooltip: {
 					trigger: "axis",
@@ -1845,8 +1869,12 @@ export default {
 			line2Chart.setOption(line2option);
 			//饼状图
 			let pieDom = document.getElementById("pie");
+			if (!pieDom) return;
 			pieDom.style.height = this.blockHeight;
-			let pieChart = echarts.init(pieDom);
+			if (!that.pieChart || that.pieChart.isDisposed()) {
+				that.pieChart = echarts.init(pieDom);
+			}
+			let pieChart = that.pieChart;
 			let pieoption = {
 				color: [
 					"rgb(237,224,45)",
@@ -1914,22 +1942,53 @@ export default {
 		},
 	},
 	beforeUnmount() {
-		let that = this;
+		this.isUnmounted = true;
-		clearInterval(that.timerTime);
+		// 定时器
-		clearInterval(that.timerData);
+		clearInterval(this.timerTime);
-		clearInterval(that.notokTimer);
+		clearInterval(this.timerData);
-		that.timerTime = null;
+		clearInterval(this.notokTimer);
-		that.timerData = null;
+		clearInterval(this.heightTimer);
-		that.notokTimer = null;
+		this.timerTime = null;
-	},
+		this.timerData = null;
-	beforeDestoryed() {
+		this.notokTimer = null;
-		let that = this;
+		this.heightTimer = null;
-		clearInterval(that.timerTime);
+		// echarts 实例
-		clearInterval(that.timerData);
+		[
-		clearInterval(that.notokTimer);
+			this.pieChart,
-		that.timerTime = null;
+			this.line1Chart,
-		that.timerData = null;
+			this.line2Chart,
-		that.notokTimer = null;
+			this.line3Chart,
+			this.bar1Chart,
+		].forEach((c) => {
+			if (c && !c.isDisposed()) c.dispose();
+		});
+		this.pieChart = this.line1Chart = this.line2Chart = this.line3Chart = this.bar1Chart = null;
+		// 事件监听器
+		if (this.onResize) {
+			window.removeEventListener("resize", this.onResize);
+			this.onResize = null;
+		}
+		if (this.canvasEl) {
+			if (this.onCanvasMouseMove) {
+				this.canvasEl.removeEventListener("mousemove", this.onCanvasMouseMove);
+			}
+			if (this.onCanvasClick) {
+				this.canvasEl.removeEventListener("click", this.onCanvasClick);
+			}
+			this.canvasEl = null;
+		}
+		this.onCanvasMouseMove = null;
+		this.onCanvasClick = null;
+		// babylon 引擎
+		if (this.scene) {
+			try { this.scene.dispose(); } catch (e) {}
+			this.scene = null;
+		}
+		if (this.engine) {
+			try { this.engine.stopRenderLoop(); } catch (e) {}
+			try { this.engine.dispose(); } catch (e) {}
+			this.engine = null;
+		}
 	},
 };
 </script>