fix:光子大屏内存泄露隐藏问题修正
This commit is contained in:
parent
65dc93e166
commit
789d855239
|
|
@ -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;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue