From 789d8552399422fcec19298b27e431491574f9c1 Mon Sep 17 00:00:00 2001 From: shijing Date: Thu, 18 Jun 2026 10:19:15 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E5=85=89=E5=AD=90=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=86=85=E5=AD=98=E6=B3=84=E9=9C=B2=E9=9A=90=E8=97=8F=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bigScreen/index_photon.vue | 153 +++++++++++++++++++-------- 1 file changed, 106 insertions(+), 47 deletions(-) diff --git a/src/views/bigScreen/index_photon.vue b/src/views/bigScreen/index_photon.vue index 7eceb216..11aa755a 100644 --- a/src/views/bigScreen/index_photon.vue +++ b/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 (that.deptName == "10车间") { - that.deptName = "7车间"; - } else { - that.deptName = "10车间"; - } - let deptData = []; - if (that.deptName == "7车间") { - deptData = that.dept7Data; - } else { - deptData = that.dept10Data; - } - that.pieoption.series.data = deptData; - let pieoption = that.pieoption; - - let pieChart = echarts.init(pieDom); - pieChart.clear(); - pieChart.setOption(pieoption, true); + if (!pieDom) return; + if (that.deptName == "10车间") { + that.deptName = "7车间"; + } else { + that.deptName = "10车间"; } - }, 5000); + let deptData = + that.deptName == "7车间" ? that.dept7Data : that.dept10Data; + that.pieoption.series.data = deptData; + if (!that.pieChart || that.pieChart.isDisposed()) { + that.pieChart = echarts.init(pieDom); + } + 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 () { - engine.resize(); - }); + this.canvasEl = canvas; + 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; - clearInterval(that.timerTime); - clearInterval(that.timerData); - clearInterval(that.notokTimer); - that.timerTime = null; - that.timerData = null; - that.notokTimer = null; - }, - beforeDestoryed() { - let that = this; - clearInterval(that.timerTime); - clearInterval(that.timerData); - clearInterval(that.notokTimer); - that.timerTime = null; - that.timerData = null; - that.notokTimer = null; + this.isUnmounted = true; + // 定时器 + clearInterval(this.timerTime); + clearInterval(this.timerData); + clearInterval(this.notokTimer); + clearInterval(this.heightTimer); + this.timerTime = null; + this.timerData = null; + this.notokTimer = null; + this.heightTimer = null; + // echarts 实例 + [ + this.pieChart, + this.line1Chart, + this.line2Chart, + 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; + } }, };