zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
shijing 2026-06-18 10:19:15 +08:00
parent 65dc93e166
commit 789d855239
1 changed files with 106 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/views/bigScreen/index_photon.vue
View File

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