diff --git a/my-vue-app/src/views/senorManger/components/GroupRanking.vue b/my-vue-app/src/views/senorManger/components/GroupRanking.vue index fa678ab..480895e 100644 --- a/my-vue-app/src/views/senorManger/components/GroupRanking.vue +++ b/my-vue-app/src/views/senorManger/components/GroupRanking.vue @@ -27,6 +27,9 @@ const props = defineProps({ } }) +// 组件状态跟踪 +let isComponentMounted = true + // Chart.js 实例 const chartInstances = {} @@ -41,13 +44,15 @@ const funnelData = reactive({ // 监听teamSalesFunnel变化并更新图表数据 watch(() => props.teamSalesFunnel, (newVal) => { - if (newVal && Object.keys(newVal).length > 0) { + if (newVal && Object.keys(newVal).length > 0 && isComponentMounted) { // 按照固定顺序提取数据 const order = ['线索', '加微', '到课', '定金', '成交'] funnelData.data = order.map(key => newVal[key] || 0) // 确保在DOM更新后再更新图表 nextTick(() => { - renderPersonalFunnelChart() + if (isComponentMounted) { + renderPersonalFunnelChart() + } }) } }, { deep: true }) @@ -89,15 +94,19 @@ const renderPersonalFunnelChart = () => { // 生命周期钩子 onMounted(() => { + isComponentMounted = true // 处理初始传入的teamSalesFunnel数据 if (props.teamSalesFunnel && Object.keys(props.teamSalesFunnel).length > 0) { const order = ['线索', '加微', '到课', '定金', '成交'] funnelData.data = order.map(key => props.teamSalesFunnel[key] || 0) } - renderPersonalFunnelChart() + if (isComponentMounted) { + renderPersonalFunnelChart() + } }) onBeforeUnmount(() => { + isComponentMounted = false Object.values(chartInstances).forEach(chart => chart.destroy()) })