fix(GroupRanking): 添加组件卸载状态检查防止内存泄漏
在组件卸载时添加状态标记,避免组件卸载后仍执行图表更新操作导致内存泄漏
This commit is contained in:
@@ -27,6 +27,9 @@ const props = defineProps({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 组件状态跟踪
|
||||||
|
let isComponentMounted = true
|
||||||
|
|
||||||
// Chart.js 实例
|
// Chart.js 实例
|
||||||
const chartInstances = {}
|
const chartInstances = {}
|
||||||
|
|
||||||
@@ -41,13 +44,15 @@ const funnelData = reactive({
|
|||||||
|
|
||||||
// 监听teamSalesFunnel变化并更新图表数据
|
// 监听teamSalesFunnel变化并更新图表数据
|
||||||
watch(() => props.teamSalesFunnel, (newVal) => {
|
watch(() => props.teamSalesFunnel, (newVal) => {
|
||||||
if (newVal && Object.keys(newVal).length > 0) {
|
if (newVal && Object.keys(newVal).length > 0 && isComponentMounted) {
|
||||||
// 按照固定顺序提取数据
|
// 按照固定顺序提取数据
|
||||||
const order = ['线索', '加微', '到课', '定金', '成交']
|
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||||
funnelData.data = order.map(key => newVal[key] || 0)
|
funnelData.data = order.map(key => newVal[key] || 0)
|
||||||
// 确保在DOM更新后再更新图表
|
// 确保在DOM更新后再更新图表
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
if (isComponentMounted) {
|
||||||
renderPersonalFunnelChart()
|
renderPersonalFunnelChart()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
@@ -89,15 +94,19 @@ const renderPersonalFunnelChart = () => {
|
|||||||
|
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
isComponentMounted = true
|
||||||
// 处理初始传入的teamSalesFunnel数据
|
// 处理初始传入的teamSalesFunnel数据
|
||||||
if (props.teamSalesFunnel && Object.keys(props.teamSalesFunnel).length > 0) {
|
if (props.teamSalesFunnel && Object.keys(props.teamSalesFunnel).length > 0) {
|
||||||
const order = ['线索', '加微', '到课', '定金', '成交']
|
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||||
funnelData.data = order.map(key => props.teamSalesFunnel[key] || 0)
|
funnelData.data = order.map(key => props.teamSalesFunnel[key] || 0)
|
||||||
}
|
}
|
||||||
|
if (isComponentMounted) {
|
||||||
renderPersonalFunnelChart()
|
renderPersonalFunnelChart()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
isComponentMounted = false
|
||||||
Object.values(chartInstances).forEach(chart => chart.destroy())
|
Object.values(chartInstances).forEach(chart => chart.destroy())
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user