diff --git a/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue b/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue
index 1b894f8..d4fc7ec 100644
--- a/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue
+++ b/src/page/index/components/BrandConsumptionLevel/BrandConsumptionLevel.vue
@@ -34,60 +34,7 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        legend: {
-            // selectedMode: false,
-            right: 0,
-            textStyle: {
-                color: '#fff',
-                fontSize: 12,
-                padding: [0, 0, 0, 5]
-            },
-        },
-        grid: {
-            left: '0',
-            right: '0',
-            bottom: '0',
-            top: '30',
-            containLabel: true
-        },
-        yAxis: {
-            name: '%',
-            type: 'value',
-            splitLine: { show: false },  // 隐藏刻度线
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#fff'
-                }
-            },
-            axisLabel: {
-                color: '#fff',
-            }
-        },
-        xAxis: {
-            type: 'category',
-            data: res.category,
-            axisLabel: {
-                interval: 0  // 强制显示所有标签
-            },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#fff'
-                }
-            },
-        },
-        series: res.seriesData,
-        tooltip: {
-            trigger: 'item',
-            formatter: function (params: any) {
-                return `
-                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
-            `;
-            }
-        },
-    };
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -162,6 +109,64 @@ const handleGetData = async () => {
     return res
 }
 
+const handleSetConfig = (res: any) => {
+    const option = {
+        legend: {
+            // selectedMode: false,
+            right: 0,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 0, 0, 5]
+            },
+        },
+        grid: {
+            left: '0',
+            right: '0',
+            bottom: '0',
+            top: '30',
+            containLabel: true
+        },
+        yAxis: {
+            name: '%',
+            type: 'value',
+            splitLine: { show: false },  // 隐藏刻度线
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+            axisLabel: {
+                color: '#fff',
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: res.category,
+            axisLabel: {
+                interval: 0  // 强制显示所有标签
+            },
+            axisLine: {
+                show: true,
+                lineStyle: {
+                    color: '#fff'
+                }
+            },
+        },
+        series: res.seriesData,
+        tooltip: {
+            trigger: 'item',
+            formatter: function (params: any) {
+                return `
+                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
+            `;
+            }
+        },
+    };
+
+    return option
+}
 
 const resizeChart = () => {
     myChart?.resize();
@@ -172,7 +177,18 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
 
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 
 </script>
 
diff --git a/src/page/index/components/BrandDetail/BrandDetail.vue b/src/page/index/components/BrandDetail/BrandDetail.vue
index d050015..11cb4fc 100644
--- a/src/page/index/components/BrandDetail/BrandDetail.vue
+++ b/src/page/index/components/BrandDetail/BrandDetail.vue
@@ -66,67 +66,7 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        legend: {
-            orient: 'vertical',       // 图例纵向排列
-            left: 200,          // 距离右侧5%
-            top: 'center',           // 垂直居中
-            itemWidth: 12,           // 图例标记宽度
-            itemHeight: 12,          // 图例标记高度
-            textStyle: {
-                color: '#fff',       // 文字颜色
-                rich: {
-                    // 可以在这里添加富文本样式
-                    value: {
-                        fontWeight: 'bold',
-                        padding: [0, 0, 0, 5]  // 文字间距
-                    }
-                }
-            },
-            // 自定义图例内容
-            formatter: function (name: string) {
-                // 找到对应的数据项
-                const dataItem = res.pieData.find((item: any) => item.name === name);
-                // 返回自定义格式
-                return `${name} ${dataItem?.value}%`;
-
-
-            }
-        },
-        tooltip: {  // 新增 tooltip 配置
-            trigger: 'item',  // 触发类型：坐标轴触发
-            axisPointer: {    // 坐标轴指示器配置
-                type: 'shadow' // 阴影指示器（适合柱状图）
-            },
-            formatter: function (params: any) {  // 自定义提示框内容
-                return `
-                    <div style="font-weight:bold">${params.name} ${params?.percent}% </div>
-                `;
-            }
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['0%', '70%'],
-                center: ['25%', '50%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    color: function (params: any) {
-                        return colorList[params.dataIndex];
-                    }
-                },
-                label: {
-                    show: false
-                },
-                emphasis: false,
-                labelLine: {
-                    show: false
-                },
-                data: res.pieData
-            }
-        ]
-    };
+    const option = handleSetConfig(res)
 
 
     myChart.setOption(option);
@@ -285,6 +225,86 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+
+const handleSetConfig = (res: any) => {
+    const option = {
+        legend: {
+            orient: 'vertical',       // 图例纵向排列
+            left: 200,          // 距离右侧5%
+            top: 'center',           // 垂直居中
+            itemWidth: 12,           // 图例标记宽度
+            itemHeight: 12,          // 图例标记高度
+            textStyle: {
+                color: '#fff',       // 文字颜色
+                rich: {
+                    // 可以在这里添加富文本样式
+                    value: {
+                        fontWeight: 'bold',
+                        padding: [0, 0, 0, 5]  // 文字间距
+                    }
+                }
+            },
+            // 自定义图例内容
+            formatter: function (name: string) {
+                // 找到对应的数据项
+                const dataItem = res.pieData.find((item: any) => item.name === name);
+                // 返回自定义格式
+                return `${name} ${dataItem?.value}%`;
+
+
+            }
+        },
+        tooltip: {  // 新增 tooltip 配置
+            trigger: 'item',  // 触发类型：坐标轴触发
+            axisPointer: {    // 坐标轴指示器配置
+                type: 'shadow' // 阴影指示器（适合柱状图）
+            },
+            formatter: function (params: any) {  // 自定义提示框内容
+                return `
+                    <div style="font-weight:bold">${params.name} ${params?.percent}% </div>
+                `;
+            }
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['0%', '70%'],
+                center: ['25%', '50%'],
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    color: function (params: any) {
+                        return colorList[params.dataIndex];
+                    }
+                },
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                data: res.pieData
+            }
+        ]
+    };
+    return option
+}
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+
+    handleBrandTabList()
+}
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
diff --git a/src/page/index/components/BusinessCase/BusinessCase.vue b/src/page/index/components/BusinessCase/BusinessCase.vue
index e5a3bcb..d39e297 100644
--- a/src/page/index/components/BusinessCase/BusinessCase.vue
+++ b/src/page/index/components/BusinessCase/BusinessCase.vue
@@ -447,6 +447,11 @@ onBeforeUnmount(() => {
     myChartBottom?.dispose();
 });
 
+defineExpose({
+    handleGetData
+});
+
+
 
 </script>
 
diff --git a/src/page/index/components/BusinessStructure/BusinessStructure.vue b/src/page/index/components/BusinessStructure/BusinessStructure.vue
index 3e24bfa..d869d3d 100644
--- a/src/page/index/components/BusinessStructure/BusinessStructure.vue
+++ b/src/page/index/components/BusinessStructure/BusinessStructure.vue
@@ -55,86 +55,7 @@ const handleGoMounted = async () => {
     const centerX = width * 0.2;
     const centerY = height * 0.5;
 
-    const option = {
-
-        tooltip: {  // 新增 tooltip 配置
-            trigger: 'item',  // 触发类型：坐标轴触发
-            axisPointer: {    // 坐标轴指示器配置
-                type: 'shadow' // 阴影指示器（适合柱状图）
-            },
-            formatter: function (params: any) {  // 自定义提示框内容
-                return `
-                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex]}</div>
-                `;
-            }
-        },
-        graphic: {  // 关键配置：在图表中心添加图片
-            elements: [
-                {
-                    type: 'image',
-                    style: {
-                        image: businessFormatCenterIcon,
-                        width: 83,
-                        height: 83
-                    },
-                    left: centerX - 41.5,
-                    top: centerY - 41.5,
-                    z: 10
-                }
-            ]
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['55%', '70%'],
-                center: ['20%', '50%'], // 图形向左偏移
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    color: function (params: any) {
-                        return colorList[params.dataIndex];
-                    }
-                },
-                label: {
-                    show: false
-                },
-                emphasis: false,
-                labelLine: {
-                    show: false
-                },
-                data: res.seriesData
-            }
-        ],
-        legend: {
-            orient: 'vertical',
-            left: 200,
-            top: 'center',
-            align: 'left',
-            itemGap: 10,
-            itemWidth: 12,
-            itemHeight: 12,
-            textStyle: {
-                color: '#fff',
-                rich: {
-                    name: {
-                        width: 90,  // 固定名称宽度
-                        align: 'left',
-                        padding: [0, 10, 0, 0]
-                    },
-                    percent: {
-                        width: 50,    // 固定百分比宽度
-                        align: 'right',
-                        padding: [0, 10, 0, 0]
-                    }
-                }
-            },
-            formatter: function (name: any) {
-                let percentData: any = res.lengedData.filter((item: any) => item.name === name)
-
-                return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
-            }
-        }
-    };
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -232,12 +153,121 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleSetConfig = (res: any) => {
+    const chartDom = document.getElementById('BusinessStructure');
+    if (!chartDom) return;
+
+    myChart = echarts.init(chartDom);
+
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.2;
+    const centerY = height * 0.5;
+
+    const option = {
+        tooltip: {  // 新增 tooltip 配置
+            trigger: 'item',  // 触发类型：坐标轴触发
+            axisPointer: {    // 坐标轴指示器配置
+                type: 'shadow' // 阴影指示器（适合柱状图）
+            },
+            formatter: function (params: any) {  // 自定义提示框内容
+                return `
+                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex]}</div>
+                `;
+            }
+        },
+        graphic: {  // 关键配置：在图表中心添加图片
+            elements: [
+                {
+                    type: 'image',
+                    style: {
+                        image: businessFormatCenterIcon,
+                        width: 83,
+                        height: 83
+                    },
+                    left: centerX - 41.5,
+                    top: centerY - 41.5,
+                    z: 10
+                }
+            ]
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['55%', '70%'],
+                center: ['20%', '50%'], // 图形向左偏移
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    color: function (params: any) {
+                        return colorList[params.dataIndex];
+                    }
+                },
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                data: res.seriesData
+            }
+        ],
+        legend: {
+            orient: 'vertical',
+            left: 200,
+            top: 'center',
+            align: 'left',
+            itemGap: 10,
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                color: '#fff',
+                rich: {
+                    name: {
+                        width: 90,  // 固定名称宽度
+                        align: 'left',
+                        padding: [0, 10, 0, 0]
+                    },
+                    percent: {
+                        width: 50,    // 固定百分比宽度
+                        align: 'right',
+                        padding: [0, 10, 0, 0]
+                    }
+                }
+            },
+            formatter: function (name: any) {
+                let percentData: any = res.lengedData.filter((item: any) => item.name === name)
+
+                return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
+            }
+        }
+    };
+    return option
+}
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
 
 
-<template> 
+<template>
     <div class="BusinessStructureBox">
         <SmallTitle :title="'业态结构占比'"></SmallTitle>
 
diff --git a/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue b/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue
index 4b71d02..6132d50 100644
--- a/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue
+++ b/src/page/index/components/ConsumptionConversion/ConsumptionConversion.vue
@@ -34,6 +34,92 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+// 拿到数据
+const handleGetData = async () => {
+
+    let category: any = []
+    let carResList: any = []
+    let carRealResList: any = []
+    let orderResList: any = []
+    let orderRealResList: any = []
+
+    const req: any = {
+        Province_Code: '530000',
+        // Province_Code: '340000',
+        Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+        Serverpart_ID: ''
+    }
+
+    let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
+    let data: any = []
+    if (ConsumptionConversion) {
+        data = JSON.parse(ConsumptionConversion)
+    } else {
+        data = await handleGetTransactionConvert(req)
+        sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
+    }
+
+
+
+    // const data = await handleGetTransactionConvert(req)
+
+
+    let carList = data.BayonetList.data
+
+    let orderList = data.TransactionList.data
+
+    let aiObjCar: any = {}
+    let aiOrder: any = {}
+
+    if (carList && carList.length > 0) {
+        carList.forEach((item: any) => {
+            carResList.push((item[1]))
+            carRealResList.push(item[1])
+            aiObjCar[`${item[0]}时`] = item[1] + '辆'
+        })
+    }
+
+    if (orderList && orderList.length > 0) {
+        orderList.forEach((item: any) => {
+            category.push(item[0])
+            orderResList.push((item[1]))
+            orderRealResList.push(item[1])
+            aiOrder[`${item[0]}时`] = item[1] + '笔'
+        })
+    }
+
+
+
+    let res: any = {
+        category: category,// x轴的内容
+        carResList: carResList,
+        carRealResList: carRealResList,
+        orderResList: orderResList,
+        orderRealResList: orderRealResList
+    }
+
+
+    let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
+    if (ConsumptionConversionAI) { } else {
+        let aiObj: any = {
+            "时段车流": aiObjCar,
+            "时段客单": aiOrder
+        }
+        sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
+    }
+
+
+    return res
+}
+
+const handleSetConfig = (res: any) => {
     const option = {
         legend: {
             top: 0,              // 距离容器底部距离
@@ -185,91 +271,9 @@ onMounted(async () => {
             }
         }
     };
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-})
-
-// 拿到数据
-const handleGetData = async () => {
-
-    let category: any = []
-    let carResList: any = []
-    let carRealResList: any = []
-    let orderResList: any = []
-    let orderRealResList: any = []
-
-    const req: any = {
-        Province_Code: '530000',
-        // Province_Code: '340000',
-        Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
-        Serverpart_ID: ''
-    }
-
-    let ConsumptionConversion = sessionStorage.getItem('ConsumptionConversion')
-    let data: any = []
-    if (ConsumptionConversion) {
-        data = JSON.parse(ConsumptionConversion)
-    } else {
-        data = await handleGetTransactionConvert(req)
-        sessionStorage.setItem("ConsumptionConversion", JSON.stringify(data))
-    }
-
-
-
-    // const data = await handleGetTransactionConvert(req)
-
-
-    let carList = data.BayonetList.data
-
-    let orderList = data.TransactionList.data
-
-    let aiObjCar: any = {}
-    let aiOrder: any = {}
-
-    if (carList && carList.length > 0) {
-        carList.forEach((item: any) => {
-            carResList.push((item[1]))
-            carRealResList.push(item[1])
-            aiObjCar[`${item[0]}时`] = item[1] + '辆'
-        })
-    }
-
-    if (orderList && orderList.length > 0) {
-        orderList.forEach((item: any) => {
-            category.push(item[0])
-            orderResList.push((item[1]))
-            orderRealResList.push(item[1])
-            aiOrder[`${item[0]}时`] = item[1] + '笔'
-        })
-    }
-
-
-
-    let res: any = {
-        category: category,// x轴的内容
-        carResList: carResList,
-        carRealResList: carRealResList,
-        orderResList: orderResList,
-        orderRealResList: orderRealResList
-    }
-
-
-    let ConsumptionConversionAI = sessionStorage.getItem('ConsumptionConversionAI')
-    if (ConsumptionConversionAI) { } else {
-        let aiObj: any = {
-            "时段车流": aiObjCar,
-            "时段客单": aiOrder
-        }
-        sessionStorage.setItem("ConsumptionConversionAI", JSON.stringify(aiObj))
-    }
-
-
-    return res
+    return option
 }
 
-
 const resizeChart = () => {
     myChart?.resize();
 };
@@ -279,7 +283,18 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
 
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 
 </script>
 
diff --git a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue
index e48d6d6..2442b7f 100644
--- a/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue
+++ b/src/page/index/components/ConsumptionLevel/ConsumptionLevel.vue
@@ -35,66 +35,7 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        legend: {
-            right: 0,
-            textStyle: {
-                color: '#fff',
-                fontSize: 12,
-                padding: [0, 0, 0, 5]
-            },
-        },
-        grid: {
-            left: '0',
-            right: '0',
-            bottom: '0',
-            top: '30',
-            containLabel: true
-        },
-        yAxis: {
-            type: 'value',
-            name: "%",
-            show: true,      // 显式启用 Y 轴（即使默认也建议写上）
-            nameTextStyle: {
-                color: '#fff', // 确保名称颜色可见
-                padding: [0, 0, 0, 0] // 调整名称位置
-            },
-            splitLine: { show: false },
-            axisLabel: {
-                color: '#fff',
-                interval: 0,
-                show: true   // 显式启用刻度标签
-            },
-            axisLine: {
-                show: true,  // 显式启用轴线
-                lineStyle: {
-                    color: '#fff'
-                }
-            }
-        },
-        xAxis: {
-            type: 'category',
-            data: res.category,
-            axisLabel: {
-                color: '#fff',
-                interval: 0  // 强制显示所有标签
-            },
-            axisLine: {
-                lineStyle: {
-                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
-                }
-            },
-        },
-        series: res.seriesData,
-        tooltip: {
-            trigger: 'item',
-            formatter: function (params: any) {
-                return `
-                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
-            `;
-            }
-        },
-    };
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -179,7 +120,82 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleSetConfig = (res: any) => {
+    const option = {
+        legend: {
+            right: 0,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+                padding: [0, 0, 0, 5]
+            },
+        },
+        grid: {
+            left: '0',
+            right: '0',
+            bottom: '0',
+            top: '30',
+            containLabel: true
+        },
+        yAxis: {
+            type: 'value',
+            name: "%",
+            show: true,      // 显式启用 Y 轴（即使默认也建议写上）
+            nameTextStyle: {
+                color: '#fff', // 确保名称颜色可见
+                padding: [0, 0, 0, 0] // 调整名称位置
+            },
+            splitLine: { show: false },
+            axisLabel: {
+                color: '#fff',
+                interval: 0,
+                show: true   // 显式启用刻度标签
+            },
+            axisLine: {
+                show: true,  // 显式启用轴线
+                lineStyle: {
+                    color: '#fff'
+                }
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: res.category,
+            axisLabel: {
+                color: '#fff',
+                interval: 0  // 强制显示所有标签
+            },
+            axisLine: {
+                lineStyle: {
+                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
+                }
+            },
+        },
+        series: res.seriesData,
+        tooltip: {
+            trigger: 'item',
+            formatter: function (params: any) {
+                return `
+                <div style="font-weight:bold">${params.seriesName}  ${params.value}%</div>
+            `;
+            }
+        },
+    };
+    return option
+}
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 
 </script>
 
diff --git a/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue b/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue
index 1da8c91..a4f5745 100644
--- a/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue
+++ b/src/page/index/components/ConsumptionPeriod/ConsumptionPeriod.vue
@@ -34,6 +34,73 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+// 拿到数据
+const handleGetData = async () => {
+
+    let category: any = []
+    let seriesData: any = []
+
+    const req: any = {
+        Province_Code: '530000',
+        Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
+        Serverpart_ID: '',
+        TimeSpan: 1
+    }
+
+
+    let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
+    let data: any = []
+    if (ConsumptionPeriod) {
+        data = JSON.parse(ConsumptionPeriod)
+    } else {
+        data = await handleGetTransactionTimeAnalysis(req)
+        sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
+    }
+
+    // const data = await handleGetTransactionTimeAnalysis(req)
+
+    let aiObj: any = {}
+    if (data && data.length > 0) {
+        // 拿到笔数的合计
+        let orderSum: number = 0
+        data.forEach((item: any) => {
+            orderSum += Number(item.data)
+        })
+
+        // data 是笔数  key 是金额
+        data.forEach((item: any, index: number) => {
+            if (index < 10) {
+                category.push(`0${index}:00`)
+            } else {
+                category.push(`${index}:00`)
+            }
+
+            seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
+            aiObj[`${item.name}时`] = item.data + '单'
+        })
+    }
+
+    let res: any = {
+        category: category,// x轴的内容
+        seriesData: seriesData,
+    }
+
+    let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
+    if (ConsumptionPeriodAI) { } else {
+        sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
+    }
+
+    return res
+}
+
+const handleSetConfig = (res: any) => {
     const option = {
         xAxis: {
             type: 'category',
@@ -119,72 +186,9 @@ onMounted(async () => {
             }
         }
     };
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-})
-
-// 拿到数据
-const handleGetData = async () => {
-
-    let category: any = []
-    let seriesData: any = []
-
-    const req: any = {
-        Province_Code: '530000',
-        Statistics_Date: moment().subtract(1, 'd').subtract(1, 'M').format('YYYY-MM-DD'),
-        Serverpart_ID: '',
-        TimeSpan: 1
-    }
-
-
-    let ConsumptionPeriod = sessionStorage.getItem('ConsumptionPeriod')
-    let data: any = []
-    if (ConsumptionPeriod) {
-        data = JSON.parse(ConsumptionPeriod)
-    } else {
-        data = await handleGetTransactionTimeAnalysis(req)
-        sessionStorage.setItem("ConsumptionPeriod", JSON.stringify(data))
-    }
-
-    // const data = await handleGetTransactionTimeAnalysis(req)
-
-    let aiObj: any = {}
-    if (data && data.length > 0) {
-        // 拿到笔数的合计
-        let orderSum: number = 0
-        data.forEach((item: any) => {
-            orderSum += Number(item.data)
-        })
-
-        // data 是笔数  key 是金额
-        data.forEach((item: any, index: number) => {
-            if (index < 10) {
-                category.push(`0${index}:00`)
-            } else {
-                category.push(`${index}:00`)
-            }
-
-            seriesData.push(Number(((item.data / orderSum) * 100).toFixed(2)))
-            aiObj[`${item.name}时`] = item.data + '单'
-        })
-    }
-
-    let res: any = {
-        category: category,// x轴的内容
-        seriesData: seriesData,
-    }
-
-    let ConsumptionPeriodAI = sessionStorage.getItem('ConsumptionPeriodAI')
-    if (ConsumptionPeriodAI) { } else {
-        sessionStorage.setItem("ConsumptionPeriodAI", JSON.stringify(aiObj))
-    }
-
-    return res
+    return option
 }
 
-
 const resizeChart = () => {
     myChart?.resize();
 };
@@ -194,6 +198,19 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
+
 
 
 </script>
diff --git a/src/page/index/components/CoreBusinessData/CoreBusinessData.vue b/src/page/index/components/CoreBusinessData/CoreBusinessData.vue
index 18ccc24..c20e9cd 100644
--- a/src/page/index/components/CoreBusinessData/CoreBusinessData.vue
+++ b/src/page/index/components/CoreBusinessData/CoreBusinessData.vue
@@ -59,7 +59,6 @@ const handleGetMapRealData = async () => {
         serverPartId: props.currentService?.SERVERPART_ID || ""
     }
 
-
     let CoreBusinessData = sessionStorage.getItem('CoreBusinessData')
     let data: any = []
     if (CoreBusinessData) {
@@ -228,6 +227,10 @@ const handleGetPonitFixed = (str: string) => {
     const num = parseFloat(str); // 先转为number类型
     return isNaN(num) ? "0.00" : num.toFixed(2);
 }
+
+defineExpose({
+    handleGetMapRealData
+});
 </script>
 
 
diff --git a/src/page/index/components/CoreCategory/CoreCategory.vue b/src/page/index/components/CoreCategory/CoreCategory.vue
index 6bbe595..e9e60c6 100644
--- a/src/page/index/components/CoreCategory/CoreCategory.vue
+++ b/src/page/index/components/CoreCategory/CoreCategory.vue
@@ -42,6 +42,14 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.2;
+    const centerY = height * 0.5;
+
     const option = {
         tooltip: {  // 新增 tooltip 配置
             trigger: 'item',  // 触发类型：坐标轴触发
@@ -63,8 +71,8 @@ onMounted(async () => {
                         width: 83,
                         height: 83
                     },
-                    left: 'center',
-                    top: 'center',
+                    left: centerX - 41.5,
+                    top: centerY - 41.5,
                     z: 10
                 }
             ]
@@ -73,8 +81,8 @@ onMounted(async () => {
             {
                 name: 'Access From',
                 type: 'pie',
-                radius: ['85%', '100%'],
-                center: ['50%', '50%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                radius: ['55%', '70%'],
+                center: ['20%', '50%'], // 图形向左偏移
                 avoidLabelOverlap: false,
 
                 itemStyle: {
@@ -91,7 +99,36 @@ onMounted(async () => {
                 },
                 data: res.seriesData
             }
-        ]
+        ],
+        legend: {
+            orient: 'vertical',
+            left: 200,
+            top: 'center',
+            align: 'left',
+            itemGap: 10,
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                color: '#fff',
+                rich: {
+                    name: {
+                        width: 90,  // 固定名称宽度
+                        align: 'left',
+                        padding: [0, 10, 0, 0]
+                    },
+                    percent: {
+                        width: 50,    // 固定百分比宽度
+                        align: 'right',
+                        padding: [0, 10, 0, 0]
+                    }
+                }
+            },
+            formatter: function (name: any) {
+                let percentData: any = res.lengedData.filter((item: any) => item.name === name)
+
+                return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
+            }
+        }
     };
 
     myChart.setOption(option);
@@ -165,19 +202,17 @@ onBeforeUnmount(() => {
             <div style="display: flex;margin-top: 30px;align-items: center;">
                 <div class="CoreCategory" id="CoreCategory"></div>
 
-                <div class="CoreCategoryDataList">
+                <!-- <div class="CoreCategoryDataList">
                     <div class="CoreCategoryDataBox" v-for="(item, index) in lengedList" :key="index">
                         <div class="CoreCategoryDataLeftBox">
                             <div class="CoreCategoryItem">
                                 <div class="CoreCategoryItemLeged" :style="{ background: colorList[index] }"></div>
                                 <div class="CoreCategoryItemLabel">{{ item.name }}</div>
                                 <div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.percent }}%</div>
-                                <!-- <div class="CoreCategoryItemLabel" style="margin-left: 8px;">{{ item.value }}</div> -->
                             </div>
                         </div>
-
                     </div>
-                </div>
+                </div> -->
 
             </div>
         </div>
diff --git a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue
index 66766d9..2e70570 100644
--- a/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue
+++ b/src/page/index/components/CustomerAgeGroup/CustomerAgeGroup.vue
@@ -40,6 +40,112 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+// 拿到年龄数据
+const handleGetData = async () => {
+    let category: any = []
+    let seriesData: any = []
+    let percentData: any = []
+
+    const req: any = {
+        provinceCode: '530000',
+        statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
+    }
+
+
+
+    let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
+    let data: any = []
+    if (CustomerAgeGroup) {
+        data = JSON.parse(CustomerAgeGroup)
+    } else {
+        data = await handleGetCustomerAgeRatio(req)
+        sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
+    }
+
+
+    // const data = await handleGetCustomerAgeRatio(req)
+
+    console.log('fdisfsauifhdsaj', data);
+
+    // for (let i = 0; i < 4; i++) {
+    //     let sum: number = (data[0].data[i] + data[1].data[i])
+    //     seriesData.push(sum.toFixed(2))
+    //     percentData.push((sum / 200 * 100).toFixed(2))
+    // }
+
+    // 男生
+    let seriesDataMan: number[] = []
+    // 女生
+    let seriesDataWoman: number[] = []
+    if (data && data.length > 0) {
+        data.forEach((item: any) => {
+            if (item.name === '男性') {
+                seriesDataMan = item.data
+            } else if (item.name === '女性') {
+                seriesDataWoman = item.data
+            }
+        })
+    }
+
+
+    let res: any = {
+        // category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
+        category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
+        seriesDataMan: seriesDataMan,// 男生
+        seriesDataWoman: seriesDataWoman// 女生
+    }
+
+
+    let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
+    if (CustomerAgeGroupAI) { } else {
+        let aiRes: any = {}
+
+        for (let i = 0; i < res.category.length; i++) {
+            aiRes[res.category[i]] = {
+                "男性": seriesDataMan[i] + '%',
+                "女性": seriesDataWoman[i] + '%',
+            }
+        }
+        sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
+    }
+
+    return res
+}
+
+// 重绘所有图表的方法
+const resizeAllCharts = () => {
+    // 获取当前显示的tab下的所有echarts实例
+    const charts = document.querySelectorAll(`#CustomerAgeGroup`)
+    charts.forEach(chart => {
+        const instance = echarts.getInstanceByDom(chart as HTMLElement)
+        if (instance) {
+            instance.resize()
+        }
+    })
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+
+onUnmounted(() => {
+    window.removeEventListener('resize', resizeAllCharts)
+})
+
+const handleSetConfig = (res: any) => {
     const option = {
         tooltip: {  // 新增 tooltip 配置
             trigger: 'axis',  // 触发类型：坐标轴触发
@@ -170,111 +276,23 @@ onMounted(async () => {
             }
         },
     };
-
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-})
-
-// 拿到年龄数据
-const handleGetData = async () => {
-    let category: any = []
-    let seriesData: any = []
-    let percentData: any = []
-
-    const req: any = {
-        provinceCode: '530000',
-        statisticsMonth: moment(moment().subtract(1, 'M')).format('YYYYMM'),
-    }
-
-
-
-    let CustomerAgeGroup = sessionStorage.getItem('CustomerAgeGroup')
-    let data: any = []
-    if (CustomerAgeGroup) {
-        data = JSON.parse(CustomerAgeGroup)
-    } else {
-        data = await handleGetCustomerAgeRatio(req)
-        sessionStorage.setItem("CustomerAgeGroup", JSON.stringify(data))
-    }
-
-
-    // const data = await handleGetCustomerAgeRatio(req)
-
-    console.log('fdisfsauifhdsaj', data);
-
-    // for (let i = 0; i < 4; i++) {
-    //     let sum: number = (data[0].data[i] + data[1].data[i])
-    //     seriesData.push(sum.toFixed(2))
-    //     percentData.push((sum / 200 * 100).toFixed(2))
-    // }
-
-    // 男生
-    let seriesDataMan: number[] = []
-    // 女生
-    let seriesDataWoman: number[] = []
-    if (data && data.length > 0) {
-        data.forEach((item: any) => {
-            if (item.name === '男性') {
-                seriesDataMan = item.data
-            } else if (item.name === '女性') {
-                seriesDataWoman = item.data
-            }
-        })
-    }
-
-
-    let res: any = {
-        // category: ["25以下", "25-35", "35-45", "45以上"],// x轴的内容
-        category: ["20岁", "30岁", "40岁", "50以上"],// x轴的内容
-        seriesDataMan: seriesDataMan,// 男生
-        seriesDataWoman: seriesDataWoman// 女生
-    }
-
-
-    let CustomerAgeGroupAI = sessionStorage.getItem('CustomerAgeGroupAI')
-    if (CustomerAgeGroupAI) { } else {
-        let aiRes: any = {}
-
-        for (let i = 0; i < res.category.length; i++) {
-            aiRes[res.category[i]] = {
-                "男性": seriesDataMan[i] + '%',
-                "女性": seriesDataWoman[i] + '%',
-            }
-        }
-        sessionStorage.setItem("CustomerAgeGroupAI", JSON.stringify(aiRes))
-    }
-
-    return res
+    return option
 }
 
-// 重绘所有图表的方法
-const resizeAllCharts = () => {
-    // 获取当前显示的tab下的所有echarts实例
-    const charts = document.querySelectorAll(`#CustomerAgeGroup`)
-    charts.forEach(chart => {
-        const instance = echarts.getInstanceByDom(chart as HTMLElement)
-        if (instance) {
-            instance.resize()
-        }
-    })
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
 }
 
-const resizeChart = () => {
-    myChart?.resize();
-};
-
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    myChart?.dispose();
+defineExpose({
+    handleUpdatePie
 });
 
-
-onUnmounted(() => {
-    window.removeEventListener('resize', resizeAllCharts)
-})
-
 </script>
 
 <template>
diff --git a/src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue b/src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue
index 5371e36..32a306b 100644
--- a/src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue
+++ b/src/page/index/components/CustomerConsumptionPreferences/CustomerConsumptionPreferences.vue
@@ -54,6 +54,80 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    window.addEventListener('resize', resizeChart);
+}
+
+const handleGetData = async () => {
+    // const req: any = {
+    //     statisticsType: 1,
+    //     startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
+    //     endMonth: moment().subtract(1, 'm').format('YYYYMM'),
+    //     provinceCode: '530000',
+    //     serverpartId: props.currentService?.SERVERPART_ID || "",
+    //     sortStr: 'TOTAL_COUNT desc'
+    // } 
+
+    const req: any = {
+        ProvinceCode: '530000',
+        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+        // StatisticsDate: '2025-04-30',
+        // BusinessTradeIds: -1,
+        ServerpartId: props.currentService?.SERVERPART_ID || ""
+    }
+
+
+    let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
+    let data: any = []
+    if (CustomerConsumptionPreferences) {
+        data = JSON.parse(CustomerConsumptionPreferences)
+    } else {
+        // data = await handleGetCustomerSaleRatio(req)
+        data = await handleGetBusinessTradeRevenue(req)
+        sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
+    }
+
+    // const data = await handleGetCustomerSaleRatio(req)
+
+
+    let category: string[] = []
+    let seriesData: number[] = []
+    let realData: string[] = []
+
+    let aiObj: any = {}
+
+    // CustomerSaleList
+    if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
+        let list = data.BusinessTradeRank.slice(0, 10)
+        list.forEach((item: any) => {
+            category.push(item.name)
+            seriesData.push(item.value)
+            realData.push(item.value)
+            aiObj[item.name] = `占比${item.value}%`
+        })
+    }
+
+    let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
+    if (CustomerConsumptionPreferencesAI) { } else {
+
+        sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
+    }
+
+
+    return {
+        category: category,
+        seriesData: seriesData,
+        realData: realData,
+    }
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+const handleSetConfig = (res: any) => {
     const option = {
         xAxis: {
             type: 'category',
@@ -153,84 +227,27 @@ const handleGoMounted = async () => {
             }
         },
     };
-
-
-    myChart.setOption(option);
-    window.addEventListener('resize', resizeChart);
+    return option
 }
 
-const handleGetData = async () => {
-    // const req: any = {
-    //     statisticsType: 1,
-    //     startMonth: moment().subtract(1, 'd').startOf('y').format('YYYYMM'),
-    //     endMonth: moment().subtract(1, 'm').format('YYYYMM'),
-    //     provinceCode: '530000',
-    //     serverpartId: props.currentService?.SERVERPART_ID || "",
-    //     sortStr: 'TOTAL_COUNT desc'
-    // } 
-
-    const req: any = {
-        ProvinceCode: '530000',
-        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
-        // StatisticsDate: '2025-04-30',
-        // BusinessTradeIds: -1,
-        ServerpartId: props.currentService?.SERVERPART_ID || ""
-    }
-
-
-    let CustomerConsumptionPreferences = sessionStorage.getItem('CustomerConsumptionPreferences')
-    let data: any = []
-    if (CustomerConsumptionPreferences) {
-        data = JSON.parse(CustomerConsumptionPreferences)
-    } else {
-        // data = await handleGetCustomerSaleRatio(req)
-        data = await handleGetBusinessTradeRevenue(req)
-        sessionStorage.setItem("CustomerConsumptionPreferences", JSON.stringify(data))
-    }
-
-    // const data = await handleGetCustomerSaleRatio(req)
-
-
-    let category: string[] = []
-    let seriesData: number[] = []
-    let realData: string[] = []
-
-    let aiObj: any = {}
-
-// CustomerSaleList
-    if (data.BusinessTradeRank && data.BusinessTradeRank.length > 0) {
-        let list = data.BusinessTradeRank.slice(0, 10)
-        list.forEach((item: any) => {
-            category.push(item.name)
-            seriesData.push(item.value)
-            realData.push(item.value)
-            aiObj[item.name] = `占比${item.value}%`
-        })
-    }
-
-    let CustomerConsumptionPreferencesAI = sessionStorage.getItem('CustomerConsumptionPreferencesAI')
-    if (CustomerConsumptionPreferencesAI) { } else {
-
-        sessionStorage.setItem("CustomerConsumptionPreferencesAI", JSON.stringify(aiObj))
-    }
-
-
-    return {
-        category: category,
-        seriesData: seriesData,
-        realData: realData,
-    }
-}
-
-const resizeChart = () => {
-    myChart?.resize();
-};
-
 onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeChart);
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
+
 </script>
 
 <template>
diff --git a/src/page/index/components/CustomerGroup/CustomerGroup.vue b/src/page/index/components/CustomerGroup/CustomerGroup.vue
index 1dc4a08..6530b31 100644
--- a/src/page/index/components/CustomerGroup/CustomerGroup.vue
+++ b/src/page/index/components/CustomerGroup/CustomerGroup.vue
@@ -57,7 +57,78 @@ const handleShowCharts = async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
 
+
+    myChart.setOption(option);
+    window.addEventListener('resize', resizeChart);
+}
+
+const handleGetData = async () => {
+    const req: any = {
+        provinceCode: "530000",
+        statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
+        serverpartId: props.currentService?.SERVERPART_ID || "",
+    }
+
+    let CustomerGroup = sessionStorage.getItem('CustomerGroup')
+    let data: any = []
+    if (CustomerGroup) {
+        data = JSON.parse(CustomerGroup)
+    } else {
+        data = await handleGetCustomerGroupRatio(req)
+        sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
+    }
+
+
+    // const data = await handleGetCustomerGroupRatio(req)
+
+    let res: any = []
+    let aiObj: any = {}
+
+    if (data && data.length > 0) {
+        data.forEach((item: any) => {
+            // let list: any = []
+            let obj: any = {}
+            if (item.data && item.data.length > 0) {
+                item.data.forEach((subItem: any) => {
+                    subItem.push(item.name)
+                    res.push(subItem)
+                    obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
+                })
+            }
+            aiObj[item.name] = obj
+            // res.push(list)
+        })
+    }
+
+
+    let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
+    if (CustomerGroupAI) { } else {
+        sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
+    }
+
+
+    return res
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+// 重绘所有图表的方法
+const resizeAllCharts = () => {
+    // 获取当前显示的tab下的所有echarts实例
+    const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
+    charts.forEach(chart => {
+        const instance = echarts.getInstanceByDom(chart as HTMLElement)
+        if (instance) {
+            instance.resize()
+        }
+    })
+}
+
+const handleSetConfig = (res: any) => {
     const option = {
         grid: {
             left: '0',
@@ -157,81 +228,26 @@ const handleShowCharts = async () => {
             }
         }
     };
-
-    myChart.setOption(option);
-    window.addEventListener('resize', resizeChart);
+    return option
 }
 
-const handleGetData = async () => {
-    const req: any = {
-        provinceCode: "530000",
-        statisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
-        serverpartId: props.currentService?.SERVERPART_ID || "",
-    }
-
-    let CustomerGroup = sessionStorage.getItem('CustomerGroup')
-    let data: any = []
-    if (CustomerGroup) {
-        data = JSON.parse(CustomerGroup)
-    } else {
-        data = await handleGetCustomerGroupRatio(req)
-        sessionStorage.setItem("CustomerGroup", JSON.stringify(data))
-    }
-
-
-    // const data = await handleGetCustomerGroupRatio(req)
-
-    let res: any = []
-    let aiObj: any = {}
-
-    if (data && data.length > 0) {
-        data.forEach((item: any) => {
-            // let list: any = []
-            let obj: any = {}
-            if (item.data && item.data.length > 0) {
-                item.data.forEach((subItem: any) => {
-                    subItem.push(item.name)
-                    res.push(subItem)
-                    obj[`${subItem[0]}岁`] = `交易金额${subItem[1]}元，占比${subItem[2]}%`
-                })
-            }
-            aiObj[item.name] = obj
-            // res.push(list)
-        })
-    }
-
-
-    let CustomerGroupAI = sessionStorage.getItem('CustomerGroupAI')
-    if (CustomerGroupAI) { } else {
-        sessionStorage.setItem("CustomerGroupAI", JSON.stringify(aiObj))
-    }
-
-
-    return res
-}
-
-const resizeChart = () => {
-    myChart?.resize();
-};
-
-// 重绘所有图表的方法
-const resizeAllCharts = () => {
-    // 获取当前显示的tab下的所有echarts实例
-    const charts = document.querySelectorAll(`#CustomerGroupBoxContent`)
-    charts.forEach(chart => {
-        const instance = echarts.getInstanceByDom(chart as HTMLElement)
-        if (instance) {
-            instance.resize()
-        }
-    })
-}
-
-
-
 onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
+
 </script>
 
 
diff --git a/src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue b/src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue
index 3d8871b..1ebd7dc 100644
--- a/src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue
+++ b/src/page/index/components/FestivalRevenueSumInfo/FestivalRevenueSumInfo.vue
@@ -67,76 +67,7 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        tooltip: {
-            trigger: 'item',
-            formatter: '{b}'
-        },
-        legend: [  // 使用两个legend对象分别控制
-            // 第一行：外圈圆环图例
-            {
-                data: res.bigType.map((name: string) => ({
-                    name,
-                    icon: 'circle'
-                })),
-                orient: 'horizontal',
-                top: 'bottom',
-                left: 'center',
-                padding: [0, 0, 60, 0],  // 下边距为内圈图例留空间
-                textStyle: { color: '#fff' }
-            },
-            // 第二行：内圈饼图图例
-            {
-                data: res.smallType.map((name: string) => ({
-                    name,
-                    icon: 'rect'
-                })),
-                orient: 'horizontal',
-                top: 'bottom',
-                left: 'center',
-                textStyle: { color: '#fff' },
-                padding: [0, 0, 0, 0],  // 下边距为内圈图例留空间
-            }
-        ],
-        series: [
-            // 外圈环形图
-            {
-                name: '外圈数据',
-                type: 'pie',
-                radius: ['55%', '65%'],
-                center: ['50%', '35%'],  // 稍微上移给图例留空间
-                data: res.bigData.map((item: any, index: any) => ({
-                    ...item,
-                    itemStyle: { color: bigDataColor[index] } // 自定义颜色
-                })),
-                // data: [
-                //     { value: 335, name: 'A类' },
-                //     { value: 310, name: 'B类' },
-                //     { value: 234, name: 'C类' },
-                //     { value: 135, name: 'D类' }
-                // ],
-                label: { show: false }
-            },
-            // 内圈饼图
-            {
-                name: '内圈数据',
-                type: 'pie',
-                radius: ['0%', '40%'],
-                center: ['50%', '35%'],  // 与外圈同中心
-                data: res.smallData.map((item: any, index: any) => ({
-                    ...item,
-                    itemStyle: { color: smallDataColor[index] } // 自定义颜色
-                })),
-                // data: [
-                //     { value: 100, name: '子类1' },
-                //     { value: 200, name: '子类2' },
-                //     { value: 300, name: '子类3' }
-                // ],
-                label: { show: false }
-            }
-        ]
-    };
-
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -218,6 +149,90 @@ onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeChart);
     myChart?.dispose();
 });
+const handleSetConfig = (res: any) => {
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}'
+        },
+        legend: [  // 使用两个legend对象分别控制
+            // 第一行：外圈圆环图例
+            {
+                data: res.bigType.map((name: string) => ({
+                    name,
+                    icon: 'circle'
+                })),
+                orient: 'horizontal',
+                top: 'bottom',
+                left: 'center',
+                padding: [0, 0, 60, 0],  // 下边距为内圈图例留空间
+                textStyle: { color: '#fff' }
+            },
+            // 第二行：内圈饼图图例
+            {
+                data: res.smallType.map((name: string) => ({
+                    name,
+                    icon: 'rect'
+                })),
+                orient: 'horizontal',
+                top: 'bottom',
+                left: 'center',
+                textStyle: { color: '#fff' },
+                padding: [0, 0, 0, 0],  // 下边距为内圈图例留空间
+            }
+        ],
+        series: [
+            // 外圈环形图
+            {
+                name: '外圈数据',
+                type: 'pie',
+                radius: ['55%', '65%'],
+                center: ['50%', '35%'],  // 稍微上移给图例留空间
+                data: res.bigData.map((item: any, index: any) => ({
+                    ...item,
+                    itemStyle: { color: bigDataColor[index] } // 自定义颜色
+                })),
+                // data: [
+                //     { value: 335, name: 'A类' },
+                //     { value: 310, name: 'B类' },
+                //     { value: 234, name: 'C类' },
+                //     { value: 135, name: 'D类' }
+                // ],
+                label: { show: false }
+            },
+            // 内圈饼图
+            {
+                name: '内圈数据',
+                type: 'pie',
+                radius: ['0%', '40%'],
+                center: ['50%', '35%'],  // 与外圈同中心
+                data: res.smallData.map((item: any, index: any) => ({
+                    ...item,
+                    itemStyle: { color: smallDataColor[index] } // 自定义颜色
+                })),
+                // data: [
+                //     { value: 100, name: '子类1' },
+                //     { value: 200, name: '子类2' },
+                //     { value: 300, name: '子类3' }
+                // ],
+                label: { show: false }
+            }
+        ]
+    };
+    return option
+}
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetRealData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
diff --git a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue
index bcc7364..9d44f4f 100644
--- a/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue
+++ b/src/page/index/components/GenderCustomerGroup/GenderCustomerGroup.vue
@@ -4,7 +4,7 @@ import './GenderCustomerGroup.less'
 import { onMounted, onBeforeUnmount } from 'vue';
 import * as echarts from 'echarts/core';
 import { PieChart } from 'echarts/charts';
-import { 
+import {
     GridComponent,
     TitleComponent,
     TooltipComponent,
@@ -37,82 +37,7 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
-    const rect = chartDom.getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
-
-    // 计算center位置（20%，50%）对应的实际像素
-    const centerX = width * 0.5;
-    const centerY = height * 0.65;
-
-
-    const option = {
-        tooltip: {
-            trigger: 'item',
-            backgroundColor: '#fff',  // 白色背景
-            borderColor: '#fff',     // 白色边框
-            textStyle: {
-                color: '#333',       // 文字颜色
-                fontSize: 14
-            },
-            formatter: function (params: any) {
-                return `
-                <div style="font-weight:bold">${params.name}</div>
-            `;
-                //   ${params.value}%
-            }
-        },
-        graphic: {  // 关键配置：在图表中心添加图片
-            elements: [
-                {
-                    type: 'image',
-                    style: {
-                        image: GenderCenter,
-                        width: 60,
-                        height: 60
-                    },
-                    left: centerX - 30,
-                    top: centerY - 30,
-                    z: 10
-                }
-            ]
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['60%', '70%'], 
-                center: ['50%', '65%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    color: function (params: any) {
-                        // 自定义颜色列表
-                        const colorList = ['#0094FF', '#FF5E5E'];
-                        return colorList[params.dataIndex];
-                    }
-                },
-                label: {
-                    show: false
-                },
-                emphasis: false,
-                labelLine: {
-                    show: false
-                },
-                data: res.seriesData
-            }
-        ],
-        legend: {
-            data: res.legendData,
-            // bottom: 0,
-            // left: 'center',
-            top: 0,
-            right: 0,
-            orient: 'horizontal', // 水平排列（默认值，可省略）
-            textStyle: {
-                color: '#fff'
-            },
-        }
-    };
+    const option = handleSetConfig(res)
 
 
     myChart.setOption(option);
@@ -181,6 +106,100 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+
+const handleSetConfig = (res: any) => {
+    const chartDom = document.getElementById('GenderCustomerGroup');
+    if (!chartDom) return {};
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.5;
+    const centerY = height * 0.65;
+    const option = {
+        tooltip: {
+            trigger: 'item',
+            backgroundColor: '#fff',  // 白色背景
+            borderColor: '#fff',     // 白色边框
+            textStyle: {
+                color: '#333',       // 文字颜色
+                fontSize: 14
+            },
+            formatter: function (params: any) {
+                return `
+                <div style="font-weight:bold">${params.name}</div>
+            `;
+                //   ${params.value}%
+            }
+        },
+        graphic: {  // 关键配置：在图表中心添加图片
+            elements: [
+                {
+                    type: 'image',
+                    style: {
+                        image: GenderCenter,
+                        width: 60,
+                        height: 60
+                    },
+                    left: centerX - 30,
+                    top: centerY - 30,
+                    z: 10
+                }
+            ]
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['60%', '70%'],
+                center: ['50%', '65%'],  // 关键修改：强制居中 [水平位置, 垂直位置]
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    color: function (params: any) {
+                        // 自定义颜色列表
+                        const colorList = ['#0094FF', '#FF5E5E'];
+                        return colorList[params.dataIndex];
+                    }
+                },
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                data: res.seriesData
+            }
+        ],
+        legend: {
+            data: res.legendData,
+            // bottom: 0,
+            // left: 'center',
+            top: 0,
+            right: 0,
+            orient: 'horizontal', // 水平排列（默认值，可省略）
+            textStyle: {
+                color: '#fff'
+            },
+        }
+    };
+    return option
+}
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetSectionFlowCount()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
+
 </script>
 
 
diff --git a/src/page/index/components/HotProductList/HotProductList.vue b/src/page/index/components/HotProductList/HotProductList.vue
index 9363062..dc8a897 100644
--- a/src/page/index/components/HotProductList/HotProductList.vue
+++ b/src/page/index/components/HotProductList/HotProductList.vue
@@ -43,6 +43,68 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+
+    myChart.setOption(option);
+    window.addEventListener('resize', resizeChart);
+});
+
+// 拿到热门商品榜单
+const handleGetData = async () => {
+
+    let category: string[] = []
+    let seriesData: number[] = []
+    let realData: string[] = []
+
+
+    const req: any = {
+        action_type: "getCommoditySaleSort",
+        province_code: 5564,
+        rowNum: props?.pageType === 'left' ? 5 : 10
+    }
+
+    let HotProductList = sessionStorage.getItem('HotProductList')
+    let data: any = []
+    if (HotProductList) {
+        data = JSON.parse(HotProductList)
+    } else {
+        data = await handleGetSalesRank(req)
+        sessionStorage.setItem("HotProductList", JSON.stringify(data))
+    }
+
+    // const data = await handleGetSalesRank(req)
+
+    let list: any = data.COMMODITYSALE_DESC
+    list.reverse()
+    if (list && list.length > 0) {
+        list.forEach((item: any) => {
+            category.push(item.COMMODITY_NAME)
+            seriesData.push(item.SELLCOUNT)
+        })
+    }
+
+
+    let res = {
+        category: category,// x轴的内容
+        seriesData: seriesData,// y轴的数据
+        realData: realData
+    }
+
+
+    return res
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+const handleSetConfig = (res: any) => {
     const option = {
         yAxis: {  // 改为 yAxis 显示分类数据
             type: 'category',
@@ -118,64 +180,20 @@ onMounted(async () => {
             //  + '笔'
         }
     };
-
-
-    myChart.setOption(option);
-    window.addEventListener('resize', resizeChart);
-});
-
-// 拿到热门商品榜单
-const handleGetData = async () => {
-
-    let category: string[] = []
-    let seriesData: number[] = []
-    let realData: string[] = []
-
-
-    const req: any = {
-        action_type: "getCommoditySaleSort",
-        province_code: 5564,
-        rowNum: props?.pageType === 'left' ? 5 : 10
-    }
-
-    let HotProductList = sessionStorage.getItem('HotProductList')
-    let data: any = []
-    if (HotProductList) {
-        data = JSON.parse(HotProductList)
-    } else {
-        data = await handleGetSalesRank(req)
-        sessionStorage.setItem("HotProductList", JSON.stringify(data))
-    }
-
-    // const data = await handleGetSalesRank(req)
-
-    let list: any = data.COMMODITYSALE_DESC
-    list.reverse()
-    if (list && list.length > 0) {
-        list.forEach((item: any) => {
-            category.push(item.COMMODITY_NAME)
-            seriesData.push(item.SELLCOUNT)
-        })
-    }
-
-
-    let res = {
-        category: category,// x轴的内容
-        seriesData: seriesData,// y轴的数据
-        realData: realData
-    }
-
-
-    return res
+    return option
 }
 
-const resizeChart = () => {
-    myChart?.resize();
-};
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
 
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    myChart?.dispose();
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
 });
 </script>
 
diff --git a/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue b/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue
index 5aeadba..ba5ff74 100644
--- a/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue
+++ b/src/page/index/components/MallOrderStatistics/MallOrderStatistics.vue
@@ -37,6 +37,75 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+// 修改选择的季月年
+const handleChangeType = async (value: number) => {
+    selectType.value = value
+}
+
+const handleGetData = async () => {
+
+    let category: string[] = []
+    let TicketCountData: number[] = [] // 订单笔数
+    let SellAmountData: string[] = [] // 交易金额
+
+    const req: any = {
+        DataType: 2,// 1 日度  2 月度
+        ProvinceCode: '530000',
+        StartMonth: moment().startOf('y').format('YYYYMM'),
+        EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
+    }
+
+    console.log('dkosajdaihfysudafhs', req);
+
+    // const data = await handleGetMallOrderSummary(req)
+
+    let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
+    let data: any = []
+    if (MallOrderStatistics) {
+        data = JSON.parse(MallOrderStatistics)
+    } else {
+        data = await handleGetMallOrderSummary(req)
+        sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
+    }
+
+
+
+    console.log('gjisayudshfsdafdfdasfasd', data);
+
+    if (data && data.length > 0) {
+        data.forEach((item: any) => {
+            category.push(`${item.StatisticsMonth}月`)
+            TicketCountData.push(item.TicketCount)
+            SellAmountData.push(item.SellAmount)
+        })
+    }
+
+
+    let res: any = {
+        category: category,// x轴的内容
+        TicketCountData: TicketCountData,// 订单笔数
+        SellAmountData: SellAmountData// 交易金额
+    }
+    return res
+}
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+const handleSetConfig = (res: any) => {
     const option = {
         xAxis: {
             type: 'category',
@@ -133,79 +202,26 @@ onMounted(async () => {
         },
         color: ['#FF5E5E', '#FF9500']
     };
-
-
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-})
-
-// 修改选择的季月年
-const handleChangeType = async (value: number) => {
-    selectType.value = value
+    return option
 }
 
-const handleGetData = async () => {
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
 
-    let category: string[] = []
-    let TicketCountData: number[] = [] // 订单笔数
-    let SellAmountData: string[] = [] // 交易金额
-
-    const req: any = {
-        DataType: 2,// 1 日度  2 月度
-        ProvinceCode: '530000',
-        StartMonth: moment().startOf('y').format('YYYYMM'),
-        EndMonth: moment().subtract(1, 'M').format('YYYYMM'),
-    }
-
-    console.log('dkosajdaihfysudafhs', req);
-
-    // const data = await handleGetMallOrderSummary(req)
-
-    let MallOrderStatistics = sessionStorage.getItem('MallOrderStatistics')
-    let data: any = []
-    if (MallOrderStatistics) {
-        data = JSON.parse(MallOrderStatistics)
-    } else {
-        data = await handleGetMallOrderSummary(req)
-        sessionStorage.setItem("MallOrderStatistics", JSON.stringify(data))
-    }
-
-
-
-    console.log('gjisayudshfsdafdfdasfasd', data);
-
-    if (data && data.length > 0) {
-        data.forEach((item: any) => {
-            category.push(`${item.StatisticsMonth}月`)
-            TicketCountData.push(item.TicketCount)
-            SellAmountData.push(item.SellAmount)
-        })
-    }
-
-
-    let res: any = {
-        category: category,// x轴的内容
-        TicketCountData: TicketCountData,// 订单笔数
-        SellAmountData: SellAmountData// 交易金额
-    }
-    return res
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
 }
-
-const resizeChart = () => {
-    myChart?.resize();
-};
-
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    myChart?.dispose();
+defineExpose({
+    handleUpdatePie
 });
 
 </script>
 
 
-<template> 
+<template>
     <div class="MallOrderStatisticsBox">
         <SmallTitle :title="'商城订单统计'">
             <!-- <template #extra>
diff --git a/src/page/index/components/OverviewOfServiceArea/OverviewOfServiceArea.vue b/src/page/index/components/OverviewOfServiceArea/OverviewOfServiceArea.vue
index c36cf4b..13c8f8a 100644
--- a/src/page/index/components/OverviewOfServiceArea/OverviewOfServiceArea.vue
+++ b/src/page/index/components/OverviewOfServiceArea/OverviewOfServiceArea.vue
@@ -21,8 +21,9 @@ const handleGetData = async () => {
         ProvinceCode: "530000",
     }
 
-
     let OverviewOfServiceArea = sessionStorage.getItem('OverviewOfServiceArea')
+    console.log('OverviewOfServiceArea', OverviewOfServiceArea);
+
     let data: any = []
     if (OverviewOfServiceArea) {
         data = JSON.parse(OverviewOfServiceArea)
@@ -30,7 +31,6 @@ const handleGetData = async () => {
         data = await handleGetServerpartServiceSummary(req)
         sessionStorage.setItem("OverviewOfServiceArea", JSON.stringify(data))
     }
-
     console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data);
 
     // 因为之前不是这个接口 已经写了一份 为了不做过多的修改 按照老的 赋值走
@@ -60,6 +60,8 @@ const handleGetData = async () => {
     let WaterCount: number = data.WaterCount
     // 休息区数量
     let RestAreaCount: number = data.RestAreaCount
+    // 关停
+    let shutDown: number = data.ClosedCountCount
     // 总数
     let ServerpartTotalCount: number = data.ServerpartTotalCount
 
@@ -75,6 +77,7 @@ const handleGetData = async () => {
             "加水站": data.WaterStationCount,
             "观景台": data.ViewingDeckCount,
             "休息区": data.RestAreaCount,
+            "关停": data.shutDown,
             "加油站": data.REFUELINGGUNTotal,
             "充电桩": data.ChargingStationTotal,
             "司机之家": data.HASPILOTLOUNGETotal,
@@ -150,7 +153,8 @@ const handleGetData = async () => {
         ParkingServiceCount: ParkingServiceCount,
         WaterCount: WaterCount,
         ServerpartTotalCount: ServerpartTotalCount,
-        RestAreaCount: RestAreaCount
+        RestAreaCount: RestAreaCount,
+        shutDown: shutDown
     }
     console.log('fdjsifjasjfs', res);
 
@@ -214,6 +218,10 @@ const handleGetData = async () => {
 }
 
 
+defineExpose({
+    handleGetData
+});
+
 </script>
 
 
@@ -241,15 +249,16 @@ const handleGetData = async () => {
                     <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #ef5a0d;">{{
                         serviceInfo?.ParkingServiceCount || "0" }}</div>
                 </div>
-            </div>
-
-
-            <div class="OverviewOfServiceAreaContentTop">
-                <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
+                <div class="OverviewOfServiceAreaContentTopItem">
                     <div class="OverviewOfServiceAreaContentTopItemLabel">加水站/座</div>
                     <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #1aba80;">{{
                         serviceInfo?.WaterStationCount || "0" }}</div>
                 </div>
+            </div>
+
+
+            <div class="OverviewOfServiceAreaContentTop">
+
                 <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
                     <div class="OverviewOfServiceAreaContentTopItemLabel">观景台/座</div>
                     <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #f41a09;">{{
@@ -260,6 +269,11 @@ const handleGetData = async () => {
                     <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #b5ebf7;">{{
                         serviceInfo?.RestAreaCount || "0" }}</div>
                 </div>
+                <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
+                    <div class="OverviewOfServiceAreaContentTopItemLabel">关停/座</div>
+                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #fff;">{{
+                        serviceInfo?.shutDown || "0" }}</div>
+                </div>
             </div>
 
 
@@ -269,12 +283,12 @@ const handleGetData = async () => {
                 <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">加油站/座</div>
                     <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.REFUELINGGUNTotal || "0"
-                    }}</div>
+                        }}</div>
                 </div>
                 <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">充电桩/座</div>
                     <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ChargingStationTotal || "0"
-                    }}</div>
+                        }}</div>
                 </div>
                 <!-- <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">停车位/座</div>
@@ -289,17 +303,17 @@ const handleGetData = async () => {
                 <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">母婴室/座</div>
                     <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.NursingRoomTotal || "0"
-                    }}</div>
+                        }}</div>
                 </div>
                 <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">尿素/座</div>
                     <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.URECOUNTTotal || "0"
-                    }}</div>
+                        }}</div>
                 </div>
                 <div class="OverviewOfServiceAreaContentBottomItem">
                     <div class="OverviewOfServiceAreaContentBottomItemLabel">加水/座</div>
                     <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.WaterCount || "0"
-                    }}</div>
+                        }}</div>
                 </div>
             </div>
         </div>
diff --git a/src/page/index/components/PreferenceType/PreferenceType.vue b/src/page/index/components/PreferenceType/PreferenceType.vue
index 17bccfd..c32bdc4 100644
--- a/src/page/index/components/PreferenceType/PreferenceType.vue
+++ b/src/page/index/components/PreferenceType/PreferenceType.vue
@@ -36,96 +36,7 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        tooltip: { // 新增 tooltip 配置
-            trigger: 'item',
-            formatter: function (params: any) {
-                console.log('params', params);
-                let str: string = `<div>${params?.seriesName}：</div>`
-                for (let i = 0; i < res.category.length; i++) {
-                    str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
-                    // list.push({ label: res.category[i], value: params.value + '%' })
-                }
-                return `<div>${str}</div>
-            `;
-            }
-        },
-        radar: {
-            indicator: res.category,
-            shape: 'circle',
-            splitNumber: 5,
-            radius: '60%', // 调整雷达图大小，留出空间给文字
-            center: ['50%', '65%'], // 2. 确保居中
-            axisName: {
-                color: 'rgb(255, 255, 255)',
-                padding: 10
-            },
-            splitLine: {
-                lineStyle: {
-                    color: [
-                        'rgba(25, 46, 76, 1)',
-                        'rgba(25, 46, 76, 1)',
-                        'rgba(25, 46, 76, 1)',
-                        'rgba(25, 46, 76, 1)',
-                        'rgba(25, 46, 76, 1)',
-                        'rgba(25, 46, 76, 1)',
-                    ]
-                }
-            },
-            splitArea: {
-                show: false
-            },
-            axisLine: {
-                lineStyle: {
-                    color: 'rgba(25, 46, 76, 1)',
-                }
-            }
-        },
-        series: [
-            {
-                name: "男性",
-                type: 'radar',
-                lineStyle: {
-                    width: 1,
-                    opacity: 0.5
-                },
-                data: res.seriesData,
-                symbol: 'none',
-                itemStyle: {
-                    color: '#0094FF'
-                },
-                areaStyle: {
-                    opacity: 0.1
-                }
-            },
-            {
-                name: "女性",
-                type: 'radar',
-                lineStyle: {
-                    width: 1,
-                    opacity: 0.5
-                },
-                data: res.seriesDataMan,
-                symbol: 'none',
-                itemStyle: {
-                    color: '#FF5E5E'
-                },
-                areaStyle: {
-                    opacity: 0.1
-                }
-            }
-        ],
-        legend: {
-            data: ['男性', '女性'],
-            textStyle: {
-                color: '#fff'
-            },
-            top: 0,
-            right: 0
-            // bottom: -5,
-            // left: 'center',
-        },
-    };
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -235,6 +146,112 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleSetConfig = (res: any) => {
+    const option = {
+        tooltip: { // 新增 tooltip 配置
+            trigger: 'item',
+            formatter: function (params: any) {
+                console.log('params', params);
+                let str: string = `<div>${params?.seriesName}：</div>`
+                for (let i = 0; i < res.category.length; i++) {
+                    str += `<div>${res.category[i].name}：${params.value[i]}%</div>`
+                    // list.push({ label: res.category[i], value: params.value + '%' })
+                }
+                return `<div>${str}</div>
+            `;
+            }
+        },
+        radar: {
+            indicator: res.category,
+            shape: 'circle',
+            splitNumber: 5,
+            radius: '60%', // 调整雷达图大小，留出空间给文字
+            center: ['50%', '65%'], // 2. 确保居中
+            axisName: {
+                color: 'rgb(255, 255, 255)',
+                padding: 10
+            },
+            splitLine: {
+                lineStyle: {
+                    color: [
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                        'rgba(25, 46, 76, 1)',
+                    ]
+                }
+            },
+            splitArea: {
+                show: false
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(25, 46, 76, 1)',
+                }
+            }
+        },
+        series: [
+            {
+                name: "男性",
+                type: 'radar',
+                lineStyle: {
+                    width: 1,
+                    opacity: 0.5
+                },
+                data: res.seriesData,
+                symbol: 'none',
+                itemStyle: {
+                    color: '#0094FF'
+                },
+                areaStyle: {
+                    opacity: 0.1
+                }
+            },
+            {
+                name: "女性",
+                type: 'radar',
+                lineStyle: {
+                    width: 1,
+                    opacity: 0.5
+                },
+                data: res.seriesDataMan,
+                symbol: 'none',
+                itemStyle: {
+                    color: '#FF5E5E'
+                },
+                areaStyle: {
+                    opacity: 0.1
+                }
+            }
+        ],
+        legend: {
+            data: ['男性', '女性'],
+            textStyle: {
+                color: '#fff'
+            },
+            top: 0,
+            right: 0
+            // bottom: -5,
+            // left: 'center',
+        },
+    };
+    return option
+}
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetSectionFlowCount()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
diff --git a/src/page/index/components/RegionalRevenue/RegionalRevenue.vue b/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
index 392e63f..c7b2755 100644
--- a/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
+++ b/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
@@ -63,70 +63,7 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
-    const option = {
-        tooltip: {  // 新增 tooltip 配置
-            trigger: 'item',  // 触发类型：坐标轴触发
-            axisPointer: {    // 坐标轴指示器配置
-                type: 'shadow' // 阴影指示器（适合柱状图）
-            },
-            formatter: function (params: any) {  // 自定义提示框内容
-                return `
-                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex].toLocaleString()}元</div>
-                `;
-            }
-        },
-        series: [
-            {
-                name: 'Access From',
-                type: 'pie',
-                radius: ['0%', '70%'],
-                center: ['20%', '50%'], // 图形向左偏移
-                avoidLabelOverlap: false,
-                itemStyle: {
-                    color: function (params: any) {
-                        return colorList[params.dataIndex];
-                    }
-                },
-                label: {
-                    show: false
-                },
-                emphasis: false,
-                labelLine: {
-                    show: false
-                }, 
-                data: res.pieData
-            }
-        ],
-        legend: {
-            orient: 'vertical',
-            left: 200,
-            top: 'center',
-            align: 'left',
-            itemGap: 10,
-            itemWidth: 12,
-            itemHeight: 12,
-            textStyle: {
-                color: '#fff',
-                rich: {
-                    name: {
-                        width: 90,  // 固定名称宽度
-                        align: 'left',
-                        padding: [0, 10, 0, 0]
-                    },
-                    percent: {
-                        width: 50,    // 固定百分比宽度
-                        align: 'right',
-                        padding: [0, 10, 0, 0]
-                    }
-                }
-            },
-            formatter: function (name: any) {
-                let percentData: any = res.lengedData.filter((item: any) => item.name === name)
-
-                return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
-            }
-        }
-    };
+    const option = handleSetConfig(res)
 
     myChart.setOption(option);
     myChart.resize();
@@ -226,6 +163,87 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleSetConfig = (res: any) => {
+    const option = {
+        tooltip: {  // 新增 tooltip 配置
+            trigger: 'item',  // 触发类型：坐标轴触发
+            axisPointer: {    // 坐标轴指示器配置
+                type: 'shadow' // 阴影指示器（适合柱状图）
+            },
+            formatter: function (params: any) {  // 自定义提示框内容
+                return `
+                    <div style="font-weight:bold">${params.data.name} ${params?.percent}%  ${res.realData[params.dataIndex].toLocaleString()}元</div>
+                `;
+            }
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['0%', '70%'],
+                center: ['20%', '50%'], // 图形向左偏移
+                avoidLabelOverlap: false,
+                itemStyle: {
+                    color: function (params: any) {
+                        return colorList[params.dataIndex];
+                    }
+                },
+                label: {
+                    show: false
+                },
+                emphasis: false,
+                labelLine: {
+                    show: false
+                },
+                data: res.pieData
+            }
+        ],
+        legend: {
+            orient: 'vertical',
+            left: 200,
+            top: 'center',
+            align: 'left',
+            itemGap: 10,
+            itemWidth: 12,
+            itemHeight: 12,
+            textStyle: {
+                color: '#fff',
+                rich: {
+                    name: {
+                        width: 90,  // 固定名称宽度
+                        align: 'left',
+                        padding: [0, 10, 0, 0]
+                    },
+                    percent: {
+                        width: 50,    // 固定百分比宽度
+                        align: 'right',
+                        padding: [0, 10, 0, 0]
+                    }
+                }
+            },
+            formatter: function (name: any) {
+                let percentData: any = res.lengedData.filter((item: any) => item.name === name)
+
+                return `{name|${name}}{percent|${percentData[0].value}%}`; // 使用rich样式
+            }
+        }
+    };
+    return option
+}
+
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
diff --git a/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue b/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue
index 5ce9eb3..347c801 100644
--- a/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue
+++ b/src/page/index/components/ThisMonthBenefits/ThisMonthBenefits.vue
@@ -52,6 +52,79 @@ onMounted(async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+})
+
+const resizeChart = () => {
+    myChart?.resize();
+};
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    myChart?.dispose();
+});
+
+const handleGetData = async () => {
+    const req: any = {
+        ProvinceCode: '530000',
+        StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
+    }
+    // const data = await handleGetWelFareSummary(req)
+
+    let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
+    let data: any = []
+    if (ThisMonthBenefits) {
+        data = JSON.parse(ThisMonthBenefits)
+    } else {
+        data = await handleGetWelFareSummary(req)
+        sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
+    }
+
+    console.log('fjidsfhasjfasdfdsf', data);
+
+
+    let seriesData: any = []
+    let realData: any = []
+    let category: any = []
+
+    allRealData.value = data
+
+    let list: any = data.WelFareGoodsTypeList.slice(0, 5)
+    if (list && list.length > 0) {
+        let sum: number = 0
+        list.forEach((item: any) => {
+            sum += item.GoodsCount
+        })
+
+
+        list.forEach((item: any) => {
+            category.push(item.GoodsTypeName)
+            seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
+        })
+    }
+
+    let res: any = {
+        category: category,// x轴的内容
+        seriesData: seriesData,// y轴的数据
+        realData: realData// 真实数据
+    }
+    return res
+}
+
+const handleSetConfig = (res: any) => {
+    const chartDom = document.getElementById('CoreCategory');
+    if (!chartDom) return {};
+    const rect = chartDom.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+
+    // 计算center位置（20%，50%）对应的实际像素
+    const centerX = width * 0.21;
+    const centerY = height * 0.5;
     const option = {
         tooltip: {  // 新增 tooltip 配置
             trigger: 'item',  // 触发类型：坐标轴触发
@@ -121,68 +194,23 @@ onMounted(async () => {
             }
         ]
     };
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-})
-
-const resizeChart = () => {
-    myChart?.resize();
-};
-
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    myChart?.dispose();
-});
-
-const handleGetData = async () => {
-    const req: any = {
-        ProvinceCode: '530000',
-        StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM')
-    }
-    // const data = await handleGetWelFareSummary(req)
-
-    let ThisMonthBenefits = sessionStorage.getItem('ThisMonthBenefits')
-    let data: any = []
-    if (ThisMonthBenefits) {
-        data = JSON.parse(ThisMonthBenefits)
-    } else {
-        data = await handleGetWelFareSummary(req)
-        sessionStorage.setItem("ThisMonthBenefits", JSON.stringify(data))
-    }
-
-    console.log('fjidsfhasjfasdfdsf', data);
-
-
-    let seriesData: any = []
-    let realData: any = []
-    let category: any = []
-
-    allRealData.value = data
-
-    let list: any = data.WelFareGoodsTypeList.slice(0, 5)
-    if (list && list.length > 0) {
-        let sum: number = 0
-        list.forEach((item: any) => {
-            sum += item.GoodsCount
-        })
-
-
-        list.forEach((item: any) => {
-            category.push(item.GoodsTypeName)
-            seriesData.push({ name: item.GoodsTypeName, value: item.GoodsCount, percent: ((item.GoodsCount / sum) * 100).toFixed(2) })
-        })
-    }
-
-    let res: any = {
-        category: category,// x轴的内容
-        seriesData: seriesData,// y轴的数据
-        realData: realData// 真实数据
-    }
-    return res
+    return option
 }
 
+
+const handleUpdatePie = async () => {
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+defineExpose({
+    handleUpdatePie
+});
+
 </script>
 
 
diff --git a/src/page/index/components/TradingAlert/TradingAlert.vue b/src/page/index/components/TradingAlert/TradingAlert.vue
index 17889cd..44010fb 100644
--- a/src/page/index/components/TradingAlert/TradingAlert.vue
+++ b/src/page/index/components/TradingAlert/TradingAlert.vue
@@ -39,9 +39,6 @@ const handleGetData = async () => {
         sessionStorage.setItem("TradingAlert", JSON.stringify(data))
     }
 
-
-
-
     console.log('skodpijasidjaslfddfas', data);
 
     TradingOtherData.value = {
@@ -76,6 +73,10 @@ const handleGetData = async () => {
     }
 }
 
+defineExpose({
+    handleGetData
+});
+
 </script>
 
 <template>
diff --git a/src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue b/src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue
index fb50151..ea69dbe 100644
--- a/src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue
+++ b/src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue
@@ -55,6 +55,14 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option: any = handleSetConfig(res)
+
+    myChart.setOption(option);
+    window.addEventListener('resize', resizeChart);
+}
+
+// 配置图表的config
+const handleSetConfig = (res: any) => {
     const option = {
         xAxis: {
             type: 'category',
@@ -168,13 +176,10 @@ const handleGoMounted = async () => {
             type: 'scroll'     // 如果图例过长，启用滚动
         },
     };
-
-
-    myChart.setOption(option);
-    window.addEventListener('resize', resizeChart);
+    return option
 }
 
-// 拿到断面流量数据
+// 拿到断面流量数据 
 const handleGetSectionFlowCount = async () => {
     // const req: any = {
     //     // StatisticsMonth: moment().subtract(1, 'M').format('YYYYMM'),
@@ -290,6 +295,18 @@ const handleGetSectionFlowCount = async () => {
     return res
 }
 
+// 更新图表数据
+const handleUpdatePie = async () => {
+    const res = await handleGetSectionFlowCount()
+    // 先清空旧的 series
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const option: any = handleSetConfig(res)
+    myChart.setOption(option);
+}
+
 const resizeChart = () => {
     myChart?.resize();
 };
@@ -298,6 +315,10 @@ onBeforeUnmount(() => {
     window.removeEventListener('resize', resizeChart);
     myChart?.dispose();
 });
+
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 <template>
diff --git a/src/page/index/components/VehicleModelStay/VehicleModelStay.vue b/src/page/index/components/VehicleModelStay/VehicleModelStay.vue
index 28b799a..5eafc77 100644
--- a/src/page/index/components/VehicleModelStay/VehicleModelStay.vue
+++ b/src/page/index/components/VehicleModelStay/VehicleModelStay.vue
@@ -46,6 +46,7 @@ watch(
     { deep: true }
 );
 
+
 // 初始运行的方法
 const handleGoMounted = async () => {
     const res: any = await handleGetData()
@@ -58,6 +59,15 @@ const handleGoMounted = async () => {
 
     myChart = echarts.init(chartDom);
 
+    const option = handleSetConfig(res)
+
+    myChart.setOption(option);
+    myChart.resize();
+    window.addEventListener('resize', resizeChart);
+
+}
+
+const handleSetConfig = (res: any) => {
     const option = {
         xAxis: {
             type: 'category',
@@ -169,11 +179,7 @@ const handleGoMounted = async () => {
         },
         color: ['#008CFF', '#69BCFF'] // 只需要两个颜色对应两个系列
     };
-
-    myChart.setOption(option);
-    myChart.resize();
-    window.addEventListener('resize', resizeChart);
-
+    return option
 }
 
 // 拿到数据的方法
@@ -283,7 +289,21 @@ onBeforeUnmount(() => {
     myChart?.dispose();
 });
 
+const handleUpdatePie = async () => {
+    if (myChart) {
+        myChart.setOption({
+            series: [], // 清空 series
+        }, { replaceMerge: 'series' }); // 替换 series 部分
+    }
 
+    const res: any = await handleGetData()
+    const option = handleSetConfig(res)
+    myChart.setOption(option)
+}
+
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 <template>
diff --git a/src/page/index/components/VehiclesEntering/VehiclesEntering.vue b/src/page/index/components/VehiclesEntering/VehiclesEntering.vue
index b783524..fd92f63 100644
--- a/src/page/index/components/VehiclesEntering/VehiclesEntering.vue
+++ b/src/page/index/components/VehiclesEntering/VehiclesEntering.vue
@@ -58,6 +58,21 @@ const handleGoMounted = async () => {
     myChart2 = echarts.init(chartDom2);
 
 
+    const option = handleSetConfig(res)
+    const option2 = handleSetConfig2(res)
+
+
+    myChart.setOption(option);
+    myChart2.setOption(option2);
+
+    myChart.resize();
+    myChart2.resize();
+
+    window.addEventListener('resize', resizeChart);
+    window.addEventListener('resize', resizeChart2);
+}
+
+const handleSetConfig = (res: any) => {
     const option = {
         tooltip: {
             trigger: 'axis',  // 触发类型：坐标轴触发
@@ -204,8 +219,10 @@ const handleGoMounted = async () => {
         ],
         color: ['#008CFF', '#69BCFF', '#FF5E5E', '#FF9500'] // Custom colors for each series
     };
+    return option
+}
 
-
+const handleSetConfig2 = (res: any) => {
     const option2 = {
         tooltip: {
             trigger: 'axis',  // 触发类型：坐标轴触发
@@ -318,15 +335,7 @@ const handleGoMounted = async () => {
             }
         ],
     }
-
-    myChart.setOption(option);
-    myChart2.setOption(option2);
-
-    myChart.resize();
-    myChart2.resize();
-
-    window.addEventListener('resize', resizeChart);
-    window.addEventListener('resize', resizeChart2);
+    return option2
 }
 
 // 拿到入区车辆的趋势
@@ -485,7 +494,6 @@ const handleGetSectionFlowCount = async () => {
     return res
 }
 
-
 const resizeChart = () => {
     myChart?.resize();
 };
@@ -498,6 +506,28 @@ onBeforeUnmount(() => {
     myChart2?.dispose();
 });
 
+// 更新图表数据
+const handleUpdatePie = async () => {
+    const res: any = await handleGetSectionFlowCount()
+
+    myChart.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    myChart2.setOption({
+        series: [], // 清空 series
+    }, { replaceMerge: 'series' }); // 替换 series 部分
+
+    const option = handleSetConfig(res)
+    const option2 = handleSetConfig2(res)
+
+    myChart.setOption(option)
+    myChart2.setOption(option2)
+}
+
+defineExpose({
+    handleUpdatePie
+});
 </script>
 
 
diff --git a/src/page/index/components/supplierListBox/supplierListBox.vue b/src/page/index/components/supplierListBox/supplierListBox.vue
index 583998c..8374f04 100644
--- a/src/page/index/components/supplierListBox/supplierListBox.vue
+++ b/src/page/index/components/supplierListBox/supplierListBox.vue
@@ -72,6 +72,9 @@ const handleGetData = async () => {
 }
 
 
+defineExpose({
+    handleGetData
+});
 </script>
 
 <template>
@@ -86,7 +89,7 @@ const handleGetData = async () => {
                 <div class="supplierMessageBoxTopItem">
                     <div class="supplierMessageBoxTopItemLabel">品牌方/家</div>
                     <div class="supplierMessageBoxTopItemvalue" style="color: #ef5a0d;">{{ supplierObj?.brandSide || "0"
-                        }}
+                    }}
                     </div>
                 </div>
             </div>
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 45ac4b9..37a87d8 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -65,6 +65,7 @@ import MemberMall from './components/MemberMall/index.vue'
 import AnalysisOfMember from './components/AnalysisOfMember/AnalysisOfMember.vue'
 import AreaLegend from './components/AreaLegend/AreaLegend.vue';
 import { useRouter } from 'vue-router'; // 新增
+import moment from 'moment';
 
 
 
@@ -112,15 +113,281 @@ let mapClickComeForm = ref<string>("")
 // 当前招商信息的枚举
 let noticeMessageObj = ref<any>()
 
+// 创建组件实例
+// 服务区概况
+const OverviewOfServiceAreaRef = ref<any>()
+// 交易预警
+const TradingAlertRef = ref<any>()
+// 核心经营数据
+const CoreBusinessDataRef = ref<any>()
+// 断面流量趋势
+const TrendOfTrafficFlowRef = ref<any>()
+// 入区车流趋势
+const VehiclesEnteringRef = ref<any>()
+// 经营效益趋势
+const VehicleModelStayRef = ref<any>()
+// 年龄
+const CustomerAgeGroupRef = ref<any>()
+// 性别
+const GenderCustomerGroupRef = ref<any>()
+// 偏好类型
+const PreferenceTypeRef = ref<any>()
+// 客群特征分析
+const CustomerGroupRef = ref<any>()
+// 客群消费偏好
+const CustomerConsumptionPreferencesRef = ref<any>()
+// 消费转化率对比图
+const ConsumptionConversionRef = ref<any>()
+// 消费水平
+const ConsumptionLevelRef = ref<any>()
+// 消费时段分析
+const ConsumptionPeriodRef = ref<any>()
+// 品牌消费水平
+const BrandConsumptionLevelRef = ref<any>()
+// 营收特征
+const BusinessCaseRef = ref<any>()
+// 区域营收占比
+const RegionalRevenueRef = ref<any>()
+// 业态结构占比
+const BusinessStructureRef = ref<any>()
+// 节假日营收
+const FestivalRevenueSumInfoRef = ref<any>()
+// 热门商品榜单
+const HotProductListRef = ref<any>()
+// 商户类别比例图 和 下面的列表
+const BrandDetailRef = ref<any>()
+// 供应商
+const SupplierListBoxRef = ref<any>()
+// 商城订单统计
+const MallOrderStatisticsRef = ref<any>()
+// 本月福利金发送额度
+const ThisMonthBenefitsRef = ref<any>()
+
 
 onMounted(() => {
     let currentUser: any = sessionStorage.getItem('currentUser')
     if (!currentUser) {
         router.push('/login')
     }
+
+    // 先判断当前是否已经存在了 之前的整点数据
+    let integralPoint: string = sessionStorage.getItem('integralPoint') || ""
+    console.log('integralPointintegralPoint', integralPoint);
+    // 如果有 就拿当前时间取对比
+    if (integralPoint) {
+        // 如果缓存里面的时间 跟当前的整点时间一样 那就触发 定时器方法 
+        let nowTime: string = moment().format('YYYY-MM-DD HH')
+        let time: string = nowTime + ':00:00'
+        // timerMethod()
+        if (time === integralPoint) {
+            // 调用定时器方法
+            timerMethod()
+        } else {
+            handleGetUpdateAllData()
+        }
+    } else {
+        // 如果没有整点缓存 那就拿到当前最近的整点数据
+        let nowTime: string = moment().format('YYYY-MM-DD HH')
+        let time: string = nowTime + ':00:00'
+        sessionStorage.setItem('integralPoint', time)
+    }
 })
 
 
+// 定时器方法
+const timerMethod = () => {
+    // 距离整点 不同时间的调用平路的设置
+    let checkInterval = 60 * 1000; // 默认1分钟检查一次
+    const now = new Date();
+    const secondsToNextHour = (60 - now.getMinutes()) * 60 - now.getSeconds();
+
+    // 关键优化：动态调整检查频率
+    if (secondsToNextHour <= 300) { // 距离整点5分钟时
+        checkInterval = 1000; // 切换到1秒检查
+    } else if (secondsToNextHour <= 1800) { // 距离整点30分钟时
+        checkInterval = 30 * 1000; // 30秒检查
+    } else {
+        checkInterval = 60 * 1000; // 否则1分钟检查
+    }
+
+    setTimeout(() => {
+        // handleGetUpdateAllData()
+        if (new Date().getMinutes() === 0) {
+            handleGetUpdateAllData()
+        }
+        timerMethod(); // 递归调用
+    }, checkInterval);
+}
+
+// 更新全部图表的缓存数据的方法
+const handleGetUpdateAllData = () => {
+    // 清除原本的缓存数据
+    handleClearCacheData()
+
+    // 服务区概况
+    OverviewOfServiceAreaRef.value.handleGetData()
+    // 交易预警
+    TradingAlertRef.value.handleGetData()
+    // 核心经营数据
+    CoreBusinessDataRef.value.handleGetMapRealData()
+    // 断面流量趋势
+    TrendOfTrafficFlowRef.value.handleUpdatePie()
+    // 入区车流趋势
+    VehiclesEnteringRef.value.handleUpdatePie()
+    // 经营效益
+    VehicleModelStayRef.value.handleUpdatePie()
+    if (CustomerAgeGroupRef.value) {
+        // 年龄
+        CustomerAgeGroupRef.value.handleUpdatePie()
+    }
+    if (GenderCustomerGroupRef.value) {
+        // 性别
+        GenderCustomerGroupRef.value.handleUpdatePie()
+    }
+    if (PreferenceTypeRef.value) {
+        // 偏好类型
+        PreferenceTypeRef.value.handleUpdatePie()
+    }
+    if (CustomerGroupRef.value) {
+        // 客群特征分析
+        CustomerGroupRef.value.handleUpdatePie()
+    }
+    if (CustomerConsumptionPreferencesRef.value) {
+        // 客群消费偏好
+        CustomerConsumptionPreferencesRef.value.handleUpdatePie()
+    }
+    if (ConsumptionConversionRef.value) {
+        // 消费转化率对比图
+        ConsumptionConversionRef.value.handleUpdatePie()
+    }
+    if (ConsumptionConversionRef.value) {
+        // 消费水平
+        ConsumptionConversionRef.value.handleUpdatePie()
+    }
+    if (ConsumptionPeriodRef.value) {
+        // 消费时段分析
+        ConsumptionPeriodRef.value.handleUpdatePie()
+    }
+    if (BrandConsumptionLevelRef.value) {
+        // 品牌消费水平
+        BrandConsumptionLevelRef.value.handleUpdatePie()
+    }
+    if (BusinessCaseRef.value) {
+        // 营收特征
+        BusinessCaseRef.value.handleUpdatePie()
+    }
+    if (RegionalRevenueRef.value) {
+        // 区域营收占比
+        RegionalRevenueRef.value.handleUpdatePie()
+    }
+    if (BusinessStructureRef.value) {
+        // 业态结构占比
+        BusinessStructureRef.value.handleUpdatePie()
+    }
+    if (FestivalRevenueSumInfoRef.value) {
+        // 节假日营收
+        FestivalRevenueSumInfoRef.value.handleUpdatePie()
+    }
+    if (HotProductListRef.value) {
+        // 热门商品榜单
+        HotProductListRef.value.handleUpdatePie()
+    }
+    if (BrandDetailRef.value) {
+        // 商户类别比例图 和 下面的列表
+        BrandDetailRef.value.handleUpdatePie()
+    }
+    if (SupplierListBoxRef.value) {
+        // 供应商
+        SupplierListBoxRef.value.handleGetData()
+    }
+    if (MallOrderStatisticsRef.value) {
+        // 商城订单统计
+        MallOrderStatisticsRef.value.handleGetData()
+    }
+    if (ThisMonthBenefitsRef.value) {
+        // 本月福利金额
+        ThisMonthBenefitsRef.value.handleGetData()
+    }
+}
+
+// 清空原先的缓存数据
+const handleClearCacheData = () => {
+    // 清除服务区概况的设备信息的缓存
+    sessionStorage.setItem("OverviewOfServiceArea", '')
+    sessionStorage.setItem('OverviewOfServiceAreaAI', '')
+    // 清除服务区承载的缓存
+    sessionStorage.setItem("OverviewOfServiceAreaBusiness", '')
+    sessionStorage.setItem("OverviewOfServiceAreaBusinessAI", '')
+    // 清除交易预警的缓存
+    sessionStorage.setItem("TradingAlert", '')
+    sessionStorage.setItem("TradingAlertAI", '')
+    // 清除实时数据的缓存
+    sessionStorage.setItem("CoreBusinessData", '')
+    sessionStorage.setItem("CoreBusinessDataAI", '')
+    sessionStorage.setItem("CoreBusinessDataMonth", '')
+    sessionStorage.setItem("CoreBusinessDataMonthAI", '')
+    // 断面流量趋势
+    sessionStorage.setItem("TrendOfTrafficFlow", '')
+    sessionStorage.setItem("TrendOfTrafficFlowYes", '')
+    sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
+    sessionStorage.setItem("TrendOfTrafficFlowYesAI", '')
+    // 经营效益趋势
+    sessionStorage.setItem("VehicleModelStay", '')
+    sessionStorage.setItem("VehicleModelStayAI", '')
+    // 年龄
+    sessionStorage.setItem("CustomerAgeGroup", '')
+    sessionStorage.setItem("CustomerAgeGroupAI", '')
+    // 性别
+    sessionStorage.setItem("GenderCustomerGroup", '')
+    sessionStorage.setItem("GenderCustomerGroupAI", '')
+    // 偏好类型
+    sessionStorage.setItem("PreferenceType", '')
+    sessionStorage.setItem("PreferenceTypeAI", '')
+    // 客群特征分析
+    sessionStorage.setItem("CustomerGroup", '')
+    sessionStorage.setItem("CustomerGroupAI", '')
+    // 客群消费偏好
+    sessionStorage.setItem("CustomerConsumptionPreferences", '')
+    sessionStorage.setItem("CustomerConsumptionPreferencesAI", '')
+    // 消费转化率对比图
+    sessionStorage.setItem("ConsumptionConversion", '')
+    sessionStorage.setItem("ConsumptionConversionAI", '')
+    // 消费水平
+    sessionStorage.setItem("ConsumptionLevel", '')
+    sessionStorage.setItem("ConsumptionLevelAI", '')
+    // 消费时段分析
+    sessionStorage.setItem("ConsumptionPeriod", '')
+    sessionStorage.setItem("ConsumptionPeriodAI", '')
+    // 品牌消费水平
+    sessionStorage.setItem("BrandConsumptionLevel", '')
+    sessionStorage.setItem("BrandConsumptionLevelAI", '')
+    // 营收特征
+    sessionStorage.setItem("BusinessCase", '')
+    sessionStorage.setItem("BusinessCaseAI", '')
+    // 区域营收占比
+    sessionStorage.setItem("RegionalRevenue", '')
+    sessionStorage.setItem("RegionalRevenueAI", '')
+    // 业态结构占比
+    sessionStorage.setItem("BusinessStructure", '')
+    sessionStorage.setItem("BusinessStructureAI", '')
+    // 节假日营收
+    sessionStorage.setItem("FestivalRevenueSumInfo", '')
+    sessionStorage.setItem("FestivalRevenueSumInfoAI", '')
+    // 热门商品榜单
+    sessionStorage.setItem("HotProductList", '')
+    // 商户类别比例图 和 下面的列表
+    sessionStorage.setItem("BrandDetail", '')
+    sessionStorage.setItem("BrandTab", '')
+    sessionStorage.setItem("BrandTabList", '')
+    // 供应商
+    sessionStorage.setItem("supplierListBox", '')
+    sessionStorage.setItem("supplierListBox2", '')
+    // 商城订单统计
+    sessionStorage.setItem("MallOrderStatistics", '')
+    // 本月福利金额
+    sessionStorage.setItem("ThisMonthBenefits", '')
+}
+
 // 改变页面样式
 const handleChangePageType = () => {
     if (pageType.value === 'center') {
@@ -223,7 +490,7 @@ const handleStopPrint = () => {
                 <div v-show="selectPageTab === 1">
                     <div class="content169LeftContent">
                         <!-- 服务区概况 -->
-                        <OverviewOfServiceArea />
+                        <OverviewOfServiceArea ref="OverviewOfServiceAreaRef" />
 
                         <NewBigTitleBox :title="'特情事件'" style="margin-top: 15px;" />
 
@@ -234,7 +501,7 @@ const handleStopPrint = () => {
                         <!-- <BusyTradingRanking style="margin-top: 11px;" /> -->
 
                         <!-- 交易预警 -->
-                        <TradingAlert />
+                        <TradingAlert ref="TradingAlertRef" />
                     </div>
                 </div>
 
@@ -258,7 +525,8 @@ const handleStopPrint = () => {
 
             <div class="content169Center">
                 <!-- 核心经营数据 -->
-                <CoreBusinessData :currentService="currentService" style="position: relative;z-index: 9;" />
+                <CoreBusinessData ref="CoreBusinessDataRef" :currentService="currentService"
+                    style="position: relative;z-index: 9;" />
 
                 <div v-show="selectPageTab === 1 && !showDialogBox">
                     <!-- 地图 -->
@@ -324,12 +592,12 @@ const handleStopPrint = () => {
                     <div class="content169LeftContent" style="margin-top: 21px;">
                         <div class="leftContentBoxItem">
                             <!-- 断面流量趋势 -->
-                            <TrendOfTrafficFlow :currentService="currentService" />
+                            <TrendOfTrafficFlow ref="TrendOfTrafficFlowRef" :currentService="currentService" />
                         </div>
 
                         <div class="leftContentBoxItem" style="margin-top: 23px;">
                             <!-- 入区车流趋势 -->
-                            <VehiclesEntering :currentService="currentService" />
+                            <VehiclesEntering ref="VehiclesEnteringRef" :currentService="currentService" />
                         </div>
 
                         <!-- <div class="leftContentBoxItem" style="margin-top: 30px;"> -->
@@ -340,7 +608,7 @@ const handleStopPrint = () => {
 
                         <div class="leftContentBoxItem" style="margin-top: 33px;">
                             <!-- 经营效益趋势 -->
-                            <VehicleModelStay />
+                            <VehicleModelStay ref="VehicleModelStayRef" />
                         </div>
                     </div>
                 </div>
@@ -383,28 +651,32 @@ const handleStopPrint = () => {
 
                 <div class="leftBottomContent">
                     <!-- 年龄 -->
-                    <CustomerAgeGroup style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
+                    <CustomerAgeGroup ref="CustomerAgeGroupRef"
+                        style="margin-top: 20px;width: calc((100% - 57px) / 3);" />
 
                     <!-- 性别 -->
-                    <GenderCustomerGroup style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
+                    <GenderCustomerGroup ref="GenderCustomerGroupRef"
+                        style="margin-left: 23px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
 
                     <!-- 停留时长 -->
                     <!-- <CustomerGroupStay style="margin-left: 20px;margin-top: 20px;" /> -->
 
                     <!-- 偏好类型 -->
-                    <PreferenceType style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
+                    <PreferenceType ref="PreferenceTypeRef"
+                        style="margin-left: 34px;margin-top: 20px;width: calc((100% - 57px) / 3);" />
                 </div>
 
                 <div class="left3stBottom" style="margin-top: 0;display: flex;flex-wrap: wrap;">
 
                     <div class="left3stBottomItem" style="width: calc((100% - 57px) / 3);">
                         <!-- 客群特征分析 -->
-                        <CustomerGroup style="margin-top: 15px;" />
+                        <CustomerGroup ref="CustomerGroupRef" style="margin-top: 15px;" />
                     </div>
 
                     <div class="left3stBottomItem" style="width: calc((100% - 57px) / 3 * 2);margin-left: 23px;">
                         <!-- 客群消费偏好 -->
-                        <CustomerConsumptionPreferences style="margin-top: 15px;" />
+                        <CustomerConsumptionPreferences ref="CustomerConsumptionPreferencesRef"
+                            style="margin-top: 15px;" />
                     </div>
                     <!-- <div class="left3stBottomItem">
 
@@ -428,27 +700,28 @@ const handleStopPrint = () => {
                     <div class="left3stBottomItemLeft">
                         <div class="left3stBottomItem">
                             <!-- 消费转化率对比图 -->
-                            <ConsumptionConversion style="margin-top: 15px;" />
+                            <ConsumptionConversion ref="ConsumptionConversionRef" style="margin-top: 15px;" />
                         </div>
 
                         <div class="left3stBottomItem">
                             <!-- 消费水平 -->
-                            <ConsumptionLevel style="margin-top: 15px;" />
+                            <ConsumptionLevel ref="ConsumptionLevelRef" style="margin-top: 15px;" />
                         </div>
 
                         <div class="left3stBottomItem">
                             <!-- 消费时段分析 -->
-                            <ConsumptionPeriod style="margin-top: 15px;" />
+                            <ConsumptionPeriod ref="ConsumptionPeriodRef" style="margin-top: 15px;" />
                         </div>
 
                         <div class="left3stBottomItem">
                             <!-- 品牌消费水平 -->
-                            <BrandConsumptionLevel style="margin-top: 15px;" />
+                            <BrandConsumptionLevel ref="BrandConsumptionLevelRef" style="margin-top: 15px;" />
                         </div>
                     </div>
 
                     <div class="left3stBottomItemRight">
-                        <BusinessCase :currentService="currentService" :selectTab="selectTab" />
+                        <!-- 营收特征 -->
+                        <BusinessCase ref="BusinessCaseRef" :currentService="currentService" :selectTab="selectTab" />
                     </div>
 
                 </div>
@@ -480,14 +753,15 @@ const handleStopPrint = () => {
                 <NewBigTitleBox :title="'经营业态'" style="margin-top: 20px;" />
                 <div class="rightContentBox">
                     <!-- 区域营收占比 -->
-                    <RegionalRevenue :currentService="currentService" style="margin-top: 10px;" />
+                    <RegionalRevenue ref="RegionalRevenueRef" :currentService="currentService"
+                        style="margin-top: 10px;" />
 
                     <!-- 多业态收入 -->
                     <!-- <MultiIndustryIncome style="margin-top: 34px;" :currentService="currentService" /> -->
 
                     <!-- 业态结构占比 -->
                     <!-- style="margin-top: 22px;" -->
-                    <BusinessStructure :currentService="currentService" />
+                    <BusinessStructure ref="BusinessStructureRef" :currentService="currentService" />
                 </div>
 
                 <NewBigTitleBox :title="'节假日营收'">
@@ -503,7 +777,8 @@ const handleStopPrint = () => {
                 </NewBigTitleBox>
                 <!-- 节假日营收 -->
                 <!-- <FestivalRevenue :currentService="currentService" :FestivalValue="FestivalValue" /> -->
-                <FestivalRevenueSumInfo :currentService="currentService" :FestivalValue="FestivalValue" />
+                <FestivalRevenueSumInfo ref="FestivalRevenueSumInfoRef" :currentService="currentService"
+                    :FestivalValue="FestivalValue" />
 
                 <!-- 电商模块 -->
                 <!-- <modalTitle :title="'电商模块'" style="margin-top: 20px;" /> -->
@@ -624,7 +899,7 @@ const handleStopPrint = () => {
                     <!-- <AssessmentScoringRanking style="margin-top: 19px;" /> -->
 
                     <!-- 热门商品榜单 -->
-                    <HotProductList style="margin-top: 20px;" :pageType="'left'" />
+                    <HotProductList ref="HotProductListRef" style="margin-top: 20px;" :pageType="'left'" />
                 </div>
 
                 <!-- 客群特征分析 -->
@@ -642,12 +917,12 @@ const handleStopPrint = () => {
                 <NewBigTitleBox :title="'品牌'" style="margin-top: 54px;" />
 
                 <!-- 商户类别比例图 和 下面的列表  -->
-                <BrandDetail />
+                <BrandDetail ref="BrandDetailRef" />
             </div>
 
             <div class="content1694stItem">
                 <NewBigTitleBox :title="'供应商'" style="margin-top: 54px;" />
-                <SupplierListBox />
+                <SupplierListBox ref="SupplierListBoxRef" />
                 <!-- 在线服务区和在线收银机 -->
                 <!-- <TodayTrend /> -->
 
@@ -664,12 +939,12 @@ const handleStopPrint = () => {
                 <NewBigTitleBox :title="'电商模块'" style="margin-top: 28px;" />
 
                 <!-- 商城订单统计 -->
-                <MallOrderStatistics style="margin-top: 20px;" />
+                <MallOrderStatistics ref="MallOrderStatisticsRef" style="margin-top: 20px;" />
 
                 <NewBigTitleBox :title="'商户生态结构图谱'" style="margin-top: 28px;" />
 
                 <!-- 本月福利金发送额度 -->
-                <ThisMonthBenefits style="margin-top: 10px;" />
+                <ThisMonthBenefits ref="ThisMonthBenefitsRef" style="margin-top: 10px;" />
 
                 <!-- 核心品类占比 -->
                 <!-- <CoreCategory style="margin-top: 10px;" /> -->